@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(/fonts/cairo-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(/fonts/cairo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(/fonts/cairo-arabic-600-normal.woff2) format('woff2')}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(/fonts/cairo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(/fonts/cairo-arabic-700-normal.woff2) format('woff2')}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(/fonts/cairo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(/fonts/cairo-arabic-800-normal.woff2) format('woff2')}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(/fonts/cairo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')}
:root{--bg:#06050A;--card:rgba(20,12,24,.86);--line:rgba(255,255,255,.1);--txt:#F2EAF6;--mut:rgba(242,234,246,.65);--teal:#00E0D2;--teal2:#00A39A;--pur:#B57BA8;--pur2:#D49BC8;--pur3:#7B4A72;--gold:#F5C33B;--ok:#33D69F;--err:#FF6B81}
*{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
html{scroll-behavior:smooth}
body{font-family:Cairo,Inter,system-ui,sans-serif;background:var(--bg);color:var(--txt);direction:rtl;min-height:100vh;line-height:1.6;position:relative}
body::before{content:"";position:fixed;inset:0;background:url(/wall.jpg) center/cover no-repeat;opacity:.55;z-index:-2}
body::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(6,5,10,.6),rgba(6,5,10,.72) 40%,rgba(6,5,10,.8));z-index:-1}
a{color:var(--teal);text-decoration:none}
.en{direction:ltr;font-family:Inter,Fredoka,sans-serif;display:inline-block}
.fred{font-family:Fredoka,sans-serif;font-weight:700}
.wm{font-family:Fredoka;font-weight:700;direction:ltr;display:inline-block;line-height:1;white-space:nowrap}
.wm .o{color:var(--pur)} .wm .n{color:#fff}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
/* english interface: layout LTR, each text block keeps its own direction */
html[dir=ltr] body{direction:ltr}
html[dir=ltr] h1,html[dir=ltr] h2,html[dir=ltr] h3,html[dir=ltr] p,html[dir=ltr] li,html[dir=ltr] td,html[dir=ltr] th,html[dir=ltr] label,html[dir=ltr] .mini,html[dir=ltr] .mut{unicode-bidi:plaintext}
html[dir=ltr] th{text-align:left}
html[dir=ltr] .eyebrow{text-align:left}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,5,10,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;min-height:70px;padding-block:6px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;direction:ltr}
.brand img,.brand svg{width:44px;height:44px}
.nav-links a[href='/profile']{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;gap:2px 2px;align-items:center;align-content:center;flex-wrap:wrap;flex:1;min-width:0}
.nav-links>*{align-self:center}.nav-links form{margin:0}
.nav-end{display:flex;gap:6px;align-items:center;flex:none;margin-inline-start:auto}.nav-end form{margin:0}
.nav .langbtn{padding:6px 10px;border-radius:10px;font:600 13px Inter,sans-serif;color:var(--txt);border:1px solid var(--line)}.nav .langbtn:hover{color:var(--teal);background:rgba(255,255,255,.07)}
.nav-links a{padding:8px 8px;white-space:nowrap;border-radius:10px;color:var(--txt);font-weight:600;font-size:14.5px}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.07);color:var(--teal)}
.btn{background:transparent;color:inherit;font-family:Cairo,inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:14px;font:700 16px Cairo;cursor:pointer;border:2px solid transparent;transition:.15s;line-height:1.4;white-space:nowrap}
.btn-teal{background:var(--teal);color:#05201e;box-shadow:0 0 24px rgba(0,224,210,.35)} .btn-teal:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(0,224,210,.55)}
.btn-ghost{border-color:rgba(255,255,255,.2);color:var(--txt)} .btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-pur{background:linear-gradient(90deg,#D49BC8,#9A5F8F);color:#1a0d18}
.btn-sm{padding:7px 14px;font-size:14px;border-radius:10px}
.btn-lg{padding:14px 30px;font-size:18px}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none}
/* cards */
.card{min-width:0;background:rgba(16,10,20,.9);border:1px solid var(--line);border-radius:22px;padding:22px 24px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.card.teal{border-color:rgba(0,224,210,.4);background:rgba(0,224,210,.06)}
.card.warn{border-color:rgba(245,195,59,.5);background:rgba(245,195,59,.06)}
.grid{display:grid;gap:18px} .grid>*{min-width:0} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
.g21{grid-template-columns:2fr 1fr} @media(max-width:900px){.g21{grid-template-columns:1fr}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
@media(max-width:900px){.nav .container{flex-wrap:wrap;padding-block:8px}.nav .brand{order:1}.nav-end{order:2}.nav-links{order:3;flex:0 0 100%}}
h1{font-size:40px;font-weight:800;line-height:1.3} h2{font-size:28px;font-weight:800;line-height:1.3} h3{font-size:20px;font-weight:700}
.lead{font-size:18px;color:var(--mut)}
.eyebrow{font:600 13px Inter;letter-spacing:.28em;color:var(--teal);direction:ltr;text-transform:uppercase}
.mut{color:var(--mut)} .teal{color:var(--teal)} .pur{color:var(--pur2)} .gold{color:var(--gold)} .ok{color:var(--ok)} .err{color:var(--err)}
.sec{padding:56px 0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:99px;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,.15)}
.belt-dot{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor}
.bar{height:12px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal2),var(--teal));box-shadow:0 0 14px rgba(0,224,210,.6);transition:width .4s}
.flash{padding:12px 18px;border-radius:14px;margin:18px 0;font-weight:700}
.flash.ok{background:rgba(51,214,159,.12);border:1px solid rgba(51,214,159,.5);color:#C8FFE9}
.flash.err{background:rgba(255,107,129,.12);border:1px solid rgba(255,107,129,.5);color:#FFD6DC}
/* forms */
label{display:block;font-weight:700;margin-bottom:6px;font-size:15px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=url],input[type=number],select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--txt);font:600 16px Cairo;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,224,210,.15)}
.field{margin-bottom:16px}
.auth{max-width:460px;margin:50px auto}
.auth .card{padding:34px}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--teal);cursor:pointer}
/* tables */
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:right;color:var(--teal);font-weight:700;padding:10px 12px;border-bottom:2px solid rgba(0,224,210,.4)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:rgba(255,255,255,.03)}
/* topics */
.topic{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-bottom:10px}
.topic.done{border-color:rgba(0,224,210,.35);background:rgba(0,224,210,.05)}
.topic .n{font:700 20px Fredoka;color:var(--teal);min-width:40px;direction:ltr;text-align:center}
.topic .t{flex:1} .topic .t b{display:block;font-size:17px} .topic .t small{color:var(--mut);font-size:13px}
.topic .acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tick{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;cursor:pointer;color:var(--mut)} .tick input{accent-color:var(--teal);width:20px;height:20px}
.tick.on{color:var(--teal)}
/* exam */
.q{margin-bottom:18px}
.q .qt{font-size:19px;font-weight:700;margin-bottom:12px}
.opt{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);margin-bottom:8px;cursor:pointer;font-weight:600;transition:.12s}
.opt:hover{border-color:rgba(0,224,210,.5)} .opt.sel{border-color:var(--teal);background:rgba(0,224,210,.08)}
.opt input{accent-color:var(--teal);width:20px;height:20px}
.timer{font:700 28px Fredoka;color:var(--teal);direction:ltr}
.timer.low{color:var(--err)}
.sticky-top{position:sticky;top:78px;z-index:10}
.rev-ok{border-right:4px solid var(--ok)} .rev-bad{border-right:4px solid var(--err)}
/* cert */
.cert-wrap{overflow:auto;padding-bottom:10px}
.cert{width:1400px;height:990px;position:relative;overflow:hidden;background:#06050A;color:#F2EAF6;direction:rtl;font-family:Cairo,sans-serif;border-radius:0;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cert .cw{position:absolute;inset:0;background:url(/wall.jpg) center/cover;opacity:.32}
.cert .cs{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,10,.7),rgba(6,5,10,.85) 40%,rgba(6,5,10,.92))}
.cert .frame{position:absolute;inset:34px;border:3px solid rgba(0,224,210,.7);border-radius:28px;box-shadow:0 0 40px rgba(0,224,210,.25),inset 0 0 60px rgba(0,224,210,.06)}
.cert .frame2{position:absolute;inset:48px;border:1px solid rgba(181,123,168,.5);border-radius:20px}
.cert .in{position:absolute;inset:70px 90px;display:flex;flex-direction:column;align-items:center;text-align:center}
.cert .ribbon{position:absolute;top:0;left:50%;transform:translateX(-50%);height:10px;width:420px;border-radius:0 0 10px 10px}
.cert-scale{transform-origin:top right}
.share-btn{display:inline-flex;border:0;cursor:pointer;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:700;color:#fff;font-size:15px}
.share-li{background:#0A66C2} .share-fb{background:#1877F2} .share-x{background:#111;border:1px solid #444} .share-wa{background:#25D366;color:#063}
/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:60px;color:var(--mut);font-size:14px}
.social{display:flex;gap:12px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);color:var(--txt);font-weight:600}
.social a:hover{border-color:var(--teal);color:var(--teal)}
.hero{padding:70px 0 40px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
@media(max-width:700px){.hero{grid-template-columns:1fr}}
@media(min-width:701px) and (max-width:900px){.hero{padding:40px 0 30px;gap:20px}.hero h1{font-size:42px !important}.hero-lead{font-size:18px !important}.hero .hero-ninja{width:min(260px,90%) !important}}
.stat{text-align:center} .stat b{display:block;font:700 44px Fredoka;color:var(--teal);direction:ltr} .stat span{color:var(--mut);font-weight:600}
.step{display:flex;gap:14px;align-items:flex-start}
.step .num{width:44px;height:44px;border-radius:12px;background:var(--teal);color:#05201e;font:700 22px Fredoka;display:flex;align-items:center;justify-content:center;flex:none}
.belt-card{position:relative;overflow:hidden}
.belt-card::before{content:"";position:absolute;top:0;right:0;left:0;height:6px;background:var(--bc,#00E0D2)}
.kbd{font-family:Inter;background:rgba(255,255,255,.08);padding:2px 8px;border-radius:6px;direction:ltr;display:inline-block}
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 24px}
.admin-nav a{padding:8px 14px;border-radius:10px;border:1px solid var(--line);color:var(--txt);font-weight:600;font-size:14px}
.admin-nav a.active{border-color:var(--teal);color:var(--teal)}
.mini{font-size:13px;color:var(--mut)}
.ninja-float{filter:drop-shadow(0 0 30px rgba(154,95,143,.7))}
details summary{cursor:pointer;font-weight:700;color:var(--teal)}
.progress-ring{--p:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:flex;align-items:center;justify-content:center;position:relative}
.progress-ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#120b16}
.progress-ring b{position:relative;z-index:1;font:700 26px Fredoka;color:#fff;direction:ltr}

/* level chip */
@media(max-width:1250px){.lvl span{font-size:0}.lvl span::before{content:attr(data-ic);font-size:14px}.lvl{min-width:44px}}
.lvl{display:inline-flex;flex-direction:column;gap:3px;padding:6px 12px !important;border:1px solid rgba(0,224,210,.35);border-radius:12px;font-size:12px !important;line-height:1.2;color:var(--teal) !important}
.lvl i{display:block;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.12)} .lvl i b{display:block;height:100%;border-radius:2px;background:var(--teal)}
/* help */
.help-btn{position:fixed;bottom:22px;left:22px;width:52px;height:52px;border-radius:50%;border:2px solid var(--teal);background:rgba(6,5,10,.95);color:var(--teal);font:800 24px Cairo;cursor:pointer;z-index:80;box-shadow:0 0 24px rgba(0,224,210,.35)}
.help-btn:hover{background:var(--teal);color:#05201e}
.help-panel{position:fixed;bottom:84px;left:22px;width:min(380px,calc(100vw - 44px));max-height:70vh;overflow:auto;background:rgba(10,6,14,.98);border:1px solid rgba(0,224,210,.35);border-radius:18px;padding:14px 16px;z-index:80;display:none;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.help-panel.on{display:block} .hp-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .hp-hd button{background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer}
.hp-item{border-top:1px solid var(--line);padding:8px 0} .hp-item summary{color:var(--txt);font-size:14px} .hp-item p{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.7}
.hp-ft{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* tour */
.tour-ov{position:fixed;inset:0;z-index:95;pointer-events:none}
.tour-ov::before{content:"";position:fixed;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:16px;box-shadow:0 0 0 9999px rgba(6,5,10,.78),0 0 0 3px var(--teal),0 0 30px rgba(0,224,210,.6);transition:.3s}
.tour-box{position:fixed;z-index:96;background:rgba(16,10,20,.98);border:1px solid rgba(0,224,210,.5);border-radius:16px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.tour-box b{font-size:16px} .tour-box p{font-size:14px;color:var(--mut);margin-top:6px;line-height:1.7} .tour-n{font:600 11px Inter;color:var(--teal);letter-spacing:.2em;direction:ltr;text-align:left} .tour-btns{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}
@media(max-width:700px){.help-btn{width:44px;height:44px;font-size:20px;bottom:14px;left:14px}.help-panel{bottom:66px;left:14px}#about .card{grid-template-columns:1fr !important}.hero h1{font-size:38px !important}h1{font-size:32px}.nav-links form input{width:120px !important}}

/* v10: notification bell + badges */
.nav a.bell{position:relative;padding-inline:8px} .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--err);color:#fff;font-size:11px;font-weight:800;line-height:1;vertical-align:middle;font-family:Inter,sans-serif} .badge.gold-b{background:var(--gold);color:#000}
.pill.mini{padding:2px 10px;font-size:12px} .pill.ok{background:rgba(51,214,159,.15);border-color:rgba(51,214,159,.5);color:#C8FFE9} .pill.warn{color:var(--gold)} .pill.mut{color:var(--mut)}

.nav .lvl .lvn{display:none}
@media(min-width:901px){.nav-links a{padding:8px 6px;font-size:14px}.nav-links form input{width:104px !important}}
@media(min-width:901px){.nav .container{gap:8px}.nav-links form input{width:92px !important}}
@media(min-width:901px) and (max-width:1250px){.nav-links form input{width:60px !important}.nav-links a[href='/profile']{font-size:0;max-width:none}.nav-links a[href='/profile']::before{content:'🥷';font-size:17px}}
/* search grows into spare room on the bar (up to 170px) and shrinks first when space is tight */
@media(min-width:901px){.nav-links form[role=search]{flex:1 1 92px;min-width:92px;max-width:170px;display:flex}.nav-links form[role=search] input{width:100% !important}}
@media(min-width:901px) and (max-width:1250px){.nav-links form[role=search]{flex-basis:60px;min-width:60px;max-width:110px}}

/* admin bar: studio label only when there is plenty of room, so the search box can match the trainee bar */
.nav .stl{display:none}

/* footer: one compact row (menu button + legal links); the full link list lives in the ☰ menu */
.fbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.fmenu{position:relative}.fmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;color:var(--txt);font-weight:700;font-size:14px;user-select:none}
.fmenu summary::-webkit-details-marker{display:none}.fmenu summary:hover,.fmenu[open] summary{border-color:rgba(0,224,210,.5);color:var(--teal)}
.burger{display:inline-flex;flex-direction:column;gap:4px;width:18px}.burger i{display:block;height:2px;border-radius:2px;background:currentColor}
.fmenu-panel{position:absolute;bottom:calc(100% + 10px);inset-inline-start:0;z-index:60;display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:18px;min-width:min(560px,86vw);padding:18px 20px;background:#120b17;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.fmenu-panel h4{font-size:12px;color:var(--teal);margin-bottom:6px;letter-spacing:.04em}.fmenu-panel a{display:block;padding:5px 0;font-size:14px;color:var(--txt)}.fmenu-panel a:hover{color:var(--teal)}
@media(max-width:600px){.fmenu-panel{grid-template-columns:repeat(2,1fr);inset-inline-start:0;min-width:min(340px,92vw)}}

/* ☰ menu now lives in the top bar (end group): icon-only button, panel drops down */
.nav .fmenu summary{padding:9px 11px;border-radius:10px}
.nav .fmenu-panel{bottom:auto;top:calc(100% + 12px);inset-inline-start:auto;inset-inline-end:0;max-width:92vw}
@media(max-width:600px){.nav .fmenu-panel{inset-inline-end:0;min-width:min(320px,92vw)}}
@media(min-width:901px){.nav-links form[role=search]{min-width:64px}}
@media(min-width:2300px){.nav .stl{display:inline}}
@media(max-width:900px){.nav .fmenu{position:static}.nav .fmenu-panel{position:absolute;top:calc(100% + 6px);inset-inline:12px;width:auto;min-width:0;max-width:none}.nav .brand .wm{font-size:20px !important}.brand img,.brand svg{width:36px;height:36px}.nav-end{gap:4px}.nav-end .btn-sm{padding:6px 10px}}
@media(min-width:901px){.nav-links form[role=search]{flex-basis:64px}}
/* admin navigation: grouped (home = organised directory cards, inner pages = group tabs + sub-links) */
.anav-home{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 26px}
@media(max-width:900px){.anav-home{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.anav-home{grid-template-columns:1fr}}
.agroup{padding:16px 18px}.agroup h3{font-size:16px;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.alinks{display:flex;flex-direction:column}.alinks a{padding:7px 0;border-top:1px solid var(--line);color:var(--txt);font-size:14px;font-weight:600}.alinks a:first-child{border-top:0}.alinks a:hover{color:var(--teal)}
.anav{margin:14px 0 22px}.atabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.atab{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:10px;color:var(--txt);font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer;list-style:none}
.atab::-webkit-details-marker{display:none}.atab:hover{background:rgba(255,255,255,.06)}.atab.active{background:rgba(0,224,210,.12);border-color:rgba(0,224,210,.45);color:var(--teal)}
.asub{display:flex;gap:4px 18px;flex-wrap:wrap;padding:10px 4px 0}.asub a{padding:4px 0;color:var(--mut);font-weight:600;font-size:14px;border-bottom:2px solid transparent}.asub a:hover{color:var(--txt)}.asub a.active{color:var(--teal);border-bottom-color:var(--teal)}
.aexp{position:relative;margin-inline-start:auto}.aexp-p{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;display:flex;flex-direction:column;min-width:200px;background:#120b17;border:1px solid var(--line);border-radius:12px;padding:6px 14px;box-shadow:0 14px 40px rgba(0,0,0,.5)}.aexp-p a{padding:8px 0;color:var(--txt);font-size:14px}.aexp-p a:hover{color:var(--teal)}
.aexp[open] summary{background:rgba(255,255,255,.06)}
@media(min-width:901px){.nav-links a{padding:8px 5px}.nav-links a.lvl{padding:6px 9px !important}}

/* ================= MOBILE LAYER (≤900px nav, ≤700px content) ================= */
.m-top,.m-drawer,.m-tabs{display:none}
@media(max-width:900px){
 .nav .container{flex-wrap:nowrap;min-height:60px;padding-block:6px;gap:10px}
 .nav-links,.nav-end{display:none !important}
 .nav .brand{flex:1;min-width:0}.nav .brand .wm{font-size:20px !important;white-space:nowrap}.brand img,.brand svg{width:34px;height:34px}
 .m-top{display:flex;align-items:center;gap:6px;flex:none}
 .m-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--txt);font-size:20px;cursor:pointer;padding:0}
 .m-ic .badge{position:absolute;top:-4px;inset-inline-end:-4px}
 .m-login{padding:10px 8px;font-weight:700;font-size:14px;color:var(--txt)}
 .m-drawer{display:block;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 60px);overflow-y:auto;background:rgba(10,7,14,.98);border-bottom:1px solid var(--line);padding:14px 16px 20px;box-shadow:0 20px 40px rgba(0,0,0,.6);-webkit-overflow-scrolling:touch}
 .m-drawer[hidden]{display:none}
 .m-search input{width:100%;padding:12px 14px;font-size:16px;border-radius:12px}
 .m-user{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;color:var(--txt)}.m-user small{color:var(--mut)}
 .m-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
 .m-list a{display:flex;align-items:center;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;font-weight:700;color:var(--txt)}
 .m-groups{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
 .m-groups h4{font-size:12px;color:var(--teal);margin:6px 0 2px}.m-groups a{display:block;padding:9px 0;color:var(--txt);font-size:15px}
 .m-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.m-foot form{margin:0}
 .m-foot .langbtn{padding:9px 14px;border:1px solid var(--line);border-radius:10px;color:var(--txt);font-weight:700}
 /* bottom tab bar for signed-in trainees */
 body.has-tabs{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
 .m-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(10,7,14,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
 .m-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:10px;color:var(--mut);font-size:11px;font-weight:700;min-height:52px;justify-content:center}
 .m-tabs a i{font-style:normal;font-size:20px;line-height:1}.m-tabs a.active{color:var(--teal);background:rgba(0,224,210,.08)}
 body.has-tabs .help-btn{bottom:calc(76px + env(safe-area-inset-bottom));left:12px;width:40px;height:40px;font-size:18px;opacity:.9}
 body.has-tabs .help-panel{bottom:calc(126px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto}
 footer{padding-bottom:30px}
}
@media(max-width:700px){
 main.container,.container{padding-inline:16px}
 h1{font-size:30px;line-height:1.25}h2{font-size:22px}
 .btn-lg{padding:13px 22px;font-size:17px}
 .btn,.tick,select,input[type=checkbox],input[type=radio]{touch-action:manipulation}
 input,select,textarea{font-size:16px}  /* stops iOS zoom-on-focus */
 .statrow{display:grid !important;grid-template-columns:1fr 1fr;gap:18px 12px !important}.statrow .stat b{font-size:38px}
 /* episode rows on the belt page */
 .topic{flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:14px}
 .topic .n{min-width:34px;font-size:18px}.topic .t{flex:1 1 calc(100% - 60px);min-width:0}.topic .t b{font-size:16px}.topic .t small{display:block;margin-top:3px}
 .topic .acts{width:100%;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px dashed var(--line)}
 .topic .acts .btn{flex:1;justify-content:center;min-height:42px}
 .tick{min-height:42px;padding:0 4px}.tick input{width:22px;height:22px}
 /* support kinds: 2x2 */
 .kinds{grid-template-columns:1fr 1fr !important;gap:10px !important}.kinds .card{padding:12px 8px !important}
 /* tables become cards (opt-in .rt) */
 table.rt,table.rt tbody{display:block}table.rt tr:first-child:has(th){display:none}
 table.rt tr{display:block;padding:12px 14px;margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
 table.rt td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0 !important;border:0 !important;text-align:start}
 table.rt td::before{content:attr(data-l);color:var(--mut);font-size:12px;font-weight:700;flex:none}
 table.rt td:empty{display:none}
 .card{padding-inline:16px}
}
@media(max-width:700px){.wz{margin:14px auto}.wz form.card{padding:20px 16px !important}.choice{gap:8px}.choice label{padding:14px 8px;font-size:15px}.choice .ic{font-size:26px}.auth{margin-top:14px}.auth .card{padding:22px 18px}}
@media(max-width:900px){.m-drawer{background:#0a070e !important}body.has-tabs .m-drawer{max-height:calc(100dvh - 60px - 68px)}}
@media(max-width:900px){body.drawer-open .help-btn,body.drawer-open .help-panel{display:none !important}}

/* ===== Home hero — dedicated phone layout (laptop/tablet layout unchanged) ===== */
@media(max-width:700px){
 .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 0 8px;text-align:center}
 .hero>div:first-child{display:flex;flex-direction:column;align-items:center}
 .hero-art{display:contents}
 .hero-ninja{order:-1;width:132px !important;margin:2px auto 10px;filter:drop-shadow(0 0 22px rgba(154,95,143,.65))}
 .hero-eyebrow{font-size:11px;letter-spacing:.16em;line-height:1.7;text-align:center !important;max-width:300px;margin:0 auto}
 .hero h1{font-size:34px !important;line-height:1.3;margin:8px 0 10px !important}
 .hero-lead{font-size:16.5px !important;line-height:1.85;color:var(--mut);max-width:34ch;margin:0 auto}
 .hero-lead br{display:none}
 .hero-cta{width:100%;flex-direction:column;gap:10px !important;margin-top:20px !important}
 .hero-cta .btn{width:100%;justify-content:center;min-height:52px}
 .hero .statrow{width:100%;margin-top:22px !important;padding:16px 8px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);gap:14px 0 !important}
 .hero .statrow .stat{padding:4px 6px}.hero .statrow .stat b{font-size:30px}.hero .statrow .stat span{font-size:13px}
 .hero .statrow .stat:nth-child(odd){border-inline-end:1px solid var(--line)}
 .odoo20{width:100%;justify-content:center;margin-top:14px !important;padding:10px 16px !important}
 .odoo20 img{height:26px !important}.odoo20 .fred{font-size:30px !important}
}
@media(max-width:900px){.m-name{display:inline-flex;align-items:center;gap:5px;max-width:112px;height:44px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--txt);font-size:14px;font-weight:700;overflow:hidden}.m-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}}
@media(max-width:400px){.nav .brand .wm{font-size:17px !important}.brand img,.brand svg{width:30px;height:30px}.nav .container{gap:6px}.m-top{gap:5px}.m-name{width:44px;padding:0;justify-content:center}.m-name b{display:none}.m-ic{width:44px;height:44px}}

/* ===== Wide laptop/desktop screens: use more of the width (phones/tablets unchanged) ===== */
@media(min-width:1280px){.container{max-width:1360px;padding:0 32px}}
@media(min-width:1600px){.container{max-width:1560px;padding:0 40px}.hero{gap:60px}.hero h1{font-size:64px !important}.hero-lead{font-size:20px !important}}
@media(min-width:1900px){.container{max-width:1720px}}