/* Mastery Bulls Academy — a trading-terminal look.
   Deep navy ground, bull green for every "go" action, bear red for warnings and the brand's bull,
   shield gold from the logo for highlights. Numbers and tickers in a monospace face. */
:root{
  --bg:#0a101d; --bg-2:#0d1526; --card:#111b2e; --soft:#16223a; --line:#22304b; --line-2:#2d3d5c;
  --ink:#eaf0fa; --ink-2:#c3cde0; --muted:#8e9bb6;
  --up:#16c784; --up-ink:#03140c; --up-bg:rgb(22 199 132 / .12);
  --dn:#ef4352; --dn-bg:rgb(239 67 82 / .12);
  --gold:#f2b632; --gold-bg:rgb(242 182 50 / .12);
  --blue:#7fa7ff;
  --accent:var(--up); --accent-ink:var(--up-ink);
  --ok:var(--up); --ok-bg:var(--up-bg); --bad:var(--dn); --bad-bg:var(--dn-bg); --warn:var(--gold); --warn-bg:var(--gold-bg);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:14px; --shadow:0 1px 0 rgb(255 255 255 / .03) inset, 0 18px 40px -22px rgb(0 0 0 / .8);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font:16px/1.6 var(--body); min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased}
main{flex:1}
a{color:var(--up)}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display); line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-.01em}
p{margin:0}
code{font-family:var(--mono); background:var(--soft); border:1px solid var(--line); padding:0 5px; border-radius:5px; font-size:.9em}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
.wide{max-width:1200px}
.narrow{max-width:460px; margin:0 auto}
.page{padding-block:36px}
.muted{color:var(--muted)} .small{font-size:.9rem}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .dn{color:var(--dn)}
.ruled{background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:48px 48px; background-position:-1px -1px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font:600 .74rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--up); box-shadow:0 0 0 3px var(--up-bg)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- header ---------- */
header.top{background:rgb(7 12 23 / .92); backdrop-filter:blur(10px); color:var(--ink); position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px}
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-width:0}
.brand img{height:44px; width:auto; flex:none; filter:drop-shadow(0 4px 10px rgb(0 0 0 / .4))}
.brand .bt{display:grid; line-height:1.05; min-width:0}
.brand .bt b{font:800 1.08rem var(--display); letter-spacing:.02em; text-transform:uppercase; white-space:nowrap}
.brand .bt small{font:500 .64rem var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap}
.brand i{display:none}
.site-nav{display:flex; align-items:center; gap:4px}
.site-nav a.lnk{color:var(--ink-2); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:500}
.site-nav a.lnk:hover{color:var(--ink); background:var(--soft)}
.site-nav a.lnk[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--up); border-radius:0}
.site-nav .btn{margin-left:6px}
.nav-toggle{display:none; background:none; border:1.5px solid var(--line-2); color:var(--ink); border-radius:8px; padding:6px 12px; font:600 .9rem var(--body); cursor:pointer}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg-2); flex-direction:column; align-items:stretch; padding:8px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); border-bottom:1px solid var(--line)}
  .site-nav.open{display:flex}
  .site-nav a.lnk[aria-current="page"]{box-shadow:inset 3px 0 0 var(--up)}
  .site-nav .btn{margin:8px 0 0}
}
@media (max-width:420px){.brand .bt small{display:none}.brand img{height:38px}.brand .bt b{font-size:.95rem}}

/* ticker tape */
.tape{background:var(--bg-2); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; font:500 .8rem/1 var(--mono); color:var(--ink-2)}
.tape-in{display:inline-flex; gap:36px; padding:10px 0; animation:tape 50s linear infinite; padding-left:36px}
.tape span{display:inline-flex; gap:8px; align-items:center; letter-spacing:.06em; text-transform:uppercase}
.tape span b{font-weight:600}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------- buttons & forms ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; padding:11px 20px; font:600 1rem var(--body); cursor:pointer; text-decoration:none; background:var(--soft); color:var(--ink); white-space:nowrap; transition:transform .12s, filter .12s, box-shadow .12s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--up); color:var(--up-ink); box-shadow:0 8px 24px -10px rgb(22 199 132 / .7)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--ink-2)}
.btn.ghost-light{background:transparent; color:var(--ink); border:1.5px solid var(--line-2)}
.btn.lg{padding:14px 26px; font-size:1.05rem}
.btn.sm{padding:6px 12px; font-size:.88rem; border-radius:8px}
.btn.block{width:100%}
.btn.ok{background:var(--up); color:var(--up-ink)}
.btn.bad{background:transparent; color:var(--dn); border:1.5px solid rgb(239 67 82 / .5)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input[type=checkbox]:focus-visible,.nav-toggle:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.btn[disabled]{opacity:.6; cursor:wait}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row-c{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.card-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.card-head h2{font-size:1.3rem}
.h-card{font-size:1.6rem; margin-bottom:6px}
.h-sub{font-size:1.2rem; margin-bottom:14px}
.form{display:grid; gap:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
label{display:grid; gap:6px; font-weight:600; font-size:.92rem; color:var(--ink-2)}
label small{font-weight:400; color:var(--muted)}
label.check{display:flex; align-items:center; gap:8px; font-weight:500}
label.check input{width:auto}
input,select,textarea{width:100%; font:inherit; color:var(--ink); background:var(--bg-2); border:1.5px solid var(--line-2); border-radius:10px; padding:11px 13px}
input::placeholder,textarea::placeholder{color:#5f6d8a}
input[readonly]{background:var(--soft); color:var(--muted)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--up); box-shadow:0 0 0 3px var(--up-bg)}
input.invalid{border-color:var(--dn); box-shadow:0 0 0 3px var(--dn-bg)}

/* messages */
.flash{display:grid; gap:8px; padding-top:16px}
.flash:not(:has(.msg)){display:none}
.msg{border-radius:10px; padding:11px 14px; font-size:.95rem; border:1px solid}
.msg ul{margin:0; padding-left:18px}
.msg.err{background:var(--dn-bg); color:#ff8f99; border-color:rgb(239 67 82 / .35)}
.msg.info{background:var(--gold-bg); color:var(--gold); border-color:rgb(242 182 50 / .3)}
.msg.good{background:var(--up-bg); color:var(--up); border-color:rgb(22 199 132 / .3)}

/* ---------- course cover & card ---------- */
.cover{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:10px; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%, #17284a 0%, #0c1426 60%); border:1px solid var(--line); display:flex; align-items:flex-end; padding:12px}
.cover .candles{position:absolute; inset:0; width:100%; height:100%}
.candles .grid{stroke:rgb(255 255 255 / .05); stroke-width:1}
.candles rect.up{fill:var(--up)} .candles rect.dn{fill:var(--dn)}
.candles .wick{stroke-width:1.4} .candles .wick.up{stroke:var(--up)} .candles .wick.dn{stroke:var(--dn)}
.candles .ma{fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linejoin:round; opacity:.85}
.cover::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%, rgb(5 9 18 / .78))}
.cover .tag{position:relative; z-index:1; font:600 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:rgb(10 16 29 / .75); border:1px solid var(--line-2); padding:4px 9px; border-radius:6px}
.cover .letter{display:none}
.cover.lg{aspect-ratio:21/9; border-radius:var(--r)}

.courses{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px}
.course{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 10px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; text-decoration:none; color:inherit; transition:transform .15s, border-color .15s, box-shadow .15s}
a.course:hover{transform:translateY(-3px); border-color:rgb(22 199 132 / .45); box-shadow:var(--shadow)}
.course .body{display:flex; flex-direction:column; gap:6px; padding:0 6px}
.course h3{font-size:1.08rem}
.course p{color:var(--muted); font-size:.92rem; max-height:3.2em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta{display:flex; flex-wrap:wrap; gap:6px 12px; font:500 .78rem var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold)}
.course .foot-row{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 6px 0; border-top:1px dashed var(--line); font-size:.88rem; font-weight:600}
.lock{color:var(--muted); font-weight:500}
.go{color:var(--up)}
.pill{display:inline-block; padding:3px 10px; border-radius:6px; font:600 .74rem var(--mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.pill.pending,.pill.started{background:var(--gold-bg); color:var(--gold)}
.pill.approved,.pill.completed{background:var(--up-bg); color:var(--up)}
.pill.rejected{background:var(--dn-bg); color:#ff8f99}
.pill.new{background:rgb(127 167 255 / .12); color:var(--blue)}
.empty{color:var(--muted); text-align:center; padding:30px; border:1.5px dashed var(--line-2); border-radius:var(--r)}
.empty b{display:block; color:var(--ink); font-family:var(--display); font-size:1.1rem; margin-bottom:4px}

/* ---------- landing ---------- */
.hero{position:relative; padding-block:64px 56px; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 78% 40%, rgb(22 199 132 / .14), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgb(239 67 82 / .10), transparent 70%); pointer-events:none}
.hero-bg{position:absolute; inset:auto 0 0 0; height:62%; opacity:.22; pointer-events:none; mask-image:linear-gradient(transparent, #000 40%)}
.hero-bg .candles{width:100%; height:100%}
.hero-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:28px}}
.hero h1{font-size:clamp(2.3rem, 5.6vw, 3.9rem); font-weight:800; margin-top:14px}
.hero h1 .up{color:var(--up)}
.hero h1 .strike{position:relative; color:var(--muted)}
.hero h1 .strike::after{content:""; position:absolute; left:-2%; right:-2%; top:55%; height:5px; background:var(--dn); border-radius:3px; transform:rotate(-4deg)}
.hero .lead{color:var(--ink-2); max-width:54ch; margin-top:18px; font-size:1.12rem}
.hero .row{margin-top:28px}
.facts{display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:32px; padding-top:22px; border-top:1px solid var(--line)}
.facts div{display:grid}
.facts b{font:700 1.6rem var(--mono); font-variant-numeric:tabular-nums}
.facts b .up{font-size:.9rem; vertical-align:middle}
.facts span{font-size:.84rem; color:var(--muted)}
.hero-logo{position:relative; justify-self:center; display:grid; place-items:center; width:min(380px, 88%)}
.hero-logo::before{content:""; position:absolute; inset:8% 6%; border-radius:50%; background:radial-gradient(circle, rgb(242 182 50 / .32), transparent 65%); filter:blur(10px)}
.hero-logo img{position:relative; width:100%; height:auto; filter:drop-shadow(0 24px 40px rgb(0 0 0 / .6))}
.hero-logo .chip-up,.hero-logo .chip-dn{position:absolute; font:600 .78rem var(--mono); padding:7px 11px; border-radius:8px; background:var(--card); border:1px solid var(--line-2); box-shadow:var(--shadow); white-space:nowrap}
.hero-logo .chip-up{top:12%; left:-6%; color:var(--up)}
.hero-logo .chip-dn{bottom:30%; right:-8%; color:var(--dn)}
@media (max-width:520px){.hero-logo .chip-up{left:0}.hero-logo .chip-dn{right:0}}

.section{padding-block:64px}
.section.alt{background:var(--bg-2); border-block:1px solid var(--line)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px}
.sec-head h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-top:10px}
.sec-head p{color:var(--muted); max-width:56ch; margin-top:8px}

.steps3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; counter-reset:s; list-style:none; padding:0; margin:0}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.steps3 li{counter-increment:s; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:8px; position:relative; overflow:hidden}
.steps3 li::before{content:"0" counter(s); font:700 2.6rem/1 var(--mono); color:transparent; -webkit-text-stroke:1.2px var(--muted); opacity:.7; margin-bottom:8px}
.steps3 li::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--up)}
.steps3 h3{font-size:1.15rem}
.steps3 p{color:var(--muted); font-size:.95rem}

.markets{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
@media (max-width:960px){.markets{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.markets{grid-template-columns:1fr}}
.market{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:10px; align-content:start; text-decoration:none; color:inherit; transition:border-color .15s}
.market:hover{border-color:var(--line-2)}
.market .sym{display:flex; justify-content:space-between; align-items:center; font:600 .78rem var(--mono); letter-spacing:.08em; color:var(--muted)}
.market .sym i{font-style:normal; color:var(--up)}
.market .sym i.dn{color:var(--dn)}
.market h3{font-size:1.15rem}
.market p{color:var(--muted); font-size:.93rem}
.market .spark{height:40px}
.market .spark polyline{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}

.cats{display:flex; flex-wrap:wrap; gap:10px}
.cat-chip{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; background:var(--card); border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink); font-weight:600; font-size:.94rem}
.cat-chip i{width:8px; height:8px; border-radius:2px; background:var(--up)}
.cat-chip:nth-child(even) i{background:var(--dn)}
.cat-chip span{font:500 .8rem var(--mono); color:var(--muted)}
.cat-chip:hover{border-color:var(--up)}

.features{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
@media (max-width:900px){.features{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.features{grid-template-columns:1fr}}
.feature{display:grid; gap:8px; align-content:start; padding:20px; border-radius:var(--r); border:1px solid var(--line); background:var(--card)}
.feature .ic{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--up-bg); color:var(--up); margin-bottom:4px}
.feature:nth-child(even) .ic{background:var(--gold-bg); color:var(--gold)}
.feature .ic svg{width:22px; height:22px}
.feature h3{font-size:1.06rem}
.feature p{color:var(--muted); font-size:.93rem}

.faq{display:grid; gap:10px; max-width:820px}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 18px}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer; padding:16px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:600 1.3rem/1 var(--mono); color:var(--up)}
.faq details[open] summary::after{content:"−"; color:var(--dn)}
.faq details p{padding-bottom:16px; color:var(--muted)}

.cta-band{position:relative; overflow:hidden; background:linear-gradient(120deg, #0f2a22, #111b2e 55%, #2a1218); border:1px solid var(--line-2); border-radius:20px; padding:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.6rem, 3.2vw, 2.2rem)}
.cta-band p{color:var(--ink-2); margin-top:6px}
.cta-band img{height:110px; width:auto}
@media (max-width:640px){.cta-band img{display:none}}

.risk{font-size:.84rem; color:var(--muted); border:1px solid var(--line); border-left:3px solid var(--gold); background:var(--bg-2); border-radius:10px; padding:12px 16px}
.risk b{color:var(--gold)}

/* ---------- catalog / course page ---------- */
.page-head{position:relative; padding-block:40px 28px; border-bottom:1px solid var(--line); overflow:hidden}
.page-head h1{font-size:clamp(1.9rem, 4.5vw, 2.7rem); margin-top:10px}
.page-head p{color:var(--muted); margin-top:8px}
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:24px 0 20px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1.5px solid var(--line-2); background:var(--card); color:var(--ink-2); border-radius:8px; padding:6px 13px; font-weight:600; font-size:.9rem; text-decoration:none}
.chip span{color:var(--muted); margin-left:4px; font:500 .8rem var(--mono)}
.chip[aria-current="true"]{background:var(--up); color:var(--up-ink); border-color:var(--up)}
.chip[aria-current="true"] span{color:inherit; opacity:.8}
.search{display:flex; gap:6px; flex:1 1 260px; max-width:380px}
.search input{padding:8px 12px}

.crumbs{font-size:.88rem; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.course-layout{display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; padding-block:28px 48px}
@media (max-width:900px){.course-layout{grid-template-columns:1fr}}
.course-main{display:grid; gap:20px; min-width:0}
.course-main h1{font-size:clamp(1.8rem, 4.4vw, 2.6rem)}
.course-main .desc{font-size:1.05rem; color:var(--ink-2); white-space:pre-line}
.side{position:sticky; top:84px; display:grid; gap:14px}
@media (max-width:900px){.side{position:static}}
.side .card{padding:20px}
.side h3{font-size:1.15rem}
.kv{display:grid; gap:2px; margin:0}
.kv div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.94rem}
.kv div:last-child{border-bottom:0}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:600; text-align:right; overflow-wrap:anywhere}

/* auth pages */
.auth{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-block:48px}
@media (max-width:860px){.auth{grid-template-columns:1fr; gap:24px}}
.auth-side h1{font-size:clamp(1.9rem, 4.4vw, 2.7rem); margin-top:12px}
.auth-side p{color:var(--ink-2); margin-top:12px; max-width:46ch}
.auth-side .mark{height:110px; width:auto; margin-bottom:6px; filter:drop-shadow(0 16px 30px rgb(0 0 0 / .55))}
@media (max-width:860px){.auth-side .mark{height:80px}}
.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2)}
.ticks li::before{content:"▲"; flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--up-bg); color:var(--up); font-size:.62rem; margin-top:2px}

/* footer */
.foot{background:#070c17; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem; padding-block:44px 26px; margin-top:auto}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > :first-child{grid-column:1/-1}}
.foot h4{color:var(--ink); font:600 .78rem var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--up)}
.foot .brand{color:var(--ink); margin-bottom:12px}
.foot .risk{margin-top:26px}
.foot-bottom{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.82rem}

/* ---------- student dashboard ---------- */
.dash{display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start; padding-block:28px 48px}
@media (max-width:860px){.dash{grid-template-columns:1fr; gap:18px; padding-top:16px}}
.dash-nav{position:sticky; top:84px; display:grid; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px}
.dash-user{display:flex; align-items:center; gap:10px; padding:6px 6px 14px; margin-bottom:6px; border-bottom:1px solid var(--line); min-width:0}
.dash-user b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dash-user small{color:var(--muted)}
.av{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg, rgb(22 199 132 / .25), rgb(242 182 50 / .2)); color:var(--ink); font-weight:700; font-size:.9rem; border:1px solid var(--line-2)}
.av.xl{width:72px; height:72px; font-size:1.5rem; font-family:var(--display); border-radius:16px}
.dash-nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:var(--ink-2); text-decoration:none; font-weight:500}
.dash-nav a svg{width:18px; height:18px; color:var(--muted); flex:none}
.dash-nav a:hover{background:var(--soft); color:var(--ink)}
.dash-nav a[aria-current="page"]{background:var(--up-bg); color:var(--up); box-shadow:inset 3px 0 0 var(--up)}
.dash-nav a[aria-current="page"] svg{color:var(--up)}
.dash-nav .sep{height:1px; background:var(--line); margin:6px 0}
@media (max-width:860px){
  .dash-nav{position:static; display:flex; overflow-x:auto; padding:6px; gap:4px}
  .dash-user,.dash-nav .sep{display:none}
  .dash-nav a{white-space:nowrap; padding:8px 10px; font-size:.92rem}
  .dash-nav a svg{display:none}
  .dash-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--up)}
}
.dash-main{display:grid; gap:24px; min-width:0}
.dash-title{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap}
.dash-title h1{font-size:clamp(1.6rem, 3.8vw, 2.2rem)}
.dash-title p{color:var(--muted); margin-top:4px}

.banner{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; border-radius:var(--r); padding:22px; border:1px solid}
.banner.wait{background:var(--gold-bg); border-color:rgb(242 182 50 / .35)}
.banner.no{background:var(--dn-bg); border-color:rgb(239 67 82 / .35)}
.banner .big{font-size:2.2rem; line-height:1}
.banner h2{font-size:1.25rem}
.banner p{color:var(--ink-2); margin-top:4px}
@media (max-width:520px){.banner{grid-template-columns:1fr}}
.track{display:flex; gap:0; margin-top:14px; list-style:none; padding:0; flex-wrap:wrap; row-gap:8px}
.track li{display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--muted)}
.track li:not(:last-child)::after{content:""; width:34px; height:2px; background:currentColor; opacity:.35; margin:0 10px}
.track li i{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.75rem; border:2px solid currentColor}
.track li.done{color:var(--up)} .track li.done i{background:var(--up); color:var(--up-ink); border-color:var(--up)}
.track li.now{color:var(--gold)}

.tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
@media (max-width:560px){.tiles{gap:8px}.tile{padding:12px}.tile b{font-size:1.5rem}.tile span{font-size:.8rem}}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.tile b{display:block; font:700 2rem/1.1 var(--mono); font-variant-numeric:tabular-nums}
.tile:nth-child(2) b{color:var(--gold)} .tile:nth-child(3) b{color:var(--up)}
.tile span{color:var(--muted); font-size:.9rem}
.tile .bar{height:6px; background:var(--soft); border-radius:99px; margin-top:10px; overflow:hidden}
.tile .bar i{display:block; height:100%; background:var(--up); border-radius:99px}

.continue{display:grid; gap:10px}
.cont{display:grid; grid-template-columns:110px 1fr auto; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px; text-decoration:none; color:inherit}
.cont .cover{aspect-ratio:16/10; padding:6px}
.cont .cover .tag{display:none}
.cont h3{font-size:1.02rem}
.cont small{color:var(--muted)}
.cont:hover{border-color:var(--up)}
@media (max-width:520px){.cont{grid-template-columns:84px 1fr}.cont .btn{grid-column:1/-1}}

.sub-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.sub-h h2{font-size:1.3rem}
.sub-h a{font-size:.92rem}

.action-card{display:grid; gap:12px}
.action-card .btn{width:100%}
.done-box{display:flex; align-items:center; gap:10px; background:var(--up-bg); color:var(--up); padding:10px 14px; border-radius:10px; font-weight:600}

.profile-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.profile-head h2{font-size:1.4rem}

@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* community links */
.community{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
@media (max-width:900px){.community{grid-template-columns:1fr}}
.comm{--c:var(--up); --cbg:var(--up-bg); display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:14px 14px; align-items:center; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
.comm.telegram{--c:#4fb3ff; --cbg:rgb(79 179 255 / .12)}
.comm.group{--c:var(--gold); --cbg:var(--gold-bg)}
.comm:hover{border-color:var(--c); transform:translateY(-2px)}
.comm .ic{display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--cbg); color:var(--c)}
.comm .txt{display:grid; gap:2px; min-width:0}
.comm .txt b{font-family:var(--display); font-size:1.05rem}
.comm .txt small{color:var(--muted); font-size:.9rem}
.comm .cta{grid-column:1/-1; display:flex; justify-content:center; padding:10px; border-radius:10px; background:var(--cbg); color:var(--c); font-weight:700}
.comm:hover .cta{background:var(--c); color:var(--bg)}
.community.compact{gap:10px}
.community.compact .comm{grid-template-columns:auto 1fr auto; grid-template-rows:auto; padding:12px 14px}
.community.compact .comm .ic{width:38px; height:38px}
.community.compact .comm .cta{grid-column:auto; padding:6px 12px; font-size:.88rem}
.foot-grid{grid-template-columns:1.6fr 1fr 1.3fr 1fr}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
.community.compact{grid-template-columns:repeat(auto-fit, minmax(270px, 1fr))}
.community.compact .comm .txt b{font-size:.95rem; line-height:1.3}

/* floating community button */
.fab{position:fixed; z-index:40; right:calc(18px + env(safe-area-inset-right, 0px)); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.fab-btn{display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; padding:14px 20px 14px 16px; border-radius:999px; background:var(--up); color:var(--up-ink); font:700 .98rem var(--body); box-shadow:0 12px 30px -8px rgb(22 199 132 / .65), 0 0 0 1px rgb(255 255 255 / .08) inset; position:relative}
.fab-btn::before{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgb(22 199 132 / .55); animation:fabPulse 2.4s ease-out infinite}
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgb(22 199 132 / .55)}70%{box-shadow:0 0 0 14px rgb(22 199 132 / 0)}100%{box-shadow:0 0 0 0 rgb(22 199 132 / 0)}}
.fab-btn .i-close{display:none}
.fab.open .fab-btn{background:var(--soft); color:var(--ink); box-shadow:var(--shadow)}
.fab.open .fab-btn::before{animation:none}
.fab.open .i-open{display:none} .fab.open .i-close{display:block}
.fab-btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.fab-menu{width:min(320px, calc(100vw - 36px)); background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:10px; box-shadow:0 24px 60px -18px rgb(0 0 0 / .85); display:grid; gap:6px; animation:fabIn .16s ease-out}
.fab-menu[hidden]{display:none}
@keyframes fabIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.fab-title{font:600 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); padding:6px 8px 4px}
.fab-link{--c:var(--up); --cbg:var(--up-bg); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem}
.fab-link.telegram{--c:#4fb3ff; --cbg:rgb(79 179 255 / .12)}
.fab-link.group{--c:var(--gold); --cbg:var(--gold-bg)}
.fab-link .ic{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--cbg); color:var(--c)}
.fab-link .arr{color:var(--c)}
.fab-link:hover{background:var(--soft)}
@media (max-width:520px){.fab-btn{padding:14px} .fab-btn .lbl{display:none}}
/* keep page bottom content clear of the button */
.foot-bottom{padding-right:90px}
@media (max-width:520px){.foot-bottom{padding-right:70px}}
.auth-side .mark{display:block}