/* bliss website - the client's palette (navy + cyan accent), Inter,
   one surface system for every page. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
}

:root {
  --navy: #0b1424;
  --navy-2: #101c33;
  --navy-3: #16264a;
  --surface: rgba(16, 28, 51, .78);
  --surface-2: rgba(22, 38, 74, .55);
  --line: rgba(120, 160, 230, .14);
  --line-2: rgba(120, 160, 230, .26);
  --ink: #eef3ff;
  --ink-dim: #93a4c7;
  --ink-faint: #5e6f92;
  --accent: #5cc8ff;
  --accent-2: #2d9ee8;
  --accent-ink: #06121f;
  --accent-glow: rgba(92, 200, 255, .22);
  --gold: #ffd75c;
  --silver: #d9e6ff;
  --bronze: #e0a06a;
  --green: #5fe38f;
  --red: #ff5f66;
  --orange: #ffa64d;
  --pink: #ff66ab;
  --purple: #b98cff;
  --m0: #ff66ab; --m1: #ffa64d; --m2: #5fe38f; --m3: #b98cff; --m4: #4fd8ff;
  --r: 16px; --r-sm: 10px; --r-xs: 7px;
  --wrap: 1440px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  --shadow: 0 14px 40px rgba(2, 8, 20, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  background:
    radial-gradient(900px 480px at 85% -8%, rgba(92, 200, 255, .13), transparent 62%),
    radial-gradient(760px 420px at 0% 12%, rgba(45, 158, 232, .10), transparent 58%),
    linear-gradient(180deg, #0c1629 0%, var(--navy) 60%, #091120 100%);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
b { font-weight: 700; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 32px; line-height: 1.15; }
h2 { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-dim); margin: 0 0 14px; }
h2::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
h2 .more { margin-left: auto; font-size: 11px; letter-spacing: .1em; color: var(--accent); }
h2 .more:hover { color: var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 24px 64px; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.center { text-align: center; }
.hidden { display: none !important; }
small { font-size: .55em; color: var(--ink-dim); margin-left: 2px; font-weight: 600; }
img { max-width: 100%; }

/* ---- top bar ------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 20, 36, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 22px; max-width: var(--wrap); margin: 0 auto; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 18px; box-shadow: 0 0 18px var(--accent-glow); }
.brand-mark.lg { width: 52px; height: 52px; font-size: 28px; }
.brand-name { font-weight: 800; font-size: 21px; letter-spacing: -.01em; }
.brand-dot { color: var(--accent); }
.links { display: flex; gap: 4px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }
.links a { padding: 7px 11px; border-radius: 999px; white-space: nowrap; transition: background .15s, color .15s; }
.links a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.links a.active { color: var(--ink); background: rgba(92, 200, 255, .12); box-shadow: inset 0 0 0 1px rgba(92, 200, 255, .25); }
.links .dl { color: var(--accent); }
.search { position: relative; display: flex; align-items: center; color: var(--ink-faint); }
.search svg { position: absolute; left: 12px; pointer-events: none; }
.search input { background: rgba(8, 15, 28, .7); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); padding: 8px 14px 8px 34px; width: 200px; outline: none; font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s, width .2s; }
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-glow); width: 240px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.nav-right > * { flex: none; }
.nav-right form { display: inline; }
.nav-user { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(8, 15, 28, .7); border: 1px solid var(--line); font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-user span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.nav-user:hover { border-color: var(--line-2); }
.nav-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lang { color: var(--ink-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; padding: 6px 8px; }
.lang:hover { color: var(--ink); }

/* ---- buttons ------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(22, 38, 74, .6); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; white-space: nowrap; }
.btn:hover { border-color: var(--accent-2); background: rgba(92, 200, 255, .1); }
.btn:active { transform: translateY(1px); }
.btn.accent { background: linear-gradient(180deg, #74d2ff, var(--accent)); color: var(--accent-ink); border-color: transparent; font-weight: 800; box-shadow: 0 6px 22px var(--accent-glow); }
.btn.accent:hover { background: linear-gradient(180deg, #8adcff, #6bceff); }
.btn.ghost { background: transparent; }
.btn.big { padding: 12px 24px; font-size: 14px; }
.btn.small { padding: 5px 12px; font-size: 11.5px; }
.btn svg { width: 16px; height: 16px; }
.btn.on { border-color: var(--accent); color: var(--accent); }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- surfaces ------------------------------------------------------ */
.panel {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-top: 18px;
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.panel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); pointer-events: none; }
.panel.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.panel.auth { max-width: 440px; margin: 40px auto; padding: 28px 30px 24px; }
.auth-head { text-align: center; margin-bottom: 14px; }
.auth-head .brand-mark { margin: 0 auto 12px; }
.auth-head h1 { font-size: 24px; }
.cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.col { min-width: 0; }
.col .panel:first-child { margin-top: 18px; }
.pagehead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 0 4px; }
.pagehead h1 { margin-right: auto; }
.pagehead .tabs { margin: 0; }
.pagehead p { width: 100%; margin: 0; }

/* ---- hero + stats -------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 30px; padding: 40px 0 18px; }
.hero h1 { font-size: 64px; letter-spacing: -.035em; line-height: 1; }
.hero p { color: var(--ink-dim); max-width: 520px; margin: 14px 0 22px; font-size: 16px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; min-width: 0; }
.stat .n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); margin-top: 6px; }
.stat .s { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.stat.hi .n { color: var(--accent); }
.stat.live .n { color: var(--green); }
/* The live dot's glow must not be clipped by the number's overflow. */
.stat.live .n { overflow: visible; padding-left: 4px; }
.stat.live .n::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); margin: 0 8px 4px 0; }
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- lists --------------------------------------------------------- */
.toplist { display: flex; flex-direction: column; gap: 6px; }
.toprow { display: grid; grid-template-columns: 38px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); background: rgba(8, 15, 28, .45); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.toprow:hover { border-color: var(--line-2); background: rgba(92, 200, 255, .07); }
.toprow .rank { color: var(--ink-dim); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.toprow img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--navy-3); }
.toprow .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toprow .pp { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.toprow.r1 .rank { color: var(--gold); } .toprow.r2 .rank { color: var(--silver); } .toprow.r3 .rank { color: var(--bronze); }
.results .toprow { grid-template-columns: 32px minmax(0, 1fr) auto; }
.maplist { display: flex; flex-direction: column; gap: 6px; }
.maprow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px 6px 6px; border-radius: var(--r-sm); background: rgba(8, 15, 28, .45); border: 1px solid transparent; transition: border-color .15s, background .15s; }
a.maprow:hover { border-color: var(--line-2); background: rgba(92, 200, 255, .07); }
.maprow .thumb { display: block; width: 56px; height: 42px; border-radius: 6px; background: var(--navy-3); overflow: hidden; }
.maprow .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maprow .txt { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.maprow .mt, .maprow .mv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maprow .sub { color: var(--ink-faint); font-size: 12px; }
.mt { font-weight: 600; }
.mv { color: var(--accent); font-weight: 600; }
.mc { color: var(--ink-faint); font-size: 12px; }
.mc::before { content: ' · '; }

/* ---- tabs ---------------------------------------------------------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 12px 0 0; background: rgba(8, 15, 28, .6); border: 1px solid var(--line); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs + .tablewrap, .tabs + .dim { margin-top: 14px; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; color: var(--ink-dim); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; transition: background .15s, color .15s; }
.tab:hover { color: var(--ink); }
.tab.active { background: rgba(92, 200, 255, .14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(92, 200, 255, .3); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.m0 .dot, .dot.m0 { background: var(--m0); } .m1 .dot, .dot.m1 { background: var(--m1); } .m2 .dot, .dot.m2 { background: var(--m2); } .m3 .dot, .dot.m3 { background: var(--m3); } .m4 .dot, .dot.m4 { background: var(--m4); }
.modelabel { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }

/* ---- tables -------------------------------------------------------- */
.tablewrap { overflow-x: auto; margin: 0 -6px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); padding: 4px 8px 10px; white-space: nowrap; }
td { padding: 9px 8px; border-top: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: rgba(92, 200, 255, .045); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.pp { color: var(--accent); font-weight: 700; }
td.date { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
td.date a:hover { color: var(--ink); }
td.map { min-width: 220px; }
td.map .mt, td.map .mv { display: inline; }
td.map a.maplink:hover .mt { color: var(--accent); }
td.mods { white-space: nowrap; }
td.gc, th.gc { width: 44px; text-align: center; padding-left: 4px; padding-right: 4px; }
/* The player cell keeps its room; a long name ends in an ellipsis instead of running under the grade. */
td.pc { min-width: 180px; }
td.pc .player { max-width: 100%; }
td.pc .player > :last-child { overflow: hidden; text-overflow: ellipsis; }
td.rp, th.rp { width: 34px; text-align: center; }
td.rank, th.rank { width: 56px; color: var(--ink-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
tr.r1 td.rank { color: var(--gold); } tr.r2 td.rank { color: var(--silver); } tr.r3 td.rank { color: var(--bronze); }
tr.me td { background: rgba(92, 200, 255, .09); }
tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.fail td { opacity: .58; }
.player { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.player img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--navy-3); flex: none; }
.player:hover { color: var(--accent); }
.ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-dim); border: 1px solid transparent; }
.ico:hover { color: var(--accent); border-color: var(--line-2); background: rgba(92, 200, 255, .08); }

/* grades */
.grade { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 7px; font-weight: 900; font-size: 13px; letter-spacing: .02em; background: rgba(8, 15, 28, .7); border: 1px solid var(--line); }
.grade.big { min-width: 120px; height: 120px; font-size: 64px; border-radius: 22px; }
.g-XH, .g-SH { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .35); }
.g-X, .g-S { color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 92, .45); }
.g-A { color: var(--green); } .g-B { color: var(--accent); } .g-C { color: var(--purple); } .g-D { color: var(--orange); } .g-F { color: var(--red); }
/* bliss!volt's grades between S and A. */
.g-AAAp, .g-AAA { color: var(--gold); } .g-AAp, .g-AA { color: #c8e6ff; } .g-Ap { color: var(--green); }
.grade.long { padding: 0 5px; letter-spacing: -.02em; } .grade.big.long { font-size: 40px; }
.stars.sv { background: var(--m4); }
.grades { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gcount { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(8, 15, 28, .55); border: 1px solid var(--line); }
.gcount .n { font-weight: 700; font-variant-numeric: tabular-nums; }

/* mods */
.mod { display: inline-block; padding: 2px 6px; margin-right: 3px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: rgba(92, 200, 255, .12); color: var(--accent); border: 1px solid rgba(92, 200, 255, .2); }
.mod-HD, .mod-FL { background: rgba(255, 215, 92, .12); color: var(--gold); border-color: rgba(255, 215, 92, .25); }
.mod-HR, .mod-SD, .mod-PF { background: rgba(255, 95, 102, .12); color: var(--red); border-color: rgba(255, 95, 102, .25); }
.mod-DT, .mod-NC { background: rgba(185, 140, 255, .14); color: var(--purple); border-color: rgba(185, 140, 255, .28); }
.mod-EZ, .mod-NF, .mod-HT, .mod-SO { background: rgba(95, 227, 143, .12); color: var(--green); border-color: rgba(95, 227, 143, .25); }
.mod-RX, .mod-AP { background: rgba(147, 164, 199, .14); color: var(--ink-dim); border-color: rgba(147, 164, 199, .25); }
.modrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modrow .mod { font-size: 13px; padding: 4px 9px; }

/* status + stars */
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; background: rgba(147, 164, 199, .15); color: var(--ink-dim); }
.st-ranked, .st-approved { background: rgba(95, 227, 143, .16); color: var(--green); }
.st-qualified { background: rgba(255, 215, 92, .16); color: var(--gold); }
.st-loved { background: rgba(255, 102, 171, .16); color: var(--pink); }
.st-pending { background: rgba(255, 166, 77, .16); color: var(--orange); }
.st-wip, .st-graveyard { background: rgba(147, 164, 199, .15); color: var(--ink-dim); }
.st-fail { background: rgba(255, 95, 102, .16); color: var(--red); }
.stars { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--star, var(--accent)); color: #06121f; font-variant-numeric: tabular-nums; }
.stars.dark { color: #fff; }
.badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

/* ---- profile ------------------------------------------------------- */
.profile { position: relative; margin-top: 4px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.profile .banner { height: 150px; background-size: cover; background-position: center 30%; filter: blur(28px) saturate(1.4) brightness(.55); transform: scale(1.25); opacity: .85; }
.profile::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; background: linear-gradient(180deg, rgba(11, 20, 36, .1), rgba(16, 28, 51, .95)); pointer-events: none; }
.profile-head { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 22px; padding: 0 24px 6px; margin-top: -64px; flex-wrap: wrap; }
.avatar-big { width: 128px; height: 128px; border-radius: 26px; object-fit: cover; border: 3px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 30px var(--accent-glow); background: var(--navy-3); }
.who { flex: 1 1 240px; padding-bottom: 6px; }
.who h1 { font-size: 34px; }
.level { margin-top: 10px; font-size: 13px; color: var(--ink-dim); max-width: 360px; }
.level .bar { height: 7px; border-radius: 4px; background: rgba(8, 15, 28, .8); margin-top: 6px; overflow: hidden; border: 1px solid var(--line); }
.level .fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); }
.profile-head .grades { padding-bottom: 10px; }
.profile-stats { position: relative; z-index: 1; padding: 12px 24px 22px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.profile-stats .stat .n { font-size: 22px; letter-spacing: -.03em; }
.profile-stats .stat .n.long { font-size: 17px; }

/* ---- beatmap set --------------------------------------------------- */
.cover { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--navy-3) center / cover no-repeat; min-height: 280px; display: flex; align-items: flex-end; box-shadow: var(--shadow); margin-top: 4px; }
.cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 36, .15) 0%, rgba(11, 20, 36, .55) 45%, rgba(11, 20, 36, .95) 100%); }
.cover.small { min-height: 210px; }
.cover-in { position: relative; z-index: 1; padding: 26px 28px 24px; width: 100%; }
.cover h1 { font-size: 36px; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.cover .artist { font-size: 18px; color: var(--ink); opacity: .9; margin-top: 4px; }
.cover .mapper { color: var(--ink-dim); margin-top: 6px; }
.cover .mapper b { color: var(--ink); }
.cover .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.setgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.setgrid aside { min-width: 0; }
.difflist { display: flex; flex-direction: column; gap: 5px; }
.diff { display: grid; grid-template-columns: 8px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: rgba(8, 15, 28, .45); transition: border-color .15s, background .15s; }
.diff:hover { border-color: var(--line-2); }
.diff.active { background: rgba(92, 200, 255, .1); border-color: rgba(92, 200, 255, .35); }
.diff .dn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff .dp { grid-column: 2 / -1; font-size: 11.5px; color: var(--ink-faint); }
/* The label column as wide as the panel's longest label ("Beschreibung"), the values aligned under each other. */
.panel.meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
.panel.meta .kv { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--line); }
.panel.meta .kv:first-child { border-top: 0; }
.panel.meta .k { color: var(--ink-faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; font-weight: 700; padding-top: 2px; }
.panel.meta .v { color: var(--ink-dim); overflow-wrap: anywhere; }
.attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.attr { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-xs); background: rgba(8, 15, 28, .5); border: 1px solid var(--line); }
.attr .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 700; }
.attr .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- score page ---------------------------------------------------- */
.scoremap { font-size: 22px; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.scoremap .mv { font-size: 18px; }
.scoremap .mc { font-size: 14px; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.scoregrid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.scoregrid .panel { margin-top: 18px; }
.gradebox { display: grid; place-items: center; }
.scoregrid > .hitspanel { grid-column: 1 / -1; margin-top: 0; }
.scoregrid .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modline { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.modline .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-right: 4px; }
.modline .replaybox { margin-top: 0; }
.hits { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.hit { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-xs); background: rgba(8, 15, 28, .5); border: 1px solid var(--line); }
.hit .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.hit .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.h-300 .l, .h-great .l, .h-fruits .l { color: var(--accent); }
.h-max .l { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .6); }
.h-100 .l, .h-good .l, .h-drops .l, .h-200 .l { color: var(--green); }
.h-50 .l, .h-droplets .l { color: var(--gold); }
.h-miss .l { color: var(--red); }
.replaybox { margin-top: 16px; }

/* ---- forms --------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 4px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.form input[type=text], .form input[type=password], .form input[type=email], .form input[type=number] { background: rgba(8, 15, 28, .7); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); padding: 11px 13px; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.form input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-glow); }
.form label.file { border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 12px; color: var(--ink-dim); }
.form input[type=file] { color: var(--ink-dim); font: inherit; font-size: 13px; }
.form input[type=file]::file-selector-button { background: rgba(22, 38, 74, .8); color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; margin-right: 12px; font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.form .btn { align-self: flex-start; }
.form .btn.big { align-self: stretch; justify-content: center; }
.msg { min-height: 1.2em; margin: 6px 0; font-weight: 600; }
.msg.bad { color: var(--red); }
.msg.ok { color: var(--green); }
.avatar-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.avatar-row .form { flex: 1 1 240px; margin-top: 0; }
.settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.settings > div > .panel:first-child { margin-top: 18px; }

/* ---- flags, country, bio ------------------------------------------- */
.flag, .toprow img.flag, .player img.flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; vertical-align: -2px; margin-right: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); background: transparent; }
.toprow .name .flag, .player .flag { margin-right: 6px; }
.country { display: inline-flex; align-items: center; color: var(--ink); }
.meta-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat .l .flag { width: 16px; height: 11px; margin-right: 5px; vertical-align: -1px; }
a.stat:hover { border-color: var(--line-2); }
.bio { white-space: normal; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.bio a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lbfilter { display: flex; align-items: center; gap: 8px; }
.lbfilter .flag { margin-right: 0; }
select, textarea { background: rgba(8, 15, 28, .7); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); padding: 9px 12px; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-glow); }
select { padding-right: 32px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
select option { background: var(--navy-2); color: var(--ink); }
textarea { width: 100%; resize: vertical; min-height: 120px; line-height: 1.5; }
.form select { align-self: flex-start; min-width: 260px; }

/* ---- friends ------------------------------------------------------- */
.toggle.on { border-color: var(--accent); color: var(--accent); background: rgba(92, 200, 255, .1); }
.tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(95, 227, 143, .14); color: var(--green); vertical-align: 1px; }
h2 .toggle { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.profile-head form { display: inline; }
.grades form + .tag, .grades .btn + .tag { margin-left: 0; }
.meta-line .tag { margin-left: 0; }

/* ---- matches ------------------------------------------------------- */
.matchlist { display: flex; flex-direction: column; gap: 6px; }
.matchrow { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(8, 15, 28, .45); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.matchrow:hover { border-color: var(--line-2); background: rgba(92, 200, 255, .07); }
.matchrow .when { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.matchrow .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.matchrow .room { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.matchrow .room:hover, .matchrow .when:hover { color: var(--accent); }
.matchrow .mt, .matchrow .mv { display: inline; }
.matchrow .sub { color: var(--ink-faint); font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.matchrow .faces { display: flex; align-items: center; }
.matchrow .faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #101c33; margin-left: -8px; background: var(--navy-3); }
.matchrow .faces img:first-child { margin-left: 0; }
/* Rooms: the same rows, with the channel id and the play count. */
.matchrow.roomrow { grid-template-columns: 118px minmax(0, 1fr) auto auto; color: inherit; }
.matchrow.roomrow:hover .room { color: var(--accent); }
.matchrow .rid { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 700; margin-right: 10px; opacity: .85; }
.matchrow .plays { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }
.matchrow .plays b { color: var(--ink); font-size: 15px; margin-right: 4px; }
.place.live { background: rgba(70, 220, 130, .16); color: var(--green); }
.place.down { background: rgba(255, 92, 92, .16); color: #ff5c5c; }
.qrbox { display: inline-block; padding: 10px; background: #fff; border-radius: 10px; margin: 8px 0; }
.qrbox img { display: block; }
.codelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.codelist code { display: block; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 14px; letter-spacing: .08em; }
.rankgraph .gpp { stroke: #ffd166; }
.rankgraph .gfill { fill: rgba(255, 209, 102, .12); }
.rankgraph .gpp-l { fill: #ffd166; }
/* Profile: hit split bar and the pp graph. */
.hitbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.hitbar i { display: block; height: 100%; }
.hitbar .h300, .hitlegend .h300 { background: #5cc8ff; color: #5cc8ff; }
.hitbar .h100, .hitlegend .h100 { background: #46dc82; color: #46dc82; }
.hitbar .h50, .hitlegend .h50 { background: #ffd166; color: #ffd166; }
.hitbar .hmiss, .hitlegend .hmiss { background: #ff5c5c; color: #ff5c5c; }
.hitlegend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
.hitlegend b { background: none; font-weight: 800; margin-right: 6px; }
.ppgraph { display: block; width: 100%; height: 220px; }
.ppgraph .gfill { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.ppgraph .gpp { fill: none; stroke: var(--accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.ppgraph .gacc { fill: none; stroke: #46dc82; stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .8; vector-effect: non-scaling-stroke; }
.ppgraph .gl { fill: var(--ink-dim); font-size: 11px; font-family: inherit; }
.ppgraph .gpp-l { fill: var(--accent); font-weight: 700; }
.ppgraph .gacc-l { fill: #46dc82; }
.actgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.actgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.barchart.grades .gss { fill: #ffd166; }
.barchart.grades .gs { fill: #5cc8ff; }
.barchart.grades .ga { fill: #46dc82; }
.hitlegend .gss { color: #ffd166; } .hitlegend .gs { color: #5cc8ff; } .hitlegend .ga { color: #46dc82; }
.radar { display: block; width: 440px; max-width: 100%; margin: 0 auto; }
.skill-legend { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; max-width: 36rem; margin: .75rem auto 0; font-size: .82rem; }
.skill-legend dt { color: var(--ink); font-weight: 600; }
.skill-legend dd { margin: 0; color: var(--ink-dim); }
.radar .ring { fill: none; stroke: rgba(255, 255, 255, .08); }
.radar .axis { stroke: rgba(255, 255, 255, .12); }
.radar .area { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 2; }
.radar .gl { fill: var(--ink-dim); font-size: 11px; }
.actgrid h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 6px; }
.barchart { display: block; width: 100%; height: 150px; }
.barchart rect { fill: var(--accent); opacity: .85; }
.barchart .gl { fill: var(--ink-dim); font-size: 11px; }
.mostlist, .favmods { display: grid; gap: 6px; }
.mostrow, .favrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.mostrow .mn, .favrow .n { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }
.mostrow .mn b, .favrow .n { color: var(--ink); }
.mostrow .mp { color: var(--accent); font-weight: 700; }
.favrow { grid-template-columns: 150px minmax(0, 1fr) auto; }
.favrow .bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.favrow .bar i { display: block; height: 100%; background: var(--accent); }
.roomsum table { width: 100%; }
@media (max-width: 900px) { .actgrid { grid-template-columns: 1fr; } }
/* Name badges: prefix / suffix tags and the role colour (--rc). */
.nm { color: var(--rc, inherit); }
.tag.pre, .tag.suf { display: inline-block; font-size: .72em; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--rc, var(--accent)) 18%, transparent); color: var(--rc, var(--accent)); vertical-align: 1px; }
.tag.pre { margin-right: 6px; }
.tag.suf { margin-left: 6px; }
.rolelist { display: grid; gap: 8px; }
.rolerow { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .03); color: inherit; text-decoration: none; }
.rolerow:hover { background: rgba(255, 255, 255, .06); }
.rolerow .rname { font-weight: 700; }
.roleedit .colorpick { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .15); cursor: pointer; }
.swatch:hover { border-color: #fff; }
.roleedit input[type=color] { width: 44px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; }
/* Checkbox rows: the box sits left of its text on one line (the
   form's labels stack vertically, which put the box on its own row). */
.form label.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 6px 0; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.form label.check input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.permlist { display: grid; gap: 2px; }
.permlist .check { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; padding: 8px 10px; border-radius: 8px; }
.permlist .check:hover { background: rgba(255, 255, 255, .04); }
.permlist .check input[type=checkbox] { grid-row: 1 / span 2; align-self: center; }
.permlist .check code { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--accent); }
.permlist .check .dim { grid-column: 2; font-weight: 500; font-size: 12.5px; }
.form.roles .check { padding: 6px 0; }
.form.roles .check .tag.pre, .form.roles .check .tag.suf { font-size: .7em; }
.preview { margin: 8px 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
/* Room page: one panel per play, oldest first. */
.roomhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.roomhead .rid { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.panel.play { margin-top: 14px; }
.playhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin-bottom: 10px; }
.playhead .playno { display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 10px; border-radius: 9px; background: rgba(92, 200, 255, .12); color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.playhead .playmap { min-width: 0; }
.playhead .playmap .mt, .playhead .playmap .mv { display: inline; }
.panel.play .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.panel.play .teams { margin-bottom: 8px; }
.matchrow .who { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.place { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(147, 164, 199, .15); color: var(--ink-dim); }
.place.p1 { background: rgba(255, 215, 92, .18); color: var(--gold); }
.place.p2 { background: rgba(217, 230, 255, .16); color: var(--silver); }
.place.p3 { background: rgba(224, 160, 106, .18); color: var(--bronze); }
.place.win { background: rgba(95, 227, 143, .16); color: var(--green); }
.place.loss { background: rgba(255, 95, 102, .14); color: var(--red); }
.place.draw { background: rgba(147, 164, 199, .18); color: var(--ink); }
.place.team0 { box-shadow: inset 0 0 0 1px rgba(255, 95, 102, .5); }
.place.team1 { box-shadow: inset 0 0 0 1px rgba(92, 200, 255, .5); }
.teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.teambox { padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.teambox.team0 { box-shadow: inset 4px 0 0 var(--red); }
.teambox.team1 { box-shadow: inset 4px 0 0 var(--accent); }
.teambox.winner { border-color: rgba(95, 227, 143, .4); }
.teambox.tag { box-shadow: inset 4px 0 0 var(--accent); grid-column: 1 / -1; }
table.taglb td.pc { white-space: normal; }
table.taglb .player { margin-right: 2px; }
.teambox .tn { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.teambox .tv { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.teambox .ts { color: var(--ink-dim); font-size: 12.5px; }
tr.team0 td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.team1 td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.me.team0 td:first-child, tr.me.team1 td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.matchpage h1 { font-size: 30px; }
@media (max-width: 760px) {
  .matchrow { grid-template-columns: minmax(0, 1fr) auto; }
  .matchrow .when { grid-column: 1 / -1; }
  .matchrow .faces { display: none; }
  .teams { grid-template-columns: 1fr; }
}

/* ---- admin --------------------------------------------------------- */
.links .admin { color: var(--gold); }
.btn.danger { border-color: rgba(255, 95, 102, .45); color: var(--red); background: rgba(255, 95, 102, .08); }
.btn.danger:hover { background: rgba(255, 95, 102, .18); border-color: var(--red); }
form.inline { display: inline; margin-left: 10px; }
.btnrow form { display: inline; }
.announce { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 12px 16px; border-radius: var(--r-sm); background: rgba(255, 215, 92, .08); border: 1px solid rgba(255, 215, 92, .3); }
.announce .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.announce .txt { flex: 1 1 300px; }
.announce a { color: var(--accent); text-decoration: underline; }
table.log td { font-size: 13px; }
.form input[type=text], .form input[type=email] { min-width: 0; }
.pagehead .lbfilter input { width: 220px; }
.pagehead h1 .mono { font-size: 16px; }
.settings h3 { margin: 14px 0 6px; font-size: 13px; }
.scores + h3 { margin-top: 18px; }
.msg code { background: rgba(8, 15, 28, .8); padding: 2px 8px; border-radius: 6px; font-family: var(--mono); font-size: 14px; color: var(--ink); letter-spacing: .05em; }

/* ---- footer -------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); margin-top: 20px; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.foot-links { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--ink); }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1500px) {
  .nav-right .lang { display: none; }
}
@media (max-width: 1240px) {
  .nav { gap: 14px; }
  .links { font-size: 12px; }
  .links a { padding: 7px 9px; }
  .search input { width: 160px; }
  .search input:focus { width: 200px; }
  .nav-right .lang { display: none; }
}
@media (max-width: 1000px) {
  /* minmax(0, ...): a wide table scrolls in its own box instead of widening the page. */
  .cols, .setgrid { grid-template-columns: minmax(0, 1fr); }
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wrap { padding: 14px 14px 48px; }
  .nav { gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
  .links { order: 3; width: 100%; justify-content: flex-start; gap: 2px; font-size: 11.5px; flex-wrap: wrap; }
  .search { order: 4; width: 100%; }
  .search input, .search input:focus { width: 100%; }
  .hero { grid-template-columns: 1fr; padding: 22px 0 8px; }
  .hero h1 { font-size: 48px; }
  .hero-stats { grid-template-columns: 1fr; }
  .profile-head { margin-top: -50px; gap: 14px; }
  .avatar-big { width: 96px; height: 96px; border-radius: 20px; }
  .who h1 { font-size: 26px; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 14px 16px; }
  .profile-head { padding: 0 14px 6px; }
  .cover h1 { font-size: 26px; }
  .cover-in { padding: 18px; }
  .scoregrid { grid-template-columns: 1fr; }
  .scoregrid > .hitspanel { margin-top: 18px; }
  .scoregrid .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade.big { min-width: 90px; height: 90px; font-size: 48px; }
  .panel { padding: 16px 14px; }
  .tablewrap { margin: 0 -14px; padding: 0 14px; }
}

/* Profile preferences: banner, socials, settings extras */
.profile.has-banner .banner { filter: none; transform: none; opacity: 1; height: 230px; background-position: center; }
.profile.has-banner::after { height: 230px; background: linear-gradient(180deg, rgba(11, 20, 36, 0) 0%, rgba(11, 20, 36, .12) 40%, rgba(16, 28, 51, .82) 72%, rgba(16, 28, 51, .98) 100%); }
.profile.has-banner .profile-head { margin-top: -58px; }
.profile.has-banner .who h1, .profile.has-banner .meta-line, .profile.has-banner .socials { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .5); }
.socials { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.social { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 13px; text-decoration: none; }
a.social:hover { color: var(--accent); }
.soc { display: inline-block; width: 14px; height: 14px; background: currentColor; opacity: .85; -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex: none; }
.soc-discord { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 5.3A17 17 0 0 0 15.3 4l-.5 1a16 16 0 0 0-5.6 0l-.5-1a17 17 0 0 0-4.2 1.3C1.8 9.3 1.1 13.2 1.4 17a17 17 0 0 0 5.2 2.6l1-1.6a11 11 0 0 1-1.7-.8l.4-.3a12 12 0 0 0 11.4 0l.4.3-1.7.8 1 1.6a17 17 0 0 0 5.2-2.6c.4-4.4-.7-8.2-3.1-11.7zM8.7 14.7c-1 0-1.9-1-1.9-2.1s.8-2.1 1.9-2.1 1.9 1 1.9 2.1-.8 2.1-1.9 2.1zm6.6 0c-1 0-1.9-1-1.9-2.1s.8-2.1 1.9-2.1 1.9 1 1.9 2.1-.8 2.1-1.9 2.1z'/%3E%3C/svg%3E"); }
.soc-twitch { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 2.5 5.5V19H7v3h3l3-3h4l5-5V2H4zm16 11-3 3h-5l-3 3v-3H6V4h14v9zM16 7h-2v5h2V7zm-5 0H9v5h2V7z'/%3E%3C/svg%3E"); }
.soc-x { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3.3l-7.2 8.2L22 21h-6.6l-5.2-6.8L4.3 21H1l7.7-8.8L.6 3h6.8l4.7 6.2L17.5 3zm-1.2 16h1.8L6.4 4.9H4.5L16.3 19z'/%3E%3C/svg%3E"); }
.soc-instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-3.3-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 3.9 4 2.4 7.2 2.3c1.2-.1 1.6-.1 4.8-.1zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4zm5.2-9.6a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E"); }
.soc-youtube { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.2c-.3-1-1-1.8-2-2.1C19.2 4.6 12 4.6 12 4.6s-7.2 0-9 .5c-1 .3-1.7 1.1-2 2.1C.5 9 .5 12 .5 12s0 3 .5 4.8c.3 1 1 1.8 2 2.1 1.8.5 9 .5 9 .5s7.2 0 9-.5c1-.3 1.7-1.1 2-2.1.5-1.8.5-4.8.5-4.8s0-3-.5-4.8zM9.7 15.4V8.6l6 3.4-6 3.4z'/%3E%3C/svg%3E"); }
.soc-tiktok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.8A4.3 4.3 0 0 1 15.5 3h-3.2v12.9a2.7 2.7 0 1 1-1.9-2.6V10a6 6 0 1 0 5.1 5.9V9.4a7.4 7.4 0 0 0 4.4 1.4V7.6a4.3 4.3 0 0 1-3.3-1.8z'/%3E%3C/svg%3E"); }
.soc-github { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.3 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .5z'/%3E%3C/svg%3E"); }
.soc-osu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm0 17a6 6 0 1 1 0-12 6 6 0 0 1 0 12z'/%3E%3C/svg%3E"); }
.soc-website { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 9h-3a15 15 0 0 0-1.3-5.7A8 8 0 0 1 18.9 11zM12 4c.9 1.1 1.8 3.4 2 7h-4c.2-3.6 1.1-5.9 2-7zM5.1 13h3a15 15 0 0 0 1.3 5.7A8 8 0 0 1 5.1 13zm3-2h-3a8 8 0 0 1 4.3-5.7A15 15 0 0 0 8.1 11zM12 20c-.9-1.1-1.8-3.4-2-7h4c-.2 3.6-1.1 5.9-2 7zm2.6-1.3a15 15 0 0 0 1.3-5.7h3a8 8 0 0 1-4.3 5.7z'/%3E%3C/svg%3E"); }
.banner-preview { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.form label.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.form label.check input { width: auto; }
.accentrow { display: flex; align-items: center; gap: 12px; }
.accentrow input[type="color"] { width: 48px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
table.sessions { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
table.sessions th { text-align: left; color: var(--ink-dim); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.sessions td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.sessions tr.current td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
table.sessions .tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #0b0f18; font-size: 11px; font-weight: 700; }
table.sessions form { margin: 0; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.panel.narrow { max-width: 520px; margin: 40px auto; text-align: center; }

/* Settings layout, switches, mode tiles, mode icons */
.setgrid.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.setcol { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) { .setgrid.settings { grid-template-columns: 1fr; } }
.form .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.form .switches { display: flex; flex-direction: column; gap: 10px; }
.form label.check { flex-direction: row; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); cursor: pointer; }
.form label.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.form label.check .sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.form label.check .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-dim); transition: transform .15s, background .15s; }
.form label.check input:checked + .sw { background: color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.form label.check input:checked + .sw::after { transform: translateX(16px); background: var(--accent); }
.form label.check input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.modetiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.modetile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(8, 15, 28, .5); color: var(--ink-dim); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.modetile input { position: absolute; opacity: 0; width: 0; height: 0; }
.modetile .mi { width: 26px; height: 26px; opacity: .55; }
.modetile:hover { color: var(--ink); }
.modetile:has(input:checked) { color: var(--ink); background: rgba(92, 200, 255, .1); border-color: rgba(92, 200, 255, .5); }
.modetile:has(input:checked) .mi { opacity: 1; }
.mi { display: inline-block; width: 16px; height: 16px; flex: none; background: var(--ink-faint); -webkit-mask-image: var(--micon); mask-image: var(--micon); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.mi.m0 { --micon: url("/static/mode-osu.png"); background: var(--m0); }
.mi.m1 { --micon: url("/static/mode-taiko.png"); background: var(--m1); }
.mi.m2 { --micon: url("/static/mode-catch.png"); background: var(--m2); }
.mi.m3 { --micon: url("/static/mode-mania.png"); background: var(--m3); }
/* bliss!volt: a knob (a ring with its pointer). */
.mi.m4 { --micon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cline x1='12' y1='12' x2='16.6' y2='7.4' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E"); background: var(--m4); }
.tab .mi { opacity: .6; }
.tab.active .mi { opacity: 1; }
.socialgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.soclbl { display: inline-flex; align-items: center; gap: 6px; }

/* Permission catalogue in the role editor */
.permgroup { margin-bottom: 18px; }
.permgroup h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.form label.check.perm { align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; }
.form label.check.perm:hover { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.form label.check.perm .sw { margin-top: 2px; }
.permtext { display: flex; flex-direction: column; gap: 2px; }
.permtext code { font-size: 12.5px; color: var(--ink); }
.permtext .dim { font-size: 12.5px; font-weight: 400; line-height: 1.35; }
.hidden { display: none !important; }

/* bliss uploads: the ranking panel, the uploads list */
.blissp .bstate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; font-weight: 600; }
.blissp .kv { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.blissp .kv .k { color: var(--ink-dim); min-width: 140px; }
.nomdots { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
.nomdots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-2); }
.nomdots i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 215, 92, .4); }
.bactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bactions form { display: flex; gap: 6px; align-items: center; }
.breason input { background: rgba(8, 15, 28, .7); border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); padding: 5px 12px; font: inherit; font-size: 13px; width: 200px; outline: none; }
.breason input:focus { border-color: var(--accent-2); }
.bhist { margin-top: 14px; font-size: 13.5px; }
.bhist summary { cursor: pointer; color: var(--ink-dim); font-weight: 600; }
.bhist ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bhist .reason { color: var(--ink-dim); font-style: italic; }
.bissues { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; }
.bissues li.error { color: var(--red); }
.bissues li.warning { color: var(--orange); }
.mapsbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.mapsearch input { background: rgba(8, 15, 28, .7); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); padding: 8px 14px; font: inherit; font-size: 14px; width: 240px; outline: none; margin-top: 12px; }
.mapsearch input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-glow); }
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.bcard { display: flex; flex-direction: column; border-radius: var(--r-sm); overflow: hidden; background: rgba(8, 15, 28, .45); border: 1px solid var(--line); transition: border-color .15s, transform .1s; }
.bcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.bcover { position: relative; height: 96px; background: var(--navy-3) center / cover no-repeat; }
.bcover .status { position: absolute; top: 8px; left: 8px; backdrop-filter: blur(6px); }
.btxt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; font-size: 13.5px; }
.btxt .bt { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btxt .ba, .btxt .bm { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btxt .bf { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.btxt .bf .dim { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager { margin-top: 16px; justify-content: center; }
@media (max-width: 640px) {
  .blissp .kv { flex-direction: column; gap: 2px; }
  .blissp .kv .k { min-width: 0; }
  .mapsearch, .mapsearch input { width: 100%; }
  .breason input { width: 140px; }
}

/* ---- bliss!volt effect radar (beatmap set) */
.radarbox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.radarbox h3 { margin: 0 0 6px; font-size: .95rem; color: var(--ink-dim); font-weight: 600; }
svg.radar { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
svg.radar .ring { fill: none; stroke: var(--line); stroke-width: 1; }
svg.radar .axis { stroke: var(--line); stroke-width: 1; }
svg.radar .shape { fill: color-mix(in srgb, var(--m4) 35%, transparent); stroke: var(--m4); stroke-width: 2; stroke-linejoin: round; }
svg.radar .lab { fill: var(--ink-dim); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
svg.radar .val { fill: var(--ink); font-size: 13px; font-weight: 700; }
svg.radar .a0 { fill: #4fd8ff; } svg.radar .a1 { fill: #ff6b7a; } svg.radar .a2 { fill: #c58bff; }
svg.radar .a3 { fill: #ffd54d; } svg.radar .a4 { fill: #ff8cd9; } svg.radar .a5 { fill: #74f28c; }

/* ---- profile: the mode switch in the card ------------------------- */
.profile-modes { position: relative; z-index: 1; padding: 16px 24px 0; }
.profile-modes .tabs { margin: 0; max-width: 100%; overflow-x: auto; }

/* ---- bliss!volt profile -----------------------------------------------
   The mode's mark: the two lasers, cyan from the left, pink from the
   right; clear lamps gold (perfect), pink (ultimate chain), cyan
   (complete), grey (crash). */
:root { --vl: #4fd8ff; --vr: #ff66ab; }
.panel.vradar::after, .panel.vclears::after { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--vl), transparent 42%, transparent 58%, var(--vr)); opacity: .85; pointer-events: none; }
.panel.vradar h2::before, .panel.vclears h2::before { background: linear-gradient(180deg, var(--vl), var(--vr)); box-shadow: 0 0 10px rgba(255, 102, 171, .25); }
.hcount { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: none; color: var(--ink-faint); }

/* the Voltage card */
.profile-stats.volt { grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(0, 1fr)); }
.vhero { grid-row: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px;
  background: radial-gradient(120% 150% at 0% 0%, rgba(79, 216, 255, .2), transparent 55%), radial-gradient(120% 150% at 100% 100%, rgba(255, 102, 171, .16), transparent 55%), var(--surface-2);
  border-color: rgba(79, 216, 255, .32); }
.vhero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--vl), var(--vr)); }
.vhero .l { margin: 0 0 4px; }
.profile-stats .vhero .n { font-size: 46px; letter-spacing: -.035em; color: #fff; text-shadow: 0 0 24px rgba(79, 216, 255, .45); }
.vhero .n small { font-size: 16px; color: var(--vl); margin-left: 6px; text-shadow: none; }
.vranks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vrank { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(8, 15, 28, .55); border: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.vrank b { font-size: 14px; letter-spacing: 0; color: var(--ink); }
.vrank .flag { width: 16px; height: 11px; margin-right: 4px; vertical-align: -1px; }
.vrank:hover { border-color: var(--line-2); color: var(--ink); }

/* clear chips in the score tables */
.lampchip { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.lampchip.cl4 { color: #ff9a3d; background: rgba(255, 140, 50, .12); border-color: rgba(255, 140, 50, .32); }
.lampchip.cl3 { color: var(--gold); background: rgba(255, 215, 92, .12); border-color: rgba(255, 215, 92, .3); }
.lampchip.cl2 { color: var(--pink); background: rgba(255, 102, 171, .12); border-color: rgba(255, 102, 171, .3); }
.lampchip.cl1 { color: var(--accent); background: rgba(92, 200, 255, .1); border-color: rgba(92, 200, 255, .26); }
.lampchip.cl0 { color: var(--ink-faint); background: rgba(147, 164, 199, .07); }

/* effect radar */
.vradar-grid { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 24px; align-items: center; }
.vradar-fig { text-align: center; }
.vradar-fig svg.radar { max-width: 380px; }
svg.radar .rv { fill: var(--ink-faint); font-size: 10px; font-weight: 600; }
.vfocus { display: inline-flex; align-items: center; gap: 9px; margin-top: 2px; padding: 5px 14px; border-radius: 999px; background: rgba(8, 15, 28, .55); border: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.vfocus b { font-size: 13px; letter-spacing: .08em; }
.vscale { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.vaxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vaxis { --ac: var(--accent); min-width: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); transition: border-color .15s; }
.vaxis:hover { border-color: var(--line-2); }
.vaxis.focus { border-color: color-mix(in srgb, var(--ac) 55%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--ac) 14%, transparent); }
.vaxis .vh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vaxis .nm { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ac); }
.vaxis .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vbar { height: 6px; margin: 6px 0 10px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.vbar i { display: block; height: 100%; border-radius: 3px; background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.vsrc { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; color: var(--ink-dim); }
.vsrc img, .vsrc .nojacket { flex: none; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; background: var(--navy-3); }
.vsrc .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.vsrc .mv { font-weight: 600; }
.vsrc .sh { font-weight: 700; color: var(--ac); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.vsrc:hover .t { color: var(--accent); }
.vaxis.a0 { --ac: #4fd8ff; } .vexplain .a0, .vfocus .a0 { color: #4fd8ff; }
.vaxis.a1 { --ac: #ff6b7a; } .vexplain .a1, .vfocus .a1 { color: #ff6b7a; }
.vaxis.a2 { --ac: #c58bff; } .vexplain .a2, .vfocus .a2 { color: #c58bff; }
.vaxis.a3 { --ac: #ffd54d; } .vexplain .a3, .vfocus .a3 { color: #ffd54d; }
.vaxis.a4 { --ac: #ff8cd9; } .vexplain .a4, .vfocus .a4 { color: #ff8cd9; }
.vaxis.a5 { --ac: #74f28c; } .vexplain .a5, .vfocus .a5 { color: #74f28c; }
.vexplain { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-dim); }
.vexplain summary { cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vexplain summary:hover { color: var(--ink); }
.vexplain p { margin: 10px 0; }
.vexplain dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.vexplain dt { padding-top: 1px; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.vexplain dd { margin: 0; }

/* clears and levels */
.vclears-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
.vclears h3 { margin: 20px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.vclears-grid > div { min-width: 0; }
.vclears-grid > div > h3:first-child { margin-top: 0; }
.lamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lamp { --lc: var(--accent); position: relative; overflow: hidden; padding: 16px 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.lamp .glow { position: absolute; top: 0; left: 16%; right: 16%; height: 4px; border-radius: 0 0 4px 4px; background: var(--lc); box-shadow: 0 0 14px color-mix(in srgb, var(--lc) 70%, transparent), 0 0 30px color-mix(in srgb, var(--lc) 35%, transparent); }
.lamp .n { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--lc); font-variant-numeric: tabular-nums; }
.lamp .l { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lamp .p { font-size: 11.5px; color: var(--ink-faint); }
.lamp.cl4 { --lc: #ff9a3d; } .lamp.cl3 { --lc: var(--gold); } .lamp.cl2 { --lc: var(--pink); } .lamp.cl1 { --lc: var(--accent); } .lamp.cl0 { --lc: #8a97b5; }
.lamp.cl0 .n { color: var(--ink-dim); }
.gradecols { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; }
.gcol { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.gcol .c { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gcol .b { display: flex; align-items: flex-end; width: 100%; max-width: 30px; height: 84px; border-radius: 6px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.gcol .b i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--vl), rgba(79, 216, 255, .25)); }
.gcol .grade { min-width: 0; width: 100%; height: 22px; padding: 0 1px; font-size: 10.5px; letter-spacing: -.02em; }
.gcol.none { opacity: .38; }
.vlevels td { padding: 7px 8px; }
.vlevels .stars { white-space: nowrap; }
.vlevels .lampcell { width: 42%; }
.lampbar { display: flex; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.lampbar i { display: block; height: 100%; }
.lampbar .cl4 { background: #ff9a3d; } .lampbar .cl3 { background: var(--gold); } .lampbar .cl2 { background: var(--pink); } .lampbar .cl1 { background: var(--accent); } .lampbar .cl0 { background: #4d5a78; }

@media (max-width: 1100px) {
  .profile-stats.volt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vhero { grid-column: 1 / -1; grid-row: auto; }
  .vradar-grid, .vclears-grid { grid-template-columns: 1fr; }
  .vradar-fig svg.radar { margin: 0 auto; }
}
@media (max-width: 760px) {
  .profile-modes { padding: 12px 14px 0; }
  .profile-modes .tab { gap: 0; padding: 6px 10px; letter-spacing: .04em; }
  .profile-modes .tab .mi { display: none; }
  .profile-stats.volt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats .vhero .n { font-size: 38px; }
  .vaxes { grid-template-columns: 1fr; }
  .lamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gradecols { gap: 3px; }
  .gcol .grade { font-size: 9px; }
}

/* ---- maps page: the rulesets, bliss!volt's difficulty pills */
.modetabs { margin: 0 0 4px; flex-wrap: wrap; }
.vdiff { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #06121f; white-space: nowrap; }
.vdiff.d0 { background: #b98cff; } .vdiff.d1 { background: #ffd75c; } .vdiff.d2 { background: #ff5f66; } .vdiff.d3 { background: #e8edf7; }
.bcard .bf .mi { margin-right: 6px; }

/* ---- staff pages: the nominator queue, the map history, the log filter */
table.queue td { padding: 9px 8px; vertical-align: middle; }
.qmap { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 360px; }
.qcover { flex: none; width: 64px; height: 36px; border-radius: 6px; background: var(--navy-3) center / cover; }
.qtxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.qtxt .mt, .qtxt .dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtxt .dim { font-size: 12.5px; }
.qmodes { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.tag.on { color: var(--green); border-color: rgba(95, 227, 143, .35); }
.tag.hot { color: var(--gold); border-color: rgba(255, 215, 92, .4); }
table.feed td { padding: 8px; }
.logfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.logfilter input { background: rgba(8, 15, 28, .7); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); padding: 6px 12px; font: inherit; font-size: 13px; width: 180px; }
.small { font-size: 12.5px; }