/* Layout: phone-frame app — navy→blue gradient headers, white cards overlapping them by −14px, bottom tab bar. Single light brand look (SNAPSHOT design system). */
:root{
  --navy:#0d1b6b; --bar:#13308f; --blue:#1736b5; --blue2:#1d47b8; --mark:#d6e6ff;
  --pink:#e8548e; --pink2:#c2185b; --pink-l:#ff7fb0; --pink-sub:#ffc2da; --pink-soft:#f9d3e3;
  --gold:#f4b740; --gold-bg:#fff3d6; --gold-tx:#8a5a00;
  --ok:#2ea86a; --ok-bg:#e6f7ee; --ok-tx:#13693b; --err-bg:#ffe8ef; --err-tx:#a3134a;
  --ink:#1f2a44; --muted:#5b6788; --bg:#f3f7ff; --card:#fff; --line:#dfe7fb; --soft:#e8eefc; --en-bg:#eaf1ff;
  --desk:#dde5f6; --frame:#0b1450; --white:#fff; --shade:rgba(13,27,107,.08); --scrim:rgba(10,18,60,.45);
  --f-brand:'Baloo 2',system-ui,sans-serif; --f-ar:'Cairo',Tahoma,'Segoe UI',sans-serif; --f-en:'Source Sans 3','Segoe UI',Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
/* app feel: nothing can be selected, copied, dragged or long-press-menued — only typing fields stay editable */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
input,textarea,select{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none;user-drag:none}
button,a,[data-a]{touch-action:manipulation}
#screen.go-fwd{animation:inFwd .22s ease-out}
#screen.go-back{animation:inBack .22s ease-out}
@keyframes inFwd{from{opacity:.4;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes inBack{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}
@media print{body{display:none!important}}
body{background:var(--desk);color:var(--ink);font:400 15px/1.8 var(--f-ar);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--pink-l);outline-offset:2px}
.ltr{direction:ltr;unicode-bidi:isolate}

/* device frame */
.stage{height:100%;display:flex;align-items:center;justify-content:center}
.device{position:relative;width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:600px){
  .stage{padding:20px}
  .device{width:400px;height:min(860px,100%);border-radius:40px;border:10px solid var(--frame);box-shadow:0 30px 80px rgba(13,27,107,.35)}
}
#screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#screen::-webkit-scrollbar{display:none}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header */
.hdr{background:linear-gradient(135deg,var(--navy),var(--blue2));color:var(--white);padding-block:14px 30px}
.hdr .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:8px;font:800 20px/1 var(--f-brand);letter-spacing:3px;direction:ltr}
.brand span{color:var(--pink-l);margin-left:-3px}
.brand svg{width:30px;height:30px;flex:none}
.iconbtn{width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:var(--white);display:grid;place-items:center;position:relative;flex:none}
.iconbtn svg{width:20px;height:20px}
.iconbtn .dot{position:absolute;top:6px;left:7px;width:9px;height:9px;border-radius:50%;background:var(--pink);border:2px solid var(--navy)}
.hdr h1{margin:12px 0 0;font:800 23px/1.35 var(--f-ar);text-wrap:balance}
.hdr .en-h{display:block;direction:ltr;text-align:right;font:700 15px/1.3 var(--f-en);color:var(--pink-sub);margin-top:2px}
.hdr .sub{margin:2px 0 0;font:600 14px var(--f-ar);color:var(--pink-sub)}
.pill{display:inline-block;background:var(--pink);color:var(--white);padding:2px 12px;border-radius:99px;font:700 12px/1.8 var(--f-brand);letter-spacing:1px;direction:ltr}
.pill.ar{font-family:var(--f-ar);letter-spacing:0}
.content{margin-top:-14px;padding-block:0 28px;position:relative}

/* generic */
.card{background:var(--card);border-radius:18px;box-shadow:0 4px 18px var(--shade);padding:16px}
.stack{display:flex;flex-direction:column;gap:12px}
.sec-t{display:flex;align-items:center;gap:8px;margin:22px 2px 10px;font:800 17px/1.3 var(--f-ar);color:var(--navy)}
.sec-t::before{content:'';width:7px;height:20px;border-radius:4px;background:var(--pink)}
.sec-t.gold::before{background:var(--gold)}
.sec-t small{font:600 12px var(--f-ar);color:var(--muted);margin-inline-start:auto}
.muted{color:var(--muted)}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:12px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:var(--white);font-weight:800;font-size:16px;box-shadow:0 6px 16px rgba(232,84,142,.3)}
.btn.navy{background:linear-gradient(135deg,var(--bar),var(--navy));box-shadow:0 6px 16px rgba(13,27,107,.25)}
.btn.wa{background:linear-gradient(135deg,#25b860,#128c4a);box-shadow:0 6px 16px rgba(18,140,74,.28)}
.btn.ghost{background:var(--soft);color:var(--navy);box-shadow:none}
.btn.danger{background:var(--err-bg);color:var(--err-tx);box-shadow:none}
.btn + .btn{margin-top:10px}
label.f{display:block;font-weight:700;color:var(--navy);font-size:14px;margin:12px 0 4px}
.inp{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:#fbfcff;outline:none}
.inp:focus{border-color:var(--blue);background:var(--white)}
.inp[readonly]{background:var(--soft);color:var(--muted)}
.inp.lt{direction:ltr;text-align:left;font-family:var(--f-en)}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:4px;font:700 11px/1.9 var(--f-ar);padding:0 9px;border-radius:99px;background:var(--mark);color:var(--blue);white-space:nowrap}
.chip.pink{background:var(--pink-soft);color:var(--err-tx)}
.chip.gold{background:var(--gold-bg);color:var(--gold-tx)}
.chip.ok{background:var(--ok-bg);color:var(--ok-tx)}
.chip.grey{background:#edf0f7;color:var(--muted)}
.chip.navy{background:var(--navy);color:var(--white)}


/* splash */
.splash{height:100%;background:linear-gradient(160deg,var(--navy),var(--blue2));color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;cursor:pointer}
.splash .logo{width:96px;height:96px;animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.splash .word{font:800 34px/1 var(--f-brand);letter-spacing:5px;direction:ltr}
.splash .word span{color:var(--pink-l)}
.splash .tag{font:600 13px var(--f-en);letter-spacing:2px;color:var(--pink-sub);direction:ltr}
.splash .msg{margin-top:26px;max-width:290px;background:rgba(255,255,255,.12);border-radius:18px;padding:14px 18px;font:700 16px/1.8 var(--f-ar);animation:rise .5s .35s both}
.splash .skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom,0px));font-size:12px;opacity:.7}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* steps */
.steps{display:flex;gap:6px;margin-top:12px}
.steps i{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.25)}
.steps i.on{background:var(--pink-l)}

/* gender */
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gbtn{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);background:var(--white);border-radius:16px;padding:12px 8px 8px;font:800 15px var(--f-en);color:var(--navy)}
.gbtn svg{width:56px;height:56px}
.gbtn.on.m{border-color:var(--blue);background:var(--en-bg);box-shadow:0 0 0 3px var(--mark)}
.gbtn.on.f{border-color:var(--pink);background:#fff4f8;box-shadow:0 0 0 3px var(--pink-soft);color:var(--pink2)}

/* year cards */
.years{display:grid;gap:12px}
.ycard{display:flex;align-items:center;gap:14px;width:100%;text-align:right;background:var(--card);border:0;border-radius:20px;padding:16px;box-shadow:0 6px 22px rgba(13,27,107,.10);border-right:6px solid var(--bar)}
.ycard .ic{overflow:hidden;flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font:800 26px var(--f-brand);color:var(--bar);background:var(--soft)}
.ycard b{display:block;font:800 18px/1.4 var(--f-ar);color:var(--navy)}
.ycard small{display:block;font:600 12px var(--f-en);color:var(--muted);direction:ltr;text-align:right}
.ycard .go{margin-inline-start:auto;color:var(--blue);font-weight:800;font-size:22px}
.ycard.c2{border-right-color:var(--pink)} .ycard.c2 .ic{background:var(--pink-soft);color:var(--pink2)} .ycard.c2 .go{color:var(--pink)}
.ycard.c3{border-right-color:var(--gold)} .ycard.c3 .ic{background:var(--gold-bg);color:var(--gold-tx)} .ycard.c3 .go{color:#d39410}
.ycard.c4{border-right-color:var(--ok)} .ycard.c4 .ic{background:var(--ok-bg);color:var(--ok-tx)} .ycard.c4 .go{color:var(--ok)}
.ycard.sel{outline:3px solid var(--pink-l)}

/* banners */
.banners{position:relative}
.bn-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;border-radius:18px;scrollbar-width:none}
.bn-track::-webkit-scrollbar{display:none}
.bn{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:2/1;max-width:100%;border-radius:18px;border:0;color:var(--white);text-align:right;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(13,27,107,.18)}
.bn::after{content:'';position:absolute;width:150px;height:150px;border-radius:40px;border:14px solid rgba(255,255,255,.12);left:-30px;top:-40px;transform:rotate(18deg)}
.bn b{font:800 19px/1.35 var(--f-ar);position:relative;z-index:1}
.bn span{font:600 13px var(--f-ar);opacity:.9;position:relative;z-index:1}
.bn .chip{position:relative;z-index:1;align-self:flex-start;margin-bottom:auto}
.bn.b1{background:linear-gradient(135deg,var(--pink),var(--pink2))}
.bn.b2{background:linear-gradient(135deg,var(--navy),var(--blue2))}
.bn.b3{background:linear-gradient(135deg,#f6b73c,#d9831a)}
.bn-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.bn-dots i{width:7px;height:7px;border-radius:9px;background:#c5d0ee;transition:width .25s}
.bn-dots i.on{width:20px;background:var(--pink)}

/* tabs */
.tabs{display:flex;background:var(--soft);border-radius:14px;padding:4px;gap:4px;margin-top:16px}
.tabs button{flex:1;border:0;background:transparent;border-radius:10px;padding:7px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}
.tabs button.on{background:var(--white);color:var(--navy);box-shadow:0 2px 8px rgba(13,27,107,.1)}
.tabs .now{font-size:10px;background:var(--pink);color:var(--white);border-radius:99px;padding:0 7px;line-height:1.7}

/* subject grid */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:right;background:var(--card);border:0;border-right:5px solid var(--blue);border-radius:18px;padding:12px 12px 10px;box-shadow:0 4px 16px var(--shade);min-width:0}
.scard.k-p{border-right-color:var(--ok)}
.scard.k-e{border-right-color:var(--gold)}
.scard.k-r,.scard.k-g{border-right-color:var(--bar)}
.scard .top{display:flex;align-items:flex-start;justify-content:space-between}
.ic img,.e img,.num img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.scard .ic{width:50px;height:50px;overflow:hidden;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-size:23px}
.scard.k-p .ic{background:var(--ok-bg)} .scard.k-e .ic{background:var(--gold-bg)}
.scard .ar-n{font:800 14.5px/1.45 var(--f-ar);color:var(--navy);text-wrap:balance}
.scard .en-n{font:600 11.5px/1.3 var(--f-en);color:var(--muted);direction:ltr;text-align:right}
.scard .foot{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.scard .price{font:800 13px var(--f-brand);color:var(--pink2)}
.scard .price s{color:var(--muted);font-weight:700;font-size:11px;margin-inline-end:3px}
.scard.soon .ic,.scard.soon .ar-n,.scard.soon .en-n{opacity:.55}
.lockb{width:28px;height:28px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:13px}
.bell{border:0;background:var(--gold-bg);color:var(--gold-tx);font:700 11px var(--f-ar);border-radius:99px;padding:3px 9px}
.bell.on{background:var(--ok-bg);color:var(--ok-tx)}
.ring-s{--p:0;width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--pink) calc(var(--p)*1%),var(--soft) 0);display:grid;place-items:center;flex:none}
.ring-s i{width:28px;height:28px;border-radius:50%;background:var(--white);display:grid;place-items:center;font:800 10px var(--f-brand);color:var(--navy);font-style:normal}
.bundle{display:flex;align-items:center;gap:12px;width:100%;text-align:right;border:2px dashed var(--pink);background:linear-gradient(135deg,#fff,#fff4f8);border-radius:18px;padding:14px;margin-top:14px}
.bundle .ic{font-size:28px}
.bundle b{display:block;color:var(--navy);font:800 15px var(--f-ar)}
.bundle small{display:block;color:var(--muted);font-size:12px}
.bundle .save{margin-inline-start:auto;text-align:center;flex:none}
.bundle .save s{display:block;color:var(--muted);font:700 12px var(--f-brand)}
.bundle .save b{color:var(--pink2);font:800 18px var(--f-brand)}
.empty{text-align:center;padding:30px 18px}
.empty .big{font-size:46px}
.empty h3{margin:4px 0 0;color:var(--navy)}
.empty p{color:var(--muted);margin:4px 0 0}

/* subject page */
.cont{display:flex;align-items:center;gap:12px;width:100%;border:0;text-align:right;background:linear-gradient(135deg,var(--bar),var(--navy));color:var(--white);border-radius:18px;padding:14px 16px;box-shadow:0 8px 20px rgba(13,27,107,.25)}
.cont .pl{width:42px;height:42px;border-radius:50%;background:var(--pink);display:grid;place-items:center;flex:none;font-size:16px}
.cont b{display:block;font:800 15px var(--f-ar)}
.cont small{display:block;font:600 12px var(--f-en);color:var(--pink-sub);direction:ltr;text-align:right}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:4px 12px;box-shadow:0 2px 10px var(--shade);margin-top:12px}
.search input{border:0;outline:none;flex:1;background:transparent;padding:8px 0;min-width:0}
.stiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stile{border:0;border-radius:16px;padding:12px 6px 10px;text-align:center;color:var(--navy);background:var(--card);box-shadow:0 3px 12px var(--shade);display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.stile .e{font-size:24px}
.stile b{font:800 12.5px/1.4 var(--f-ar)}
.stile small{font:600 10.5px var(--f-ar);color:var(--muted)}
.stile.t-exam{background:linear-gradient(160deg,#fff,#fff0f6);box-shadow:inset 0 0 0 1.5px var(--pink-soft),0 3px 12px var(--shade)}
.stile.t-past{background:linear-gradient(160deg,#fff,var(--gold-bg));box-shadow:inset 0 0 0 1.5px #f8dfa2,0 3px 12px var(--shade)}
.stile.t-rev{background:linear-gradient(160deg,#fff,var(--en-bg));box-shadow:inset 0 0 0 1.5px var(--mark),0 3px 12px var(--shade)}
.stile .lk,.ltile .lk{position:absolute;top:6px;left:6px;font-size:12px}
.lect{display:flex;align-items:center;gap:12px;width:100%;border:0;text-align:right;background:var(--card);border-radius:16px;padding:11px 12px;box-shadow:0 3px 12px rgba(13,27,107,.07)}
.lect .num{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bar);color:var(--white);font:800 17px/44px var(--f-brand);text-align:center}
.lect .t{flex:1;min-width:0}
.lect .en-t{display:block;direction:ltr;text-align:right;font:700 15px/1.3 var(--f-en);color:var(--navy)}
.lect .ar-t{display:block;font-size:12.5px;color:var(--muted);line-height:1.6}
.lect.soon{opacity:.55}
.lect.soon .num{background:#9aa6c7}
.lect.locked .num{background:#7d8bb5}

/* lecture tiles */
.ltiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ltile{position:relative;border:0;background:var(--card);border-radius:16px;box-shadow:0 3px 12px var(--shade);padding:14px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ltile .e{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:var(--soft)}
.ltile b{font:800 12.5px/1.35 var(--f-ar);color:var(--navy)}
.ltile small{font:600 10.5px var(--f-ar);color:var(--muted)}
.ltile.c-pink .e{background:var(--pink-soft)} .ltile.c-gold .e{background:var(--gold-bg)} .ltile.c-ok .e{background:var(--ok-bg)} .ltile.c-en .e{background:var(--en-bg)}
.ltile.wide{grid-column:1/-1;flex-direction:row;gap:12px;padding:10px 14px;text-align:right}
.ltile.wide .tx{display:flex;flex-direction:column;align-items:flex-start}
.ltile.locked{background:#f6f8fd}
.ltile.locked .e,.ltile.locked b,.ltile.locked small{opacity:.5}
.trial{display:flex;gap:10px;align-items:center;background:var(--ok-bg);color:var(--ok-tx);border-radius:14px;padding:10px 14px;font-weight:700;font-size:13px;margin-bottom:12px}

/* snapshot content */
.block{background:var(--card);border-radius:18px;box-shadow:0 4px 18px var(--shade);overflow:hidden}
.en{direction:ltr;text-align:left;background:var(--en-bg);border-left:5px solid var(--bar);padding:12px 14px;font:600 16px/1.55 var(--f-en);color:var(--navy)}
.en .n{display:inline-block;min-width:24px;height:24px;border-radius:50%;background:var(--bar);color:var(--white);font:800 12px/24px var(--f-brand);text-align:center;margin-right:8px}
.arx{padding:12px 16px 4px;font-size:15.5px;line-height:1.95}
.arx p{margin:0 0 8px}
b.t{font-family:var(--f-en);color:var(--blue);background:var(--mark);padding:0 5px;border-radius:5px;unicode-bidi:isolate;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tip,.sum{margin:4px 14px 14px;border-radius:12px;padding:9px 12px;font-size:14.5px}
.tip{background:#fff6e5;border-right:4px solid var(--gold)}
.sum{background:var(--pink-soft);border-right:4px solid var(--pink);font-weight:700;color:var(--navy)}
.tip::before{content:'💡 مثال: ';font-weight:800}
.sum::before{content:'✔ يبقى الخلاصة: ';font-weight:800;color:var(--pink)}
.q{color:var(--pink);font-weight:800}
.orline{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700;font-size:13px}
.orline::before,.orline::after{content:'';flex:1;height:1px;background:var(--line)}
.ycard.cbook{border-right-color:var(--pink);background:linear-gradient(135deg,#fff,#fff4f8)}
.ycard.cbook .ic{background:var(--pink-soft);overflow:hidden;padding:0}
.ycard.cbook .ic img{width:100%;height:100%;object-fit:cover;object-position:top}
.ycard.cbook .go{color:var(--pink)}
/* video full screen (landscape) */
.player.fs{position:absolute;z-index:75;top:50%;left:50%;width:var(--dh);height:var(--dw);max-width:none;aspect-ratio:auto;border-radius:0;transform:translate(-50%,-50%) rotate(90deg);box-shadow:none}
.player.fs .scene b{font-size:30px}
/* audio */
.aplayer{background:linear-gradient(160deg,var(--navy),var(--blue2));border-radius:20px;padding:16px;color:var(--white);box-shadow:0 8px 24px rgba(13,27,107,.3)}
.acover{display:flex;align-items:center;gap:12px}
.acover > span{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:26px;flex:none}
.acover b{display:block;font:800 15px var(--f-ar)}
.acover small{display:block;font:600 12px var(--f-en);color:var(--pink-sub);text-align:right}
.wave{display:flex;align-items:center;gap:2px;height:64px;margin-top:16px;cursor:pointer}
.wave i{flex:1;border-radius:3px;background:rgba(255,255,255,.25);min-height:6px}
.wave i.on{background:var(--pink-l)}
.atime{display:flex;justify-content:space-between;font:700 12px var(--f-brand);color:var(--pink-sub);margin-top:4px;direction:ltr}
.actl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:8px;direction:ltr}
.actl button{border:0;background:rgba(255,255,255,.14);color:var(--white);border-radius:12px;padding:8px 12px;font:800 13px var(--f-brand)}
.actl .aplay{width:62px;height:62px;border-radius:50%;background:var(--pink);font-size:22px;box-shadow:0 6px 18px rgba(232,84,142,.5)}
.arow{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.arow button{border:0;background:rgba(255,255,255,.16);color:var(--white);border-radius:10px;padding:4px 12px;font:800 13px var(--f-brand)}
.arow .chip{background:rgba(255,255,255,.14);color:var(--white)}
/* plans */
.cchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.planend{background:linear-gradient(135deg,#fff,#fff0f6);border:1.5px solid var(--pink-soft);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 4px 16px var(--shade)}
.planend b{display:block;font:800 16px var(--f-ar);color:var(--navy)}
.planend p{margin:4px 0 10px;font-size:13.5px;color:var(--ink)}
.planend .row2{display:flex;flex-direction:column;gap:8px}
.planend .btn + .btn{margin-top:0}
.planwarn{background:var(--gold-bg);color:var(--gold-tx);border-radius:14px;padding:9px 12px;font-weight:700;font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.planwarn .linkb{margin-inline-start:auto;color:var(--gold-tx)}
.ltile.crown{background:linear-gradient(160deg,#fff,var(--gold-bg))}
.ltile.crown small{color:var(--gold-tx);font-weight:800;opacity:1}
/* smart snapshot */
.snapgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;direction:ltr}
.sbox{background:var(--card);border-radius:14px;box-shadow:0 3px 12px var(--shade);overflow:hidden;min-width:0}
.sbox h4{margin:0;background:linear-gradient(135deg,var(--bar),var(--navy));color:var(--white);font:800 13px var(--f-brand);letter-spacing:.3px;padding:6px 10px;direction:ltr;text-align:left}
.sbox ul{margin:0;padding:8px 22px 8px 8px;direction:ltr;text-align:left;font:600 12.5px/1.5 var(--f-en);color:var(--ink)}
.sbox li{margin-bottom:3px}
.sbox li::marker{color:var(--pink)}
.sbox b{color:var(--navy)}
.takeaways{margin-top:10px;background:linear-gradient(135deg,var(--navy),var(--blue2));border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;direction:ltr;text-align:left}
.takeaways b{color:#ffd54a;font:800 14px var(--f-brand)}
.takeaways span{background:rgba(255,255,255,.12);color:var(--white);border-radius:10px;padding:5px 10px;font:600 12.5px var(--f-en)}
.takeaways span b{color:var(--pink-sub);font:inherit;font-weight:800}
@media (max-width:360px){.snapgrid{grid-template-columns:1fr}}
/* books */
.linkb{border:0;background:transparent;color:var(--blue);font:700 12px var(--f-ar);padding:0}
.bstrip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.bstrip::-webkit-scrollbar{display:none}
.bcard{flex:0 0 132px;display:flex;flex-direction:column;gap:6px;border:0;background:var(--card);border-radius:16px;padding:8px;box-shadow:0 4px 16px var(--shade);text-align:right}
.bcard img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:10px;max-width:100%}
.bcard .bt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bcard b{font:800 13px/1.4 var(--f-ar);color:var(--navy)}
.bcard small{font:600 10.5px/1.3 var(--f-en);color:var(--muted);text-align:right}
.bcard .bmeta{font-size:11px;color:var(--muted);font-weight:700}
.bcard .chip,.bcard .price{align-self:flex-start;margin-top:2px}
.bcard.big{flex:none;flex-direction:row;align-items:center;gap:14px;padding:12px}
.bcard.big img{width:96px;flex:none}
.bcard.big b{font-size:16px}
.bcard.soonb{align-items:center;justify-content:center;text-align:center;color:var(--muted);background:var(--soft);box-shadow:none;border:2px dashed #c9d4f2;min-height:200px}
.bcard.soonb span{font-size:30px}
.bookhead{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:18px;padding:12px;box-shadow:0 4px 18px var(--shade)}
.bookhead img{width:110px;flex:none;border-radius:10px;aspect-ratio:3/4;object-fit:cover;object-position:top;box-shadow:0 6px 16px rgba(13,27,107,.18)}
.bookhead p{margin:6px 0;font-size:13px;color:var(--ink);line-height:1.8}
.bookhead > div{min-width:0}
/* extra subjects */
.pick{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.pick button{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--white);border-radius:12px;padding:8px 10px;text-align:right;font-weight:700;color:var(--navy);font-size:13px}
.pick button .e{width:34px;height:34px;border-radius:10px;overflow:hidden;flex:none}
.pick button.on{border-color:var(--pink);background:#fff4f8}
.flow{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.flow .sec{margin:14px 2px 0}
.block.intro .arx{padding:14px 16px 6px}
.toc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.toc::-webkit-scrollbar{display:none}
.toc button{flex:none;border:0;background:var(--card);color:var(--navy);font:700 12.5px var(--f-ar);border-radius:99px;padding:5px 12px;box-shadow:0 2px 8px var(--shade)}
.readbar{position:sticky;top:0;z-index:30;height:4px;background:transparent}
.readbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bar),var(--pink));border-radius:0 4px 4px 0}
.protected{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lp{transition:background .2s}
.lp.hold{background:var(--gold-bg)}
.sec{margin:20px 2px 8px;font:800 19px/1.2 var(--f-brand);color:var(--navy);direction:ltr;text-align:left;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sec::before{content:'';width:7px;height:20px;border-radius:4px;background:var(--pink);align-self:center}
.sec span{font:700 14px var(--f-ar);color:var(--pink);direction:rtl}

/* watermark */
.wm{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.wm span{position:absolute;font:800 15px var(--f-ar);color:var(--navy);opacity:.09;white-space:nowrap;transform:rotate(-24deg);transition:top 1.2s ease,left 1.2s ease}

/* video */
.player{direction:ltr;position:relative;background:#050b2e;border-radius:18px;overflow:hidden;aspect-ratio:16/9;max-width:100%;color:var(--white);box-shadow:0 8px 24px rgba(5,11,46,.35)}
.player .scene{position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,#1d47b8 0,#0d1b6b 45%,#050b2e 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}
.player .scene b{font:800 20px var(--f-brand);letter-spacing:2px}
.player .scene small{font:600 12px var(--f-en);opacity:.75}
.player .zone{position:absolute;top:0;bottom:44px;width:35%;border:0;background:transparent}
.player .zone.l{left:0} .player .zone.r{right:0}
.player .big{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);width:58px;height:58px;border-radius:50%;border:0;background:var(--pink);color:var(--white);font-size:22px;box-shadow:0 6px 20px rgba(232,84,142,.5)}
.player .ctl{position:absolute;left:0;right:0;bottom:0;padding:6px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.player .bar{height:5px;border-radius:9px;background:rgba(255,255,255,.25);position:relative;cursor:pointer}
.player .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:var(--pink)}
.player .row{display:flex;align-items:center;gap:8px;margin-top:5px;font:700 12px var(--f-en)}
.player .row button{border:0;background:rgba(255,255,255,.16);color:var(--white);border-radius:8px;padding:2px 8px;font:700 12px var(--f-en)}
.player .row .sp{margin-left:auto}
.player .flash{position:absolute;top:40%;font:800 14px var(--f-en);background:rgba(0,0,0,.45);padding:4px 10px;border-radius:99px;opacity:0;transition:opacity .3s}
.player .flash.on{opacity:1}
.chap{display:flex;align-items:center;gap:10px;width:100%;border:0;background:var(--card);border-radius:12px;padding:8px 12px;text-align:left;direction:ltr;box-shadow:0 2px 8px var(--shade)}
.chap time{font:800 13px var(--f-brand);color:var(--pink2);min-width:44px}
.chap span{font:600 14px var(--f-en);color:var(--navy)}
.chap.on{outline:2px solid var(--pink)}
.resume{background:var(--en-bg);color:var(--navy);border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;margin-top:10px}

/* pdf */
.ptools{display:flex;gap:6px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.ptools button{border:0;background:var(--card);border-radius:12px;padding:6px 12px;font-weight:700;font-size:13px;color:var(--navy);box-shadow:0 2px 8px var(--shade)}
.ptools button.on{background:var(--navy);color:var(--white)}
.page{position:relative;background:var(--white);border-radius:6px;box-shadow:0 6px 20px rgba(13,27,107,.15);padding:22px 18px 30px;direction:ltr;text-align:left;font:400 13.5px/1.75 var(--f-en);color:var(--ink);min-height:420px;touch-action:pan-y}
.page.pen{touch-action:none}
.page h4{margin:0 0 8px;font:800 17px var(--f-brand);color:var(--navy)}
.page p{margin:0 0 8px;border-radius:3px;padding:0 2px}
.page p.hl{background:#fff0a8}
.page canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.page.pen canvas{pointer-events:auto}
.page .pin{position:absolute;background:#fff3b0;color:var(--ink);font:700 11px/1.5 var(--f-ar);direction:rtl;padding:4px 8px;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.15);max-width:150px}
.page .pno{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:600 11px var(--f-en);color:var(--muted)}
.pnav{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.pnav button{border:0;background:var(--card);border-radius:12px;padding:6px 14px;font-weight:700;color:var(--navy);box-shadow:0 2px 8px var(--shade)}

/* quiz */
.qset{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.qbar{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--navy);font-size:14px}
.qbar .tm{font:800 15px var(--f-brand);color:var(--pink2);direction:ltr}
.progress{height:8px;background:#e1e8fa;border-radius:99px;overflow:hidden;margin:6px 0 12px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--bar),var(--pink));border-radius:99px;transition:width .3s}
.opts{display:grid;gap:9px;padding:12px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;direction:ltr;background:#f6f8ff;border:2px solid var(--line);border-radius:14px;padding:10px 12px;font:600 15px/1.45 var(--f-en);color:var(--ink)}
.opt .l{flex:none;width:28px;height:28px;border-radius:50%;background:var(--white);border:2px solid var(--line);display:grid;place-items:center;font:800 13px var(--f-brand);color:var(--navy)}
.opt.pick{border-color:var(--blue);background:var(--en-bg)}
.opt.right{background:var(--ok-bg);border-color:var(--ok)} .opt.right .l{background:var(--ok);border-color:var(--ok);color:var(--white)}
.opt.wrong{background:var(--err-bg);border-color:var(--pink)} .opt.wrong .l{background:var(--pink);border-color:var(--pink);color:var(--white)}
.explain{margin:0 12px 12px;border-radius:12px;padding:9px 12px;font-size:14px}
.explain.ok{background:var(--ok-bg);color:var(--ok-tx)} .explain.no{background:var(--err-bg);color:var(--err-tx)}
.explain p{margin:4px 0 0;color:var(--ink)}
.star{border:0;background:transparent;font-size:20px;line-height:1}
.ring{--p:0;width:130px;height:130px;margin:6px auto 0;border-radius:50%;background:conic-gradient(var(--pink) calc(var(--p)*1%),#e1e8fa 0);display:grid;place-items:center}
.ring b{width:100px;height:100px;border-radius:50%;background:var(--white);display:grid;place-items:center;font:800 28px var(--f-brand);color:var(--navy)}
.rv{background:#f6f8ff;border-radius:14px;overflow:hidden}
.rv .en{border-left-width:4px;font-size:14px}
.rv .ans{padding:6px 12px 8px;font-size:13.5px}
.rv .ans b{font-family:var(--f-en);unicode-bidi:isolate}

/* plan */
.streak{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:var(--white);border-radius:18px;padding:14px 16px;box-shadow:0 6px 18px rgba(232,84,142,.3)}
.streak .f{font-size:32px}
.streak b{display:block;font:800 17px var(--f-ar)}
.streak small{font-size:12px;opacity:.9}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{background:var(--card);border-radius:12px;padding:6px 0;text-align:center;box-shadow:0 2px 8px var(--shade);font-size:11px;color:var(--muted)}
.day b{display:block;font:800 16px var(--f-brand);color:var(--navy)}
.day i{display:block;height:6px;margin-top:2px;font-style:normal}
.day i::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.day.ex i::before{background:var(--pink)}
.day.today{background:var(--navy);color:var(--pink-sub)} .day.today b{color:var(--white)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:0 3px 12px var(--shade)}
.stat b{display:block;font:800 26px/1.1 var(--f-brand);color:var(--navy);font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--muted);font-weight:700}
.stat.ok b{color:var(--ok)} .stat.pink b{color:var(--pink2)} .stat.gold b{color:#d39410}
.exam{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:0 2px 10px var(--shade)}
.exam .d{flex:none;width:52px;text-align:center;border-radius:12px;background:var(--pink-soft);color:var(--pink2);padding:4px 0;font:800 20px/1.1 var(--f-brand)}
.exam .d small{display:block;font:700 10px var(--f-ar)}
.exam .t{flex:1;min-width:0}
.exam .t b{display:block;font:800 14px var(--f-ar);color:var(--navy)}
.exam .t span{font:600 12px var(--f-en);color:var(--muted)}
.task{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:0 2px 10px var(--shade);width:100%;border:0;text-align:right}
.task .ck{flex:none;width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;color:var(--white);font-size:14px}
.task.done .ck{background:var(--ok);border-color:var(--ok)}
.task.done .tt{text-decoration:line-through;color:var(--muted)}
.task .tt{flex:1;font-weight:700;font-size:13.5px;color:var(--navy)}
.task.late{box-shadow:inset 0 0 0 1.5px var(--pink-soft),0 2px 10px var(--shade)}
.daysel{display:flex;flex-wrap:wrap;gap:6px}
.daysel button{border:1.5px solid var(--line);background:var(--white);border-radius:99px;padding:4px 12px;font-weight:700;font-size:13px;color:var(--muted)}
.daysel button.on{background:var(--navy);border-color:var(--navy);color:var(--white)}

/* notifications */
.nt{display:flex;gap:12px;background:var(--card);border-radius:16px;padding:12px;box-shadow:0 2px 10px var(--shade)}
.nt .e{flex:none;width:42px;height:42px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-size:20px}
.nt b{display:block;font:800 13.5px/1.5 var(--f-ar);color:var(--navy)}
.nt p{margin:0;font-size:13px;color:var(--ink);line-height:1.7}
.nt small{font-size:11px;color:var(--muted)}
.nt.unread{box-shadow:inset -4px 0 0 var(--pink),0 2px 10px var(--shade)}

/* account */
.prof{display:flex;align-items:center;gap:12px}
.prof .av{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:var(--white);display:grid;place-items:center;font:800 22px var(--f-ar);flex:none}
.prof b{display:block;font:800 17px var(--f-ar);color:var(--navy)}
.prof small{display:block;color:var(--muted);font:600 12px var(--f-en);direction:ltr;text-align:right}
.menu{background:var(--card);border-radius:18px;box-shadow:0 4px 18px var(--shade);overflow:hidden}
.menu button,.menu .mi{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:12px 14px;text-align:right;border-bottom:1px solid var(--line);font-weight:700;color:var(--navy)}
.menu > :last-child{border-bottom:0}
.menu .e{width:34px;height:34px;border-radius:11px;background:var(--soft);display:grid;place-items:center;flex:none}
.menu .tx{flex:1;min-width:0}
.menu .tx small{display:block;font-weight:600;font-size:11.5px;color:var(--muted)}
.menu .go{color:var(--pink);font-weight:800}
.ybtns{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 12px}
.ybtns button{border:1.5px solid var(--line);background:var(--white);border-radius:10px;padding:4px 10px;font-weight:700;font-size:12.5px;color:var(--navy)}
.ybtns button.on{background:var(--navy);color:var(--white);border-color:var(--navy)}
.note{background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:0 2px 10px var(--shade);display:flex;gap:10px;align-items:flex-start}
.note p{margin:0;flex:1;font-size:14px;line-height:1.8}
.note small{display:block;color:var(--muted);font-size:11px}
.note button{border:0;background:transparent;color:var(--muted);font-size:16px}

/* tab bar */
#tabbar{display:flex;background:var(--white);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -4px 16px rgba(13,27,107,.06)}
#tabbar button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:1px;font:700 11px var(--f-ar);color:var(--muted);padding:4px 0;position:relative}
#tabbar svg{width:22px;height:22px}
#tabbar button.on{color:var(--navy)}
#tabbar button.on::before{content:'';position:absolute;top:-7px;width:26px;height:4px;border-radius:0 0 6px 6px;background:var(--pink)}
#tabbar .badge{position:absolute;top:0;left:calc(50% - 18px);min-width:16px;height:16px;border-radius:9px;background:var(--pink);color:var(--white);font:800 10px/16px var(--f-brand)}

/* sheet & toast */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:60;opacity:0;transition:opacity .25s}
.scrim.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:var(--bg);border-radius:24px 24px 0 0;z-index:61;padding:8px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.sheet.on{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:#c5d0ee;margin:4px auto 12px}
.sheet h3{margin:0;font:800 18px/1.4 var(--f-ar);color:var(--navy)}
.sheet .x{position:absolute;top:12px;left:14px;border:0;background:var(--soft);width:32px;height:32px;border-radius:10px;color:var(--navy);font-weight:800}
.pay{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:0 2px 10px var(--shade)}
.pay .e{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 13px var(--f-brand);color:var(--white);flex:none}
.pay .t{flex:1;min-width:0}
.pay b{display:block;font-weight:800;color:var(--navy);font-size:14px}
.pay span{font:700 14px var(--f-en);direction:ltr;unicode-bidi:isolate;color:var(--ink);letter-spacing:.5px}
.pay button{border:0;background:var(--soft);color:var(--navy);border-radius:10px;padding:4px 10px;font-weight:700;font-size:12px}
.upsell{background:linear-gradient(135deg,#fff,#fff0f6);border:1.5px solid var(--pink-soft);border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:700;color:var(--navy)}
.upsell button{border:0;background:transparent;color:var(--pink2);font-weight:800;padding:0;margin-top:2px}
.waprev{background:#e7ffdb;border-radius:14px 14px 4px 14px;padding:10px 12px;font:600 13.5px/1.8 var(--f-ar);white-space:pre-line;color:#111b21;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.okbox{background:var(--ok-bg);color:var(--ok-tx);border-radius:12px;padding:9px 12px;font-weight:700;font-size:13px}
.warnbox{background:var(--gold-bg);color:var(--gold-tx);border-radius:12px;padding:9px 12px;font-weight:700;font-size:13px}
.price-big{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.price-big b{font:800 30px var(--f-brand);color:var(--pink2)}
.price-big s{font:700 16px var(--f-brand);color:var(--muted)}
#toast{position:absolute;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;justify-content:center;pointer-events:none}
#toast div{background:var(--navy);color:var(--white);border-radius:14px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(13,27,107,.35);transform:translateY(20px);opacity:0;transition:.25s;text-align:center}
#toast div.on{transform:none;opacity:1}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(900px) rotate(540deg);opacity:.2}}

/* ---------- website additions (platform site for iPhone / laptop) ---------- */
html,body{height:100dvh}
.device{height:100dvh}
@media (min-width:600px){.device{height:min(860px,calc(100dvh - 40px))}}
.bn.bimg{padding:0;background:#dfe7fb center/cover no-repeat}
.bn.bimg::after{display:none}
.loading{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.loading i{display:block;height:84px;border-radius:18px;background:linear-gradient(90deg,#e8eefc 0,#f5f8ff 40%,#e8eefc 80%);background-size:300% 100%;animation:shine 1.2s linear infinite}
@keyframes shine{from{background-position:100% 0}to{background-position:-50% 0}}
.err{background:var(--err-bg);color:var(--err-tx);border-radius:12px;padding:9px 12px;font-weight:700;font-size:13px;margin-top:10px}
.linkline{text-align:center;margin-top:12px;font-size:13px;color:var(--muted)}
.linkline button{border:0;background:transparent;color:var(--blue);font-weight:800;padding:0 2px}
.wans{direction:ltr;text-align:left;white-space:pre-line;background:var(--ok-bg);color:var(--ok-tx);border-radius:12px;margin:0 12px 12px;padding:10px 12px;font:600 14.5px/1.6 var(--f-en)}
.selfmark{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
.selfmark .btn{margin:0;font-size:14px;padding:10px}
.install{display:flex;gap:10px;align-items:center;background:var(--en-bg);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:12px}
.install .x2{margin-inline-start:auto;border:0;background:transparent;color:var(--muted);font-size:16px}
.pay .e{font-size:16px}
.btn[disabled]{opacity:.55}