:root{
  --bg:#FFF8F4; --bg2:#F7F1FF; --card:#FFFFFF; --ink:#2B2550; --text:#2B2550; --muted:#7A7399; --line:#EFE7F7;
  --vio:#8B6CFF; --vio-d:#6A4AE8; --vio-l:#F0EBFF; --pink:#FF7EAD; --pink-l:#FFEAF2; --peach:#FFAA6B; --peach-l:#FFF1E4;
  --mint:#27C6A8; --mint-d:#0F9A80; --mint-l:#E2F8F2; --sky:#4AA8FF; --sky-l:#E6F3FF; --sun:#FFC93C; --sun-l:#FFF6D9; --coral:#FF6B6B; --coral-l:#FFECEC;
  --grad:linear-gradient(135deg,#FF8FB8 0%,#B49CFF 55%,#8B6CFF 100%); --grad2:linear-gradient(135deg,#FFC2A1,#FF8FB8);
  --shadow:0 2px 4px rgba(139,108,255,.06),0 10px 28px rgba(139,108,255,.10); --r:22px;
  --font:"IBM Plex Sans Arabic",system-ui,sans-serif; --head:"Readex Pro","IBM Plex Sans Arabic",sans-serif; color-scheme:light;
}
:root[data-theme="dark"]{--bg:#17132A; --bg2:#1E1938; --card:#241E42; --ink:#F4F0FF; --text:#F4F0FF; --muted:#B3A9D6; --line:#352C5C;
  --vio-l:#2E2557; --pink-l:#3A2240; --peach-l:#3A2A20; --mint-l:#143A35; --sky-l:#16304A; --sun-l:#3A3218; --coral-l:#3E2028; --shadow:0 2px 10px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%}
body{min-height:100dvh;background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 110% -10%,#FFE3EE 0,transparent 60%),radial-gradient(800px 500px at -10% 10%,#ECE5FF 0,transparent 55%)}
:root[data-theme="dark"] body::before{display:none}
:root[data-theme="dark"] body{background:var(--bg)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.35;margin:0 0 .4em;color:var(--ink)}
h1{font-size:1.65rem} h2{font-size:1.3rem} h3{font-size:1.08rem}
a{color:var(--vio-d)}
button,input,select,textarea{font:inherit;color:inherit}
.splash{min-height:100dvh;display:grid;place-content:center;gap:10px;text-align:center;font-family:var(--head);font-size:1.5rem;color:var(--vio-d)}
.splash img{width:90px;height:90px;border-radius:24px;margin:auto;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}

/* layout */
.shell{display:flex;min-height:100dvh}
.side{display:none}
.main{flex:1;min-width:0;padding:16px 16px calc(96px + env(safe-area-inset-bottom));max-width:1120px;margin:0 auto;width:100%}
.top{display:flex;align-items:center;gap:8px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .top{background:rgba(36,30,66,.85)}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:1.25rem;font-weight:700}
.logo img{width:34px;height:34px;border-radius:11px;box-shadow:0 4px 12px rgba(255,126,173,.35)}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .sp{flex:1}
.top .who{font-size:.85rem;color:var(--muted);max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{background:none;border:0;color:inherit;cursor:pointer;padding:8px;border-radius:12px;font-size:1.1rem;min-width:40px;min-height:40px;transition:transform .15s,background .15s}
.iconbtn:hover{background:var(--vio-l)} .iconbtn:active{transform:scale(.9)}
.bnav{position:fixed;bottom:10px;left:10px;right:10px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 10px 30px rgba(139,108,255,.22);display:flex;z-index:30;padding:6px;margin-bottom:env(safe-area-inset-bottom)}
:root[data-theme="dark"] .bnav{background:rgba(36,30,66,.95)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;font-size:.7rem;color:var(--muted);text-decoration:none;position:relative;border-radius:18px;transition:.2s}
.bnav a .ic{font-size:1.35rem;line-height:1.2;transition:transform .2s}
.bnav a.on{color:var(--vio-d);font-weight:700;background:var(--vio-l)}
.bnav a.on .ic{transform:translateY(-2px) scale(1.12)}
.dot{position:absolute;top:2px;margin-inline-start:24px;background:var(--pink);color:#fff;border-radius:99px;font-size:.62rem;min-width:17px;height:17px;line-height:17px;padding:0 4px;text-align:center;box-shadow:0 2px 6px rgba(255,126,173,.5)}
@media (min-width:900px){
  .top{display:none}
  .side{display:flex;flex-direction:column;width:250px;background:rgba(255,255,255,.75);backdrop-filter:blur(14px);border-inline-start:1px solid var(--line);position:sticky;top:0;height:100dvh;padding:22px 14px;gap:4px;flex-shrink:0}
  :root[data-theme="dark"] .side{background:rgba(36,30,66,.8)}
  .side .logo{font-size:1.45rem;margin:0 8px 18px} .side .logo img{width:42px;height:42px}
  .side a{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:16px;position:relative;font-weight:600;transition:.15s}
  .side a .ic{width:34px;height:34px;display:grid;place-content:center;border-radius:12px;background:var(--bg2);font-size:1.05rem}
  .side a:hover{background:var(--vio-l);color:var(--ink)}
  .side a.on{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(139,108,255,.3)} .side a.on .ic{background:rgba(255,255,255,.25)}
  .side .dot{position:static;margin-inline-start:auto}
  .side .foot{margin-top:auto;font-size:.85rem;color:var(--muted);padding:12px 8px;border-top:1px solid var(--line)}
  .side .foot b{color:var(--ink)}
  .side .foot button{background:var(--bg2);border:0;border-radius:12px;padding:6px 10px;cursor:pointer;margin-top:6px}
  .bnav{display:none}
  .main{padding:28px 34px 48px}
}

/* blocks */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);position:relative}
.card+.card,.stack>*+*{margin-top:12px}
a.card{transition:transform .18s,box-shadow .18s} a.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(139,108,255,.18)} a.card:active{transform:scale(.98)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid2{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row .sp{flex:1}
.muted{color:var(--muted)} .small{font-size:.86rem} .tiny{font-size:.76rem}
.hello{display:flex;align-items:flex-end;gap:12px;margin:2px 0 16px}
.hello h1{margin:0}
.crumb{font-size:.86rem;color:var(--muted);margin-bottom:6px}
.crumb a{color:var(--muted);text-decoration:none;background:var(--card);border:1px solid var(--line);padding:2px 10px;border-radius:99px}
.hero{background:var(--grad);color:#fff;border-radius:26px;padding:20px;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(139,108,255,.28)}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.16);left:-50px;top:-70px}
.hero::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,201,60,.45);left:40px;bottom:-40px}
.hero>*{position:relative;z-index:1}
.hero.peach{background:linear-gradient(135deg,#FFB36B,#FF7EAD)} .hero.mint{background:linear-gradient(135deg,#3FD6B6,#4AA8FF)} .hero.sky{background:linear-gradient(135deg,#6CC2FF,#8B6CFF)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--head);font-size:1.7rem;line-height:1.1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats .card{padding:12px;text-align:center}
.stats .card:nth-child(1){background:var(--pink-l)} .stats .card:nth-child(2){background:var(--vio-l)} .stats .card:nth-child(3){background:var(--mint-l)}
.stats .card:nth-child(1) b{color:#E0457F} .stats .card:nth-child(2) b{color:var(--vio-d)} .stats .card:nth-child(3) b{color:var(--mint-d)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--bg2);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--mint-l);color:var(--mint-d)} .chip.warn{background:var(--sun-l);color:#9A6B00} .chip.bad{background:var(--coral-l);color:#D23F3F} .chip.vio{background:var(--vio-l);color:var(--vio-d)} .chip.pink{background:var(--pink-l);color:#D63E7A}
:root[data-theme="dark"] .chip.warn{color:var(--sun)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px dashed var(--line);text-decoration:none;color:inherit;border-radius:14px}
.li:last-child{border-bottom:0}
.li .t{flex:1;min-width:0}
.li .t b{display:block;font-weight:600}
.li .t .en{text-align:right}
@media (hover:hover){a.li:hover,.li.click:hover{background:var(--vio-l);cursor:pointer}}
.unit{margin-top:20px}
.unit>h3{display:flex;align-items:center;gap:8px}
.badge{width:44px;height:44px;border-radius:15px;display:grid;place-content:center;font-size:1.3rem;background:var(--vio-l);flex-shrink:0}
.c0{--c:#FF7EAD;--cl:var(--pink-l)} .c1{--c:#8B6CFF;--cl:var(--vio-l)} .c2{--c:#27C6A8;--cl:var(--mint-l)} .c3{--c:#FFAA6B;--cl:var(--peach-l)} .c4{--c:#4AA8FF;--cl:var(--sky-l)} .c5{--c:#FFC93C;--cl:var(--sun-l)}
[class*=" c"].card.tint,.tint{border-top:5px solid var(--c)}
.tint .badge{background:var(--cl)}
.empty{text-align:center;padding:30px 12px;color:var(--muted)}
.empty .big{font-size:2.8rem;animation:bob 2.4s ease-in-out infinite}
.code{font-family:var(--head);letter-spacing:.14em;font-size:1.6rem;font-weight:700;direction:ltr;display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bar{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .6s}
.bar.mint i{background:linear-gradient(90deg,#27C6A8,#4AA8FF)} .bar.sun i{background:linear-gradient(90deg,#FFC93C,#FFAA6B)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:flex;gap:10px;padding:8px 0;align-items:flex-start}
.steps li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--vio-l);color:var(--vio-d);display:grid;place-content:center;font-weight:700;flex-shrink:0;font-family:var(--head)}
.steps li.done::before{content:"✓";background:var(--mint);color:#fff}

/* forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:16px;padding:10px 18px;font-weight:700;cursor:pointer;background:var(--grad);color:#fff;min-height:46px;text-decoration:none;box-shadow:0 6px 16px rgba(139,108,255,.28);transition:transform .12s,filter .15s}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:scale(.96)} .btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn.dark{background:var(--ink);box-shadow:none} .btn.ghost{background:var(--card);border:1.5px solid var(--line);color:var(--text);box-shadow:none} .btn.sun{background:linear-gradient(135deg,#FFD45C,#FFAA6B);color:#4A2E00}
.btn.mint{background:linear-gradient(135deg,#3FD6B6,#27C6A8)} .btn.pink{background:var(--grad2)}
.btn.bad{background:var(--coral-l);color:#D23F3F;box-shadow:none} .btn.sm{padding:6px 12px;min-height:38px;font-size:.88rem;border-radius:13px} .btn.block{width:100%}
label.f{display:block;margin:12px 0 4px;font-weight:700;font-size:.92rem}
.in,select.in,textarea.in{width:100%;border:2px solid var(--line);border-radius:15px;padding:10px 12px;background:var(--card);min-height:46px;outline:none;transition:border-color .15s,box-shadow .15s}
.in:focus{border-color:var(--vio);box-shadow:0 0 0 4px var(--vio-l)}
textarea.in{min-height:90px;resize:vertical;line-height:1.6}
.in.code{font-size:1.25rem;text-align:center;letter-spacing:.15em;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.seg{display:flex;background:var(--bg2);border-radius:16px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:13px;padding:9px;cursor:pointer;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--vio-d);box-shadow:var(--shadow)}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:14px;padding:6px 12px;cursor:pointer;background:var(--card);transition:.15s}
.checks label:has(input:checked){border-color:var(--vio);background:var(--vio-l);color:var(--vio-d);font-weight:600}
.checks input{accent-color:var(--vio)}
.err{color:#D23F3F;font-size:.9rem;margin-top:8px;min-height:1.2em}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:10px 0 14px;scrollbar-width:none}
.tabs button{border:2px solid var(--line);background:var(--card);border-radius:99px;padding:6px 14px;white-space:nowrap;cursor:pointer;font-weight:700;color:var(--muted)}
.tabs button.on{background:var(--grad);border-color:transparent;color:#fff}

/* login */
.login{min-height:100dvh;display:grid;grid-template-columns:1fr}
.login .art{background:var(--grad);color:#fff;padding:34px 24px 40px;position:relative;overflow:hidden;border-radius:0 0 34px 34px}
.login .art h1{color:#fff;font-size:2.2rem;margin:14px 0 6px}
.login .art p{color:#FFF3FA;margin:0;max-width:440px}
.login .art img{width:70px;height:70px;border-radius:20px;box-shadow:0 10px 24px rgba(0,0,0,.15);animation:bob 3s ease-in-out infinite}
.login .art .pts{display:none}
.login .art .floaty{position:absolute;font-size:2rem;opacity:.85;animation:bob 3.4s ease-in-out infinite}
.login .form{padding:22px 16px 40px;max-width:460px;width:100%;margin:0 auto}
@media (min-width:900px){.login{grid-template-columns:1.1fr 1fr}.login .art{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;border-radius:0 0 0 48px}
  .login .art .pts{display:block;margin-top:26px;padding:0;list-style:none}.login .art .pts li{padding:8px 14px;margin:6px 0;background:rgba(255,255,255,.16);border-radius:14px;max-width:460px}
  .login .form{align-self:center;padding:40px}}
.login .art::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,201,60,.35);left:-90px;bottom:-120px}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(43,37,80,.45);backdrop-filter:blur(3px);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.modal .box{background:var(--card);width:100%;max-width:620px;max-height:92dvh;overflow:auto;border-radius:28px 28px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes up{from{transform:translateY(40px);opacity:0}} @keyframes fade{from{opacity:0}}
@media (min-width:700px){.modal{align-items:center}.modal .box{border-radius:28px;padding:22px}}
.modal .box h2{display:flex;align-items:center;gap:8px}
.modal .box h2 .x{margin-inline-start:auto}
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;padding:11px 20px;border-radius:16px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center;font-weight:600}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.pop{position:fixed;z-index:70;font-family:var(--head);font-weight:700;font-size:1.4rem;color:var(--vio-d);pointer-events:none;animation:popup 1.1s ease-out forwards;text-shadow:0 2px 0 #fff}
@keyframes popup{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.15)}100%{transform:translateY(-70px) scale(1);opacity:0}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:80}

/* lesson + practice */
.lcard{border-inline-start:6px solid var(--c,var(--vio))}
.lcard .ex{background:var(--sun-l);border-radius:14px;padding:8px 12px;margin-top:8px;font-size:.95rem}
.en{direction:ltr;text-align:left;unicode-bidi:plaintext}
.passage{white-space:pre-wrap;line-height:1.95;background:var(--bg2);border-radius:16px;padding:12px 14px}
.q{font-size:1.15rem;font-weight:700;margin-bottom:12px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:12px 16px;text-align:start;cursor:pointer;min-height:52px;font-size:1rem;font-weight:600;transition:transform .12s,border-color .15s,background .15s;box-shadow:0 3px 0 var(--line)}
@media (hover:hover){.opt:not(:disabled):hover{border-color:var(--vio);transform:translateY(-1px)}}
.opt:active{transform:translateY(2px);box-shadow:none}
.opt.right{border-color:var(--mint);background:var(--mint-l);box-shadow:0 3px 0 var(--mint);animation:pulse .4s} .opt.wrong{border-color:var(--coral);background:var(--coral-l);box-shadow:0 3px 0 var(--coral);animation:shake .35s}
@keyframes pulse{50%{transform:scale(1.03)}} @keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{border-radius:16px;padding:12px 14px;margin-top:12px}
.fb.ok{background:var(--mint-l)} .fb.no{background:var(--coral-l)}
.meter{display:flex;gap:5px;direction:ltr}
.meter i{flex:1;height:10px;border-radius:5px;background:var(--bg2)}
.meter i.y{background:var(--mint)} .meter i.n{background:var(--coral)}
.celebrate{text-align:center;padding:22px}
.celebrate .big{font-size:3.4rem;animation:bob 1.6s ease-in-out infinite}
.tip{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(135deg,var(--sun-l),var(--peach-l));border-radius:18px;padding:12px 14px;font-size:.92rem;margin-top:12px}
.tip .i{font-size:1.3rem}

/* gamification */
.xpcard{display:flex;align-items:center;gap:14px}
.ava{width:62px;height:62px;border-radius:22px;background:rgba(255,255,255,.3);display:grid;place-content:center;font-size:2.1rem;cursor:pointer;flex-shrink:0;border:3px solid rgba(255,255,255,.6)}
.xpcard .lv{font-family:var(--head);font-size:1.1rem}
.xpbar{height:12px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden;margin-top:6px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#FFE27A,#FFC93C);border-radius:99px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pills span{background:rgba(255,255,255,.22);border-radius:99px;padding:3px 12px;font-weight:700;font-size:.88rem}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.bdg{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 6px;font-size:.78rem;font-weight:600}
.bdg .e{font-size:1.8rem;display:block}
.bdg.off{opacity:.35;filter:grayscale(1)}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:10px 0 4px}
.podium .p{text-align:center;flex:1;max-width:130px}
.podium .p .ava{margin:0 auto 6px;background:var(--vio-l);border-color:var(--card)}
.podium .p .st{border-radius:18px 18px 8px 8px;color:#fff;font-family:var(--head);font-weight:700;padding:8px 4px}
.podium .p1 .st{background:linear-gradient(180deg,#FFD45C,#FFAA6B);height:110px} .podium .p2 .st{background:linear-gradient(180deg,#C8B8FF,#8B6CFF);height:84px} .podium .p3 .st{background:linear-gradient(180deg,#FFB3CF,#FF7EAD);height:66px}
.rank{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px}
.rank.me{background:var(--vio-l);border:2px solid var(--vio)}
.rank .n{width:30px;text-align:center;font-family:var(--head);font-weight:700;color:var(--muted)}
.rank .a{font-size:1.6rem}

/* class session */
.cls-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:900px){.cls-grid{grid-template-columns:1.3fr 1fr}}
.picker{min-height:190px;display:grid;place-content:center;text-align:center;border-radius:26px;background:var(--grad);color:#fff;padding:20px;position:relative;overflow:hidden}
.picker .nm{font-family:var(--head);font-size:clamp(1.6rem,6vw,2.8rem);font-weight:700;line-height:1.25}
.picker.rolling .nm{animation:roll .09s linear infinite}
@keyframes roll{50%{opacity:.4;transform:translateY(-4px)}}
.timer{display:grid;place-content:center;text-align:center}
.timer .ring{width:180px;height:180px;border-radius:50%;display:grid;place-content:center;font-family:var(--head);font-size:2.6rem;font-weight:700;margin:auto}
.groups{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.groups .g{border-radius:18px;padding:12px;background:var(--cl);border-top:5px solid var(--c)}
.bigq{font-size:clamp(1.3rem,4vw,2rem);font-weight:700;font-family:var(--head);line-height:1.5}
.star-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px}
.star-row:nth-child(odd){background:var(--bg2)}
.full{position:fixed!important;inset:0;z-index:90;border-radius:0!important;overflow:auto}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:center}
.tbl th{font-weight:700;background:var(--vio-l);color:var(--vio-d);position:sticky;top:0}
.tbl th:first-child{border-radius:0 14px 0 0} .tbl th:last-child{border-radius:14px 0 0 0}
.tbl td:first-child,.tbl th:first-child{text-align:start;white-space:nowrap}
.tbl input{width:64px;text-align:center;border:2px solid var(--line);border-radius:10px;padding:4px;background:var(--card)}
.tbl input.auto{border-style:dashed;color:var(--mint-d)}
.tbl input.man{border-color:var(--sun)}
.scroll{overflow:auto;max-width:100%}
.mode{font-size:.7rem;font-weight:600;display:block;opacity:.8}
.qedit{border:2px solid var(--line);border-radius:18px;padding:12px;margin-top:10px;background:var(--card)}
.qedit .row input[type=radio]{width:18px;height:18px;accent-color:var(--mint)}
.meterbox{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.meterbox .m{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}

/* messages */
.msg{border-inline-start:6px solid var(--mint)}
.msg.unread{background:linear-gradient(135deg,var(--vio-l),var(--card))}
.msg.k-exam{border-color:var(--coral)} .msg.k-hw{border-color:var(--sun)} .msg.k-praise{border-color:var(--vio)} .msg.k-rem{border-color:var(--sky)}
.banner{display:flex;gap:10px;align-items:center;background:var(--sun-l);border-radius:20px;padding:12px 14px;margin-bottom:12px;text-decoration:none;color:inherit;border:2px solid rgba(255,201,60,.35);transition:transform .15s}
.banner:active{transform:scale(.98)}

/* print */
#print{display:none}
@media print{
  :root,:root[data-theme="dark"]{--bg:#fff;--card:#fff;--ink:#000;--text:#000;--muted:#333;--line:#999;color-scheme:light}
  html,body{background:#fff!important;color:#000!important;height:auto!important;min-height:0!important;overflow:visible!important}
  body::before{display:none!important}
  #app,#toast,.modal,#confetti,.lj-overlay,.bnav,.top{display:none!important}
  #print{display:block;color:#000;background:#fff;font-family:var(--font)}
  #print *{color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pt-s{break-inside:auto!important}
  .pt-s li,.pt-s h4{break-inside:avoid}
  .pg{page-break-after:always;padding:0}
  .pg:last-child{page-break-after:auto}
  @page{size:A4;margin:14mm}
}
.pt-h{display:grid;grid-template-columns:1fr auto 1fr;border:1.5px solid #000;border-radius:8px;padding:8px 12px;gap:8px;font-size:12.5px;align-items:center}
.pt-h .c{text-align:center;font-weight:700;font-size:15px}
.pt-f{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin:10px 0;font-size:13px}
.pt-f span{border-bottom:1px dotted #000;padding-bottom:4px}
.pt-s{border:1px solid #000;border-radius:6px;padding:8px 12px;margin-top:10px;font-size:13px;break-inside:avoid;color:#000}
.pt-s h4{display:flex;justify-content:space-between;margin:0 0 6px;font-size:14px;border-bottom:1px solid #000;padding-bottom:4px;color:#000}
.pt-s ol{margin:0;padding-inline-start:22px}.pt-s li{margin:4px 0}
.pt-o{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:2px}
.pt-p{white-space:pre-wrap;line-height:1.75;font-size:13px;margin-bottom:6px}
.pt-key td,.pt-key th{border:1px solid #000;padding:4px 8px;font-size:12.5px;color:#000}
.pt-key{border-collapse:collapse;margin-top:6px}
.preview{background:#fff;color:#000;border-radius:16px;padding:18px;border:1px solid var(--line);overflow:auto}
.preview h4,.preview .pt-s h4{color:#000}
.hide{display:none!important}

/* landing */
.land{min-height:100dvh}
.lnav{display:flex;align-items:center;gap:12px;padding:14px 20px;max-width:1120px;margin:0 auto;position:sticky;top:0;z-index:10;background:rgba(255,248,244,.8);backdrop-filter:blur(12px)}
.lnav .sp{flex:1} .lnav .lk{color:var(--ink);text-decoration:none;font-weight:700}
.lhero{padding:20px 20px 10px}
.lhero-in{max-width:1120px;margin:0 auto;display:grid;gap:26px;grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.lhero-in{grid-template-columns:1.15fr .85fr;padding:30px 0}}
.kicker{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 14px;font-weight:700;color:var(--vio-d);box-shadow:var(--shadow)}
.lhero h1{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.2;margin:14px 0 10px}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.12rem;color:var(--muted);max-width:560px;margin:0}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.trust span{font-size:.85rem;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px 12px;color:var(--muted);font-weight:600}
.lphone{position:relative;height:360px;border-radius:36px;background:var(--grad);box-shadow:0 30px 70px rgba(139,108,255,.3);overflow:hidden}
.lphone::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.18);left:-60px;top:-80px}
.lp-logo{position:absolute;width:120px;left:50%;top:34px;transform:translateX(-50%);border-radius:30px;box-shadow:0 14px 30px rgba(40,10,120,.3);animation:bob 3s ease-in-out infinite}
.lp-card{position:absolute;background:#fff;border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(40,10,120,.2);color:#2B2550;animation:bob 3.6s ease-in-out infinite}
.lp-card span{font-size:.82rem;color:#7A7399}
.lp-card.c0{right:18px;top:180px} .lp-card.c1{left:18px;top:220px;animation-delay:.6s} .lp-card.c2{right:40px;bottom:22px;animation-delay:1.2s}
.lsec{max-width:1120px;margin:0 auto;padding:34px 20px 10px}
.lsec>h2{text-align:center;font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:18px}
.lfeat .card h3{font-size:1.05rem}
.lsteps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lstep{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.lstep span{display:grid;place-content:center;width:46px;height:46px;border-radius:50%;margin:0 auto 8px;background:var(--grad);color:#fff;font-family:var(--head);font-weight:700;font-size:1.2rem}
.lstep b{display:block;font-family:var(--head)} .lstep small{color:var(--muted)}
.lplans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:760px;margin:10px auto}
.plan{position:relative;background:var(--card);border:2px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow)}
.plan.best{border-color:var(--vio);box-shadow:0 18px 40px rgba(139,108,255,.25)}
.plan ul{list-style:none;padding:0;margin:12px 0 16px;display:grid;gap:6px;font-size:.95rem}
.ribbon{position:absolute;top:-14px;left:20px;background:var(--grad);color:#fff;font-weight:700;font-size:.82rem;padding:4px 14px;border-radius:99px}
.price{margin:6px 0 2px} .price b{font-family:var(--head);font-size:2.4rem;line-height:1} .price span{color:var(--muted);font-weight:700}
.faq{display:grid;gap:10px;max-width:760px;margin:0 auto}
.faq summary{cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:left;font-weight:700;color:var(--vio-d)} .faq details[open] summary::after{content:"−"}
.lfoot{text-align:center;padding:30px 20px 40px}
.mysr-form{direction:ltr}
@media (min-width:900px){.lfeat{grid-template-columns:repeat(3,1fr)}}
/* محادثة الحجز */
.chat{max-height:46vh;min-height:140px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg2,#F7F4FF);border-radius:14px}
.chat .msg{align-self:flex-start;max-width:82%;background:var(--card);border-radius:14px 14px 14px 4px;padding:8px 12px;box-shadow:0 1px 3px rgba(40,30,90,.08);white-space:pre-wrap;word-break:break-word}
.chat .msg.me{align-self:flex-end;background:var(--vio-l);border-radius:14px 14px 4px 14px}
.chat .msg .tiny{display:block;margin-top:2px}
.potbl{overflow-x:auto;margin-top:10px;border:1px solid var(--line);border-radius:14px}
.potbl table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:720px}
.potbl th{background:var(--bg2);text-align:right;padding:8px;font-weight:700;white-space:nowrap}
.potbl td{padding:8px;border-top:1px solid var(--line);vertical-align:top}
/* ===== رحلة الدرس ===== */
.lj{max-width:760px;margin:0 auto;padding-bottom:30px}
.lj-overlay{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;padding:12px 14px calc(20px + env(safe-area-inset-bottom))}
.lj-overlay::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(700px 400px at 100% 0,#FFE3EE 0,transparent 60%),radial-gradient(700px 500px at 0 20%,#ECE5FF 0,transparent 60%)}
:root[data-theme="dark"] .lj-overlay::before{display:none}
.lj-top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.main .lj-top{top:56px}
.lj-segs{flex:1;display:flex;gap:4px;align-items:center}
.lj-segs i{flex:1;height:10px;border-radius:99px;background:var(--line);font-style:normal;font-size:0;transition:.4s}
.lj-segs i.done{background:var(--mint)}
.lj-segs i.now{background:var(--grad);height:14px;box-shadow:0 0 0 3px var(--vio-l)}
.lj-en{display:flex;align-items:center;gap:4px;background:var(--sun-l);color:#9A6B00;font-weight:800;padding:6px 12px;border-radius:99px;font-family:var(--head)}
.lj-en.bump{animation:ljbump .5s}
@keyframes ljbump{40%{transform:scale(1.25)}}
.lj-mode{text-align:center;font-size:.85rem;color:var(--muted);margin:-4px 0 8px}
.lj-stage{animation:ljin .45s cubic-bezier(.2,.9,.3,1.2)}
.lj-stage.back{animation:ljback .4s ease}
@keyframes ljin{from{opacity:0;transform:translateX(-40px) scale(.97)}}
@keyframes ljback{from{opacity:0;transform:translateX(40px)}}
.lj-hero{position:relative;overflow:hidden;border-radius:30px;padding:28px 22px 22px;color:#fff;background:linear-gradient(140deg,#FF8FB8 0%,#B49CFF 55%,#7C5CFF 100%);box-shadow:0 20px 50px rgba(139,108,255,.35)}
.lj-hero::after{content:"✨";position:absolute;font-size:120px;left:-20px;bottom:-40px;opacity:.18;transform:rotate(-15deg)}
.lj-hero h1{color:#fff;font-size:2rem;margin:10px 0 12px}
.lj-chip{display:inline-block;background:rgba(255,255,255,.25);padding:4px 14px;border-radius:99px;font-size:.85rem;font-weight:700}
.lj-meta{display:flex;flex-wrap:wrap;gap:8px}
.lj-meta span{background:rgba(255,255,255,.2);padding:4px 12px;border-radius:99px;font-size:.88rem}
.lj-champ{margin-top:14px;background:rgba(30,10,80,.22);padding:10px 14px;border-radius:16px;font-size:.95rem}
.lj-mission{margin-top:14px}
.lj-obj{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
.lj-obj:first-of-type{border-top:0}
.lj-obj span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--vio-l);color:var(--vio-d);font-weight:800}
.lj-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}
.lj-go{min-width:150px}
.btn.big{font-size:1.15rem;padding:14px 28px}
.lj-card{position:relative;border-radius:30px;padding:56px 22px 24px;margin-top:34px;background:var(--card);box-shadow:var(--shadow);border-top:10px solid var(--c,var(--vio))}
.lj-card.c0{--c:#FF7EAD}.lj-card.c1{--c:#8B6CFF}.lj-card.c2{--c:#27C6A8}.lj-card.c3{--c:#FFAA6B}.lj-card.c4{--c:#4AA8FF}.lj-card.c5{--c:#FFC93C}
.lj-badge{position:absolute;top:-34px;right:50%;transform:translateX(50%);width:72px;height:72px;border-radius:24px;display:grid;place-items:center;font-size:2.2rem;background:var(--card);box-shadow:0 10px 24px rgba(139,108,255,.25);border:4px solid var(--c);animation:ljbob 3s ease-in-out infinite}
@keyframes ljbob{50%{transform:translateX(50%) translateY(-6px) rotate(4deg)}}
.lj-count{text-align:center;font-size:.85rem;color:var(--muted);font-weight:700}
.lj-card h2{text-align:center;margin:6px 0 12px;font-size:1.45rem}
.lj-body{white-space:pre-wrap;font-size:1.12rem;line-height:1.95}
.lj-ex{position:relative;margin-top:16px;padding:14px 16px;border-radius:20px;background:var(--sun-l);border:2px dashed #FFC93C}
.lj-ex b{display:block;margin-bottom:4px}
.lj-ex .iconbtn{position:absolute;top:8px;left:8px}
.lj-quick,.lj-sec,.lj-chq{background:var(--card);border-radius:30px;padding:22px;box-shadow:var(--shadow);margin-top:14px}
.lj-flash{display:inline-block;background:linear-gradient(135deg,#FFC93C,#FF8FB8);color:#2B2550;font-weight:800;padding:6px 16px;border-radius:99px;animation:ljpulse 1.6s infinite}
@keyframes ljpulse{50%{transform:scale(1.06)}}
.lj-quick h2,.lj-chq h2{margin:14px 0;font-size:1.3rem;line-height:1.6}
.lj-opts{display:grid;gap:10px}
.lj-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:14px 16px;border-radius:18px;border:2px solid var(--line);background:var(--bg2);font-size:1.05rem;font-weight:600;cursor:pointer;transition:.15s}
.lj-opt span{flex:none;width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:var(--card);font-weight:800;color:var(--vio-d)}
.lj-opt:active{transform:scale(.97)}
@media(hover:hover){.lj-opt:hover:not(:disabled){border-color:var(--vio);transform:translateY(-2px)}}
.lj-opt.ok{border-color:var(--mint);background:var(--mint-l)}
.lj-opt.ok span{background:var(--mint);color:#fff}
.lj-opt.no{border-color:var(--coral);background:var(--coral-l)}
.shake{animation:ljshake .4s}
@keyframes ljshake{25%{transform:translateX(8px)}75%{transform:translateX(-8px)}}
.lj-why{margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--pink-l)}
.lj-why.ok{background:var(--mint-l)}
.lj-meter{position:relative;height:30px;border-radius:99px;background:var(--bg2);overflow:hidden;margin:10px 0 14px}
.lj-meter i{position:absolute;inset:0 auto 0 0;background:var(--grad);transition:width .4s;right:auto}
.lj-meter span{position:relative;display:block;text-align:center;line-height:30px;font-weight:800;font-size:.9rem}
.lj-flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lj-flip{position:relative;height:120px;perspective:800px;cursor:pointer}
.lj-flip>div{position:absolute;inset:0;border-radius:22px;display:grid;place-content:center;text-align:center;padding:10px;backface-visibility:hidden;transition:transform .5s cubic-bezier(.2,.9,.3,1.2);box-shadow:var(--shadow)}
.lj-flip .f{background:var(--card);border-bottom:6px solid var(--c,var(--vio));font-size:1.15rem}
.lj-flip .f .iconbtn{position:absolute;top:6px;left:6px}
.lj-flip .bk{background:var(--grad);color:#fff;font-weight:800;transform:rotateY(180deg);font-size:1.05rem}
.lj-flip.on .f{transform:rotateY(180deg)}.lj-flip.on .bk{transform:rotateY(360deg)}
.lj-flip.c0{--c:#FF7EAD}.lj-flip.c1{--c:#8B6CFF}.lj-flip.c2{--c:#27C6A8}.lj-flip.c3{--c:#FFAA6B}.lj-flip.c4{--c:#4AA8FF}.lj-flip.c5{--c:#FFC93C}
.lj-read{font-size:1.15rem;line-height:2.1;background:var(--bg2);border-radius:20px;padding:16px 18px}
.lj-read span{cursor:pointer;border-radius:6px;transition:.2s}
.lj-read span.hl{background:#FFE680;color:#2B2550;box-shadow:0 0 0 3px #FFE680}
.lj-arena{text-align:center;border-radius:30px;padding:30px 20px;margin-top:14px;color:#fff;background:linear-gradient(150deg,#2B2550,#6A4AE8 60%,#FF7EAD);box-shadow:0 24px 60px rgba(60,20,140,.35)}
.lj-arena h2{color:#fff;font-size:1.9rem;margin:6px 0}
.lj-arena p{opacity:.92;line-height:1.9}
.lj-flag{font-size:4rem;animation:ljbob2 2s ease-in-out infinite}
@keyframes ljbob2{50%{transform:translateY(-8px) rotate(-6deg)}}
.lj-mini-board{display:grid;gap:6px;max-width:340px;margin:14px auto;text-align:start}
.lj-mini-board div{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);padding:8px 12px;border-radius:14px}
.lj-mini-board b{flex:1}.lj-mini-board .a{font-size:1.3rem}
.btn.sun{background:linear-gradient(135deg,#FFD84D,#FFAA6B);color:#2B2550}
.lj-chhead{gap:8px}
.lj-combo{padding:4px 12px;border-radius:99px;background:var(--bg2);font-weight:800;opacity:.4;transition:.3s}
.lj-combo.on{opacity:1;background:linear-gradient(135deg,#FFAA6B,#FF6B6B);color:#fff;animation:ljpulse 1s infinite}
.lj-pts{margin-inline-start:auto;font-family:var(--head);color:var(--vio-d)}
.lj-timer{height:12px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-top:12px}
.lj-timer i{display:block;height:100%;background:linear-gradient(90deg,#FF6B6B,#FFC93C,#27C6A8);animation:ljtime linear forwards;transform-origin:right}
@keyframes ljtime{from{width:100%}to{width:0}}
.lj-sec-left{text-align:center;font-family:var(--head);font-size:1.6rem;font-weight:800;color:var(--vio-d);margin-top:4px}
.lj-sec-left.hot{color:var(--coral);animation:ljpulse .5s infinite}
.lj-finish{text-align:center;border-radius:30px;padding:26px 20px;margin-top:14px;background:var(--card);box-shadow:var(--shadow)}
.lj-trophy{font-size:4.5rem;animation:ljpop .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes ljpop{from{transform:scale(0) rotate(-30deg)}}
.lj-stars{display:flex;justify-content:center;gap:6px;font-size:3rem;line-height:1}
.lj-stars span{color:var(--line);animation:ljpop .5s both}
.lj-stars span.on{color:#FFC93C;text-shadow:0 4px 14px rgba(255,170,0,.45)}
.lj-score b{display:block;font-family:var(--head);font-size:3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lj-score span{color:var(--muted)}
.lj-rec{display:inline-block;margin-top:10px;background:var(--sun-l);color:#9A6B00;font-weight:800;padding:6px 16px;border-radius:99px;animation:ljpulse 1.2s infinite}
.lj-rank{margin-top:10px;font-size:1.1rem}
.lj-tot{margin-top:10px;color:var(--muted)}
.lj-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
/* وضع السبورة */
.lj-overlay.present .lj{max-width:1200px}
.lj-overlay.present .lj-body{font-size:1.6rem}
.lj-overlay.present .lj-card h2,.lj-overlay.present .lj-quick h2,.lj-overlay.present .lj-chq h2{font-size:2.2rem}
.lj-overlay.present .lj-opt{font-size:1.5rem;padding:20px}
.lj-overlay.present .lj-read{font-size:1.6rem}
.lj-overlay.present .lj-hero h1{font-size:3rem}
.lj-overlay.present .lj-flips{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lj-overlay.present .lj-flip{height:170px}.lj-overlay.present .lj-flip>div{font-size:1.6rem}
.main .lj{padding-bottom:110px}

@media (max-width:900px){.top,.bnav,.lnav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.top{background:var(--card)}.bnav{background:var(--card)}.modal{backdrop-filter:none!important}}
.top,.bnav{transform:translateZ(0)}
/* من تجاوب — نافذة كبيرة */
.pick-ov{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(30,20,70,.55);animation:fade .2s}
.pick-ov .box{width:min(92vw,560px);border-radius:32px;padding:28px 20px;text-align:center;color:#fff;background:linear-gradient(150deg,#FF8FB8,#B49CFF 55%,#7C5CFF);box-shadow:0 30px 80px rgba(40,10,120,.45)}
.pick-ov .nm{font-family:var(--head);font-size:clamp(2rem,9vw,3.6rem);font-weight:800;margin:14px 0;min-height:1.3em}
.pick-ov.rolling .nm{animation:roll .09s linear infinite}
.pick-ov .row{justify-content:center}
.pt-p{border:1px dashed #000;border-radius:6px;padding:8px 10px;margin:4px 0 8px;line-height:1.8;font-size:13px;white-space:pre-wrap}
.pt-lines i{display:block;border-bottom:1px solid #000;height:22px}
.lj-clip{margin-top:16px;border-radius:18px;overflow:hidden;border:2px solid var(--line);background:#fff}
.lj-clip-h{font-size:.85rem;font-weight:700;padding:6px 12px;background:var(--bg2);color:var(--muted)}
.lj-clip-in img{display:block;width:100%;cursor:zoom-in}
.lj-clip-wait{padding:18px;text-align:center;color:#888;font-size:.9rem}
.lj-clip-in .btn{margin:12px}
.lj-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.lj-pages .lj-clip{margin-top:0}
.lj-pages .lj-clip-in{max-height:190px;overflow:hidden}
.bz img{width:100%;border-radius:12px}
.modal .box:has(.bz){max-width:900px}
.bell{position:relative}
.bell .dot{position:absolute;top:-2px;left:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--coral);color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0 4px}
.li.nf.new{background:var(--vio-l);border-radius:14px}
.nf-dot{width:10px;height:10px;border-radius:50%;background:var(--pink);flex:none}
.langbtn{font-weight:800;font-size:.85rem;min-width:36px}
.lang-en body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
/* ===== إصلاحات المراجعة: تباين الألوان (WCAG AA) والتجاوب ===== */
:root{--muted:#635C88;--mint-d:#0B7A66;--grad:linear-gradient(135deg,#C2337A 0%,#8B5CF0 55%,#6A4AE8 100%)}
:root[data-theme="dark"]{--muted:#B3A9D6;--vio-d:#C2B3FF}
.chip.warn{color:#7A5500}.chip.bad,.btn.bad{color:#B42828}.chip.pink{color:#B8285F}
:root[data-theme="dark"] .chip.bad,:root[data-theme="dark"] .btn.bad{color:#FF9A9A}:root[data-theme="dark"] .chip.pink{color:#FF9CC4}:root[data-theme="dark"] .chip.ok{color:#5FE0C4}
.dot,.bell .dot{background:#D93A3A}
.cls-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cls-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.stack,.cls-grid>*{min-width:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid #8B5CF0;outline-offset:2px;border-radius:8px}

/* تدقيق ما قبل الإطلاق — الوضع الداكن والجوال الصغير */
:root{--err:#B23A28;--warn-t:#8A5F00}
:root[data-theme="dark"]{--mint-d:#5FE3C4;--err:#FF9A8A;--warn-t:#FFD45C}
:root[data-theme="dark"] .btn.dark{background:#4A3F86}
.chip.warn,.lj-en,.lj-rec{color:var(--warn-t)}
.lp-card span{color:#635C88}
@media (max-width:360px){.top{gap:4px;padding-left:8px;padding-right:8px}.top .who{max-width:26vw}.top .btn.sm,.top button{padding-left:6px;padding-right:6px}}
.star-row{min-width:0}.star-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:360px){.star-row .iconbtn{min-width:34px;padding:6px 4px}.star-row{gap:4px}}
/* ثبات الشاشة على الجوال: منع تكبير آيفون عند الكتابة، وإخفاء الشريط السفلي مع الكيبورد، وهيدر مصمت */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not(.code),select,textarea{font-size:16px!important}
  :root[data-theme="dark"] .top,:root .top{background:var(--card)!important}
  body.kb .bnav{display:none!important}
  html,body{overflow-x:hidden;max-width:100%}
}
.checks.days label{padding:6px 10px}

.pt-sk{font-weight:400;font-size:.82em}
.pg.fit .pt-s{margin-top:6px;padding:6px 10px}.pg.fit .pt-s li{margin:2px 0}.pg.fit .pt-f{margin:6px 0}.pg.fit .pt-lines i{height:18px}
.sk-l{display:flex;align-items:center;gap:6px}