@import url('/css/fonts.css'); /* self-hosted, no visitor IPs to Google */

/* ============================================================
   Ascend v4 — Leetify-style. Warm charcoal canvas, blurred
   "defocused scene" atmosphere imagery, Poppins geometric headings
   and numbers, friendly 12px rounding, pill chips with coloured
   icon badges, broadcast scoreboard cards, offset-outline CTA.
   Accent stays Ascend green (swap --accent for --accent-pink to
   go full Leetify).
   ============================================================ */
:root{
  --bg:#151518; --bg-2:#18181c; --surface:#1f1f25; --surface-2:#27272e; --surface-3:#32323b;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#f4f4f6; --text-2:#c3c3cc; --muted:#8b8b97;
  --accent:#0df397; --accent-deep:#09c97c; --on-accent:#0b1410; --accent-tint:rgba(13,243,151,.14);
  --accent-pink:#ff4b7d;
  --good:#27e08c; --bad:#ff5064; --warn:#ffc53d; --info:#5ab8ff;
  /* Names the code already used without a definition (UX proposal item 4): worse results show red again. */
  --danger:var(--bad); --border:var(--line); --panel-2:var(--surface-2); --panel-3:var(--surface-3); --bg-deep:#101013;
  --good-tint:rgba(39,224,140,.16); --bad-tint:rgba(255,80,100,.16); --warn-tint:rgba(255,197,61,.16); --info-tint:rgba(90,184,255,.16);
  --lv1:#c9ced4; --lv2:#1ce400; --lv4:#ffc800; --lv8:#ff6309; --lv10:#fe1f00;
  --f-head:'Poppins',system-ui,sans-serif; --f-ui:'Poppins',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-display:'Poppins',system-ui,sans-serif;
  --f-mono:'Inter',system-ui,sans-serif; /* numbers: Inter with tabular digits (a small mono 0 read as 8) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --sidebar-w:250px; --header-h:60px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:600}

/* icons */
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:20px;line-height:1;display:inline-block;vertical-align:middle;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.ms.lg{font-size:28px} .ms.sm{font-size:16px}

/* type helpers */
.eyebrow,.upper{font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.mono{font-family:var(--f-mono);font-weight:500} .muted{color:var(--muted)} .t2{color:var(--text-2)}
.num{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.num-xl{font-family:var(--f-head);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1}
.up{color:var(--good)} .down{color:var(--bad)} .flat{color:var(--muted)}

/* atmosphere — blurred scene imagery behind hero surfaces */
.atmos,.atmos2{position:relative;isolation:isolate;overflow:hidden;background:var(--surface) url('/assets/tex/atmos.webp') center/cover no-repeat}
.atmos2{background-image:url('/assets/tex/atmos2.webp')}
.atmos::before,.atmos2::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(21,21,24,.45),rgba(21,21,24,.82))}
.atmos > *,.atmos2 > *{position:relative;z-index:1}

/* buttons — Leetify treatment: solid, rounded, offset outline box */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface-2);color:var(--text);font-family:var(--f-head);font-size:14px;font-weight:600;white-space:nowrap;position:relative;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-3);border-color:rgba(255,255,255,.22)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:10px;transform:translate(6px,6px);z-index:-1;opacity:.9}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.ghost{background:transparent;color:var(--text-2);border-color:transparent}
.btn.ghost:hover{color:var(--text);background:var(--surface-2);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--bad);border-color:rgba(255,80,100,.4)}
.btn.danger:hover{background:var(--bad-tint)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn.sm.primary::after{display:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn .ms{font-size:18px}

/* inputs */
input,select,textarea{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);padding:10px 12px;border-radius:10px;font-family:inherit;font-size:14px;outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(255,255,255,.3)}
textarea{resize:vertical;min-height:40px;width:100%}
label.field{display:flex;flex-direction:column;gap:6px}
label.field > span{font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}

/* surfaces */
.grid{display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.card h2{font-family:var(--f-head);font-size:15px;font-weight:600;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.card h2 .sub{font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.card.lock{border-style:dashed;background:var(--bg-2)}

/* KPI / tiles — Poppins numbers */
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi .label,.tile .label{font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.kpi .val{font-family:var(--f-head);font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1;margin-top:10px;color:var(--text);font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12px;margin-top:8px;color:var(--muted)}
.tiles{grid-template-columns:repeat(5,1fr)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-height:106px}
.tile .label{display:flex;justify-content:space-between;align-items:center}
.tile .val{font-family:var(--f-head);font-weight:700;font-size:27px;letter-spacing:-.02em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.tile .sub{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px;min-width:60px}
.spark i{flex:1;background:var(--surface-3);border-radius:2px;min-height:3px}
.spark i.bad{background:var(--bad)} .spark i.good{background:var(--good)}

/* identity hero — Leetify style */
.hero-id{border-radius:var(--r-lg);border:1px solid var(--line);padding:22px 24px}
.hero-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-main{flex:1;min-width:260px}
.avatar{width:72px;height:72px;border-radius:14px;background:var(--surface-3);border:2px solid rgba(255,255,255,.12);object-fit:cover;display:block}
.avatar.ph{display:grid;place-items:center;color:var(--muted)}
.hero-id .name{font-family:var(--f-head);font-size:24px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-id .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hero-id .rating{text-align:right;min-width:150px}
.hero-id .rating small{display:block;font-family:var(--f-head);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2);font-weight:600;margin-bottom:4px}
.hero-id .rating .val{font-family:var(--f-head);font-weight:700;font-size:46px;letter-spacing:-.03em;line-height:1;color:#fff}
.hero-id .rating .delta{display:inline-block;margin-top:6px;font-family:var(--f-head);font-weight:600;font-size:13px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.35)}

/* chips — pill with coloured circular icon badge */
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;font-family:var(--f-head);font-size:12.5px;font-weight:600;background:rgba(39,39,46,.9);border:1px solid var(--line-2);color:var(--text)}
.chip .ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text)}
.chip .ico .ms{font-size:14px}
.chip .ico.accent{background:var(--accent);color:var(--on-accent)} .chip .ico.good{background:var(--good);color:#0b1410} .chip .ico.bad{background:var(--bad);color:#fff} .chip .ico.warn{background:var(--warn);color:#2a1d00} .chip .ico.info{background:var(--info);color:#06203a}
/* legacy chip variants (plain) */
.chip.good,.chip.bad,.chip.warn,.chip.info,.chip.accent{padding:4px 12px}
.chip.good{color:var(--good)} .chip.bad{color:var(--bad)} .chip.warn{color:var(--warn)} .chip.info{color:var(--info)} .chip.accent{color:var(--accent)}

/* scoreboard match card — "VICTORY 13:9" */
.match-card{border-radius:var(--r-lg);border:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.mc-main{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.mc-result{font-family:var(--f-head);font-weight:800;font-size:34px;letter-spacing:.5px;text-transform:uppercase;color:#fff;line-height:1}
.mc-score{font-family:var(--f-head);font-weight:700;font-size:34px;letter-spacing:-.01em;line-height:1;color:#fff}
.mc-score .sep{color:var(--text-2);margin:0 2px}
.mc-chips{display:flex;gap:8px;flex-wrap:wrap}
.match-card.l .mc-result{color:var(--text-2)}

/* FACEIT level badge */
.lvlicon{display:inline-block;width:34px;height:34px;flex:none;vertical-align:middle}
.lvlicon.sm{width:26px;height:26px} .lvlicon.xs{width:22px;height:22px}
.lvlicon.none{border-radius:50%;border:2px solid var(--line-2)}
.chip .ico.fi{background:#ff5500} .chip .ico.fi img{width:13px;height:13px;display:block;filter:brightness(0) invert(1)}
.fi-mark{width:11px;height:11px;margin-right:6px;vertical-align:-1px}
.lvl{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font-family:var(--f-head);font-weight:700;font-size:13px;background:var(--surface-3);border:1px solid var(--line)}
.lvl.hi{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* gauge (kept for reuse) */
.gauge{--p:0;--c:var(--accent);width:108px;height:108px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--c) calc(var(--p)*1%), var(--surface-3) 0)}
.gauge::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface-2)}
.gauge > div{position:relative;text-align:center}
.gauge .v{font-family:var(--f-head);font-weight:700;font-size:32px;line-height:1;color:#fff}
.gauge .l{font-family:var(--f-head);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:3px}

/* pills / badges */
.pill{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:7px;font-family:var(--f-head);font-size:11px;font-weight:700}
.pill.w{background:var(--good-tint);color:var(--good)} .pill.l{background:var(--bad-tint);color:var(--bad)} .pill.t{background:var(--surface-3);color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;text-transform:uppercase;letter-spacing:.6px}
.badge.live{color:var(--accent);background:var(--accent-tint);border-color:transparent}
.badge.mock{color:var(--warn);background:var(--warn-tint);border-color:transparent}

/* map identity */
.mapchip{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-family:var(--f-head)}
.mapchip::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--map,#8a93a0)}
[data-map="Mirage"]{--map:#e0b96a} [data-map="Inferno"]{--map:#ff6a3d} [data-map="Nuke"]{--map:#7fb2ff} [data-map="Ancient"]{--map:#3ecf7a}
[data-map="Anubis"]{--map:#f2c94c} [data-map="Dust2"]{--map:#d9a066} [data-map="Train"]{--map:#9aa7b5} [data-map="Overpass"]{--map:#38c9b0} [data-map="Vertigo"]{--map:#b48cff} [data-map="Cache"]{--map:#8fd36a}

/* match rows */
.mrow{display:grid;grid-template-columns:4px 1.2fr .7fr 1fr .6fr .6fr .9fr;gap:14px;align-items:center;padding:11px 16px 11px 0;border-top:1px solid var(--line);font-size:13.5px}
.mrow:first-child{border-top:0}
.mrow .stripe{height:30px;border-radius:0 3px 3px 0;background:var(--surface-3)}
.mrow.w .stripe{background:var(--good)} .mrow.l .stripe{background:var(--bad)}
.mrow .score,.mrow .kda,.mrow .n{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.mrow .when{color:var(--muted);font-size:12px;text-align:right;white-space:nowrap}
.mrow-head{display:grid;grid-template-columns:4px 1.2fr .7fr 1fr .6fr .6fr .9fr;gap:14px;padding:6px 16px 8px 0;font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.mrow-head span:last-child{text-align:right}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;text-align:left;padding:10px 12px;background:var(--surface-2)}
td{padding:11px 12px;border-top:1px solid var(--line);white-space:nowrap}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--surface-2)}

/* bars */
.bar{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--accent);border-radius:999px}
.bar.done > i{background:var(--good)}
.bar.thin{height:4px}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.empty{color:var(--muted);text-align:center;padding:36px}
.grid > .empty{grid-column:1/-1}

/* segmented control (pricing interval) */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{border:0;background:transparent;color:var(--muted);font-family:var(--f-head);font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.seg button.on{background:var(--surface-3);color:var(--text)}
.seg .save{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:rgba(13,243,151,.12);padding:2px 7px;border-radius:999px}
.price-note{color:var(--muted);font-size:12px;margin-top:2px}

/* first-run checklist */
.ob-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ob-step{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);color:var(--text);text-decoration:none}
.ob-step:hover{border-color:var(--line-2);background:var(--surface-3)}
.ob-step b{display:block;font-family:var(--f-head);font-size:13px;font-weight:600}
.ob-step small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.4}
.ob-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;background:var(--surface-3);color:var(--muted)}
.ob-step.done{opacity:.6}
.ob-step.done .ob-n{background:var(--accent);color:#0b0b0d}
.ob-step.done .ob-n .ms{font-size:16px}

/* duel profile (stats page) */
.duel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duel-row{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.duel-row .mono{font-size:20px;font-weight:600;line-height:1.2;margin-top:2px}
.duel-row .mono.good{color:var(--good)}
.duel-row .mono.bad{color:var(--bad)}
.duel-row small{font-size:11.5px}

/* landing scouting funnel */
.mk-scout{display:flex;gap:12px;max-width:720px}
.mk-scout input{flex:1;min-width:0;height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:inherit;font-size:15px}
.mk-scout input:focus{outline:none;border-color:var(--accent)}
.mk-scout .btn{height:46px;font-size:15px}
#mkScoutOut{margin-top:22px}
#mkScoutOut .hero-id{margin:0}
.mk-scout-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding:16px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.mk-scout-cta p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.5;max-width:620px}

/* generated art slots (public/assets/img) — stronger scrim so text stays readable on real art */
.has-art::before{background:linear-gradient(90deg,rgba(21,21,24,.9) 0%,rgba(21,21,24,.72) 45%,rgba(21,21,24,.45) 100%)}
.mk-hero-band.has-art::before{background:linear-gradient(90deg,rgba(21,21,24,.92) 0%,rgba(21,21,24,.75) 50%,rgba(21,21,24,.4) 100%)}
.ach .ico img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block}
.ach .ico:has(img){background:transparent;border:0}
.brand img{object-fit:contain}

.ach:not(.on) .ico img{filter:grayscale(1);opacity:.45}
.empty-art{width:150px;height:150px;object-fit:contain;display:block;margin:0 auto 10px;opacity:.9}
svg.chart{display:block;width:100%;height:auto}
.dash-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.dash-grid > .col{display:flex;flex-direction:column;gap:12px;min-width:0}
.dash-grid .card{margin-top:0 !important}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.split{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}.hero-id .rating{text-align:left}}

/* ============================================================ app shell */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;grid-template-areas:"side head" "side main";min-height:100vh}
.sidebar{grid-area:side;background:var(--bg-2);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px}
.sidebar .brand .name,.brand .name{font-family:var(--f-head);font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff}
.side-id{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px}
.side-id img,.side-id .ph{width:36px;height:36px;border-radius:10px;object-fit:cover;background:var(--surface-3);display:grid;place-items:center;color:var(--muted)}
.side-id .nm{font-family:var(--f-head);font-weight:600;font-size:13.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-id .sb{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-top:3px}
.navgroup{font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;padding:12px 12px 6px}
.navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text-2);font-family:var(--f-head);font-size:14px;font-weight:500;transition:background .12s,color .12s}
.navitem:hover{color:var(--text);background:var(--surface)}
.navitem.active{color:#fff;background:var(--surface-2)}
.navitem .ms{font-size:20px;color:var(--muted)}
.navitem.active .ms{color:var(--accent)}
.sidebar .spacer{flex:1}
.topbar{grid-area:head;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--bg-2);position:sticky;top:0;z-index:10}
.topbar .title{font-family:var(--f-head);font-size:15px;font-weight:600;color:#fff}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500}
.user-chip img,.avatar-fallback{width:28px;height:28px;border-radius:8px;background:var(--surface-3);object-fit:cover}
.view{grid-area:main;padding:20px 24px 40px;overflow:auto;max-width:1320px;width:100%}

/* achievements */
.ach-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ach{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);opacity:.45}
.ach.on{opacity:1;border-color:var(--line-2)}
.ach .ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);flex:none}
.ach.on .ico{background:var(--accent);color:var(--on-accent)}
.ach .ico .ms{font-size:22px}
.ach .nm{font-family:var(--f-head);font-weight:600;font-size:14px}
.ach .ds{color:var(--muted);font-size:12px;margin-top:3px}
.ach .at{color:var(--accent);font-size:11px;margin-top:6px;font-weight:600}

/* ============================================================ landing */
.landing{min-height:100%}
.brand{display:flex;align-items:center;gap:10px}
.mk-nav{display:flex;align-items:center;gap:22px;padding:14px 32px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(21,21,24,.9);backdrop-filter:blur(10px);z-index:20}
.mk-links{display:flex;gap:22px;margin-left:12px}
.mk-links a{font-family:var(--f-head);color:var(--text-2);font-size:14px;font-weight:500}
.mk-links a:hover{color:#fff}
.mk-nav .right{margin-left:auto}
.steam-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;border-radius:10px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font-family:var(--f-head);font-weight:600;font-size:15px;position:relative}
.steam-btn::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:10px;transform:translate(6px,6px);z-index:-1;opacity:.9}
.steam-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.steam-btn[disabled]{opacity:.5;background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.steam-btn[disabled]::after{display:none}

.mk-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:72px 32px 64px}
.mk-hero-band{position:relative;isolation:isolate;overflow:hidden;background:var(--bg) url('/assets/tex/atmos.webp') center/cover no-repeat}
.mk-hero-band::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(21,21,24,.55),rgba(21,21,24,.92))}
.mk-hero-band > *{position:relative;z-index:1}
.mk-hero-copy h1{font-family:var(--f-head);font-size:50px;font-weight:600;line-height:1.1;margin:16px 0;letter-spacing:-.5px;color:#fff}
.mk-hero-copy h1 .grad{color:var(--accent)}
.mk-hero-copy p{color:var(--text-2);font-size:17px;max-width:540px;margin:0 0 28px;line-height:1.6}
.mk-hero-copy p b{color:#fff;font-weight:600}
.mk-hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mk-hero .cta .btn{height:46px;font-size:15px}
.mk-trust{margin-top:22px;color:var(--muted);font-size:13px}
.hero-preview{display:flex;flex-direction:column;gap:12px}
.hp-example{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.hp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hp-tiles .tile{min-height:90px;padding:12px 14px}
.hp-tiles .tile .val{font-size:22px}

.mk-section{max-width:1200px;margin:0 auto;padding:60px 32px}
.mk-section.alt{background:var(--bg-2);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mk-section.alt > *{max-width:1200px;margin-left:auto;margin-right:auto}
.mk-head{margin-bottom:30px}
.mk-head h2{font-family:var(--f-head);font-size:32px;font-weight:600;margin-top:10px;letter-spacing:-.5px;color:#fff}
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.feature .ico{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;margin-bottom:14px}
.feature .ico .ms{font-size:22px}
.feature h3{font-family:var(--f-head);font-size:16px;font-weight:600;margin-bottom:6px;color:#fff}
.feature p{color:var(--text-2);font-size:13.5px;margin:0;line-height:1.55}
.mk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.mk-step{display:flex;gap:14px;align-items:flex-start}
.mk-step-n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;background:var(--accent);color:var(--on-accent)}
.mk-step h3{font-family:var(--f-head);font-size:16px;font-weight:600;color:#fff}
.mk-pricing{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.mk-pricing .card.pop,.price-pop{border-color:var(--accent)}
.mk-partner-band{display:flex;align-items:center;gap:28px;justify-content:space-between;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:34px;border:1px solid var(--line);border-radius:16px}
.mk-partner-band h2{font-family:var(--f-head);font-size:22px;font-weight:600;color:#fff}
.mk-partner-band p{color:var(--text-2);margin:8px 0 0;max-width:640px;font-size:14.5px;line-height:1.55}
.mk-footer{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;max-width:1200px;margin:36px auto 0;padding:28px 32px;border-top:1px solid var(--line)}
.mk-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.mk-foot-links a{font-family:var(--f-head);color:var(--muted);font-size:13px;font-weight:500}
.mk-foot-links a:hover{color:#fff}
/* (phone rules for the landing live in the "landing on phones" block above) */
@media(max-width:820px){.mk-links{display:none}}
@media(max-width:860px){.shell{grid-template-columns:1fr;grid-template-areas:"head" "main"}.sidebar{display:none}}

/* toasts */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:100}
.toast{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:10px;padding:11px 15px;max-width:340px;font-size:13px}
.toast.err{border-left-color:var(--bad)}

/* ============================================================ phone layout (≤860px): bottom tabs + "More" sheet */
.tabbar,.sheet{display:none}
@media(max-width:860px){
  :root{--header-h:56px}
  .hide-m{display:none!important}
  .shell{min-height:100dvh}
  .view{padding:14px 14px calc(86px + env(safe-area-inset-bottom));max-width:none}
  .topbar{padding:0 14px;gap:10px}
  .topbar .title{font-size:18px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .right{gap:8px}
  .topbar .btn.sm.primary{width:40px;height:40px;padding:0;border-radius:10px}
  .topbar .btn.sm.primary .lbl{display:none}
  .topbar .btn.sm.primary .ms{font-size:20px}

  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:30;grid-template-columns:repeat(5,1fr);height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(27,27,32,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-family:var(--f-head);font-size:10.5px;font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tab .ms{font-size:24px;line-height:1}
  .tab.active{color:var(--accent)}

  .sheet{display:block;position:fixed;inset:0;z-index:40}
  .sheet[hidden]{display:none}
  .sheet .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
  .sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:10px 12px calc(16px + env(safe-area-inset-bottom));max-height:82dvh;overflow:auto;display:flex;flex-direction:column;gap:2px;animation:sheetUp .18s ease-out}
  .sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:2px auto 12px;flex:none}
  .sheet .navitem{padding:13px 12px;font-size:15px;width:100%;background:none;border:0;text-align:left;cursor:pointer;color:var(--text-2);font-family:var(--f-head)}
  .sheet .navitem.active{background:var(--surface-2);color:#fff}
  body.sheet-open{overflow:hidden}
  @keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

  /* content density */
  .card{padding:14px}
  .card h2{flex-wrap:wrap;row-gap:2px}
  .card h2 .sub{flex-basis:100%;order:5;margin-left:0}
  .grid>*{min-width:0}
  .hero-id{padding:16px}
  .hero-inner{gap:12px}
  .avatar{width:56px;height:56px;border-radius:12px}
  .hero-id .name{font-size:20px}
  .hero-id .chips{gap:6px}
  .chip{font-size:12px}
  .hero-id .rating{width:100%;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);text-align:left}
  .hero-id .rating small{margin:0;flex:1 1 100%}
  .hero-id .rating .val{font-size:30px}
  .hero-id .rating .delta{margin:0}
  .match-card{padding:14px 16px}
  .mc-result,.mc-score{font-size:26px}
  .mc-main{gap:12px}
  .tile{min-height:92px;padding:12px 14px}
  .tile .val{font-size:24px}
  .duel-row .mono{font-size:18px}
  .seg{display:flex;width:100%}
  .seg button{flex:1;justify-content:center;padding:8px 6px;font-size:12.5px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .toasts{left:14px;right:14px;bottom:calc(74px + env(safe-area-inset-bottom))}
  .toast{max-width:none}
  form.row>.field{flex:1 1 100%;max-width:none!important}
  form.row>.btn{width:100%}
  .btn{min-height:40px}

  /* match history: the 7-column table becomes a 3-line card per match */
  .mrow-head{display:none}
  .mrow{grid-template-columns:4px minmax(0,1fr) auto;grid-template-areas:"s map when" "s kda score" "s kd adr";gap:3px 12px;padding:10px 14px 10px 0;font-size:13px;align-items:center}
  .mrow>.stripe{grid-area:s;align-self:stretch}
  .mrow>.mapchip{grid-area:map}
  .mrow>.score{grid-area:score;justify-self:end;font-weight:600}
  .mrow>.kda{grid-area:kda;color:var(--text-2)}
  .mrow>:nth-child(5){grid-area:kd}
  .mrow>:nth-child(6){grid-area:adr;justify-self:end}
  .mrow>.when{grid-area:when;justify-self:end;display:flex;align-items:center;gap:6px;white-space:nowrap}
  .mrow>.kda::before,.mrow>:nth-child(5)::before,.mrow>:nth-child(6)::before{color:var(--muted);font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;margin-right:4px}
  .mrow>.kda::before{content:"K / D / A"}
  .mrow>:nth-child(5)::before{content:"K/D"}
  .mrow>:nth-child(6)::before{content:"ADR"}
}

/* landing on phones */
@media(max-width:820px){
  .mk-nav{padding:12px 16px;gap:12px}
  .mk-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 16px 40px}
  .hero-preview{order:0;min-width:0}
  .mk-hero-copy h1{font-size:32px}
  .mk-hero-copy p{font-size:15px}
  .mk-hero .cta{flex-direction:column;align-items:stretch}
  .mk-hero .cta .btn,.mk-hero .cta .steam-btn{width:100%;justify-content:center}
  .mk-section{padding:40px 16px}
  .mk-head h2{font-size:26px}
  .mk-scout{flex-direction:column}
  .mk-scout-cta{flex-direction:column;align-items:stretch}
  .mk-partner-band{margin:0 16px;padding:22px}
  .mk-footer{padding:22px 16px;flex-direction:column;align-items:flex-start;gap:12px}
  .mk-pricing{grid-template-columns:1fr}
  .hp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hp-tiles .tile{padding:10px 12px;min-height:0}
  .hp-tiles .tile .val{font-size:20px}
  .hp-tiles .spark{display:none}
  .hero-preview .match-card{padding:14px 16px}
}

/* phone round 2: tap targets, lone tile, sheet motion */
@media(max-width:860px){
  .btn.sm{height:38px;padding:0 14px;font-size:13px}
  .pill{min-width:28px;height:28px}
  a,button{-webkit-tap-highlight-color:transparent}
  .tiles>:nth-child(5):last-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-height:0}
  .tiles>:nth-child(5):last-child .val{font-size:22px}
  .sheet .panel{transition:transform .12s ease-out;will-change:transform}
  .card svg.chart{width:100%;height:auto;display:block}
  .mrow .btn.sm{height:32px;padding:0 10px}
}

/* phone hero header: avatar + name on one row, chips below, rating last */
@media(max-width:860px){
  .hero-inner{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av name" "chips chips" "rating rating";align-items:center;gap:10px 12px}
  .hero-inner>.avatar,.hero-inner>.ph{grid-area:av}
  .hero-inner>.hero-main{display:contents}
  .hero-id .name{grid-area:name;justify-content:flex-start;text-align:left;margin:0}
  .hero-id .chips{grid-area:chips}
  .hero-id .rating{grid-area:rating}
}

/* note editor: dialog on desktop, bottom sheet on phones */
.modal{position:fixed;inset:0;z-index:50}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));padding:18px;margin:0}
.modal textarea{width:100%;min-height:120px;resize:vertical;font:inherit;font-size:14px;line-height:1.5;padding:12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text)}
.modal textarea:focus{outline:none;border-color:var(--accent)}
@media(max-width:860px){
  .modal .panel{top:auto;bottom:0;left:0;right:0;width:auto;transform:none;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  /* get-started checklist: two compact columns instead of five tall cards */
  .ob-steps{grid-template-columns:1fr 1fr;gap:8px}
  .ob-step{padding:10px;gap:8px;align-items:center}
  .ob-step small{display:none}
  .ob-step b{font-size:12.5px;line-height:1.25}
  .ob-n{width:22px;height:22px;font-size:11px}
}

/* admin tabs (segmented control; scrolls sideways on phones) */
.admin-tabs{margin-bottom:14px;flex-wrap:wrap}
.admin-tabs button{padding:7px 14px}
.admin-tabs .save{margin-left:2px;background:var(--accent);color:#0b0b0d}
.card h2 .btn.right{margin-left:auto}
@media(max-width:860px){
  .admin-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs button{flex:0 0 auto;padding:7px 12px}
}

/* proposals authored as HTML (admin panel) */
.prop-body{margin-top:10px;padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);font-size:13.5px;line-height:1.6;color:var(--text);max-height:560px;overflow:auto}
.prop-body>:first-child{margin-top:0}
.prop-body h2{font-family:var(--f-head);font-size:17px;font-weight:600;color:#fff;margin:18px 0 8px;display:block}
.prop-body h3{font-family:var(--f-head);font-size:14px;font-weight:600;color:#fff;margin:16px 0 6px;display:block}
.prop-body p{margin:0 0 10px}
.prop-body ul,.prop-body ol{margin:0 0 10px;padding-left:22px}
.prop-body li{margin:3px 0}
.prop-body strong{color:#fff}
.prop-body code{font-family:var(--f-mono);font-size:12px;background:var(--surface-3);padding:1px 6px;border-radius:6px}
.prop-body table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:12.5px}
.prop-body th{font-family:var(--f-head);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2)}
.prop-body td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.prop-body tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.prop-body .tag{display:inline-block;font-family:var(--f-head);font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.prop-body .tag.have{background:rgba(13,243,151,.14);color:var(--accent)}
.prop-body .tag.half{background:rgba(255,197,61,.14);color:var(--warn)}
.prop-body .tag.missing{background:rgba(255,80,100,.14);color:var(--bad)}
.prop-body .phase{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.prop-body .phase h3{margin-top:0}
.prop-body .muted{color:var(--muted)}
@media(max-width:860px){.prop-body{padding:12px}.prop-body table{display:block;overflow-x:auto;white-space:nowrap}}
.prop-body td,.prop-body th{white-space:normal}
.prop-body table{table-layout:auto}

/* roadmap / community board */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.kcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:220px}
.kcol-head{display:flex;justify-content:space-between;align-items:baseline}
.kcol-head h3{font-family:var(--f-head);font-size:15px;font-weight:600;color:#fff;margin:0}
.kcol-hint{color:var(--muted);font-size:12px;margin-top:-6px}
.kcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.kcard-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.kcard-title{font-family:var(--f-head);font-weight:600;font-size:13.5px;color:#fff;line-height:1.3}
.kcard-body{color:var(--text-2);font-size:12.5px;line-height:1.5;margin-top:6px}
.kcard-foot{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11.5px}
.kcard .vote{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-3);color:var(--text);font-family:var(--f-head);font-weight:600;font-size:12.5px;cursor:pointer}
.kcard .vote .ms{font-size:16px}
.kcard .vote.on{background:rgba(13,243,151,.16);border-color:rgba(13,243,151,.5);color:var(--accent)}
.kcard .linkbtn{margin-left:auto;background:none;border:0;color:var(--muted);font-size:11.5px;cursor:pointer;padding:0}
.kcard .linkbtn:hover{color:var(--bad)}
.kcard .tag{flex:none;font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.ksuggest{display:flex;flex-direction:column;gap:8px}
.ksuggest input,.ksuggest textarea{width:100%;font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--text)}
.ksuggest input:focus,.ksuggest textarea:focus{outline:none;border-color:var(--accent)}
.ksuggest a{color:var(--accent)}
.kempty{color:var(--muted);font-size:12.5px;text-align:center;padding:14px 0}
.mk-links a.on{color:#fff}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.kanban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}.kcol{flex:0 0 86vw;scroll-snap-align:start}}
.rm-table{table-layout:auto}
.rm-table td{white-space:normal;vertical-align:top}
.rm-table input,.rm-table textarea,.rm-table select{display:block;font-size:13px;padding:7px 9px}
.rm-table textarea{min-height:52px}
.rm-table td .row{flex-wrap:wrap;gap:6px}

/* progress: weekly card + timelines */
.weekly-head{font-family:var(--f-head);font-weight:600;font-size:18px;margin-top:4px;line-height:1.25}
.weekly-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px}
.wm{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.wm span{font-size:11.5px;color:var(--muted)}
.wm b{font-family:var(--f-mono);font-size:16px;font-weight:600}
.wm i,.tl-num i{font-style:normal;font-size:11.5px}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:128px 1fr auto;gap:14px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.tl:first-child{border-top:0;padding-top:4px}
.tl-when{color:var(--muted);font-size:12px;line-height:1.4}
.tl-when span{font-family:var(--f-mono);font-size:11px}
.tl-head{font-family:var(--f-head);font-weight:600;font-size:13.5px;line-height:1.3}
.tl-num{display:flex;gap:8px;align-items:baseline;font-family:var(--f-mono);font-size:15px;white-space:nowrap}
.tl .tag{display:inline-block;font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--text-2);margin-left:4px;vertical-align:middle}
.tl .tag.improved{color:var(--accent);background:rgba(13,243,151,.14)}
.tl .tag.worse{color:var(--danger);background:rgba(255,80,80,.12)}
@media(max-width:860px){.tl{grid-template-columns:1fr auto}.tl-when{grid-column:1/-1}}

label.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);cursor:pointer;padding-bottom:10px}
label.check input{width:16px;height:16px;accent-color:var(--accent);margin:0}

/* practice chips */
.drills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.drill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font-size:12px;text-decoration:none;cursor:pointer;line-height:1.3}
.drill:hover{border-color:var(--accent)}
.drill .ms{font-size:15px;color:var(--accent)}
.drill i{font-style:normal;color:var(--muted);font-size:11px}
.drill-steps{flex-basis:100%;font-size:12.5px;color:var(--text-2);line-height:1.5;padding:8px 10px;border-left:2px solid var(--accent);background:var(--surface-2);border-radius:0 8px 8px 0}

/* teammates as cards on phones */
@media(max-width:860px){
.tm-wrap{overflow:visible!important}
.tm-table thead{display:none}
.tm-table,.tm-table tbody{display:block;width:100%}
.tm-table tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.tm-table td{display:block;padding:0;border:0;white-space:normal;text-align:left}
.tm-table td:nth-child(1),.tm-table td:nth-child(4){grid-column:1/-1}
.tm-table td:nth-child(2)::before{content:'Games ';color:var(--muted);font-size:11px}
.tm-table td:nth-child(3)::before{content:'Record ';color:var(--muted);font-size:11px}
.tm-table td:nth-child(6)::before{content:'Last ';color:var(--muted);font-size:11px}
.tm-table td:nth-child(7){justify-self:end}
}

/* cups */
.cup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cup-card{display:block;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--text);text-decoration:none}
.cup-card:hover{border-color:var(--accent)}
.cup-name{font-family:var(--f-head);font-weight:600;font-size:15px}
.cteam{padding:10px 0;border-top:1px solid var(--line)}
.cteam:first-of-type{border-top:0}
.chip.bad{border-color:rgba(255,80,80,.5);color:var(--danger)}
.chip i{font-style:normal;color:var(--muted);font-size:11px}
.bracket{display:flex;gap:18px;overflow-x:auto;padding-bottom:6px}
.bracket .round{display:flex;flex-direction:column;justify-content:space-around;gap:12px;min-width:220px;flex:1}
.bmatch{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden}
.bmatch.ready{border-color:rgba(13,243,151,.35)}
.bteam{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font-size:13px}
.bteam+.bteam{border-top:1px solid var(--line)}
.bteam.win{color:var(--accent);font-weight:600}
.bteam.tbd{color:var(--muted)}
.bteam b{font-family:var(--f-mono)}
.bmeta{font-size:11px;color:var(--muted);padding:4px 10px 8px}
.bform{display:flex;gap:6px;padding:6px 8px 8px;border-top:1px solid var(--line)}
.bform input{flex:1;min-width:0;font-size:12px;padding:6px 8px}

/* Even-width digits everywhere, so columns of numbers line up without a monospace font. */
body{font-variant-numeric:tabular-nums}
/* Team feed: text buttons and skeleton rows while it loads */
.linkbtn{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.linkbtn:hover{color:var(--text)}
.skel{display:block;height:12px;border-radius:6px;background:var(--surface-2);animation:skel 1.4s ease-in-out infinite}
@keyframes skel{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
/* The bell (in-app notifications) */
.bell-wrap{position:relative}
.bell{position:relative}
.bell-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center}
.bell-panel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-height:70vh;overflow:auto;z-index:30;padding:10px 14px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:2px 0 8px}
.bell-item{display:block;padding:10px 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none;font-size:13px}
.bell-item:hover{color:#fff}
.bell-item.unread>div:first-child{font-weight:600}
.bell-item.unread::before{content:"";float:right;width:8px;height:8px;border-radius:50%;background:var(--accent);margin:5px 0 0 8px}
@media (max-width:820px){.bell-panel{position:fixed;left:12px;right:12px;width:auto;top:60px}}
/* Announcement line and sign-up bars (owner tools) */
.announce{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(13,243,151,.35);background:var(--accent-tint);border-radius:var(--r-md);font-size:13.5px}
.announce a{color:var(--accent);font-weight:600}
.signup-bars{display:flex;align-items:flex-end;gap:6px;height:84px}
.signup-bars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;font-size:10.5px;color:var(--muted)}
.signup-bars i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:var(--accent)}
#adminUserDetail{scroll-margin-top:76px}
/* Phone menu on the public pages (UX proposal item 5) */
.mk-menu-btn{display:none;background:none;border:0;color:var(--text);padding:6px;cursor:pointer}
@media(max-width:820px){
  .mk-menu-btn{display:inline-flex}
  .mk-nav{position:sticky}
  .mk-nav.open .mk-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:14px;margin:0;padding:14px 16px;background:var(--bg-2);border-bottom:1px solid var(--line)}
}
/* "Updating from FACEIT" while the dashboard shows stored matches (UX proposal item 2) */
.sync-chip{display:inline-flex;align-items:center;gap:6px}
.sync-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:skel 1.2s ease-in-out infinite}
.sync-chip[hidden]{display:none}
/* Accessibility basics (UX proposal item 8): a visible focus ring, reduced motion, own dialogs */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.dlg-wrap{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.dlg-wrap .dlg{width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
/* Proposal bodies, rendered (they are HTML) */
.prop-body{margin-top:8px;padding:14px 16px;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--r-sm);max-height:560px;overflow:auto;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.prop-body h1,.prop-body h2{font-family:var(--f-ui);font-size:16px;color:var(--text);margin:4px 0 10px;text-transform:none;letter-spacing:0}
.prop-body h3,.prop-body h4{font-family:var(--f-ui);font-size:14px;color:var(--text);margin:16px 0 6px;text-transform:none;letter-spacing:0}
.prop-body p{margin:0 0 10px}.prop-body ul,.prop-body ol{margin:0 0 10px;padding-left:20px}.prop-body li{margin:3px 0}
.prop-body table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:12.5px;display:block;overflow-x:auto}
.prop-body th,.prop-body td{text-align:left;vertical-align:top;padding:6px 8px;border-top:1px solid var(--border)}
.prop-body th{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.prop-body td.ok{color:var(--good)}.prop-body td.half{color:var(--warn)}.prop-body td.bad{color:var(--danger)}
.prop-body a{color:var(--accent)}.prop-body b,.prop-body strong{color:var(--text)}.prop-body code{font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.prop-body img{max-width:100%;border-radius:8px}

/* Evidence under a coach insight: the games behind it (feedback proposal, 16 Oct 2026). */
.evid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.evid span{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-variant-numeric:tabular-nums}
.evid span.clear{background:var(--good-tint);color:var(--good)}
/* Premier match rows: the demo numbers under each row (coaching proposal, 23 Oct 2026) */
.mrow-sub{padding:0 16px 10px 18px;margin-top:-4px;font-size:12px;color:var(--muted)}
.mrow-sub b{color:var(--text);font-weight:500}
/* Coaching round 2 (25 Oct 2026): maps table, role and clutch comparisons */
.table-scroll{overflow-x:auto}
.maptable th{font-family:var(--f-head);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.maptable td{padding:8px;border-top:1px solid var(--line)}
.maptable .r{text-align:right}
.cmp{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 14px;align-items:center;font-size:13px}
.cmp>*{min-width:0}
.cmp-chip{display:inline-block;font-family:var(--f-head);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.cmp-chip.good{background:rgba(34,227,138,.14);color:var(--good)}
.cmp-chip.bad{background:rgba(255,92,106,.14);color:var(--bad)}
.role-name{font-family:var(--f-head);font-size:22px;font-weight:700;margin:2px 0 4px}
@media (max-width:520px){.cmp{gap:6px 8px;font-size:12.5px}.cmp-chip{white-space:normal}.maptable th,.maptable td{padding:8px 5px}.maptable td:first-child .cmp-chip{display:block;width:max-content;margin-top:4px}}
/* Start wizard and phone dashboard (new players proposal, 25 Oct 2026) */
.wz{max-width:560px;margin:8px auto 24px;padding:22px}
.wz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.wz-steps{display:flex;gap:6px}.wz-steps i{width:24px;height:4px;border-radius:9px;background:var(--surface-3)}.wz-steps i.on{background:var(--accent)}
.wz-title{font-size:20px;margin:0 0 4px}
.wz-lead{font-size:13px;margin:0 0 14px}
.wz-acc{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:12px 14px;margin-bottom:8px;font-size:13px;color:var(--text-2)}
.wz-h{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--text);margin-bottom:3px}
.wz-st{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.wz-st.ok{background:rgba(34,227,138,.14);color:var(--good)}.wz-st.warn{background:rgba(255,191,71,.14);color:var(--warn)}
.wz-pick{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:12px 14px;margin-bottom:8px;font-size:13px;color:var(--text-2);cursor:pointer}
.wz-pick.on{border-color:var(--accent)}
.wz-pick input{accent-color:var(--accent);margin:2px 0 0;width:16px;height:16px}
.wz-pick b{display:block;font-family:var(--f-head);font-size:13.5px;color:var(--text);margin-bottom:2px}
.wz-now{text-align:right;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.wz-now b{display:block;font-size:16px;color:var(--text);text-transform:none;letter-spacing:0;margin-top:2px}
.wz-full{width:100%;justify-content:center;margin-top:8px}
.wz-skip{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--muted);font-size:12.5px;cursor:pointer;text-align:center;padding:6px}
.wz-skip:hover{color:var(--text)}
.lt-more{margin-top:8px}.lt-more summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:4px 0}
@media(max-width:860px){
  .wz{padding:16px;margin-top:0}
  .hero-id{padding:16px}
  .hero-id .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .hero-id .chips::-webkit-scrollbar{display:none}
  .hero-id .chips .chip{flex:none}
  .m-stack{display:flex;flex-direction:column;gap:12px;min-width:0;margin-top:12px}
}
/* Teams round 2 (25 Oct 2026): overview, invite link, join page */
.ov-row{display:grid;grid-template-columns:minmax(0,1.2fr) auto auto minmax(0,1.4fr);gap:10px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:13px}
.ov-row:first-of-type{border-top:0}
.ov-row:has(> .ov-note:nth-child(2)){grid-template-columns:minmax(0,1.2fr) minmax(0,2fr)}
.ov-who b{display:block;font-family:var(--f-head);font-size:13.5px;color:var(--text)}.ov-who span{font-size:12px;color:var(--muted)}
.ov-note{font-size:12.5px;color:var(--text-2)}
.form-dots{display:inline-flex;gap:3px}.form-dots i{width:15px;height:15px;border-radius:4px;font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center;background:var(--surface-3);color:var(--muted)}
.form-dots i.w{background:rgba(34,227,138,.18);color:var(--good)}.form-dots i.l{background:rgba(255,92,106,.18);color:var(--bad)}
.ov-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:13px}
.invite-link .upper{margin-bottom:2px}
.link-box{flex:1;min-width:0;display:block;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:8px 10px;font-family:var(--f-mono);font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.join-card{max-width:440px;margin:40px auto;text-align:center;padding:28px}
.join-card h2{font-size:22px;text-transform:none;letter-spacing:0;color:var(--text);margin:8px 0}
.join-card p{font-size:13.5px;margin:0 0 16px}
.join-btn{display:inline-flex;justify-content:center;width:100%}
@media(max-width:860px){
  .ov-row,.ov-row:has(> .ov-note:nth-child(2)){grid-template-columns:minmax(0,1fr) auto}
  .ov-row .form-dots{grid-column:1/-1}
  .ov-row > .ov-note:last-child{grid-column:1/-1}
  .ov-foot{grid-template-columns:1fr}
  .invite-link .row{flex-wrap:wrap}
  .invite-link .link-box{flex-basis:100%}
}
.btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)} /* a selected tab, not an action: no filled accent (teams round 2) */
/* Cup interest list (25 Oct 2026) */
.ci-bars{display:flex;gap:6px;margin:12px 0 6px}.ci-bars i{flex:1;height:8px;border-radius:9px;background:var(--surface-3)}.ci-bars i.on{background:var(--accent)}
.ci-card .steam-btn{display:inline-flex}
.ci-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--surface);padding:14px 18px;color:var(--text);text-decoration:none;font-size:14px}
.ci-strip:hover{border-color:var(--line-2)}
.ci-go{font-family:var(--f-head);font-weight:600;font-size:13px;color:var(--accent);white-space:nowrap}
.wz-discord{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:4px;text-decoration:underline;text-underline-offset:3px}
.wz-discord:hover{color:var(--text)}
/* Open sign-up (Cup #1, 25 Oct 2026): public player list and the organizer's team builder */
.solo-list{display:flex;flex-wrap:wrap;gap:8px}
.solo-p{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:4px 10px 4px 6px;font-size:12.5px}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.sb-team{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:10px 12px}
.sb-name{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);font-family:var(--f-head);font-weight:600;font-size:13.5px;padding:4px 0;margin-right:8px}
.sb-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.sb-row select{background:var(--surface-3);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:12px;padding:3px 4px}
.sb-row .linkbtn{font-size:11.5px;text-decoration:underline;text-underline-offset:2px}