/* =========================================================
   INDIA P2P PROCESSING ACADEMY — styles (brand tokens from the site)
   ========================================================= */
:root {
  --accent: #3B82F6; --accent-2: #6EC1FF; --violet: #8B5CF6; --mint: #2DD4BF; --gold: #FFC46B; --danger: #FF6B81;
  --grad: linear-gradient(135deg, #3B82F6 0%, #6EC1FF 55%, #8B5CF6 100%);
  --grad-mint: linear-gradient(135deg, #2DD4BF 0%, #3B82F6 100%);
  --grad-gold: linear-gradient(135deg, #FFC46B 0%, #FF8A5B 100%);
  --bg: #05080F; --bg-2: #080D1A; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075); --solid: #0C1322;
  --stroke: rgba(255,255,255,.09); --stroke-2: rgba(255,255,255,.16);
  --text: #EEF3FF; --soft: #B7C4E0; --mute: #7C8AAB;
  --r: 22px; --r-sm: 16px; --ease: cubic-bezier(.22,1,.36,1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Manrope", "Inter", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); letter-spacing: -.02em; }
.muted { color: var(--mute); } .small { font-size: 13px; } .center { text-align: center; }
.pos { color: var(--mint); } .neg { color: var(--danger); } .gold { color: var(--gold); }

/* background */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg .g1 { position: absolute; width: 520px; height: 520px; left: -180px; top: -220px; background: radial-gradient(closest-side, rgba(59,130,246,.32), transparent); }
.bg .g2 { position: absolute; width: 520px; height: 520px; right: -240px; top: 30%; background: radial-gradient(closest-side, rgba(139,92,246,.18), transparent); }
.bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, #000 0%, transparent 45%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 45%); }

/* layout */
#app { max-width: 520px; margin: 0 auto; padding: 0 16px calc(96px + var(--safe-b)); }
body.no-nav #app { padding-bottom: calc(110px + var(--safe-b)); }
.screen > * + * { margin-top: 14px; }
.screen.in-r { animation: inR .42s var(--ease); } .screen.in-l { animation: inL .42s var(--ease); } .screen.in-f { animation: inF .35s var(--ease); }
@keyframes inR { from { opacity: 0; transform: translateX(26px); } }
@keyframes inL { from { opacity: 0; transform: translateX(-26px); } }
@keyframes inF { from { opacity: 0; transform: translateY(8px); } }

/* top bar */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; background: linear-gradient(180deg, rgba(5,8,15,.94) 60%, rgba(5,8,15,0)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bar-t { flex: 1; text-align: center; }
.brand { display: flex; align-items: center; gap: 10px; flex: 1; }
.brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--stroke-2), 0 6px 18px rgba(59,130,246,.35); }
.brand b { display: block; font: 700 13px/1.15 var(--display); }
.brand span { display: block; font: 600 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--grad-mint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lang { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke); font: 700 12px var(--mono); }
.lang i { font-style: normal; color: var(--mute); font-weight: 500; }
.ibtn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--stroke); }

/* icons */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* type */
.display { font: 800 30px/1.08 var(--display); letter-spacing: -.025em; }
.display.sm { font-size: 23px; line-height: 1.15; }
.lead { color: var(--soft); font-size: 16px; }
.eyebrow { display: flex; align-items: center; gap: 6px; font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow .ic { width: 14px; height: 14px; }
.eyebrow.mint { color: var(--mint); } .eyebrow.gold { color: var(--gold); } .eyebrow.center { justify-content: center; }

/* cards */
.card { display: block; width: 100%; padding: 18px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border: 1px solid var(--stroke); box-shadow: 0 18px 40px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.card.glow { position: relative; border-color: transparent; background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(135deg, rgba(45,212,191,.7), rgba(59,130,246,.6) 45%, rgba(139,92,246,.7)) border-box; box-shadow: 0 30px 70px -30px rgba(59,130,246,.55); }
button.card { transition: transform .2s var(--ease), border-color .2s; }
button.card:active:not(:disabled) { transform: scale(.98); }

/* buttons */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 20px; border-radius: 16px; font: 700 15.5px var(--display); text-align: center; transition: transform .15s var(--ease), opacity .2s, box-shadow .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .38; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 14px 34px -12px rgba(59,130,246,.75), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.gold { background: var(--grad-gold); color: #1a1205; box-shadow: 0 14px 34px -12px rgba(255,170,90,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.ghost { background: var(--surface); border: 1px solid var(--stroke-2); }
.btn.sm { min-height: 42px; width: auto; padding: 0 14px; font-size: 13.5px; border-radius: 12px; gap: 6px; }
.btn.sm .ic { width: 16px; height: 16px; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-weight: 600; font-size: 14px; padding: 6px 0; }
.link .ic { width: 18px; height: 18px; }
.link.danger { color: var(--mute); display: flex; margin: 26px auto 0; }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 16px calc(14px + var(--safe-b)); background: linear-gradient(180deg, rgba(5,8,15,0), rgba(5,8,15,.92) 30%); }
.sticky > * { max-width: 488px; margin-left: auto; margin-right: auto; }
.sticky.col { display: flex; flex-direction: column; gap: 10px; }
.sticky.col > * { width: 100%; }

/* pills & chips */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--soft); }
.pill .ic { width: 13px; height: 13px; }
.pill.in { color: var(--mint); border-color: rgba(45,212,191,.35); background: rgba(45,212,191,.1); }
.pill.out { color: var(--accent-2); border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.12); }
.pill.gold { color: var(--gold); border-color: rgba(255,196,107,.35); background: rgba(255,196,107,.1); }
.pill.soon { color: var(--mute); }
.chips { display: flex; gap: 6px; }
.chip-s { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font: 700 13px var(--mono); background: var(--surface); border: 1px solid var(--stroke); }
.chip-s .ic { width: 15px; height: 15px; }
.chip-s.fire { color: #FF9F5B; } .chip-s.xp { color: var(--gold); }

/* hello / xp */
.hello { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.hello-t { flex: 1; min-width: 0; }
.hello-t span { display: block; font-size: 13px; }
.hello-t b { display: block; font: 800 20px/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.ava.ini { display: grid; place-items: center; background: var(--grad); font: 800 20px var(--display); }
.xpbar { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--stroke); }
.xpbar-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--mute); margin-bottom: 8px; }
.rank { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font: 700 13px var(--display); }
.rank .ic { width: 16px; height: 16px; }
.rank.big { font-size: 15px; justify-content: center; display: flex; }
.track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 99px; background: var(--grad-mint); box-shadow: 0 0 14px rgba(45,212,191,.6); transition: width .8s var(--ease); }
.track.warn i { background: var(--grad-gold); box-shadow: 0 0 14px rgba(255,170,90,.5); }

/* hero */
.hero p { color: var(--soft); margin: 8px 0 16px; }
.hero .display { margin-top: 6px; }
.hero-media { margin: -18px -18px 10px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(59,130,246,.22), transparent 70%); }
.hero-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.hero-row p { margin: 4px 0 0; }
.meta { display: block; margin-top: 10px; text-align: center; color: var(--mute); font: 500 11.5px var(--mono); }
.hero-art { width: 100%; height: auto; display: block; }
.hero-art .grid line { stroke: rgba(110,193,255,.13); stroke-width: 1; }
.hero-art .lbl, .cycle .lbl { fill: var(--soft); font: 600 10.5px var(--font); }
.hero-art .chip rect { fill: rgba(12,19,34,.92); stroke: rgba(110,193,255,.5); }
.hero-art .chip text { fill: #fff; font: 700 11px var(--mono); text-anchor: middle; }
.hero-art .chip.mint rect { stroke: rgba(45,212,191,.7); } .hero-art .chip.mint text { fill: var(--mint); }
.hero-art .chip { animation: float 3.2s ease-in-out infinite; } .hero-art .chip.mint { animation-delay: -1.6s; }
.dash { stroke-dasharray: 7 7; animation: dash 1.2s linear infinite; }
.dot { filter: drop-shadow(0 0 6px #6EC1FF); }
.pulse { animation: pulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes dash { to { stroke-dashoffset: -28; } }
@keyframes pulse { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes float { 50% { transform: translateY(-4px); } }

/* sections */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-top: 26px !important; }
.sec-h h3 { font: 800 19px var(--display); letter-spacing: -.01em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2.tight { margin-top: 14px; }
.row2.tight .btn { width: 100%; }
.mini { padding: 15px; }
.mini b { display: block; font: 700 15px/1.2 var(--display); margin-top: 10px; }
.mini span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 4px; line-height: 1.4; }
.mini.done { opacity: .6; }
.mini-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(59,130,246,.14); color: var(--accent-2); border: 1px solid rgba(59,130,246,.3); flex: none; }
.mini-ic.gold { background: rgba(255,159,91,.13); color: #FF9F5B; border-color: rgba(255,159,91,.3); }

/* modules */
.mods { display: flex; flex-direction: column; gap: 10px; }
.mod { display: flex; align-items: center; gap: 12px; padding: 14px; }
.mod-num { font-size: 11px; color: var(--mute); width: 18px; }
.mod-t { flex: 1; min-width: 0; }
.mod-t b { display: block; font: 700 15px/1.25 var(--display); }
.mod-t span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.mod.soon { opacity: .55; }
.mod-art { --c: #3B82F6; position: relative; width: 50px; height: 50px; flex: none; border-radius: 15px; display: grid; place-items: center; color: var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 35%, transparent), transparent 75%), #0C1322; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 22px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.08); }
.mod-art .ic { width: 24px; height: 24px; filter: drop-shadow(0 0 6px var(--c)); }
.mod-head { text-align: center; padding: 10px 0 6px; }
.mod-head .mod-art { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 14px; }
.mod-head .mod-art .ic { width: 34px; height: 34px; }
.mod-head .eyebrow { justify-content: center; }
.mod-head .display { margin: 6px 0; }
.ring { flex: none; }
.ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s var(--ease); filter: drop-shadow(0 0 5px rgba(45,212,191,.6)); }
.ring text { fill: var(--text); font: 800 13px var(--display); }
.lessons { display: flex; flex-direction: column; gap: 10px; }
.lsn { display: flex; align-items: center; gap: 14px; padding: 15px; }
.lsn > div { flex: 1; }
.lsn b { display: block; font: 700 15px var(--display); }
.lsn span:not(.lsn-n) { font-size: 12.5px; color: var(--mute); }
.lsn-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--stroke-2); font-size: 13px; flex: none; }
.lsn.done .lsn-n { background: rgba(45,212,191,.15); color: var(--mint); border-color: rgba(45,212,191,.4); }
.lsn .go { color: var(--mute); width: 18px; }

/* final / cta */
.final { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.final > div:nth-child(2) { flex: 1; min-width: 180px; }
.final b { display: block; font: 600 14px/1.4 var(--font); margin-top: 3px; }
.final.locked { opacity: .6; }
.final .btn { width: 100%; }
.final-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,196,107,.12); color: var(--gold); border: 1px solid rgba(255,196,107,.35); box-shadow: 0 0 24px -8px var(--gold); }
.cta { display: flex; align-items: center; gap: 14px; margin-top: 26px !important; }
.cta > div { flex: 1; }
.cta p { color: var(--soft); font-size: 13.5px; margin-top: 4px; }
.foot { text-align: center; color: var(--mute); font-size: 12px; margin-top: 22px !important; }

/* onboarding */
.ob { padding-top: 18px; }
.ob > * + * { margin-top: 16px; }
.ob-dots { display: flex; gap: 6px; justify-content: center; }
.ob-dots i { width: 22px; height: 4px; border-radius: 4px; background: var(--stroke-2); transition: .3s; }
.ob-dots i.on { width: 36px; background: var(--grad-mint); }
.ob-hero { margin: 8px -16px 0; }
.ob-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 30px 0 6px; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35); color: var(--accent-2); box-shadow: 0 0 40px -10px var(--accent); }
.ob-ic .ic { width: 30px; height: 30px; }
.mentor-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke); font-size: 12.5px; color: var(--soft); }
.mentor-chip img { width: 30px; height: 30px; border-radius: 50%; }
.ob-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-feats div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--stroke); font-size: 12px; font-weight: 600; text-align: center; color: var(--soft); }
.ob-feats .ic { color: var(--mint); }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { position: relative; display: block; width: 100%; padding: 16px 50px 16px 18px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--stroke); transition: .2s var(--ease); }
.choice b { display: block; font: 700 16px var(--display); }
.choice span { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; }
.choice .radio { position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--stroke-2); transition: .2s; }
.choice.on { border-color: var(--accent); background: rgba(59,130,246,.1); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.choice.on .radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent-2) 0 5px, transparent 6px); }

/* lesson */
.segs { flex: 1; display: flex; gap: 4px; }
.segs i { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.1); transition: .4s var(--ease); }
.segs i.on { background: var(--mint); }
.segs i.cur { background: linear-gradient(90deg, var(--mint) 35%, rgba(255,255,255,.1) 35%); }
.segs.wide { margin-top: 0 !important; }
.lesson-body { padding-top: 6px; animation: inR .4s var(--ease); }
.lesson-body > * + * { margin-top: 14px; }
.vis { border-radius: var(--r); background: radial-gradient(120% 100% at 50% 0%, rgba(59,130,246,.16), transparent 70%), var(--surface); border: 1px solid var(--stroke); padding: 14px; overflow: hidden; }
.split .lane { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; position: relative; padding: 10px 0 22px; }
.split .who { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--solid); border: 1px solid var(--stroke-2); color: var(--soft); }
.split .who.you { color: var(--accent-2); border-color: rgba(59,130,246,.5); }
.split .line { height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.split .line i { position: absolute; top: 0; width: 40%; height: 100%; border-radius: 3px; animation: lane 1.6s linear infinite; }
.split .in .line i { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.split .out .line i { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.split .lane b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: 700 11px var(--mono); letter-spacing: .1em; color: var(--soft); }
.split .lane em { position: absolute; right: 0; top: -2px; font: 700 10.5px var(--mono); font-style: normal; color: var(--gold); }
@keyframes lane { from { left: -40%; } to { left: 100%; } }
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; align-items: center; gap: 12px; position: relative; padding: 7px 0; animation: inR .5s var(--ease) both; animation-delay: var(--d); }
.step span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--solid); border: 1px solid rgba(59,130,246,.45); color: var(--accent-2); flex: none; position: relative; z-index: 1; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 17.5px; top: 43px; height: 14px; width: 1.5px; background: rgba(110,193,255,.4); }
.step p { font-weight: 600; font-size: 14px; }
.step:last-child span { color: var(--mint); border-color: rgba(45,212,191,.5); }
.cycle { width: 100%; max-width: 320px; margin: 0 auto; display: block; }
.cycle .spin { transform-origin: 150px 100px; animation: spin 9s linear infinite; }
.cycle .ctext { fill: var(--text); font: 800 15px var(--display); } .cycle .ctext.dim { fill: var(--mute); font: 500 12px var(--font); }
@keyframes spin { to { transform: rotate(360deg); } }
.calc label { display: block; margin-bottom: 14px; }
.calc label span { display: flex; justify-content: space-between; font-size: 13px; color: var(--soft); margin-bottom: 8px; }
.calc label b { font: 700 13px var(--mono); color: var(--text); }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); outline: none; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(59,130,246,.35), 0 4px 10px rgba(0,0,0,.4); }
.calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-out div { padding: 12px; border-radius: 14px; background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.3); }
.calc-out span { display: block; font-size: 12px; color: var(--mute); }
.calc-out b { font: 800 20px var(--display); color: var(--mint); }
.vis small { display: block; margin-top: 10px; color: var(--mute); font-size: 11.5px; text-align: center; }
.compare .bar-row { display: grid; grid-template-columns: 70px 1fr 58px; align-items: center; gap: 10px; margin: 10px 0; font-size: 13px; font-weight: 600; }
.compare .bar { height: 14px; border-radius: 8px; background: rgba(255,255,255,.07); overflow: hidden; }
.compare .bar i { display: block; height: 100%; width: var(--w); background: var(--grad); border-radius: 8px; animation: grow 1.1s var(--ease); }
.compare b { font: 700 13px var(--mono); text-align: right; }
@keyframes grow { from { width: 0; } }
.mini-phone { max-width: 270px; margin: 0 auto; padding: 16px 12px; border-radius: 28px; background: #070B16; border: 1.5px solid var(--stroke-2); box-shadow: inset 0 0 0 5px #0C1322; }
.notif, .confirmed { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.07); font-size: 12px; }
.notif b, .confirmed b { display: block; font-size: 12.5px; } .notif span, .confirmed span { color: var(--mute); }
.notif { animation: drop .6s var(--ease) both; }
.confirmed { background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.4); color: var(--mint); animation: drop .6s var(--ease) 1s both; }
.auto-line { height: 26px; display: grid; place-items: center; } .auto-line i { width: 2px; height: 100%; background: linear-gradient(var(--accent-2), var(--mint)); animation: grow2 .5s .6s both; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes grow2 { from { transform: scaleY(0); } }
.checklist { display: flex; flex-direction: column; gap: 8px; }
.chk { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--solid); border: 1px solid var(--stroke); font-weight: 600; font-size: 14px; transition: .2s; }
.chk .box { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--stroke-2); display: grid; place-items: center; color: transparent; transition: .2s; }
.chk .box .ic { width: 15px; height: 15px; stroke-width: 3; }
.chk.on { border-color: rgba(45,212,191,.45); } .chk.on .box { background: var(--mint); border-color: var(--mint); color: #05201b; }
.smsv { display: grid; gap: 10px; }
.mini-order { padding: 12px; border-radius: 14px; background: var(--solid); border: 1px solid var(--stroke); }
.mo-row { display: flex; justify-content: space-between; font-size: 13px; margin-top: 6px; color: var(--soft); }
.hl { color: var(--mint); background: rgba(45,212,191,.12); border-radius: 6px; padding: 0 5px; }
.match { justify-self: center; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #05201b; box-shadow: 0 0 20px rgba(45,212,191,.6); margin: -4px 0; }
.match .ic { width: 16px; height: 16px; stroke-width: 3; }

/* tip */
.tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: linear-gradient(135deg, rgba(255,196,107,.1), rgba(255,138,91,.04)); border: 1px solid rgba(255,196,107,.25); }
.tip img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); flex: none; }
.tip p { font-size: 14px; color: var(--text); margin-top: 4px; }
.tip.big { flex-direction: column; align-items: center; text-align: center; padding: 30px 22px; margin-top: 20px !important; }
.tip.big img { width: 96px; height: 96px; box-shadow: 0 0 0 3px var(--gold), 0 0 50px -6px rgba(255,196,107,.6); margin-bottom: 8px; }
.tip.big p { font: 700 20px/1.4 var(--display); }
.sig { font: 600 28px "Caveat", cursive; color: var(--gold); margin-top: 10px; }

/* options */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--stroke); font-weight: 600; font-size: 14.5px; line-height: 1.35; transition: .2s var(--ease); }
.opt-k { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); font: 700 13px var(--mono); color: var(--soft); transition: .2s; }
.opt.sel { border-color: var(--accent); background: rgba(59,130,246,.12); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.opt.sel .opt-k { background: var(--accent); color: #fff; }
.opt.right { border-color: var(--mint); background: rgba(45,212,191,.12); } .opt.right .opt-k { background: var(--mint); color: #05201b; }
.opt.wrong { border-color: var(--danger); background: rgba(255,107,129,.1); animation: shake .4s; } .opt.wrong .opt-k { background: var(--danger); color: #fff; }
.opt.dim { opacity: .45; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.why { display: flex; gap: 12px; padding: 14px; border-radius: 16px; font-size: 14px; animation: inF .35s var(--ease); }
.why .ic { flex: none; margin-top: 2px; }
.why.ok { background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.35); } .why.ok .ic { color: var(--mint); }
.why.no { background: rgba(255,107,129,.08); border: 1px solid rgba(255,107,129,.3); } .why.no .ic { color: var(--danger); }
.hintbox { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,196,107,.08); border: 1px dashed rgba(255,196,107,.4); color: var(--gold); font-size: 14px; animation: inF .3s; }

/* shift */
.bals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bal { padding: 10px 10px 9px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); min-width: 0; transition: .3s; }
.bal span { display: block; font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal span em { font-style: normal; float: right; opacity: .7; }
.bal b { display: block; font-size: 15px; margin-top: 3px; white-space: nowrap; }
.bal.up { border-color: rgba(45,212,191,.5); box-shadow: 0 0 20px -6px var(--mint); } .bal.up b { color: var(--mint); }
.bal.dn { border-color: rgba(110,193,255,.45); box-shadow: 0 0 20px -6px var(--accent); } .bal.dn b { color: var(--accent-2); }
.blocks { display: flex; flex-direction: column; gap: 10px; }
.blk { padding: 13px 14px; border-radius: 16px; background: var(--solid); border: 1px solid var(--stroke); animation: inF .4s var(--ease) both; }
.blk:nth-child(2) { animation-delay: .08s; } .blk:nth-child(3) { animation-delay: .16s; } .blk:nth-child(4) { animation-delay: .24s; }
.blk-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.blk .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 5px 0; border-top: 1px dashed rgba(255,255,255,.07); }
.blk .row span { color: var(--mute); } .blk .row b { font-weight: 600; text-align: right; word-break: break-all; }
.blk.sms { background: linear-gradient(180deg, #0F1A2E, #0C1322); }
.sms-from { display: flex; align-items: center; gap: 6px; font: 700 11px var(--mono); letter-spacing: .08em; color: var(--accent-2); margin-bottom: 6px; }
.sms-from .ic { width: 15px; height: 15px; }
.blk.sms p, .sms p { font-size: 13px; line-height: 1.5; color: var(--text); }
.sms { padding: 12px; border-radius: 14px; background: #0F1A2E; border: 1px solid var(--stroke); }
.blk.chat { display: flex; gap: 10px; background: none; border: 0; padding: 0; }
.chat-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #334155, #1e293b); font: 700 14px var(--display); }
.bubble { padding: 10px 13px; border-radius: 4px 16px 16px 16px; background: #1A2337; font-size: 14px; max-width: 88%; }
.bubble .who { font: 700 11px var(--mono); color: var(--accent-2); margin-bottom: 2px; }
.shotw .eyebrow { margin-bottom: 8px; color: var(--mute); }
.shot { width: 170px; margin: 0 auto; padding: 18px 12px; border-radius: 18px; background: #F4F7FB; color: #0E1729; text-align: center; transform: rotate(-2deg); box-shadow: 0 16px 30px -10px rgba(0,0,0,.6); }
.shot-ok { width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; background: #16A34A; color: #fff; display: grid; place-items: center; }
.shot b { display: block; font: 800 22px var(--display); } .shot span { display: block; font-size: 12px; font-weight: 600; color: #16A34A; } .shot small { display: block; font-size: 10.5px; color: #64748b; margin-top: 4px; }
.blk.bank .eyebrow { color: var(--soft); }
.blk.bank p { font-size: 14px; }
.blk.bank.frozen { border-color: rgba(255,107,129,.45); background: rgba(255,107,129,.07); } .blk.bank.frozen .eyebrow { color: var(--danger); }
.blk.bank.limit .track { margin-top: 10px; }
.blk.device { display: flex; align-items: center; gap: 12px; }
.dev-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,107,129,.1); color: var(--danger); border: 1px solid rgba(255,107,129,.35); }
.blk.device b { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 2px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.blk.note { border-left: 3px solid var(--accent); } .blk.note.gold { border-left-color: var(--gold); } .blk.note.gold .eyebrow { color: var(--gold); }
.blk.note p { font-size: 14px; margin-top: 4px; }
.fb { animation: inF .4s var(--ease); }
.fb-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fb-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.fb-ic .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.fb.ok .fb-ic { background: var(--mint); color: #05201b; box-shadow: 0 0 26px rgba(45,212,191,.6); animation: popIn .5s var(--ease); }
.fb.no .fb-ic { background: var(--danger); color: #fff; box-shadow: 0 0 26px rgba(255,107,129,.5); animation: popIn .5s var(--ease); }
.fb.ok { border-color: rgba(45,212,191,.35); } .fb.no { border-color: rgba(255,107,129,.3); }
.fb > p { color: var(--soft); font-size: 14.5px; }
@keyframes popIn { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } }
.tbl { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.tbl th { text-align: left; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 6px 0; }
.tbl td { padding: 8px 0; border-top: 1px solid var(--stroke); }
.tbl td:first-child { color: var(--soft); }
.fb-sum { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stroke); font-size: 13px; color: var(--mute); }
.fb-sum b { margin-left: 4px; }

/* done / results */
.done-screen { text-align: center; padding-top: 28px; }
.done-screen > * + * { margin-top: 10px; }
.done-badge { display: grid; place-items: center; animation: popIn .7s var(--ease); }
.done-badge .ring text { font-size: 26px; }
.done-badge .ring-fg { stroke-width: 6; } .done-badge .ring-bg { stroke-width: 6; }
.done-screen .eyebrow { justify-content: center; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats3 > div { padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--stroke); text-align: center; }
.stats3 span { display: block; font-size: 11px; color: var(--mute); }
.stats3 b { display: block; font-size: 22px; margin-top: 4px; }
.stats3 small { color: var(--mute); font-size: 10.5px; }
.weak { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.weak span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(255,196,107,.1); border: 1px solid rgba(255,196,107,.3); color: var(--gold); font-size: 13px; font-weight: 600; }
.weak .ic { width: 16px; height: 16px; }

/* compete */
.season p { color: var(--soft); margin-top: 8px; }
.season-top { display: flex; justify-content: space-between; margin-bottom: 14px; }
.season .display { font-size: 27px; }
.countdown { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); font-size: 13px; }
.countdown b { font-size: 16px; color: var(--gold); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 18px; }
.pod { width: 84px; text-align: center; }
.pod-ava { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1.5px dashed var(--stroke-2); color: var(--mute); font: 800 18px var(--display); }
.pod-bar { border-radius: 14px 14px 4px 4px; display: grid; place-items: center; font: 800 22px var(--display); }
.pod.p1 .pod-bar { height: 92px; background: var(--grad-gold); color: #1a1205; box-shadow: 0 0 40px -10px var(--gold); }
.pod.p1 .pod-ava { border-color: var(--gold); width: 56px; height: 56px; }
.pod.p2 .pod-bar { height: 66px; background: linear-gradient(135deg, #CBD5E1, #64748B); color: #0E1729; }
.pod.p3 .pod-bar { height: 50px; background: linear-gradient(135deg, #F59E0B, #92400E); color: #1a1205; }
.tasks { display: flex; flex-direction: column; gap: 10px; }
.task { display: flex; align-items: center; gap: 12px; padding: 14px; }
.task-t { flex: 1; } .task-t b { display: block; font-size: 14px; line-height: 1.35; }
.task-t span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mute); margin-top: 4px; } .task-t span .ic { width: 13px; height: 13px; }
.task-p { text-align: right; } .task-p b { display: block; font-size: 17px; color: var(--gold); } .task-p span { font-size: 11px; color: var(--mute); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--mute); padding: 26px; }
.empty .ic { width: 30px; height: 30px; color: var(--accent-2); }

/* profile */
.prof { text-align: center; }
.prof > * + * { margin-top: 10px; }
.prof-ava .ava { width: 84px; height: 84px; margin: 0 auto; font-size: 34px; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skill { padding: 14px; }
.skill b { display: block; font: 700 14px/1.25 var(--display); margin-top: 10px; }
.skill > span { font-size: 12px; color: var(--mute); }
.skill-h { display: flex; justify-content: space-between; align-items: center; color: var(--mute); }
.lv-dots { display: flex; gap: 3px; } .lv-dots i { width: 14px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); }
.skill.lv1 .lv-dots i.on { background: var(--danger); } .skill.lv2 .lv-dots i.on { background: var(--gold); } .skill.lv3 .lv-dots i.on { background: var(--mint); }
.skill.lv1 .skill-h .ic { color: var(--danger); } .skill.lv2 .skill-h .ic { color: var(--gold); } .skill.lv3 .skill-h .ic { color: var(--mint); }
.skill.lv3 > span { color: var(--mint); }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bdg { text-align: center; padding: 14px 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--stroke); font-size: 12px; font-weight: 600; color: var(--mute); }
.bdg-ic { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.bdg.on { color: var(--text); border-color: rgba(255,196,107,.3); }
.bdg.on .bdg-ic { background: var(--grad-gold); color: #1a1205; box-shadow: 0 0 24px -6px var(--gold); }
.mentor-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mentor-top img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.mentor-top b { display: block; font: 800 19px var(--display); }
.mentor-top span { font-size: 13px; }
.mentor p { color: var(--soft); font-size: 14px; }
.setting { display: flex; align-items: center; justify-content: space-between; margin-top: 14px !important; }
.setting > span { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.seg { display: flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.06); }
.seg button { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--mute); }
.seg button.on { background: var(--accent); color: #fff; }

/* certificate */
.cert-wrap { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(59,130,246,.5); border: 1px solid var(--stroke-2); }
.cert-wrap img { width: 100%; aspect-ratio: 1600 / 1130; background: #071022; }
.field { display: block; }
.field span { display: block; font-size: 12.5px; color: var(--mute); margin-bottom: 6px; }
.field input { width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke-2); color: var(--text); font: 600 16px var(--font); outline: none; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,130,246,.15); }

/* nav */
#nav { position: fixed; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); z-index: 40; display: flex; gap: 4px; padding: 6px; border-radius: 22px; background: rgba(12,19,34,.82); border: 1px solid var(--stroke-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0,0,0,.8); }
body.no-nav #nav { display: none; }
.nav-b { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 86px; padding: 8px 10px; border-radius: 16px; font-size: 11px; font-weight: 600; color: var(--mute); transition: .2s; }
.nav-b.on { color: #fff; background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(139,92,246,.25)); box-shadow: inset 0 0 0 1px rgba(110,193,255,.3); }
.nav-b .ic { width: 22px; height: 22px; }

/* toasts & confetti */
#toasts { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(12,19,34,.95); border: 1px solid rgba(255,196,107,.45); color: var(--gold); font: 700 14px var(--display); box-shadow: 0 14px 40px -10px rgba(0,0,0,.8), 0 0 30px -10px var(--gold); animation: toastIn .45s var(--ease); }
.toast .ic { width: 18px; height: 18px; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.9); } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.tbl td.dn { color: var(--accent-2); }

/* =========================================================
   v2: frames, crew, season, tasks, admin, new visuals
   ========================================================= */
.nav-b { min-width: 70px; padding: 8px 6px; }
.ava { box-shadow: none; }
.prof-ava .ava { margin: 0; }

/* ---------- avatar frames ---------- */
.fr { --fg: conic-gradient(from 0deg, #3B82F6, #6EC1FF, #3B82F6); --glow: rgba(59,130,246,.45); position: relative; display: inline-grid; place-items: center; flex: none; padding: 3px; border-radius: 50%; isolation: isolate; vertical-align: middle; }
.fr::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fg); z-index: -2; animation: frspin 6s linear infinite; }
.fr::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--fg); filter: blur(8px); opacity: .55; z-index: -3; animation: frspin 6s linear infinite; }
.fr > .ava, .fr > .pava { box-shadow: 0 0 0 2.5px var(--bg) !important; position: relative; z-index: 1; }
.fr-md { padding: 3.5px; } .fr-xl { padding: 5px; }
.fr-xl::after { inset: -6px; filter: blur(14px); }
@keyframes frspin { to { transform: rotate(360deg); } }
.fr-basic { --fg: conic-gradient(from 0deg, #3B82F6, #6EC1FF, #3B82F6); }
.fr-basic::after { opacity: .25; }
.fr-mint { --fg: conic-gradient(from 0deg, #2DD4BF, #0EA5E9, #A7F3D0, #2DD4BF); }
.fr-fire { --fg: conic-gradient(from 0deg, #FF3D00, #FFB300, #FF6D00, #FFEA00, #FF3D00); }
.fr-fire::after { opacity: .8; animation: frspin 2.4s linear infinite, flick .9s ease-in-out infinite alternate; }
@keyframes flick { from { filter: blur(7px); } to { filter: blur(12px); } }
.fr-gold { --fg: conic-gradient(from 0deg, #D4932C, #FFF3C4, #FFC46B, #B7791F, #FFF3C4, #D4932C); }
.fr-neon { --fg: conic-gradient(from 0deg, #22D3EE, #8B5CF6, #EC4899, #22D3EE); }
.fr-neon::after { opacity: .9; }
.fr-pro { --fg: conic-gradient(from 0deg, #EF4444, #1F0A0A 25%, #EF4444 50%, #1F0A0A 75%, #EF4444); }
.fr-pro::before { animation-duration: 2.2s; }
.fr-ace { --fg: conic-gradient(from 0deg, #FF4D4D, #FFB84D, #FFF24D, #4DFF88, #4DE1FF, #6E4DFF, #FF4DE1, #FF4D4D); }
.fr-ace::before, .fr-ace::after { animation-duration: 3s; }
.fr-diamond { --fg: conic-gradient(from 0deg, #E0F2FE, #A5F3FC, #C4B5FD, #F0ABFC, #FFFFFF, #E0F2FE); }
.fr-diamond::after { opacity: .9; filter: blur(10px); }
@keyframes twinkle { from { opacity: .2; } to { opacity: 1; } }
.fr-champ { --fg: conic-gradient(from 0deg, #FFC46B, #FFF3C4, #FF8A5B, #FFC46B, #FFF3C4, #FFC46B); }
.fr-champ::after { opacity: .95; }
.fr-champ::before { box-shadow: 0 0 18px rgba(255,196,107,.7); }
.fr .crown { position: absolute; top: -13px; left: 50%; width: 26px; height: 18px; transform: translateX(-50%) rotate(-10deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 15h22L21 3l-5 5-4-7-4 7-5-5z' fill='%23FFC46B' stroke='%23B7791F' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='1.8' r='1.6' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; z-index: 4; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); animation: float 2.6s ease-in-out infinite; }
.fr-xl .crown { top: -22px; width: 44px; height: 30px; } .fr-md .crown { top: -12px; width: 22px; height: 15px; }
.fr .spark { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 12% 22%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 88% 28%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 72% 92%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 22% 86%, #fff 0 1px, transparent 2px);
  animation: twinkle 1.4s ease-in-out infinite alternate; }

.pava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; flex: none; font: 800 15px var(--display); color: #fff; }
.pava.ini { background: linear-gradient(135deg, hsl(var(--h, 220) 70% 52%), hsl(calc(var(--h, 220) + 50) 70% 40%)); }
.pava.lg { width: 64px; height: 64px; font-size: 26px; }
.ava.ini.sm { width: 44px; height: 44px; font-size: 18px; }
.ava.ini.sm .ic { width: 18px; height: 18px; }

.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.frame-it { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--stroke); text-align: center; transition: .2s var(--ease); }
.frame-it b { font: 700 12.5px var(--display); }
.frame-it small { font-size: 10.5px; color: var(--mute); line-height: 1.3; }
.frame-it.on { border-color: var(--gold); background: rgba(255,196,107,.08); box-shadow: 0 0 0 4px rgba(255,196,107,.1); }
.frame-it.on small { color: var(--gold); font-weight: 700; }
.frame-it.locked .fr { filter: grayscale(1) brightness(.5); }
.frame-it.locked .fr::before, .frame-it.locked .fr::after { animation: none; }
.frame-it:active { transform: scale(.96); }
.bdg small { display: block; font-size: 10px; color: var(--mute); font-weight: 500; margin-top: 3px; line-height: 1.3; }
.badges { grid-template-columns: repeat(3, 1fr); }
.unlock { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.unlock-ava { display: grid; place-items: center; padding: 18px 0 6px; }
.unlock-ava .ava { width: 96px; height: 96px; font-size: 38px; }

/* ---------- invite banner / versus / notify ---------- */
.invite-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(45,212,191,.14), rgba(59,130,246,.1)); border: 1px solid rgba(45,212,191,.35); animation: inF .5s var(--ease); }
.invite-banner > div { flex: 1; } .invite-banner b { display: block; font: 700 14.5px var(--display); } .invite-banner span { font-size: 12.5px; color: var(--soft); }
.invite-banner em { font-style: normal; color: var(--gold); font-weight: 700; }
.invite-banner > .ic { color: var(--mint); }
.invite-banner.ch { background: linear-gradient(135deg, rgba(255,196,107,.16), rgba(255,107,129,.1)); border-color: rgba(255,196,107,.4); } .invite-banner.ch > .ic { color: var(--gold); }
.vs { text-align: center; }
.vs-row { display: flex; align-items: center; justify-content: space-around; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .55; }
.vs-side.win { opacity: 1; } .vs-side b { font-size: 26px; } .vs-side span { font-size: 12px; color: var(--mute); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-mid { font: 900 26px var(--display); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs p { margin-top: 12px; font: 700 15px var(--display); color: var(--gold); }
.notify, .challenge-cta { display: flex; align-items: center; gap: 12px; }
.notify > div:nth-child(2), .challenge-cta > div { flex: 1; } .notify b, .challenge-cta b { display: block; font: 700 14.5px var(--display); } .notify span, .challenge-cta span { font-size: 12.5px; color: var(--mute); }
.notify { flex-wrap: wrap; } .notify .btn { width: 100%; }
.challenge-cta > .ic:first-child { color: var(--gold); width: 26px; height: 26px; }
.pro-card { display: flex; align-items: center; gap: 14px; margin-top: 10px !important; background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(12,19,34,.9)); border-color: rgba(239,68,68,.35); }
.pro-card > div { flex: 1; } .pro-card b { display: block; font: 700 15px var(--display); } .pro-card span { font-size: 12.5px; color: var(--soft); }
.pro-badge { font: 900 12px var(--mono) !important; letter-spacing: .1em; padding: 8px 10px; border-radius: 10px; background: #EF4444; color: #fff !important; box-shadow: 0 0 20px rgba(239,68,68,.5); }
.pro-card.locked { filter: saturate(.5); } .pro-card.locked .pro-badge { background: #4b1d1d; box-shadow: none; }
.admin-btn, .season-mini { display: flex; align-items: center; gap: 12px; }
.admin-btn { border-color: rgba(255,196,107,.4); color: var(--gold); } .admin-btn b { flex: 1; font: 700 15px var(--display); }
.season-mini { margin-top: 14px !important; } .season-mini > div { flex: 1; } .season-mini span { display: block; font-size: 12px; color: var(--mute); } .season-mini b { font: 700 15px var(--display); }
.season-mini > .ic:first-child { color: var(--gold); }

/* ---------- season ---------- */
.pill.live { color: var(--mint); border-color: rgba(45,212,191,.4); }
.led.g { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.pill.bad { color: var(--danger); border-color: rgba(255,107,129,.4); background: rgba(255,107,129,.08); }
.prize { display: flex; align-items: center; gap: 8px; color: var(--gold) !important; font: 700 16px var(--display); }
.pod-name { font-size: 11.5px; font-weight: 700; margin: 4px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; min-height: 16px; }
.pod .pava, .pod .fr { margin: 0 auto; }
.pod .pod-img { width: 46px; height: 46px; font-size: 18px; }
.pod.p1 .pod-img { width: 56px; height: 56px; }
.pod-bar { flex-direction: column; } .pod-bar small { font-size: 11px; opacity: .8; }
.me-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.35); }
.me-row > div:nth-child(2) { flex: 1; } .me-row span { display: block; font-size: 11.5px; color: var(--mute); } .me-row b { font: 800 20px var(--display); }
.me-pts { text-align: right; } .me-pts b { color: var(--gold); }
.lastwin { display: flex; align-items: center; gap: 12px; } .lastwin > div { flex: 1; } .lastwin b { display: block; font: 700 15px var(--display); }
.lastwin > .ic { color: var(--gold); width: 28px; height: 28px; }
.lb { padding: 6px 12px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--stroke); }
.lb-row:first-child { border-top: 0; }
.lb-row > b, .lb-t { flex: 1; min-width: 0; } .lb-row > b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-t b { display: block; font-size: 14px; } .lb-t .bd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lb-t .bd i { font-style: normal; font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--soft); }
.lb-n { width: 22px; text-align: center; font-weight: 700; color: var(--mute); }
.lb-row.r1 .lb-n { color: var(--gold); } .lb-row.r2 .lb-n { color: #CBD5E1; } .lb-row.r3 .lb-n { color: #F59E0B; }
.lb-row > .mono:last-child, .lb-row > span.mono { font-weight: 700; }
.lb-row.me { background: rgba(59,130,246,.12); border-radius: 12px; border-top-color: transparent; padding-left: 8px; padding-right: 8px; }
.earn .eyebrow { margin-bottom: 8px; }
.earn-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(255,255,255,.07); font-size: 14px; }
.earn-row span { flex: 1; } .earn-row b { color: var(--gold); } .earn-row .ic { color: var(--accent-2); width: 18px; height: 18px; }
.task { display: block; }
.task-top { display: flex; align-items: center; gap: 12px; }
.task-bot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.task-bot:empty { display: none; }
.task.st-approved { border-color: rgba(45,212,191,.35); }
.skel { height: 54px; border-radius: 14px; margin: 8px 0; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.skel.big { height: 220px; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; }
.sheet-bg { position: absolute; inset: 0; background: rgba(2,4,9,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 88vh; overflow: auto; padding: 10px 18px calc(18px + var(--safe-b)); border-radius: 26px 26px 0 0; background: #0B1221; border: 1px solid var(--stroke-2); border-bottom: 0; transform: translateY(100%); transition: transform .38s var(--ease); display: flex; flex-direction: column; gap: 12px; }
.sheet-wrap.on .sheet-bg { opacity: 1; } .sheet-wrap.on .sheet { transform: none; }
.sheet-grab { width: 42px; height: 5px; border-radius: 5px; background: var(--stroke-2); margin: 0 auto 4px; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; border-radius: 18px; border: 2px dashed var(--stroke-2); color: var(--mute); background-size: cover; background-position: center; cursor: pointer; font-weight: 600; transition: .2s; }
.drop .ic { width: 30px; height: 30px; color: var(--accent-2); }
.drop.has { border-style: solid; border-color: var(--mint); min-height: 220px; } .drop.has .ic, .drop.has span { display: none; }
.sheet textarea, .form input, .form textarea, .adm-reason { width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke-2); color: var(--text); font: 500 14.5px var(--font); outline: none; resize: vertical; }
.sheet textarea { min-height: 80px; }

/* ---------- crew ---------- */
.crew-hero { text-align: center; overflow: hidden; }
.crew-hero p { color: var(--soft); margin-top: 8px; }
.crew-hero .display { margin-top: 6px; }
.orbit { position: relative; width: 230px; height: 230px; margin: 4px auto 10px; }
.orb-ring { position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(110,193,255,.35); }
.orb-ring.r2 { inset: 64px; border: 1px solid rgba(45,212,191,.2); box-shadow: 0 0 60px rgba(59,130,246,.25) inset; }
.orb-spin { position: absolute; inset: 0; animation: frspin 40s linear infinite; }
.orb-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-93px); }
.orb-in { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; display: grid; place-items: center; transform: rotate(calc(-1 * var(--a))); animation: frspin 40s linear infinite reverse; }
.orb-in.empty { border-radius: 50%; border: 1.5px dashed var(--stroke-2); color: var(--mute); font-weight: 700; background: rgba(12,19,34,.8); }
.orb-in .pava { width: 34px; height: 34px; font-size: 14px; }
.orb-me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orb-me .ava { width: 70px; height: 70px; font-size: 28px; }
.invite { display: flex; flex-direction: column; gap: 10px; }
.linkbox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--solid); border: 1px solid var(--stroke-2); }
.linkbox span { flex: 1; font-size: 12.5px; color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how { display: flex; align-items: flex-start; gap: 4px; }
.how-s { flex: 1; text-align: center; } .how-s p { font-size: 12px; color: var(--soft); margin-top: 8px; line-height: 1.35; }
.how-n { width: 42px; height: 42px; margin: 0 auto; border-radius: 14px; display: grid; place-items: center; background: rgba(59,130,246,.14); color: var(--accent-2); border: 1px solid rgba(59,130,246,.3); }
.how-ar { color: var(--mute); padding-top: 12px; } .how-ar .ic { width: 16px; height: 16px; }
.ladder { padding: 6px 16px; }
.rung { display: flex; gap: 14px; padding: 14px 0; position: relative; }
.rung:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 54px; bottom: -14px; width: 2px; background: var(--stroke-2); }
.rung.done:not(:last-child)::after { background: var(--gold); }
.rung-node { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid var(--stroke-2); color: var(--mute); position: relative; z-index: 1; }
.rung.done .rung-node { background: var(--grad-gold); color: #1a1205; border-color: transparent; box-shadow: 0 0 20px -4px var(--gold); }
.rung.next .rung-node { color: var(--accent-2); border-color: var(--accent); box-shadow: 0 0 0 0 rgba(59,130,246,.5); animation: ring 1.8s infinite; }
@keyframes ring { 70% { box-shadow: 0 0 0 10px rgba(59,130,246,0); } }
.rung-t { flex: 1; } .rung-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rung-h b { font: 700 15px var(--display); } .rung-h span { font-size: 11.5px; color: var(--mute); }
.rung-t p { font-size: 13px; color: var(--soft); margin-top: 2px; }
.rung-t .track { margin-top: 8px; height: 6px; }
.rung.done .rung-h b { color: var(--gold); }
.crew-list { padding: 6px 14px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--stroke); }
.fr-row:first-child { border-top: 0; } .fr-row > div { flex: 1; min-width: 0; } .fr-row b { display: block; font-size: 14px; } .fr-row span { font-size: 12px; color: var(--mute); }

/* ---------- verify ---------- */
.v-ic { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; animation: popIn .6s var(--ease); }
.v-ic .ic { width: 40px; height: 40px; stroke-width: 2.6; }
.v-ic.ok { background: var(--mint); color: #05201b; box-shadow: 0 0 50px rgba(45,212,191,.6); } .v-ic.no { background: var(--danger); color: #fff; }
.vtbl { text-align: left; } .vtbl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--stroke); } .vtbl div:first-child { border-top: 0; } .vtbl span { color: var(--mute); }

/* ---------- admin ---------- */
.seg.wide { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; } .seg.wide button { text-align: center; padding: 9px 4px; }
#adm { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.adm-item { display: flex; flex-direction: column; gap: 10px; transition: .4s var(--ease); }
.adm-item.gone-ok { opacity: 0; transform: translateX(40px); } .adm-item.gone-no { opacity: 0; transform: translateX(-40px); }
.adm-u { display: flex; align-items: center; gap: 10px; } .adm-u > div { flex: 1; } .adm-u b { display: block; font-size: 14.5px; } .adm-u span { font-size: 12px; color: var(--mute); }
.adm-c { font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.proof { width: 100%; max-height: 260px; object-fit: contain; border-radius: 14px; background: #000; min-height: 120px; cursor: zoom-in; }
.proof.big { max-height: none; }
.adm-act { display: flex; align-items: flex-end; gap: 8px; } .adm-act .mini-field { flex: 1; }
.mini-field span { display: block; font-size: 11px; color: var(--mute); margin-bottom: 4px; }
.mini-field input { width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--stroke-2); color: var(--text); font: 700 15px var(--mono); }
.btn.ok { background: var(--mint); color: #05201b; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form textarea { min-height: 64px; }
.row3 { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .row3 .mini-field { width: 100px; }
.chkline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--soft); padding-bottom: 10px; }
.wk-nav { display: flex; align-items: center; justify-content: space-between; } .wk-nav b { font-size: 13.5px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .stats4 div { padding: 10px 4px; text-align: center; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); }
.stats4 span { display: block; font-size: 10.5px; color: var(--mute); } .stats4 b { font: 800 18px var(--display); }
.lb-row.adm .btn { padding: 0 10px; }

/* ---------- new lesson visuals ---------- */
.utr { display: flex; flex-direction: column; gap: 10px; }
.utr-row { display: flex; align-items: center; gap: 10px; } .utr-row > span { width: 44px; font-size: 11px; color: var(--mute); font-weight: 700; text-transform: uppercase; }
.utr-d { display: flex; gap: 3px; flex: 1; }
.utr-d i { flex: 1; font-style: normal; text-align: center; padding: 7px 0; border-radius: 6px; background: var(--solid); border: 1px solid var(--stroke); font: 700 13px var(--mono); animation: drop .4s var(--ease) both; animation-delay: var(--d); }
.utr-d i.bad { color: #fff; background: rgba(255,107,129,.25); border-color: var(--danger); animation: drop .4s var(--ease) both, blink 1s .8s 3; animation-delay: var(--d), .8s; }
.flags { display: flex; flex-wrap: wrap; gap: 8px; }
.flags span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(255,107,129,.1); border: 1px solid rgba(255,107,129,.35); color: #FFB3C0; font-size: 13px; font-weight: 600; animation: drop .4s var(--ease) both; animation-delay: var(--d); }
.flags span .ic { width: 15px; height: 15px; color: var(--danger); }
.freezev { display: flex; flex-direction: column; gap: 12px; }
.fz-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255,107,129,.08); border: 1px solid rgba(255,107,129,.4); }
.fz-lock { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--danger); color: #fff; box-shadow: 0 0 30px rgba(255,107,129,.5); animation: pulseS 1.6s ease-in-out infinite; }
@keyframes pulseS { 50% { transform: scale(1.08); } }
.fz-card span { font-size: 12px; color: var(--mute); } .fz-card b { display: block; font: 800 18px var(--display); color: #FFB3C0; letter-spacing: .04em; } .fz-card small { color: var(--soft); }
.fz-orders { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.fz-orders i { width: 26px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,107,129,.5); animation: blink 1.2s infinite; }
.fz-orders i:nth-child(2) { animation-delay: .2s; } .fz-orders i:nth-child(3) { animation-delay: .4s; }
.settlev { display: flex; align-items: center; justify-content: space-between; }
.sv-n { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; width: 90px; }
.sv-n span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--solid); border: 1px solid rgba(59,130,246,.5); color: var(--accent-2); }
.sv-n:nth-child(3) span { color: var(--mint); border-color: rgba(45,212,191,.5); } .sv-n:nth-child(5) span { color: var(--violet); border-color: rgba(139,92,246,.5); }
.sv-n b { font-size: 12.5px; } .sv-n small { font-size: 10.5px; color: var(--mute); }
.sv-ar { flex: 1; height: 2px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; margin-bottom: 30px; }
.sv-ar i { position: absolute; top: 0; height: 100%; width: 40%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); animation: lane 1.4s linear infinite; }
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid6 div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; background: var(--solid); border: 1px solid var(--stroke); text-align: center; font-size: 11.5px; font-weight: 600; color: var(--soft); animation: drop .4s var(--ease) both; animation-delay: var(--d); }
.grid6 .ic { color: var(--accent-2); }
.cta-big { text-align: center; padding: 26px 18px; border-radius: var(--r); background: radial-gradient(100% 80% at 50% 0%, rgba(139,92,246,.25), transparent 70%), var(--surface); border: 1px solid rgba(139,92,246,.35); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cta-ic { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: rgba(139,92,246,.18); color: #C4B5FD; box-shadow: 0 0 40px -6px var(--violet); }
.cta-ic .ic { width: 34px; height: 34px; }
/* thicker, more readable frames */
.fr { padding: 3.5px; }
.fr-md { padding: 5px; } .fr-xl { padding: 7px; }
.frame-it .ava.ini.sm { background: #141C2E; color: var(--text); }
.frame-it .fr::after { opacity: .75; }
.hello .fr, .me-row .fr { padding: 3px; }

/* practice panel entry */
.panel-card { display: flex; align-items: center; gap: 14px; margin-top: 10px !important; border-color: rgba(45,212,191,.35); background: linear-gradient(135deg, rgba(45,212,191,.12), rgba(12,19,34,.9)); }
.panel-t { flex: 1; } .panel-t b { display: block; font: 700 15px/1.3 var(--display); margin: 3px 0; } .panel-t > span:last-child { font-size: 12.5px; color: var(--soft); }
.panel-prev { width: 64px; height: 52px; flex: none; border-radius: 10px; background: #0A0E16; border: 1px solid rgba(45,212,191,.4); padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-content: start; box-shadow: 0 0 20px -6px var(--mint); }
.panel-prev i { height: 10px; border-radius: 3px; background: rgba(255,255,255,.1); } .panel-prev i:first-child { background: var(--mint); }
.pp-row { grid-column: span 3; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); } .pp-row.s { width: 60%; background: rgba(45,212,191,.5); }

/* leagues */
.lg-chip { --lc: #D08B5B; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; font: 700 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); flex: none; }
.lg-chip svg { width: 12px; height: 12px; fill: var(--lc); }
.lg-chip.legend { background: linear-gradient(135deg, rgba(192,132,252,.25), rgba(59,130,246,.2)); box-shadow: 0 0 14px -4px #C084FC; }
.lg-ladder { display: flex; gap: 6px; margin-top: 12px; }
.lg-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 10.5px var(--mono); color: var(--mute); text-transform: uppercase; }
.lg-step i { width: 100%; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
.lg-step.on i { background: var(--lc); box-shadow: 0 0 10px -2px var(--lc); }
.lg-step.cur { color: var(--lc); }
.me-row .lg-chip { margin-right: 4px; }
.season-mini .lg-chip { margin-right: 6px; }
.lb-row .lg-chip { padding: 2px 6px 2px 5px; font-size: 9.5px; }
.post-img { width: 100%; border-radius: 14px; }
.post-cap { min-height: 150px; font-family: var(--font); font-size: 13px; }

/* help, ideas, final requirements */
.req { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.req span { font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--mute); cursor: pointer; }
.req span.ok { background: rgba(45,212,191,.14); color: var(--mint); }
.help-card { display: flex; align-items: center; gap: 12px; margin-top: 10px !important; }
.help-card > div:nth-child(2) { flex: 1; } .help-card b { display: block; font: 700 15px var(--display); } .help-card span { font-size: 12.5px; color: var(--mute); }
.seg.wide2 { display: grid; grid-template-columns: 1fr 1fr; } .seg.wide3 { display: grid; grid-template-columns: repeat(3, 1fr); } .seg.wide2 button, .seg.wide3 button { text-align: center; }
.help-pane { display: flex; flex-direction: column; gap: 8px; }
.faq { padding: 0; }
.faq summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 16px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary b { flex: 1; font: 700 14.5px/1.35 var(--display); }
.faq summary .ic { width: 16px; color: var(--mute); transition: transform .2s; }
.faq[open] summary .ic { transform: rotate(90deg); color: var(--mint); }
.faq p { padding: 0 16px 16px; color: var(--soft); font-size: 14px; }
.gl b { color: var(--accent-2); font-size: 13.5px; } .gl p { font-size: 13.5px; color: var(--soft); margin-top: 4px; }
.links2 { padding: 6px 14px; } .links2 button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border-top: 1px solid var(--stroke); } .links2 button:first-child { border-top: 0; }
.links2 b { flex: 1; font: 600 14px var(--font); } .links2 .ic:first-child { color: var(--gold); }
.form-fb { display: flex; flex-direction: column; gap: 10px; }
.form-fb textarea { width: 100%; min-height: 120px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke-2); color: var(--text); font: 500 14.5px var(--font); outline: none; resize: vertical; }
.form-fb textarea:focus { border-color: var(--accent); }
#fbList { display: flex; flex-direction: column; gap: 10px; }
.fb-top { display: flex; justify-content: space-between; align-items: center; } .fb-mine p { margin-top: 8px; font-size: 14px; }
.fb-mine.done { border-color: rgba(45,212,191,.4); }
.fb-reply { display: flex; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,196,107,.08); border: 1px solid rgba(255,196,107,.25); font-size: 13.5px; }
.fb-reply img { width: 30px; height: 30px; border-radius: 50%; flex: none; } .fb-reply p { margin: 0; }
.adm-item.fb.new { border-color: rgba(255,196,107,.45); }
.adm-item .fb-reply { display: block; }
.seg.wide { grid-template-columns: repeat(5, 1fr); } .seg.wide button { font-size: 12px; }
.help-pane[hidden], .faq[hidden], .gl[hidden] { display: none !important; }

/* library */
.nav-b { min-width: 0; flex: 1; padding: 8px 4px; font-size: 10.5px; }
#nav { width: min(470px, calc(100% - 24px)); }
.seg.wide4 { display: grid; grid-template-columns: repeat(4, 1fr); margin: 12px 0 4px; } .seg.wide4 button { text-align: center; padding: 8px 2px; font-size: 12.5px; }
.arts { display: flex; flex-direction: column; gap: 10px; }
.art { display: flex; gap: 12px; align-items: center; padding: 10px; }
.art img, .art-ph { width: 84px; height: 64px; flex: none; border-radius: 12px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--accent-2); }
.art b { display: block; font: 700 14.5px/1.3 var(--display); } .art span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art small { display: block; font: 600 11px var(--mono); color: var(--accent-2); margin-top: 4px; }
.art.rd { opacity: .75; } .art.rd small { color: var(--mint); }
.art.next { justify-content: space-between; margin-top: 16px !important; } .art.next small { color: var(--mute); }
.read-img { width: calc(100% + 32px); margin: 0 -16px 14px; max-height: 220px; object-fit: cover; }
.read .display { margin: 8px 0; }
.read-body { margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: var(--soft); }
.read-body h2 { font: 800 19px/1.25 var(--display); color: var(--text); margin: 26px 0 8px; }
.read-body h3 { font: 700 16px var(--display); color: var(--text); margin: 18px 0 6px; }
.read-body p { margin: 0 0 12px; } .read-body b { color: var(--text); }
.read-body ul, .read-body ol { padding-left: 20px; margin: 0 0 14px; } .read-body li { margin: 4px 0; }
.read-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.read-body code { font-family: var(--mono); font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); }
.read-body .tbl-wrap { overflow-x: auto; margin: 0 0 14px; border-radius: 14px; border: 1px solid var(--stroke); }
.read-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .read-body th, .read-body td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--stroke); vertical-align: top; }
.read-body th { border-top: 0; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); background: var(--surface); }
.callout { padding: 12px 14px; border-radius: 14px; margin: 0 0 14px; border: 1px solid; }
.callout b { display: block; margin-bottom: 4px; } .callout p { margin: 0; }
.callout.tip { background: rgba(45,212,191,.08); border-color: rgba(45,212,191,.35); } .callout.tip b { color: var(--mint); }
.callout.note { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.35); } .callout.note b { color: var(--accent-2); }
.callout.warning { background: rgba(255,196,107,.08); border-color: rgba(255,196,107,.4); } .callout.warning b { color: var(--gold); }
.mt-list, .tpls { display: flex; flex-direction: column; gap: 10px; }
.mt-card { display: flex; align-items: center; gap: 12px; } .mt-card > div:nth-child(2) { flex: 1; } .mt-card b { display: block; font: 700 14.5px var(--display); } .mt-card span { font-size: 12.5px; color: var(--mute); }
.mt-card.done { border-color: rgba(45,212,191,.35); } .mt-card.done span { color: var(--mint); }
.tpl { padding: 0; } .tpl summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; } .tpl summary::-webkit-details-marker { display: none; }
.tpl summary > div:nth-child(2) { flex: 1; } .tpl summary b { display: block; font: 700 14px/1.3 var(--display); } .tpl summary span { font-size: 12px; color: var(--mute); }
.tpl summary > .ic:last-child { width: 16px; color: var(--mute); transition: transform .2s; } .tpl[open] summary > .ic:last-child { transform: rotate(90deg); }
.tpl pre { margin: 0 14px 12px; padding: 12px; border-radius: 12px; background: #0B1324; border: 1px solid var(--stroke); white-space: pre-wrap; word-break: break-word; font: 500 12.5px/1.55 var(--mono); color: var(--text); }
.tpl .btn { margin: 0 14px 14px; }
.tpl.open { padding: 16px; } .tpl.open pre { margin: 10px 0 12px; } .tpl.open .btn { margin: 0; }
.sit-h { display: flex; align-items: center; gap: 8px; color: var(--gold); } .sit p { margin-top: 8px; color: var(--soft); font-size: 14.5px; }
.chatbox { border-radius: var(--r); overflow: hidden; border: 1px solid var(--stroke); background: #0A1222; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--stroke); }
.chat-ava2 { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); font: 800 14px var(--display); }
.chat-top b { display: block; font-size: 14px; } .chat-top small { color: var(--mute); font-size: 11.5px; }
.chat-msg { margin: 14px 14px 14px 40px; padding: 10px 13px; border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, #2563EB, #3B82F6); font: 500 13.5px/1.55 var(--font); min-height: 44px; transition: .2s; }
.chat-msg.empty { background: rgba(255,255,255,.05); color: var(--mute); border: 1px dashed var(--stroke-2); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip { padding: 10px 13px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--stroke-2); font-size: 13.5px; font-weight: 600; transition: .15s; }
.mt-chip.on { border-color: var(--accent); background: rgba(59,130,246,.15); }

/* admin action rows wrap on narrow phones */
.adm-act { flex-wrap: wrap; } .adm-act .btn { flex: 1 1 auto; }

.idea-btn { color: var(--gold); border-color: rgba(255,196,107,.35); margin-left: auto; }
.bar .brand + .idea-btn { margin-left: 0; }
.idea-card { display: flex; align-items: center; gap: 12px; margin-top: 10px !important; border-color: rgba(255,196,107,.35); background: linear-gradient(135deg, rgba(255,196,107,.1), rgba(12,19,34,.9)); }
.idea-card > div:nth-child(2) { flex: 1; } .idea-card b { display: block; font: 700 15px var(--display); } .idea-card span { font-size: 12.5px; color: var(--soft); }

/* Travis mascot */
.tip.big img.mascot { width: 210px; height: 210px; border-radius: 0; box-shadow: none; margin: -14px 0 0; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.tip img[src*="mascot-face"] { object-fit: cover; background: #05080F; }

.done-badge.with-m { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mascot-pose { width: 150px; height: 150px; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); animation: popIn .6s var(--ease) .15s both; }
.tip.no { background: linear-gradient(135deg, rgba(255,107,129,.1), rgba(255,138,91,.04)); border-color: rgba(255,107,129,.3); } .tip.no img { box-shadow: 0 0 0 2px var(--danger); } .tip.no .eyebrow { color: var(--danger); }
.tip.ok img { box-shadow: 0 0 0 2px var(--mint); } .tip.ok { background: linear-gradient(135deg, rgba(45,212,191,.1), rgba(59,130,246,.04)); border-color: rgba(45,212,191,.3); } .tip.ok .eyebrow { color: var(--mint); }

/* duels, final, analytics, gate */
.duel-card .row2 { margin: 12px 0 6px; }
.duel-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--stroke); }
.duel-row > div { flex: 1; min-width: 0; } .duel-row b { display: block; font-size: 14px; } .duel-row span.mono { font-size: 12.5px; color: var(--soft); }
.pill.bad { color: var(--danger); border-color: rgba(255,107,129,.4); }
.final-live { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.final-live p { color: var(--soft); }
.mascot-pose.sm { width: 110px; height: 110px; }
.race .lb-row, .final-live + .card .lb-row { padding-left: 0; padding-right: 0; }
.seg.wide { grid-template-columns: repeat(4, 1fr) !important; row-gap: 4px; }
.fn-row { margin-top: 12px; } .fn-t { display: flex; justify-content: space-between; font-size: 13.5px; } .fn-t b { font-size: 15px; }
.fn-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; margin: 5px 0 3px; } .fn-bar i { display: block; height: 100%; border-radius: 6px; background: var(--grad-mint); }
.fn-row small { color: var(--mute); font-size: 11px; }
.ls-row { display: grid; grid-template-columns: 34px 1fr 70px 30px; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.ls-row em { font-style: normal; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; } .ls-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ls-row.bad em, .ls-row.bad b { color: var(--danger); } .ls-row.bad .ls-bar i { background: var(--danger); }
.warn-card { border-color: rgba(255,107,129,.45); background: rgba(255,107,129,.07); font-size: 14px; }
.dau { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-top: 10px; }
.dau div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.dau i { width: 100%; border-radius: 4px 4px 0 0; background: var(--grad); } .dau span { font: 600 9.5px var(--mono); color: var(--mute); }
.adm-item.err .adm-c { word-break: break-word; }
.gate { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 20px 6px; }
.gate img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 40px rgba(59,130,246,.5); }
.gate .btn { width: auto; padding: 0 28px; text-decoration: none; }