/* Nexus by Ansab v4.0 - UI layer (append-only). Loaded last by v4_0_UI.js. Tokens first, then components.
   Keeps the theme engine (--ac --em --gd --h1 --h2 --bg --card --tx --bd) working: every colour below derives from them. */
@font-face{font-family:"Nexus Head";src:local("Poppins Medium"),local("Poppins-Medium"),url(/fonts/Poppins-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Nexus Head";src:local("Poppins Bold"),local("Poppins-Bold"),url(/fonts/Poppins-Bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
 /* type scale (rem, 16px root): 12 13 14 16 18 22 28 36 */
 --fs-12:.75rem;--fs-13:.8125rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-22:1.375rem;--fs-28:1.75rem;--fs-36:2.25rem;
 --lh-body:1.45;--lh-head:1.2;
 --font-ui:Inter,"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
 --font-head:"Nexus Head",Inter,"Segoe UI",system-ui,sans-serif;
 --font-mono:Consolas,"SFMono-Regular",Menlo,monospace;
 --font-ar:"Traditional Arabic","Noto Naskh Arabic","Segoe UI",Tahoma,serif;
 /* spacing 4 8 12 16 24 32 48 */
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
 /* shape */
 --r-ctl:8px;--r-card:12px;--r-pill:999px;
 --sh-1:0 1px 2px rgba(11,42,91,.08);--sh-2:0 4px 14px rgba(11,42,91,.10);--sh-3:0 14px 36px rgba(11,42,91,.18);
 --line:var(--bd);--bw:1px;
 /* controls */
 --ctl-h:36px;--ease:cubic-bezier(.2,.8,.2,1);--t-fast:120ms;--t-mid:200ms;
 /* state colours: AA (>=4.5:1) with white text and on light/dark surfaces */
 --ok:#0b7a52;--warn:#9a5b00;--danger:#b42318;--info:#1f5fbf;
 --ok-bg:#e3f5ec;--warn-bg:#fff1d6;--danger-bg:#fde7e4;--info-bg:#e4eefc;
 --muted:#56637a;--focus:#1f5fbf;
 --hdr-h:60px;--tab-on:#0a6a47;
}
body.dark{--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 4px 14px rgba(0,0,0,.45);--sh-3:0 14px 36px rgba(0,0,0,.55);
 --ok:#2fbf8a;--warn:#f0b24a;--danger:#ff7b6e;--info:#7fb0ff;--ok-bg:#12372b;--warn-bg:#3b2d0f;--danger-bg:#3d1b18;--info-bg:#15294a;--muted:#a8b4c8;--focus:#8fb8ff}
@media (pointer:coarse),(max-width:768px){:root{--ctl-h:44px}}

/* ---------- base ---------- */
html{overscroll-behavior-y:contain;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px);scrollbar-gutter:stable;color-scheme:light}
html:has(body.dark){color-scheme:dark}
body{font-family:var(--font-ui);font-size:var(--fs-14);line-height:var(--lh-body);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.nx-lock{overflow:hidden}
@media (max-width:768px){body{font-size:var(--fs-14)}}
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-head);font-weight:500;letter-spacing:0;margin:0 0 var(--sp-3)}
header h1{font-size:var(--fs-18);margin:0;font-weight:700}
h2{font-size:var(--fs-22)}h3,.card h3{font-size:var(--fs-18);margin:0 0 var(--sp-3)}h4{font-size:var(--fs-16)}
small,.small{font-size:var(--fs-12);opacity:1;color:var(--muted)}
header small,.hero small,.tk small{color:inherit;opacity:.88}
p{margin:0 0 var(--sp-3)}
code,pre,.mono,kbd{font-family:var(--font-mono);font-size:var(--fs-13)}
.bis,.bis *{font-family:var(--font-ar)}.bis span{font-family:var(--font-ui)!important}
[lang=ur],[dir=rtl]{font-family:var(--font-ar);line-height:1.9}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.nx-skip{display:inline-flex;align-items:center;min-height:var(--ctl-h);position:fixed;left:var(--sp-3);top:-60px;z-index:10000;background:var(--ac);color:#fff;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-ctl);text-decoration:none;font-weight:600;transition:transform var(--t-mid) var(--ease)}
.nx-skip:focus{transform:translateY(calc(60px + var(--sp-3)))}
img{max-width:100%}
a{color:var(--info)}
::selection{background:rgba(31,95,191,.25)}

/* ---------- header (one line, sticky) ---------- */
.bis{font-size:var(--fs-22);padding:var(--sp-2);line-height:1.6}
header{position:sticky;top:0;z-index:30;min-height:var(--hdr-h);flex-wrap:nowrap;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);padding-left:max(var(--sp-4),env(safe-area-inset-left));padding-right:max(var(--sp-4),env(safe-area-inset-right));background:var(--h1);border-bottom:2px solid var(--gd);box-shadow:var(--sh-2)}
header img{height:44px;width:44px;object-fit:cover;flex:none}
header .t{flex:1 1 0;min-width:0}
header .t h1,header .t div,header .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
header .t div{font-size:var(--fs-13)!important}
header>div:nth-of-type(2){flex:none}
#clk{font-size:var(--fs-18)!important;font-variant-numeric:tabular-nums;min-width:8.5ch;text-align:right}
header>button{order:99;margin-left:auto!important;flex:none}
#wx{flex:none;font-size:var(--fs-13)}
.tk{min-height:34px;font-size:var(--fs-13);contain:content}
.tk span{will-change:transform;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
@media (hover:hover) and (pointer:fine){.tk:hover span,.tk:active span,.tk:focus-within span{animation-play-state:paused}}
main{max-width:1120px;margin:var(--sp-5) auto;padding:0 var(--sp-4);padding-left:max(var(--sp-4),env(safe-area-inset-left));padding-right:max(var(--sp-4),env(safe-area-inset-right))}
footer{font-size:var(--fs-12);opacity:1;color:var(--muted);padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom))}

/* ---------- surfaces ---------- */
body{background-image:none}
.card{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border:var(--bw) solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--sp-4);margin:0 0 var(--sp-4)}
body.dark .card{background:var(--card)}
.card h3{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.hero{background:var(--h1);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:var(--sp-5)}
.hero h1,.hero h2{color:#fff}
hr{border:0;border-top:var(--bw) solid var(--line);margin:var(--sp-4) 0}
details>summary{cursor:pointer;min-height:var(--ctl-h);display:flex;align-items:center;gap:var(--sp-2)}
.pill{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:2px var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;line-height:1.3;background:var(--info-bg);color:var(--info)}
.pill.y{background:var(--warn-bg);color:var(--warn)}.pill.r{background:var(--danger-bg);color:var(--danger)}.pill.g{background:var(--ok-bg);color:var(--ok)}
.post{border:var(--bw) solid var(--line);border-radius:var(--r-card);padding:var(--sp-4);margin:0 0 var(--sp-3);background:var(--card)}
.err{color:var(--danger)}

/* ---------- buttons: primary (default) / .g success / .r danger / .btn-secondary / .btn-ghost ---------- */
body button,body .btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--ctl-h);padding:0 var(--sp-4);margin:2px;border:var(--bw) solid transparent;border-radius:var(--r-ctl);font:600 var(--fs-14)/1.2 var(--font-ui);letter-spacing:0;color:#fff;background-color:var(--ac);background-image:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12));box-shadow:none;text-shadow:none;overflow:visible;position:relative;cursor:pointer;vertical-align:middle;white-space:nowrap;transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){body button:hover,body .btn:hover{filter:none;transform:translateY(-1px);box-shadow:var(--sh-2);background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2))}}
body button:active,body .btn:active{transform:translateY(0);box-shadow:none;background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28))}
body button:disabled,body button[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
body button.g{background-color:var(--em)}body button.r{background-color:var(--danger)}
body.dark button.r{background-color:#c0392b;color:#fff}
body button.q{min-width:var(--ctl-h);width:var(--ctl-h);height:var(--ctl-h);padding:0;border-radius:50%;margin:-8px 0 -8px var(--sp-1);background-color:var(--gd);background-image:none;color:#14213d;font-weight:700}
@media (hover:hover) and (pointer:fine){body button.q:hover{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))}}
body .btn-secondary,body button.btn-secondary{background:var(--card);color:var(--tx);border-color:var(--line);background-image:none}
body .btn-ghost,body button.btn-ghost{background:transparent;color:var(--tx);background-image:none}
@media (hover:hover) and (pointer:fine){body .btn-secondary:hover,body .btn-ghost:hover{background-image:linear-gradient(rgba(127,127,127,.12),rgba(127,127,127,.12))}}
body button.nx-loading{pointer-events:none;color:transparent}body button.nx-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:nx-spin .7s linear infinite}
.ripple{display:none!important}
.ic,svg.nx-i{width:18px;height:18px;flex:none;vertical-align:-4px;margin:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
button .ic,button svg.nx-i{margin:0}
.eye,body button.eye{min-width:var(--ctl-h);min-height:var(--ctl-h);padding:0;margin-left:calc(-1*var(--ctl-h) - 2px);background:transparent!important;color:var(--tx);box-shadow:none}
.opt,body button.opt{display:flex;align-items:center;width:100%;min-height:var(--ctl-h);padding:var(--sp-3) var(--sp-4);margin:var(--sp-2) 0;text-align:left;justify-content:flex-start;white-space:normal;background:var(--card);background-image:none;color:var(--tx);border:var(--bw) solid var(--line);box-shadow:none;line-height:1.45}
@media (hover:hover) and (pointer:fine){.opt:hover,body button.opt:hover{border-color:var(--em);transform:none;box-shadow:none;background-image:none}}
.opt.sel,body button.opt.sel{border-color:var(--em);box-shadow:inset 0 0 0 1px var(--em);background:var(--ok-bg);color:var(--tx)}

/* ---------- form controls (one height system) ---------- */
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),body select,body textarea{min-height:var(--ctl-h);padding:0 var(--sp-3);border:var(--bw) solid var(--line);border-radius:var(--r-ctl);background-color:var(--card);color:var(--tx);font:400 var(--fs-14)/1.3 var(--font-ui);box-shadow:none;max-width:100%;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
body textarea{padding:var(--sp-2) var(--sp-3);min-height:88px;line-height:1.45}
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]){min-width:56px}
body select{padding-right:34px;min-width:64px}
@media (hover:hover) and (pointer:fine){body input:hover,body select:hover,body textarea:hover{border-color:var(--muted)}}
body input:focus,body select:focus,body textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(31,95,191,.22)}
body input:disabled,body select:disabled,body textarea:disabled{opacity:.6;cursor:not-allowed}
input[aria-invalid=true]{border-color:var(--danger)}
::placeholder{color:var(--muted);opacity:1}
input[type=checkbox],input[type=radio]{width:20px;height:20px;margin:0;vertical-align:middle;accent-color:var(--em)}
label.nx-hit{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ctl-h);min-height:var(--ctl-h);cursor:pointer;margin:0}
input[type=color]{min-width:var(--ctl-h);height:var(--ctl-h);padding:2px;border-radius:var(--r-ctl);border:var(--bw) solid var(--line);background:var(--card)}
input[type=file]{min-height:var(--ctl-h);max-width:100%;padding:3px;border:var(--bw) solid var(--line);border-radius:var(--r-ctl);background:var(--card)}
input[type=file]::file-selector-button{min-height:calc(var(--ctl-h) - 8px);border:0;border-radius:6px;padding:0 var(--sp-3);margin-right:var(--sp-3);background:var(--ac);color:#fff;font:600 var(--fs-13) var(--font-ui);cursor:pointer}
label{font-size:var(--fs-13);font-weight:600}
.field-err{display:block;color:var(--danger);font-size:var(--fs-12);margin-top:var(--sp-1)}
@media (max-width:768px){body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),body select,body textarea{font-size:16px}}

/* ---------- tabs: one line, scrollable, sliding indicator ---------- */
.tabs,.tabs.card{display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--sp-1);padding:var(--sp-1);margin:0 0 var(--sp-4);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;border-radius:var(--r-card);min-height:calc(var(--ctl-h) + 2*var(--sp-1) + 2px)}
.tabs::-webkit-scrollbar{display:none}
.tabs.nx-fl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px);mask-image:linear-gradient(90deg,transparent 0,#000 28px)}
.tabs.nx-fr{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 28px);mask-image:linear-gradient(270deg,transparent 0,#000 28px)}
.tabs.nx-fl.nx-fr{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
body .tabs button{flex:0 0 auto;scroll-snap-align:center;margin:0;min-height:var(--ctl-h);padding:0 var(--sp-3);background-color:transparent;background-image:none;color:var(--tx);font-weight:500;font-size:var(--fs-13);box-shadow:none;border-radius:var(--r-ctl);z-index:1;opacity:.82}
@media (hover:hover) and (pointer:fine){body .tabs button:hover{background-image:none;background-color:rgba(127,127,127,.14);transform:none;box-shadow:none;opacity:1}}
body .tabs button.on{color:#fff;opacity:1;font-weight:600}
.tabs:not(.nx-ready) button.on{background-color:var(--em)}
.tabs.nx-ready button.on{background-color:transparent}
body .tabs button.r{margin-left:auto;background-color:transparent;color:var(--danger);opacity:1}
body .tabs button.myacct{order:-1}
.nx-ind{position:absolute;left:0;top:var(--sp-1);height:calc(100% - 2*var(--sp-1));width:100px;border-radius:var(--r-ctl);background:var(--em);background-image:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12));transform-origin:left center;transform:translateX(0) scaleX(1);will-change:transform;pointer-events:none;z-index:0}
.nx-ind.nx-go{transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}
.new23{background:var(--warn-bg)!important;color:var(--warn)!important;font-size:var(--fs-12);font-weight:700;border-radius:var(--r-pill);padding:1px 6px;margin-left:var(--sp-1);line-height:1.4}
.tabs button.on .new23{background:rgba(255,255,255,.9)!important;color:#7a4500!important}
#tb{min-height:min(60vh,540px)}
@keyframes nx-fade{from{opacity:0}to{opacity:1}}@keyframes nx-spin{to{transform:rotate(360deg)}}@keyframes nx-sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}@keyframes nx-pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}

/* ---------- tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
th,td{padding:var(--sp-2) var(--sp-3);text-align:left;vertical-align:middle;border-bottom:var(--bw) solid var(--line)}
th{background:var(--ac);color:#fff;font-weight:600;font-size:var(--fs-12);letter-spacing:.02em;white-space:nowrap;position:sticky;top:0;z-index:2}
th:first-child{border-top-left-radius:var(--r-ctl)}th:last-child{border-top-right-radius:var(--r-ctl)}
tbody tr:nth-child(even) td{background:rgba(127,127,127,.06)}
@media (hover:hover) and (pointer:fine){tbody tr:hover td{background:rgba(31,95,191,.08)}}
td.num,th.num,td[align=right]{text-align:right}
td button,td input,td select{margin-top:2px;margin-bottom:2px}
td .pill{white-space:nowrap}
.card>table,.card>div>table{display:table}
.nx-tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border-radius:var(--r-ctl)}
.bar,.pb{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}.bar i,.pb i{display:block;height:100%;background:var(--em);border-radius:var(--r-pill);background-image:none}
.bar i{transition:width 1s linear}

/* ---------- modals: centred on PC, bottom sheet on phone ---------- */
.pop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);background:rgba(8,16,34,.55);overscroll-behavior:contain}
.pop>div{background:var(--card);color:var(--tx);border:var(--bw) solid var(--line);padding:var(--sp-5);border-radius:var(--r-card);max-width:480px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--sh-3);animation:nx-pop var(--t-mid) var(--ease) both}
@media (max-width:640px){.pop{align-items:flex-end;padding:0}.pop>div{max-width:none;border-radius:var(--r-card) var(--r-card) 0 0;padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));animation:nx-sheet var(--t-mid) var(--ease) both}}

/* ---------- exam ---------- */
#tm,.timer,#timer{font-variant-numeric:tabular-nums;min-width:5ch;display:inline-block;text-align:right}

/* ---------- toasts, status, misc ---------- */
.nx-toast{position:fixed;left:50%;bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;background:#14213d;color:#fff;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-ctl);box-shadow:var(--sh-3);font-size:var(--fs-14);max-width:calc(100vw - 32px)}
.empty{text-align:center;color:var(--muted);padding:var(--sp-6) var(--sp-4)}
.skel{background:linear-gradient(90deg,rgba(127,127,127,.12),rgba(127,127,127,.22),rgba(127,127,127,.12));background-size:200% 100%;animation:nx-sk 1.2s linear infinite;border-radius:var(--r-ctl);min-height:16px}
@keyframes nx-sk{to{background-position:-200% 0}}
.long,td.long{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
canvas{border-radius:var(--r-ctl)}

/* ---------- phone layout ---------- */
@media (max-width:768px){
 header{gap:var(--sp-2);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
 header .t div,header .t small,header>div:nth-of-type(2),#wx{display:none}
 header h1{font-size:var(--fs-16)}
 header>button,body header>button{font-size:0!important;gap:0;width:var(--ctl-h);min-width:var(--ctl-h);padding:0;flex:none}
 header>button .nx-i,header>button .ic{width:20px;height:20px}
 #pcdl33{margin-left:auto!important}
 main{margin-top:var(--sp-4);padding:0 var(--sp-3)}
 .card{padding:var(--sp-3)}
 .card h3{font-size:var(--fs-16)}
 .hero{padding:var(--sp-4)}
 table{font-size:var(--fs-12)}
 th,td{padding:var(--sp-2)}
 .bis{font-size:var(--fs-18)}
 body button.g,body button.r{min-height:var(--ctl-h)}
 .opt,body button.opt{font-size:var(--fs-16)}
}
@media (max-width:420px){main{padding:0 var(--sp-2)}header h1{font-size:var(--fs-14)}}
@media (min-width:1600px){html{font-size:17px}main{max-width:1280px}}
@media (orientation:landscape) and (max-height:480px){header{position:static}.bis{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.tk span{animation:none!important;padding-left:var(--sp-4)}}
@media print{header,.tk,.tabs,.nx-skip,footer,.bis{display:none!important}body{background:#fff;color:#000}.card{box-shadow:none;border:0;padding:0}main{max-width:none;margin:0;padding:0}}

/* ---------- round 2: remaining touch targets, reserved space ---------- */
body button.nx23bell{min-width:var(--ctl-h);min-height:var(--ctl-h)}
a[id^="hl-s"],.hl a,.toc a{display:inline-flex;align-items:center;min-height:var(--ctl-h);padding:0 var(--sp-3)}
main#app{min-height:calc(100svh - 230px)}
body button.g,body button.r{background-image:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12))}
@media (hover:hover) and (pointer:fine){body button.g:hover,body button.r:hover{background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2))}}
.av23,#nx23av{background:var(--ok)!important}
.nx23cnt{background:#c62828!important;font-size:var(--fs-12)!important}
.k23 span,.k23 small{color:var(--muted)}
label:has(>input[type=checkbox]),label:has(>input[type=radio]),label.chk{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-h);min-width:var(--ctl-h);cursor:pointer}
body button{min-width:var(--ctl-h)}
body button.chip,body .chip{min-height:var(--ctl-h);padding:0 var(--sp-3)}

/* ---------- round 4: clock bar, active tab paint, password eye, muted labels ---------- */
:root{--clk-h:28px}
#nxclock{height:var(--clk-h);min-height:var(--clk-h);box-sizing:border-box;padding:0 var(--sp-3)!important;font-size:var(--fs-12)!important;line-height:var(--clk-h);background:#0e1420;border-bottom:1px solid var(--gd);overflow:hidden;white-space:nowrap}
#nxclock span{font-variant-numeric:tabular-nums;font-size:var(--fs-12)}
header{top:var(--clk-h)}
html{scroll-padding-top:calc(var(--hdr-h) + var(--clk-h) + 12px)}
@media (hover:hover) and (pointer:fine){body .tabs button.on,body .tabs button.on:hover,body .tabs button.on:active{background-image:none}}
@media (hover:hover) and (pointer:fine){body .tabs.nx-ready button.on,body .tabs.nx-ready button.on:hover{background-color:transparent}}
body button.eye,body button.eye.nx33eye{width:var(--ctl-h);min-width:var(--ctl-h);height:var(--ctl-h);margin-left:calc(-1*var(--ctl-h));margin-right:0;opacity:.8}
body input:has(+ .eye){padding-right:calc(var(--ctl-h) + 2px)}
body .k23 span,body .k23 small,body .ct33.z{color:var(--muted)}

/* ---------- round 5: contrast + touch size on legacy classes ---------- */
body button{min-height:var(--ctl-h)!important}
body :where(.card,.post,.nx23,.k23,.hl,main) small{opacity:1!important;color:var(--muted)}
body .ct33.z{background:#56637a;color:#fff}
body .hg{color:var(--muted);opacity:1}
body #pl{color:#3d4960}
.nx-ind{background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2))}
a.nx-lnk{display:inline-flex;align-items:center;min-height:var(--ctl-h)}

.nx-ind{background:var(--tab-on);background-image:none}
.tabs:not(.nx-ready) button.on{background-color:var(--tab-on)}
body.dark{--tab-on:#1d7a58}
body .ts23 small,body .hero small,body header small,body .tk small{color:rgba(255,255,255,.84)!important}
label:has(input[type=checkbox]),label:has(input[type=radio]){display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-h);min-width:var(--ctl-h)}
@media (max-width:768px){main a[href]:not(.nx-skip):not(.nx-lnk){display:inline-block;padding:13px 2px;margin:-13px -2px}}


/* ---------- round 6: touch correctness, no scroll fighting, exam mode ---------- */
html{scroll-behavior:auto!important;touch-action:manipulation}
*{-webkit-tap-highlight-color:transparent}
button,a,label,select,input,textarea,summary,[role=button],[role=tab]{touch-action:manipulation}
@media (max-width:768px),(max-height:480px) and (orientation:landscape){header,#nxclock{position:static!important}html{scroll-padding-top:12px}}
body.nx-exam .bis,body.nx-exam .tk{display:none}
body.nx-exam .opt,body.nx-exam button.opt{box-shadow:none!important;background-image:none!important}
body.nx-exam .pal{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;scroll-snap-type:x proximity}
body.nx-exam .pal::-webkit-scrollbar{display:none}
body.nx-exam .pal button{flex:0 0 auto;min-width:var(--ctl-h);margin:0;box-shadow:none!important;background-image:none!important;background-color:var(--card)!important;color:var(--tx)!important;border:1px solid var(--line)!important;border-radius:var(--r-ctl);scroll-snap-align:center}
body.nx-exam .pal button.a{background-color:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important}
body.nx-exam .pal button.c{background-color:var(--tab-on)!important;color:#fff!important;border-color:var(--tab-on)!important}
@media (max-width:768px){
 body.nx-exam #nxclock{display:none}
 body.nx-exam header{padding-top:6px;padding-bottom:6px;min-height:48px}
 body.nx-exam header img{width:32px;height:32px}
 body.nx-exam main{margin-top:8px}
 body.nx-exam .xst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body.nx-exam .xst .xb{padding:6px 8px;min-width:0}
 body button,.btn{font-size:var(--fs-14)}
 svg.nx-i,.ic{width:18px;height:18px}
 header>button .nx-i,header>button .ic{width:20px;height:20px}
 body button.q{width:32px;min-width:32px;height:32px;min-height:32px!important;font-size:var(--fs-14);margin:-4px 0 -4px 6px}
 body button.q::after{content:'';position:absolute;inset:-6px}
}

/* ---------- round 7: beat legacy ID-based rules inside the exam, flat buttons everywhere ---------- */
body button:not(#nx0){box-shadow:none}
body.nx-exam #app .pal button{color:var(--tx)!important;background:var(--card)!important;background-image:none!important;border:1px solid var(--line)!important;box-shadow:none!important}
body.nx-exam #app .pal button.a{background:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important}
body.nx-exam #app .pal button.c{background:var(--tab-on)!important;color:#fff!important;border-color:var(--tab-on)!important}
body.nx-exam #app .xst .xb{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
body.nx-exam #app .xst .xb>*:first-child{color:#eaf1fa!important;opacity:1!important}
body.nx-exam #app .xst .xb.warn{background:#7a1d14;border-color:#ffb4a8}

/* ---------- submit feedback ---------- */
#nx42sub{position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);background:rgba(8,16,34,.72)}
#nx42sub>div{background:var(--card);color:var(--tx);border:var(--bw) solid var(--line);border-radius:var(--r-card);padding:var(--sp-5);max-width:360px;width:100%;text-align:center;box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:var(--sp-2);align-items:center}
#nx42sub b{font-size:var(--fs-16)}#nx42sub small{color:var(--muted)}
.nx42spin{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--tab-on);border-radius:50%;animation:nx-spin .8s linear infinite}