: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:radial-gradient(900px 500px at 110% -10%,#FFE3EE 0,transparent 60%),radial-gradient(800px 500px at -10% 10%,#ECE5FF 0,transparent 55%),var(--bg);background-attachment:fixed}
: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{
  body{background:#fff}
  #app,#toast,.modal,#confetti{display:none!important}
  #print{display:block;color:#000;font-family:var(--font)}
  .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)}}