/* ===== منصة مدارج العلم — رحلة القراءة =====
   الألوان من الشعار (تيل #259390 + ذهبي #C9A227) ولغة الشكل من الكتاب: إطار مزدوج، شارات مرقّمة، نجوم ثمانية، زوايا مدوّرة.
   البادئات: s- للصفحات، gp- لتشغيل الألعاب، ga- لواجهة اختيار الألعاب، j- لخريطة الرحلة. */
*{box-sizing:border-box}
:root{
  --teal:#259390; --teal-d:#17706d; --teal-dd:#0f4f4d; --teal-l:#E3F2F0; --teal-xl:#F2FAF9;
  --gold:#C9A227; --sun:#F5B82E; --sun-l:#FFF3CC; --coral:#E8583A; --ok:#2e9d57; --bad:#d64545;
  --paper:#FBF8EF; --card:#fff; --ink:#12302f; --mute:#5f7573; --line:#E6E9E1;
  --sh1:0 1px 2px rgba(18,48,47,.06),0 4px 14px rgba(18,48,47,.06);
  --sh2:0 2px 4px rgba(18,48,47,.06),0 12px 32px rgba(18,48,47,.1);
  --r:22px;
  --s-ui:'Tajawal','Segoe UI',Tahoma,system-ui,sans-serif;
  --s-head:'Cairo','Tajawal','Segoe UI',sans-serif;
  color-scheme:light;
}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font:16px/1.65 var(--s-ui);color:var(--ink);min-height:100vh;direction:rtl;-webkit-tap-highlight-color:transparent;overflow-x:hidden;
  background:
   radial-gradient(900px 500px at 100% -10%,rgba(37,147,144,.14),transparent 60%),
   radial-gradient(700px 420px at -10% 30%,rgba(245,184,46,.13),transparent 60%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 8l6 11 12-3-4 12 12 6-12 6 4 12-12-3-6 11-6-11-12 3 4-12-12-6 12-6-4-12 12 3z' fill='none' stroke='%23259390' stroke-opacity='.07'/%3E%3C/svg%3E"),
   var(--paper);
  padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media(min-width:820px){body{padding-bottom:0}}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
h1,h2,h3,h4{font-family:var(--s-head);font-weight:700;line-height:1.25;margin:0;text-wrap:balance}
.ar,.ar-t{font-family:var(--f-read)}
.s-main{width:100%;max-width:1120px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));animation:s-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes s-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.s-loading{text-align:center;color:var(--mute);padding:80px 0}
.s-empty{background:var(--card);border-radius:var(--r);padding:26px;text-align:center;color:var(--mute);box-shadow:var(--sh1);margin-top:14px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- الرأس والتنقّل ---------- */
.s-top{position:sticky;top:0;z-index:40;background:rgba(251,248,239,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(18,48,47,.07);padding-top:env(safe-area-inset-top)}
.s-top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
.s-brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;min-width:0}
.s-brand img{height:42px;width:auto;flex:none}
.s-brand b{display:block;font:700 19px/1.1 var(--s-head);color:var(--teal-d);white-space:nowrap}
.s-brand small{display:block;font-size:12px;color:var(--gold);font-weight:600;white-space:nowrap}
.s-nav{display:none;gap:4px;background:rgba(37,147,144,.08);padding:4px;border-radius:999px}
.s-nav a{padding:7px 18px;border-radius:999px;font-weight:600;font-size:15px;color:var(--teal-dd);transition:background .2s,color .2s}
.s-nav a.on{background:var(--teal);color:#fff;box-shadow:0 3px 10px rgba(37,147,144,.35)}
.s-nav a:not(.on):hover{background:rgba(37,147,144,.12)}
@media(min-width:820px){.s-nav{display:flex}}
.s-ibtn{border:0;background:transparent;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--teal-d)}
.s-ibtn:hover{background:rgba(37,147,144,.1)}
.s-ibtn svg{width:22px;height:22px}
.s-me{display:flex;align-items:center;gap:8px;border:0;background:#fff;border-radius:999px;padding:4px 12px 4px 4px;box-shadow:var(--sh1);font-weight:700;font-size:14px}
.s-me .av{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--teal-l)}
.s-me .av svg{position:absolute;inset:-3px;width:44px;height:44px;transform:rotate(-90deg)}
.s-me .av circle{fill:none;stroke-width:3}
.s-me .lv{font-size:12px;line-height:1.2;color:var(--mute);font-weight:600}
.s-me .lv b{display:block;color:var(--ink);font-size:13.5px}
.s-me .fl{color:var(--coral);font-size:14px}
@media(max-width:520px){.s-me .lv{display:none}.s-me{padding:3px}}
/* شريط سفلي للهاتف */
.s-tabs{position:fixed;inset:auto 0 0 0;z-index:45;display:flex;justify-content:space-around;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(18,48,47,.08);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(18,48,47,.07)}
.s-tabs a{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 4px;border-radius:16px;color:var(--mute);font-size:11.5px;font-weight:700;transition:color .2s}
.s-tabs a svg{width:25px;height:25px;transition:transform .25s}
.s-tabs a.on{color:var(--teal)}
.s-tabs a.on svg{transform:translateY(-3px) scale(1.12)}
.s-tabs a.on::after{content:"";width:18px;height:4px;border-radius:4px;background:var(--gold);margin-top:1px}
@media(min-width:820px){.s-tabs{display:none}}
body.teacher .s-top,body.teacher .s-tabs,body.teacher .s-foot{display:none}
body.teacher{padding-bottom:0}

/* ---------- أزرار ---------- */
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:12px 22px;font-weight:700;background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-dd);transition:transform .08s,box-shadow .08s,filter .2s;white-space:nowrap}
.s-btn:hover{filter:brightness(1.06)}
.s-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--teal-dd)}
.s-btn.gold{background:var(--sun);color:#40300a;box-shadow:0 4px 0 #BB8A0F}.s-btn.gold:active{box-shadow:0 1px 0 #BB8A0F}
.s-btn.coral{background:var(--coral);box-shadow:0 4px 0 #A9361F}.s-btn.coral:active{box-shadow:0 1px 0 #A9361F}
.s-btn.ghost{background:#fff;color:var(--teal-d);box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line)}
.s-btn.white{background:#fff;color:var(--teal-dd);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.s-btn.lg{padding:16px 32px;font-size:18px;border-radius:20px}
.s-btn.sm{padding:6px 14px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--teal-dd)}
.s-btn.sm.gold{box-shadow:0 3px 0 #BB8A0F}.s-btn.sm.ghost{box-shadow:0 0 0 2px var(--line) inset}
.s-btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- الرئيسية ---------- */
.s-hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:10px;align-items:center;min-height:430px;padding:30px 12px 10px;overflow:visible}
.s-hero h1{font-size:clamp(40px,7.4vw,76px);color:var(--teal-d);letter-spacing:-.5px;line-height:1.05}
.s-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--gold),#E9C04A 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-hero .sub{font-size:clamp(16px,2.4vw,20px);color:var(--mute);max-width:30em;margin:12px 0 22px}
.s-doors{display:flex;gap:12px;flex-wrap:wrap}
.s-art{position:relative;height:100%;min-height:300px;display:grid;place-items:center}
.s-art .halo{position:absolute;width:min(78vw,380px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,rgba(37,147,144,.18),rgba(201,162,39,.2),rgba(37,147,144,.18));filter:blur(2px);animation:s-spin 28s linear infinite}
.s-art .halo::after{content:"";position:absolute;inset:12%;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px rgba(37,147,144,.15)}
@keyframes s-spin{to{transform:rotate(360deg)}}
.s-art .mark{position:relative;width:min(62vw,300px);filter:drop-shadow(0 18px 28px rgba(15,79,77,.25));animation:s-bob 5s ease-in-out infinite}
@keyframes s-bob{50%{transform:translateY(-10px)}}
.s-art .mascot{position:absolute;bottom:-4px;inset-inline-start:2%;width:92px}
.fl-l{position:absolute;font-family:var(--f-read);font-size:clamp(30px,5vw,54px);color:var(--teal);opacity:.28;animation:s-fl var(--d,9s) ease-in-out infinite;pointer-events:none;user-select:none;z-index:0}
.fl-l.g{color:var(--gold);opacity:.4}
@keyframes s-fl{0%,100%{transform:translate(0,0) rotate(var(--r,-8deg))}50%{transform:translate(var(--x,10px),-22px) rotate(calc(var(--r,-8deg)*-1))}}
@media(max-width:760px){.s-hero{grid-template-columns:1fr;min-height:0;text-align:center;padding-top:14px}.s-doors{justify-content:center}.s-hero .sub{margin-inline:auto}.s-art{order:-1;min-height:230px}.s-art .mark{width:min(54vw,210px)}.s-art .halo{width:min(64vw,270px)}}
.s-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 4px}
.s-stat{background:#fff;border-radius:18px;padding:12px 8px;text-align:center;box-shadow:var(--sh1)}
.s-stat b{display:block;font:700 28px/1.1 var(--s-head);color:var(--teal-d)}.s-stat small{color:var(--mute);font-size:13px}
@media(max-width:520px){.s-stat b{font-size:22px}.s-stat small{font-size:11.5px}}
.s-h{display:flex;align-items:baseline;gap:10px;margin:34px 0 14px}
.s-h h2{font-size:clamp(22px,4vw,30px);color:var(--teal-dd)}.s-h small{color:var(--mute)}.s-h .more{margin-inline-start:auto;color:var(--teal);font-weight:700;font-size:14px}
.s-cont{display:flex;align-items:center;gap:14px;margin-top:14px;background:linear-gradient(120deg,#fff,var(--teal-xl));border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh2);border:2px solid rgba(37,147,144,.18)}
.s-cont .ring{flex:none;width:58px;height:58px}
.s-cont div.t{flex:1;min-width:0}.s-cont small{display:block;color:var(--mute)}.s-cont b{display:block;font:700 19px var(--f-read);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring{position:relative;display:grid;place-items:center;font-weight:800;color:var(--teal-d);font-size:15px}.ring svg{position:absolute;inset:0}
.s-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.s-step{position:relative;background:#fff;border-radius:var(--r);padding:20px 18px 18px;box-shadow:var(--sh1);overflow:hidden}
.s-step .n{position:absolute;top:10px;inset-inline-end:14px;font:800 54px/1 var(--s-head);color:var(--teal);opacity:.1}
.s-step .ic{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin-bottom:10px;background:var(--c1,var(--teal-l))}
.s-step h3{font-size:19px}.s-step p{margin:4px 0 0;color:var(--mute);font-size:14.5px}
@media(max-width:720px){.s-steps{grid-template-columns:1fr}.s-step{display:grid;grid-template-columns:auto 1fr;gap:0 14px}.s-step .ic{grid-row:span 2;margin:0}}
.s-lvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.s-lv{--lc:var(--teal);position:relative;display:flex;gap:16px;align-items:center;background:#fff;border-radius:26px;padding:16px;box-shadow:var(--sh2);transition:transform .25s,box-shadow .25s;overflow:hidden;isolation:isolate}
.s-lv::before{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:var(--lc);opacity:.1;z-index:-1}
.s-lv:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 22px 44px rgba(18,48,47,.16)}
.s-lv h3{font-size:24px;color:var(--lc)}.s-lv p{margin:2px 0 10px;color:var(--mute);font-size:14px}
.s-lv .bar{height:9px;border-radius:9px;background:rgba(0,0,0,.07);overflow:hidden;margin-bottom:12px}.s-lv .bar i{display:block;height:100%;width:0;border-radius:9px;background:var(--lc);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.s-lv .links{display:flex;gap:8px;flex-wrap:wrap}
.s-lv .s-btn{background:var(--lc);box-shadow:0 3px 0 color-mix(in srgb,var(--lc) 60%,#000)}
.s-lv .s-btn.gold{background:var(--sun);box-shadow:0 3px 0 #BB8A0F}
.s-thumb{flex:none;width:96px;height:136px;border-radius:7px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.3);position:relative;background:#fff;transform:perspective(500px) rotateY(10deg);transition:transform .3s}
.s-lv:hover .s-thumb{transform:perspective(500px) rotateY(0) scale(1.04)}
.s-thumb .book{zoom:.121;pointer-events:none;width:794px}
.s-thumb.lg{width:150px;height:212px}.s-thumb.lg .book{zoom:.189}
.s-daily{position:relative;display:flex;align-items:center;gap:18px;padding:22px;border-radius:28px;color:#fff;background:linear-gradient(130deg,var(--teal) 0%,var(--teal-dd) 100%);box-shadow:var(--sh2);overflow:hidden}
.s-daily::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 6l5 9 10-2-3 10 10 5-10 5 3 10-10-2-5 9-5-9-10 2 3-10-10-5 10-5-3-10 10 2z' fill='none' stroke='%23fff' stroke-opacity='.12'/%3E%3C/svg%3E")}
.s-daily>*{position:relative}.s-daily .gi{font-size:56px;width:90px;height:90px;border-radius:26px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;animation:s-wob 3s ease-in-out infinite}
@keyframes s-wob{50%{transform:rotate(-6deg) scale(1.06)}}
.s-daily h3{font-size:24px}.s-daily p{margin:2px 0 12px;opacity:.88}
.s-rail{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}.s-rail::-webkit-scrollbar{display:none}
.s-chipg{flex:none;scroll-snap-align:start;width:128px;border-radius:22px;padding:14px 10px;text-align:center;color:#fff;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));box-shadow:var(--sh1);transition:transform .2s}
.s-chipg:hover{transform:translateY(-4px) rotate(-1.5deg)}.s-chipg i{display:block;font-style:normal;font-size:40px;line-height:1.2}.s-chipg b{display:block;font:700 15px var(--s-head);margin-top:4px}
.s-foot{margin-top:30px;padding:26px 16px calc(26px + env(safe-area-inset-bottom));text-align:center;color:var(--mute);font-size:14px;background:linear-gradient(#fff0,#fff8)}
.s-foot img{height:70px;display:block;margin:0 auto 8px}.s-foot b{color:var(--teal-d);display:block;font:700 18px var(--s-head)}.s-foot .ln{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}

/* ---------- خريطة الرحلة ---------- */
.j-banner{position:relative;display:flex;gap:18px;align-items:center;padding:20px;border-radius:28px;color:#fff;background:linear-gradient(140deg,var(--lc),color-mix(in srgb,var(--lc) 55%,#000));box-shadow:var(--sh2);overflow:hidden;isolation:isolate}
.j-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 90% 0,rgba(255,255,255,.25),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 6l5 9 10-2-3 10 10 5-10 5 3 10-10-2-5 9-5-9-10 2 3-10-10-5 10-5-3-10 10 2z' fill='none' stroke='%23fff' stroke-opacity='.12'/%3E%3C/svg%3E")}
.j-banner h1{font-size:clamp(26px,5vw,40px)}.j-banner p{margin:2px 0 12px;opacity:.9}
.j-prog{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:700;font-size:14px}.j-prog .bar{flex:1;max-width:260px;height:10px;border-radius:10px;background:rgba(255,255,255,.3);overflow:hidden}.j-prog .bar i{display:block;height:100%;background:#fff;border-radius:10px;transition:width 1s}
.j-banner .acts{display:flex;gap:8px;flex-wrap:wrap}
.j-map{position:relative;margin-top:8px}
.j-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.j-svg path{fill:none;stroke:color-mix(in srgb,var(--lc) 35%,#fff);stroke-width:8;stroke-linecap:round;stroke-dasharray:2 16}
.j-svg path.done{stroke:var(--lc);stroke-dasharray:none;opacity:.55}
.j-station{position:relative;z-index:1;margin:34px auto 6px;max-width:560px;text-align:center}
.j-station .tag{display:inline-block;background:var(--lc);color:#fff;font:700 13px var(--s-ui);padding:3px 16px;border-radius:999px;margin-bottom:6px;box-shadow:0 3px 0 color-mix(in srgb,var(--lc) 60%,#000)}
.j-station h2{font:700 clamp(22px,4vw,30px)/1.5 var(--f-read);color:var(--ink)}
.j-station .meta{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;color:var(--mute);font-size:13.5px}
.j-station.teacher .tag{background:#8a6d1c}
.j-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;margin:14px 0;translate:var(--dx,0) 0}
.j-node{position:relative;width:74px;height:74px;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:var(--lc);font:800 25px var(--s-head);box-shadow:0 6px 0 rgba(0,0,0,.1),0 0 0 5px color-mix(in srgb,var(--lc) 25%,#fff) inset;transition:transform .2s}
.j-node:hover{transform:scale(1.08)}
.j-node.done{background:var(--lc);color:#fff;box-shadow:0 6px 0 color-mix(in srgb,var(--lc) 55%,#000)}
.j-node.cur{background:var(--sun);color:#40300a;box-shadow:0 6px 0 #BB8A0F;animation:j-pulse 1.8s ease-in-out infinite}
@keyframes j-pulse{0%,100%{box-shadow:0 6px 0 #BB8A0F,0 0 0 0 rgba(245,184,46,.55)}50%{box-shadow:0 6px 0 #BB8A0F,0 0 0 16px rgba(245,184,46,0)}}
.j-node .st{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);display:flex;gap:1px;font-size:13px;background:#fff;border-radius:999px;padding:0 6px;box-shadow:var(--sh1);white-space:nowrap}
.j-node .ck{position:absolute;top:-4px;inset-inline-end:-4px;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;font-size:14px;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.j-lab{position:absolute;top:50%;transform:translateY(-50%);width:max-content;max-width:min(40vw,300px);font:600 19px/1.5 var(--f-read);color:var(--ink);cursor:pointer}
.j-lab small{display:block;font:600 12px var(--s-ui);color:var(--mute)}
.j-row .box{position:relative}
.j-row .box .j-lab{left:auto;right:auto}
@media(max-width:560px){.j-node{width:64px;height:64px;font-size:22px}.j-lab{font-size:17px;max-width:42vw}}

/* ---------- نافذة سفلية ---------- */
.s-sheet-bd{position:fixed;inset:0;z-index:70;background:rgba(10,40,39,.5);backdrop-filter:blur(3px);animation:s-fade .2s}
@keyframes s-fade{from{opacity:0}}
.s-sheet{position:fixed;z-index:71;inset:auto 0 0 0;margin:0 auto;max-width:560px;background:#fff;border-radius:28px 28px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.25);animation:s-up .3s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow:auto}
@keyframes s-up{from{transform:translateY(100%)}}
@media(min-width:820px){.s-sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);border-radius:28px;animation:s-pop .28s cubic-bezier(.2,.9,.3,1.2);width:560px;padding-bottom:22px}@keyframes s-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}}
.s-sheet .grab{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 12px}
.s-sheet h3{font:700 26px/1.5 var(--f-read);color:var(--lc,var(--teal-d))}.s-sheet .lab{color:var(--mute);font-size:14px}
.s-sheet .acts{display:grid;gap:10px;margin-top:16px}
.s-sheet .mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.s-sheet .mini a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:16px;background:var(--teal-xl);font-size:12.5px;font-weight:700;text-align:center;line-height:1.3;transition:transform .15s}
.s-sheet .mini a:hover{transform:translateY(-3px);background:var(--sun-l)}.s-sheet .mini i{font-style:normal;font-size:26px}
.s-sheet .x{position:absolute;top:12px;inset-inline-start:14px}

/* ---------- الدرس ---------- */
.s-lbar{position:sticky;top:58px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:18px;padding:8px 12px;box-shadow:var(--sh1);margin-bottom:14px;overflow:hidden}
.s-lbar .t{flex:1;min-width:140px;line-height:1.3}.s-lbar .t small{display:block;color:var(--mute);font-size:12.5px}.s-lbar .t b{font:700 19px var(--f-read)}
.s-lbar .grp{display:flex;gap:6px;flex-wrap:wrap}
.s-lbar .rp{position:absolute;bottom:0;inset-inline:0;height:4px;background:transparent}.s-lbar .rp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--sun))}
.s-pages{display:block;overflow-x:hidden}.s-pages #pages{margin:0 auto}
#pages{display:flex;flex-direction:column;align-items:center;gap:18px;zoom:var(--z,.75)}
.s-finish{margin:22px 0;text-align:center;background:linear-gradient(150deg,#fff,var(--teal-xl));border-radius:28px;padding:26px 18px;box-shadow:var(--sh2);border:2px dashed rgba(37,147,144,.3)}
.s-finish .mascot{width:96px;margin:-62px auto 4px}.s-finish h3{font-size:26px;color:var(--teal-dd)}.s-finish p{color:var(--mute);margin:4px 0 16px}
.s-pn{display:flex;justify-content:space-between;gap:10px;margin:16px 0}
.s-games{margin-top:14px;background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh1)}
.s-games h3{font-size:20px;margin-bottom:10px}
.s-chips{display:flex;gap:8px;flex-wrap:wrap}
.s-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--c,var(--sun-l));color:#fff;font-weight:700;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.15);transition:transform .15s}
.s-chip:hover{transform:translateY(-3px)}
body.teacher .s-main{max-width:none;padding:0}body.teacher .s-lbar,body.teacher .s-games,body.teacher .s-pn,body.teacher .s-finish{display:none}
.s-exit{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:14px;z-index:60}

/* ---------- واجهة اختيار الألعاب ---------- */
.ga-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ga-head .mascot{width:76px;flex:none}.ga-head h1{font-size:clamp(28px,5vw,40px);color:var(--teal-dd)}.ga-head p{margin:0;color:var(--mute)}
.ga-scope{display:flex;align-items:center;gap:10px;background:#fff;border-radius:20px;padding:10px 12px 10px 16px;box-shadow:var(--sh1);flex-wrap:wrap}
.ga-scope .path{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700}.ga-scope .path span{display:inline-flex;align-items:center;gap:6px}
.ga-scope .path .pill{background:var(--lc,var(--teal));color:#fff;padding:2px 12px;border-radius:999px;font-size:14px}
.ga-scope .path .ar-t{font-size:17px}
.ga-tags{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}.ga-tags::-webkit-scrollbar{display:none}
.ga-tags button{flex:none;border:0;background:#fff;border-radius:999px;padding:7px 16px;font-weight:700;font-size:14px;box-shadow:var(--sh1);color:var(--mute)}
.ga-tags button.on{background:var(--teal);color:#fff}
.ga-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px;margin-top:14px}
.ga-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--sh1);transition:transform .25s,box-shadow .25s}
.ga-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--sh2)}
.ga-card .top{height:104px;display:grid;place-items:center;font-size:54px;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 62%,#000));position:relative;overflow:hidden}
.ga-card .top::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);inset-inline-end:-30px;top:-50px}
.ga-card .top i{font-style:normal;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));transition:transform .3s}.ga-card:hover .top i{transform:scale(1.18) rotate(-8deg)}
.ga-card .tg{position:absolute;top:10px;inset-inline-start:10px;background:rgba(255,255,255,.25);color:#fff;font-size:12px;font-weight:700;padding:1px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.ga-card .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.ga-card b{font:700 18px var(--s-head)}.ga-card p{margin:0;color:var(--mute);font-size:14px;flex:1}
.ga-card .ft{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--teal-d);font-weight:700}
.ga-card .stars{letter-spacing:2px;font-size:15px;color:var(--sun)}.ga-card .stars s{text-decoration:none;color:#d9ded8}
.ga-card.off{opacity:.45;filter:grayscale(.6);pointer-events:none}

/* ---------- تشغيل اللعبة ---------- */
.gp-wrap{max-width:780px;margin:0 auto}
.gp-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}.gp-top h2{flex:1;font-size:22px}
.gp-start,.gp-end{position:relative;background:#fff;border-radius:30px;padding:0 22px 26px;box-shadow:var(--sh2);text-align:center;overflow:hidden}
.gp-start .hero,.gp-end .hero{margin:0 -22px 16px;padding:26px 18px 54px;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));color:#fff;position:relative}
.gp-start .hero::after,.gp-end .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;background:#fff;border-radius:30px 30px 0 0}
.gp-start .hero i{display:block;font-style:normal;font-size:70px;line-height:1.1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));animation:s-wob 3s ease-in-out infinite}
.gp-start h2{font-size:30px;margin:4px 0}.gp-start .hero p{margin:0;opacity:.92}
.gp-start .scope{color:var(--mute);margin:-6px 0 14px;font-size:15px}
.gp-diff{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 20px}
.gp-diff button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:10px 20px;font-weight:700;transition:all .15s}
.gp-diff button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 70%,#000);transform:translateY(-3px);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 30%,#fff)}
.gp{position:relative;background:#fff;border-radius:28px;padding:12px 14px 16px;box-shadow:var(--sh2);min-height:440px;overflow:hidden}
.gp.shake{animation:g-shake .35s}
@keyframes g-shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.gp-hud{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gp-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.gp-bar{height:12px;border-radius:12px;background:#ecefe9;overflow:hidden}.gp-bar i{display:block;height:100%;width:0;border-radius:12px;background:linear-gradient(90deg,var(--teal),var(--sun));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.gp-r{display:flex;gap:5px}
.gp-chip{padding:2px 11px;border-radius:999px;background:var(--teal-l);color:var(--teal-d);font-weight:800;font-size:13.5px;white-space:nowrap}
.gp-chip.ok{background:#dff3e5;color:#1f7a41}.gp-chip.no{background:#fbe1e1;color:#a82d2d}.gp-chip.fire{background:#ffe9d6;color:#c2410c;animation:g-pulse 1s infinite}
.gp-mid .gp-chip{align-self:flex-start;background:none;padding:0;color:var(--mute);font-size:13px}
.gp-area{display:flex;flex-direction:column;gap:6px}
.gp-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px;text-align:center}
.gp-note{margin:0;color:var(--mute);text-align:center;font-size:15px}
.gp-box{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:min(60vw,300px);padding:16px 28px;border-radius:26px;background:linear-gradient(#fff,var(--teal-xl));border:3px solid color-mix(in srgb,var(--teal) 30%,#fff);box-shadow:0 6px 0 color-mix(in srgb,var(--teal) 22%,#fff),0 18px 30px rgba(18,48,47,.08);color:var(--ink)}
.gp-box.lg{min-width:min(72vw,430px)}.gp-box.sm{min-width:0;padding:4px 18px;border-radius:16px;box-shadow:0 3px 0 color-mix(in srgb,var(--teal) 22%,#fff)}
.gp-box.wrapline{flex-wrap:wrap;gap:6px 8px}
.gp-box.win{border-color:var(--ok);background:#effaf2;animation:g-bounce .5s}
@keyframes g-bounce{40%{transform:scale(1.07)}}
.gp-img{width:86px;height:86px;object-fit:contain;margin-inline-end:10px}.gp-img.big{width:min(46vw,230px);height:min(46vw,230px);margin:0}
.gp-flipin{animation:g-flip .5s cubic-bezier(.2,.8,.2,1)}@keyframes g-flip{from{transform:perspective(700px) rotateY(-80deg);opacity:0}}
.gp-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.gp-btn{border:0;border-radius:18px;padding:14px 24px;font-weight:800;font-size:17px;color:#fff;background:var(--teal);box-shadow:0 5px 0 var(--teal-dd);transition:transform .08s}
.gp-btn.gold{background:var(--sun);color:#40300a;box-shadow:0 5px 0 #BB8A0F}.gp-btn:active{transform:translateY(4px);box-shadow:none}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));gap:12px;margin-top:8px}
.gp-grid.c1{grid-template-columns:1fr}.gp-grid.c2{grid-template-columns:repeat(2,1fr)}.gp-grid.c3{grid-template-columns:repeat(3,1fr)}.gp-grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:480px){.gp-grid.c4{grid-template-columns:repeat(3,1fr)}}
.gp-ans{border:3px solid var(--line);background:#fff;border-radius:20px;padding:12px 8px;min-height:78px;display:grid;place-items:center;box-shadow:0 5px 0 var(--line);font-size:30px;color:var(--ink);transition:transform .1s,box-shadow .1s,background .2s;animation:g-in .4s both}
.gp-ans:nth-child(2){animation-delay:.05s}.gp-ans:nth-child(3){animation-delay:.1s}.gp-ans:nth-child(4){animation-delay:.15s}.gp-ans:nth-child(5){animation-delay:.2s}
@keyframes g-in{from{opacity:0;transform:translateY(16px) scale(.94)}}
.gp-ans:hover{border-color:var(--teal)}
.gp-ans:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.gp-ans .ar{font-size:1.15em}
.gp-ans.correct,.gp-fall.correct{border-color:var(--ok)!important;background:#e2f6e8!important;box-shadow:0 5px 0 #8ccaa2!important;animation:g-bounce .45s}
.gp-ans.wrong,.gp-fall.wrong{border-color:var(--bad)!important;background:#fde4e4!important;box-shadow:0 5px 0 #e1a2a2!important}
.gp-ans.hint{border-color:var(--sun);animation:g-pulse .8s infinite}
.gp-ans.used{opacity:.28;pointer-events:none;transform:scale(.94)}
@keyframes g-pulse{50%{transform:scale(1.06)}}
.gp-name{font:700 22px var(--s-head)}.gp-name.big{font-size:clamp(30px,7vw,48px);color:var(--teal-dd)}
.gp-hint{border:0;background:var(--sun-l);border-radius:999px;padding:5px 16px;font-weight:700;color:#7a5600}.gp-hint[disabled]{opacity:.4}
.gp-slot{display:inline-block;min-width:1.2em;text-align:center;border-radius:14px;background:var(--sun-l);margin:0 4px;padding:0 10px;font-family:var(--f-read);font-size:clamp(40px,9vw,84px);line-height:1.4;border:3px dashed var(--sun)}
.gp-slot.wide{font-size:clamp(26px,5vw,44px);padding:0 22px}.gp-slot.filled{background:#e2f6e8;border:3px solid var(--ok);animation:g-bounce .45s}
.gp-target-card{background:#f3efe2;border-radius:20px;padding:8px 24px;text-align:center}.gp-target-card small{display:block;color:var(--mute);font-size:12.5px}
.gp-placed{min-width:min(80%,380px)}
.gp-prog{display:flex;gap:5px}.gp-prog i{width:24px;height:8px;border-radius:5px;background:var(--line);transition:background .2s}.gp-prog i.on{background:var(--ok)}
.gp-target{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 8px}
.gp-arena{position:relative;height:min(60vh,440px);min-height:340px;border-radius:22px;overflow:hidden;background:linear-gradient(#dff0ee,#fff 75%);border:2px solid var(--line)}
.gp-arena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,var(--sun) 0 14px,transparent 14px 26px);opacity:.75}
.gp-arena.up{background:linear-gradient(#fff,#d8ecf8)}.gp-arena.up::after{display:none}
.gp-fall{position:absolute;top:-90px;border:3px solid color-mix(in srgb,var(--teal) 40%,#fff);background:#fff;border-radius:18px;padding:6px 4px;box-shadow:0 5px 0 color-mix(in srgb,var(--teal) 25%,#fff);animation:g-fall linear forwards;color:var(--ink)}
.gp-fall.bal{top:auto;bottom:-120px;border:0;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;background:radial-gradient(circle at 32% 28%,#fff9,transparent 42%),var(--bc);color:#fff;box-shadow:inset -6px -10px 18px rgba(0,0,0,.18);animation-name:g-rise}
.gp-fall.bal::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:34px;background:rgba(0,0,0,.25)}
.gp-fall.bal .ar{color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.gp-fall.pop{animation:g-popb .3s forwards!important}
@keyframes g-fall{from{top:-90px}to{top:calc(100% - 74px)}}
@keyframes g-rise{from{bottom:-120px}to{bottom:calc(100% + 40px)}}
@keyframes g-popb{to{transform:scale(1.6);opacity:0}}
.gp-mem{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(30%,120px),1fr));gap:12px;margin-top:6px}
.mem{aspect-ratio:3/4;border:0;background:none;padding:0;perspective:700px}.mem .in{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,.8,.3,1);transform-style:preserve-3d}
.mem.up .in,.mem.ok .in{transform:rotateY(180deg)}
.mem .f,.mem .b{position:absolute;inset:0;border-radius:20px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mem .f{background:linear-gradient(150deg,var(--teal),var(--teal-dd));color:#fff;font:800 42px var(--s-head);box-shadow:0 6px 0 var(--teal-dd)}
.mem .b{transform:rotateY(180deg);background:#fff;border:3px solid var(--line);box-shadow:0 6px 0 var(--line)}
.mem.ok .b{border-color:var(--ok);background:#e2f6e8;box-shadow:0 6px 0 #8ccaa2}
.mem .b .gp-img{width:90%;height:70%}
.gp-end .hero .stars{font-size:54px;letter-spacing:8px;margin-top:6px}
.gp-end .hero .stars span{display:inline-block;opacity:0;transform:scale(.2) rotate(-40deg);animation:g-star .55s cubic-bezier(.2,1.4,.4,1) forwards}
.gp-end .hero .stars span.off{filter:grayscale(1) brightness(1.6);opacity:.35!important;animation:none;transform:none}
@keyframes g-star{to{opacity:1;transform:none}}
.gp-end h2{font-size:30px;margin-top:2px}.gp-end .res{color:var(--mute);margin:4px 0 12px}
.gp-end .mascot{width:92px;margin:-52px auto 0;position:relative;z-index:2}
.gp-xp{display:inline-flex;gap:8px;align-items:center;background:var(--sun-l);border-radius:999px;padding:6px 18px;font-weight:800;color:#7a5600;margin:2px 0 10px}
.gp-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.gp-badge{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--teal-xl);border-radius:18px;padding:10px 14px;font-size:13px;font-weight:700;animation:g-in .6s both}.gp-badge i{font-style:normal;font-size:34px}
.gp-lvup{background:linear-gradient(120deg,var(--gold),#E9C04A);color:#3b2a00;border-radius:18px;padding:10px 16px;font-weight:800;margin:8px 0;animation:g-bounce .7s}

/* ---------- الشخصية ---------- */
.mascot{width:80px;aspect-ratio:1;position:relative;filter:drop-shadow(0 8px 10px rgba(120,80,0,.25));animation:m-idle 3.2s ease-in-out infinite;flex:none}
.mascot.mini{width:46px;animation-duration:4s}
.mascot-svg{width:100%;height:100%;overflow:visible}
@keyframes m-idle{50%{transform:translateY(-5px) rotate(3deg)}}
.mascot[data-s=happy]{animation:m-happy .6s}.mascot[data-s=sad]{animation:m-sad .6s}
@keyframes m-happy{30%{transform:translateY(-14px) scale(1.15) rotate(-10deg)}60%{transform:translateY(0) scale(1.05) rotate(8deg)}}
@keyframes m-sad{30%{transform:translateX(-4px) rotate(-8deg)}60%{transform:translateX(4px) rotate(8deg)}}
.mascot[data-s=happy] .m-mouth{d:path("M40 56q10 14 20 0")}.mascot[data-s=sad] .m-mouth{d:path("M43 63q7-8 14 0")}
.m-eyes{transform-origin:50px 48px;animation:m-blink 5s infinite}@keyframes m-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* ---------- ملف الطالب ---------- */
.p-card{background:#fff;border-radius:28px;padding:20px;box-shadow:var(--sh2);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.p-av{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:54px;background:var(--teal-l);box-shadow:0 0 0 5px #fff,0 0 0 8px var(--gold)}
.p-card input{font:700 22px var(--s-head);border:0;border-bottom:3px dashed var(--line);background:transparent;width:100%;padding:2px 0;color:var(--ink)}.p-card input:focus{outline:0;border-color:var(--teal)}
.p-xp{margin-top:10px}.p-xp .bar{height:14px;border-radius:14px;background:#ecefe9;overflow:hidden}.p-xp .bar i{display:block;height:100%;border-radius:14px;background:linear-gradient(90deg,var(--teal),var(--sun))}.p-xp small{color:var(--mute)}
.p-avs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.p-avs button{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:24px}.p-avs button.on{border-color:var(--teal);background:var(--teal-l);transform:scale(1.12)}
@media(max-width:520px){.p-card{grid-template-columns:1fr;text-align:center;justify-items:center}}
.p-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:14px}
.p-stat{background:#fff;border-radius:20px;padding:14px;text-align:center;box-shadow:var(--sh1)}.p-stat i{font-style:normal;font-size:28px}.p-stat b{display:block;font:700 26px var(--s-head);color:var(--teal-d)}.p-stat small{color:var(--mute)}
.p-goal{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:14px 18px;box-shadow:var(--sh1);margin-top:14px}.p-goal .ring{width:62px;height:62px}
.p-bd{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.p-b{background:#fff;border-radius:20px;padding:14px 10px;text-align:center;box-shadow:var(--sh1)}.p-b i{display:block;font-style:normal;font-size:40px}.p-b b{display:block;font-size:15px}.p-b small{color:var(--mute);font-size:12.5px;line-height:1.4;display:block}
.p-b.off{opacity:.45;filter:grayscale(1)}

/* ---------- بحث ---------- */
.s-search{display:flex;gap:8px;margin-bottom:14px}.s-search input{flex:1;font:inherit;font-size:18px;padding:14px 18px;border-radius:20px;border:2px solid var(--line);background:#fff;min-width:0;box-shadow:var(--sh1)}.s-search input:focus{outline:0;border-color:var(--teal)}
.s-res{display:flex;flex-direction:column;gap:8px}.s-ri{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:var(--sh1);transition:transform .15s}.s-ri:hover{transform:translateX(-4px)}.s-ri .ar-t{font-size:22px}.s-ri small{color:var(--mute);margin-inline-start:auto;text-align:end}

/* ---------- مؤثرات ---------- */
.fx-cv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100}
.fx-float{position:fixed;z-index:101;pointer-events:none;font:800 24px var(--s-head);transform:translate(-50%,-50%);animation:fx-up .95s ease-out forwards;text-shadow:0 2px 0 #fff,0 0 8px #fff}
.fx-float.good{color:var(--ok)}.fx-float.bad{color:var(--bad)}
@keyframes fx-up{from{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}to{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.s-toast{position:fixed;z-index:90;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--teal-dd);color:#fff;padding:10px 20px;border-radius:999px;font-weight:700;box-shadow:var(--sh2);animation:s-in .3s}
/* خريطة الرحلة: موضع التسمية حسب جهة العقدة */
.j-row .box{position:relative}
.j-row.toL .box .j-lab{right:calc(100% + 14px);left:auto;text-align:right}
.j-row.toR .box .j-lab{left:calc(100% + 14px);right:auto;text-align:left}
.j-map{overflow-x:clip}html,body{overflow-x:clip}

/* ---------- الكتاب: واجهة هادئة ---------- */
.s-hero.plain{min-height:0;padding:34px 12px 18px}
.s-hero.plain .s-art{min-height:260px}
@media(max-width:700px){.s-hero.plain{grid-template-columns:1fr}.s-hero.plain .s-art{order:-1;min-height:200px}}
.toc{display:grid;gap:18px;margin:26px 0}
.toc-part{background:#fff;border-radius:22px;padding:18px 20px 14px;box-shadow:var(--sh1)}
.toc-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.toc-h h2{margin:0;font-size:clamp(20px,3.4vw,28px);color:var(--ink)}
.toc-h .tag{background:var(--lc,var(--teal));color:#fff;border-radius:999px;padding:3px 12px;font:700 13px var(--s-ui)}
.toc-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:2px 18px;counter-reset:t}
.toc-l li{counter-increment:t;border-bottom:1px dashed #e3e8dd}
.toc-l a{display:flex;align-items:baseline;gap:10px;padding:10px 4px;color:var(--ink);text-decoration:none;font:600 20px/1.5 var(--f-read)}
.toc-l a::before{content:counter(t,arabic-indic);flex:none;min-width:1.6em;color:var(--lc,var(--teal));font:700 14px var(--s-ui)}
.toc-l a small{font:600 12px var(--s-ui);color:var(--mute)}
.toc-l a:hover{color:var(--lc,var(--teal))}
.j-banner .j-prog{display:none}
@media(max-width:560px){.s-lbar{padding:8px 10px;gap:8px;border-radius:18px}.s-lbar .t small{display:none}.s-lbar .t b{font-size:18px}.s-lbar .s-btn.sm{padding:6px 12px;min-height:0}}