/* =====================================================================
   FCDS BY JOO · v4 "glass" layer
   Loaded after the inline styles in index.html; it only restyles and adds.
   Sections: 1 tokens + palettes · 2 base + type · 3 surfaces · 4 top bar
   5 desktop sidebar · 6 mobile tab bar · 7 sheets + panels · 8 dashboard
   9 charts · 10 subject / quiz / question sets / admin · 11 motion + a11y
   ===================================================================== */

/* ---------- 1) tokens ---------- */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r-s:12px;--r-m:16px;--r-l:24px;--r-pill:999px;
  --d-fast:140ms;--d-med:260ms;--d-slow:900ms;
  --e-out:cubic-bezier(.2,.8,.2,1);--e-spring:cubic-bezier(.34,1.56,.64,1);
  --blur:18px;
  --fs-xs:12px;--fs-s:13.5px;--fs-m:15px;--fs-b:16px;--fs-l:19px;--fs-xl:23px;--fs-2xl:28px;--fs-3xl:36px;
  --tb-h:64px;--sbw:0px;--hh:56px;--rw:68ch;
  /* palette: Classic (indigo), light */
  --bg:#eef0fa;--paper:#ffffff;--ink:#151933;--muted:#596185;--line:rgba(21,25,51,.11);
  --accent:#4f46e5;--accent-2:#db2777;--accent-soft:#e9e8fd;--on-accent:#ffffff;
  --pri:#151933;--on-pri:#ffffff;
  --glass:rgba(255,255,255,.56);--glass-2:rgba(255,255,255,.8);--read:rgba(255,255,255,.94);
  --gb:rgba(255,255,255,.78);--gl:rgba(21,25,51,.07);
  --sh1:0 1px 2px rgba(21,25,51,.04),0 12px 32px -18px rgba(21,25,51,.28);
  --sh2:0 28px 60px -28px rgba(21,25,51,.42);
  --m1:#a5b4fc;--m2:#f9a8d4;--m3:#7dd3fc;--mo:.75;
  --good:#0f8a5f;--good-soft:#dcf5ea;--bad:#d1334a;--bad-soft:#fde6ea;--warn:#b26a00;
  --green:#0f8a5f;--green-soft:#dcf5ea;--red:#d1334a;--red-soft:#fde6ea;
  --c1:#4f46e5;--c2:#db2777;--c3:#0891b2;--c4:#d97706;--c5:#7c3aed;--c6:#059669;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0a0c1b;--paper:#151933;--ink:#eef0ff;--muted:#a3a9cf;--line:rgba(238,240,255,.11);
  --accent:#8f8cff;--accent-2:#f472b6;--accent-soft:rgba(143,140,255,.17);--on-accent:#0a0c1b;
  --pri:#eef0ff;--on-pri:#0d1024;
  --glass:rgba(27,32,66,.5);--glass-2:rgba(22,26,54,.82);--read:rgba(20,24,50,.95);
  --gb:rgba(255,255,255,.08);--gl:rgba(0,0,0,.25);
  --sh1:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.7);--sh2:0 30px 70px -26px rgba(0,0,0,.8);
  --m1:#3730a3;--m2:#831843;--m3:#155e75;--mo:.55;
  --good:#3ddc97;--good-soft:rgba(61,220,151,.14);--bad:#ff7a8a;--bad-soft:rgba(255,122,138,.14);--warn:#ffb74d;
  --green:#3ddc97;--green-soft:rgba(61,220,151,.14);--red:#ff7a8a;--red-soft:rgba(255,122,138,.14);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0c1b;--paper:#151933;--ink:#eef0ff;--muted:#a3a9cf;--line:rgba(238,240,255,.11);
  --accent:#8f8cff;--accent-2:#f472b6;--accent-soft:rgba(143,140,255,.17);--on-accent:#0a0c1b;
  --pri:#eef0ff;--on-pri:#0d1024;
  --glass:rgba(27,32,66,.5);--glass-2:rgba(22,26,54,.82);--read:rgba(20,24,50,.95);
  --gb:rgba(255,255,255,.08);--gl:rgba(0,0,0,.25);
  --sh1:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.7);--sh2:0 30px 70px -26px rgba(0,0,0,.8);
  --m1:#3730a3;--m2:#831843;--m3:#155e75;--mo:.55;
  --good:#3ddc97;--good-soft:rgba(61,220,151,.14);--bad:#ff7a8a;--bad-soft:rgba(255,122,138,.14);--warn:#ffb74d;
  --green:#3ddc97;--green-soft:rgba(61,220,151,.14);--red:#ff7a8a;--red-soft:rgba(255,122,138,.14);
  color-scheme:dark;
}}

/* Sand: warm beige */
:root[data-palette="sand"]{
  --bg:#f3ece2;--paper:#fffdf9;--ink:#2a2118;--muted:#6f604d;--line:rgba(42,33,24,.12);
  --accent:#b45a24;--accent-2:#c98a1b;--accent-soft:#f6e6d6;--on-accent:#fff;--pri:#2a2118;--on-pri:#fffaf3;
  --glass:rgba(255,251,245,.58);--glass-2:rgba(255,251,245,.82);--read:rgba(255,253,249,.95);--gb:rgba(255,255,255,.8);--gl:rgba(42,33,24,.08);
  --m1:#f2c6a0;--m2:#e9d5b5;--m3:#d8b896;--mo:.85;
  --c1:#b45a24;--c2:#a0522d;--c3:#5f7f6a;--c4:#c98a1b;--c5:#8d5b8a;--c6:#4f7c5a;
}
:root[data-palette="sand"][data-theme="dark"]{
  --bg:#17120d;--paper:#241c15;--ink:#f4ead9;--muted:#bba68c;--line:rgba(244,234,217,.11);
  --accent:#f0a067;--accent-2:#e6b45a;--accent-soft:rgba(240,160,103,.16);--on-accent:#1b130c;--pri:#f4ead9;--on-pri:#1b130c;
  --glass:rgba(48,37,27,.5);--glass-2:rgba(34,26,19,.84);--read:rgba(36,28,21,.95);--gb:rgba(255,240,220,.08);--gl:rgba(0,0,0,.3);
  --m1:#7c4a26;--m2:#5c4428;--m3:#3f3424;--mo:.6;
}
@media (prefers-color-scheme:dark){:root[data-palette="sand"]:not([data-theme="light"]){
  --bg:#17120d;--paper:#241c15;--ink:#f4ead9;--muted:#bba68c;--line:rgba(244,234,217,.11);
  --accent:#f0a067;--accent-2:#e6b45a;--accent-soft:rgba(240,160,103,.16);--on-accent:#1b130c;--pri:#f4ead9;--on-pri:#1b130c;
  --glass:rgba(48,37,27,.5);--glass-2:rgba(34,26,19,.84);--read:rgba(36,28,21,.95);--gb:rgba(255,240,220,.08);--gl:rgba(0,0,0,.3);
  --m1:#7c4a26;--m2:#5c4428;--m3:#3f3424;--mo:.6;
}}

/* Ocean: teal / cyan */
:root[data-palette="ocean"]{
  --bg:#e7f3f5;--paper:#ffffff;--ink:#0b2a33;--muted:#4a6b75;--line:rgba(11,42,51,.11);
  --accent:#0b7f8f;--accent-2:#2563eb;--accent-soft:#d8f1f4;--on-accent:#fff;--pri:#0b2a33;--on-pri:#f0fbfc;
  --glass:rgba(255,255,255,.55);--glass-2:rgba(250,255,255,.8);--read:rgba(255,255,255,.94);--gb:rgba(255,255,255,.8);--gl:rgba(11,42,51,.08);
  --m1:#7fd8e4;--m2:#a7e7d2;--m3:#93b9f5;--mo:.8;
  --c1:#0b7f8f;--c2:#2563eb;--c3:#0d9488;--c4:#d97706;--c5:#6366f1;--c6:#059669;
}
:root[data-palette="ocean"][data-theme="dark"]{
  --bg:#04161d;--paper:#0b2530;--ink:#e2f5f8;--muted:#98c0ca;--line:rgba(226,245,248,.11);
  --accent:#4dd6e6;--accent-2:#7aa7ff;--accent-soft:rgba(77,214,230,.15);--on-accent:#042028;--pri:#e2f5f8;--on-pri:#04161d;
  --glass:rgba(12,44,56,.5);--glass-2:rgba(8,32,42,.84);--read:rgba(10,36,46,.95);--gb:rgba(200,250,255,.08);--gl:rgba(0,0,0,.3);
  --m1:#0e5f6e;--m2:#0f4f45;--m3:#1e3a8a;--mo:.6;
}
@media (prefers-color-scheme:dark){:root[data-palette="ocean"]:not([data-theme="light"]){
  --bg:#04161d;--paper:#0b2530;--ink:#e2f5f8;--muted:#98c0ca;--line:rgba(226,245,248,.11);
  --accent:#4dd6e6;--accent-2:#7aa7ff;--accent-soft:rgba(77,214,230,.15);--on-accent:#042028;--pri:#e2f5f8;--on-pri:#04161d;
  --glass:rgba(12,44,56,.5);--glass-2:rgba(8,32,42,.84);--read:rgba(10,36,46,.95);--gb:rgba(200,250,255,.08);--gl:rgba(0,0,0,.3);
  --m1:#0e5f6e;--m2:#0f4f45;--m3:#1e3a8a;--mo:.6;
}}

/* Ruby: deep red */
:root[data-palette="ruby"]{
  --bg:#f8ecee;--paper:#fffafb;--ink:#2a0f16;--muted:#7a5560;--line:rgba(42,15,22,.11);
  --accent:#b0123e;--accent-2:#d9480f;--accent-soft:#fbe0e7;--on-accent:#fff;--pri:#2a0f16;--on-pri:#fff5f7;
  --glass:rgba(255,250,251,.56);--glass-2:rgba(255,248,250,.82);--read:rgba(255,250,251,.95);--gb:rgba(255,255,255,.8);--gl:rgba(42,15,22,.08);
  --m1:#f4a3b6;--m2:#f7c6b2;--m3:#d7a1d4;--mo:.8;
  --c1:#b0123e;--c2:#d9480f;--c3:#9d174d;--c4:#c2410c;--c5:#7e22ce;--c6:#0f766e;
}
:root[data-palette="ruby"][data-theme="dark"]{
  --bg:#16070c;--paper:#2a0f17;--ink:#fbe6eb;--muted:#cda2ad;--line:rgba(251,230,235,.11);
  --accent:#ff6f8f;--accent-2:#ff9f6b;--accent-soft:rgba(255,111,143,.16);--on-accent:#22060d;--pri:#fbe6eb;--on-pri:#1a070c;
  --glass:rgba(58,18,30,.5);--glass-2:rgba(38,12,20,.85);--read:rgba(40,13,22,.95);--gb:rgba(255,210,220,.08);--gl:rgba(0,0,0,.3);
  --m1:#7f1d3a;--m2:#7c2d12;--m3:#581c87;--mo:.55;
}
@media (prefers-color-scheme:dark){:root[data-palette="ruby"]:not([data-theme="light"]){
  --bg:#16070c;--paper:#2a0f17;--ink:#fbe6eb;--muted:#cda2ad;--line:rgba(251,230,235,.11);
  --accent:#ff6f8f;--accent-2:#ff9f6b;--accent-soft:rgba(255,111,143,.16);--on-accent:#22060d;--pri:#fbe6eb;--on-pri:#1a070c;
  --glass:rgba(58,18,30,.5);--glass-2:rgba(38,12,20,.85);--read:rgba(40,13,22,.95);--gb:rgba(255,210,220,.08);--gl:rgba(0,0,0,.3);
  --m1:#7f1d3a;--m2:#7c2d12;--m3:#581c87;--mo:.55;
}}

/* Emerald Night: dark only (v4.js forces data-theme="dark" with this palette) */
:root[data-palette="emerald"],:root[data-palette="emerald"][data-theme]{
  --bg:#050f0c;--paper:#0c1d17;--ink:#e2f7ee;--muted:#93b8aa;--line:rgba(226,247,238,.1);
  --accent:#34d399;--accent-2:#22d3ee;--accent-soft:rgba(52,211,153,.14);--on-accent:#04140e;--pri:#34d399;--on-pri:#04140e;
  --glass:rgba(14,40,31,.48);--glass-2:rgba(9,28,22,.84);--read:rgba(11,30,24,.95);--gb:rgba(180,255,220,.08);--gl:rgba(0,0,0,.35);
  --sh1:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.8);--sh2:0 30px 70px -26px rgba(0,0,0,.85),0 0 40px -20px rgba(52,211,153,.35);
  --m1:#047857;--m2:#0e7490;--m3:#3f6212;--mo:.55;
  --good:#34d399;--good-soft:rgba(52,211,153,.14);--bad:#fb7185;--bad-soft:rgba(251,113,133,.14);--warn:#fbbf24;
  --green:#34d399;--green-soft:rgba(52,211,153,.14);--red:#fb7185;--red-soft:rgba(251,113,133,.14);
  --c1:#34d399;--c2:#22d3ee;--c3:#a3e635;--c4:#fbbf24;--c5:#a78bfa;--c6:#2dd4bf;
  color-scheme:dark;
}

/* ---------- 2) base + type ---------- */
body{direction:rtl;background:var(--bg);color:var(--ink);font-family:var(--f-ar);font-size:var(--fs-b);line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:768px){body{font-size:17px}}
.v4bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--mo);
  background:radial-gradient(42% 38% at 88% 6%,var(--m1),transparent 72%),radial-gradient(38% 34% at 6% 34%,var(--m2),transparent 72%),radial-gradient(50% 42% at 62% 102%,var(--m3),transparent 72%)}
:root[data-palette="emerald"] .v4bg{background:radial-gradient(40% 36% at 85% 4%,var(--m1),transparent 70%),radial-gradient(34% 30% at 4% 40%,var(--m2),transparent 72%),radial-gradient(46% 40% at 60% 104%,var(--m3),transparent 72%)}
body::before{background:var(--glass-2)}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:600;letter-spacing:0}
h1{font-size:var(--fs-2xl);line-height:1.3;font-weight:700}
h2{font-size:var(--fs-xl);line-height:1.35}
h3{font-size:var(--fs-l)}
@media (max-width:540px){h1{font-size:25px}h2{font-size:20px}}
.small{font-size:var(--fs-s);color:var(--muted)}
.lbl{font-size:11.5px;letter-spacing:.08em}
.m,.num,.hcd b,.v4num{font-variant-numeric:tabular-nums}
.num{direction:ltr;unicode-bidi:isolate;font-family:var(--f-en);font-feature-settings:"tnum"}
a{color:var(--accent);text-underline-offset:3px}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
main#app{padding-block:var(--s5) calc(var(--tb-h) + 44px + env(safe-area-inset-bottom,0px))}
.view{gap:var(--s4)}
#view > .view{gap:var(--s5)}
.col{max-width:820px}
body[data-v4r="home"] .col{max-width:1180px}

/* buttons: dark pill primary, soft secondary */
button{border-radius:var(--r-s);border-color:var(--line);background:var(--glass-2);color:var(--ink);min-height:40px;transition:transform var(--d-fast) var(--e-out),background-color var(--d-fast),border-color var(--d-fast),box-shadow var(--d-fast)}
.btn,a.btn,button.btn{background:var(--pri);color:var(--on-pri);border:1px solid transparent;border-radius:var(--r-pill);padding:9px 20px;font-family:var(--f-d);font-weight:600;font-size:var(--fs-m);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--pri) 80%,transparent);min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.3}
.btn:hover{transform:translateY(-1px)}
.btn.ghost,a.btn.ghost{background:var(--glass-2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.sm,a.btn.sm{min-height:36px;padding:6px 14px;font-size:var(--fs-s)}
.btn.wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff}
button.danger,.del.danger{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.btns{gap:var(--s2)}
input,select,textarea{accent-color:var(--accent)}
.exf input,.exf textarea,.fld input,.wz input,.wz textarea,.gbox select,.urow input,.urow select,.chat-search,.keyrow input,#lf input,#np input,.ibc select,.ibc input:not([type=file]):not([type=checkbox]),.ibc textarea{background:var(--read);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);min-height:44px;box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

/* ---------- 3) surfaces ---------- */
/* reading surfaces: near solid, AA contrast for long text */
section,.item,.exhead,.lbox,.ov .panel,.vzbox,.chkin{background:var(--read);border:1px solid var(--gl);border-radius:20px;box-shadow:var(--sh1)}
section{padding:var(--s5);gap:var(--s3)}
section::before{display:none}
@media (max-width:540px){section{padding:18px 16px 20px;border-radius:18px}}
h2 .en{color:var(--accent);font-weight:500;font-size:var(--fs-s);letter-spacing:.02em}
section h2{font-size:var(--fs-l)}
@media (min-width:768px){section h2{font-size:21px}}
#body > section{max-width:none}
@media (min-width:1025px){#body > section p,#body > section li{max-width:var(--rw)}}
.q{background:var(--accent-soft);border-radius:var(--r-s);padding:12px 16px}
.calc{background:color-mix(in srgb,var(--bg) 70%,var(--paper));border-radius:var(--r-s)}
.tip{background:var(--good-soft);border-inline-start:3px solid var(--good);border-radius:var(--r-s)}
.note{background:var(--bad-soft);border-inline-start:3px solid var(--bad);border-radius:var(--r-s)}
.tip,.note{padding:10px 14px}
/* glass surfaces: cards, rows, chips, panels */
.card,.chrow,.excard,.tcard,.urow,.fitem,.pb,.wstep,.wprog,.aiopt,.revcard,.idea,.rcard,.rmcard,.rdet,.cramcard,.vcard,.vidplay,.gbox,.exam,.now,.joohero,.emptyst,.sres,.chat-row,.nitem,.admstats div,.revstats div,.mockbar,.type,.step,.story .sc,.exc,.trainer,.lfeat>div,.gens3 .gbox,.v4card{
  background:var(--glass);border:1px solid var(--gb);border-radius:var(--r-m);box-shadow:var(--sh1)}
.card{border-radius:20px}
.grid > .card:nth-child(1),.card.exams,.card.add,.card.sprint{background:var(--glass)}
.card.ghost{border:1.5px dashed var(--line);background:transparent;box-shadow:none}
/* cards get no backdrop blur on purpose: behind them is only the static mesh, so a translucent fill
   looks the same and scrolling stays cheap. Real blur is kept for floating chrome (bars, sidebar, sheets). */
.chrow{padding:14px 16px;gap:14px;border-radius:var(--r-m)}
.chrow .no{font-size:20px;width:40px;height:40px;min-width:40px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent)!important}
.chrow .tx .en-line{font-size:var(--fs-m)}
.chrow.off{opacity:.6;border-style:dashed;box-shadow:none;background:transparent}
.chrow .pct{background:var(--accent-soft);color:var(--accent);font-family:var(--f-en)}
.chrow .pctbar{height:4px;background:var(--line)}
.chrow .pctbar i,.prog i{background:var(--accent)}
.st{background:var(--line);color:var(--muted);font-size:12px;padding:3px 10px}
.st.done{background:var(--good-soft);color:var(--good)}
a.card:hover,a.chrow:hover,a.excard:hover,a.tcard:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--accent) 30%,var(--gb))}
.exam{background:var(--glass);padding:14px 16px}
.now{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft)}
.chsum span{background:var(--glass);border:1px solid var(--gb);color:var(--muted)}
.badge{background:var(--line);color:var(--muted)}
.pill{background:var(--good-soft);color:var(--good)}
.pill.x{background:var(--bad-soft);color:var(--bad)}
.mcq .opts button,.item .opts button{background:var(--read);border:1px solid var(--line);border-radius:var(--r-s);min-height:48px;padding:10px 14px}
.mcq .opts button:hover,.item .opts button:hover{border-color:var(--accent)}
.mcq .opts button.right,.item .opts button.right{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.mcq .opts button.wrong,.item .opts button.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.ans{color:var(--good)} .bad{color:var(--bad)}
.reveal{border-radius:var(--r-pill);min-height:40px;padding:6px 18px;background:var(--accent-soft);border:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent)}
.solin{border-inline-start-color:var(--accent)}
.hidetg{font-size:var(--fs-s);gap:10px;min-height:44px}
.exhero{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:24px;box-shadow:var(--sh2)}
.exhero .btn{background:#fff;color:#111;box-shadow:none}
.excard{border-top:0;padding:18px}
.excard .big{color:var(--accent)}
.joohero{border-radius:20px}
.emptyst{border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.soon{align-items:flex-start}
.view:has(> #body > .soon) .hidetg,.view:has(> #body > .soon) .toc{display:none}
table th{color:var(--muted)}
th,td{border-bottom-color:var(--line)}

/* tabs: chapter tabs = segmented control, subject tabs + filters = pill chips */
.ctabs{border-bottom:0;padding-bottom:0;gap:6px}
.ctabs:not(.sub):not(.cats){display:inline-flex;align-self:flex-start;background:var(--glass);border:1px solid var(--gb);border-radius:var(--r-pill);padding:4px;box-shadow:var(--sh1);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ctabs:not(.sub):not(.cats) a{border:0;background:transparent;min-height:38px;display:inline-flex;align-items:center;padding:4px 16px;white-space:nowrap;color:var(--muted)}
.ctabs a[aria-current="page"],.ctabs.cats button[aria-current]{background:var(--pri)!important;color:var(--on-pri)!important;border-color:transparent!important;box-shadow:0 6px 16px -10px var(--pri)}
.ctabs.sub{top:calc(env(safe-area-inset-top,0px) + var(--hh));margin-inline:-16px;padding:8px 16px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.ctabs.sub::-webkit-scrollbar,.ctabs::-webkit-scrollbar,.toc::-webkit-scrollbar{display:none}
.ctabs.sub a,.ctabs.cats button{min-height:38px;display:inline-flex;align-items:center;padding:4px 14px;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--gb);color:var(--ink);font-size:var(--fs-s);box-shadow:0 4px 14px -10px rgba(0,0,0,.3);white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ctabs.cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px}
.toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 4px;gap:8px}
.toc button{flex:none;min-height:36px;padding:4px 14px;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--gb);color:var(--ink);font-size:var(--fs-s);white-space:nowrap}
.toc button:hover{border-color:var(--accent);color:var(--accent)}
@media (min-width:1025px){.toc,.ctabs.cats{flex-wrap:wrap;margin-inline:0;padding-inline:0}}
.pager{gap:var(--s2)}
.pager a{border-radius:var(--r-pill);min-height:44px;display:inline-flex;align-items:center;padding:8px 18px;background:var(--glass-2);border:1px solid var(--gb);color:var(--ink);box-shadow:var(--sh1)}
.chhead{gap:4px;padding-block:4px}
.chhead .en-line{color:var(--accent)}
.chhead h1{line-height:1.25}

/* ---------- 4) top bar ---------- */
header.top{padding-block:0;background:var(--glass-2);border-bottom:1px solid var(--gb);box-shadow:0 10px 30px -24px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);view-transition-name:v4top}
.hd{min-height:var(--hh);max-width:1180px;gap:8px;flex-wrap:nowrap}
.brand{order:1;font-size:18px;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);font-weight:700;letter-spacing:.03em;min-height:44px;align-items:center}
.brand span{color:var(--accent);font-size:11px;letter-spacing:.18em;font-weight:500}
.crumbs{order:2}
.hnav{display:none!important}
.hcd{order:3;margin-inline-start:auto;background:var(--glass);border:1px solid var(--gb);color:var(--ink);box-shadow:none;padding:3px 12px 3px 6px;min-height:36px;gap:6px}
.hcd b{font-family:var(--f-en);font-weight:600;font-size:14px;color:var(--ink)}
.hcd span{color:var(--muted);font-family:var(--f-d);font-size:12.5px}
.hcdjoo{width:26px;height:28px;background:var(--accent-soft)}
.hcdt small{display:none}
.hcd.v4hot{background:color-mix(in srgb,var(--bad) 14%,var(--glass-2));border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.hcd.v4hot b{color:var(--bad)}
.focushd{order:4}
.menusrch{order:5}
.v4stylebtn{order:5;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border-radius:14px;border:1px solid var(--gb);background:var(--glass);flex:none;cursor:pointer}
.v4stylebtn .v4sw{width:22px;height:22px}
.v4sw{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--glass-2);font-style:normal}
.v4stylechip{cursor:pointer;font:inherit}
.v4palbig button{min-height:96px;gap:4px}
.v4palbig button i{width:40px;height:40px}
.v4palbig button small{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600}
.v4palbig button small svg{width:12px;height:12px}
.v4sh-lbl{margin:14px 4px 6px;font-size:12px;color:var(--muted);font-weight:600}
.v4modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v4modes button{min-height:44px;border-radius:14px;background:var(--glass);border:1.5px solid var(--gb);color:var(--ink);font:500 var(--fs-s)/1.2 var(--f-ar)}
.v4modes button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.v4modes button:disabled{opacity:.45}
.v4more-acc{margin-top:12px}
.menubtn{order:6}
.menusrch,.focushd,.menubtn{display:inline-grid!important;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border-radius:14px;border:1px solid var(--gb);background:var(--glass);color:var(--ink);flex:none;position:relative}
.menusrch svg,.focushd svg{width:20px;height:20px}
.menusrch .v4lbl{display:none}
.focushd{width:auto;padding:0 12px;font-size:13px;gap:4px;display:inline-flex!important}
.focushd.on{background:var(--pri);color:var(--on-pri);border-color:transparent}
@media (max-width:1024px){.focushd:not(.on){display:none!important}}
.menubtn span,.menubtn .mlbl{display:none!important}
.v4av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-style:normal;font-family:var(--f-d);font-weight:700;font-size:14px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 2px var(--glass-2)}
.menubtn{border-radius:50%;border-color:transparent;background:transparent}
.menubtn.on .v4av{box-shadow:0 0 0 2px var(--accent)}
@media (max-width:420px){.hcd span{display:none}.hcd{padding-inline-end:10px}}
@media (max-width:360px){.hcdjoo{display:none}}

/* ---------- 5) desktop sidebar (right side, RTL) ---------- */
.v4side{display:none}
@media (min-width:1025px){
  :root{--sbw:256px;--hh:60px}
  body.v4-side-min{--sbw:80px}
  body:not(.gated){padding-right:var(--sbw)}
  body.gated{--sbw:0px}
  body::before{right:var(--sbw)}
  .v4side{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;width:var(--sbw);z-index:32;box-sizing:border-box;padding:14px 12px 12px;
    background:var(--glass-2);border-left:1px solid var(--gb);box-shadow:-20px 0 50px -40px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
    transition:width var(--d-med) var(--e-out);view-transition-name:v4side}
  body.gated .v4side{display:none}
  .brand{display:none}
  .crumbs{display:flex!important;flex:1 1 0}
  .menusrch{width:auto;min-width:220px;padding:0 14px;display:inline-flex!important;justify-content:flex-start;gap:8px;color:var(--muted);font-size:var(--fs-s);border-radius:var(--r-pill)}
  .menusrch .v4lbl{display:inline;font-family:var(--f-ar)}
  .menusrch kbd{margin-inline-start:auto;font-family:var(--f-en);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--muted)}
  .hcd{margin-inline-start:0}
  .hd{max-width:none;padding-inline:8px}
}
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 12px}
.sb-brand{font-family:var(--f-d);font-weight:700;font-size:19px;letter-spacing:.03em;color:var(--ink);text-decoration:none;direction:ltr;white-space:nowrap}
.sb-brand span{color:var(--accent);font-size:10.5px;letter-spacing:.2em;font-weight:500;margin-left:6px}
.sb-min{width:36px;height:36px;min-height:36px;padding:0;border-radius:10px;display:grid;place-items:center;background:transparent;border:1px solid transparent;color:var(--muted)}
.sb-min:hover{background:var(--glass);border-color:var(--gb)}
.sb-min svg{width:18px;height:18px;transition:transform var(--d-med)}
body.v4-side-min .sb-min svg{transform:scaleX(-1)}
.sb-ask{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;border-radius:var(--r-pill);background:var(--pri);color:var(--on-pri);border:0;padding:0 16px;font-family:var(--f-d);font-weight:600;font-size:var(--fs-m);margin-bottom:10px;box-shadow:0 10px 24px -14px var(--pri);cursor:pointer}
.sb-ask svg{width:20px;height:20px;flex:none}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;margin-inline:-4px;padding-inline:4px}
.sb-g{margin:10px 0 4px}
.sb-g h4{margin:0 8px 4px;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between}
.sb-g details summary{list-style:none;cursor:pointer}
.sb-g details summary::-webkit-details-marker{display:none}
.sb-g h4 svg{width:14px;height:14px;flex:none;transition:transform .2s}
.sb-g details[open] h4 svg{transform:rotate(180deg)}
.sb-i{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ink);text-decoration:none;font:500 var(--fs-s)/1.3 var(--f-ar);text-align:start;cursor:pointer;position:relative;box-sizing:border-box}
.sb-i:hover{background:var(--glass);border-color:var(--gb)}
.sb-i svg{width:19px;height:19px;flex:none;color:var(--muted)}
.sb-i .sb-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-i[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sb-i[aria-current] svg{color:var(--accent)}
.sb-i[aria-current]::before{content:"";position:absolute;right:-12px;top:10px;bottom:10px;width:3px;border-radius:3px 0 0 3px;background:var(--accent)}
.sb-bd{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;background:var(--accent);color:var(--on-accent);font:600 11px/1 var(--f-en);box-sizing:border-box}
.sb-bd.red{background:var(--bad);color:#fff}
.sb-pc{font:500 11px/1 var(--f-en);color:var(--muted)}
.sb-foot{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;display:flex;align-items:center;gap:10px}
.sb-foot .v4av{width:36px;height:36px;flex:none}
.sb-foot .sb-me{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.sb-foot .sb-me b{font-family:var(--f-d);font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-foot .sb-me small{color:var(--muted);font-size:11.5px}
body.v4-side-min .sb-t,body.v4-side-min .sb-g h4,body.v4-side-min .sb-brand,body.v4-side-min .sb-ask span,body.v4-side-min .sb-pc,body.v4-side-min .sb-me{display:none}
body.v4-side-min .sb-top{justify-content:center}
body.v4-side-min .sb-i,body.v4-side-min .sb-ask{justify-content:center;padding:0}
body.v4-side-min .sb-bd{position:absolute;top:2px;left:8px;min-width:16px;height:16px;font-size:10px}
body.v4-side-min .sb-g{border-top:1px solid var(--line);padding-top:6px}

/* ---------- 6) mobile tab bar ---------- */
.v4tabs{display:none}
@media (max-width:1024px){
  .v4tabs{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;position:fixed;z-index:45;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:var(--tb-h);margin-inline:auto;max-width:560px;box-sizing:border-box;
    border-radius:26px;background:var(--glass-2);border:1px solid var(--gb);box-shadow:var(--sh2);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
    transition:transform var(--d-med) var(--e-out),opacity var(--d-med);view-transition-name:v4tabs}
  .v4tabs.v4-hide{transform:translateY(calc(100% + 24px));opacity:0}
  body.gated .v4tabs,body:has(#ask:not([hidden])) .v4tabs,body:has(.v4sheet) .v4tabs,body:has(#notesp:not([hidden])) .v4tabs,body:has(#vid-pop:not([hidden])) .v4tabs,body:has(#ideasp:not([hidden])) .v4tabs,body:has(#planp:not([hidden])) .v4tabs,body:has(#themep:not([hidden])) .v4tabs,body:has(#focus-pop:not([hidden])) .v4tabs{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
}
.v4tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:20px;background:none;color:var(--muted);text-decoration:none;font:500 11px/1.25 var(--f-d);position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v4tab .ti{display:grid;place-items:center;width:46px;height:30px;border-radius:15px;transition:background-color var(--d-med),transform var(--d-med) var(--e-spring),box-shadow var(--d-med)}
.v4tab svg{width:22px;height:22px}
.v4tab[aria-current="page"]{color:var(--accent);font-weight:600}
.v4tab[aria-current="page"] .ti{background:var(--accent-soft);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent);transform:translateY(-2px)}
.v4tab[aria-current="page"]::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.v4tab:active .ti{transform:scale(.9)}
.v4tab .tbd{position:absolute;top:5px;left:calc(50% - 22px);min-width:17px;height:17px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--bad);color:#fff;font:600 10.5px/17px var(--f-en);text-align:center;box-shadow:0 0 0 2px var(--glass-2)}
.v4tab.ai{color:var(--ink)}
.v4tab.ai .ti{width:58px;height:58px;border-radius:50%;margin-top:-30px;color:var(--on-accent);background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 0 0 5px color-mix(in srgb,var(--paper) 88%,transparent),0 12px 28px -8px var(--accent);position:relative;transform:none}
.v4tab.ai .ti::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent);z-index:-1;animation:v4glow 3.2s ease-in-out infinite}
.v4tab.ai svg{width:26px;height:26px}
.v4tab.ai[aria-expanded="true"] .ti{transform:scale(.94)}
@keyframes v4glow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}

/* the old floating corner buttons are replaced by the tab bar / sidebar / tools sheet */
#ask-fab,#notes-fab,#vid-fab,#ideas-fab,.notesfab,.ideasfab,.fab{display:none!important}
#joopop{bottom:calc(var(--tb-h) + 26px + env(safe-area-inset-bottom,0px));background:var(--glass-2);border:1px solid var(--gb);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:96}
@media (min-width:1025px){#joopop{bottom:24px;inset-inline-start:auto;left:24px}}

/* ---------- 7) sheets + panels ---------- */
.v4sheet{position:fixed;inset:0;z-index:85;background:rgba(6,8,20,.36);display:flex;align-items:flex-end;justify-content:center;animation:v4fade var(--d-med) var(--e-out) both}
.v4sh{box-sizing:border-box;width:min(560px,calc(100% - 16px));margin:0 8px calc(8px + env(safe-area-inset-bottom,0px));max-height:min(84dvh,760px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--glass-2);border:1px solid var(--gb);border-radius:28px;box-shadow:var(--sh2);padding:8px 16px 18px;
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);animation:v4up var(--d-med) var(--e-out) both}
.v4sh::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 10px}
@media (min-width:1025px){
  .v4sheet{align-items:flex-start;justify-content:flex-start;padding:calc(var(--hh) + 10px) 0 0 16px;background:rgba(6,8,20,.14)}
  .v4sh{width:380px;margin:0;border-radius:22px;max-height:calc(100dvh - var(--hh) - 30px)}
  .v4sh::before{display:none}
  .v4sheet.center{align-items:center;justify-content:center;padding:0}
}
.v4sh-h{display:flex;align-items:center;gap:12px;padding:4px 4px 12px}
.v4sh-h .v4av{width:44px;height:44px;font-size:17px}
.v4sh-h > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.v4sh-h b{font-family:var(--f-d);font-size:var(--fs-l)}
.v4sh-h small{color:var(--muted);font-size:var(--fs-s)}
.v4x{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--glass);border:1px solid var(--gb)}
.v4x svg{width:18px;height:18px}
.v4grp{margin-top:12px}
.v4grp h4{font-size:12px;color:var(--muted);font-weight:600;margin:0 4px 8px}
.v4grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v4it{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px;border-radius:16px;background:var(--glass);border:1px solid var(--gb);color:var(--ink);text-decoration:none;font:500 var(--fs-s)/1.35 var(--f-ar);text-align:start;cursor:pointer;box-sizing:border-box;position:relative}
.v4it:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.v4it[aria-current]{background:var(--accent-soft);color:var(--accent)}
.v4it .ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.v4it .ic svg{width:18px;height:18px}
.v4it .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.v4it .tx small{font-size:11.5px;color:var(--muted)}
.v4it .sb-bd{margin-inline-start:auto}
.v4tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v4tool{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:92px;justify-content:center;padding:10px 4px;border-radius:20px;background:var(--glass);border:1px solid var(--gb);color:var(--ink);font:500 12.5px/1.3 var(--f-d);text-align:center;cursor:pointer;position:relative}
.v4tool .ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.v4tool .ic svg{width:22px;height:22px}
.v4tool .sb-bd{position:absolute;top:8px;left:12px}
.v4tool:active{transform:scale(.95)}
.v4sh-note{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}

/* legacy panels → glass; on phones/tablets they become bottom sheets */
.askp,.ideasp,.notesp,.srchp,.themep,.mega .megain,.focuspop,.vidpop,.planp{background:var(--glass-2);border:1px solid var(--gb);box-shadow:var(--sh2);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border-radius:24px;color:var(--ink)}
.askp textarea,.ideasp textarea,.notesp textarea,.vidpop textarea,.srchp .ihd input,#vz-af input{background:var(--read);border:1px solid var(--line);border-radius:14px}
.askp .ahd{border-bottom-color:var(--line);padding:10px 12px 10px 14px}
.askp form{border-top-color:var(--line)}
.askp .ahb button,.askp .ahb a,.ideasp .ihd button,.srchp .ihd button,.chkin .ihd button{min-height:36px;border-radius:12px;background:var(--glass);border:1px solid var(--gb)}
.askp .quick button{min-height:34px;background:var(--glass)}
.askp .me{background:var(--accent-soft)}
.askp .vizgo{background:linear-gradient(135deg,var(--accent),var(--accent-2));min-height:44px}
.askmode button[aria-pressed=true]{background:var(--pri);color:var(--on-pri)}
.sres{background:var(--glass)}
@media (max-width:1024px){
  .askp{left:0!important;right:0;bottom:0;width:auto;max-height:calc(100dvh - 40px - env(safe-area-inset-top,0px));border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);border-bottom:0}
  .askp form{padding-bottom:12px}
  .ideasp,.notesp,.vidpop,.focuspop,.themep,.planp{position:fixed;left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:80dvh;inset-inline-end:auto;z-index:86;border-radius:26px;padding:14px 16px 18px;box-sizing:border-box;overflow-y:auto}
  .srchp{top:calc(8px + env(safe-area-inset-top,0px));width:calc(100vw - 16px);max-height:calc(100dvh - 24px);border-radius:24px}
}
@media (min-width:1025px){
  .notesp{left:24px;bottom:24px}
  .vidpop{right:auto;left:24px;bottom:24px}
  .askp{left:24px;bottom:24px}
  .focuspop,.themep{left:24px;top:calc(var(--hh) + 10px)}
  .ideasp{top:calc(var(--hh) + 10px)}
}
.themep{min-width:280px;gap:12px}
.themep > b{font-family:var(--f-d);font-size:var(--fs-s);color:var(--muted);font-weight:600}
.themep .modes button{min-height:40px;border-radius:var(--r-pill);padding:4px 14px}
.v4pal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.v4pal button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px;min-height:76px;border-radius:16px;background:var(--glass);border:1.5px solid var(--gb);font:500 11.5px/1.2 var(--f-d);color:var(--ink)}
.v4pal button i{width:34px;height:34px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.v4pal button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.themep .v4acc-row[hidden]{display:none!important}
.v4emnote{font-size:12px;color:var(--muted);margin:-4px 0 0}

/* ---------- 8) dashboard ---------- */
.v4dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:stretch}
.v4dash > *{grid-column:span 12;min-width:0}
@media (max-width:1024px){.v4dash > .m6{grid-column:span 6}}
@media (min-width:640px) and (max-width:1024px){.v4dash > .t6{grid-column:span 6}}
@media (min-width:1025px){.v4dash{gap:18px}.v4dash > .d8{grid-column:span 8}.v4dash > .d7{grid-column:span 7}.v4dash > .d6{grid-column:span 6}.v4dash > .d5{grid-column:span 5}.v4dash > .d4{grid-column:span 4}.v4dash > .d3{grid-column:span 3}}
.v4card{padding:18px;border-radius:22px;display:flex;flex-direction:column;gap:12px;position:relative;color:var(--ink);text-decoration:none}
@media (min-width:768px){.v4card{padding:22px}}
.v4h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v4h h2,.v4h h3{font-size:17px;margin:0;display:flex;align-items:center;gap:8px;font-weight:600}
.v4h small,.v4sub{color:var(--muted);font-size:12.5px;font-weight:400}
.v4h a,.v4link{font:500 var(--fs-s)/1 var(--f-d);color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:4px;min-height:36px;white-space:nowrap}
.v4h a svg,.v4link svg{width:16px;height:16px}
.v4sect{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 2px 0}
.v4sect h2{font-size:var(--fs-l);margin:0}
.v4sect small{color:var(--muted);font-size:var(--fs-s)}

/* greeting */
.v4hero{overflow:hidden;padding:20px 20px 18px;gap:10px;min-height:0}
.v4hero::after{content:"";position:absolute;inset:auto -60px -80px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);pointer-events:none}
.v4hero .v4hi{display:flex;align-items:flex-start;gap:12px}
.v4hero .v4hi > div{flex:1;min-width:0}
.v4hero h1{font-size:26px;margin:0 0 2px;line-height:1.3}
@media (min-width:768px){.v4hero h1{font-size:32px}}
.v4hero p{color:var(--muted);margin:0;font-size:var(--fs-m);line-height:1.7}
.v4hero .joo-exam{display:block;width:64px;height:72px;flex:none;margin-top:-4px}
.v4chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.v4chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--gb);font:500 var(--fs-s)/1.2 var(--f-d);color:var(--ink);text-decoration:none;white-space:nowrap}
.v4chip svg{width:16px;height:16px}
.v4chip.flame svg{color:#f97316}
.v4chip.flame.on{background:color-mix(in srgb,#f97316 14%,var(--glass-2));border-color:color-mix(in srgb,#f97316 30%,transparent)}
.v4chip.flame.on svg{animation:v4flame 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes v4flame{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12,1.18) rotate(-4deg)}60%{transform:scale(.96,1.06) rotate(3deg)}}
.v4lv{display:flex;align-items:center;gap:10px;margin-top:2px}
.v4lv .lvb{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden;direction:ltr}
.v4lv .lvb i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform-origin:left;transition:transform var(--d-slow) var(--e-out)}
.v4lv small{font:500 12px/1 var(--f-en);color:var(--muted);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.v4week{display:flex;gap:6px;direction:rtl}
.v4week span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font:500 10.5px/1 var(--f-d);color:var(--muted)}
.v4week span i{width:100%;max-width:30px;height:8px;border-radius:4px;background:var(--line)}
.v4week span.on i{background:linear-gradient(90deg,#f97316,#facc15)}
.v4week span.today{color:var(--ink);font-weight:600}

/* today */
.v4today{gap:12px}
.v4today .v4main{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);text-decoration:none;color:var(--ink)}
.v4today .v4main .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);flex:none}
.v4today .v4main .ic svg{width:22px;height:22px}
.v4today .v4main > span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.v4today .v4main b{font-family:var(--f-d);font-size:var(--fs-m)}
.v4today .v4main small{color:var(--muted);font-size:12.5px}
.v4today .btn{align-self:stretch}
.v4list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.v4list li,.v4list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:var(--fs-s);line-height:1.45}
.v4list a:hover{background:var(--glass-2)}
.v4list .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--gb);color:var(--accent);flex:none}
.v4list .ic svg{width:16px;height:16px}
.v4list .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.v4list .tx small{color:var(--muted);font-size:12px}
.v4list .end{font:500 12px/1 var(--f-en);color:var(--muted);white-space:nowrap}
.v4list .now-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft);flex:none}

/* stat cards */
.v4stat{gap:6px;padding:16px;min-height:132px;text-decoration:none}
.v4stat .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:6px}
.v4stat .ic svg{width:20px;height:20px}
.v4stat .ic.good{background:var(--good-soft);color:var(--good)}
.v4stat .ic.bad{background:var(--bad-soft);color:var(--bad)}
.v4stat .ic.warm{background:color-mix(in srgb,#f97316 15%,transparent);color:#ea580c}
.v4stat .v{font:700 30px/1.05 var(--f-en);letter-spacing:-.01em;direction:ltr;unicode-bidi:isolate;text-align:right;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px;justify-content:flex-end}
.v4stat .v small{font:500 13px/1 var(--f-en);color:var(--muted)}
.v4stat .k{font:500 var(--fs-s)/1.35 var(--f-d);color:var(--muted)}
a.v4stat:hover,a.v4card:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
a.v4card,a.v4stat{transition:transform var(--d-med) var(--e-out),box-shadow var(--d-med)}

/* subject cards */
.v4subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.v4sub{flex-direction:row;align-items:center;gap:14px;padding:16px}
.v4sub .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v4sub .en{font:600 var(--fs-b)/1.35 var(--f-en);direction:ltr;unicode-bidi:isolate;text-align:right}
.v4sub .ar{color:var(--muted);font-size:var(--fs-s)}
.v4sub .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.v4sub .meta > span{font:500 11.5px/1 var(--f-d);padding:5px 8px;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--gb);color:var(--muted);white-space:nowrap}
.v4sub .meta > span.ex{color:var(--accent)}
.v4add{border:1.5px dashed color-mix(in srgb,var(--accent) 40%,transparent);background:transparent;box-shadow:none;justify-content:center;align-items:center;flex-direction:row;color:var(--accent);font-family:var(--f-d);min-height:88px}
.v4add svg{width:20px;height:20px}
.v4cram{flex-direction:row;align-items:center;gap:14px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 16%,var(--glass)),var(--glass));overflow:hidden}
.v4cram .ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--pri);color:var(--on-pri);flex:none}
.v4cram .ic svg{width:24px;height:24px}
.v4cram > span{flex:1;display:flex;flex-direction:column;line-height:1.5}
.v4cram b{font-family:var(--f-d);font-size:var(--fs-b)}
.v4cram small{color:var(--muted);font-size:var(--fs-s)}
.v4cram .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--gb);flex:none}
.v4cram .go svg{width:18px;height:18px}
.v4cram.hot .tag{font:600 11px/1 var(--f-d);color:var(--bad);background:var(--bad-soft);padding:4px 8px;border-radius:var(--r-pill);align-self:flex-start;margin-bottom:2px}
.v4quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px}
.v4quick::-webkit-scrollbar{display:none}
@media (min-width:1025px){.v4quick{flex-wrap:wrap;margin-inline:0;padding-inline:0}}
.v4quick a,.v4quick button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px 4px 8px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--gb);color:var(--ink);text-decoration:none;font:500 var(--fs-s)/1.2 var(--f-d);box-shadow:var(--sh1);cursor:pointer}
.v4quick .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.v4quick .ic svg{width:16px;height:16px}
.v4empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:14px 8px;color:var(--muted);font-size:var(--fs-s);min-height:120px}
.v4empty b{font-family:var(--f-d);color:var(--ink);font-size:var(--fs-m)}
.v4empty .btn{margin-top:6px}
/* the legacy term + calculator blocks, kept and calmed down */
.v4dash .term{margin:0;background:var(--glass);border:1px solid var(--gb)}
.v4dash .term .termh h2{font-size:var(--fs-l)}
.v4dash .tgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.v4dash .tcard{background:var(--glass-2);border:1px solid var(--gb);border-radius:16px;padding:12px 14px;box-shadow:none}
.v4dash .tcard b{font-family:var(--f-en);font-weight:600}
.v4dash .calcnudge{margin:0}
.v4dash .emptyst{margin:0}

/* ---------- 9) charts (inline SVG + CSS; no library) ---------- */
.v4ring{position:relative;display:grid;place-items:center;flex:none}
.v4ring svg{display:block;transform:rotate(-90deg)}
.v4ring .trk{stroke:var(--line);fill:none}
.v4ring .val{stroke:url(#v4grad);fill:none;stroke-linecap:round;transition:stroke-dashoffset var(--d-slow) var(--e-out)}
.v4ring .val.solid{stroke:var(--accent)}
.v4ring .val.good{stroke:var(--good)}
.v4ring .val.bad{stroke:var(--bad)}
.v4ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-align:center}
.v4ring .ctr b{font:700 24px/1 var(--f-en);direction:ltr;font-variant-numeric:tabular-nums}
.v4ring .ctr small{font:500 11px/1.3 var(--f-d);color:var(--muted);margin-top:3px}
.v4ring.sm .ctr b{font-size:14px}
.v4ring.xs .ctr b{font-size:11px}
.v4donut{display:flex;align-items:center;gap:18px}
.v4legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.v4legend div{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--muted)}
.v4legend div b{color:var(--ink);font:600 var(--fs-s)/1 var(--f-en);margin-inline-start:auto;direction:ltr;unicode-bidi:isolate}
.v4legend i{width:10px;height:10px;border-radius:3px;flex:none}
/* vertical bars, one highlighted */
.v4bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:22px;direction:ltr;position:relative}
.v4bars::before{content:"";position:absolute;left:0;right:0;bottom:24px;border-top:1px dashed var(--line)}
.v4bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;position:relative;text-decoration:none;color:inherit}
.v4bar .b{width:100%;max-width:40px;border-radius:12px 12px 6px 6px;background:color-mix(in srgb,var(--accent) 22%,var(--glass-2));min-height:6px;transform-origin:bottom;transition:transform var(--d-slow) var(--e-out),background-color var(--d-med);position:relative}
.v4bar.hi .b{background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 10px 24px -10px var(--accent)}
.v4bar .bv{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font:600 11.5px/1 var(--f-en);color:var(--muted);white-space:nowrap}
.v4bar.hi .bv{color:var(--ink)}
.v4bar .bl{font:500 11px/1.1 var(--f-en);color:var(--muted);white-space:nowrap;height:18px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.v4bar.hi .bl{color:var(--accent);font-weight:600}
.v4bar.none .b{background:transparent;border:1.5px dashed var(--line)}
.v4bar:hover .b{filter:brightness(1.08)}
.v4note{font-size:12.5px;color:var(--muted);margin:0;line-height:1.7}
.v4note i{display:inline-block;vertical-align:middle;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-inline-end:6px}
/* horizontal bars (mistakes per chapter) */
.v4hbars{display:flex;flex-direction:column;gap:10px}
.v4hb{display:grid;grid-template-columns:52px 1fr 26px;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.v4hb span{font:500 12.5px/1 var(--f-en);color:var(--muted);direction:ltr;text-align:right}
.v4hb .tr{height:12px;border-radius:6px;background:var(--line);overflow:hidden;direction:ltr}
.v4hb .tr i{display:block;height:100%;border-radius:6px;background:color-mix(in srgb,var(--bad) 70%,var(--accent-2));transform-origin:left;transition:transform var(--d-slow) var(--e-out)}
.v4hb b{font:600 var(--fs-s)/1 var(--f-en);text-align:left}
/* semicircle gauge */
.v4gauge{position:relative;width:100%;max-width:240px;margin:0 auto}
.v4gauge svg{display:block;width:100%;height:auto;overflow:visible}
.v4gauge .trk{stroke:var(--line);fill:none;stroke-linecap:round}
.v4gauge .val{stroke:url(#v4grad);fill:none;stroke-linecap:round;transition:stroke-dashoffset var(--d-slow) var(--e-out)}
.v4gauge .ctr{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.v4gauge .ctr b{font:700 30px/1 var(--f-en);direction:ltr}
.v4gauge .ctr small{color:var(--muted);font-size:12px;font-family:var(--f-d);margin-top:2px}
.v4gfoot{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.v4gfoot b{color:var(--ink);font-family:var(--f-d)}
.v4verdict{font:500 var(--fs-s)/1.5 var(--f-d);padding:8px 12px;border-radius:12px;text-align:center}
.v4verdict.ok{background:var(--good-soft);color:var(--good)}
.v4verdict.no{background:var(--bad-soft);color:var(--bad)}
.v4verdict.mid{background:var(--accent-soft);color:var(--accent)}
/* reveal-on-enter start states (removed by v4.js; never applied under reduced motion) */
.v4pre .val{stroke-dashoffset:100!important}
.v4pre .v4bar .b,.v4pre.v4bar .b{transform:scaleY(0)}
.v4pre .tr i,.v4pre .lvb i{transform:scaleX(0)}

/* ---------- 10) subject page, quiz result, question sets, admin ---------- */
.v4srow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px 18px}
.v4srow .v4bars{height:112px;padding-top:20px}
.v4srow .v4bar .b{max-width:26px;border-radius:8px 8px 4px 4px}
.v4srow .v4ss{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}
@media (min-width:768px){.v4srow{grid-template-columns:auto 1fr auto}.v4srow .v4ss{grid-column:auto;flex-direction:column}}
.v4qprog{display:flex;gap:3px;direction:ltr;margin:2px 0 4px}
.v4qprog i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background-color var(--d-med)}
.v4qprog i.ok{background:var(--good)}
.v4qprog i.no{background:var(--bad)}
.v4qres{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px;border-radius:20px;background:var(--glass);border:1px solid var(--gb);box-shadow:var(--sh1);animation:v4up var(--d-med) var(--e-out) both}
.v4qres h3{margin:0;font-size:var(--fs-l)}
.v4qres p{margin:2px 0 8px;color:var(--muted);font-size:var(--fs-s)}
.v4qres .v4qprog{margin:0}
.v4qres .v4qprog i{height:16px;border-radius:5px;cursor:pointer;border:0;padding:0;min-height:0}
.v4qres .keys{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:6px}
.v4qres .keys span{display:inline-flex;align-items:center;gap:5px}
.v4qres .keys i{width:8px;height:8px;border-radius:2px;display:inline-block}
.mcq{border-top-color:var(--line);padding-top:16px}
/* question sets: one compact action row per question */
.item{padding:18px;gap:12px;border-radius:20px}
.item > .ihd{order:-1}
.item .btns.v4act{justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:8px}
.item .btns.v4act > button{min-height:40px;border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-s);font-family:var(--f-d)}
.item .btns.v4act > .stuck-b{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.v4more{position:relative}
.v4more > summary{list-style:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--glass-2);border:1px solid var(--line);cursor:pointer;color:var(--ink)}
.v4more > summary::-webkit-details-marker{display:none}
.v4more > summary svg{width:18px;height:18px}
.v4more[open] > summary{background:var(--accent-soft);color:var(--accent)}
.v4more .v4menu{position:absolute;z-index:20;bottom:calc(100% + 6px);inset-inline-start:0;min-width:200px;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:16px;background:var(--glass-2);border:1px solid var(--gb);box-shadow:var(--sh2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.v4more .v4menu button{justify-content:flex-start;text-align:start;border:0;background:transparent;border-radius:10px;min-height:44px;padding:6px 12px;font-size:var(--fs-s);width:100%;display:flex;align-items:center;gap:8px}
.v4more .v4menu button:hover{background:var(--accent-soft)}
.item .selfgrade button{min-height:40px;border-radius:var(--r-pill)}
.item .hint{font-size:12.5px}
#items > div > .lbl,#probs > div > .lbl,#mbox > div > .lbl,#tagged > div > .lbl,#body > div > .lbl{margin:6px 4px 6px;display:block}
button.stuck{min-height:30px;border-radius:var(--r-pill);font-size:12px;padding:2px 12px;background:var(--glass-2);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
button.stuck.vzb{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.mockbar{top:calc(env(safe-area-inset-top,0px) + var(--hh) + 52px);background:var(--glass-2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--r-pill);padding:6px 8px 6px 14px}
.mockbar .btn{min-height:40px}
/* admin: compact rows that expand */
.admstats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.admstats div{padding:14px 10px;border-radius:18px}
.admstats b{font-family:var(--f-en);color:var(--ink);font-size:26px}
.admstats span{font-size:12px;color:var(--muted);text-align:center}
.urow{padding:0;gap:0;overflow:hidden}
.v4uh{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;border:0;border-radius:0;background:transparent;text-align:start;cursor:pointer;color:var(--ink)}
.v4uh .v4av{width:38px;height:38px;flex:none;font-size:14px}
.v4uh .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.v4uh .tx b{font-family:var(--f-d);font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4uh .tx small{color:var(--muted);font:400 12px/1.3 var(--f-en);direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4uh .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.v4st{font:600 11.5px/1 var(--f-d);padding:5px 9px;border-radius:var(--r-pill);white-space:nowrap}
.v4st.approved{background:var(--good-soft);color:var(--good)}
.v4st.pending{background:color-mix(in srgb,#f59e0b 18%,transparent);color:var(--warn)}
.v4st.blocked,.v4st.exp{background:var(--bad-soft);color:var(--bad)}
.v4st.n{background:var(--line);color:var(--muted)}
.v4uh .chev{width:18px;height:18px;color:var(--muted);transition:transform var(--d-med);flex:none}
.urow.v4open .v4uh .chev{transform:rotate(180deg)}
.urow.v4u > .uinfo{display:none}
.urow.v4u > .uctl,.urow.v4u > .pill{display:none}
.urow.v4u.v4open > .uctl{display:flex;padding:4px 14px 16px;border-top:1px solid var(--line);padding-top:14px}
.urow.v4u.v4open > .pill{display:inline-block;margin:0 14px 14px}
.uctl label{font-size:12.5px}
.uctl label.tg{min-height:40px}
.uacc button.sm{min-height:34px}
@media (max-width:540px){.v4uh .meta .v4st.n{display:none}}
/* misc legacy pieces */
.revcard{border-radius:20px;background:var(--glass)}
.revstats div{border-radius:18px}
.revstats b{font-family:var(--f-en)}
.idea .ia button,.rcard .ra button{min-height:32px}
.lbox{background:var(--glass-2);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border:1px solid var(--gb);border-radius:26px}
.lbox .mark,.land .mark{background:none;color:var(--ink);-webkit-background-clip:border-box;background-clip:border-box}
.lbox .mark span,.land .mark span{color:var(--accent)}
.ltabs{background:var(--line);border-radius:var(--r-pill)}
.ltabs button{border-radius:var(--r-pill);min-height:40px}
.ltabs button[aria-pressed="true"]{background:var(--read)}
.gbtn{border-radius:var(--r-pill);min-height:46px;background:var(--read)}
.lfeat>div{border-radius:18px}
.ov{background:rgba(6,8,20,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rtabs button{min-height:38px}
.rtabs button[aria-current]{background:var(--pri);color:var(--on-pri)}
.vzctl button{min-height:40px}
.vzctl button.pp{background:var(--pri);color:var(--on-pri)}
.kbhint{background:color-mix(in srgb,#f59e0b 16%,transparent);color:var(--warn)}

/* ---------- 11) motion, toasts, confetti, a11y ---------- */
@keyframes v4up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes v4fade{from{opacity:0}to{opacity:1}}
#view > .view > *{animation:v4up .45s var(--e-out) both}
.v4dash > *{animation:v4up .5s var(--e-out) both}
.v4dash > :nth-child(2){animation-delay:40ms}.v4dash > :nth-child(3){animation-delay:80ms}.v4dash > :nth-child(4){animation-delay:110ms}.v4dash > :nth-child(5){animation-delay:140ms}.v4dash > :nth-child(6){animation-delay:170ms}.v4dash > :nth-child(n+7){animation-delay:200ms}
button:active,.btn:active,a.v4stat:active,a.v4card:active,.v4it:active{transform:scale(.97)}
.v4confetti{position:fixed;left:0;top:0;width:0;height:0;z-index:120;pointer-events:none}
.v4confetti i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:v4conf 1.25s cubic-bezier(.2,.7,.3,1) forwards}
.v4confetti i:nth-child(3n){border-radius:50%;width:8px;height:8px}
@keyframes v4conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.v4toast{position:fixed;left:50%;top:calc(var(--hh) + 14px + env(safe-area-inset-top,0px));z-index:110;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--gb);box-shadow:var(--sh2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font:600 var(--fs-s)/1.3 var(--f-d);color:var(--ink);animation:v4toast 2.6s var(--e-out) forwards;white-space:nowrap}
.v4toast .xp{font:700 13px/1 var(--f-en);color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:6px 10px;border-radius:var(--r-pill);direction:ltr}
@keyframes v4toast{0%{opacity:0;transform:translate(-50%,-12px) scale(.96)}10%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:var(--e-out)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .v4tab.ai .ti::before,.v4chip.flame.on svg{animation:none!important}
  .v4confetti{display:none}
}
/* glass off: solid surfaces when transparency is unwanted or unsupported */
@media (prefers-reduced-transparency:reduce){
  :root{--glass:var(--paper);--glass-2:var(--paper);--read:var(--paper)}
  .v4bg{display:none}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-2:var(--paper)}
  header.top,.v4tabs,.v4side,.v4sh,.askp,.ideasp,.notesp,.srchp,.themep,.focuspop,.vidpop{background:var(--paper)}
}
@media (forced-colors:active){.v4bg{display:none}.v4bar .b,.v4hb .tr i{background:CanvasText}}
@media print{.v4tabs,.v4side,.v4bg,.v4sheet{display:none!important}body{padding:0!important}}
/* icon sizes inside cards */
.v4h h2 svg,.v4h h3 svg{width:20px;height:20px;color:var(--accent);flex:none}
.v4main > svg{width:18px;height:18px;flex:none;color:var(--muted)}
.btn svg{width:18px;height:18px;flex:none}
.v4add{gap:8px}
@media (max-width:1024px){.menusrch kbd{display:none}}
.v4hb .tr{direction:rtl}
.v4hb .tr i{transform-origin:right}
/* term block: compact horizontal cards on phones */
@media (max-width:767px){
  .v4dash .tgrid{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding:2px 18px 6px;scroll-snap-type:x mandatory}
  .v4dash .tgrid::-webkit-scrollbar{display:none}
  .v4dash .tcard{flex:0 0 220px;scroll-snap-align:start}
  .v4dash .termh{flex-wrap:wrap}
}
.chhead h1.en-line{font-size:var(--fs-2xl);color:var(--ink);text-align:right;font-weight:700;line-height:1.25}
.chhead > .lbl{color:var(--muted)}
.v4sh:focus{outline:none!important}
/* sticky subject chips get a soft glass backing so content scrolls under them cleanly */
.ctabs.sub{background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);mask-image:none}
.ctabs.sub a{box-shadow:none}
/* Joo AI panel header: title + compact actions */
.askp .ahd{gap:8px;flex-wrap:nowrap}
.askp .ahid b{font-size:15px;line-height:1.35}
.askp .ahb{gap:4px;flex:none}
.askp .ahb button,.askp .ahb a{white-space:nowrap;font-size:12.5px;padding:4px 9px;min-height:36px}
@media (max-width:420px){.askp .ahid .askjoo{display:none}.askp .ahid b{font-size:14px}}
.askp .ahb .v4icb{width:36px;padding:0;display:inline-grid;place-items:center}
.askp .ahb .v4icb svg{width:17px;height:17px}
@media (max-width:767px){.calcg{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* calmer subject header + bank rows on phones */
.chhead .cdh{display:none}
@media (max-width:540px){#sets .chrow .st,.chlist a.chrow .st:not(.done){display:none}}
/* desktop: dropdowns and docked panels live on the left (the sidebar owns the right) */
@media (min-width:1025px){
  .v4sheet{justify-content:flex-start;padding:calc(var(--hh) + 10px) 0 0 16px}
  .v4sheet .v4sh{margin-left:0}
  .v4sheet{direction:ltr}.v4sheet .v4sh{direction:rtl}
  .askp{right:auto!important;left:24px!important;bottom:24px}
  .vidpop,.notesp{right:auto!important}
}
@media (min-width:640px) and (max-width:1024px){.v4dash > .t3{grid-column:span 3}}
@media (min-width:768px) and (max-width:1024px){.v4dash > .d6{grid-column:span 6}}
/* touch layouts: every tap target at least 44px */
@media (max-width:1024px){
  .ctabs.sub a,.ctabs.cats button,.toc button,.ctabs:not(.sub):not(.cats) a,.v4chip,.pager a,.reveal,.v4h a{min-height:44px}
  .ctabs:not(.sub):not(.cats) a{min-height:42px}
}
@media (pointer:coarse){
  button.stuck{min-height:36px;padding:4px 14px;margin-block:2px}
  .askp .quick button,.idea .ia button,.rcard .ra button,.uacc button.sm,.btn.sm,a.btn.sm{min-height:44px}
}
.chat-open .ct{unicode-bidi:plaintext;text-align:right}
body.gated .brand{display:inline-flex!important}
.btn.wa{display:inline-flex;align-items:center;justify-content:center}
@media (min-width:1025px){.ctabs.sub{margin-inline:0;padding:6px;border-radius:var(--r-pill);align-self:flex-start;max-width:100%;box-sizing:border-box;border:1px solid var(--gb);background:var(--glass-2)}}

/* ---------- 12) Joo AI chips (sources + proposed actions), course library, viewer, admin upload ---------- */
.askp .bot .v4ex{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.v4srcs,.v4acts{display:flex;flex-direction:column;gap:6px}
.v4srcs .lbl,.v4acts .lbl{font:600 11.5px/1.2 var(--f-d);letter-spacing:0;text-transform:none;color:var(--muted)}
.v4src{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--gb);color:var(--ink);text-align:start;font:500 var(--fs-s)/1.35 var(--f-d);width:100%;box-sizing:border-box}
.v4src svg{width:16px;height:16px;flex:none;color:var(--accent)}
.v4src .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4src .pg{flex:none;color:var(--accent);font-weight:600;white-space:nowrap}
.v4src:hover{border-color:var(--accent)}
.v4act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:16px;background:color-mix(in srgb,var(--accent) 9%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.v4act .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.v4act .ic svg{width:16px;height:16px}
.v4act .tx{flex:1 1 140px;min-width:0;font:500 var(--fs-s)/1.45 var(--f-d)}
.v4act .bt{display:flex;gap:6px;flex:none;margin-inline-start:auto}
.v4act .bt button{min-height:36px;padding:4px 14px;border-radius:12px}
.v4act .bt .no{background:var(--glass);border:1px solid var(--gb);color:var(--muted)}
.v4act.done{background:var(--good-soft);border-color:transparent}.v4act.no{opacity:.6}
.v4act .v4st{display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;background:var(--glass)}.v4act .v4st svg{width:13px;height:13px}
.v4act .v4st.ok{color:var(--good)}.v4act .v4st.bad{color:var(--bad);white-space:normal}
@media (pointer:coarse){.v4act .bt button,.v4src{min-height:44px}}

/* library page */
.v4libp .chhead{margin-bottom:2px}
.v4lsrch{display:flex;gap:8px;align-items:stretch}
.v4lsrch input{flex:1;min-width:0;min-height:46px;box-sizing:border-box;padding:8px 14px;border-radius:16px;border:1px solid var(--line);background:var(--read);color:var(--ink);font:inherit;font-size:var(--fs-b)}
.v4lsrch .btn{display:inline-flex;align-items:center;gap:6px;min-height:46px;border-radius:16px;flex:none}
.v4lsrch .btn svg{width:18px;height:18px}
.v4lch{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.v4lch::-webkit-scrollbar{display:none}
.v4lch .v4chip{cursor:pointer;flex:none}
.v4lch .v4chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.v4files{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.v4file{flex-direction:row;align-items:center;gap:12px;padding:14px 16px;text-align:start;cursor:pointer;font:inherit;width:100%;box-sizing:border-box;border:1px solid var(--gb)}
.v4file:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.v4file > .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.v4file > .ic svg{width:20px;height:20px}
.v4file .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.45}
.v4file .tx b{font:600 var(--fs-m)/1.45 var(--f-d)}
.v4file .tx .en{font:500 12.5px/1.4 var(--f-en);color:var(--muted);text-align:right;unicode-bidi:isolate;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4file .tx small{color:var(--muted);font-size:12.5px}
.v4file .go{width:18px;height:18px;color:var(--muted);flex:none}
.v4new{color:var(--accent);font-weight:600}
.v4lres{gap:8px}
.v4hit{display:flex;flex-direction:column;gap:4px;text-align:start;padding:10px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--gb);color:var(--ink);font:inherit;width:100%;box-sizing:border-box}
.v4hit .hd{display:flex;gap:8px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.v4hit .hd b{font:600 var(--fs-s)/1.4 var(--f-d)}
.v4hit .pg{color:var(--accent);font:600 12.5px/1.3 var(--f-d)}
.v4hit .sn{font-size:13px;line-height:1.6;color:var(--muted);unicode-bidi:plaintext;text-align:start;overflow-wrap:anywhere}
.v4hit:hover{border-color:var(--accent)}

/* viewer */
.v4viewer{position:fixed;inset:0;z-index:55;background:rgba(6,8,20,.55);display:flex;align-items:stretch;justify-content:center;animation:v4fade var(--d-med) var(--e-out) both}
body:has(.v4viewer) .v4tabs{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
.vwbox{display:flex;flex-direction:column;width:min(980px,100%);height:100%;box-sizing:border-box;background:var(--glass-2);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border-inline:1px solid var(--gb);padding-top:env(safe-area-inset-top,0px)}
.vwhd{display:flex;align-items:center;gap:10px;padding:10px 12px 6px}
.vwt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.vwt b{font:600 var(--fs-m)/1.4 var(--f-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vwt small{font:500 12px/1.3 var(--f-en);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.vwask{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
.vwask svg{width:16px;height:16px}
.vwbar{display:flex;align-items:center;gap:8px;padding:4px 12px 10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.vwbar > button,.vwz button{width:40px;height:40px;padding:0;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--gb)}
.vwbar > button svg{width:18px;height:18px}
.vwprev svg{transform:scaleX(-1)}
.vwbar button:disabled{opacity:.4}
.vwpg{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-s)/1 var(--f-d)}
.vwpg input{width:64px;min-height:40px;box-sizing:border-box;border-radius:12px;border:1px solid var(--line);background:var(--read);color:var(--ink);text-align:center;font:600 15px/1 var(--f-en);direction:ltr}
.vwch{min-height:40px;border-radius:12px;border:1px solid var(--line);background:var(--read);color:var(--ink);font:500 13px/1 var(--f-en);direction:ltr;max-width:190px}
.vwz{display:inline-flex;gap:4px;margin-inline-start:auto}.vwz button{font:600 18px/1 var(--f-en)}
.vwbody{flex:1;overflow:auto;padding:12px;outline:none;overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.vwpage{display:flex;justify-content:center;min-height:200px}
.vwpage canvas,.vwpage img{background:#fff;border-radius:6px;box-shadow:var(--sh2);max-width:none;height:auto}
.vwpage.loading canvas{opacity:.45}
.vwmsg{text-align:center;margin-top:10px}
.vwmsg:empty{display:none}
@media (max-width:640px){.vwask span{display:none}.vwask{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}.vwz{display:none}.vwch{max-width:150px}}
@media (min-width:1025px){.v4viewer{justify-content:flex-end;padding-inline-end:var(--sbw)}.vwbox{border-radius:0}body:has(.v4viewer) .askp{z-index:60}}

/* admin: library upload */
.v4libadm{gap:12px}
.v4luf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v4luf label{display:flex;flex-direction:column;gap:4px;font:500 var(--fs-s)/1.4 var(--f-d);min-width:0}
.v4luf .full{grid-column:1/-1}
.v4luf input:not([type=file]),.v4luf select{min-height:44px;box-sizing:border-box;width:100%;border-radius:12px;border:1px solid var(--line);background:var(--read);color:var(--ink);padding:6px 10px;font:inherit}
.v4luf input[type=file]{max-width:100%;font-size:13px}
.v4lurow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v4pbar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.v4pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform-origin:right;transform:scaleX(0);transition:transform var(--d-med) var(--e-out)}
.v4lu{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--gb);margin-top:8px}
.v4lu .tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}
.v4lu .tx b{font:600 var(--fs-m)/1.4 var(--f-d)}
.v4lu .tx small{color:var(--muted);font-size:12.5px;line-height:1.7}
.v4lu .bt{display:flex;gap:6px;flex-wrap:wrap}
.v4lu .bt button{min-height:38px}
.v4lu .danger{color:var(--bad)}
@media (max-width:540px){.v4luf{grid-template-columns:1fr}}
.v4fpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 var(--fs-s)/1.4 var(--f-d)}
.v4fpick .btn{display:inline-flex;align-items:center;gap:6px;position:relative;cursor:pointer}
.v4fpick .btn svg{width:16px;height:16px}
.v4fpick .btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.v4vh{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.v4fnames{min-width:0;overflow-wrap:anywhere;unicode-bidi:plaintext}
.v4srow > *{min-width:0}.v4srow .v4h{flex-wrap:wrap;row-gap:2px}
.v4luf .v4fpick label.btn{flex-direction:row;font:600 var(--fs-s)/1 var(--f-d)}

/* ---- 10h) admin: منافسيني (#rivals) ---- */
.v4rvp > .btns{margin:4px 0 14px;align-items:center}
.v4rv,.v4rvform{margin-bottom:16px;max-width:920px}
.v4rvhd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.v4rvhd h2{margin:0;font:700 var(--fs-xl, 22px)/1.25 var(--f-d)}
.v4rvurl{display:inline-block;margin-top:4px;font:500 13px/1.3 var(--f-en);color:var(--accent);word-break:break-all;unicode-bidi:isolate}
.v4rvact{display:flex;gap:6px;flex:none}
.v4rvsum{margin:10px 0 0;line-height:1.75;overflow-wrap:anywhere}
.v4rvsec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.v4rvsec h4{margin:0 0 8px;display:flex;align-items:center;gap:6px;font:700 var(--fs-s)/1.3 var(--f-d)}
.v4rvsec h4 svg{width:16px;height:16px;color:var(--accent)}
.v4rvsec h4 .num{font-weight:500;color:var(--muted);font-size:12px}
.v4rvl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.v4rvl li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--glass);border:1px solid var(--gb);border-inline-start-width:4px;min-width:0}
.v4rvl li .tx{flex:1;min-width:0;line-height:1.6;overflow-wrap:anywhere;font-size:var(--fs-s)}
.v4rvf li.no{border-color:color-mix(in srgb,var(--bad) 45%,var(--gb));background:color-mix(in srgb,var(--bad) 9%,var(--glass));border-inline-start-color:var(--bad)}
.v4rvf li.no .tx{font-weight:600}
.v4rvb{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:none;min-height:30px;padding:0 10px;border-radius:999px;font:600 11.5px/1 var(--f-ar);border:1px solid transparent}
button.v4rvb{cursor:pointer}
.v4rvb.no{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.v4rvb.part{background:color-mix(in srgb,var(--c4) 16%,transparent);color:var(--c4);border-color:color-mix(in srgb,var(--c4) 35%,transparent)}
.v4rvb.yes{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.v4rvcnt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.v4rvcnt .v4rvb{min-height:26px}
.v4rvx{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}
.v4rvx:hover{border-color:var(--gb);color:var(--bad)}
.v4rvx svg{width:15px;height:15px}
.v4rvadd{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.v4rvadd input{flex:1 1 180px;min-width:0;min-height:40px}
.v4rvadd select{flex:0 1 auto;min-height:40px}
.v4rvadd .btn{display:inline-flex;align-items:center;gap:4px}
.v4rvadd .btn svg{width:15px;height:15px}
.v4rvform{display:grid;gap:10px}
.v4rvform label{display:grid;gap:4px;font-size:var(--fs-s)}
.v4rvform input,.v4rvform textarea{width:100%;box-sizing:border-box}
.v4rvact button svg{width:14px;height:14px;vertical-align:-2px}
.v4rvp input,.v4rvp select,.v4rvp textarea{border-radius:12px;border:1px solid var(--gb);background:var(--glass);color:var(--ink);padding:8px 12px;font:inherit;font-size:var(--fs-s)}
.v4rvp input:focus-visible,.v4rvp select:focus-visible,.v4rvp textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.v4rvp textarea{resize:vertical;line-height:1.6}

/* «المسار» (#<sid>-path, v4.js 7a): progress head, next-step card, vertical numbered path */
.v4path .v4phead{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:12px}
.v4phead .tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.v4phead h2{margin:0;font-size:var(--fs-l)}
.v4phead p{margin:0;font-family:var(--f-d);font-weight:600}
.v4phead small,.v4pfoot small{color:var(--muted);font-size:12.5px}
.v4pbar{display:block;height:8px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,var(--line));overflow:hidden}
.v4pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transform-origin:right;transition:transform var(--d-med,.3s) var(--e-out,ease)}
.v4pnext{margin-top:12px;border-color:color-mix(in srgb,var(--accent) 35%,var(--gb));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--glass)),var(--glass))}
.v4dash > .v4pnext{margin-top:0}
.v4pnext .btn{align-self:stretch;min-height:50px;font-size:var(--fs-m)}
.v4pnext .btn svg{width:18px;height:18px}
.v4pnx{display:flex;gap:12px;align-items:flex-start}
.v4pnx .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);flex:none}
.v4pnx .ic svg{width:22px;height:22px}
.v4pnx .tx{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.5}
.v4pnx b{font-family:var(--f-d);font-size:var(--fs-m)}
.v4pnx small{color:var(--muted);font-size:13px}
.v4pfoot{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
@media (min-width:1025px){
  .v4dash > .v4pnext{display:grid;grid-template-columns:1fr minmax(180px,260px) auto;grid-template-areas:"h h h" "nx foot go";align-items:center;column-gap:20px}
  .v4dash > .v4pnext .v4h{grid-area:h}.v4dash > .v4pnext .v4pnx{grid-area:nx}.v4dash > .v4pnext .v4pfoot{grid-area:foot}.v4dash > .v4pnext .btn{grid-area:go;min-width:200px}
}
.v4steps{list-style:none;margin:16px 0 8px;padding:0;position:relative;display:flex;flex-direction:column;gap:12px}
.v4steps::before{content:"";position:absolute;top:18px;bottom:18px;inset-inline-start:17px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,var(--line)))}
.v4step{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;position:relative}
.v4step .no{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);font:700 14px/1 var(--f-en);position:relative;z-index:1;margin-top:10px}
.v4step .no .num{direction:ltr;unicode-bidi:isolate}
.v4step .no svg{width:18px;height:18px}
.v4step.done .no{background:var(--good);border-color:var(--good);color:#fff}
.v4step.cur .no{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 0 5px var(--accent-soft)}
.v4step .body{padding:14px 16px;gap:6px;min-width:0}
.v4step.cur .body{border-color:color-mix(in srgb,var(--accent) 45%,var(--gb));box-shadow:var(--sh2,var(--sh1))}
.v4step.done .body{opacity:.78}
.v4step.off .body{opacity:.6;border-style:dashed}
.v4step .top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.v4step .kd{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.v4step .kd svg{width:14px;height:14px}
.v4step .soon{font-size:11.5px;padding:2px 9px;border-radius:99px;background:var(--glass-2);border:1px solid var(--gb);color:var(--muted)}
.v4step .v4stt{font-family:var(--f-d);font-size:var(--fs-m);line-height:1.5}
.v4step.done .v4stt{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--good) 60%,transparent)}
.v4step p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.v4step .act{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-top:4px}
.v4step .ck{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13.5px;cursor:pointer}
.v4step .ck input{width:20px;height:20px;accent-color:var(--good);margin:0}
.v4step .btn.sm{min-height:44px;padding:6px 16px;font-size:14px}
.v4step .btn svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.v4pbar i{transition:none}}

/* ---- first-login tour (v4.js 10i) ---- */
.v4tour{position:fixed;inset:0;z-index:9000}
.v4tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(8,10,28,.66);transition:all .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.v4tour-hole::after{content:"";position:absolute;inset:-6px;border-radius:20px;border:2px solid var(--accent);animation:v4tring 1.6s ease-out infinite}
.v4tour.free .v4tour-hole{left:50%!important;top:50%!important;width:0!important;height:0!important}
.v4tour.free .v4tour-hole::after,.v4tour.free .v4tour-arr{display:none}
@keyframes v4tring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.v4tour-arr{position:fixed;width:28px;height:28px;color:var(--accent);filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:left .45s,top .45s;pointer-events:none}
.v4tour-arr[data-side=up]{animation:v4tbu 1s ease-in-out infinite}
.v4tour-arr[data-side=down]{transform:rotate(180deg);animation:v4tbd 1s ease-in-out infinite}
.v4tour-arr[data-side=left]{transform:rotate(-90deg);animation:v4tbl 1s ease-in-out infinite}
.v4tour-arr[data-side=right]{transform:rotate(90deg);animation:v4tbr 1s ease-in-out infinite}
@keyframes v4tbu{50%{transform:translateY(6px)}}@keyframes v4tbd{50%{transform:rotate(180deg) translateY(6px)}}
@keyframes v4tbl{50%{transform:rotate(-90deg) translateY(6px)}}@keyframes v4tbr{50%{transform:rotate(90deg) translateY(6px)}}
.v4tour-tip{position:fixed;box-sizing:border-box;max-height:calc(100vh - 16px);overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:18px 18px 14px;box-shadow:0 24px 60px rgba(0,0,0,.35);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1);animation:v4tin .35s ease-out}
@keyframes v4tin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.v4tour-tip h3{font-family:var(--f-d);font-size:18px;margin:2px 0 6px;line-height:1.5}
.v4tour-tip p{margin:0 0 12px;line-height:1.85;font-size:15px}
.v4tour-n{color:var(--muted);font-size:12px}
.v4tour-joo{display:flex;justify-content:center;margin:-4px 0 4px}
.v4tour-dots{display:flex;gap:5px;justify-content:center;margin:0 0 12px}
.v4tour-dots i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:all .3s}
.v4tour-dots i.past{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.v4tour-dots i.on{width:22px;background:var(--accent)}
.v4tour-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v4tour-btns .link{margin-inline-start:auto;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.v4tour-hole,.v4tour-tip,.v4tour-arr{transition:none;animation:none}.v4tour-hole::after{animation:none}}
.btn.wa[hidden]{display:none!important}
.btn.wa.pulse{animation:v4wap 1.2s ease-in-out 4}
@keyframes v4wap{50%{box-shadow:0 0 0 8px rgba(37,211,102,.25)}}
.v4tourbtn{order:4;position:relative;color:var(--ink)}
.v4tourbtn .v4dot{position:absolute;top:7px;inset-inline-end:7px;width:9px;height:9px;border-radius:99px;background:#ef4444;box-shadow:0 0 0 2px var(--paper);animation:v4dotp 1.6s ease-in-out infinite}
@keyframes v4dotp{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.v4tourbtn .v4dot{animation:none}}
.v4dtlist{display:grid;gap:8px;margin-top:12px}.v4dt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper);color:var(--ink);cursor:pointer;font:inherit}.v4dt:hover{border-color:var(--accent)}
.v4dtone{padding:4px 2px 16px}.v4dtone h3{font-size:15px;margin:14px 0 6px}.v4dtone ul{margin:0;padding-inline-start:18px}.v4dtone code{font-size:11px;word-break:break-all;opacity:.8}
.vwtext{white-space:pre-wrap;line-height:1.9;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:start;max-width:820px;margin:0 auto}
.dtpills{display:flex;flex-wrap:wrap;gap:6px}.dtpills i{font-style:normal;font-size:12.5px;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--line)}
.dtsec{border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 12px;background:var(--paper)}.dtsec>summary{display:flex;justify-content:space-between;align-items:center;padding:12px 0;cursor:pointer;list-style:none}.dtsec>summary::-webkit-details-marker{display:none}
.dtn{min-width:26px;text-align:center;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--line)}
.dtcard{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:6px}.dtcard p{margin:0}.dtcard blockquote{margin:0;padding:6px 10px;border-inline-start:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:8px;font-size:13px}
.dtreply{white-space:pre-wrap;margin:6px 0 0}.dtfiles,.dtlist,.dtres{list-style:none;padding:0;margin:4px 0;display:grid;gap:6px}.dtfile{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.dtfile>div,.dtlist li{display:flex;flex-direction:column;gap:2px}.dtlist li{border-bottom:1px dashed var(--line);padding:6px 0}
#ideas-fab{display:none!important}
.v4ideabtn{order:3;position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 8px;border-radius:99px;border:0;cursor:pointer;font:inherit;font-weight:700;color:#3b2300;
  background:linear-gradient(110deg,#fbbf24 0%,#fde68a 40%,#fbbf24 60%,#f59e0b 100%);background-size:220% 100%;animation:v4shine 3.2s linear infinite;box-shadow:0 4px 16px rgba(245,158,11,.45),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden}
.v4ideabtn .ib-i{font-size:18px;animation:v4bulb 2.4s ease-in-out infinite}
.v4ideabtn .ib-p{font-size:11.5px;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.65);color:#7c2d12}
.v4ideabtn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(245,158,11,.6)}
@keyframes v4shine{0%{background-position:100% 0}100%{background-position:-120% 0}}
@keyframes v4bulb{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-8deg)}}
@media (max-width:760px){.v4ideabtn{height:36px;padding:0 8px}.v4ideabtn .ib-t{display:none}}
@media (prefers-reduced-motion:reduce){.v4ideabtn,.v4ideabtn .ib-i{animation:none}}
.ialist{display:grid;gap:10px;margin-top:10px}.iacard{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--paper)}.iacard.done{opacity:.8}
.ia-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.ia-h>div{display:flex;flex-direction:column}.ia-b{margin:8px 0;font-size:16px;line-height:1.8;white-space:pre-wrap}
.ia-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ia-pts{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}.ia-pts input{width:70px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 8px}
.ia-n{background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:10px;padding:6px 10px}
.ia-ed{display:flex;gap:8px;align-items:flex-start;margin-top:8px}.ia-ed textarea{flex:1;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:8px;font:inherit}
input[type=date],input[type=datetime-local]{cursor:pointer;caret-color:transparent;min-height:46px}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{width:28px;height:28px;padding:4px;margin-inline-start:6px;cursor:pointer;border-radius:8px;background-color:color-mix(in srgb,var(--accent) 16%,transparent);opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) input[type=date],:root:not([data-theme=light]) input[type=datetime-local]{color-scheme:dark}}
:root[data-theme=dark] input[type=date],:root[data-theme=dark] input[type=datetime-local]{color-scheme:dark}

/* idea 37: no suggestions button or tour compass before login (they need an account) */
body.gated #v4-ideas,body.gated #v4-tour{display:none!important}
/* idea 52: show-password row on the login / signup form */
#lf label.pwshow{display:flex;flex-direction:row;align-items:center;gap:6px;margin:2px 0;cursor:pointer;font-size:14px;color:var(--ink)}
#lf .pwshow input{width:18px;height:18px;margin:0;accent-color:var(--accent)}

/* phones: the top bar must fit (it used to be 427 px wide at 390, pushing the menu button off-screen and
   widening every page, the Joo AI panel included). Ideas button becomes a compact pill, the palette swatch
   lives in the menu (first row) instead, gaps shrink. */
@media (max-width:520px){
  header.top .hd{gap:6px;min-width:0}
  .v4ideabtn{height:34px;padding:0 6px 0 4px;gap:3px}
  .v4ideabtn .ib-i{font-size:16px}
  .v4ideabtn .ib-p{font-size:10.5px;padding:1px 5px}
  #v4-style{display:none!important}
  .menusrch,.menubtn,.v4stylebtn{width:38px;height:38px;min-height:38px}
}
@media (max-width:380px){.v4ideabtn .ib-p{display:none}}

/* idea 20: Joo AI panel — more room for the conversation, resizable, maximize */
.askp .quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;mask-image:linear-gradient(to left,#000 88%,transparent)}
.askp .quick::-webkit-scrollbar{display:none}
.askp .quick button{flex:none;white-space:nowrap;min-height:32px!important}
.askp .vizgo{min-height:36px!important;font-size:13.5px;padding:6px 12px}
.askp .askmode{margin-bottom:6px}.askp .askmode button{min-width:0;padding:6px 8px;font-size:13px}
.askp form{gap:8px}
.askp .abody{min-height:180px}
#ask-max{font-size:15px;line-height:1}
.askgrip{display:none}
@media (min-width:1025px){
  .askp{width:var(--askw,min(540px,calc(100vw - 48px)));height:var(--askh,min(82vh,780px));max-height:calc(100vh - 48px);display:flex;flex-direction:column}
  .askp.askbig{--askw:min(960px,calc(100vw - var(--sbw,0px) - 48px));--askh:calc(100vh - 48px)}
  /* drag the top-right corner to resize (the panel is anchored bottom-left) */
  .askgrip{display:block;position:absolute;top:-6px;right:-6px;width:22px;height:22px;cursor:nesw-resize;z-index:2;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .askgrip::after{content:"";position:absolute;inset:6px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);border-radius:1px}
}
@media (max-width:1024px){
  .askp.askbig{max-height:calc(100dvh - env(safe-area-inset-top,0px));top:env(safe-area-inset-top,0px);border-radius:0}
}

/* idea 38: on phones an open popup blurs the page behind it and the page does not scroll underneath */
@media (max-width:1024px){
  body:has(#ask:not([hidden])),body:has(#ideasp:not([hidden])),body:has(#notesp:not([hidden])),body:has(#vid-pop:not([hidden])),body:has(#planp:not([hidden])),body:has(.themep:not([hidden])){overflow:hidden}
  body:has(#ask:not([hidden]))::after,body:has(#ideasp:not([hidden]))::after,body:has(#notesp:not([hidden]))::after,body:has(#vid-pop:not([hidden]))::after,body:has(#planp:not([hidden]))::after,body:has(.themep:not([hidden]))::after{content:"";position:fixed;inset:0;z-index:45;background:rgba(15,18,40,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .askp{z-index:88}
}

/* idea 24: بومودورو popup */
.focuspop .pomo-today{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.focuspop .pdots{display:inline-flex;gap:4px}.focuspop .pd{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block}.focuspop .pd.on{background:#ef4444}
.focuspop .pomo-ph{font-weight:700;margin:4px 0 10px}
.focuspop .pomo-set{display:flex;flex-wrap:wrap;gap:8px 12px;margin:10px 0;font-size:13.5px;color:var(--muted)}
.focuspop .pomo-set label{display:inline-flex;align-items:center;gap:4px}
.focuspop .pomo-set input[type=number]{width:56px;font:inherit;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.focuspop .pomo-auto{flex-basis:100%}
.focushd.on.brk{background:#0ea5e9!important;color:#fff}

/* idea 47: floating ask-about-this-chapter pill */
.v4chask{position:fixed;z-index:40;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14px;color:var(--on-pri,#fff);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 28px -10px var(--accent)}
.v4chask[hidden]{display:none!important}
.v4chask:hover{transform:translateY(-1px)}
@media (max-width:1024px){.v4chask{left:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));min-height:40px;font-size:13px;padding:0 12px}}

/* idea 42: «شوف مثال» under a definition / formula without an example */
.exbtn{display:inline-flex;align-items:center;gap:4px;margin:2px 0 10px;padding:4px 12px;min-height:32px;border-radius:999px;border:1.5px dashed var(--accent);background:var(--accent-soft);color:var(--accent);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.exbtn:hover{border-style:solid}

/* batch B: add-subject file tray, stop-and-ask card, failed parts list */
.wztray-btns{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.wztray-btns label.btn{cursor:pointer}
.wztray{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.wzf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:var(--glass);border:1px solid var(--gb)}
.wzf .wzf-n{flex:1 1 180px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.wzf select{font:inherit;font-size:13px;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.wzf button.sm{min-width:34px;min-height:34px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.wzstop{margin-top:12px}.wzstop .btns{margin-top:8px}
.usfails{margin:6px 0;padding-inline-start:18px;font-size:13.5px;line-height:1.7}
/* the suggestions pill never wraps; on mid-size screens it shows only 💡 +10 */
.v4ideabtn,.v4ideabtn span{white-space:nowrap}
@media (max-width:1240px){.v4ideabtn .ib-t{display:none}}

/* idea 48: «ملفاتي» as folders inside folders */
.v4tree{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.v4fold{border-radius:16px;background:var(--glass);border:1px solid var(--gb);padding:4px 10px}
.v4fold.sub{background:transparent;border-style:dashed;margin:6px 0}
.v4fold>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer;font-weight:700;list-style:none}
.v4fold>summary::-webkit-details-marker{display:none}
.v4fold>summary::after{content:"‹";font-size:20px;line-height:1;transition:transform .2s;color:var(--muted)}
.v4fold[open]>summary::after{transform:rotate(-90deg)}
.v4fold>summary small{margin-inline-start:auto;color:var(--muted);font-weight:500}
.v4fold .v4files{padding-bottom:8px}

/* ideas 14/18/19/21: lesson parts as pages */
.ptbar{display:flex;justify-content:flex-start;margin:4px 0 8px}
.toc.ptoc button.on{background:var(--pri);color:var(--on-pri);border-color:transparent}
.ppager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:18px 0 6px}
.ppager a{display:flex;align-items:center;gap:6px;min-height:48px;padding:8px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--gb);color:var(--ink);text-decoration:none;font-weight:700;overflow:hidden}
.ppager a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppager .pp-next{justify-content:flex-end;background:var(--pri);color:var(--on-pri);border-color:transparent}
.ppager .pp-prev{justify-content:flex-start}
.ppager .pp-n{font-size:13px;color:var(--muted);white-space:nowrap}
.ppager .pp-end{text-align:end;font-size:13.5px;color:var(--muted)}
@media (max-width:520px){.ppager{grid-template-columns:1fr 1fr}.ppager .pp-n{grid-column:1/-1;grid-row:1;text-align:center}}
/* narrow phones: the suggestions pill is just 💡 (the sheet explains the +10 reward) */
@media (max-width:440px){.v4ideabtn .ib-p{display:none}.v4ideabtn{padding:0 7px}}

/* batch D: practice builder, exam pattern, written-answer grading */
.prf select{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-width:220px}
.prchs,.prsrc{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.prchs .chip,.prsrc .chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border-radius:999px;border:1px solid var(--gb);background:var(--glass);cursor:pointer;font-size:14px}
.prchs .chip:has(input:checked),.prsrc .chip:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.prf .fld{margin-top:10px;max-width:220px}
.pattern p{margin:6px 0}.pattern .chip{display:inline-flex;gap:4px;padding:2px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--gb);font-size:13px;margin:2px}
.patbar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0}.patbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.prbar{position:sticky;top:calc(var(--hh,64px) + 6px);z-index:5}
.wrans{margin-top:8px}.wrans textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.wr-res{margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}.wr-res.ok{border-color:#16a34a;background:rgba(22,163,74,.08)}.wr-res.mid{border-color:#f59e0b;background:rgba(245,158,11,.08)}.wr-res.bad{border-color:#dc2626;background:rgba(220,38,38,.07)}
#selbar{flex-wrap:wrap;max-width:calc(100vw - 16px)}

/* ideas 33/44 + 26: tools row on each lesson part (drawing + lecture minute) */
.ptools{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px;align-items:center}
.ptools .exbtn{margin:0;text-decoration:none}
.ptools .pt-vid{border-style:solid;background:var(--glass);color:var(--ink);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ptools .pt-out{flex-basis:100%}
.aidraw{margin:6px 0;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.aidraw img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.aidraw figcaption{font-size:13.5px;color:#334;margin-top:6px}
.ptools .pt-vid{direction:ltr;text-align:left;display:inline-block;line-height:24px}

/* login: live password rules (the Supabase policy) and messages above the button */
.pwrules{list-style:none;margin:-4px 0 8px;padding:8px 10px;border-radius:12px;background:var(--glass);border:1px solid var(--gb);font-size:13.5px;line-height:1.8}
.pwrules li{color:var(--muted)}.pwrules li.ok{color:#16a34a;font-weight:700}.pwrules .pwhint{color:var(--muted);font-weight:400}
#lf .lmsg,#np .lmsg{min-height:1.2em;margin:6px 0;color:var(--ink);font-weight:600}
#lf .lmsg:empty,#np .lmsg:empty{display:none}

/* login: one screen on laptops — hero + features on one side, a wider login box on the other; Google first */
#gwrap .or{margin:12px 0 2px}
#gwrap .gbtn{min-height:50px;font-weight:800;font-size:16px}
.lagree{font-size:13px!important;margin:2px 0 6px!important}
.otpin{font-size:28px!important;letter-spacing:10px;text-align:center;padding:12px!important}
.otpx{justify-content:center;gap:16px}
@media (min-width:1025px){
  .lwrap{grid-template-columns:minmax(0,1.2fr) minmax(400px,470px);grid-template-areas:"hero box" "feat box";align-items:start;min-height:calc(100vh - 40px);align-content:center;gap:16px 28px}
  .lwrap>.land{grid-area:hero}.lwrap>.lbox{grid-area:box;width:100%;max-width:470px;align-self:center}.lwrap>.lfeat{grid-area:feat;grid-column:auto;grid-template-columns:repeat(3,1fr);gap:10px}
  .land .lhero h1{font-size:26px}.lfeat>div{padding:10px}.lfeat p{font-size:12.5px;line-height:1.5}
  .lbox{padding:22px 26px;gap:10px}
}
@media (min-width:1025px){body.gated #view.col{max-width:1240px}.lwrap{width:100%;max-width:1240px;box-sizing:border-box}.lwrap>.land{min-width:0}.land .lhero{align-items:center}}
.otpin{box-sizing:border-box;width:100%;max-width:100%;letter-spacing:6px!important}
#otpv{display:flex;flex-direction:column;gap:10px;min-width:0}

/* chapter = lecture + its sections */
.chrow .chparts{margin-top:2px;color:var(--muted)}
.chrow .chparts a{color:var(--accent);font-weight:700;text-decoration:none}
.chsecgrp{margin:14px 0}.chsecgrp h2{font-size:17px;margin-bottom:4px}
.secrow .no{font-size:18px}

/* idea 28: leaderboard */
.lbrd{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lbrd li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--gb)}
.lbrd li.me{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.lbrd .lb-r{min-width:30px;text-align:center;font-weight:800;font-size:17px}
.lbrd .lb-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.lbrd .lb-dot.on{background:#16a34a;box-shadow:0 0 0 3px #16a34a33}
.lbrd .lb-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrd .lb-p{color:var(--muted);white-space:nowrap;font-size:14px}
.lb-you{margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent)}

/* idea 8: header points chip (display only) */
.v4ptsbtn{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 10px;border-radius:999px;border:1px solid var(--gb);background:var(--glass);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;flex:none}
.v4ptsbtn:hover{border-color:var(--accent)}
@media (max-width:560px){.v4ptsbtn{display:none}}

/* idea 4: on-screen scientific calculator (our own design) */
.calcwrap{max-width:460px;margin-inline:auto}
.calcdev{background:linear-gradient(160deg,#2a2f45,#1a1e2e);border-radius:22px;padding:16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.06)}
.calc-brand{display:flex;align-items:center;gap:8px;color:#aeb4d0;margin-bottom:10px}.calc-brand b{color:#fff;font-family:var(--f-d)}.calc-brand .small{opacity:.8}
.calc-ang{margin-inline-start:auto;font-size:12px;font-weight:800;color:#0f1220;background:#7dd3fc;border-radius:6px;padding:2px 7px}
.calc-scr{background:#cfe8d8;border-radius:12px;padding:10px 12px;min-height:72px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:12px;font-variant-numeric:tabular-nums}
.calc-expr{color:#2b3a30;font-size:18px;min-height:22px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.calc-expr::-webkit-scrollbar{display:none}
.calc-res{color:#0f1a12;font-size:30px;font-weight:800;text-align:right;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.calc-res.err{color:#b91c1c;font-size:18px}
.calc-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;direction:ltr}
.calck{position:relative;min-height:46px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-size:16px;font-weight:700;color:#eef1fb;background:#3a4060;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:transform .05s,background .1s;overflow:hidden}
.calck:active{transform:scale(.94)}
.calck .k-sh{font-size:9px;color:#f0a; color:#ffb86b;opacity:0;height:0;margin-bottom:0;transition:.12s}
.calcdev.shifted .calck[data-sh] .k-sh{opacity:1;height:11px;margin-bottom:2px}
.calck.k-num{background:#4a5178}.calck.k-op{background:#5b4a8a;color:#fff}.calck.k-eq{background:linear-gradient(135deg,#f59e0b,#ef7d00);color:#fff}
.calck.k-fn{background:#343a56;font-size:14px}.calck.k-mod{background:#6b46c1;font-size:12px}.calck.k-mode{background:#0ea5e9;font-size:12px}.calck.k-ac{background:#dc2626;color:#fff}
.calcdev.shifted .calck.k-mod[data-k=shift]{background:#8b5cf6;box-shadow:0 0 0 2px #c4b5fd}
.calck.demo{box-shadow:0 0 0 3px #fde047;background:#eab308!important;color:#1a1a1a}
.k-sp{min-height:46px}
.calc-hint{color:#aeb4d0;margin:12px 2px 0;line-height:1.6}
.calc-model{margin-top:18px}
@media (max-width:420px){.calck{min-height:42px;font-size:15px}.calc-pad{gap:6px}}

/* idea 39: interactive guide */
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.gchip{border:1px solid var(--gb);background:var(--glass);color:var(--ink);border-radius:999px;padding:8px 14px;min-height:40px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.gchip:hover{border-color:var(--accent);color:var(--accent)}
.gacc{display:flex;flex-direction:column;gap:10px}
.gcard{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.gcard>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:16px 18px;font-family:var(--f-d);font-weight:700;font-size:17px;list-style:none}
.gcard>summary::-webkit-details-marker{display:none}
.gcard .gc-x{font-size:24px;color:var(--muted);transition:transform .2s;line-height:1}
.gcard[open]>summary{border-bottom:1px solid var(--line)}
.gcard[open]>summary .gc-x{transform:rotate(45deg)}
.gcard .gc-body{padding:14px 18px 18px}
.gcard .gc-body>*:first-child{margin-top:0}
.gc-log{margin-top:10px}

/* idea 53: 2FA security page */
.secwrap{max-width:460px;margin-inline:auto}
.secqr{display:inline-block;background:#fff;padding:10px;border-radius:12px;margin:8px 0;border:1px solid var(--line)}
.secqr img,.secqr svg{display:block;width:170px;height:170px}
.secwrap code{background:var(--glass);padding:3px 8px;border-radius:8px;font-weight:700;letter-spacing:1px}
/* profile sheet (name / college / year + level & XP explainer) */
.sb-foot.clk{cursor:pointer;border-radius:12px;transition:background .15s}
.sb-foot.clk:hover,.sb-foot.clk:focus-visible{background:var(--glass)}
.v4prof{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.v4prof .pf{display:flex;flex-direction:column;gap:4px}
.v4prof .pf>span{font-size:var(--fs-s);color:var(--muted);font-weight:700}
.v4prof .pf input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.v4prof .btns{display:flex;align-items:center;gap:10px}
.v4btn{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:9px 18px;font:inherit;font-weight:700;cursor:pointer}
.v4prof .v4xp{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:4px}
.v4prof .v4xp b{color:var(--accent)}.v4prof .v4xp p{margin:6px 0 0}