/* Excelerate Academy. Excelerate colors only (navy #2C3E50, yellow #E4A11B, coal #2D2D2D, white),
   light and dark, Apple-style restraint: system type, hairlines, translucent bars, no glow, no
   gradients, labels as text rather than pills. Every color is a token below; components never
   use raw colors (except the video player, which is always dark). */
:root{
  --navy:#2C3E50; --yellow:#E4A11B; --coal:#2D2D2D;
  --radius:14px; --radius-sm:10px;
  --ease:cubic-bezier(.25,.8,.25,1);
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root, [data-theme="light"]{
  color-scheme:light;
  --bg:#F5F6F8; --elev:#FFFFFF; --sunk:#EEF1F4; --field:#FFFFFF;
  --fill:rgba(44,62,80,.06); --fill-2:rgba(44,62,80,.1);
  --line:rgba(44,62,80,.12); --line-2:rgba(44,62,80,.22);
  --text:#1E2A36; --text-2:#56657A; --text-3:#8592A0;
  --tint:#2C3E50;              /* links, active states */
  --btn:#2C3E50; --btn-ink:#FFFFFF; --btn-hover:#22313F;
  --accent:#E4A11B; --accent-ink:#2D2D2D;
  --mark:rgba(228,161,27,.38); /* highlighter behind a highlighted word */
  --logo-ink:#2C3E50;
  --ok:#1F8A4C; --bad:#C0392B;
  --nav:rgba(245,246,248,.78);
  --focus:0 0 0 3px rgba(44,62,80,.18);
  --shadow:0 1px 2px rgba(30,42,54,.05), 0 6px 20px rgba(30,42,54,.06);
  --shadow-lg:0 24px 60px rgba(30,42,54,.18), 0 4px 14px rgba(30,42,54,.08);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16202A; --elev:#1F2C38; --sunk:#192530; --field:#233140;
  --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --text:#F2F5F8; --text-2:#A9B6C3; --text-3:#7D8B99;
  --tint:#E4A11B;
  --btn:#E4A11B; --btn-ink:#2D2D2D; --btn-hover:#F0B33A;
  --accent:#E4A11B; --accent-ink:#2D2D2D;
  --mark:transparent;
  --logo-ink:#FFFFFF;
  --ok:#4CC37E; --bad:#F07A6E;
  --nav:rgba(22,32,42,.78);
  --focus:0 0 0 3px rgba(228,161,27,.32);
  --shadow:none;
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--text)}
html{transition:background-color .3s ease}
body{font-family:var(--font); font-size:16px; line-height:1.5; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100vh}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
img{max-width:100%; display:block}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}
svg.logo{display:block; height:26px; width:auto; color:var(--logo-ink)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important; animation-duration:.01ms !important}}

#app{min-height:100vh}
.boot{min-height:100vh; display:grid; place-items:center}
.spinner{width:24px; height:24px; border-radius:50%; border:2.5px solid var(--line-2); border-top-color:var(--text-2); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* ---------- top bar (translucent material) ---------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--nav); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:22px; height:56px}
.brand{display:flex; align-items:center; gap:10px; white-space:nowrap}
.brand .divider{width:1px; height:18px; background:var(--line-2)}
.brand .word{font-weight:600; font-size:.98rem; color:var(--text)}
.topbar .students{font-size:.84rem; font-weight:500; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.nav{display:flex; gap:2px}
.nav a{position:relative; padding:8px 12px; font-size:.92rem; font-weight:500; color:var(--text-2); border-radius:8px; transition:color .15s}
.nav a:hover{color:var(--text)}
.nav a.on{color:var(--text); font-weight:600}
.nav a.on::after{content:''; position:absolute; left:12px; right:12px; bottom:-9px; height:2px; background:var(--accent)}
.spacer{flex:1}
.me{position:relative}
.me-btn{display:flex; align-items:center; gap:9px; padding:4px 8px 4px 4px; border-radius:var(--radius-sm); border:0; background:none; cursor:pointer}
.me-btn:hover{background:var(--fill)}
.me-name{font-size:.88rem; font-weight:500; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu{position:absolute; right:0; top:calc(100% + 8px); min-width:230px; padding:6px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow-lg); transform-origin:top right; animation:menuIn .18s var(--ease)}
@keyframes menuIn{from{opacity:0; transform:scale(.97)}}
.menu a,.menu button.mi{display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px; font-size:.92rem; background:none; border:0; cursor:pointer; color:var(--text)}
.menu a:hover,.menu button.mi:hover{background:var(--fill)}
.menu .sep{height:1px; background:var(--line); margin:6px 4px}
.menu .who{padding:8px 12px 10px; font-size:.8rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis}
.menu .appearance{padding:6px 8px 4px}
.menu .appearance small{display:block; font-size:.76rem; color:var(--text-3); margin:0 4px 6px}
@media (max-width:640px){.me-name{display:none} .nav a{padding:8px 9px; font-size:.88rem} .topbar .wrap{gap:12px} .brand .divider,.brand .word{display:none} .lg-only{display:none}}

/* segmented control (theme, layout, filters) */
.seg{display:inline-flex; padding:2px; border-radius:9px; background:var(--fill)}
.seg button{border:0; background:none; padding:6px 12px; border-radius:7px; font-size:.84rem; font-weight:500; color:var(--text-2); cursor:pointer; transition:background .15s, color .15s}
.seg button.on{background:var(--elev); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12)}
[data-theme="dark"] .seg button.on{background:var(--fill-2)}
.menu .seg{display:flex}
.menu .seg button{flex:1}

/* ---------- headings ---------- */
.hero{padding:52px 0 28px}
.eyebrow{display:block; font-size:.86rem; font-weight:600; color:var(--text-2)}
.h1{font-family:var(--font-display); font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700; letter-spacing:-.028em; line-height:1.06; margin-top:6px}
.g{color:inherit; background-image:linear-gradient(transparent 60%, var(--mark) 60%, var(--mark) 92%, transparent 92%)}
[data-theme="dark"] .g{color:var(--accent)}
.sub{margin-top:12px; max-width:620px; font-size:1.06rem; line-height:1.55; color:var(--text-2)}
.h2{font-family:var(--font-display); font-size:1.32rem; font-weight:700; letter-spacing:-.02em}
.section{margin-top:44px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px}
.section-head .count{font-size:.86rem; color:var(--text-3)}
.back{display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:500; color:var(--tint)}
.back:hover{opacity:.8}

/* ---------- buttons + forms ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:var(--radius-sm); border:0; cursor:pointer;
  font-size:.94rem; font-weight:600; line-height:1.2; color:var(--btn-ink); background:var(--btn); transition:background .15s, transform .1s, opacity .15s; white-space:nowrap}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45; cursor:default; transform:none}
.btn.ghost{color:var(--text); background:var(--fill)}
.btn.ghost:hover{background:var(--fill-2)}
.btn.danger{color:var(--bad); background:var(--fill)}
.btn.danger:hover{background:var(--fill-2)}
.btn.sm{padding:7px 13px; font-size:.86rem; border-radius:9px}
.btn.block{width:100%}
.btn svg{width:15px; height:15px}
.icon-btn{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; border:0; background:none; cursor:pointer; color:var(--text-2)}
.icon-btn:hover{color:var(--text); background:var(--fill)}
.icon-btn:disabled{opacity:.3; cursor:default; background:none}
.icon-btn svg{width:16px; height:16px}
.linkish{background:none; border:0; padding:0; color:var(--tint); font:inherit; cursor:pointer; font-weight:500}
.linkish:hover{text-decoration:underline}

label.f{display:block; margin-bottom:14px}
label.f > span{display:block; font-size:.84rem; font-weight:500; color:var(--text-2); margin-bottom:6px}
label.f > small{display:block; font-size:.78rem; color:var(--text-3); margin-top:6px}
.in{width:100%; padding:11px 13px; font-size:.96rem; background:var(--field); border:1px solid var(--line-2); border-radius:var(--radius-sm); outline:0;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none}
[data-theme="dark"] .in{border-color:transparent}
.in::placeholder{color:var(--text-3)}
.in:focus{border-color:var(--tint); box-shadow:var(--focus)}
select.in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238592A0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
textarea.in{min-height:110px; resize:vertical; line-height:1.55}
.in[readonly]{color:var(--text-3); background:var(--sunk)}
input[type=color].in{padding:5px; height:44px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){.row{grid-template-columns:1fr}}
.check{display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--line); cursor:pointer; font-size:.94rem}
.check:last-of-type{border-bottom:0}
.check input{width:18px; height:18px; accent-color:var(--navy)}
[data-theme="dark"] .check input{accent-color:var(--yellow)}
.err{color:var(--bad); font-size:.88rem; min-height:1.2em; margin:4px 0 10px}
.hint{font-size:.86rem; color:var(--text-3)}
.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Status and role words: plain text, color only. No pill shapes. */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:var(--text-2); white-space:nowrap}
.pill svg{width:12px; height:12px}
.pill.gold{color:var(--tint)}
.pill.green{color:var(--ok)}
.pill.red{color:var(--bad)}
.pill.green::before,.pill.red::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}

/* ---------- auth + survey ---------- */
.auth{min-height:100vh; display:grid; place-items:center; padding:32px 16px}
.auth-card{width:100%; max-width:400px; padding:36px 32px 30px; border-radius:20px; background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow-lg)}
.auth-card > svg.logo{height:30px; margin:0 auto 26px}
.auth-card h1{text-align:center; font-family:var(--font-display); font-size:1.6rem; font-weight:700; letter-spacing:-.025em}
.auth-card p.lead{text-align:center; color:var(--text-2); font-size:.96rem; margin:8px 0 26px}
.auth-foot{text-align:center; font-size:.84rem; color:var(--text-3); margin-top:20px; line-height:1.6}
.auth-foot a{color:var(--tint)}
.pw-wrap{position:relative}
.pw-wrap .in{padding-right:64px}
.pw-toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--tint); font-size:.82rem; font-weight:600; cursor:pointer; padding:6px 8px}

.auth-card.survey{max-width:460px; padding-top:24px}
.sv-top{display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:14px}
.sv-top svg.logo{height:20px}
.sv-back{display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 0; border:0; background:none; cursor:pointer; font-size:.92rem; font-weight:500; color:var(--tint)}
.sv-count{font-size:.84rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.sv-bar{height:4px; border-radius:2px; background:var(--fill-2); overflow:hidden; margin-bottom:26px}
.sv-bar i{display:block; height:100%; background:var(--accent); transition:width .35s var(--ease)}
.auth-card.survey h1{text-align:left; font-size:1.5rem}
.auth-card.survey p.lead{text-align:left; margin:6px 0 22px}
.sv-q{margin-bottom:18px; line-height:1.2}
.sv-opts{border-radius:var(--radius); background:var(--sunk); overflow:hidden}
.sv-opt{position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:15px 16px; border:0; border-bottom:1px solid var(--line); background:none;
  cursor:pointer; text-align:left; font-size:1rem; color:var(--text); transition:background .12s}
.sv-opt:last-child{border-bottom:0}
.sv-opt:hover{background:var(--fill)}
.sv-opt:active{background:var(--fill-2)}
.sv-opt .dot{order:2; margin-left:auto; width:18px; height:18px; flex:none; color:var(--tint)}
.sv-opt.on{font-weight:600}
.sv-opt.on .dot{background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3E50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
[data-theme="dark"] .sv-opt.on .dot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4A11B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.sv-spin{position:absolute; right:44px}
.sv-done{text-align:center; padding:24px 0 8px}
.sv-check{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; margin-bottom:16px; color:var(--accent-ink); background:var(--accent)}
.sv-check svg{width:26px; height:26px}
.auth-card.survey .sv-done h1,.auth-card.survey .sv-done p.lead{text-align:center}
.sv-answers{margin:0; display:grid}
.sv-answers div{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; font-size:.9rem; padding:10px 0; border-bottom:1px solid var(--line)}
.sv-answers div:last-child{border-bottom:0}
.sv-answers dt{color:var(--text-2)}
.sv-answers dd{margin:0; font-weight:500}
@media (max-width:520px){.sv-answers div{grid-template-columns:1fr; gap:2px}}

/* ---------- product cards (home) ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px}
.pcard{position:relative; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:var(--elev); box-shadow:var(--shadow); border:1px solid var(--line); transition:box-shadow .2s, transform .1s}
[data-theme="light"] .pcard{border-color:transparent}
.pcard:hover{box-shadow:var(--shadow-lg)}
[data-theme="dark"] .pcard:hover{border-color:var(--line-2)}
.pcard:active{transform:scale(.99)}
.pcard .cover{position:relative; aspect-ratio:16/9; background:var(--sunk); overflow:hidden}
.pcard .cover img{width:100%; height:100%; object-fit:cover}
.pcard .cover .ph{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-size:2.4rem; font-weight:700; letter-spacing:-.03em; color:#fff; background:var(--navy)}
.pcard .lock{position:absolute; inset:0; display:grid; place-items:center; background:rgba(22,32,42,.45)}
.pcard .lock span{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:8px; font-size:.84rem; font-weight:600; color:#fff; background:rgba(22,32,42,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.pcard .body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1}
.pcard .kind{font-size:.8rem; font-weight:500; color:var(--text-3)}
.pcard .title{font-size:1.08rem; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.pcard .tag{font-size:.9rem; color:var(--text-2); line-height:1.5}
.pcard .foot{margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.pcard .pill.draft{position:absolute; top:10px; left:10px; z-index:2; padding:4px 8px; border-radius:6px; background:rgba(22,32,42,.72); color:#fff}
.bar{flex:1; height:4px; border-radius:2px; background:var(--fill-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:2px; background:var(--accent)}

/* continue watching */
.resume{display:flex; align-items:center; gap:16px; padding:14px 16px; margin-top:26px; border-radius:var(--radius); background:var(--elev); box-shadow:var(--shadow); border:1px solid var(--line); max-width:620px; transition:box-shadow .2s}
[data-theme="light"] .resume{border-color:transparent}
.resume:hover{box-shadow:var(--shadow-lg)}
.resume .play{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--accent-ink); background:var(--accent)}
.resume .play svg{width:15px; height:15px; margin-left:2px}
.resume b{display:block; font-size:1rem; font-weight:600}
.resume small{color:var(--text-2); font-size:.86rem}

/* ---------- home layouts (picked in Admin) ---------- */
/* rows: big continue banner + horizontally scrolling shelves */
/* dashboard */
.dash{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start}
@media (max-width:1000px){.dash{grid-template-columns:1fr}}
.list{border-radius:var(--radius); background:var(--elev); box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden}
[data-theme="light"] .list{border-color:transparent}
.list-row{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); transition:background .12s}
.list-row:last-child{border-bottom:0}
a.list-row:hover{background:var(--fill)}
.list-row .lthumb{width:84px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; flex:none; background:var(--navy); display:grid; place-items:center; color:#fff; font-weight:700}
.list-row .lthumb img{width:100%; height:100%; object-fit:cover}
.list-row .lmain{flex:1; min-width:0}
.list-row .lmain b{display:block; font-weight:600; font-size:.96rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.list-row .lmain small{display:block; color:var(--text-3); font-size:.82rem}
.list-row .lprog{width:120px; display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-3); font-variant-numeric:tabular-nums}
@media (max-width:560px){.list-row .lprog{display:none} .list-row .lthumb{width:64px}}
.unlock{display:grid; gap:16px}
.orow .oend{display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; text-align:right}
.orow .oend b{font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums}
.orow .oend small{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--text-3)}
.orow .oend svg{width:12px; height:12px}
.side-h{display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 10px}
.side-h h3{font-size:1rem; font-weight:600}
.side-h a{font-size:.86rem; color:var(--tint); font-weight:500}
.mini-post{display:block; padding:12px 16px; border-bottom:1px solid var(--line)}
.mini-post:last-child{border-bottom:0}
.mini-post:hover{background:var(--fill)}
.mini-post b{display:block; font-size:.92rem; font-weight:600; line-height:1.35}
.mini-post p{font-size:.86rem; color:var(--text-2); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px}
.mini-post small{display:block; margin-top:4px; font-size:.78rem; color:var(--text-3)}
/* sidebar shell (Skool-style) */
.with-side .topbar .nav{display:none}
.side-shell{display:grid; grid-template-columns:220px minmax(0,1fr); gap:0; max-width:1320px; margin:0 auto}
.sidenav{position:sticky; top:56px; align-self:start; height:calc(100vh - 56px); padding:22px 14px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.sidenav a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); font-size:.94rem; font-weight:500; color:var(--text-2)}
.sidenav a svg{width:18px; height:18px}
.sidenav a:hover{background:var(--fill); color:var(--text)}
.sidenav a.on{background:var(--fill-2); color:var(--text); font-weight:600}
.sidenav .nbadge{margin-left:auto}
.side-shell #main{min-width:0}
@media (max-width:900px){.side-shell{display:block} .sidenav{display:none} .with-side .topbar .nav{display:flex}}

/* ---------- item cards (cards layout) ---------- */
.toolbar{position:sticky; top:56px; z-index:20; margin:0 0 26px; padding:12px 0; background:var(--nav); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px)}
.search{position:relative; max-width:520px; margin:0 auto 12px}
.search svg{position:absolute; left:14px; top:50%; margin-top:-8px; width:16px; height:16px; color:var(--text-3); pointer-events:none}
.search .in{padding-left:40px}
.chips{display:flex; flex-wrap:wrap; gap:2px; justify-content:center}
.chip{font-size:.88rem; font-weight:500; color:var(--text-2); cursor:pointer; padding:7px 12px; border:0; border-radius:8px; background:none; transition:background .15s, color .15s; white-space:nowrap}
.chip:hover{color:var(--text); background:var(--fill)}
.chip.on{color:var(--text); background:var(--fill-2); font-weight:600}
.chip .ct{margin-left:6px; color:var(--text-3); font-weight:500; font-variant-numeric:tabular-nums}

.icard{position:relative; display:flex; flex-direction:column; text-align:left; cursor:pointer; padding:0; color:inherit; background:var(--elev); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .2s, transform .1s}
[data-theme="light"] .icard{border-color:transparent}
.icard:hover{box-shadow:var(--shadow-lg)}
.icard:active{transform:scale(.99)}
.icard:focus-visible{outline:2px solid var(--tint); outline-offset:3px}
.shine{display:none}
.icard .thumb{position:relative; aspect-ratio:5/4; background:var(--sunk); overflow:hidden}
.icard .thumb.wide{aspect-ratio:16/9}
.icard .thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.icard .thumb .ph{position:absolute; inset:0; display:grid; place-items:center; background:var(--navy)}
.icard .thumb .ph svg{width:40px; height:40px; color:#fff}
.icard .fade{display:none}
.icard .badge{position:absolute; top:10px; right:10px; z-index:2; padding:4px 7px; border-radius:6px; font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--coal); background:var(--yellow)}
.icard .badge.core{color:#fff; background:rgba(22,32,42,.72)}
.icard .done{position:absolute; top:10px; left:10px; z-index:2; padding:4px 8px; border-radius:6px; background:rgba(22,32,42,.72); color:#7EE2A8}
.icard .ibody{padding:14px 18px 0; flex:1}
.icard .role{display:block; margin-bottom:4px; font-size:.8rem; font-weight:500; color:var(--text-3)}
.icard .name{display:block; margin-bottom:6px; font-size:1.06rem; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.icard .desc{display:block; font-size:.88rem; line-height:1.5; color:var(--text-2)}
.icard .cta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 18px; padding-top:12px; border-top:1px solid var(--line)}
.icard .cta-label{font-size:.88rem; font-weight:600; color:var(--tint)}
.arrow{display:flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; color:var(--tint); transition:transform .2s var(--ease)}
.arrow svg{width:15px; height:15px}
.icard:hover .arrow{transform:translateX(3px)}
.empty{padding:70px 20px; text-align:center; color:var(--text-3)}
.empty b{display:block; margin-bottom:8px; font-size:1.12rem; font-weight:600; color:var(--text)}

/* ---------- lessons layout ---------- */
.course{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; padding:22px 0 80px; align-items:start}
@media (max-width:1000px){.course{grid-template-columns:1fr}}
.lesson-title{font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.8rem); font-weight:700; letter-spacing:-.025em; line-height:1.2; margin-top:20px}
.lesson-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; color:var(--text-3); font-size:.88rem}
.lesson-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.notes{margin-top:20px; font-size:1rem; line-height:1.7; color:var(--text); overflow-wrap:anywhere}
.notes p{margin:0 0 14px}
.notes ul{margin:0 0 14px; padding-left:22px}
.notes a{color:var(--tint); text-decoration:underline; text-underline-offset:3px}
.notes h3{font-size:1.1rem; font-weight:600; margin:22px 0 10px}
.attach{display:flex; align-items:center; gap:14px; padding:12px 14px; margin-top:12px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line)}
.attach .ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--fill); color:var(--tint)}
.attach .ic svg{width:18px; height:18px}
.attach b{display:block; font-size:.94rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.attach small{color:var(--text-3); font-size:.8rem}
.attach > div{flex:1; min-width:0}
.text-card{padding:28px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line)}
.text-card .pill{margin:0 auto}

.outline{position:sticky; top:76px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow)}
[data-theme="light"] .outline{border-color:transparent}
@media (max-width:1000px){.outline{position:static}}
.outline-head{padding:16px 16px 14px; border-bottom:1px solid var(--line)}
.outline-head b{display:block; font-size:1rem; font-weight:600}
.outline-head .inline{margin-top:10px; font-size:.82rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.outline-body{max-height:calc(100vh - 220px); overflow:auto; padding:6px}
@media (max-width:1000px){.outline-body{max-height:none}}
.mod-title{padding:14px 10px 6px; font-size:.8rem; font-weight:600; color:var(--text-3)}
.lesson{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; font-size:.92rem; color:var(--text-2); cursor:pointer; line-height:1.35}
.lesson:hover{background:var(--fill); color:var(--text)}
.lesson.on{background:var(--fill-2); color:var(--text); font-weight:600}
.lesson .st{width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--line-2); font-size:.7rem; font-weight:500; color:var(--text-3); font-variant-numeric:tabular-nums}
.lesson .st svg{width:12px; height:12px}
.lesson.ok .st{background:var(--ok); border-color:var(--ok); color:#fff}
.lesson .lt{flex:1; min-width:0}
.lesson .ld{font-size:.78rem; color:var(--text-3); white-space:nowrap; font-weight:400}

/* ---------- player (always dark, it sits on video) ---------- */
.player{position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; border-radius:var(--radius); user-select:none; -webkit-user-select:none}
.player:fullscreen{border-radius:0}
.player .yt, .player iframe{position:absolute; left:0; width:100%; top:-60px; height:calc(100% + 120px); pointer-events:none; border:0}
.player .shield{position:absolute; inset:0; z-index:2; cursor:pointer}
.player .cover{position:absolute; inset:0; z-index:3; display:grid; place-items:center; background:#000 center/cover no-repeat; cursor:pointer}
.player .cover::after{content:''; position:absolute; inset:0; background:rgba(0,0,0,.35)}
.player .big{position:relative; z-index:1; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; color:var(--coal); border:0; cursor:pointer; background:var(--yellow); transition:transform .15s var(--ease)}
.player .big:hover{transform:scale(1.05)}
.player .big:active{transform:scale(.97)}
.player .big svg{width:24px; height:24px; margin-left:3px}
.player .resume-note{position:absolute; z-index:1; bottom:22px; left:0; right:0; text-align:center; font-size:.86rem; font-weight:500; color:#fff; text-shadow:0 1px 6px #000}
.player .controls{position:absolute; z-index:4; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:28px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,.75)); opacity:0; transition:opacity .2s}
.player:hover .controls,.player.paused .controls,.player.touch .controls{opacity:1}
.player .controls button{background:none; border:0; color:#fff; cursor:pointer; padding:6px; display:grid; place-items:center; border-radius:8px}
.player .controls button:hover{background:rgba(255,255,255,.14)}
.player .controls svg{width:18px; height:18px}
.player .time{font-size:.8rem; font-variant-numeric:tabular-nums; color:#E5E7EB; white-space:nowrap}
.player .seek{flex:1; height:18px; display:flex; align-items:center; cursor:pointer; position:relative}
.player .seek .track{position:absolute; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,.28)}
.player .seek .fill{position:absolute; left:0; height:4px; border-radius:2px; background:var(--yellow)}
.player .seek .knob{position:absolute; width:13px; height:13px; margin-left:-6px; border-radius:50%; background:#fff}
.player .speed{background:rgba(255,255,255,.14); border:0; border-radius:6px; color:#fff; font-size:.78rem; font-weight:600; padding:5px 8px; cursor:pointer}
.player .end{position:absolute; inset:0; z-index:5; display:grid; place-items:center; text-align:center; color:#fff; background:rgba(22,32,42,.94)}
.player .end h3{font-size:1.2rem; font-weight:600; margin:10px 0 18px}
.player .end .inline{justify-content:center}
.player .end .pill.green{color:#7EE2A8}
.player .end .btn.ghost{color:#fff; background:rgba(255,255,255,.14)}
@media (max-width:640px){.player{border-radius:12px} .player .vol,.player .time .dur-sep{display:none}}

/* ---------- admin ---------- */
.tabs{display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 26px; border-bottom:1px solid var(--line)}
.tabs a{padding:10px 12px; font-size:.92rem; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text); font-weight:600; border-bottom-color:var(--accent)}
.panel{border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); padding:22px; box-shadow:var(--shadow)}
[data-theme="light"] .panel{border-color:transparent}
.panel + .panel{margin-top:18px}
.panel h3{font-size:1.02rem; font-weight:600; margin-bottom:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px}
.stat{padding:18px; border-radius:var(--radius); background:var(--elev); box-shadow:var(--shadow); border:1px solid var(--line)}
[data-theme="light"] .stat{border-color:transparent}
.stat b{display:block; font-family:var(--font-display); font-size:1.9rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat span{font-size:.86rem; color:var(--text-2)}
a.stat{display:block; transition:box-shadow .2s}
a.stat:hover{box-shadow:var(--shadow-lg)}
.stat.hot b{color:var(--tint)}
.stat.hot{outline:1.5px solid var(--accent); outline-offset:-1.5px}
.bar-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.bar-row .in{width:auto; flex:1; min-width:200px}
.table-wrap{overflow-x:auto; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow)}
[data-theme="light"] .table-wrap{border-color:transparent}
table.t{width:100%; border-collapse:collapse; font-size:.9rem}
.t th{text-align:left; font-size:.8rem; font-weight:500; color:var(--text-3); padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
.t td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer}
.t tr.click:hover td{background:var(--fill)}
.t .muted{color:var(--text-3)}
.t .wrap-text{max-width:340px; color:var(--text-2); font-size:.86rem}
.mod-block{border-radius:var(--radius); margin-bottom:14px; overflow:hidden; background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow)}
[data-theme="light"] .mod-block{border-color:transparent}
.mod-block > header{display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line)}
.mod-block > header b{flex:1; font-size:.96rem; font-weight:600}
.it-row{display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line)}
.it-row:last-child{border-bottom:0}
.it-row .thumbsm{width:64px; height:40px; border-radius:7px; overflow:hidden; flex:none; background:var(--sunk); display:grid; place-items:center; color:var(--text-3)}
.it-row .thumbsm img{width:100%; height:100%; object-fit:cover}
.it-row .thumbsm svg{width:16px; height:16px}
.it-row .meta{flex:1; min-width:0}
.it-row .meta b{display:block; font-size:.94rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.it-row .meta small{font-size:.8rem; color:var(--text-3)}
.it-row .acts{display:flex; gap:2px}
.cover-prev{width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--sunk); margin-bottom:10px; display:grid; place-items:center; color:var(--text-3); font-size:.86rem}
.cover-prev img{width:100%; height:100%; object-fit:cover}
.split{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start}
@media (max-width:1000px){.split{grid-template-columns:1fr}}
.kind-pick{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:2px; margin-bottom:16px; border-radius:10px; background:var(--fill)}
@media (max-width:520px){.kind-pick{grid-template-columns:repeat(2,1fr)}}
.kind-pick button{padding:10px 8px; border-radius:8px; border:0; background:none; cursor:pointer; font-size:.86rem; font-weight:500; color:var(--text-2); display:flex; flex-direction:column; align-items:center; gap:5px}
.kind-pick button svg{width:18px; height:18px}
.kind-pick button.on{color:var(--text); background:var(--elev); box-shadow:0 1px 3px rgba(0,0,0,.12)}
[data-theme="dark"] .kind-pick button.on{background:var(--fill-2)}
.yt-prev{display:flex; gap:12px; align-items:center; padding:10px; border-radius:var(--radius-sm); background:var(--sunk); margin:-4px 0 14px}
.yt-prev img{width:120px; aspect-ratio:16/9; object-fit:cover; border-radius:6px}
.yt-prev small{color:var(--text-2); font-size:.84rem}
.secret{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--sunk); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.05rem; letter-spacing:.04em}
.secret span{flex:1}
.msg-box{white-space:pre-wrap; font-size:.9rem; line-height:1.6; padding:14px; border-radius:var(--radius-sm); background:var(--sunk)}
/* layout picker */

/* ---------- modal + toast ---------- */
.modal-bg{position:fixed; inset:0; z-index:100; background:rgba(10,16,22,.42); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:100%; max-width:540px; max-height:calc(100vh - 40px); overflow:auto; border-radius:20px; background:var(--elev); box-shadow:var(--shadow-lg); animation:pop .28s var(--ease)}
[data-theme="dark"] .modal{border:1px solid var(--line)}
.modal.wide{max-width:860px}
@keyframes pop{from{transform:translateY(10px) scale(.98); opacity:0}}
.modal-head{display:flex; align-items:center; gap:12px; padding:20px 22px 0}
.modal-head h2{flex:1; font-size:1.15rem; font-weight:600; letter-spacing:-.015em}
.modal-body{padding:18px 22px 22px}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:0 22px 22px; flex-wrap:wrap}
#toasts{position:fixed; z-index:200; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:calc(100% - 32px); max-width:440px}
.toast{padding:11px 18px; border-radius:12px; font-size:.92rem; font-weight:500; background:var(--elev); color:var(--text); box-shadow:var(--shadow-lg); border:1px solid var(--line); animation:pop .25s var(--ease)}
.toast.bad{color:var(--bad)}
.page-foot{padding:52px 0 40px; text-align:center; font-size:.84rem; color:var(--text-3)}

/* ---------- billing + checkout ---------- */
.bill-list .panel + .panel{margin-top:14px}
.bill-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.bill-line{margin-top:12px; font-size:.94rem; color:var(--text-2)}
.bill-line b{color:var(--text)}
.bill-h{font-size:1.02rem; font-weight:600; margin:8px 2px 12px}
.co{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:22px; align-items:start}
@media (max-width:720px){
  .co{grid-template-columns:1fr; gap:16px}
  .co-sum{padding:16px}
  .co-price{margin:6px 0 12px} .co-price b{font-size:1.7rem}
  .co-rows{padding:10px 0; gap:8px}
  .co-notes{display:none}
  .co-test{margin-top:12px}
}
.co-sum{padding:20px; border-radius:var(--radius); background:var(--sunk)}
.co-plan{font-size:1.06rem; font-weight:600; margin-top:6px}
.co-price{display:flex; align-items:baseline; gap:6px; margin:10px 0 16px}
.co-price b{font-family:var(--font-display); font-size:2.1rem; font-weight:700; letter-spacing:-.03em}
.co-price span{color:var(--text-2); font-size:.94rem}
.co-rows{margin:0; display:grid; gap:10px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.co-rows div{display:flex; justify-content:space-between; gap:14px; font-size:.9rem}
.co-rows dt{color:var(--text-2); white-space:nowrap}
.co-rows dd{margin:0; text-align:right; font-weight:500}
.co-rows dd small{display:block; font-weight:400; color:var(--text-2); font-size:.82rem; word-break:break-all}
.co-notes{margin:14px 0 0; padding:0 0 0 16px; color:var(--text-2); font-size:.84rem; line-height:1.55}
.co-test{margin-top:14px; padding:10px 12px; border-radius:10px; font-size:.84rem; color:var(--text-2); background:var(--fill); border-left:3px solid var(--accent); border-radius:0 10px 10px 0}
.co-test code{font:600 .95em ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text)}
.co-pay{min-width:0}
.co-go{margin-top:6px; padding:14px 22px; font-size:1rem}
.co-spin{width:16px; height:16px; border-radius:50%; border:2px solid rgba(127,127,127,.3); border-top-color:currentColor; animation:spin .7s linear infinite}
.co-trust{display:flex; gap:8px; align-items:flex-start; justify-content:center; margin-top:12px; font-size:.8rem; color:var(--text-3); text-align:left}
.co-trust svg{width:13px; height:13px; flex:none; margin-top:2px; color:var(--ok)}
/* Xendit Components, themed from the same tokens (its variables cascade into its own markup;
   the card number / expiry / CVV iframes get their colors from app.js at creation). */
.xcard{
  --xendit-font-family:var(--font);
  --xendit-color-primary:var(--tint); --xendit-color-text:var(--text); --xendit-color-text-secondary:var(--text-2);
  --xendit-color-text-placeholder:var(--text-3); --xendit-color-disabled:var(--sunk); --xendit-color-danger:var(--bad);
  --xendit-color-border:var(--line-2); --xendit-color-background:var(--field);
  --xendit-focus-shadow:var(--focus); --xendit-radius-1:10px; --xendit-radius-2:10px; --xendit-radius-3:12px;
  --xendit-font-weight-semibold:600}
.xcard .spinner{margin:44px auto}
.xcard label{color:var(--text-2); font-size:.84rem !important; font-weight:500}
[data-academy-filled]{display:none !important}

/* ---------- avatars + nav badge ---------- */
.avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; overflow:hidden; font-size:.74rem; font-weight:700; color:#fff; background:var(--navy); flex:none}
[data-theme="dark"] .avatar{color:var(--coal); background:var(--yellow)}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.sm{width:26px; height:26px; font-size:.66rem}
.avatar.lg{width:44px; height:44px; font-size:.95rem}
.avatar.xl{width:84px; height:84px; font-size:1.7rem}
.photo-row{display:flex; gap:20px; align-items:center}
@media (max-width:520px){.photo-row{flex-direction:column; align-items:flex-start}}
.nbadge{display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 5px; margin-left:6px; border-radius:9px; font-size:.68rem; font-weight:700; line-height:1; color:var(--accent-ink); background:var(--accent); vertical-align:1px; font-variant-numeric:tabular-nums}

/* ---------- comment threads ---------- */
.cmts{margin-top:40px; padding-top:28px; border-top:1px solid var(--line)}
.cmts > .spinner{margin:10px auto}
.cmts-head{display:flex; align-items:baseline; gap:10px; margin-bottom:16px}
.cmts-head .count{font-size:.9rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.cm-form{margin-bottom:22px}
.cm-row{display:flex; gap:12px; align-items:flex-start}
.cm-row .avatar{margin-top:8px}
.cm-row textarea{min-height:0; flex:1}
.cm-acts{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px}
.cm-acts .hint{margin-right:auto; padding-left:38px}
@media (pointer:coarse){.cm-acts .hint{display:none}}
.cm-list{display:flex; flex-direction:column}
.cm{display:flex; gap:12px; padding:16px 0; border-top:1px solid var(--line)}
.cm:first-child{border-top:0; padding-top:4px}
.cm.pinned{border-left:3px solid var(--accent); padding-left:14px; margin-left:-17px}
.cm-main{flex:1; min-width:0}
.cm-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.92rem}
.cm-meta b{font-weight:600}
.cm-time{color:var(--text-3); font-size:.82rem}
.cm-body{margin-top:4px; font-size:.97rem; line-height:1.6; overflow-wrap:anywhere}
.cm-body a{color:var(--tint); text-decoration:underline; text-underline-offset:3px}
.cm-body .cm-form{margin:8px 0 0}
.cm-tools{display:flex; gap:16px; margin-top:6px}
.cm-tool{display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; font-size:.84rem; font-weight:500; color:var(--text-3); cursor:pointer}
.cm-tool:hover{color:var(--text)}
.cm-tool svg{width:14px; height:14px}
.cm-tool .n{color:var(--text-3); font-variant-numeric:tabular-nums}
.cm-replies{margin-top:6px}
.cm.reply{padding:12px 0 4px; border-top:0}
.cm.reply .cm-body{font-size:.94rem}
.cm-slot:not(:empty){margin-top:12px}
.cm-slot .cm-form{margin-bottom:0}
.cm-empty{padding:20px; border-radius:var(--radius); background:var(--sunk); color:var(--text-2); font-size:.94rem; text-align:center}
.cm-admin .cm-form{margin-bottom:0}
.cm-admin + .cm-admin{margin-top:14px}

/* ---------- community feed ---------- */
.feed{max-width:700px; margin:0 auto}
.feed-hero{padding:44px 0 18px}
.feed-cats{display:flex; gap:2px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; scrollbar-width:none}
.feed-cats::-webkit-scrollbar{display:none}
.feed-cats .chip{flex:none}
.feed-note{display:flex; align-items:center; gap:8px; margin-bottom:18px; font-size:.9rem; color:var(--text-3)}
.feed-note svg{width:14px; height:14px}
.composer{margin-bottom:18px}
.composer-open{display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--elev); box-shadow:var(--shadow); cursor:pointer; text-align:left; font-size:.98rem; color:var(--text-3)}
[data-theme="light"] .composer-open{border-color:transparent}
.composer-open:hover{color:var(--text-2)}
.composer-who{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.composer-who b{font-size:.96rem; font-weight:600}
.composer-who select{width:auto; margin-left:auto; padding:8px 34px 8px 12px; font-size:.9rem}
.composer-title{font-weight:600; margin-bottom:10px}
.composer-body{min-height:160px}
.composer-img{position:relative; display:inline-block; margin-top:12px}
.composer-img img{max-height:220px; border-radius:10px}
.composer-img .icon-btn{position:absolute; top:8px; right:8px; color:#fff; background:rgba(22,32,42,.7)}
.post{border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden}
[data-theme="light"] .post{border-color:transparent}
.post.pinned{box-shadow:var(--shadow), inset 3px 0 0 var(--accent)}
.post-head{display:flex; align-items:center; gap:12px; padding:16px 18px 0}
.post-who{flex:1; min-width:0}
.post-name{display:flex; align-items:center; gap:8px; font-size:.96rem}
.post-name b{font-weight:600}
.post-sub{font-size:.82rem; color:var(--text-3)}
.post-sub a:hover{color:var(--text); text-decoration:underline}
.post-pin{flex:none; color:var(--text-3)}
.post-content{padding:12px 18px 0}
.post-content[data-href]{cursor:pointer}
.post-title{font-size:1.14rem; font-weight:600; letter-spacing:-.015em; line-height:1.3; margin-bottom:6px}
.post-body{font-size:.98rem; line-height:1.6; overflow-wrap:anywhere}
.post-body a{color:var(--tint); text-decoration:underline; text-underline-offset:3px}
.post-body.clamp{display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden}
.see-more{display:inline-block; margin-top:4px; font-size:.9rem; font-weight:500; color:var(--tint)}
.post-img{display:block; margin-top:14px; background:var(--sunk)}
.post-img img{width:100%; max-height:560px; object-fit:contain}
.post-foot{display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:6px 10px; margin-top:12px; border-top:1px solid var(--line)}
.post-img + .post-foot{margin-top:0; border-top:0}
.pf-btn{display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border-radius:8px; border:0; background:none; cursor:pointer; font-size:.9rem; font-weight:500; color:var(--text-2)}
.pf-btn:hover{background:var(--fill); color:var(--text)}
.pf-btn svg{width:17px; height:17px}
.pf-btn .n{color:var(--text-3); font-variant-numeric:tabular-nums}
.pt-like.on,.cm-like.on{color:var(--bad)}
.pt-like.on svg,.cm-like.on svg{fill:currentColor}
.post-tools{display:flex; gap:16px; margin-left:auto; padding-right:8px}
.post.full .post-body{font-size:1.02rem}
.post.full .post-title{font-size:1.4rem; font-weight:700}
.post-cmts{margin-top:10px; padding:22px 18px; border:0; border-radius:var(--radius); background:var(--elev); box-shadow:var(--shadow)}
[data-theme="dark"] .post-cmts{border:1px solid var(--line)}
.post-cmts .cm-list + .cm-form{margin:18px 0 0}
.feed-more{text-align:center; margin:6px 0 10px}
@media (max-width:640px){
  .post-head{padding:14px 14px 0}
  .post-content{padding:10px 14px 0}
  .post-cmts{padding:18px 14px}
  .post-tools{width:100%; margin-left:0; padding:4px 8px 2px}
}

/* ---------- community, Skool-style ---------- */
.comm{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; max-width:1080px; margin:0 auto}
.comm-main{min-width:0}
.comm-tabs{display:flex; gap:4px; margin:26px 0 18px; border-bottom:1px solid var(--line)}
.comm-tabs a{padding:10px 12px; font-size:.94rem; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px}
.comm-tabs a:hover{color:var(--text)}
.comm-tabs a.on{color:var(--text); font-weight:600; border-bottom-color:var(--accent)}
.comm .composer-open{margin-bottom:14px}
.comm .feed-cats{margin-bottom:14px}
/* sidebar */
.comm-side{position:sticky; top:76px; display:flex; flex-direction:column; gap:16px; padding-top:26px}
.side-card{display:block; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
[data-theme="light"] .side-card{border-color:transparent}
.comm-cover{height:76px; display:grid; place-items:center; background:var(--navy)}
.comm-cover svg.logo{height:30px; color:#fff}
.sc-body{padding:14px 16px 16px}
.sc-body > b{display:block; font-size:1.02rem; font-weight:600}
.sc-body p{font-size:.88rem; color:var(--text-2); margin-top:4px; line-height:1.45}
.sc-stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:14px; padding-top:12px; border-top:1px solid var(--line); text-align:center}
.sc-stats b{display:block; font-size:1.1rem; font-weight:700; font-variant-numeric:tabular-nums}
.sc-stats span{font-size:.74rem; color:var(--text-3)}
.sc-head{display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px 8px}
.sc-head b{font-size:.98rem; font-weight:600}
.sc-head small{font-size:.8rem; color:var(--text-3)}
.sc-note{font-size:.84rem; color:var(--text-3); line-height:1.45; padding:4px 16px 14px}
.sc-link{display:block; padding:12px 16px; border-top:1px solid var(--line); font-size:.88rem; font-weight:500; color:var(--tint)}
.sc-link:hover{background:var(--fill)}
.me-card{display:flex; align-items:center; gap:12px; padding:14px 16px}
.me-card:hover{box-shadow:var(--shadow-lg)}
.mc-main{flex:1; min-width:0}
.mc-main b{display:block; font-size:.94rem; font-weight:600}
.mc-main small{display:block; font-size:.8rem; color:var(--text-3); margin:1px 0 7px}
.mc-main .bar{display:block}
.lb-mini{display:flex; align-items:center; gap:10px; padding:7px 16px; font-size:.9rem}
.lb-mini:hover{background:var(--fill)}
.lb-mini .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.lb-mini .pt,.lb-row .pt{font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-2)}
.rk{width:20px; text-align:center; font-size:.86rem; font-weight:600; color:var(--text-3); font-variant-numeric:tabular-nums; flex:none}
.rk.top{color:var(--tint)}
.lv-row{display:flex; align-items:center; gap:10px; padding:7px 16px; font-size:.88rem}
.lv-row.on{background:var(--fill-2)}
.lv-n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:.76rem; font-weight:700; background:var(--fill-2); color:var(--text-2)}
.lv-row.on .lv-n{background:var(--accent); color:var(--accent-ink)}
.lv-name{flex:1; font-weight:500}
.lv-name small{display:block; font-size:.76rem; color:var(--text-3); font-weight:400}
.lv-pct{font-size:.82rem; color:var(--text-3); font-variant-numeric:tabular-nums}
/* level number on avatars */
.av-wrap{position:relative; display:inline-block; flex:none; line-height:0}
.lvl-badge{position:absolute; right:-4px; bottom:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:grid; place-items:center; font-size:.64rem; font-weight:700; line-height:1;
  color:#fff; background:var(--navy); box-shadow:0 0 0 2px var(--elev); font-variant-numeric:tabular-nums}
[data-theme="dark"] .lvl-badge{color:var(--coal); background:var(--yellow)}
.av-wrap.sm .lvl-badge{min-width:14px; height:14px; font-size:.56rem; right:-4px; bottom:-3px}
.av-wrap.lg .lvl-badge{min-width:19px; height:19px; font-size:.7rem}
.av-wrap.xl .lvl-badge{min-width:28px; height:28px; border-radius:14px; font-size:.92rem; right:-2px; bottom:-2px; box-shadow:0 0 0 3px var(--elev)}
.avatar.xs{width:20px; height:20px; font-size:.54rem}
.mlink{color:inherit}
.mlink:hover b,.pr-name .mlink:hover{text-decoration:underline}
.mlink.av:hover{opacity:.9}
/* pinned strip + feed rows */
.pinned-strip{border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden}
[data-theme="light"] .pinned-strip{border-color:transparent}
.pin-row{display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:.92rem}
.pin-row:last-child{border-bottom:0}
.pin-row:hover{background:var(--fill)}
.pin-row svg{width:15px; height:15px; color:var(--tint); flex:none}
.pin-row b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.pin-row span{font-size:.8rem; color:var(--text-3); white-space:nowrap}
.post-row{display:flex; gap:16px; padding:16px 18px; margin-bottom:12px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; transition:box-shadow .2s}
[data-theme="light"] .post-row{border-color:transparent}
.post-row:hover{box-shadow:var(--shadow-lg)}
[data-theme="dark"] .post-row:hover{border-color:var(--line-2)}
.pr-main{flex:1; min-width:0}
.pr-head{display:flex; align-items:center; gap:10px}
.pr-name{display:flex; align-items:center; gap:8px; font-size:.94rem; font-weight:600}
.pr-sub{font-size:.8rem; color:var(--text-3)}
.pr-sub a:hover{color:var(--text); text-decoration:underline}
.pr-title{font-size:1.08rem; font-weight:700; letter-spacing:-.015em; line-height:1.3; margin-top:12px}
.pr-body{font-size:.95rem; color:var(--text-2); line-height:1.5; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pr-title + .pr-body{margin-top:3px}
.pr-head + .pr-body{margin-top:12px; color:var(--text)}
.pr-foot{display:flex; align-items:center; gap:2px; margin:10px 0 -6px -10px; flex-wrap:wrap}
.pr-foot .pf-btn{padding:6px 10px}
.pr-who{display:inline-flex; align-items:center; gap:8px; margin-left:8px; font-size:.8rem; color:var(--text-3)}
.stack{display:inline-flex}
.stack .avatar{box-shadow:0 0 0 2px var(--elev); margin-left:-6px}
.stack .avatar:first-child{margin-left:0}
.pr-thumb{flex:none; width:108px; height:108px; border-radius:10px; overflow:hidden; background:var(--sunk); align-self:center}
.pr-thumb img{width:100%; height:100%; object-fit:cover}
@media (max-width:560px){.pr-thumb{width:76px; height:76px} .pr-who span:last-child{display:none} .post-row{padding:14px; gap:12px}}
/* profile */
.profile-card{display:flex; align-items:center; gap:22px; padding:22px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow)}
[data-theme="light"] .profile-card{border-color:transparent}
.pc-main{flex:1; min-width:0}
.pc-main h1{font-family:var(--font-display); font-size:1.6rem; font-weight:700; letter-spacing:-.025em; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pc-sub{font-size:.92rem; color:var(--text-2); margin-top:2px}
.pc-level{margin-top:12px; max-width:420px}
.pc-level .bar{display:block}
.pc-level small{display:block; margin-top:6px; font-size:.82rem; color:var(--text-3)}
.pc-stats{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:14px}
.pc-stats div{padding:12px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); text-align:center}
[data-theme="light"] .pc-stats div{border-color:transparent; box-shadow:var(--shadow)}
.pc-stats b{display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums}
.pc-stats span{font-size:.74rem; color:var(--text-3)}
@media (max-width:760px){.pc-stats{grid-template-columns:repeat(3,minmax(0,1fr))} .profile-card{flex-direction:column; text-align:center} .pc-main h1{justify-content:center} .pc-level{margin-left:auto; margin-right:auto}}
.ach-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.ach{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line)}
[data-theme="light"] .ach.got{border-color:transparent; box-shadow:var(--shadow)}
.ach b{display:block; font-size:.92rem; font-weight:600}
.ach small{display:block; font-size:.78rem; color:var(--text-3); line-height:1.35}
.ach-ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--accent); color:var(--accent-ink)}
.ach-ic svg{width:20px; height:20px}
.ach.locked{background:none; border-style:dashed}
.ach.locked .ach-ic{background:var(--fill); color:var(--text-3)}
.ach.locked b{color:var(--text-2)}
/* leaderboard */
.lb-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.lb-me{display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:12px; border-radius:var(--radius); background:var(--sunk)}
.lb-me b{display:block; font-weight:600}
.lb-me small{color:var(--text-3); font-size:.84rem}
.lb-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:0}
.lb-row:hover{background:var(--fill)}
.lb-row.me{background:var(--fill-2)}
.lb-row .nm{flex:1; min-width:0; font-weight:600; font-size:.95rem}
.lb-row .nm small{display:block; font-weight:400; font-size:.78rem; color:var(--text-3)}
/* celebration card */
.celebrate{position:fixed; z-index:210; left:50%; bottom:28px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; width:calc(100% - 32px); max-width:420px;
  padding:14px 16px; border-radius:16px; background:var(--elev); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow-lg); cursor:pointer; animation:celIn .45s cubic-bezier(.2,1.2,.4,1)}
.celebrate.out{animation:celOut .25s ease forwards}
@keyframes celIn{from{opacity:0; transform:translate(-50%,24px) scale(.96)}}
@keyframes celOut{to{opacity:0; transform:translate(-50%,12px)}}
.cel-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--accent); color:var(--accent-ink)}
.cel-ic svg{width:24px; height:24px}
.celebrate small{display:block; font-size:.76rem; font-weight:600; color:var(--tint)}
.celebrate b{display:block; font-size:1rem; font-weight:700}
.celebrate span:not(.cel-ic){display:block; font-size:.84rem; color:var(--text-2); line-height:1.35}
@media (max-width:900px){
  .comm{grid-template-columns:minmax(0,1fr); gap:0}
  .comm-side{position:static; order:-1; padding-top:18px}
  .comm-side .about,.comm-side .side-card:last-child:not(.me-card){display:none}
  .comm-tabs{margin-top:16px}
}
[data-theme="dark"] .comm-cover{background:#22313F; border-bottom:1px solid var(--line)}

/* ---------- posts, Facebook style ---------- */
.post.fb{margin-bottom:14px; overflow:visible}
.post.fb .post-head{padding:14px 16px 0}
.post.fb .post-content{padding:10px 16px 0}
.post.fb .post-title{font-size:1.1rem; font-weight:700; margin-bottom:4px}
.post.fb h1.post-title{font-size:1.4rem}
.post.fb .post-body{font-size:.98rem}
.post.fb .post-body.clamp{-webkit-line-clamp:6}
.see-more{background:none; border:0; padding:0; margin-top:2px; font:inherit; font-size:.92rem; font-weight:600; color:var(--text-2); cursor:pointer}
.see-more:hover{text-decoration:underline}
.pinned-word{display:inline-flex; align-items:center; gap:3px}
.pinned-word svg{width:12px; height:12px}
.pmenu-wrap{position:relative; margin-left:auto; align-self:flex-start}
.pmenu{position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:170px; padding:6px; border-radius:12px; background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow-lg)}
.pmenu button{display:block; width:100%; text-align:left; padding:9px 12px; border:0; border-radius:8px; background:none; cursor:pointer; font-size:.92rem; color:var(--text)}
.pmenu button:hover{background:var(--fill)}
.pmenu button.danger{color:var(--bad)}
/* photos */
.media{display:block; width:100%; margin-top:12px; padding:0; border:0; background:var(--sunk); cursor:zoom-in}
.media.one img{width:100%; height:auto; max-height:min(75vh,720px); object-fit:contain; margin:0 auto}
.media.grid{display:grid; gap:3px; cursor:default}
.media.grid.n2{grid-template-columns:1fr 1fr}
.media.grid.n3{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1/1}
.media.grid.n3 .mcell:first-child{grid-row:1 / span 2}
.media.grid.n4{grid-template-columns:1fr 1fr}
.mcell{position:relative; display:block; padding:0; border:0; background:var(--sunk); cursor:zoom-in; overflow:hidden; aspect-ratio:1/1}
.media.grid.n3 .mcell{aspect-ratio:auto}
.mcell img{width:100%; height:100%; object-fit:cover; transition:opacity .15s}
.mcell:hover img,.media.one:hover img{opacity:.94}
.mcell .more{position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,16,22,.55); color:#fff; font-size:1.9rem; font-weight:700}
/* counts + action bar */
.post-stats{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding:6px 16px 0; font-size:.88rem; color:var(--text-3)}
.ps-likes{display:inline-flex; align-items:center; gap:6px}
.ps-heart{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#EF4444; color:#fff}
.ps-heart svg{width:11px; height:11px; fill:currentColor}
.ps-cmts{background:none; border:0; padding:0; font:inherit; color:var(--text-3); cursor:pointer}
.ps-cmts:hover{text-decoration:underline; color:var(--text-2)}
.post-actions{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:6px 12px 0; padding:4px 0; border-top:1px solid var(--line)}
.pa{display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border:0; border-radius:8px; background:none; cursor:pointer; font-size:.94rem; font-weight:600; color:var(--text-2)}
.pa:hover{background:var(--fill)}
.pa svg{width:18px; height:18px}
.pa.pt-like.on{color:#EF4444}
.pa.pt-like.on svg{fill:currentColor}
.post.fb .post-actions + .inline-cmts{margin:0; padding:0 16px 6px}
.inline-cmts:not([hidden]){display:block; border-top:1px solid var(--line); margin:0 12px !important; padding:12px 4px 4px !important}
.inline-cmts .cm-list:empty{display:none}
.inline-cmts .cm{padding:10px 0}
.inline-cmts .cm-form{margin:8px 0 10px}
.inline-cmts .cm-list + .cm-form{margin-top:10px}
.post.fb > *:last-child:not(.inline-cmts){margin-bottom:6px}
.post.fb{padding-bottom:6px}
/* composer photos */
.composer-imgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:12px}
.composer-imgs .ci{position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--sunk)}
.composer-imgs .ci img{width:100%; height:100%; object-fit:cover}
.composer-imgs .ci .icon-btn{position:absolute; top:4px; right:4px; width:26px; height:26px; color:#fff; background:rgba(10,16,22,.7)}
.composer-imgs .ci.loading{display:grid; place-items:center}
/* full-screen photo viewer */
.viewer{position:fixed; inset:0; z-index:150; display:grid; place-items:center; background:rgba(5,8,12,.94); animation:fade .2s; touch-action:pan-y}
.viewer img{max-width:94vw; max-height:88vh; object-fit:contain; user-select:none; -webkit-user-drag:none}
.viewer button{position:absolute; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer}
.viewer button:hover{background:rgba(255,255,255,.22)}
.viewer button:disabled{opacity:.25; cursor:default}
.viewer button svg{width:20px; height:20px}
.vw-x{top:16px; right:16px}
.vw-prev{left:16px; top:50%; margin-top:-22px}
.vw-next{right:16px; top:50%; margin-top:-22px}
.vw-n{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:.9rem; font-variant-numeric:tabular-nums}

/* ---------- achievements in color ---------- */
.ach{--c:var(--accent)}
.ach-ic{position:relative; background:var(--c); color:#fff}
.ach.locked .ach-ic{background:color-mix(in srgb, var(--c) 16%, transparent); color:var(--c)}
.ach.locked{border-style:solid; background:var(--elev)}
[data-theme="light"] .ach.locked{border-color:transparent; box-shadow:var(--shadow)}
.ach.locked b{color:var(--text)}
.ach-lock{position:absolute; right:-5px; bottom:-5px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--elev); color:var(--text-2); box-shadow:0 0 0 1px var(--line-2)}
.ach-lock svg{width:10px; height:10px}
.celebrate .cel-ic{background:var(--c, var(--accent)); color:#fff}
.post-stats:empty{display:none}
.post-stats:empty + .post-actions{margin-top:10px}
.ach.locked .ach-ic{background:color-mix(in srgb, var(--c) 20%, transparent); color:color-mix(in srgb, var(--c) 82%, var(--text))}
.ach-ic svg{stroke-width:2.2}
[data-theme="dark"] .ach.locked .ach-ic{background:color-mix(in srgb, var(--c) 26%, transparent); color:color-mix(in srgb, var(--c) 80%, #fff)}
/* achievements as colorful 3D emojis */
.ach-ic{width:46px; height:46px; border-radius:14px; background:color-mix(in srgb, var(--c) 16%, transparent)}
[data-theme="dark"] .ach-ic{background:color-mix(in srgb, var(--c) 24%, transparent)}
.ach-ic img.emo{width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.ach.locked .ach-ic{background:var(--fill)}
.ach.locked .ach-ic img.emo{filter:grayscale(.85); opacity:.6}
.cel-ic{background:color-mix(in srgb, var(--c, var(--accent)) 18%, var(--elev)) !important}
.cel-ic img.emo{width:34px; height:34px; object-fit:contain}
.ach-ic{width:48px; height:48px; background:var(--sunk)}
[data-theme="dark"] .ach-ic{background:rgba(255,255,255,.07)}
.ach-ic img.emo{width:36px; height:36px; filter:saturate(1.25) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.ach.locked .ach-ic{background:var(--fill)}
.ach.locked .ach-ic img.emo{filter:grayscale(.85); opacity:.6}

/* ---------- ranks ---------- */
img.rank-img{display:inline-block; width:auto; height:20px; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.rank-tag{display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:600; color:var(--text-2); white-space:nowrap}
.rank-tag img.rank-img{height:16px}
.admin-tag{display:inline-flex; align-items:center; padding:1px 7px; border-radius:6px; font-size:.72rem; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--navy); white-space:nowrap}
[data-theme="dark"] .admin-tag{color:var(--coal); background:var(--yellow)}
.lvl-badge{min-width:0; height:auto; padding:0; border-radius:0; background:none !important; box-shadow:none; right:-5px; bottom:-5px}
.lvl-badge img.rank-img{height:17px}
.av-wrap.sm .lvl-badge img.rank-img{height:13px}
.av-wrap.lg .lvl-badge img.rank-img{height:20px}
.av-wrap.xl .lvl-badge{right:-6px; bottom:-6px; box-shadow:none}
.av-wrap.xl .lvl-badge img.rank-img{height:36px}
.mc-rank{display:flex !important; align-items:center; gap:6px}
.mc-rank img.rank-img{height:20px}
.sc-rank{display:flex !important; justify-content:center; height:1.6rem; align-items:center}
.sc-rank img.rank-img{height:24px}
.lv-row img.lv-img{height:26px}
.pc-rank{display:inline-flex; align-items:center; gap:6px; vertical-align:middle}
.pc-rank img.rank-img{height:22px}
.pc-rank b{font-weight:600; color:var(--text)}
.lb-rank{display:flex !important; align-items:center; gap:4px}
.lb-rank img.rank-img{height:14px}
.cel-ic img.rank-img{height:36px}
.ach-ic img.rank-img.emo{width:auto; height:34px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.ach.locked .ach-ic img.rank-img.emo{filter:grayscale(.85); opacity:.6}
.cm-meta .rank-tag,.post-name .rank-tag{margin-left:2px}
.composer-email{margin-top:12px; border-bottom:0}
.composer-email small{display:block; margin-left:0}
#sv{flex:none}

/* ---------- certificates ---------- */
/* The certificate itself is always the light paper design, also in dark mode. */
.cert-list{display:grid; gap:18px}
.cert-card{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:22px; align-items:center; padding:18px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); box-shadow:var(--shadow)}
.cert-pic{background:#FDFCF8; border-radius:6px; overflow:hidden; line-height:0; aspect-ratio:1123/794; display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cert-pic svg{width:100%; height:auto; display:block}
.cert-info h3{font-size:1.25rem; font-weight:700; letter-spacing:-.01em; margin:4px 0 6px}
.cert-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.cert-claim{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; border-color:var(--accent)}
.cert-claim h3{margin-bottom:4px}
.cert-preview{margin:0 auto 6px; max-width:min(100%, calc(52vh * 1.414))} /* keeps the confirm button on screen */
.list-row .lthumb.cert-ic{background:var(--fill); color:var(--tint)}
.list-row .lthumb.cert-ic svg{width:26px; height:26px}
.cert-cele{text-align:center}
.cert-cele-ic{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:var(--fill); color:var(--tint)}
.cert-cele-ic svg{width:34px; height:34px}
.cert-cele p{margin:0 0 12px}
.cert-cele p small{display:block; color:var(--text-3); font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.cert-cele p b{display:block; font-size:1.15rem}
.outline-cert{display:flex; gap:10px; align-items:center; margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--fill); color:var(--text)}
.outline-cert svg{width:22px; height:22px; flex:none; color:var(--text-3)}
.outline-cert.on svg{color:var(--tint)}
.outline-cert b{display:block; font-size:.86rem; font-weight:600}
.outline-cert small{display:block; font-size:.78rem; color:var(--text-3)}
@media (max-width:760px){.cert-card{grid-template-columns:1fr; padding:14px} .cert-claim{flex-direction:column; align-items:flex-start}}

/* ---------- offers (Unlock more tiles, mini landing page) ---------- */
.ocard .oprice{font-size:1rem; font-weight:700; color:var(--text); letter-spacing:-.01em}

.offer .o-hero{padding-bottom:26px}
.offer .o-flags{margin-top:16px}
.o-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start; padding-bottom:30px}
.o-side{position:sticky; top:84px}
.o-media{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--sunk); aspect-ratio:16/9; margin-bottom:26px}
.o-media img,.o-media iframe{width:100%; height:100%; object-fit:cover; border:0; display:block}
.o-desc{margin-top:0}
.o-sec{margin-top:40px}
.o-sec .h2{margin-bottom:14px}
.o-inc{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line)}
.o-inc:last-child{border-bottom:0}
.o-inc .lthumb{width:84px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; flex:none; background:var(--navy); display:grid; place-items:center; color:#fff; font-weight:700}
.o-inc .lthumb img{width:100%; height:100%; object-fit:cover}
.o-inc-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.o-inc-main b{font-weight:600; line-height:1.3}
.o-inc-main small{color:var(--text-3); font-size:.84rem}
.o-bonuses{display:grid; gap:12px}
.o-bonus{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line)}
.o-bonus b{font-weight:600}
.o-bonus p{margin-top:3px; color:var(--text-2); font-size:.94rem}
.o-tick{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--a, var(--accent)); color:#fff}
.o-tick svg{width:13px; height:13px}
.o-tsts{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.o-tst{margin:0; padding:18px 20px; border-radius:var(--radius); background:var(--elev); border:1px solid var(--line)}
.o-tst blockquote{margin:0; font-size:1rem; line-height:1.6}
.o-tst blockquote::before{content:'\201C'}
.o-tst blockquote::after{content:'\201D'}
.o-tst figcaption{margin-top:10px; font-size:.86rem; font-weight:600; color:var(--text-2)}
.o-faqs{border-radius:var(--radius); background:var(--elev); border:1px solid var(--line); overflow:hidden}
.o-faq{border-bottom:1px solid var(--line)}
.o-faq:last-child{border-bottom:0}
.o-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; font-weight:600}
.o-faq summary::-webkit-details-marker{display:none}
.o-faq summary:hover{background:var(--fill)}
.o-chev{display:inline-grid; color:var(--text-3); transition:transform .2s var(--ease)}
.o-chev svg{width:16px; height:16px}
.o-faq[open] .o-chev{transform:rotate(180deg)}
.o-faq .notes{margin:0; padding:0 18px 6px; color:var(--text-2)}
.o-price{padding:24px}
.o-amt{font-family:var(--font-display); font-size:2.3rem; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.o-meta{margin-top:8px; font-size:.9rem; color:var(--text-2)}
.o-act{display:grid; gap:10px; margin-top:20px}
.o-owned{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ok)}
.o-owned svg{width:16px; height:16px}
.o-secure{display:flex; gap:8px; margin-top:16px; font-size:.8rem; line-height:1.45; color:var(--text-3)}
.o-secure svg{flex:none; margin-top:2px}
.o-price .co-test{margin-top:14px}
.o-req{display:flex; gap:8px; font-size:.92rem; line-height:1.5; color:var(--text-2)}
.o-req svg{flex:none; margin-top:4px}
.o-req a{color:var(--tint); text-decoration:underline; text-underline-offset:3px}
.o-paid{text-align:center}
.o-link{border:0; background:none; padding:0; font:inherit; color:var(--tint); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.o-final{display:none; margin-top:40px}
.o-done{max-width:620px; margin:0 auto; padding:70px 0 60px; text-align:center}
.o-done .sub{margin-left:auto; margin-right:auto}
.o-done .list{margin-top:26px; text-align:left}
.o-done-ic{width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--ok); color:#fff; animation:rise .5s var(--ease) both}
.o-done-ic svg{width:30px; height:30px}
.o-go{color:var(--text-3)}
.o-go svg{width:16px; height:16px}
.pub-offer{min-height:100vh}
@media (max-width:900px){
  .o-grid{grid-template-columns:1fr; gap:0}
  .o-side{position:static; order:-1; margin-bottom:26px}
  .o-final{display:block}
}
@media (max-width:560px){.o-inc .lthumb{width:64px}}

/* ---------- surprise gift (hidden bonus from an offer) ---------- */
.gift-bg{position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:20px; background:rgba(10,16,22,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade .25s}
.gift-bg.out{animation:giftOut .24s ease forwards}
@keyframes giftOut{to{opacity:0}}
.gift{position:relative; width:100%; max-width:400px; max-height:calc(100vh - 40px); overflow-y:auto; padding:30px 26px 26px; border-radius:24px; background:var(--elev); box-shadow:var(--shadow-lg); text-align:center; overflow:hidden; animation:pop .32s var(--ease)}
.gift-kicker{display:block; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--tint)}
.gift-h{margin-top:6px; font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.gift-tap{margin-top:6px; font-size:.88rem; color:var(--text-3)}
.gift-later{margin-top:14px; border:0; background:none; font:inherit; font-size:.84rem; color:var(--text-3); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.gift-later:hover{color:var(--text-2)}

/* the box: yellow body, navy band, lid with a bow */
.gift-box{position:relative; display:block; width:150px; height:150px; margin:26px auto 14px; border:0; padding:0; background:none; cursor:pointer; border-radius:16px; animation:giftWiggle 2.6s var(--ease) .6s infinite}
.gift-box:focus-visible{outline:none; box-shadow:var(--focus)}
.gb-body{position:absolute; left:14px; right:14px; bottom:0; height:96px; border-radius:6px 6px 12px 12px; background:var(--accent); box-shadow:inset 0 -10px 0 rgba(0,0,0,.08)}
.gb-band{position:absolute; left:50%; bottom:0; width:24px; height:96px; transform:translateX(-50%); background:var(--navy)}
.gb-lid{position:absolute; left:4px; right:4px; top:30px; height:30px; border-radius:7px; background:var(--accent); box-shadow:0 4px 0 rgba(0,0,0,.1); z-index:2; transform-origin:20% 100%}
.gb-lid::after{content:''; position:absolute; left:50%; top:0; bottom:0; width:24px; transform:translateX(-50%); background:var(--navy)}
.gb-bow{position:absolute; left:50%; top:-24px; width:0; height:0; z-index:3}
.gb-bow i{position:absolute; top:-4px; width:36px; height:28px; border:8px solid var(--navy); border-radius:50% 50% 0 50%}
.gb-bow i:first-child{right:0; transform:rotate(-20deg)}
.gb-bow i:last-child{left:0; border-radius:50% 50% 50% 0; transform:rotate(20deg)}
[data-theme="dark"] .gb-band,[data-theme="dark"] .gb-lid::after{background:var(--text)}
[data-theme="dark"] .gb-bow i{border-color:var(--text)}
[data-theme="dark"] .gift-sparks i:nth-child(3n){background:var(--text)}
@keyframes giftWiggle{0%,70%,100%{transform:rotate(0)} 76%{transform:rotate(-6deg)} 82%{transform:rotate(5deg)} 88%{transform:rotate(-3deg)} 94%{transform:rotate(2deg)}}

/* opening: lid pops off, box sinks, sparks burst, then the course card rises */
.gift.opening .gift-box{animation:none}
.gift.opening .gb-lid{animation:lidOff .55s cubic-bezier(.2,.7,.3,1) forwards}
.gift.opening .gb-body,.gift.opening .gb-band{animation:boxSink .6s ease .1s forwards}
.gift.opening .gift-tap,.gift.opening .gift-later,.gift.opening .gift-closed .gift-h,.gift.opening .gift-closed .gift-kicker,.gift.opening .gift-note{transition:opacity .3s; opacity:0}
@keyframes lidOff{to{transform:translate(30px,-120px) rotate(32deg); opacity:0}}
@keyframes boxSink{to{transform:translateY(16px) scale(.9); opacity:0}}
.gift-sparks{position:absolute; left:50%; top:150px; width:0; height:0; pointer-events:none}
.gift-sparks i{position:absolute; left:calc(var(--s) / -2); top:calc(var(--s) / -2); width:var(--s); height:var(--s); border-radius:50%; background:var(--accent); opacity:0}
.gift-sparks i:nth-child(3n){background:var(--navy); border-radius:2px}
.gift-sparks i:nth-child(4n){background:var(--ok)}
.gift.opening .gift-sparks i{animation:spark .9s cubic-bezier(.15,.7,.3,1) .15s forwards}
@keyframes spark{0%{opacity:1; transform:rotate(var(--a)) translateY(0) scale(.4)} 70%{opacity:1} 100%{opacity:0; transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1)}}
.gift-open{animation:giftRise .5s var(--ease) both}
@keyframes giftRise{from{opacity:0; transform:translateY(18px) scale(.97)}}
.gift-cover{margin:16px auto 4px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--navy); display:grid; place-items:center; box-shadow:var(--shadow)}
.gift-cover img{width:100%; height:100%; object-fit:cover}
.gift-cover span{font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:#fff}
.gift-open .gift-h{margin-top:14px; font-size:1.3rem}
.gift-sub{margin-top:6px; font-size:.94rem; line-height:1.5; color:var(--text-2)}
.gift-meta{margin-top:8px; font-size:.84rem; color:var(--text-3)}
.gift-acts{display:grid; gap:10px; margin-top:20px}
@media (prefers-reduced-motion:reduce){.gift-box{animation:none} .gift.opening .gb-lid,.gift.opening .gb-body,.gift.opening .gb-band,.gift.opening .gift-sparks i{animation:none}}

/* the personal note above the first gift: photo, "Hey <name>,", message, signature, then the box */
.gift-note{display:flex; flex-direction:column; align-items:center}
/* the cut-out photo sits straight on the card; its straight bottom edge fades into it */
.gift-photo{width:250px; max-width:78%; margin-top:-8px; animation:noteIn .5s var(--ease) both}
.gift-photo img{display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 98%); mask-image:linear-gradient(to bottom, #000 72%, transparent 98%)}
.gift-hey{margin-top:4px; font-family:var(--font-display); font-size:1.45rem; font-weight:700; letter-spacing:-.02em; animation:noteIn .5s var(--ease) .15s both}
.gift-msg{margin-top:8px; font-size:.98rem; line-height:1.6; color:var(--text-2); animation:noteIn .5s var(--ease) .3s both}
.gift-sign{margin-top:12px; font-family:"Great Vibes", "Snell Roundhand", "Apple Chancery", cursive; font-size:2.3rem; line-height:1.1; color:var(--text); clip-path:inset(0 100% 0 0); animation:signWrite 1.3s cubic-bezier(.45,.05,.4,1) .7s forwards}
.gift-from{margin-top:2px; font-size:.84rem; color:var(--text-3); animation:noteIn .5s var(--ease) 1.6s both}
@keyframes noteIn{from{opacity:0; transform:translateY(10px)}}
@keyframes signWrite{to{clip-path:inset(0 0 0 0)}}
.gift.with-note .gift-box{width:126px; height:126px; margin:18px auto 10px; animation:boxIn .55s cubic-bezier(.3,1.4,.5,1) 1.9s both, giftWiggle 2.6s var(--ease) 3s infinite}
.gift.with-note .gb-body{left:12px; right:12px; height:80px}
.gift.with-note .gb-band{width:20px; height:80px}
.gift.with-note .gb-lid{top:26px; height:26px}
.gift.with-note .gb-lid::after{width:20px}
.gift.with-note .gift-tap,.gift.with-note .gift-later{animation:noteIn .4s var(--ease) 2.3s both}
@keyframes boxIn{from{opacity:0; transform:translateY(24px) scale(.6)}}
.gift.opening.with-note .gift-box{animation:none}
@media (prefers-reduced-motion:reduce){.gift-photo,.gift-hey,.gift-msg,.gift-from,.gift.with-note .gift-box,.gift.with-note .gift-tap,.gift.with-note .gift-later{animation:none} .gift-sign{animation:none; clip-path:none}}

/* "Open next gift": same dialog stays up, the next box drops in and opens by itself */
.gift-bg.chained,.gift-bg.chained .gift{animation:none}
.gift.auto .gift-box{animation:boxIn .55s cubic-bezier(.3,1.4,.5,1) both}
.gift.auto .gift-closed .gift-h,.gift.auto .gift-closed .gift-kicker{animation:noteIn .4s var(--ease) both}
.gift-count{color:var(--text-3); font-weight:500}
@media (prefers-reduced-motion:reduce){.gift.auto .gift-box,.gift.auto .gift-closed .gift-h,.gift.auto .gift-closed .gift-kicker{animation:none}}
@media (max-width:420px){.topbar .students{font-size:.74rem} .with-side .topbar .nav a{padding:8px 6px}}

/* ---------- platform tour (startTour in app.js) ---------- */
html.touring{overflow:hidden}
.tour{position:fixed; inset:0; z-index:215; animation:fade .25s}
.tour.out{opacity:0; transition:opacity .2s}
.tour-hole{position:fixed; border-radius:12px; pointer-events:none; box-shadow:0 0 0 200vmax rgba(10,16,22,.66);
  transition:left .38s var(--ease), top .38s var(--ease), width .38s var(--ease), height .38s var(--ease)}
[data-theme="dark"] .tour-hole{box-shadow:0 0 0 200vmax rgba(0,0,0,.66)}
.tour.lit .tour-hole{outline:2px solid var(--accent); outline-offset:2px}
.tour-card{position:fixed; width:340px; max-width:calc(100vw - 32px); padding:20px 20px 16px; border-radius:18px; background:var(--elev); box-shadow:var(--shadow-lg);
  transition:left .38s var(--ease), top .38s var(--ease)}
[data-theme="dark"] .tour-card{border:1px solid var(--line-2)}
.tour-card.say{left:50%; top:50%; transform:translate(-50%,-50%); width:400px; padding:26px 24px 18px; text-align:center}
.tour:not(.mobile) .tour-card.stop::before{content:""; position:absolute; left:-7px; top:calc(var(--ay, 34px) - 7px); width:14px; height:14px; border-radius:3px; background:var(--elev); transform:rotate(45deg)}
.tour-card.fwd > *{animation:tourIn .3s var(--ease) both}
.tour-card.bwd > *{animation:tourBack .3s var(--ease) both}
@keyframes tourIn{from{opacity:0; transform:translateX(14px)}}
@keyframes tourBack{from{opacity:0; transform:translateX(-14px)}}
.tour-who{display:flex; align-items:center; gap:10px; margin-bottom:14px; text-align:left}
.tour-who b{display:block; font-size:.92rem}
.tour-who small{display:block; font-size:.8rem; color:var(--text-3)}
.tour-face{flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--sunk)}
.tour-face img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; transform:scale(1.4); transform-origin:50% 24%}
.say .tour-who{flex-direction:column; gap:8px; text-align:center}
.say .tour-face{width:84px; height:84px; box-shadow:0 0 0 4px var(--elev), 0 0 0 6px var(--accent)}
.tour-card h2{display:flex; align-items:center; gap:10px; font-size:1.18rem; font-weight:650; letter-spacing:-.015em}
.say h2,.tour.mobile .tour-card h2{justify-content:center}
.tour-ic{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink)}
.tour-ic svg{width:16px; height:16px}
.tour-card p{margin:8px 0 18px; font-size:.95rem; line-height:1.55; color:var(--text-2)}
.tour-foot{display:flex; align-items:center; gap:8px}
.tour-sp{flex:1}
.tour-count{font-size:.8rem; font-weight:600; color:var(--text-3)}
.tour-skip{padding:6px 2px; border:0; background:none; font:inherit; font-size:.84rem; color:var(--text-3); cursor:pointer}
.tour-skip:hover{color:var(--text-2)}
.tour-count + .tour-skip{margin-left:6px}
/* 900px and below: no sidebar to point at, so the steps are swipe cards at the bottom */
.tour.mobile{background:rgba(10,16,22,.66)}
[data-theme="dark"] .tour.mobile{background:rgba(0,0,0,.66)}
.tour.mobile .tour-hole{display:none}
.tour.mobile .tour-card{left:50%; top:auto; bottom:16px; transform:translateX(-50%); width:calc(100% - 32px); max-width:420px; padding:22px 20px 16px; text-align:center; touch-action:pan-y}
.tour.mobile .say .tour-face{width:72px; height:72px}
.tour-art{display:flex; justify-content:center; margin:2px 0 14px}
.tour-art span{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink)}
.tour-art svg{width:30px; height:30px}
.tour-dots{display:flex; justify-content:center; gap:6px; margin:-4px 0 16px}
.tour-dots i{width:6px; height:6px; border-radius:3px; background:var(--line-2); transition:width .25s var(--ease), background .25s}
.tour-dots i.on{width:18px; background:var(--accent)}