/* ============================================================================
Design system v3 — presentation layer. Loaded after every other stylesheet.
Every rule starts with html[data-ui="v3"]; removing that attribute restores
the previous look exactly. Spec: docs/design/spec.md.
Rules: logical properties only; no letter-spacing; the logo/brand rules in
v27.css and styles.css are never overridden here.
========================================================================== */
/* --- 3.1 / 3.2 Tokens ------------------------------------------------------ */
html[data-ui="v3"] body{
color-scheme:light;
/* Light palette = the original (v2.16.3) palette: values are the computed legacy tokens from styles.css / v27.css. */
--bg:#f8f5ef;--surface:#fffefa;--surface-2:#f5f1e9;--surface-3:#ece7dc;
--line:#e5ded2;--line-strong:#cec3b2;
--ink:#102f43;--ink-2:#526877;--ink-3:#7d8d98;
--primary:#123b54;--primary-hover:#0c3047;--primary-soft:#e8f0f3;--primary-fg:#ffffff;
--btn-bg:#123b54;--btn-fg:#ffffff;
--accent:#397f78;--accent-soft:#e5f1ee;
--brass:#c69a58;--brass-ink:#a77b3d;
--good:#1a7f45;--good-soft:#e6f6ec;--good-line:#bfe4cc;
--warn:#a77b3d;--warn-soft:#f7eedf;--warn-line:#e7d2ae;
--bad:#b42318;--bad-soft:#fdeceb;--bad-line:#f3c2bd;
--info:#397a94;--info-soft:#e8f2f5;--info-line:#c7dfe6;
--focus:#2f6fe0;
--sec-numerical:#397f78;--sec-numerical-soft:#e5f1ee;
--sec-verbal:#397a94;--sec-verbal-soft:#e8f2f5;
--sec-abstract:#a77b3d;--sec-abstract-soft:#f5ead9;
--sec-pq10:#3f9f92;--sec-pq10-soft:#e5f3ef;
--sec-derailers:#ae6140;--sec-derailers-soft:#f6e6de;
--sec-leadership:#ae6140;--sec-leadership-soft:#f6e6de;
--sh-1:0 2px 8px rgba(16,47,67,.055);--sh-2:0 10px 28px rgba(16,47,67,.09);
--e-float:0 -8px 24px rgba(16,47,67,.10),0 -1px 0 var(--line);
--e-sheet:0 -16px 40px rgba(16,47,67,.18);
--sh-float:0 18px 44px rgba(16,24,40,.16);
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
--r-ctl:12px;--r-opt:14px;--r-card:16px;--r-sheet:24px;
--topbar-h:56px;--tabbar-h:64px;--tap:48px;
--dock-h:calc(72px + env(safe-area-inset-bottom));
--gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
--t-display:1.5rem;--t-h1:1.3125rem;--t-h2:1.125rem;--t-h3:1rem;--t-q:1.0625rem;
--t-body:1rem;--t-label:.9375rem;--t-caption:max(.8125rem,13px);--t-micro:max(.75rem,11px);
--dur-press:90ms;--dur-fast:140ms;--dur:200ms;--dur-slow:320ms;--ease:cubic-bezier(.2,.7,.2,1);
--sec:var(--line-strong);
}
html[data-ui="v3"] body.dark{
color-scheme:dark;
background:var(--bg);color:var(--ink);
--bg:#0C1620;--surface:#132230;--surface-2:#1B2D3D;--surface-3:#243849;
--line:#263847;--line-strong:#60798D;
--ink:#EAF0F4;--ink-2:#B3C2CD;--ink-3:#93A6B4;
--primary:#7CC0D0;--primary-hover:#93CDDA;--primary-soft:#1B3544;--primary-fg:#06202C;
--btn-bg:#7CC0D0;--btn-fg:#06202C;
--accent:#8CCBE4;--accent-soft:#12303F;
--brass:#E0B365;--brass-ink:#E0B365;
--good:#6FD39A;--good-soft:#17301F;--good-line:#2A5A3C;
--warn:#F2B15B;--warn-soft:#35280F;--warn-line:#6B5223;
--bad:#FF9C94;--bad-soft:#3B1D1B;--bad-line:#7A3A36;
--info:#8EC4F0;--info-soft:#172B3D;--info-line:#2D4F6E;
--focus:#8EB4FF;
--sec-numerical:#8CCBE4;--sec-numerical-soft:#12303F;
--sec-verbal:#B9B2F2;--sec-verbal-soft:#25214A;
--sec-abstract:#E8BE72;--sec-abstract-soft:#3B2E10;
--sec-pq10:#7FD6B4;--sec-pq10-soft:#12342A;
--sec-derailers:#F0A1B8;--sec-derailers-soft:#411B2A;
--sec-leadership:#F0A97B;--sec-leadership-soft:#3F2314;
--target-navy:var(--primary);--target-cyan:var(--accent);--target-teal:var(--accent);
--target-gold:var(--brass-ink);--target-ink:var(--ink);--target-petrol:var(--accent);
--target-petrol-dark:var(--primary);--target-petrol-soft:var(--accent-soft);
--v27-navy:var(--primary);--v27-teal:var(--accent);
--e-float:0 -8px 24px rgba(0,0,0,.5),0 -1px 0 var(--line);
--e-sheet:0 -16px 40px rgba(0,0,0,.6);
--sh-1:none;--sh-2:0 1px 2px rgba(0,0,0,.4);
--sh-float:0 -8px 24px rgba(0,0,0,.5),0 -1px 0 var(--line);
}
/* --- Global hygiene --------------------------------------------------------- */
/* Light keeps the legacy desert-photo wash (body::before in v27.css); dark hides it as before. */
html[data-ui="v3"] body.dark::before{display:none}
html[data-ui="v3"] body:where(.dark).exam-gateway-active{background:var(--bg)}
html[data-ui="v3"] .main:focus{outline:none}
html[data-ui="v3"] :where(button,[role=button],a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
html[data-ui="v3"] .main{padding-inline:var(--gutter);padding-block-start:16px;padding-block-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px)}
@media(max-width:767px){html[data-ui="v3"] .main{max-inline-size:640px}}
html[data-ui="v3"] .footer{padding-block-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);font-size:var(--t-caption)}
html[data-ui="v3"] :where(body.dark) .footer{color:var(--ink-2)}
html[data-ui="v3"] :where(h1,h2,h3,h4,p,li,small,span,strong,button,summary){letter-spacing:0}
html[data-ui="v3"] .num,html[data-ui="v3"] .timer,html[data-ui="v3"] .score,html[data-ui="v3"] .exam-pos,html[data-ui="v3"] .question-position{font-variant-numeric:tabular-nums}
html[data-ui="v3"] input,html[data-ui="v3"] select,html[data-ui="v3"] textarea{font-size:max(1rem,16px)}
html[data-ui="v3"] .btn,html[data-ui="v3"] .icon-btn,html[data-ui="v3"] .tab-item,html[data-ui="v3"] .map-btn,html[data-ui="v3"] .option-btn{-webkit-tap-highlight-color:transparent}
/* --- Buttons (4.1) ---------------------------------------------------------- */
html[data-ui="v3"] .btn{min-height:48px;padding-inline:20px;border-radius:var(--r-ctl);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif;text-transform:none;border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .btn{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:none}
html[data-ui="v3"] .btn.primary{border-width:0}
html[data-ui="v3"] :where(body.dark) .btn.primary{background:var(--btn-bg);color:var(--btn-fg)}
html[data-ui="v3"] .btn.ghost{border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
html[data-ui="v3"] .btn.danger{border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .btn.danger{color:var(--bad);border-color:var(--bad-line);background:var(--bad-soft)}
html[data-ui="v3"] .btn.soft{border-width:0}
html[data-ui="v3"] :where(body.dark) .btn.soft{background:var(--primary-soft);color:var(--primary)}
html[data-ui="v3"] body.dark .btn.soft{color:var(--primary)}
html[data-ui="v3"] .btn:disabled,html[data-ui="v3"] .btn[disabled],html[data-ui="v3"] .btn[aria-disabled="true"]{cursor:not-allowed}
html[data-ui="v3"] :where(body.dark) .btn:disabled,html[data-ui="v3"] :where(body.dark) .btn[disabled],html[data-ui="v3"] :where(body.dark) .btn[aria-disabled="true"]{opacity:1;background:var(--surface-2);color:var(--ink-3);border-color:transparent}
html[data-ui="v3"] .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:var(--r-ctl)}
html[data-ui="v3"] #backBtn{width:44px;height:44px;min-width:44px}
@media(hover:hover){html[data-ui="v3"] .btn:hover,html[data-ui="v3"] .module-entry:hover,html[data-ui="v3"] .card:hover,html[data-ui="v3"] .simulation-primary:hover{transform:none}}
@media(prefers-reduced-motion:no-preference){
html[data-ui="v3"] .btn,html[data-ui="v3"] .option-btn,html[data-ui="v3"] .module-entry,html[data-ui="v3"] .tab-item,html[data-ui="v3"] .map-btn,html[data-ui="v3"] .icon-btn{transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-press) var(--ease)}
html[data-ui="v3"] .btn:active:not(:disabled),html[data-ui="v3"] .module-entry:active,html[data-ui="v3"] .tab-item:active,html[data-ui="v3"] .map-btn:active{transform:scale(.98)}
html[data-ui="v3"] .main.view-enter{animation:v3-fade var(--dur-fast) var(--ease)}
}
@keyframes v3-fade{from{opacity:0}to{opacity:1}}
/* --- Topbar (6.1) ------------------------------------------------------------ */
html[data-ui="v3"] .topbar{position:sticky;top:0;z-index:40;height:calc(56px + env(safe-area-inset-top));min-height:0;padding-block-start:env(safe-area-inset-top);padding-inline:max(8px,env(safe-area-inset-left),env(safe-area-inset-right));display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;border-block-end-width:1px;border-block-end-style:solid;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui="v3"] :where(body.dark) .topbar{background:var(--surface);border-block-end-color:var(--line)}
html[data-ui="v3"] body:where(.dark)[data-root="1"] .topbar{border-block-end-color:transparent}
html[data-ui="v3"] body[data-root="1"] .topbar::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:3px;background:var(--brass)}
/* Light: the original look has no brass rule under the root top bar (the thin legacy border stays). */
html[data-ui="v3"] body:not(.dark)[data-root="1"] .topbar::after{background:transparent}
html[data-ui="v3"] .topbar-start{gap:0;min-width:44px}
html[data-ui="v3"] .brand-home-btn{width:44px;height:44px;min-width:44px;display:grid;place-items:center}
html[data-ui="v3"] .topbar-start:has(#backBtn:not([style*="none"])) .brand-home-btn{display:none}
html[data-ui="v3"] .topbar-title{min-width:0;text-align:start}
html[data-ui="v3"] .topbar-title h1{font:700 .9375rem/1.3 "Plex Arabic",system-ui,sans-serif;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[data-ui="v3"] :where(body.dark) .topbar-title h1{color:var(--ink)}
html[data-ui="v3"] body[data-root="1"] .topbar-title h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.9375rem}
html[data-ui="v3"] body.dark .topbar-title h1{color:var(--ink)}
html[data-ui="v3"] .topbar-end{gap:6px}
/* Aa (reading size) only inside a session; elsewhere it lives in Settings. Legacy v27.css:401 uses !important. */
html[data-ui="v3"] .topbar-end>#fontBtn{display:none!important}
html[data-ui="v3"] body.session-active .topbar-end>#fontBtn{display:inline-grid!important;width:44px;height:44px;min-width:44px}
html[data-ui="v3"] body:where(.dark).session-active .topbar-end>#fontBtn{color:var(--ink)}
html[data-ui="v3"] body.dark .topbar-end>#fontBtn{color:var(--ink)}
html[data-ui="v3"] .topbar-slot{gap:0}
html[data-ui="v3"] .system-switch-button{inline-size:auto;max-inline-size:none;justify-content:center;min-height:44px;min-width:44px;padding-inline:12px;gap:6px;border-radius:var(--r-pill);border-width:1px;border-style:solid;font:500 var(--t-micro)/1.2 "Plex Arabic",system-ui,sans-serif;white-space:nowrap}
html[data-ui="v3"] :where(body.dark) .system-switch-button{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
html[data-ui="v3"] .system-switch-button .sys-long{display:none}
html[data-ui="v3"] .system-switch-button .sys-short{display:inline!important}
html[data-ui="v3"] body.session-active .system-switch-button{display:none}
/* --- Tab bar (4.3) ----------------------------------------------------------- */
html[data-ui="v3"] .tabbar{height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 max(8px,env(safe-area-inset-left),env(safe-area-inset-right)) env(safe-area-inset-bottom);border-block-start-width:1px;border-block-start-style:solid;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:50;grid-template-columns:repeat(5,minmax(0,1fr))}
html[data-ui="v3"] :where(body.dark) .tabbar{background:var(--surface);border-block-start-color:var(--line);box-shadow:var(--e-float)}
html[data-ui="v3"] .tab-item{min-height:56px;min-width:44px;gap:2px;padding:0;font:500 var(--t-micro)/1.2 "Plex Arabic",system-ui,sans-serif;position:relative;justify-content:center}
html[data-ui="v3"] :where(body.dark) .tab-item{color:var(--ink-3)}
html[data-ui="v3"] .tab-item small{font:500 var(--t-micro)/1.2 "Plex Arabic",system-ui,sans-serif;white-space:nowrap;overflow:visible;text-overflow:clip}
html[data-ui="v3"] .tab-ico{width:56px;height:30px;border-radius:var(--r-pill)}
html[data-ui="v3"] .tab-ico .ico{width:22px;height:22px}
html[data-ui="v3"] body.dark .tab-item.active{color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .tab-item.active{color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .tab-item.active .tab-ico{background:var(--primary-soft)}
html[data-ui="v3"] body:where(.dark) .tab-item.active::after{display:none}
/* Light theme: keep the original gold underline under the active tab (reference image A). */
html[data-ui="v3"] body:not(.dark) .tab-item.active::after{position:absolute;inset-block-end:6px;margin:0}
html[data-ui="v3"] body:not(.dark) .tab-item{position:relative}
html[data-ui="v3"] .tab-item.active small{font-weight:700}
html[data-ui="v3"] body.session-active .tabbar,html[data-ui="v3"] body.onboarding-active .tabbar,html[data-ui="v3"] body.exam-gateway-active .tabbar{display:none}
@media(min-width:768px){html[data-ui="v3"] .tabbar{display:none}}
/* --- Rail (tablet/desktop) --------------------------------------------------- */
html[data-ui="v3"] .rail{border-inline-end-width:1px;border-inline-end-style:solid}
html[data-ui="v3"] :where(body.dark) .rail{background:var(--surface);border-inline-end-color:var(--line)}
html[data-ui="v3"] .rail-item{border-radius:var(--r-ctl);min-height:44px}
html[data-ui="v3"] :where(body.dark) .rail-item{color:var(--ink-2)}
html[data-ui="v3"] body.dark .rail-item.active{background:var(--primary-soft);color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .rail-item.active{background:var(--primary-soft);color:var(--primary)}
/* --- Toast (4.9). Legacy centres with a physical offset + translateX; reset all insets. -- */
html[data-ui="v3"] .toast{inset:auto;inset-inline:16px;inset-block-end:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));margin-inline:auto;inline-size:fit-content;max-inline-size:min(420px,calc(100vw - 32px));transform:translateY(8px);border-radius:var(--r-ctl);padding:12px 16px;font:500 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif;text-align:start;z-index:120}
html[data-ui="v3"] :where(body.dark) .toast{background:var(--ink);color:var(--bg);box-shadow:0 8px 24px rgba(15,42,58,.22)}
html[data-ui="v3"] .toast.show{transform:none}
html[data-ui="v3"] body.dark .toast{background:var(--surface-3);color:var(--ink)}
html[data-ui="v3"] body.session-active .toast{inset-block-end:calc(var(--dock-h) + 12px)}
@media(min-width:768px){html[data-ui="v3"] .toast{inset-block-end:28px}html[data-ui="v3"] body.session-active .toast{inset-block-end:calc(var(--dock-h) + 12px)}}
/* --- Dialogs and sheets (4.11) ------------------------------------------------ */
/* Visual QA #5: the dark scrim used the page colour, so it dimmed nothing. Black in dark, navy in light. */
html[data-ui="v3"] .dialog::backdrop{background:rgba(16,32,48,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui="v3"] body.dark .dialog::backdrop{background:rgba(0,0,0,.68)}
html[data-ui="v3"] .dialog-panel{border-radius:var(--r-sheet);padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
html[data-ui="v3"] :where(body.dark) .dialog-panel{background:var(--surface);color:var(--ink);box-shadow:var(--e-sheet)}
html[data-ui="v3"] .sheet .dialog-panel{border-radius:var(--r-sheet) var(--r-sheet) 0 0}
html[data-ui="v3"] .dialog-actions .btn{min-height:52px}
@media(min-width:768px){html[data-ui="v3"] .sheet .dialog-panel{border-radius:var(--r-sheet)}}
html[data-ui="v3"] .dialog-panel{margin-inline:auto}
/* --- Session shell (6.4, 4.5, 4.6, 6.6) ------------------------------------------ */
html[data-ui="v3"] body.session-active .main{padding-block-start:8px;padding-block-end:calc(var(--dock-h) + 24px)}
html[data-ui="v3"] .session{max-inline-size:820px;min-inline-size:0}
html[data-ui="v3"] .session,html[data-ui="v3"] #questionHost,html[data-ui="v3"] .target-session-wrap,html[data-ui="v3"] .target-numerical-flow{min-inline-size:0}
/* Exam strip: two rows, nothing can overflow at 360px. Legacy: styles.css .exam-bar, .map-btn, .exam-track */
html[data-ui="v3"] .exam-bar{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pos mode" "map timer";gap:8px 12px;align-items:center;margin:0 0 12px;padding:8px 0 12px;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui="v3"] :where(body.dark) .exam-bar{background:var(--bg)}
html[data-ui="v3"] .exam-bar-start,html[data-ui="v3"] .exam-bar-end{display:contents}
html[data-ui="v3"] .exam-pos{grid-area:pos;font:400 var(--t-caption)/1.4 "Plex Arabic",system-ui,sans-serif;white-space:nowrap}
html[data-ui="v3"] :where(body.dark) .exam-pos{color:var(--ink-2)}
html[data-ui="v3"] .exam-pos b{font-weight:700}
html[data-ui="v3"] :where(body.dark) .exam-pos b{color:var(--ink)}
html[data-ui="v3"] .mode-pill{grid-area:mode;justify-self:end;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding-inline:12px;border-radius:var(--r-pill);font:500 var(--t-caption)/1.2 "Plex Arabic",system-ui,sans-serif;white-space:nowrap}
html[data-ui="v3"] .mode-pill .ico{width:16px;height:16px}
html[data-ui="v3"] :where(body.dark) .mode-pill.exam{background:var(--warn-soft);color:var(--warn)}
html[data-ui="v3"] :where(body.dark) .mode-pill.training{background:var(--info-soft);color:var(--info)}
html[data-ui="v3"] #timerSlot,html[data-ui="v3"] #targetTimerSlot{grid-area:timer;justify-self:end;min-inline-size:0}
html[data-ui="v3"] .map-btn{grid-area:map;justify-self:start;min-height:44px;padding-inline:14px;gap:8px;border-radius:var(--r-pill);border-width:1px;border-style:solid;font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .map-btn{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
html[data-ui="v3"] .map-btn .ico{width:20px;height:20px}
html[data-ui="v3"] .timer{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding-inline:12px;border-radius:var(--r-pill);border-width:0;font:700 var(--t-label)/1 "Plex Arabic",system-ui,sans-serif;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;animation:none}
html[data-ui="v3"] :where(body.dark) .timer{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] .timer .ico{width:18px;height:18px}
html[data-ui="v3"] :where(body.dark) .timer.warn{background:var(--warn-soft);color:var(--warn)}
html[data-ui="v3"] .timer.danger{animation:none}
html[data-ui="v3"] :where(body.dark) .timer.danger{background:var(--bad-soft);color:var(--bad)}
html[data-ui="v3"] .exam-track{position:absolute;inset:auto;inset-inline:0;inset-block-end:0;height:4px;border-radius:0;overflow:hidden}
html[data-ui="v3"] :where(body.dark) .exam-track{background:var(--surface-2)}
html[data-ui="v3"] .exam-track>span{height:100%}
html[data-ui="v3"] :where(body.dark) .exam-track>span{background:var(--brass)}
@media(prefers-reduced-motion:no-preference){html[data-ui="v3"] .exam-track>span{transition:width var(--dur-slow) var(--ease)}}
@media(max-height:700px){html[data-ui="v3"] .exam-bar{position:relative;top:auto}}
/* Question card */
html[data-ui="v3"] .question-card,html[data-ui="v3"] body.session-active .question-card{--sec:var(--line-strong);--sec-soft:var(--surface-2);padding:16px 16px 20px;border-width:1px;border-style:solid;border-block-start:4px solid var(--sec);border-radius:var(--r-card);overflow:visible}
html[data-ui="v3"] :where(body.dark) .question-card,html[data-ui="v3"] body:where(.dark).session-active .question-card{background:var(--surface);border-color:var(--line);border-block-start:4px solid var(--sec);box-shadow:none}
html[data-ui="v3"] body .question-card[data-section="numerical"]{--sec:var(--sec-numerical);--sec-soft:var(--sec-numerical-soft)}
html[data-ui="v3"] body .question-card[data-section="verbal"]{--sec:var(--sec-verbal);--sec-soft:var(--sec-verbal-soft)}
html[data-ui="v3"] body .question-card[data-section="abstract"]{--sec:var(--sec-abstract);--sec-soft:var(--sec-abstract-soft)}
html[data-ui="v3"] body .question-card[data-section="pq10"]{--sec:var(--sec-pq10);--sec-soft:var(--sec-pq10-soft)}
html[data-ui="v3"] body .question-card[data-section="derailers"]{--sec:var(--sec-derailers);--sec-soft:var(--sec-derailers-soft)}
html[data-ui="v3"] body .question-card[data-section="leadership"]{--sec:var(--sec-leadership);--sec-soft:var(--sec-leadership-soft)}
html[data-ui="v3"] .question-toolbar{margin-block-end:8px}
html[data-ui="v3"] .question-toolbar .icon-btn{width:44px;height:44px;min-width:44px}
html[data-ui="v3"] .question-kind .badge,html[data-ui="v3"] .question-kind .target-question-tag{min-height:28px;padding-inline:12px;border-radius:var(--r-pill);border-width:0;font:500 var(--t-caption)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .question-kind .badge,html[data-ui="v3"] :where(body.dark) .question-kind .target-question-tag{background:var(--sec-soft);color:var(--sec)}
html[data-ui="v3"] body.dark .question-kind .badge{color:var(--sec)}
html[data-ui="v3"] .question-text,html[data-ui="v3"] body.session-active .question-text{font:500 var(--t-q)/1.85 "Plex Arabic",system-ui,sans-serif;margin-block:12px 16px;max-inline-size:38rem}
html[data-ui="v3"] .question-text.likert{max-inline-size:none;text-align:center}
/* Options (4.5). Legacy uses !important on selected/correct/wrong in v27.css:155 and styles.css:559. */
html[data-ui="v3"] .options{gap:10px}
html[data-ui="v3"] .option-btn,html[data-ui="v3"] body.session-active .option-btn{position:relative;min-height:56px;padding:10px 12px;gap:12px;grid-template-columns:36px minmax(0,1fr);border-width:1px;border-style:solid;border-radius:var(--r-opt);text-align:start;font:400 1rem/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .option-btn,html[data-ui="v3"] body:where(.dark).session-active .option-btn{border-color:var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:none}
/* Hover shading stays unconditional as in the legacy system (tests/v2151/touch-hover.cjs pins it); the new-system neutraliser below handles touch. */
html[data-ui="v3"] :where(body.dark) .option-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-strong)}
/* Touch browsers can keep :hover after a tap (target-system.css:696). Keep an unanswered option identical to its siblings at the v3 resting border. */
@media(hover:none){html[data-ui="v3"] :where(body.dark) .target-question.numerical-question .option-btn:hover:not(:disabled):not(.selected):not(.correct-option):not(.wrong-option),html[data-ui="v3"] :where(body.dark) .target-question.verbal-question .option-btn:hover:not(:disabled):not(.selected):not(.correct-option):not(.wrong-option){background:var(--surface);border-color:var(--line-strong)}}
html[data-ui="v3"] .option-label{width:36px;height:36px;border-radius:var(--r-ctl);font-weight:700;font-size:.9375rem}
html[data-ui="v3"] :where(body.dark) .option-label{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .option-btn:disabled{opacity:1;color:var(--ink)}
html[data-ui="v3"] body.session-active .option-btn.selected,html[data-ui="v3"] .option-btn.selected{padding:9px 11px;border-width:2px !important;border-style:solid !important}
html[data-ui="v3"] body:where(.dark).session-active .option-btn.selected,html[data-ui="v3"] :where(body.dark) .option-btn.selected{border-color:var(--primary) !important;background:var(--primary-soft)!important;box-shadow:none!important}
html[data-ui="v3"] :where(body.dark) .option-btn.selected .option-label{background:var(--primary);color:var(--primary-fg)}
html[data-ui="v3"] body.session-active .option-btn.selected::after,html[data-ui="v3"] body.session-active .option-btn.correct-option::after,html[data-ui="v3"] body.session-active .option-btn.wrong-option::after,html[data-ui="v3"] .option-btn.correct-option::after,html[data-ui="v3"] .option-btn.wrong-option::after{content:"✓";position:absolute;inset-inline-end:10px;inset-block-start:50%;transform:translateY(-50%);inline-size:24px;block-size:24px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:var(--primary-fg);font:700 .8125rem/1 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] body.session-active .option-btn.selected>span:nth-child(2),html[data-ui="v3"] .option-btn.correct-option>span:nth-child(2),html[data-ui="v3"] .option-btn.wrong-option>span:nth-child(2){padding-inline-end:32px}
html[data-ui="v3"] .option-btn.correct-option{padding:9px 11px;border-width:2px !important;border-style:solid !important}
html[data-ui="v3"] :where(body.dark) .option-btn.correct-option{border-color:var(--good) !important;background:var(--good-soft)!important}
html[data-ui="v3"] :where(body.dark) .option-btn.correct-option .option-label{background:var(--good);color:#fff}
html[data-ui="v3"] body.dark .option-btn.correct-option .option-label{color:#06202C}
html[data-ui="v3"] body:where(.dark).session-active .option-btn.correct-option::after,html[data-ui="v3"] :where(body.dark) .option-btn.correct-option::after{background:var(--good);color:#fff}
html[data-ui="v3"] body.dark .option-btn.correct-option::after{color:#06202C}
html[data-ui="v3"] .option-btn.wrong-option{padding:9px 11px;border-width:2px !important;border-style:solid !important}
html[data-ui="v3"] :where(body.dark) .option-btn.wrong-option{border-color:var(--bad) !important;background:var(--bad-soft)!important}
html[data-ui="v3"] :where(body.dark) .option-btn.wrong-option .option-label{background:var(--bad);color:#fff}
html[data-ui="v3"] body.dark .option-btn.wrong-option .option-label{color:#3B1D1B}
html[data-ui="v3"] body.session-active .option-btn.wrong-option::after,html[data-ui="v3"] .option-btn.wrong-option::after{content:"✕";background:var(--bad);color:#fff}
html[data-ui="v3"] body.dark .option-btn.wrong-option::after{color:#3B1D1B}
/* Light: the selected tick uses the legacy teal (v27.css:160). */
html[data-ui="v3"] body:not(.dark).session-active .option-btn.selected::after{background:var(--v27-teal);color:#fff}
/* Abstract options: colours only (generator markup and sizes are frozen). */
html[data-ui="v3"] body:where(.dark).session-active .abstract-option.selected{border-color:var(--primary)!important;background:var(--primary-soft)!important;box-shadow:none!important}
html[data-ui="v3"] body:where(.dark).session-active .abstract-option.selected::after{background:var(--primary);color:var(--primary-fg)}
/* Docked session bar (6.6): legacy styles.css .session-nav, v27.css:177, target-system.css:446,508 */
html[data-ui="v3"] body.session-active .session-nav,html[data-ui="v3"] body.session-active .session-nav.question-pagination,html[data-ui="v3"] body.session-active .session-nav.target-question-nav{position:fixed;inset:auto;inset-inline:0;inset-block-end:0;z-index:48;margin:0;inline-size:auto;max-inline-size:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.4fr);align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-left),env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom));border-width:0;border-block-start-width:1px;border-block-start-style:solid;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui="v3"] body:where(.dark).session-active .session-nav,html[data-ui="v3"] body:where(.dark).session-active .session-nav.question-pagination,html[data-ui="v3"] body:where(.dark).session-active .session-nav.target-question-nav{background:var(--surface);border-block-start-color:var(--line);box-shadow:var(--e-float)}
html[data-ui="v3"] body.session-active .session-nav .prev-question{justify-self:stretch;min-height:52px;min-width:0}
html[data-ui="v3"] body.session-active .session-nav .next-question{justify-self:stretch;min-height:52px;min-width:0}
html[data-ui="v3"] body.session-active .session-nav .btn{min-height:52px;font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px}
html[data-ui="v3"] body.session-active .session-nav .question-position,html[data-ui="v3"] body.session-active .target-question-nav .question-position{justify-self:center;font:500 var(--t-caption)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] body:where(.dark).session-active .session-nav .question-position,html[data-ui="v3"] body:where(.dark).session-active .target-question-nav .question-position{color:var(--ink-2)}
@media(min-width:768px){html[data-ui="v3"] body.session-active .session-nav,html[data-ui="v3"] body.session-active .session-nav.question-pagination,html[data-ui="v3"] body.session-active .session-nav.target-question-nav{padding-inline:max(16px,calc((100% - 820px) / 2))}}
/* Text arrows become mirrored icons: the glyph is hidden and a mask draws the chevron. */
html[data-ui="v3"] .session-nav .btn>span[aria-hidden="true"]{display:inline-block;inline-size:20px;block-size:20px;font-size:0;line-height:0;background:currentColor;-webkit-mask:var(--chev-start) center/contain no-repeat;mask:var(--chev-start) center/contain no-repeat}
html[data-ui="v3"] .session-nav .next-question>span[aria-hidden="true"]{-webkit-mask-image:var(--chev-end);mask-image:var(--chev-end)}
html[data-ui="v3"] body{--chev-start:url("data:image/svg+xml;utf8,");--chev-end:url("data:image/svg+xml;utf8,")}
html[data-ui="v3"][dir="ltr"] body{--chev-start:url("data:image/svg+xml;utf8,");--chev-end:url("data:image/svg+xml;utf8,")}
/* --- Avatars / section identity (3.1) ------------------------------------------------------ */
html[data-ui="v3"] .avatar{border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .avatar{background:var(--primary-soft);color:var(--primary)}
html[data-ui="v3"] body.dark .avatar{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .avatar.accent{background:var(--accent-soft);color:var(--accent)}
html[data-ui="v3"] :where(body.dark) .avatar.good{background:var(--good-soft);color:var(--good)}
html[data-ui="v3"] :where(body.dark) .avatar.warn{background:var(--warn-soft);color:var(--warn)}
html[data-ui="v3"] :where(body.dark) .avatar.bad{background:var(--bad-soft);color:var(--bad)}
html[data-ui="v3"] :where(body.dark) .avatar.info{background:var(--info-soft);color:var(--info)}
html[data-ui="v3"] body.dark .avatar.solid{background:var(--btn-bg);color:var(--btn-fg)}
html[data-ui="v3"] :where(body.dark) .avatar.solid{background:var(--btn-bg);color:var(--btn-fg)}
html[data-ui="v3"] :where(body.dark) .avatar.cognitive{background:var(--sec-numerical-soft);color:var(--sec-numerical)}
html[data-ui="v3"] :where(body.dark) .avatar.personality{background:var(--sec-pq10-soft);color:var(--sec-pq10)}
html[data-ui="v3"] :where(body.dark) .avatar.derailers{background:var(--sec-derailers-soft);color:var(--sec-derailers)}
html[data-ui="v3"] :where(body.dark) .avatar.leadership{background:var(--sec-leadership-soft);color:var(--sec-leadership)}
html[data-ui="v3"] :where(body.dark) .avatar.sand{background:var(--sec-abstract-soft);color:var(--sec-abstract)}
html[data-ui="v3"] :where(body.dark) .module-entry .avatar.info,
html[data-ui="v3"] :where(body.dark) .full-section-card .avatar.info,
html[data-ui="v3"] :where(body.dark) .v27-domain-card .avatar.info,
html[data-ui="v3"] :where(body.dark) .v27-wide-tool .avatar.info{background:var(--sec-verbal-soft);color:var(--sec-verbal)}
html[data-ui="v3"] body.dark .avatar.cognitive{color:var(--sec-numerical)}
html[data-ui="v3"] body.dark .avatar.personality{color:var(--sec-pq10)}
html[data-ui="v3"] body.dark .avatar.derailers{color:var(--sec-derailers)}
html[data-ui="v3"] body.dark .avatar.leadership{color:var(--sec-leadership)}
html[data-ui="v3"] body.dark .avatar.sand{color:var(--sec-abstract)}
/* --- Home hero: the photo stays (same file, same URL); the overlay keeps text legible (6.3) -- */
html[data-ui="v3"] .v27-home-hero{min-height:104px;margin:0 0 12px;padding:16px 20px;border-radius:var(--r-card);border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .v27-home-hero{border-color:var(--line);box-shadow:none}
/* Visual QA #2: the scrim was weakest where RTL text ends. Direction-neutral, nearly uniform wash under the text. */
html[data-ui="v3"] :where(body.dark) .v27-home-hero::before{background:linear-gradient(270deg,rgba(255,255,255,.94),rgba(255,255,255,.86))}
html[data-ui="v3"] body.dark .v27-home-hero::before{background:linear-gradient(to bottom,rgba(12,22,32,.55),rgba(12,22,32,.92))}
html[data-ui="v3"] .v27-home-hero>div{max-inline-size:100%}
html[data-ui="v3"] .v27-home-hero span{display:none}
html[data-ui="v3"] .v27-home-hero h2{font:700 var(--t-display)/1.35 "Plex Arabic",system-ui,sans-serif;margin:0}
html[data-ui="v3"] :where(body.dark) .v27-home-hero h2{color:var(--ink)}
html[data-ui="v3"] .v27-home-hero p{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif;margin:4px 0 0}
html[data-ui="v3"] :where(body.dark) .v27-home-hero p{color:var(--ink-2)}
html[data-ui="v3"] body.dark .v27-home-hero h2{color:var(--ink)}
html[data-ui="v3"] body.dark .v27-home-hero p{color:var(--ink-2)}
/* Primary action, secondary rows */
html[data-ui="v3"] .simulation-primary,html[data-ui="v3"] .v27-primary-launch{min-height:72px;padding:12px 16px;gap:12px;border-radius:var(--r-card);border-width:0}
html[data-ui="v3"] :where(body.dark) .simulation-primary,html[data-ui="v3"] :where(body.dark) .v27-primary-launch{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}
html[data-ui="v3"] .simulation-primary .avatar{inline-size:40px;block-size:40px}
html[data-ui="v3"] :where(body.dark) .simulation-primary .avatar{background:rgba(255,255,255,.14);color:var(--btn-fg)}
html[data-ui="v3"] body.dark .simulation-primary .avatar{background:rgba(6,32,44,.12);color:var(--btn-fg)}
html[data-ui="v3"] .simulation-primary strong{font:700 var(--t-h2)/1.45 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .simulation-primary strong{color:inherit}
html[data-ui="v3"] .simulation-primary small{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .simulation-primary small{color:inherit;opacity:.9}
html[data-ui="v3"] :where(body.dark) .simulation-primary .chev{color:inherit}
html[data-ui="v3"] .before-start-card,html[data-ui="v3"] .install-card,html[data-ui="v3"] .v27-wide-tool,html[data-ui="v3"] .guide-launch{min-height:56px;padding:12px 16px;gap:12px;border-radius:var(--r-card);border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .before-start-card,
html[data-ui="v3"] :where(body.dark) .install-card,
html[data-ui="v3"] :where(body.dark) .v27-wide-tool,
html[data-ui="v3"] :where(body.dark) .guide-launch{border-color:var(--line);background:var(--surface);box-shadow:none;color:var(--ink)}
html[data-ui="v3"] body.dark .before-start-card{background:var(--surface);border-color:var(--line)}
html[data-ui="v3"] .before-start-card .avatar,html[data-ui="v3"] .v27-wide-tool .avatar,html[data-ui="v3"] .install-card .install-symbol{inline-size:36px;block-size:36px;border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .before-start-card .avatar{background:var(--sec-abstract-soft);color:var(--brass-ink)}
html[data-ui="v3"] .before-start-card strong,html[data-ui="v3"] .install-card strong,html[data-ui="v3"] .v27-wide-tool strong{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .before-start-card small,html[data-ui="v3"] .install-card small,html[data-ui="v3"] .v27-wide-tool small{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .before-start-card small,html[data-ui="v3"] :where(body.dark) .install-card small,html[data-ui="v3"] :where(body.dark) .v27-wide-tool small{color:var(--ink-2)}
html[data-ui="v3"] .install-card strong,html[data-ui="v3"] .install-card small{display:block}
html[data-ui="v3"] .section{margin:24px 0 12px}
html[data-ui="v3"] body.home-view .section{margin:24px 0 12px}
html[data-ui="v3"] .section h3{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .section h3{color:var(--ink-2)}
html[data-ui="v3"] .home-quick-actions{gap:8px}
html[data-ui="v3"] .home-quick-actions .btn{min-height:48px;padding-inline:8px;font-size:var(--t-caption)}
html[data-ui="v3"] .home-disclaimer{border-block-start-width:1px;border-block-start-style:solid;font:400 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .home-disclaimer{border-block-start-color:var(--line);color:var(--ink-2)}
html[data-ui="v3"] :where(body.dark) .home-disclaimer strong{color:var(--primary)}
html[data-ui="v3"] .v27-new-files-alert{position:absolute;z-index:3;inset-block-start:8px;inset-inline-start:12px;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);font:500 var(--t-micro)/1.3 "Plex Arabic",system-ui,sans-serif;font-style:normal;white-space:normal;max-inline-size:calc(100% - 24px)}
html[data-ui="v3"] :where(body.dark) .v27-new-files-alert{background:var(--brass-ink);color:#fff;box-shadow:none}
html[data-ui="v3"] body.dark .v27-new-files-alert{color:#1A1305}
html[data-ui="v3"] .module-entry:has(.v27-new-files-alert){padding-block-start:52px}
/* --- Section tiles (4.4): legacy styles.css:1164, v27.css:54, target-system.css ------------------ */
html[data-ui="v3"] .module-entry-grid,html[data-ui="v3"] .target-legacy-module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html[data-ui="v3"] .module-entry,html[data-ui="v3"] .v27-module-tile,html[data-ui="v3"] .full-section-card,html[data-ui="v3"] .v27-full-section,html[data-ui="v3"] .target-full-section{--hue:var(--line-strong);position:relative;min-height:112px;padding:16px;gap:8px;border-width:1px;border-style:solid;border-inline-start:4px solid var(--hue);border-radius:var(--r-card);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui="v3"] :where(body.dark) .module-entry,
html[data-ui="v3"] :where(body.dark) .v27-module-tile,
html[data-ui="v3"] :where(body.dark) .full-section-card,
html[data-ui="v3"] :where(body.dark) .v27-full-section,
html[data-ui="v3"] :where(body.dark) .target-full-section{border-color:var(--line);border-inline-start:4px solid var(--hue);background:var(--surface);box-shadow:none}
html[data-ui="v3"] body.dark .module-entry::before,html[data-ui="v3"] body.dark .v27-module-tile::before,html[data-ui="v3"] body.dark .v27-module-tile.personality::before,html[data-ui="v3"] body.dark .v27-module-tile.derailers::before,html[data-ui="v3"] body.dark .v27-module-tile.leadership::before,html[data-ui="v3"] body.dark .module-entry.personality::before,html[data-ui="v3"] body.dark .module-entry.derailers::before,html[data-ui="v3"] body.dark .module-entry.leadership::before{display:none}
html[data-ui="v3"] .module-entry.cognitive,html[data-ui="v3"] .full-section-card:has(>.avatar.cognitive){--hue:var(--sec-numerical)}
html[data-ui="v3"] .module-entry.info,html[data-ui="v3"] .full-section-card:has(>.avatar.info){--hue:var(--sec-verbal)}
html[data-ui="v3"] .module-entry.sand,html[data-ui="v3"] .full-section-card:has(>.avatar.sand){--hue:var(--sec-abstract)}
html[data-ui="v3"] .module-entry.personality,html[data-ui="v3"] .full-section-card:has(>.avatar.personality){--hue:var(--sec-pq10)}
html[data-ui="v3"] .module-entry.derailers,html[data-ui="v3"] .full-section-card:has(>.avatar.derailers){--hue:var(--sec-derailers)}
html[data-ui="v3"] .module-entry.leadership,html[data-ui="v3"] .full-section-card:has(>.avatar.leadership){--hue:var(--sec-leadership)}
html[data-ui="v3"] .module-entry>.avatar{inline-size:40px;block-size:40px;border-radius:var(--r-ctl)}
html[data-ui="v3"] .module-entry>.avatar .ico{inline-size:22px;block-size:22px}
html[data-ui="v3"] .module-entry strong{font:700 var(--t-h3)/1.45 "Plex Arabic",system-ui,sans-serif;padding-inline-end:24px}
html[data-ui="v3"] .module-entry small{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif;padding-inline-end:0}
html[data-ui="v3"] :where(body.dark) .module-entry small{color:var(--ink-2)}
html[data-ui="v3"] .module-entry>.chev{inset-inline-end:12px;inset-block-end:12px;inset-block-start:auto}
html[data-ui="v3"] :where(body.dark) .module-entry>.chev{color:var(--ink-3)}
@media(hover:hover){html[data-ui="v3"] .module-entry:hover,html[data-ui="v3"] .full-section-card:hover{transform:none}
html[data-ui="v3"] :where(body.dark) .module-entry:hover,html[data-ui="v3"] :where(body.dark) .full-section-card:hover{border-color:var(--line);border-inline-start-color:var(--hue);box-shadow:none}}
/* M10: tile meta as icon + value pairs */
html[data-ui="v3"] .tile-meta-ico{display:inline-grid!important;vertical-align:middle;margin-inline-end:4px}
html[data-ui="v3"] .tile-meta-ico .ico{inline-size:14px;block-size:14px}
html[data-ui="v3"] .tile-meta-item{display:inline-flex;align-items:center;white-space:nowrap}
html[data-ui="v3"] .tile-meta-sep{display:none}
html[data-ui="v3"] .module-entry small:has(.tile-meta-item){display:flex;flex-wrap:wrap;gap:2px 10px}
/* --- Page headers: plain on every screen except gateway and home (6.2). Legacy v27.css:34-43 --- */
html[data-ui="v3"] .v27-photo-head{min-height:0;margin:0 0 16px;padding:8px 0 0;background:none;border-width:0;border-radius:0;box-shadow:none;overflow:visible;display:block}
html[data-ui="v3"] body.dark .v27-photo-head::before{display:none}
html[data-ui="v3"] .v27-photo-head::before{display:none}
html[data-ui="v3"] .v27-photo-copy{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:4px 12px}
html[data-ui="v3"] .v27-photo-copy .avatar{grid-row:1/3;inline-size:44px;block-size:44px;border-radius:var(--r-ctl);border-width:0}
html[data-ui="v3"] :where(body.dark) .v27-photo-copy .avatar{background:var(--primary-soft);color:var(--primary);box-shadow:none}
html[data-ui="v3"] body.dark .v27-photo-copy .avatar{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong)}
html[data-ui="v3"] body.dark .v27-photo-copy h2{font:700 var(--t-h1)/1.4 "Plex Arabic",system-ui,sans-serif;color:var(--ink)}
html[data-ui="v3"] .v27-photo-copy h2{font:700 var(--t-h1)/1.4 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-photo-copy h2{color:var(--ink)}
html[data-ui="v3"] body.dark .v27-photo-copy p{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif;color:var(--ink-2)}
html[data-ui="v3"] .v27-photo-copy p{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-photo-copy p{color:var(--ink-2)}
html[data-ui="v3"] .page-head h2{font:700 var(--t-h1)/1.4 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .page-head p{font-size:var(--t-caption)}
html[data-ui="v3"] :where(body.dark) .page-head p{color:var(--ink-2)}
/* --- Surfaces (4.2) ---------------------------------------------------------------------- */
html[data-ui="v3"] .card,html[data-ui="v3"] .panel,html[data-ui="v3"] .v27-full-progress,html[data-ui="v3"] .list,html[data-ui="v3"] .v27-settings-card,html[data-ui="v3"] .v27-settings-group{border-width:1px;border-style:solid;border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .card,
html[data-ui="v3"] :where(body.dark) .panel,
html[data-ui="v3"] :where(body.dark) .v27-full-progress,
html[data-ui="v3"] :where(body.dark) .list,
html[data-ui="v3"] :where(body.dark) .v27-settings-card,
html[data-ui="v3"] :where(body.dark) .v27-settings-group{background:var(--surface);border-color:var(--line);box-shadow:none}
html[data-ui="v3"] .callout{padding:12px 16px;border-radius:var(--r-ctl);border-width:1px;border-style:solid;border-inline-start-width:4px;font:400 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .callout{border-color:var(--line);background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .callout.info{background:var(--info-soft);border-color:var(--info-line);border-inline-start-color:var(--info)}
html[data-ui="v3"] :where(body.dark) .callout.warn{background:var(--warn-soft);border-color:var(--warn-line);border-inline-start-color:var(--warn)}
html[data-ui="v3"] :where(body.dark) .callout.good{background:var(--good-soft);border-color:var(--good-line);border-inline-start-color:var(--good)}
html[data-ui="v3"] :where(body.dark) .callout.bad{background:var(--bad-soft);border-color:var(--bad-line);border-inline-start-color:var(--bad)}
html[data-ui="v3"] .callout .ico{flex:none}
html[data-ui="v3"] .list-row,html[data-ui="v3"] .row,html[data-ui="v3"] .v27-setting-row,html[data-ui="v3"] .v27-review-row,html[data-ui="v3"] .v27-mini-tools button{min-height:56px}
html[data-ui="v3"] .badge,html[data-ui="v3"] .status-chip{border-radius:var(--r-pill);font:500 var(--t-caption)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .badge.accent{border-color:var(--accent)}
html[data-ui="v3"] .status-chip{min-height:28px}
html[data-ui="v3"] :where(body.dark) .status-chip{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] .meter{height:6px}
html[data-ui="v3"] :where(body.dark) .meter{background:var(--surface-2)}
html[data-ui="v3"] :where(body.dark) .meter>span{background:var(--brass)}
html[data-ui="v3"] :where(body.dark) .meter>span.good{background:var(--good)}
html[data-ui="v3"] :where(body.dark) .meter>span.warn{background:var(--warn)}
html[data-ui="v3"] :where(body.dark) .meter>span.bad{background:var(--bad)}
html[data-ui="v3"] :where(body.dark) .meter>span.accent{background:var(--accent)}
@media(prefers-reduced-motion:no-preference){html[data-ui="v3"] .meter>span{transition:width var(--dur-slow) var(--ease)}}
html[data-ui="v3"] .v27-full-progress{padding:14px 16px;margin-block-end:12px}
html[data-ui="v3"] .v27-full-progress strong{font:500 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
/* --- Simulation list / detail (6.12) ------------------------------------------------------------ */
html[data-ui="v3"] .compact-sim-grid{gap:12px}
html[data-ui="v3"] .compact-sim-card{min-height:96px;padding:12px;border-width:1px;border-style:solid;border-radius:var(--r-card);gap:6px}
html[data-ui="v3"] :where(body.dark) .compact-sim-card{border-color:var(--line);background:var(--surface);box-shadow:none}
html[data-ui="v3"] :where(body.dark) .compact-sim-card:hover{border-color:var(--line);box-shadow:none}
html[data-ui="v3"] :where(body.dark) .compact-sim-card.active{border-color:var(--warn-line);background:var(--warn-soft)}
html[data-ui="v3"] :where(body.dark) .compact-sim-card.partial{border-color:var(--good-line);background:var(--surface)}
html[data-ui="v3"] :where(body.dark) .compact-sim-card.done{border-color:var(--good-line);background:var(--good-soft)}
html[data-ui="v3"] .compact-sim-number{inline-size:44px;block-size:44px;border-radius:var(--r-ctl);font:700 var(--t-h1)/1 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .compact-sim-number{background:var(--primary-soft);color:var(--primary)}
html[data-ui="v3"] .compact-sim-card strong{font:700 var(--t-label)/1.4 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .compact-sim-card small{font:400 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .compact-sim-card small{color:var(--ink-2)}
html[data-ui="v3"] .target-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 12px;padding:4px;border-width:0;border-radius:var(--r-pill)}
html[data-ui="v3"] :where(body.dark) .target-mode-switch{background:var(--surface-2)}
html[data-ui="v3"] .target-mode-switch button{min-height:48px;border:1px solid transparent;border-radius:var(--r-pill);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-mode-switch button{border:1px solid transparent;background:transparent;color:var(--ink-2);box-shadow:none}
html[data-ui="v3"] body.dark .target-mode-switch button.selected{background:var(--surface);color:var(--ink);border-color:var(--line-strong);font-weight:700;box-shadow:none}
html[data-ui="v3"] .target-mode-switch button.selected{font-weight:700}
html[data-ui="v3"] :where(body.dark) .target-mode-switch button.selected{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:none}
html[data-ui="v3"] .target-mode-switch button.selected::before{content:"✓";display:inline-grid;place-items:center;inline-size:18px;block-size:18px;margin-inline-end:6px;border-radius:50%;background:var(--primary);color:var(--primary-fg);font-size:.6875rem}
html[data-ui="v3"] .full-section-grid,html[data-ui="v3"] .v27-full-grid,html[data-ui="v3"] .target-full-grid{gap:12px}
html[data-ui="v3"] .full-section-card.done,html[data-ui="v3"] .target-full-section.done{cursor:pointer}
html[data-ui="v3"] :where(body.dark) .full-section-card.done,html[data-ui="v3"] :where(body.dark) .target-full-section.done{background:var(--surface);border-color:var(--line);border-inline-start-color:var(--hue)}
html[data-ui="v3"] .full-section-card.done .avatar{filter:none}
html[data-ui="v3"] .full-section-card strong{font:700 var(--t-h3)/1.45 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .full-section-card small{font:400 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .full-section-card small{color:var(--ink-2)}
html[data-ui="v3"] .full-section-card .badge{min-height:28px}
html[data-ui="v3"] .target-full-result{font:500 var(--t-caption)/1.4 "Plex Arabic",system-ui,sans-serif;font-style:normal}
html[data-ui="v3"] :where(body.dark) .target-full-result{color:var(--good)}
/* --- Legacy gradient bands removed from secondary cards (one radius, one border, no wash) ----------------------- */
html[data-ui="v3"] body.dark .v27-domain-card::before,html[data-ui="v3"] body.dark .v27-result-module::before,html[data-ui="v3"] body.dark .nb-mode-card::before{display:none}
html[data-ui="v3"] .v27-domain-card,html[data-ui="v3"] .v27-result-module,html[data-ui="v3"] .v27-insight,html[data-ui="v3"] .v27-mini-tools button,html[data-ui="v3"] .v27-review-row,html[data-ui="v3"] .v27-review-progress{border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .v27-domain-card,
html[data-ui="v3"] :where(body.dark) .v27-result-module,
html[data-ui="v3"] :where(body.dark) .v27-insight,
html[data-ui="v3"] :where(body.dark) .v27-mini-tools button,
html[data-ui="v3"] :where(body.dark) .v27-review-row,
html[data-ui="v3"] :where(body.dark) .v27-review-progress{border-color:var(--line);box-shadow:none;background:var(--surface)}
html[data-ui="v3"] body.dark .v27-ring{background:conic-gradient(var(--primary) calc(var(--p) * 3.6deg),var(--surface-2) 0)}
html[data-ui="v3"] :where(body.dark) .v27-ring{background:conic-gradient(var(--primary) calc(var(--p) * 3.6deg),var(--surface-2) 0)}
html[data-ui="v3"] :where(body.dark) .v27-guide-part[open]>summary{background:var(--primary-soft)}
/* --- Feedback panel (4.7, 6.5). Legacy styles.css:705-735, target-system.css:69,471 ------------------ */
html[data-ui="v3"] .feedback,html[data-ui="v3"] .feedback.good,html[data-ui="v3"] .feedback.bad,html[data-ui="v3"] .target-inline-feedback,html[data-ui="v3"] .target-inline-feedback.good,html[data-ui="v3"] .target-inline-feedback.bad,html[data-ui="v3"] .target-lead-feedback{margin-block-start:20px;padding:16px;border-width:1px;border-style:solid;border-inline-start:4px solid var(--line-strong);border-radius:var(--r-card);scroll-margin-block-start:calc(56px + env(safe-area-inset-top) + 56px)}
html[data-ui="v3"] :where(body.dark) .feedback,
html[data-ui="v3"] :where(body.dark) .feedback.good,
html[data-ui="v3"] :where(body.dark) .feedback.bad,
html[data-ui="v3"] :where(body.dark) .target-inline-feedback,
html[data-ui="v3"] :where(body.dark) .target-inline-feedback.good,
html[data-ui="v3"] :where(body.dark) .target-inline-feedback.bad,
html[data-ui="v3"] :where(body.dark) .target-lead-feedback{border-color:var(--line);border-inline-start:4px solid var(--line-strong);background:var(--surface)}
html[data-ui="v3"] :where(body.dark) .feedback.good,html[data-ui="v3"] :where(body.dark) .target-inline-feedback.good{border-inline-start-color:var(--good)}
html[data-ui="v3"] :where(body.dark) .feedback.bad,html[data-ui="v3"] :where(body.dark) .target-inline-feedback.bad{border-inline-start-color:var(--bad)}
html[data-ui="v3"] .feedback:focus,html[data-ui="v3"] .feedback [tabindex="-1"]:focus{outline:none}
@media(prefers-reduced-motion:no-preference){html[data-ui="v3"] .feedback{animation:v3-fade 160ms var(--ease)}}
html[data-ui="v3"] .feedback h4,html[data-ui="v3"] .answer-verdict{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif;margin:0 0 8px}
html[data-ui="v3"] :where(body.dark) .correct,html[data-ui="v3"] :where(body.dark) .answer-verdict.correct,html[data-ui="v3"] :where(body.dark) .feedback h4.correct{color:var(--good)}
html[data-ui="v3"] :where(body.dark) .incorrect,html[data-ui="v3"] :where(body.dark) .answer-verdict.incorrect,html[data-ui="v3"] :where(body.dark) .feedback h4.incorrect{color:var(--bad)}
html[data-ui="v3"] .answer-compare-grid{grid-template-columns:1fr;gap:0;margin:8px 0;border-block-width:1px;border-block-style:solid}
html[data-ui="v3"] :where(body.dark) .answer-compare-grid{border-block-color:var(--line)}
html[data-ui="v3"] .answer-compare-grid>div,html[data-ui="v3"] .answer-compare-grid .reference{padding:10px 0;border-width:0;border-radius:0}
html[data-ui="v3"] :where(body.dark) .answer-compare-grid>div,html[data-ui="v3"] :where(body.dark) .answer-compare-grid .reference{background:transparent}
html[data-ui="v3"] .answer-compare-grid>div+div{border-block-start-width:1px;border-block-start-style:solid}
html[data-ui="v3"] :where(body.dark) .answer-compare-grid>div+div{border-block-start-color:var(--line)}
html[data-ui="v3"] .answer-compare-grid>div span{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .answer-compare-grid>div span{color:var(--ink-2)}
html[data-ui="v3"] .answer-compare-grid>div strong{font:700 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .answer-compare-grid .reference span{color:var(--ink-2)}
html[data-ui="v3"] .answer-compare-grid .reference strong{display:inline-block;padding:2px 10px;border-radius:var(--r-pill)}
html[data-ui="v3"] :where(body.dark) .answer-compare-grid .reference strong{background:var(--good-soft);color:var(--good)}
html[data-ui="v3"] .feedback-detail,html[data-ui="v3"] .fast-method,html[data-ui="v3"] .solution-steps,html[data-ui="v3"] .explanation-block{margin:12px 0 0;padding:12px 0 0;border-width:0;border-block-start-width:1px;border-block-start-style:solid;border-radius:0}
html[data-ui="v3"] :where(body.dark) .feedback-detail,
html[data-ui="v3"] :where(body.dark) .fast-method,
html[data-ui="v3"] :where(body.dark) .solution-steps,
html[data-ui="v3"] :where(body.dark) .explanation-block{border-block-start-color:var(--line);background:transparent}
html[data-ui="v3"] .feedback-detail summary{min-height:44px;display:flex;align-items:center;font:700 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .feedback p,html[data-ui="v3"] .feedback-detail p,html[data-ui="v3"] .explanation-block p{font:400 var(--t-body)/1.75 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .explanation-block strong{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .measured-box,html[data-ui="v3"] .scenario-measure{border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .measured-box,html[data-ui="v3"] :where(body.dark) .scenario-measure{background:var(--info-soft);border-color:var(--info-line)}
html[data-ui="v3"] :where(body.dark) .measured-box span,html[data-ui="v3"] :where(body.dark) .scenario-measure span{color:var(--info)}
/* Disclaimer lines: caution callout, text unchanged (4.8). Legacy target-system.css:244-254 uses !important on p. */
html[data-ui="v3"] body.dark .target-official-disclaimer{margin:12px 0;padding:12px 16px;gap:12px;border:1px solid var(--warn-line);border-inline-start:4px solid var(--warn);border-radius:var(--r-ctl);background:var(--warn-soft);color:var(--ink);box-shadow:none}
html[data-ui="v3"] .target-official-disclaimer{margin:12px 0;padding:12px 16px;gap:12px;border-width:1px;border-style:solid;border-inline-start:4px solid var(--warn);border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .target-official-disclaimer{border-color:var(--warn-line);border-inline-start:4px solid var(--warn);background:var(--warn-soft);color:var(--ink);box-shadow:none}
html[data-ui="v3"] body.dark .target-official-disclaimer>span{inline-size:24px;block-size:24px;background:var(--warn);color:var(--warn-soft);font-size:.875rem}
html[data-ui="v3"] .target-official-disclaimer>span{inline-size:24px;block-size:24px;font-size:.875rem}
html[data-ui="v3"] :where(body.dark) .target-official-disclaimer>span{background:var(--warn);color:var(--warn-soft)}
html[data-ui="v3"] body.dark .target-official-disclaimer p{color:var(--ink)!important;font:500 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif!important}
html[data-ui="v3"] .target-official-disclaimer p{font:500 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif!important}
html[data-ui="v3"] :where(body.dark) .target-official-disclaimer p{color:var(--ink)!important}
html[data-ui="v3"] body.dark .target-official-disclaimer strong{color:var(--warn)!important}
html[data-ui="v3"] :where(body.dark) .target-official-disclaimer strong{color:var(--warn)!important}
html[data-ui="v3"] .target-official-disclaimer.training-feedback-warning{margin-block-start:16px}
/* Gate review I-16: the previous system's disclaimer uses the same caution callout as the new system (text unchanged). */
html[data-ui="v3"] body.dark .training-disclaimer{display:flex;align-items:flex-start;gap:12px;margin:16px 0 12px;padding:12px 16px;border:1px solid var(--warn-line);border-inline-start:4px solid var(--warn);border-radius:var(--r-ctl);background:var(--warn-soft);color:var(--ink);box-shadow:none;font:500 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .training-disclaimer{display:flex;align-items:flex-start;gap:12px;margin:16px 0 12px;padding:12px 16px;border-width:1px;border-style:solid;border-inline-start:4px solid var(--warn);border-radius:var(--r-ctl);font:500 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .training-disclaimer{border-color:var(--warn-line);border-inline-start:4px solid var(--warn);background:var(--warn-soft);color:var(--ink);box-shadow:none}
html[data-ui="v3"] body.dark .training-disclaimer>span{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--warn);color:var(--warn-soft);font-size:.875rem;font-weight:700}
html[data-ui="v3"] .training-disclaimer>span{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;font-size:.875rem;font-weight:700}
html[data-ui="v3"] :where(body.dark) .training-disclaimer>span{background:var(--warn);color:var(--warn-soft)}
html[data-ui="v3"] body.dark .training-disclaimer strong{color:var(--ink);font-weight:500}
html[data-ui="v3"] .training-disclaimer strong{font-weight:500}
html[data-ui="v3"] :where(body.dark) .training-disclaimer strong{color:var(--ink)}
html[data-ui="v3"] .target-method-note{border-radius:var(--r-ctl)}
/* --- Results / report (4.8, 6.9). Legacy styles.css:563, target-system.css:73,479-505 --------------------- */
html[data-ui="v3"] :where(body.dark) .ring{background:conic-gradient(var(--primary) calc(var(--p) * 1%),var(--surface-2) 0)}
html[data-ui="v3"] :where(body.dark) .ring.good,html[data-ui="v3"] :where(body.dark) .ring.warn,html[data-ui="v3"] :where(body.dark) .ring.bad{background:conic-gradient(var(--primary) calc(var(--p) * 1%),var(--surface-2) 0)}
html[data-ui="v3"] .ring strong{font-size:var(--t-h1);letter-spacing:0}
html[data-ui="v3"] :where(body.dark) .ring strong{color:var(--ink)}
html[data-ui="v3"] .ring small{font-size:var(--t-caption)}
html[data-ui="v3"] :where(body.dark) .ring small{color:var(--ink-2)}
html[data-ui="v3"] :where(body.dark) .ring::after{background:var(--surface)}
html[data-ui="v3"] body.dark .target-result-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}
html[data-ui="v3"] .score-hero,html[data-ui="v3"] .target-result-hero,html[data-ui="v3"] .target-legacy-details .target-result-hero{border-width:1px;border-style:solid;border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .score-hero,html[data-ui="v3"] :where(body.dark) .target-result-hero,html[data-ui="v3"] :where(body.dark) .target-legacy-details .target-result-hero{background:var(--surface);border-color:var(--line);box-shadow:none}
html[data-ui="v3"] .target-legacy-bar-list{gap:16px}
html[data-ui="v3"] .target-legacy-bar-row>div strong{font:500 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .target-legacy-bar-row>div small{font:400 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row>div small{color:var(--ink-2)}
html[data-ui="v3"] body.dark .target-legacy-bar-row>b{font:700 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
html[data-ui="v3"] .target-legacy-bar-row>b{font:700 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row>b{color:var(--ink)}
html[data-ui="v3"] .target-legacy-bar-row>.meter{height:8px}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row>.meter{background:var(--surface-2)}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row>.meter>i{background:var(--brass)}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row.good>.meter>i{background:var(--good)}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row.warn>.meter>i{background:var(--warn)}
html[data-ui="v3"] :where(body.dark) .target-legacy-bar-row.bad>.meter>i{background:var(--bad)}
html[data-ui="v3"] .target-report-tabs,html[data-ui="v3"] .v27-report-tabs{display:flex;gap:4px;padding:4px;border-width:0;border-radius:var(--r-pill);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-block-end:12px}
html[data-ui="v3"] :where(body.dark) .target-report-tabs,html[data-ui="v3"] :where(body.dark) .v27-report-tabs{background:var(--surface-2)}
html[data-ui="v3"] .target-report-tabs::-webkit-scrollbar{display:none}
html[data-ui="v3"] .target-report-tabs>button{flex:none;min-width:0;min-height:44px;padding-inline:16px;border:1px solid transparent;border-radius:var(--r-pill);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif;scroll-snap-align:center;white-space:nowrap}
html[data-ui="v3"] :where(body.dark) .target-report-tabs>button{border:1px solid transparent;background:transparent;color:var(--ink-2);box-shadow:none}
html[data-ui="v3"] body.dark .target-report-tabs>button.active{background:var(--surface);color:var(--ink);border-color:var(--line-strong);font-weight:700;box-shadow:inset 0 -3px 0 var(--brass)}
html[data-ui="v3"] .target-report-tabs>button.active{font-weight:700}
html[data-ui="v3"] :where(body.dark) .target-report-tabs>button.active{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:inset 0 -3px 0 var(--brass)}
html[data-ui="v3"] :where(body.dark) .target-report-tabs>button:disabled{color:var(--ink-3);opacity:.7}
html[data-ui="v3"] .inline-lead-feedback{margin-block-start:12px;padding:12px 0 0;border-width:0;border-block-start-width:1px;border-block-start-style:solid;border-radius:0;scroll-margin-block-start:calc(56px + env(safe-area-inset-top) + 56px)}
html[data-ui="v3"] :where(body.dark) .inline-lead-feedback{border-block-start-color:var(--line);background:transparent}
/* --- Settings / More (6.10). Legacy v27.css:138-150 ------------------------------------------------ */
html[data-ui="v3"] .v27-settings-card,html[data-ui="v3"] .v27-settings-group{padding:0;overflow:hidden;margin-block-end:16px}
html[data-ui="v3"] .v27-settings-group>h3,html[data-ui="v3"] .v27-settings-card>header{padding:16px 16px 8px;margin:0}
html[data-ui="v3"] .v27-settings-group>h3{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-settings-group>h3{color:var(--ink-2)}
html[data-ui="v3"] .v27-setting-row{min-height:56px;padding:12px 16px;gap:12px;border-width:0;border-radius:0;border-block-start-width:1px;border-block-start-style:solid}
html[data-ui="v3"] :where(body.dark) .v27-setting-row{background:transparent;border-block-start-color:var(--line);color:var(--ink)}
html[data-ui="v3"] .v27-setting-row strong{font:700 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .v27-setting-row small{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-setting-row small{color:var(--ink-2)}
html[data-ui="v3"] .v27-setting-row .avatar{inline-size:36px;block-size:36px;border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .v27-setting-row .avatar{background:var(--primary-soft);color:var(--primary)}
html[data-ui="v3"] body.dark .v27-setting-row .avatar{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .v27-setting-row[data-action="v27-clear-attempts"] strong,html[data-ui="v3"] :where(body.dark) .v27-setting-row[data-action="v27-reset-all"] strong{color:var(--bad)}
html[data-ui="v3"] :where(body.dark) .v27-setting-row[data-action="v27-clear-attempts"] .avatar,html[data-ui="v3"] :where(body.dark) .v27-setting-row[data-action="v27-reset-all"] .avatar{background:var(--bad-soft);color:var(--bad)}
html[data-ui="v3"] .v27-setting-row[data-action="v27-clear-attempts"]{border-block-start:8px solid var(--bg)}
html[data-ui="v3"] .v27-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 16px 16px}
html[data-ui="v3"] .v27-theme-grid button{min-height:56px;border-width:1px;border-style:solid;border-radius:var(--r-opt);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
html[data-ui="v3"] :where(body.dark) .v27-theme-grid button{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
html[data-ui="v3"] body.dark .v27-theme-grid button.active{background:var(--primary-soft);border:2px solid var(--primary);font-weight:700}
html[data-ui="v3"] .v27-theme-grid button.active{border-width:2px;border-style:solid;font-weight:700}
html[data-ui="v3"] :where(body.dark) .v27-theme-grid button.active{background:var(--primary-soft);border-color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .v27-setting-row[role="switch"][aria-checked="true"]{background:transparent}
/* --- Gateway (6.11). Legacy target-system.css:5-36 ------------------------------------------------- */
html[data-ui="v3"] .exam-system-gateway{text-align:start}
html[data-ui="v3"] .gateway-topbar{border-block-end-width:1px;border-block-end-style:solid}
html[data-ui="v3"] :where(body.dark) .gateway-topbar{background:var(--surface);border-block-end-color:var(--line);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .gateway-topbar strong,html[data-ui="v3"] :where(body.dark) .gateway-topbar .gateway-aa{color:var(--ink)}
html[data-ui="v3"] .gateway-photo-hero{min-height:0;border-radius:var(--r-card);border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .gateway-photo-hero{border-color:var(--line);box-shadow:none}
html[data-ui="v3"] .gateway-photo-hero h1{font:700 var(--t-display)/1.35 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .gateway-photo-hero h1{color:var(--ink)}
html[data-ui="v3"] .gateway-photo-hero p{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .gateway-photo-hero p{color:var(--ink-2)}
html[data-ui="v3"] .system-choice-grid{gap:12px}
html[data-ui="v3"] .system-choice-card,html[data-ui="v3"] .system-choice-card.new-system,html[data-ui="v3"] .system-choice-card.previous-system{min-height:auto;padding:16px;border-width:1px;border-style:solid;border-block-start:4px solid var(--line-strong);border-radius:var(--r-card);transform:none;gap:12px}
html[data-ui="v3"] :where(body.dark) .system-choice-card,html[data-ui="v3"] :where(body.dark) .system-choice-card.new-system,html[data-ui="v3"] :where(body.dark) .system-choice-card.previous-system{border-color:var(--line);border-block-start:4px solid var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:none}
html[data-ui="v3"] :where(body.dark) .system-choice-card.new-system{border-block-start-color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .system-choice-card.last-choice{outline:0;box-shadow:none}
html[data-ui="v3"] .system-choice-card .choice-badge,html[data-ui="v3"] .system-choice-card .choice-badge.subtle{border-radius:var(--r-pill);font:500 var(--t-caption)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .system-choice-card .choice-badge,html[data-ui="v3"] :where(body.dark) .system-choice-card .choice-badge.subtle{background:var(--brass-ink);color:#fff}
html[data-ui="v3"] body.dark .system-choice-card .choice-badge{color:#06202C}
html[data-ui="v3"] body.dark .system-choice-card .choice-badge.subtle{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .system-choice-card .choice-badge.subtle{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] .system-choice-icon{border-radius:var(--r-ctl);border-width:0}
html[data-ui="v3"] :where(body.dark) .system-choice-icon{background:var(--primary-soft);color:var(--primary)}
html[data-ui="v3"] .system-choice-copy strong{font:700 var(--t-h2)/1.45 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .system-choice-copy strong{color:var(--ink)}
html[data-ui="v3"] .system-choice-copy .choice-meta{font:500 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .system-choice-copy .choice-meta{color:var(--ink-2)}
html[data-ui="v3"] .system-choice-copy small{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .system-choice-copy small{color:var(--ink-2)}
html[data-ui="v3"] .system-choice-card .choice-action{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding-inline:16px;border-width:0;border-radius:var(--r-ctl);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .system-choice-card .choice-action{background:var(--btn-bg);color:var(--btn-fg)}
html[data-ui="v3"] .system-choice-card.previous-system .choice-action{border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .system-choice-card.previous-system .choice-action{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
html[data-ui="v3"] .gateway-memory-note{border-width:1px;border-style:solid;border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .gateway-memory-note{background:var(--info-soft);border-color:var(--info-line);color:var(--ink)}
html[data-ui="v3"] .gateway-note{font-size:var(--t-caption)}
html[data-ui="v3"] :where(body.dark) .gateway-note{color:var(--ink-2)}
/* --- Onboarding (6.11) --------------------------------------------------------------------------- */
html[data-ui="v3"] body.onboarding-active .main{padding-block-end:24px}
html[data-ui="v3"] .onboarding .avatar{inline-size:72px;block-size:72px}
/* Font size: the three choices preview their size (15 / 18 / 22 px at the default root) and are 44px high. */
html[data-ui="v3"] .v27-font-row{margin:0;padding:12px 16px;border-block-start-width:1px;border-block-start-style:solid;gap:12px}
html[data-ui="v3"] :where(body.dark) .v27-font-row{border-block-start-color:var(--line)}
html[data-ui="v3"] .v27-font-row b{font:700 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .v27-font-row small{font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-font-row small{color:var(--ink-2)}
html[data-ui="v3"] .v27-font-row .avatar{border-radius:var(--r-ctl)}
html[data-ui="v3"] .v27-font-row>div{grid-template-columns:repeat(3,48px);gap:4px;padding:4px;border-radius:var(--r-pill)}
html[data-ui="v3"] :where(body.dark) .v27-font-row>div{background:var(--surface-2)}
html[data-ui="v3"] .v27-font-row>div button{min-height:44px;height:44px;border-radius:var(--r-pill);font-family:"Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-font-row>div button{color:var(--ink)}
html[data-ui="v3"] .v27-font-row>div button:nth-child(1){font-size:15px}
html[data-ui="v3"] .v27-font-row>div button:nth-child(2){font-size:18px}
html[data-ui="v3"] .v27-font-row>div button:nth-child(3){font-size:22px}
html[data-ui="v3"] body.dark .v27-font-row>div button.active{background:var(--primary-soft);color:var(--ink);border:2px solid var(--primary);font-weight:700}
html[data-ui="v3"] .v27-font-row>div button.active{border-width:2px;border-style:solid;font-weight:700}
html[data-ui="v3"] :where(body.dark) .v27-font-row>div button.active{background:var(--primary-soft);color:var(--ink);border-color:var(--primary)}
html[data-ui="v3"] .v27-switch{inline-size:52px;block-size:32px;border-width:1px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .v27-switch{background:var(--surface-2);border-color:var(--line-strong)}
html[data-ui="v3"] .v27-switch b{inline-size:24px;block-size:24px;inset-block-start:3px}
html[data-ui="v3"] :where(body.dark) .v27-switch.on{background:var(--primary);border-color:var(--primary)}
html[data-ui="v3"] .v27-switch.on b{transform:translateX(-22px)}
html[data-ui="v3"] body.dark .v27-switch b{background:var(--ink)}
/* Font menu popover becomes a bottom sheet (4.11). Inline top/left are set by v27-ui.js, hence !important. */
html[data-ui="v3"] .v27-font-menu{inset:auto!important;inset-inline:0!important;inset-block-end:0!important;min-inline-size:0;z-index:100;padding:20px 20px calc(20px + env(safe-area-inset-bottom));border-width:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0}
html[data-ui="v3"] :where(body.dark) .v27-font-menu{background:var(--surface);box-shadow:var(--e-sheet)}
html[data-ui="v3"] .v27-font-menu::before{content:"";display:block;inline-size:36px;block-size:4px;margin:-8px auto 12px;border-radius:2px;background:var(--line-strong)}
html[data-ui="v3"] .v27-font-menu>p{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif;margin:0 0 8px}
html[data-ui="v3"] :where(body.dark) .v27-font-menu>p{color:var(--ink)}
html[data-ui="v3"] .v27-font-menu button{min-height:56px;padding:8px 12px;border-radius:var(--r-opt);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] body.dark .v27-font-menu button.on{background:var(--primary-soft);border:2px solid var(--primary);color:var(--ink)}
html[data-ui="v3"] .v27-font-menu button.on{border-width:2px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .v27-font-menu button.on{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
/* Results list intro: 44px label wrapper for the 13px checkbox (P2-5). */
html[data-ui="v3"] .target-legacy-report>label{display:flex;align-items:center;gap:12px;min-height:44px;font:400 var(--t-body)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] input[type="checkbox"]{inline-size:24px;block-size:24px;flex:none}
html[data-ui="v3"] :where(body.dark) input[type="checkbox"]{accent-color:var(--primary)}
/* --- Numerical data table (6.7). Legacy target-system.css:66,384-398 -------------------------------- */
html[data-ui="v3"] .target-table-card{padding:12px;border-width:1px;border-style:solid;border-radius:var(--r-card);min-inline-size:0}
html[data-ui="v3"] :where(body.dark) .target-table-card{border-color:var(--line);background:var(--surface)}
html[data-ui="v3"] body.dark .target-table-card{background:var(--surface)}
html[data-ui="v3"] body.dark .target-table-card>h3{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif;color:var(--ink);text-align:start;margin:0 0 4px}
html[data-ui="v3"] .target-table-card>h3{font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif;text-align:start;margin:0 0 4px}
html[data-ui="v3"] :where(body.dark) .target-table-card>h3{color:var(--ink)}
html[data-ui="v3"] .target-table-note{font:400 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif;margin:2px 0 10px}
html[data-ui="v3"] :where(body.dark) .target-table-note{color:var(--ink-2)}
html[data-ui="v3"] .target-table-scroll{overscroll-behavior-x:contain;scroll-snap-type:x proximity}
html[data-ui="v3"] .target-data-table{font-size:max(.8125rem,13px)}
html[data-ui="v3"] :where(body.dark) .target-data-table{color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .target-data-table th,html[data-ui="v3"] :where(body.dark) .target-data-table td{border-color:var(--line)}
html[data-ui="v3"] :where(body.dark) .target-data-table thead th{background:var(--accent);color:#fff}
html[data-ui="v3"] body.dark .target-data-table thead th{background:var(--accent-soft);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .target-data-table tbody th,html[data-ui="v3"] :where(body.dark) .target-data-table .target-category-cell{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] body.dark .target-data-table tbody th,
html[data-ui="v3"] body.dark .target-data-table tbody .target-category-cell{background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] .target-table-unit{margin:0 0 8px;font:400 var(--t-caption)/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-table-unit{color:var(--ink-2)}
html[data-ui="v3"] .target-sizes-row th,html[data-ui="v3"] .target-sizes-row td{font-weight:700;border-block-start-width:2px;border-block-start-style:solid}
html[data-ui="v3"] :where(body.dark) .target-sizes-row th,html[data-ui="v3"] :where(body.dark) .target-sizes-row td{border-block-start-color:var(--line-strong);background:var(--surface-2)}
html[data-ui="v3"] .target-persistent-scroll{font:500 var(--t-label)/1.4 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-persistent-scroll{color:var(--ink-2)}
html[data-ui="v3"] .target-persistent-scroll>span{font-size:var(--t-label)}
html[data-ui="v3"] :where(body.dark) .target-persistent-scroll>span{color:var(--ink-2)}
html[data-ui="v3"] .target-passage{padding:12px 16px;border-radius:var(--r-ctl);border-inline-start:4px solid var(--line-strong)}
html[data-ui="v3"] :where(body.dark) .target-passage{border-inline-start:4px solid var(--line-strong);background:var(--surface-2)}
html[data-ui="v3"] body.dark .target-passage{background:var(--surface-2)}
html[data-ui="v3"] .target-passage>span{font:500 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-passage>span{color:var(--ink-2)}
/* --- Leadership rating item (6.8) ------------------------------------------------------------------------- */
html[data-ui="v3"] .lead-action{padding:12px 16px;border-width:1px;border-style:solid;border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .lead-action{border-color:var(--line);background:var(--surface)}
html[data-ui="v3"] .lead-action p{font:400 var(--t-body)/1.7 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .circle-scale{gap:8px;justify-content:space-between}
html[data-ui="v3"] .rating-circle{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;border-width:2px;border-style:solid;border-radius:50%}
html[data-ui="v3"] :where(body.dark) .rating-circle{border-color:var(--line-strong);background:var(--surface)}
html[data-ui="v3"] .rating-circle.active,html[data-ui="v3"] body.session-active .rating-circle.active{position:relative}
html[data-ui="v3"] :where(body.dark) .rating-circle.active,html[data-ui="v3"] body:where(.dark).session-active .rating-circle.active{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:0}
html[data-ui="v3"] .rating-circle.active::after{content:"";position:absolute;inset:0;margin:auto;inline-size:12px;block-size:12px;border-radius:50%;background:var(--primary-fg)}
html[data-ui="v3"] .scale-end-labels{font:400 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .scale-end-labels{color:var(--ink-2)}
html[data-ui="v3"] .rating-badge,html[data-ui="v3"] .rating-placeholder{min-height:32px;font:500 var(--t-label)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .rating-badge,html[data-ui="v3"] :where(body.dark) .rating-placeholder{color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .rating-placeholder{color:var(--ink-2)}
html[data-ui="v3"] body.dark .rating-badge{color:var(--ink)}
/* --- Question map and dialogs (4.11). Legacy styles.css:536-560 --------------------------------------------- */
html[data-ui="v3"] .qdot{position:relative;min-height:48px;border-width:1px;border-style:solid;border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .qdot{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink)}
html[data-ui="v3"] body.dark .qdot.answered{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
html[data-ui="v3"] :where(body.dark) .qdot.answered{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
html[data-ui="v3"] .qdot.answered::after{content:"✓";position:absolute;inset-block-start:2px;inset-inline-end:4px;font-size:.625rem;line-height:1;color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .qdot.current{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
html[data-ui="v3"] .qmap-legend{font:400 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif;gap:8px 16px}
html[data-ui="v3"] :where(body.dark) .qmap-legend{color:var(--ink-2)}
html[data-ui="v3"] .qkey{inline-size:16px;block-size:16px;border-radius:4px;border-width:1px;border-style:solid;position:relative}
html[data-ui="v3"] :where(body.dark) .qkey{border-color:var(--line-strong);background:var(--surface-2)}
html[data-ui="v3"] :where(body.dark) .qkey.answered{background:var(--primary-soft);border-color:var(--primary)}
html[data-ui="v3"] .qkey.answered::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.625rem;line-height:1;color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .qkey.current{background:var(--primary);border-color:var(--primary)}
html[data-ui="v3"] :where(body.dark) .qmap-summary{color:var(--ink-2)}
/* --- Review centre, tabs, chips (6.12). Legacy v27.css:100-124 ---------------------------------------------- */
html[data-ui="v3"] .segmented{border-radius:var(--r-pill);border-width:0}
html[data-ui="v3"] :where(body.dark) .segmented{background:var(--surface-2)}
html[data-ui="v3"] .segmented button{min-height:44px;border-radius:var(--r-pill);font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .segmented button{color:var(--ink-2)}
html[data-ui="v3"] body.dark .segmented button.active{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-weight:700;box-shadow:none}
html[data-ui="v3"] .segmented button.active{border-width:1px;border-style:solid;font-weight:700}
html[data-ui="v3"] :where(body.dark) .segmented button.active{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:none}
html[data-ui="v3"] .v27-review-tab{min-height:44px}
html[data-ui="v3"] .v27-review-filter{min-height:44px;padding-inline:16px;border-radius:var(--r-pill);border-width:1px;border-style:solid;font:500 var(--t-label)/1.2 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .v27-review-filter{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
html[data-ui="v3"] body.dark .v27-review-filter.active{background:var(--primary-soft);border:2px solid var(--primary);color:var(--ink)}
html[data-ui="v3"] .v27-review-filter.active{border-width:2px;border-style:solid}
html[data-ui="v3"] :where(body.dark) .v27-review-filter.active{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
html[data-ui="v3"] .empty{border-width:1px;border-style:dashed;border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .empty{border-color:var(--line-strong);background:var(--surface)}
/* --- Loading (4.10) ------------------------------------------------------------------------------------------- */
html[data-ui="v3"] :where(body.dark) .target-loading,html[data-ui="v3"] :where(body.dark) .loading{color:var(--ink)}
@media(prefers-reduced-motion:no-preference){html[data-ui="v3"] :where(body.dark) .target-loading .spinner,html[data-ui="v3"] :where(body.dark) .spinner{border-color:var(--surface-2);border-block-start-color:var(--brass)}}
/* --- Skip link, footer ---------------------------------------------------------------------------------------- */
html[data-ui="v3"] .skip-link{border-radius:var(--r-ctl)}
html[data-ui="v3"] :where(body.dark) .skip-link{background:var(--btn-bg);color:var(--btn-fg)}
/* --- Tablet and desktop (6.12) ---------------------------------------------------------------------------------- */
@media(min-width:768px) and (max-width:1099px){html[data-ui="v3"] .main{max-inline-size:720px}html[data-ui="v3"] .module-entry-grid,html[data-ui="v3"] .target-legacy-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}html[data-ui="v3"] body.session-active .main{padding-block-end:calc(var(--dock-h) + 24px)}}
@media(min-width:1100px){html[data-ui="v3"] .main{max-inline-size:1040px}html[data-ui="v3"] .module-entry-grid,html[data-ui="v3"] .target-legacy-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}html[data-ui="v3"] body.session-active .main{padding-block-end:calc(var(--dock-h) + 24px)}html[data-ui="v3"] .topbar{--topbar-pad:0px}}
@media(min-width:768px){html[data-ui="v3"] .session{max-inline-size:720px}html[data-ui="v3"] .question-text{max-inline-size:38rem}}
/* --- Visual QA gate fixes (docs/design/visual-qa.md) -------------------------------------------------------------- */
/* P1 #1: anchors and first blocks clear the sticky top bar. */
html[data-ui="v3"] #main>:first-child,html[data-ui="v3"] .target-legacy-report>:first-child{scroll-margin-block-start:72px}
/* P2 #4: report module tabs wrap instead of hiding the sixth tab behind a swipe. */
html[data-ui="v3"] .target-report-tabs,html[data-ui="v3"] .v27-report-tabs{flex-wrap:wrap;overflow:visible;border-radius:var(--r-ctl)}
html[data-ui="v3"] .target-report-tabs>button{flex:1 1 30%;border-radius:var(--r-ctl)}
/* P2 #5: the reading-size sheet dims the page like the dialogs do. */
html[data-ui="v3"] :where(body.dark) .v27-font-menu{box-shadow:var(--e-sheet),0 0 0 100vmax rgba(16,32,48,.45)}
html[data-ui="v3"] body.dark .v27-font-menu{box-shadow:var(--e-sheet),0 0 0 100vmax rgba(0,0,0,.6)}
/* P3 #10: true/false options carry one marker (the option label); no second check badge. */
html[data-ui="v3"] .target-semantic-options .option-btn::after{content:none!important}
html[data-ui="v3"] .target-semantic-options .option-btn>span:nth-child(2){padding-inline-end:0!important}
/* P3 #15: one line that says why "next" is disabled; the dock grows by that line. */
html[data-ui="v3"] body.session-active .session-nav .nav-hint{grid-column:1/-1;margin:0;text-align:center;font:500 var(--t-caption)/1.4 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] body:where(.dark).session-active .session-nav .nav-hint{color:var(--ink-2)}
html[data-ui="v3"] body.session-active:has(.session-nav .nav-hint){--dock-h:calc(100px + env(safe-area-inset-bottom))}
/* P3 #16: share and PDF sit in one 2-column row; the result actions are a 2-column grid with the one filled primary on top. */
html[data-ui="v3"] .target-legacy-report .v27-report-actions.target-report-tools{grid-template-columns:1fr 1fr}
html[data-ui="v3"] .target-legacy-report .v27-report-actions.target-report-tools .btn{min-inline-size:0;padding-inline:8px}
html[data-ui="v3"] .target-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-ui="v3"] .target-result-actions>.btn.primary{grid-column:1/-1}
/* P2 #6: the review progress ring is larger and carries no caption of its own. */
html[data-ui="v3"] .v27-review-progress .v27-ring{inline-size:72px;block-size:72px}
/* P2 #3: results list (markup from new-system/integration.js, class added in ui.js): note, toggle and attempt cards use the card pattern, one border level. */
html[data-ui="v3"] .target-results-page>p:not(.target-official-disclaimer){margin:0 0 12px;font:400 var(--t-caption)/1.7 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-results-page>p:not(.target-official-disclaimer){color:var(--ink-2)}
html[data-ui="v3"] .target-results-page>label{margin:0 0 12px;padding:8px 16px;border-width:1px;border-style:solid;border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .target-results-page>label{border-color:var(--line);background:var(--surface)}
html[data-ui="v3"] .target-results-page .target-results-list{display:grid;gap:12px;margin:0 0 16px;padding:0;border-width:0}
html[data-ui="v3"] :where(body.dark) .target-results-page .target-results-list{background:none;box-shadow:none}
html[data-ui="v3"] .target-results-page .target-results-sim{display:grid;gap:6px;margin:0;padding:16px;border-width:1px;border-style:solid;border-radius:var(--r-card)}
html[data-ui="v3"] :where(body.dark) .target-results-page .target-results-sim{border-color:var(--line);background:var(--surface);box-shadow:none}
html[data-ui="v3"] .target-results-page .target-results-sim h3{margin:0;font:700 var(--t-h3)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-results-page .target-results-sim h3{color:var(--ink)}
html[data-ui="v3"] .target-results-page .target-results-sim small{font:400 var(--t-caption)/1.5 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] :where(body.dark) .target-results-page .target-results-sim small{color:var(--ink-2)}
html[data-ui="v3"] .target-results-page .target-results-sim p{margin:0;font:400 var(--t-body)/1.6 "Plex Arabic",system-ui,sans-serif}
/* P3 #13: simulation detail tiles share one height, so a title that wraps does not move its status chip. */
html[data-ui="v3"] .full-section-grid,html[data-ui="v3"] .v27-full-grid,html[data-ui="v3"] .target-full-grid{grid-auto-rows:1fr}
@media(max-width:390px){html[data-ui="v3"] .full-section-card strong{font-size:var(--t-label)}}
html[data-ui="v3"] .full-section-card .badge{margin-block-start:auto}
/* --- Light palette completion: borders that exist only in v3 (the legacy element has none, or a different width) take the legacy line colour --- */
/* Sticky chrome keeps the legacy colour but opaque: v3 has no backdrop blur, and a 92-96% tint lets scrolled content show through the bars. */
html[data-ui="v3"] body:not(.dark) :is(.topbar,.tabbar){background-color:var(--surface)}
html[data-ui="v3"] body:not(.dark) .exam-bar{background-color:var(--bg)}
html[data-ui="v3"] body:not(.dark).session-active :is(.session-nav,.session-nav.question-pagination,.session-nav.target-question-nav){background-color:var(--surface)}
html[data-ui="v3"] body:not(.dark) :is(.target-table-scroll,.answer-compare-grid,.target-results-page>label,.target-legacy-report>label,.v27-setting-row,.segmented button.active){border-color:var(--line)}
html[data-ui="v3"] body:not(.dark) :is(.v27-theme-grid button.active,.v27-font-row>div button.active,.v27-review-filter.active,.v27-font-menu button.on){border-color:var(--primary)}
/* ===== PDF booklet library (js/pdf-library.js) ===== */
html[data-ui="v3"] .pdf-library{display:grid;gap:12px}
html[data-ui="v3"] .pdf-library .pdf-tabs{margin-block:4px 4px}
html[data-ui="v3"] .pdf-library .pdf-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(16,32,48,.14)}
html[data-ui="v3"] .pdf-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
html[data-ui="v3"] .pdf-card{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
html[data-ui="v3"] .pdf-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
html[data-ui="v3"] .pdf-card-head h3{margin:0;font:700 1rem/1.5 "Plex Arabic",system-ui,sans-serif;color:var(--ink)}
html[data-ui="v3"] .pdf-state{padding:2px 10px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font:500 .75rem/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .pdf-state.ok{background:var(--accent-soft);color:var(--accent)}
html[data-ui="v3"] .pdf-meta{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;color:var(--ink-2);font:400 .8125rem/1.6 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .pdf-actions{display:flex;flex-wrap:wrap;gap:8px}
html[data-ui="v3"] .pdf-actions .btn{flex:1 1 140px;min-block-size:44px;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
html[data-ui="v3"] .pdf-notes{padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface-2,var(--surface));color:var(--ink-2);font:400 .875rem/1.8 "Plex Arabic",system-ui,sans-serif}
html[data-ui="v3"] .pdf-notes summary{cursor:pointer;font-weight:600;color:var(--ink)}
html[data-ui="v3"] .pdf-notes ul{margin:8px 0 0;padding-inline-start:20px}
html[data-ui="v3"] .pdf-library-entry{margin-block-start:12px;inline-size:100%}
/* v3.0.1 light theme: the 4px section strip keeps its width (layout unchanged) but uses the original tile border colour, as in reference image A. */
html[data-ui="v3"] body:not(.dark) :is(.module-entry,.v27-module-tile,.full-section-card,.v27-full-section,.target-full-section){border-inline-start-color:var(--line)}
html[data-ui="v3"] body:not(.dark) .target-sizes-row th,html[data-ui="v3"] body:not(.dark) .target-sizes-row td{border-block-start-color:var(--line-strong)}
/* v3.0.1: original side-by-side numerical tables, column headings raised from ~10px to 12px for readability (layout unchanged). */
html[data-ui="v3"] .target-dual-data-table .target-dual-column-head,html[data-ui="v3"] .target-dual-data-table .target-dual-category-cell{font-size:12px}