:root{
  --navy:#0D1B3D; --navy-7:#142A5C; --navy-3:#4A5B85;
  --blue:#1E63D6; --blue-6:#1A55B8; --blue-1:#E7EFFC; --blue-05:#F4F8FE;
  --sky:#5DB7F5;  --sky-1:#E8F5FE;
  --teal:#21C1A7; --teal-6:#189B86; --teal-1:#E0F7F2;
  --gold:#E9A23B; --gold-1:#FDF4E6;
  --rose:#E05656; --rose-1:#FCEBEB;
  --violet:#7B61E8; --violet-1:#EFEBFC;

  --bg:#F5F7FB;
  --card:#FFFFFF;
  --line:#E4E9F2;
  --line-2:#CFD8E6;
  --ink:#0D1B3D;
  --ink-2:#55637D;
  --ink-3:#8794AC;

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px; --r-p:999px;
  --sh-1:0 1px 2px rgba(16,32,68,.05), 0 2px 6px rgba(16,32,68,.05);
  --sh-2:0 4px 10px rgba(16,32,68,.06), 0 10px 26px rgba(16,32,68,.07);
  --sh-3:0 18px 44px rgba(16,32,68,.14);
  --ring:0 0 0 3px var(--blue-1), 0 0 0 5px var(--blue);
  --ez:cubic-bezier(.16,1,.3,1);
  --ar:'Tajawal','Noto Sans Arabic','Segoe UI',system-ui,sans-serif;
  --en:'Inter',system-ui,-apple-system,sans-serif;
  --sb:264px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ar);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:var(--blue);text-decoration:none}
/* `hidden` is a user-agent rule, so ANY author `display` wins over it. Without this,
   `.app{display:flex}` and `.auth-wrap{display:grid}` keep the sign-in screen and the
   app shell on screen at the same time. Screen switching depends on this line. */
[hidden]{display:none!important}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-s)}
.en{font-family:var(--en)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mut{color:var(--ink-2)}
.mut3{color:var(--ink-3)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* =======================================================================
   BREAKPOINTS — four states, and every media query in this file uses one.
   Tested at 390 / 768 / 1024 / 1280 (AGENTS.md §9).

     < 768        phone              single column, bottom tab bar
     768 – 1023   tablet portrait    bottom tab bar, roomier padding
     >= 1024      sidebar shell      tablet LANDSCAPE, laptop, desktop
     >= 1160      two-column split   only once the sidebar leaves room for it

   1024 is deliberate: an iPad in landscape is exactly 1024px wide. At the old
   1080 threshold it fell through to the phone layout and rendered as a very
   large phone, which is the first thing anyone picking up a tablet notices.

   The split threshold is 1160, not 1024, because the sidebar takes 264px. Going
   two-column the moment the sidebar appears leaves a ~420px main column, which
   is worse than stacking.
   ======================================================================= */

/* ======================= APP SHELL ======================= */
/* dvh keeps the layout honest while a mobile browser's address bar hides and
   shows; vh is the fallback for anything that does not support it. */
.app{display:flex;min-height:100vh;min-height:100dvh}

/* ---- sidebar (desktop) ---- */
.side{
  width:var(--sb);flex:none;background:var(--card);border-inline-end:1px solid var(--line);
  position:fixed;inset-block:0;inset-inline-start:0;display:none;flex-direction:column;z-index:50;
  padding:20px 14px;
}
@media(min-width:1024px){ .side{display:flex} .main{margin-inline-start:var(--sb)} }
.logo{display:flex;align-items:center;gap:11px;padding:6px 10px 20px;cursor:pointer}
.logo img{width:38px;height:38px;object-fit:contain;flex:none}
.logo b{font-size:16px;font-weight:800;display:block;line-height:1.2}
.logo span{font-size:11px;color:var(--ink-3);font-weight:500}
.navlbl{font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;padding:14px 12px 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-m);
  font-size:14.5px;font-weight:500;color:var(--ink-2);width:100%;text-align:start;
  transition:background .14s,color .14s
}
.nav button svg{width:20px;height:20px;flex:none;opacity:.85}
.nav button:hover{background:var(--bg);color:var(--ink)}
.nav button.on{background:var(--blue-1);color:var(--blue-6);font-weight:700}
.nav button.on svg{opacity:1}
.nav .badge{margin-inline-start:auto;background:var(--rose);color:#fff;font-size:10.5px;font-weight:700;
  min-width:20px;height:20px;border-radius:var(--r-p);display:grid;place-items:center;padding:0 6px}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.ucard{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-m);cursor:pointer}
.ucard:hover{background:var(--bg)}
.ucard b{font-size:13.5px;display:block;line-height:1.3}
.ucard small{font-size:11.5px;color:var(--ink-3)}

/* ---- main ---- */
/* The tab bar grows by the home-indicator inset on iPhone, so the content's
   bottom padding has to grow with it or the last card sits under the bar. */
.main{flex:1;min-width:0;display:flex;flex-direction:column;
  padding-bottom:calc(86px + env(safe-area-inset-bottom))}
@media(min-width:1024px){.main{padding-bottom:24px}}

.topbar{
  position:sticky;top:0;z-index:40;background:rgba(245,247,251,.82);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:10px;padding:11px 16px;max-width:1240px;margin:0 auto}
@media(min-width:1024px){.topbar-in{padding:14px 28px}}
.mlogo{display:flex;align-items:center;gap:9px}
.mlogo img{width:32px;height:32px;object-fit:contain}
.mlogo b{font-size:14.5px;font-weight:800}
@media(min-width:1024px){.mlogo{display:none}}
.pgtitle{font-size:17px;font-weight:800;display:none}
@media(min-width:1024px){.pgtitle{display:block}}
.search{
  flex:1;max-width:420px;display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-p);padding:8px 15px;color:var(--ink-3);
  font-size:14px;cursor:pointer;transition:border-color .14s,box-shadow .14s
}
.search:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
.search svg{width:17px;height:17px;flex:none}
.search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.search span{display:none} .search{flex:none;padding:9px}}
.tspace{flex:1}
.iconbtn{
  width:40px;height:40px;border-radius:var(--r-p);display:grid;place-items:center;flex:none;
  background:var(--card);border:1px solid var(--line);position:relative;transition:.14s
}
.iconbtn:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
.iconbtn svg{width:19px;height:19px}
.dot{position:absolute;top:8px;inset-inline-end:9px;width:8px;height:8px;background:var(--rose);
  border-radius:50%;border:2px solid var(--card)}

.wrap{max-width:1240px;margin:0 auto;width:100%;padding:18px 16px 32px}
/* Tablet portrait: still the phone shell, but 16px gutters on a 768px screen
   look like a phone page that was stretched rather than a layout. */
@media(min-width:768px) and (max-width:1023px){
  .wrap{padding:22px 24px 36px}
  .topbar-in{padding:12px 24px}
}
@media(min-width:1024px){.wrap{padding:24px 28px 40px}}

/* ---- bottom nav (mobile) ---- */
.tabs{
  position:fixed;inset-inline:0;bottom:0;z-index:45;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);display:flex;padding:7px 6px calc(7px + env(safe-area-inset-bottom));
}
/* On a tablet the bar is 768px+ wide for four items. Centre them instead of
   stretching each to 190px, which looks like a stretched phone layout. */
@media(min-width:600px){.tabs{padding-inline:max(6px, calc((100% - 560px) / 2))}}
@media(min-width:1024px){.tabs{display:none}}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:44px;padding:5px 2px;color:var(--ink-3);font-size:10.5px;font-weight:600;
  border-radius:var(--r-m)}
.tabs button svg{width:22px;height:22px}
.tabs button.on{color:var(--blue)}

/* ======================= PRIMITIVES ======================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.pad{padding:18px}
@media(min-width:768px){.pad{padding:22px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;height:46px;
  border-radius:var(--r-m);font-weight:700;font-size:15px;transition:.15s var(--ez);white-space:nowrap}
.btn:active{transform:scale(.975)}
.btn svg{width:18px;height:18px}
.b-pri{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(30,99,214,.28)}
.b-pri:hover{background:var(--blue-6);box-shadow:0 6px 18px rgba(30,99,214,.34)}
.b-teal{background:var(--teal);color:#fff;box-shadow:0 4px 12px rgba(33,193,167,.3)}
.b-teal:hover{background:var(--teal-6)}
.b-dark{background:var(--navy);color:#fff}
.b-dark:hover{background:var(--navy-7)}
.b-soft{background:var(--blue-1);color:var(--blue-6)}
.b-soft:hover{background:#DBE7FB}
.b-out{border:1.5px solid var(--line-2);color:var(--ink)}
.b-out:hover{background:var(--card);border-color:var(--ink-3)}
.b-rose{background:var(--rose);color:#fff}
.b-sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:var(--r-s)}
.b-lg{height:54px;font-size:16.5px;padding:0 28px}
.b-full{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-p);
  font-size:12.5px;font-weight:700;background:var(--bg);color:var(--ink-2)}
.chip.blue{background:var(--blue-1);color:var(--blue-6)}
.chip.teal{background:var(--teal-1);color:var(--teal-6)}
.chip.gold{background:var(--gold-1);color:#8A5C10}
.chip.rose{background:var(--rose-1);color:var(--rose)}
.chip.violet{background:var(--violet-1);color:var(--violet)}

.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 14px}
.sec:first-child{margin-top:4px}
.sec h2{font-size:20px}
@media(min-width:768px){.sec h2{font-size:23px}}
.sec .more{font-size:13.5px;font-weight:700;color:var(--blue)}

.grid{display:grid;gap:14px}
@media(min-width:768px){.grid{gap:16px}}
.g2{grid-template-columns:repeat(2,1fr)}
/* g2 holds form fields and lesson attachments. Two columns on a 390px phone
   gives each about 165px, which crushes Arabic labels and select controls. */
@media(max-width:520px){.g2{grid-template-columns:1fr}}
.g-auto-s{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.g-auto-m{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.g-auto-l{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:420px){.g-auto-m,.g-auto-l{grid-template-columns:1fr}}

.ava{border-radius:var(--r-m);display:grid;place-items:center;color:#fff;font-weight:800;flex:none;
  font-size:15px;letter-spacing:.02em}
.ava.rnd{border-radius:var(--r-p)}

/* ======================= HERO ======================= */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);color:#fff;padding:26px 22px;
  background:linear-gradient(255deg,#0D1B3D 0%,#17337E 42%,#1E63D6 78%,#2E9BD8 110%);
  box-shadow:var(--sh-2)
}
@media(min-width:768px){.hero{padding:38px 34px}}
.hero::before{content:"";position:absolute;inset-inline-start:-60px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:rgba(93,183,245,.22)}
.hero::after{content:"";position:absolute;inset-inline-start:60px;bottom:-140px;width:260px;height:260px;
  border-radius:50%;background:rgba(33,193,167,.18)}
.hero-c{position:relative;z-index:1;max-width:640px}
.hero h1{font-size:24px;margin-bottom:8px}
@media(min-width:768px){.hero h1{font-size:34px}}
.hero p{opacity:.9;font-size:14.5px}
@media(min-width:768px){.hero p{font-size:16px}}
.hero-stats{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.hero-stats span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  padding:6px 14px;border-radius:var(--r-p);font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}

/* ======================= CARDS ======================= */
.tile{
  padding:18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-1);text-align:start;width:100%;display:flex;flex-direction:column;gap:12px;
  transition:.18s var(--ez);position:relative;overflow:hidden
}
button.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue)}
button.tile:active{transform:translateY(-1px) scale(.99)}
.tile.dis{opacity:.55;pointer-events:none}
.tile .ic{width:52px;height:52px;border-radius:var(--r-m);display:grid;place-items:center;flex:none}
.tile h3{font-size:16.5px}
.tile .sub{font-size:12.5px;color:var(--ink-3);font-weight:500}

/* stage tile */
.stage{min-height:158px;justify-content:space-between}
.stage .ic{width:56px;height:56px}
.stage .soon{position:absolute;top:14px;inset-inline-end:14px}

/* level tile */
.lvl{align-items:center;justify-content:center;text-align:center;gap:9px;min-height:124px;padding:16px 10px}
.lvl .num{width:46px;height:46px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--bg);font-weight:800;font-size:18px;color:var(--navy);transition:.18s}
button.lvl:hover .num{background:var(--blue-1);color:var(--blue-6)}
.lvl b{font-size:14px;font-weight:700}
.lvl.cur{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-1)}
.lvl.cur .num{background:var(--teal);color:#fff}
.lvl .flag{position:absolute;top:0;inset-inline-end:0;background:var(--teal);color:#fff;font-size:10px;
  font-weight:800;padding:3px 11px;border-start-end-radius:var(--r-l);border-end-start-radius:var(--r-m)}

/* subject tile */
.subj{align-items:center;text-align:center;gap:10px;min-height:140px;justify-content:center}
.subj .ic{width:50px;height:50px;border-radius:var(--r-m)}
.subj b{font-size:14.5px;font-weight:700;line-height:1.4}

/* teacher card */
.tcard{padding:0;overflow:hidden;display:block;text-align:start}
.tcard .top{padding:18px;display:flex;gap:13px;align-items:flex-start}
.tcard .ava{width:58px;height:58px;font-size:18px}
.tcard h3{font-size:16.5px;margin-bottom:3px}
.tcard .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tcard .foot{border-top:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;
  justify-content:space-between;background:var(--blue-05)}
.tcard .price{font-weight:800;font-size:16px;color:var(--navy)}
.tcard .price small{font-weight:500;font-size:12px;color:var(--ink-3)}

/* course card (my courses) */
.ccard{padding:0;overflow:hidden;display:block;text-align:start}
.ccard .banner{height:96px;position:relative;display:grid;place-items:center;color:#fff}
.ccard .banner .bi{opacity:.9}
.ccard .banner .term{position:absolute;top:11px;inset-inline-end:11px;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.3);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r-p)}
.ccard .body{padding:15px 17px 17px}
.ccard h3{font-size:15.5px;margin-bottom:4px}

/* progress */
.pbar{height:8px;border-radius:var(--r-p);background:var(--bg);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:var(--r-p);background:linear-gradient(90deg,var(--teal),var(--sky));
  transition:width .6s var(--ez)}
.pbar.thin{height:6px}

/* stat card */
.stat{padding:17px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.stat .ic{width:38px;height:38px;border-radius:var(--r-s);display:grid;place-items:center;margin-bottom:11px}
.stat b{font-size:25px;font-weight:800;display:block;line-height:1.15}
.stat small{font-size:12.5px;color:var(--ink-3);font-weight:600}
.stat .trend{font-size:11.5px;font-weight:700;margin-top:5px;display:inline-block}

/* ======================= PLAYER ======================= */
/* Stacked until there is genuinely room for two columns beside the sidebar.
   A cramped two-column layout reads as broken; a stacked one reads as designed. */
.split{display:grid;gap:16px;align-items:start}
@media(min-width:1160px){.split{grid-template-columns:minmax(0,1fr) 340px}}
.split-rev{display:grid;gap:16px;align-items:start}
@media(min-width:1100px){.split-rev{grid-template-columns:minmax(0,1fr) 320px}}

.stage-video{
  background:linear-gradient(160deg,#101F44,#0A1330);border-radius:var(--r-l);aspect-ratio:16/9;
  position:relative;display:grid;place-items:center;overflow:hidden;color:#fff
}
.stage-video .rings{position:absolute;inset:0;background:
  radial-gradient(420px 220px at 70% 20%, rgba(93,183,245,.18), transparent 70%),
  radial-gradient(360px 200px at 20% 90%, rgba(33,193,167,.15), transparent 70%)}
.playbtn{width:70px;height:70px;border-radius:var(--r-p);background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;position:relative;z-index:2;
  transition:.2s var(--ez);backdrop-filter:blur(4px)}
.playbtn:hover{transform:scale(1.07);background:rgba(255,255,255,.24)}
.vmeta{position:absolute;bottom:0;inset-inline:0;padding:16px;z-index:2;
  background:linear-gradient(0deg,rgba(8,15,35,.85),transparent)}
.vmeta b{font-size:14.5px;display:block}
.vmeta small{opacity:.7;font-size:12px}
.wmk{position:absolute;font-size:11.5px;color:rgba(255,255,255,.34);z-index:3;pointer-events:none;
  transition:all .9s var(--ez);font-weight:600;letter-spacing:.03em}
.vctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}

.lesson{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--card);width:100%;text-align:start;margin-bottom:8px;
  transition:.15s
}
.lesson:hover:not([disabled]){border-color:var(--blue);background:var(--blue-05)}
.lesson[disabled]{background:var(--bg);cursor:not-allowed}
.lesson[disabled] .lt b{color:var(--ink-3)}
.lesson.on{border-color:var(--blue);background:var(--blue-1)}
.lesson.ok{border-color:var(--teal-1);background:#FAFEFD}
.lesson .li{width:30px;height:30px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;
  background:var(--bg);color:var(--ink-2)}
.lesson.ok .li{background:var(--teal);color:#fff}
.lesson.on .li{background:var(--blue);color:#fff}
.lt{flex:1;min-width:0}
.lt b{font-size:13.8px;font-weight:600;display:block;line-height:1.45}
.lt small{font-size:11.5px;color:var(--ink-3)}

/* ======================= QUIZ ======================= */
.qq{border:1px solid var(--line);border-radius:var(--r-l);padding:18px;margin-bottom:14px;background:var(--card)}
.qq h4{font-size:16px;font-weight:700;margin-bottom:14px;line-height:1.6}
.qn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-s);
  background:var(--blue-1);color:var(--blue-6);font-size:13px;font-weight:800;margin-inline-end:8px}
.opts{display:grid;gap:9px}
.opt{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-m);width:100%;text-align:start;min-height:50px;font-size:15px;transition:.14s}
.opt:hover{border-color:var(--blue);background:var(--blue-05)}
.opt.sel{border-color:var(--blue);background:var(--blue-1);font-weight:600}
.opt.good{border-color:var(--teal);background:var(--teal-1)}
.opt.bad{border-color:var(--rose);background:var(--rose-1)}
.opt .kk{width:28px;height:28px;border-radius:var(--r-p);border:1.5px solid var(--line-2);display:grid;
  place-items:center;font-size:13px;font-weight:800;flex:none;transition:.14s}
.opt.sel .kk{background:var(--blue);color:#fff;border-color:var(--blue)}
.opt.good .kk{background:var(--teal);color:#fff;border-color:var(--teal)}
.opt.bad .kk{background:var(--rose);color:#fff;border-color:var(--rose)}
.why{margin-top:12px;font-size:13.5px;background:var(--bg);border-radius:var(--r-m);padding:12px 14px;
  color:var(--ink-2);line-height:1.75}
.ring{width:132px;height:132px;position:relative;margin:0 auto 16px}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:800}

/* ======================= FORMS ======================= */
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.inp{width:100%;height:50px;border:1.5px solid var(--line);border-radius:var(--r-m);padding:0 15px;
  background:var(--card);font-size:15px;transition:.14s}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-1)}
textarea.inp{height:auto;padding:12px 15px;min-height:96px;resize:vertical;line-height:1.7}
.seg{display:flex;gap:8px}
.seg button{flex:1;height:48px;border:1.5px solid var(--line);border-radius:var(--r-m);font-weight:600;
  font-size:14.5px;transition:.14s}
.seg button.on{border-color:var(--blue);background:var(--blue-1);color:var(--blue-6);font-weight:700}
.hint{font-size:12px;color:var(--ink-3);margin-top:6px}

/* ======================= TABLE ======================= */
/* Tables scroll sideways on a phone. Without a cue that reads as truncated
   content, so the edges carry a shadow that appears only while there is more
   to scroll to — the `local` attachment is what makes it self-cancelling. */
/* No -webkit-overflow-scrolling:touch here on purpose: it promotes the scroller to
   its own layer on iOS, where `background-attachment:local` is known to stop
   repainting. Momentum scrolling is native since Safari 13 anyway. */
.tw{overflow-x:auto;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1);
  background-image:
    linear-gradient(to right, var(--card), rgba(255,255,255,0)),
    linear-gradient(to left,  var(--card), rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0    50%, rgba(13,27,61,.13), rgba(13,27,61,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(13,27,61,.13), rgba(13,27,61,0));
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
}
.tw::-webkit-scrollbar{height:6px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{background:var(--bg);text-align:start;padding:12px 16px;font-size:12px;font-weight:800;
  color:var(--ink-3);letter-spacing:.03em;white-space:nowrap}
td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--blue-05)}
.tact{display:flex;gap:7px;white-space:nowrap}

/* ======================= MISC ======================= */
.info{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-inline-start:4px solid var(--sky);border-radius:var(--r-m);padding:14px 16px;font-size:13.8px;
  line-height:1.75;box-shadow:var(--sh-1)}
.info .ii{width:32px;height:32px;border-radius:var(--r-s);background:var(--sky-1);color:var(--blue);
  display:grid;place-items:center;flex:none}
.info.teal{border-inline-start-color:var(--teal)} .info.teal .ii{background:var(--teal-1);color:var(--teal-6)}
.info.gold{border-inline-start-color:var(--gold)} .info.gold .ii{background:var(--gold-1);color:#8A5C10}

.empty{text-align:center;padding:56px 22px}
.empty .eic{width:72px;height:72px;border-radius:var(--r-l);background:var(--bg);color:var(--ink-3);
  display:grid;place-items:center;margin:0 auto 16px}
.empty h3{font-size:19px;margin-bottom:7px}

.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:8px}
.bars div{flex:1;background:linear-gradient(180deg,var(--blue),var(--sky));border-radius:6px 6px 3px 3px;
  min-height:6px;position:relative}
.bars div span{position:absolute;bottom:-22px;inset-inline:0;text-align:center;font-size:11px;color:var(--ink-3)}

.scroll-x{display:flex;gap:13px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.scroll-x>*{scroll-snap-align:start;flex:none;width:min(78vw,300px)}
.scroll-x::-webkit-scrollbar{height:5px}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:13px;color:var(--ink-3);margin-bottom:6px}
.crumbs button{color:var(--blue);font-weight:600;padding:3px 5px;border-radius:6px}
.crumbs button:hover{background:var(--blue-1)}

.cert{background:linear-gradient(150deg,#0D1B3D,#1E63D6);color:#fff;border-radius:var(--r-l);
  padding:22px;position:relative;overflow:hidden}
.cert::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-70px;width:180px;height:180px;
  border-radius:50%;background:rgba(255,255,255,.08)}

/* sheet / modal */
.mask{position:fixed;inset:0;background:rgba(10,19,45,.5);backdrop-filter:blur(3px);z-index:80;
  display:grid;place-items:center;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);border-radius:var(--r-xl);width:100%;max-width:460px;padding:24px;
  box-shadow:var(--sh-3);max-height:88vh;max-height:88dvh;overflow:auto;
  -webkit-overflow-scrolling:touch;animation:up .28s var(--ez)}
/* A phone held sideways has ~390px of height. Give the modal the room instead of
   the decoration, or the buttons end up below the fold. */
@media(max-height:520px){.sheet{padding:16px;max-height:94dvh}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sheet h3{font-size:20px;margin-bottom:6px}

/* toast */
#tst{position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));inset-inline-start:16px;
  inset-inline-end:16px;z-index:90;display:flex;flex-direction:column;gap:9px;pointer-events:none}
#tst>*{pointer-events:auto}
@media(min-width:1024px){#tst{bottom:24px;inset-inline-start:calc(var(--sb) + 16px);inset-inline-end:auto}}
.toast{background:var(--navy);color:#fff;padding:13px 17px;border-radius:var(--r-m);font-size:14px;
  font-weight:500;box-shadow:var(--sh-3);max-width:340px;display:flex;gap:10px;align-items:flex-start;
  animation:up .26s var(--ez)}
.toast.ok{background:var(--teal-6)} .toast.no{background:var(--rose)}
.toast svg{width:18px;height:18px;flex:none;margin-top:2px}

/* demo dock */
.dock{position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));inset-inline-end:16px;z-index:70}
@media(min-width:1024px){.dock{bottom:24px}}
.dockbtn{height:44px;padding:0 16px;border-radius:var(--r-p);background:var(--navy);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:var(--sh-3)}
.dockpanel{position:absolute;bottom:54px;inset-inline-end:0;width:230px;background:var(--card);
  border-radius:var(--r-l);box-shadow:var(--sh-3);border:1px solid var(--line);padding:14px;animation:up .22s var(--ez)}
.dockpanel h4{font-size:12.5px;color:var(--ink-3);margin-bottom:9px;letter-spacing:.04em}
.dockpanel .rr{display:grid;gap:6px;margin-bottom:12px}
.dockpanel .rr button{height:40px;border-radius:var(--r-m);border:1.5px solid var(--line);font-size:14px;
  font-weight:600;display:flex;align-items:center;gap:9px;padding:0 12px}
.dockpanel .rr button.on{border-color:var(--blue);background:var(--blue-1);color:var(--blue-6);font-weight:700}

/* ---- English (LTR) mode ---- */
html[lang="en"] body{font-family:var(--en);line-height:1.65}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{letter-spacing:-.02em}
html[lang="en"] .hint,html[lang="en"] .sub{line-height:1.55}

/* language switch */
.lang{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r-p);padding:3px;flex:none}
.lang button{padding:0 11px;height:30px;border-radius:var(--r-p);font-size:12.5px;font-weight:700;color:var(--ink-3)}
.lang button.on{background:var(--navy);color:#fff}
@media(max-width:400px){.lang button{padding:0 8px;font-size:11.5px}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ==================== ADDITIONS FOR THE HOSTED DEMO ==================== */

/* ---- sign-in ---- */
.auth-wrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(165deg,#0D1B3D 0%,#17337E 55%,#1E63D6 100%);position:relative;overflow:hidden}
.auth-wrap::before{content:"";position:absolute;inset-inline-start:-120px;top:-120px;width:420px;height:420px;
  border-radius:50%;background:rgba(93,183,245,.16)}
.auth-wrap::after{content:"";position:absolute;inset-inline-end:-140px;bottom:-160px;width:420px;height:420px;
  border-radius:50%;background:rgba(33,193,167,.14)}
.auth{position:relative;z-index:1;width:100%;max-width:430px;background:var(--card);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:28px 24px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;text-align:center}
.auth-brand img{width:52px;height:52px;object-fit:contain}
.auth-brand b{font-size:19px;font-weight:800}
.auth-brand span{font-size:12.5px;color:var(--ink-3)}
.acct{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:var(--r-m);
  border:1.5px solid var(--line);text-align:start;transition:.15s var(--ez);margin-bottom:9px;background:var(--card)}
.acct:hover{border-color:var(--blue);background:var(--blue-05);transform:translateY(-1px)}
.acct b{font-size:14.5px;font-weight:700;display:block;line-height:1.35}
.acct small{font-size:11.5px;color:var(--ink-3)}
.acct .go{margin-inline-start:auto;color:var(--ink-3)}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- real video player ---- */
.vplayer{position:relative;border-radius:var(--r-l);overflow:hidden;background:#08122B;aspect-ratio:16/9}
.vplayer video{width:100%;height:100%;display:block;object-fit:cover;background:#08122B}
.vfallback{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:22px;
  color:#fff;background:linear-gradient(160deg,#101F44,#0A1330)}
.vplayer.failed video{display:none}
.vplayer.failed .vfallback{display:grid}
.vbadge{position:absolute;top:12px;inset-inline-start:12px;z-index:4;background:rgba(8,18,43,.72);
  color:#fff;font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--r-p);backdrop-filter:blur(6px)}

/* ---- live sync indicator ---- */
.live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--teal-6);
  background:var(--teal-1);padding:4px 10px;border-radius:var(--r-p)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.live.off{color:var(--ink-3);background:var(--bg)} .live.off i{background:var(--ink-3);animation:none}

/* ---- skeleton ---- */
.skel{background:linear-gradient(90deg,var(--bg) 25%,#EDF1F7 50%,var(--bg) 75%);background-size:200% 100%;
  animation:sh 1.3s infinite;border-radius:var(--r-m)}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.boot{min-height:60vh;display:grid;place-items:center;color:var(--ink-3);gap:14px;text-align:center}