/* css/tokens.css */
/* Design tokens (03 §3). One hue drives the palette; contrast adjustments from review 2026-09-17. */
:root {
  --hue: 265;

  --bg-0: hsl(var(--hue) 14% 7%);
  --bg-1: hsl(var(--hue) 13% 11%);
  --bg-2: hsl(var(--hue) 12% 15%);
  --bg-3: hsl(var(--hue) 11% 20%);
  --bg-4: hsl(var(--hue) 10% 26%);
  --line: hsl(var(--hue) 10% 32%);

  --text-1: hsl(var(--hue) 40% 98%);
  --text-2: hsl(var(--hue) 28% 86%);
  --text-3: hsl(var(--hue) 18% 70%);
  --text-mute: hsl(var(--hue) 12% 62%); /* only on --bg-0 … --bg-3; use --text-3 on --bg-4 */

  --accent: hsl(var(--hue) 100% 78%);
  --accent-strong: hsl(var(--hue) 62% 56%);
  --accent-deep: hsl(var(--hue) 55% 40%);
  --link: hsl(var(--hue) 55% 80%);
  --on-pill: hsl(var(--hue) 20% 14%);

  --st-featured: hsl(44 100% 66%);
  --st-community: hsl(158 62% 60%);
  --st-wip: hsl(22 100% 68%);
  --st-pending: hsl(205 88% 70%);
  --st-hidden: hsl(265 8% 58%);
  --badge-library: hsl(188 90% 64%);
  --badge-explicit: hsl(35 95% 62%);
  --badge-ai: hsl(280 60% 76%);
  --warn: hsl(40 100% 58%);
  --danger: hsl(355 85% 60%);
  --ok: hsl(88 70% 52%);
  --rating-neg: hsl(40 100% 58%);
  --rating-bar: hsl(205 70% 56%);

  --font-ui: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", "Inter Fallback", system-ui, sans-serif;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  --gutter: 16px;
  --max-wide: 1400px;
  --max-text: 760px;
  --header-h: 56px;

  --shadow: 0 1px 3px hsl(var(--hue) 30% 2% / 0.35);
  --shadow-lifted: 0 8px 24px hsl(var(--hue) 30% 2% / 0.45);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 120ms;
  --t-card: 360ms;
  --t-bar: 250ms;
  --t-fade: 200ms;
}

@media (min-width: 900px) {
  :root {
    --gutter: 48px;
  }
}

/* css/base.css */
/* Fonts (SIL OFL 1.1, see public/fonts/OFL-*.txt), reset, typography, focus. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/fonts/nunito-cyrillic.b63651df977d.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/fonts/nunito-latin.20fc9b6fc618.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic.aebf2ab4a4ce.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.c940764593d0.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Size-adjusted local fallbacks keep layout shift small while the web fonts load. */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 101%;
  ascent-override: 99%;
  descent-override: 35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-3);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-30); }
h2 { font-size: var(--fs-24); }
h3 { font-size: var(--fs-18); font-weight: 700; }

p { margin: 0 0 var(--s-3); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}
a:hover { color: var(--accent); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

.prose,
.text {
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.5;
  max-width: 70ch;
}
.prose strong, .text strong { font-weight: 600; }

.tabular { font-variant-numeric: tabular-nums; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-deep); color: var(--text-1); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--accent-strong);
  color: var(--text-1);
  border-radius: var(--r-md);
}
.skip-link:focus { top: var(--s-2); color: var(--text-1); }

.icon {
  width: 18px;
  height: 18px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  * { transform: none !important; }
}

/* css/layout.css */
/* Global frame: header, navigation, main, footer, home hero (03 §2). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid hsl(var(--hue) 10% 32% / 0.5);
}
/* Background and blur live on a pseudo-element: `backdrop-filter` on the header itself would make the header the
   containing block for every `position: fixed` descendant (the mobile sheet, the quick search and bell panels),
   which collapsed the mobile navigation sheet to the height of the header. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(var(--hue) 13% 11% / 0.92);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header::before {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.site-header__inner {
  height: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-1);
  white-space: nowrap;
}
.brand:hover { color: var(--text-1); }
.brand__mark { color: var(--accent); fill: currentColor; }
.brand__word { font-weight: 800; font-size: var(--fs-18); letter-spacing: -0.01em; }
.brand__tag {
  align-self: flex-start;
  margin-top: 9px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-3);
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav {
  display: none;
  align-items: stretch;
  gap: var(--s-1);
  height: 100%;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-3);
  color: var(--text-2);
  font-weight: 700;
}
.site-nav__link:hover { color: var(--text-1); }
.site-nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--t-bar) ease-in-out;
}
.site-nav__link[aria-current="page"] { color: var(--text-1); }
.site-nav__link[aria-current="page"]::after,
.site-nav__link:hover::after { transform: scaleX(1); }

.site-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.lang-switch {
  display: none;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
}
.lang-switch__opt {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 800;
}
.lang-switch__opt[aria-current="true"] { background: var(--bg-4); color: var(--text-1); }

.quick-search__panel {
  width: min(360px, calc(100vw - 32px));
  padding: var(--s-2);
}

.mobile-nav__sheet {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  z-index: 49;
  padding: var(--s-4) var(--gutter);
  background: var(--bg-1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav__sheet nav { display: flex; flex-direction: column; }
.mobile-nav__sheet .mobile-nav__group {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--bg-3);
}
.mobile-nav__label {
  margin: 0 0 var(--s-2);
  color: var(--text-mute);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mobile-nav__sheet .mobile-nav__group a,
.mobile-nav__sheet .mobile-nav__group button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-weight: 700;
  font-size: var(--fs-16);
  text-align: left;
  cursor: pointer;
}
.mobile-nav__sheet .mobile-nav__group a:hover,
.mobile-nav__sheet .mobile-nav__group button:hover { color: var(--text-1); }
.mobile-nav__sheet .mobile-nav__group form { margin: 0; }
.mobile-nav__sheet .site-nav__link {
  min-height: 48px;
  font-size: var(--fs-18);
  border-bottom: 1px solid var(--bg-3);
}
.mobile-nav__sheet .site-nav__link::after { display: none; }
.mobile-nav__sheet .lang-switch--sheet { display: inline-flex; margin-top: var(--s-5); }
.mobile-nav__sheet .lang-switch__opt { padding: 8px 16px; font-size: var(--fs-14); }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .lang-switch { display: inline-flex; }
  .mobile-nav { display: none; }
}
@media (max-width: 899px) {
  .brand__tag { display: none; }
  .site-header__tools .btn--sm span { display: none; }
  /* Anchored to the summary, a 360 px panel hangs off the left edge of a phone; pin it to the viewport like the bell.
     Scoped through `.quick-search` so it outranks `.menu__panel`, which the bundle loads after this file. */
  .quick-search .quick-search__panel {
    position: fixed;
    top: calc(var(--header-h) + 4px);
    left: 12px;
    right: 12px;
    width: auto;
  }
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--gutter);
  font-weight: 700;
  font-size: var(--fs-13);
}
.banner--warn { background: hsl(40 100% 58% / 0.14); color: var(--warn); }

.page {
  flex: 1;
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-16);
}
.page--narrow { max-width: var(--max-text); }
.page:focus { outline: none; }

.panel {
  background: var(--bg-1);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.section { margin-top: var(--s-12); }
.section__title { font-size: var(--fs-20); margin-bottom: var(--s-4); }

/* Home */
.page--home { padding-top: var(--s-4); }
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--s-12) var(--s-6);
  background:
    radial-gradient(120% 140% at 100% 0%, hsl(var(--hue) 60% 30% / 0.55), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, hsl(calc(var(--hue) - 60) 70% 40% / 0.25), transparent 55%),
    var(--bg-1);
  box-shadow: var(--shadow-lifted);
  animation: fade-in var(--t-fade) ease-out;
}
.hero__backdrop {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--hue) 100% 78% / 0.08);
  pointer-events: none;
}
.hero__mark { width: 360px; height: 360px; fill: currentColor; }
.hero__content { position: relative; max-width: 640px; }
.hero__eyebrow {
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero__title { font-size: clamp(var(--fs-30), 5vw, var(--fs-56)); margin-bottom: var(--s-4); }
.hero__lead {
  color: var(--text-2);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-18);
  max-width: 52ch;
  margin-bottom: var(--s-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 900px) {
  .hero { padding: var(--s-16) var(--s-12); }
}
@media (max-width: 899px) {
  .hero__backdrop { display: none; }
}

.steps {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: none;
}
.steps__item { position: relative; padding: var(--s-6); }
.steps__num {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  color: var(--text-mute);
  font-size: var(--fs-24);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.steps__icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--s-3); }
.steps__title { margin-bottom: var(--s-2); }
.steps__text { color: var(--text-2); font-family: var(--font-text); font-weight: 400; margin: 0; }

/* Error pages */
.error-page { text-align: center; padding: var(--s-12) var(--s-6); margin-top: var(--s-8); }
.error-page__icon { width: 40px; height: 40px; margin: 0 auto var(--s-3); color: var(--accent); }
.error-page__status { color: var(--text-mute); font-weight: 800; font-size: var(--fs-13); letter-spacing: 0.08em; margin-bottom: var(--s-1); }
.error-page__title { font-size: var(--fs-30); }
.error-page__text { color: var(--text-2); font-family: var(--font-text); font-weight: 400; margin: 0 auto var(--s-6); max-width: 48ch; }
.error-page .search-box { margin: 0 auto var(--s-4); max-width: 520px; }
.error-page__ref { color: var(--text-mute); font-size: var(--fs-12); margin-top: var(--s-4); }

/* Footer */
.site-footer {
  margin-top: auto;
  background: var(--bg-1);
  border-top: 1px solid var(--bg-3);
  color: var(--text-3);
}
.site-footer__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter);
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.site-footer__qwu { color: var(--text-1); font-weight: 800; font-size: var(--fs-18); }
.site-footer__contact { margin-top: var(--s-2); font-size: var(--fs-13); }
.site-footer__title {
  font-size: var(--fs-12);
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
}
.site-footer__col li + li { margin-top: var(--s-2); }
.site-footer__col a { color: var(--text-2); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__legal {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter) var(--s-6);
  border-top: 1px solid var(--bg-3);
  font-size: var(--fs-12);
  color: var(--text-mute);
}
.site-footer__legal p { margin: 0 0 var(--s-1); }
.site-footer__disclaimer { letter-spacing: 0.02em; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* css/components.css */
/* Base components: buttons, inputs, search box, pills, badges, card shell, menus, dialogs, toasts, avatar. */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.2;
  /* A long label (Russian is routinely 1.5× the English) must wrap instead of widening the button past the viewport
     and dragging the whole page into horizontal scrolling. Single-line `nowrap` returns on wide screens. */
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--accent-strong); color: var(--text-1); }
.btn--primary:hover { background: hsl(var(--hue) 62% 62%); color: var(--text-1); }
.btn--primary:active { background: var(--accent-deep); }
.btn--secondary { background: var(--bg-3); color: var(--text-1); }
.btn--secondary:hover { background: var(--bg-4); color: var(--text-1); }
.btn--ghost { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { color: var(--text-1); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--danger { background: var(--danger); color: hsl(355 40% 10%); }
.btn--danger:hover { background: hsl(355 85% 66%); color: hsl(355 40% 10%); }
.btn--sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn--lg { min-height: 44px; padding: 0 var(--s-6); font-size: var(--fs-16); }
@media (min-width: 900px) {
  .btn { white-space: nowrap; }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.icon-btn:hover { background: var(--bg-3); color: var(--text-1); }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  /* Without this an input keeps its intrinsic minimum width and widens narrow flex/grid parents past the viewport. */
  min-width: 0;
  min-height: 36px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  color: var(--text-1);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-mute); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 96px; resize: vertical; font-family: var(--font-text); font-weight: 400; }
.field { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.field__label { color: var(--text-2); font-weight: 700; font-size: var(--fs-13); }
.field__hint { color: var(--text-mute); font-size: var(--fs-12); }
.field__error { color: var(--danger); font-size: var(--fs-12); }

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.search-box {
  position: relative;
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.search-box__icon {
  position: absolute;
  left: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}
.search-box__input { padding-left: 38px; }
.search-box--hero .search-box__input {
  min-height: 48px;
  font-size: var(--fs-16);
  background: var(--bg-2);
  border-radius: var(--r-md);
}
.search-box--hero .btn { min-height: 48px; padding: 0 var(--s-6); }
@media (max-width: 520px) {
  .search-box--hero { flex-wrap: wrap; }
  .search-box--hero .btn { width: 100%; }
  .search-box--hero .search-box__icon { top: 24px; }
}

/* Pills (status) and badges (flags) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-4);
  color: var(--text-1);
  font-size: var(--fs-11);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.pill--featured { background: var(--st-featured); color: var(--on-pill); }
.pill--community { background: var(--st-community); color: var(--on-pill); }
.pill--wip { background: var(--st-wip); color: var(--on-pill); }
.pill--pending { background: var(--st-pending); color: var(--on-pill); }
.pill--hidden { background: var(--st-hidden); color: var(--on-pill); }
.pill--voted { background: var(--ok); color: var(--on-pill); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: hsl(var(--hue) 20% 8% / 0.6);
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: var(--fs-11);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.badge--library { color: var(--badge-library); }
.badge--explicit { color: var(--badge-explicit); }
.badge--ai { color: var(--badge-ai); }

/* Card shell */
.card {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: background-color var(--t-hover) ease, box-shadow var(--t-card) var(--ease-out), transform var(--t-card) var(--ease-out);
}
.card--interactive:hover { background: var(--bg-3); box-shadow: var(--shadow-lifted); transform: translateY(-2px); }
@media (hover: none) {
  .card--interactive:hover { transform: none; }
}

/* Menus built on <details> (work without JavaScript) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 220px;
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: var(--shadow-lifted);
  animation: fade-in var(--t-fade) ease-out;
}
.menu__head { display: grid; padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--bg-4); margin-bottom: var(--s-1); }
.menu__head span { color: var(--text-mute); font-size: var(--fs-12); }
.menu__panel a,
.menu__panel button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.menu__panel a:hover,
.menu__panel button:hover { background: var(--bg-4); color: var(--text-1); }
.menu__form { margin: 0; }
.avatar-menu__button { display: inline-flex; border-radius: var(--r-pill); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--bg-4);
}
.avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-deep));
}

.bell { position: relative; }
.bell__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent-strong);
  color: var(--text-1);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Dialogs */
dialog.dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg-1);
  color: var(--text-1);
  box-shadow: var(--shadow-lifted);
}
dialog.dialog::backdrop { background: hsl(var(--hue) 30% 3% / 0.7); }
dialog.dialog[open] { animation: fade-in var(--t-fade) ease-out; }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--bg-3); }
.dialog__title { margin: 0; font-size: var(--fs-18); }
.dialog__body { padding: var(--s-5); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); }

/* Toasts */
.toasts {
  position: fixed;
  z-index: 90;
  right: var(--s-4);
  bottom: var(--s-4);
  display: grid;
  gap: var(--s-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 360px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-3);
  color: var(--text-1);
  box-shadow: var(--shadow-lifted);
  font-weight: 700;
  pointer-events: auto;
  animation: toast-in var(--t-card) var(--ease-out);
  transition: opacity 250ms ease;
}
.toast .icon { color: var(--ok); }
.toast--error { box-shadow: var(--shadow-lifted), inset 3px 0 0 var(--danger); }
.toast--leaving { opacity: 0; }
@media (max-width: 899px) {
  .toasts { left: var(--s-4); right: var(--s-4); justify-items: center; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (hover: none) {
  .btn, .icon-btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .menu__panel a, .menu__panel button { min-height: 44px; }
}

/* css/modules/account.css */
/* Styles for the account module (/account) plus the small auth components shared with /link:
   .auth-switch (checkbox switch), .auth-callout (notice block), .auth-empty, .auth-range. Bundled after components.css. */

/* Switch built on a real checkbox (keyboard and screen readers get the native control). */
.auth-switch {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  cursor: pointer;
}
.auth-switch__input {
  position: absolute;
  opacity: 0;
  width: 40px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.auth-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--bg-4);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.auth-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--text-2);
  transition: transform var(--t-bar) var(--ease-out), background-color var(--t-hover) ease;
}
.auth-switch__input:checked + .auth-switch__track { background: var(--accent-strong); box-shadow: none; }
.auth-switch__input:checked + .auth-switch__track::after { transform: translateX(18px); background: var(--text-1); }
.auth-switch__input:focus-visible + .auth-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-switch__input:disabled + .auth-switch__track { opacity: 0.5; }
.auth-switch__input:disabled ~ .auth-switch__text { opacity: 0.6; }
.auth-switch__text { display: grid; gap: 2px; }
.auth-switch__label { color: var(--text-1); font-weight: 700; }
.auth-switch__hint { color: var(--text-mute); font-size: var(--fs-12); font-weight: 600; }
.auth-switch--compact { padding: var(--s-1) 0; }
.auth-switch--compact .auth-switch__label { font-size: var(--fs-13); color: var(--text-2); }

/* Callouts */
.auth-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text-2);
  box-shadow: inset 3px 0 0 var(--line);
}
.auth-callout .icon { margin-top: 1px; color: var(--text-3); }
.auth-callout strong { display: block; color: var(--text-1); margin-bottom: 2px; }
.auth-callout p { margin: 0; }
.auth-callout div > p + p, .auth-callout div > p + .auth-switch { margin-top: var(--s-2); }
.auth-callout--warn { background: hsl(40 100% 58% / 0.1); box-shadow: inset 3px 0 0 var(--warn); }
.auth-callout--warn .icon { color: var(--warn); }
.auth-callout--danger { background: hsl(355 85% 60% / 0.12); box-shadow: inset 3px 0 0 var(--danger); color: var(--text-1); }
.auth-callout--danger .icon { color: var(--danger); }
.auth-callout[hidden], .auth-switch[hidden], .page--account [hidden] { display: none !important; }

.auth-empty {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text-2);
}
.auth-empty p:last-child { margin-bottom: 0; }

.auth-range { width: 100%; accent-color: var(--accent-strong); }

/* /account */
.page--account .account-head { margin-bottom: var(--s-6); }
.account-grid { display: grid; gap: var(--s-6); align-items: start; }
.account-grid__main, .account-grid__side { display: grid; gap: var(--s-6); min-width: 0; }
@media (min-width: 900px) {
  .account-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
.account-section__title { font-size: var(--fs-20); margin-bottom: var(--s-2); }
.account-section__text { color: var(--text-3); font-family: var(--font-text); font-weight: 400; margin-bottom: var(--s-4); }

.account-profile { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.account-profile__avatar { width: 72px; height: 72px; border-radius: var(--r-pill); object-fit: cover; flex: none; background: var(--bg-4); }
.account-profile__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-30);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-deep));
}
.account-profile__name { margin: 0; font-size: var(--fs-18); font-weight: 800; color: var(--text-1); }
.account-profile__username { margin: 0; color: var(--text-mute); }
.account-profile__badges { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0 0; }
.account-lang { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.prefs-form__hint { margin: calc(-1 * var(--s-1)) 0 var(--s-4) 52px; }
.prefs-form__grid { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.prefs-form__grid .field__label { display: flex; justify-content: space-between; gap: var(--s-2); }
.prefs-form__actions { display: flex; justify-content: flex-end; margin-top: var(--s-2); }

.mc-links, .devices { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.mc-link, .device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.mc-link__head {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  image-rendering: pixelated;
  background: var(--bg-4);
  box-shadow: 0 0 0 2px var(--bg-3);
}
.mc-link__name, .device__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; color: var(--text-1); font-weight: 800; font-size: var(--fs-16); overflow-wrap: anywhere; }
.mc-link__uuid { margin: 2px 0 var(--s-2); }
.mc-link__uuid code { color: var(--text-mute); font-size: var(--fs-12); overflow-wrap: anywhere; }
.mc-link__meta, .device__meta { margin: 0 0 var(--s-1); color: var(--text-3); font-size: var(--fs-13); }
.mc-link__toggles { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.mc-link__actions { display: grid; gap: var(--s-2); justify-items: end; }
.device__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--bg-3);
  color: var(--accent);
}
@media (max-width: 599px) {
  .mc-link, .device { grid-template-columns: auto minmax(0, 1fr); }
  .mc-link__actions, .device > .btn { grid-column: 1 / -1; justify-items: start; justify-self: start; display: flex; flex-wrap: wrap; }
}

/* css/modules/beatmaps.css */
/* Styles for the beatmaps module (03 §3–§4): shared bits, listing, card, preview player, set page, profile, home.
   Owned by the beatmaps builder; bundled after components.css. Star colours come from spectrum.css (.sc-*). */

/* ─── shared ──────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
.muted { color: var(--text-mute); }
.back-link { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; }
.back-link .icon { width: 16px; height: 16px; }
.link-btn { border: 0; padding: 0; background: none; color: var(--link); font-weight: 700; cursor: pointer; }
.link-btn:hover { color: var(--accent); }
.icon--fill { fill: currentColor; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.count-pill {
  display: inline-flex; align-items: center; min-width: 24px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--bg-3); color: var(--text-2); font-size: var(--fs-12); font-weight: 800; font-variant-numeric: tabular-nums;
}
.pill--lg { padding: 6px 28px; font-size: var(--fs-14); }

.cover-ph {
  display: block;
  background:
    linear-gradient(135deg, hsl(var(--hue) 45% 24% / 0.9), hsl(calc(var(--hue) + 40) 45% 16% / 0.95)),
    repeating-linear-gradient(0deg, transparent 0 15px, hsl(var(--hue) 60% 70% / 0.06) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, hsl(var(--hue) 60% 70% / 0.06) 15px 16px),
    var(--bg-3);
}

.star-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 2px 2px 7px; border-radius: var(--r-pill);
  background: var(--star); line-height: 1; white-space: nowrap;
}
.star-pill__glyph { color: var(--star-glyph); font-size: 11px; }
.star-pill__value {
  padding: 2px 6px; border-radius: var(--r-pill); background: hsl(265 20% 12% / 0.85); color: var(--text-1);
  font-size: var(--fs-12); font-weight: 800; font-variant-numeric: tabular-nums;
}

.dots { display: inline-flex; align-items: center; gap: 1px; }
.dot { width: 5px; height: 10px; border-radius: var(--r-pill); background: var(--star); box-shadow: 0 0 0 1px var(--star-ring); }
.dots--count { color: var(--text-2); font-size: var(--fs-12); font-weight: 700; }

.icon-pill {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-pill);
  background: hsl(0 0% 0% / 0.5); color: var(--text-1);
}
.icon-pill .icon { width: 12px; height: 12px; }
.icon-pill--lg { width: 34px; height: 34px; background: hsl(var(--hue) 20% 8% / 0.6); }
.icon-pill--lg .icon { width: 16px; height: 16px; }

.avatar--24 { width: 24px; height: 24px; font-size: var(--fs-11); }
.avatar--48 { width: 48px; height: 48px; border-radius: var(--r-md); font-size: var(--fs-20); }
.avatar--96 { width: 96px; height: 96px; border-radius: var(--r-lg); font-size: var(--fs-40); }

.role-badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: hsl(var(--hue) 20% 8% / 0.75);
  font-size: var(--fs-11); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle;
}
.role-badge--admin { color: hsl(355 90% 72%); }
.role-badge--mod { color: hsl(158 62% 64%); }
.role-badge--curator { color: var(--st-featured); }

.bar__track { fill: hsl(0 0% 100% / 0.14); }
.bar__fill { fill: var(--text-1); transition: width var(--t-bar) ease-in-out; }

/* ─── listing: search panel ───────────────────────────────────────────────── */
.page--listing { padding-top: var(--s-4); }
.search-panel {
  position: relative; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg-2);
  box-shadow: var(--shadow);
}
.search-panel__cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18;
  transition: opacity 600ms var(--ease-out);
}
.search-panel__veil { position: absolute; inset: 0; background: linear-gradient(180deg, hsl(var(--hue) 12% 15% / 0.35), hsl(var(--hue) 12% 15% / 0.85)); }
.search-panel__inner { position: relative; padding: var(--s-5) var(--s-4); }
.search-panel__form { position: relative; display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.search-panel__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-mute); pointer-events: none; }
.search-panel__icon .icon { width: 20px; height: 20px; }
.search-panel__spinner { display: none; animation: bm-spin 800ms linear infinite; }
.listing.is-loading .search-panel__glass { display: none; }
.listing.is-loading .search-panel__spinner { display: block; color: var(--accent); }
.search-panel__input {
  flex: 1; min-width: 0; height: 48px; padding: 0 44px; border: 1px solid transparent; border-radius: var(--r-md);
  background: hsl(var(--hue) 11% 20% / 0.92); color: var(--text-1); font-size: var(--fs-20); font-weight: 600;
}
.search-panel__input::placeholder { color: var(--text-mute); opacity: 1; font-size: var(--fs-16); }
.search-panel__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.search-panel__help { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-3); padding: 4px; }
.search-panel__help:hover { color: var(--accent); }

/* ─── listing: filters ────────────────────────────────────────────────────── */
.filters { display: grid; gap: var(--s-2); }
.filter { display: grid; grid-template-columns: 1fr; gap: 2px var(--s-3); align-items: baseline; }
.filter__label { color: var(--text-2); font-size: var(--fs-13); font-weight: 700; }
.filter__opts { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); }
.filter__opt { color: var(--text-3); font-weight: 600; padding: 2px 0; transition: color var(--t-hover) ease; }
.filter__opt:hover { color: hsl(var(--hue) 40% 88%); }
.filter__opt.is-active { color: var(--text-1); font-weight: 800; }
.filter__pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px 1px 8px; border-radius: var(--r-pill);
  color: var(--text-3); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.filter__pill:hover { color: hsl(var(--hue) 40% 88%); }
.filter__pill.is-active { background: hsl(var(--hue) 45% 84%); color: hsl(var(--hue) 20% 14%); font-weight: 800; }
.filter__pill.is-active:hover { background: hsl(var(--hue) 40% 74%); color: hsl(var(--hue) 20% 14%); }
.filter__pill--library { color: var(--badge-library); }
.filter__pill--library.is-active { background: var(--badge-library); color: hsl(188 40% 12%); }
.filter__pill-x { width: 13px; height: 13px; }
.filters__more { margin-top: var(--s-1); }
.filters__more-toggle {
  display: inline-flex; align-items: center; gap: var(--s-1); list-style: none; cursor: pointer; color: var(--link);
  font-weight: 700; font-size: var(--fs-13); padding: 4px 0;
}
.filters__more-toggle::-webkit-details-marker { display: none; }
.filters__more-caret { width: 16px; height: 16px; transition: transform var(--t-bar) ease-in-out; }
.filters__more[open] .filters__more-caret { transform: rotate(180deg); }
.filters__count {
  min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent-strong); color: var(--text-1);
  font-size: var(--fs-11); text-align: center; line-height: 18px;
}
.filters__more-body { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
@media (min-width: 900px) {
  .search-panel__inner { padding: var(--s-6) var(--s-8); }
  .filter { grid-template-columns: 140px 1fr; }
}

/* ─── listing: toolbar ────────────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); margin-top: 2px;
  background: var(--bg-2);
}
.toolbar__label { color: var(--text-2); font-size: var(--fs-13); font-weight: 700; white-space: nowrap; }
.toolbar__tabs { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; }
.sort-tab {
  display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-13); font-weight: 700; white-space: nowrap;
}
.sort-tab:hover { background: var(--bg-3); color: var(--text-1); }
.sort-tab.is-active { background: var(--bg-4); color: var(--text-1); font-weight: 800; }
.sort-tab__caret { width: 14px; height: 14px; transition: transform var(--t-card) var(--ease-out); }
.sort-tab.is-asc .sort-tab__caret { transform: scaleY(-1); }
.toolbar__size { margin-left: auto; display: flex; gap: 2px; }
.toolbar__size-btn { width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--text-3); }
.toolbar__size-btn[aria-pressed="true"] { background: var(--bg-4); color: var(--text-1); }
@media (max-width: 899px) {
  .toolbar { padding: 0 var(--s-3); }
  .toolbar__tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; }
  .toolbar__tabs::-webkit-scrollbar { display: none; }
  .toolbar__size { display: none; }
  .sort-tab { height: 36px; }
}

/* ─── listing: results ────────────────────────────────────────────────────── */
.results {
  position: relative; padding: var(--s-4) var(--s-3) 220px; background: var(--bg-1); border-radius: 0 0 var(--r-lg) var(--r-lg);
  transition: opacity var(--t-fade) ease;
}
.listing.is-loading .results { opacity: 0.4; pointer-events: none; }
.results__more { display: flex; justify-content: center; margin-top: var(--s-6); }
.results__more-spinner { display: none; animation: bm-spin 800ms linear infinite; }
.results__more-btn.is-loading .results__more-spinner { display: block; }
.results__sentinel { height: 1px; }
@media (min-width: 900px) { .results { padding: var(--s-5) var(--s-5) 220px; } }

.bm-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .bm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-12) var(--s-4); text-align: center; }
.empty__art {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--r-lg); background: var(--bg-2);
  color: hsl(var(--hue) 100% 78% / 0.45); transform: rotate(-6deg);
}
.empty__mark { width: 56px; height: 56px; fill: currentColor; }
.empty__title { font-size: var(--fs-20); font-weight: 800; margin: var(--s-2) 0 0; }
.empty__text { max-width: 52ch; margin: 0; color: var(--text-2); font-family: var(--font-text); font-weight: 400; line-height: 1.6; }
.empty__tips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.empty__tips a { display: inline-flex; align-items: center; gap: var(--s-1); }

/* ─── card ────────────────────────────────────────────────────────────────── */
.bm-card {
  --card-h: 104px;
  --strip: 8px;
  position: relative; display: flex; height: var(--card-h); min-width: 0; border-radius: var(--r-md);
  background: var(--bg-2); box-shadow: var(--shadow);
  transition: box-shadow var(--t-card) var(--ease-out), transform var(--t-card) var(--ease-out);
  animation: fade-in var(--t-fade) ease-out;
}
.bm-card--extra { --card-h: 140px; }
.results--extra .bm-card { --card-h: 140px; }
.bm-card__thumb {
  position: relative; flex: none; width: var(--card-h); height: 100%; overflow: hidden; border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--bg-3);
}
.bm-card__thumb-img { width: 100%; height: 100%; object-fit: cover; }
.bm-card__thumb::after {
  content: ""; position: absolute; inset: 0; background: hsl(var(--hue) 14% 7% / 0.6); opacity: 0; pointer-events: none;
  transition: opacity var(--t-card) var(--ease-out);
}
.bm-card__icons { position: absolute; top: 4px; left: 4px; z-index: 3; display: flex; gap: 1px; }
.bm-card__nopreview {
  position: absolute; inset: 0 8px 0 0; z-index: 2; display: grid; place-items: center; color: var(--text-3); opacity: 0;
  transition: opacity var(--t-card) var(--ease-out);
}
.bm-card__body {
  position: relative; flex: 1; min-width: 0; display: flex; margin-left: -8px; overflow: hidden; border-radius: var(--r-md);
  background: var(--bg-3); transition: background-color var(--t-card) var(--ease-out);
}
.bm-card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
.bm-card__content { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 5px 10px 5px 12px; }
.bm-card__line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bm-card__line .badge { flex: none; font-size: 10px; }
.bm-card__h { margin: 0; min-width: 0; font-size: var(--fs-18); font-weight: 700; line-height: 1.2; overflow: hidden; }
.bm-card__title {
  display: block; overflow: hidden; color: var(--text-1); white-space: nowrap; text-overflow: ellipsis;
  text-shadow: 0 1px 3px hsl(var(--hue) 30% 2% / 0.6);
}
.bm-card__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bm-card__title:hover { color: var(--text-1); }
.bm-card__title:focus-visible { outline: none; }
.bm-card__title:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.bm-card__artist { font-size: var(--fs-14); font-weight: 600; line-height: 1.3; color: var(--text-1); }
.bm-card__artist-text, .bm-card__source { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.bm-card__source { font-size: var(--fs-12); line-height: 1.3; color: var(--text-2); }
.bm-card__mapper { font-size: var(--fs-12); line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-card__mapper a { position: relative; z-index: 2; }
.bm-card__bottom { margin-top: auto; display: grid; gap: 2px; }
.bm-card__stats {
  display: flex; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-11); line-height: 14px; font-weight: 700; opacity: 0;
  transition: opacity var(--t-card) var(--ease-out); font-variant-numeric: tabular-nums;
}
.bm-card--extra .bm-card__stats, .results--extra .bm-card__stats { opacity: 1; }
.bm-card__stats span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.bm-card__stats .icon { width: 11px; height: 11px; }
.bm-card__info { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; min-height: 20px; width: max-content; max-width: 100%; }
.bm-card__status { font-size: var(--fs-12); padding: 0 6px 1px; line-height: 16px; }
.bm-card__ext { display: inline-flex; color: var(--text-3); }
.bm-card__ext .icon { width: 14px; height: 14px; }
.bm-card__chev { display: none; }
.bm-card__strip {
  position: relative; z-index: 2; flex: none; width: var(--strip); display: flex; flex-direction: column; background: var(--bg-4);
  transition: width var(--t-card) var(--ease-out);
}
.bm-card__btn {
  flex: 1; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--text-2);
  opacity: 0; cursor: pointer; transition: opacity var(--t-card) var(--ease-out), color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.bm-card__btn .icon { width: 15px; height: 15px; }
.bm-card__btn:hover { color: var(--text-1); background: hsl(0 0% 100% / 0.08); }
.bm-card__btn[aria-pressed="true"] { color: hsl(340 90% 70%); }
.bm-card__btn[aria-pressed="true"] .icon { fill: currentColor; }
.bm-card__btn.is-disabled { color: var(--text-mute); cursor: not-allowed; }

/* level 1: hover shows details */
@media (hover: hover) and (min-width: 900px) {
  .bm-card:hover, .bm-card:focus-within, .bm-card.is-expanded { --strip: 30px; }
  .bm-card:hover .bm-card__body, .bm-card.is-expanded .bm-card__body { background: var(--bg-4); }
  .bm-card:hover .bm-card__stats, .bm-card.is-expanded .bm-card__stats { opacity: 1; }
  .bm-card:hover .bm-card__stats { color: var(--text-3); }
  .bm-card:hover .bm-card__btn, .bm-card:focus-within .bm-card__btn, .bm-card.is-expanded .bm-card__btn { opacity: 1; }
  .bm-card:hover .bm-card__thumb::after, .bm-card:hover .bm-card__nopreview { opacity: 1; }
  .bm-card.is-expanded { box-shadow: var(--shadow-lifted), 0 0 0 2px var(--accent); z-index: 5; }
}
.bm-card.is-playing .bm-card__thumb::after { opacity: 1; }

/* touch and narrow screens: play button visible, bottom bar with 44 px targets (review) */
@media (hover: none), (max-width: 899px) {
  .bm-card, .bm-card--extra, .results--extra .bm-card { --card-h: 148px; display: block; }
  .bm-card__thumb { position: absolute; z-index: 3; top: 0; left: 0; width: 104px; height: 104px; border-radius: var(--r-md) 0 var(--r-md) 0; }
  .bm-card__thumb::after { opacity: 0.35; }
  .bm-card__body { position: absolute; inset: 0; margin-left: 0; }
  .bm-card__play, .bm-card__nopreview { inset: 0; }
  .bm-card__play { opacity: 1 !important; }
  .bm-card__nopreview { opacity: 1; }
  .bm-card__content { padding: 6px 10px 50px 116px; }
  .bm-card__bottom { position: absolute; z-index: 2; left: 12px; right: 132px; bottom: 0; height: 44px; align-content: center; }
  .bm-card__stats { display: none; }
  .bm-card__chev {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none;
    color: var(--text-2); position: absolute; z-index: 2; right: -132px; bottom: 0;
  }
  .bm-card__chev[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .bm-card__strip { position: absolute; right: 44px; bottom: 0; height: 44px; width: auto; flex-direction: row; background: transparent; }
  .bm-card__btn { width: 44px; opacity: 1; }
  .bm-card__info { position: static; }
}

/* ─── preview player ──────────────────────────────────────────────────────── */
.play {
  position: absolute; inset: 0 8px 0 0; z-index: 3; display: grid; place-items: center; border: 0; padding: 0; background: none;
  color: var(--text-1); cursor: pointer; opacity: 0; transition: opacity var(--t-card) var(--ease-out), color var(--t-hover) ease;
}
.bm-card:hover .play, .bm-card:focus-within .play, .play:focus-visible, .play.is-playing, .play.is-loading { opacity: 1; }
.play:hover { color: var(--accent); }
.play__icon { grid-area: 1 / 1; width: 22px; height: 22px; }
.play__icon--stop, .play__icon--load { display: none; }
.play.is-playing .play__icon--play { display: none; }
.play.is-playing .play__icon--stop { display: block; width: 18px; height: 18px; }
.play.is-loading .play__icon--play { display: none; }
.play.is-loading .play__icon--load { display: block; animation: bm-spin 800ms linear infinite; }
.ring { grid-area: 1 / 1; width: 52px; height: 52px; opacity: 0; transition: opacity var(--t-fade) ease; }
.play.is-playing .ring { opacity: 1; }
.ring__track { fill: none; stroke: hsl(0 0% 100% / 0.15); stroke-width: 4; }
.ring__bar { fill: none; stroke: var(--accent); stroke-width: 4; }
.bm-card--extra .ring, .results--extra .ring { width: 72px; height: 72px; }

.mini-player {
  position: fixed; left: 50%; bottom: var(--s-4); z-index: 80; display: flex; align-items: center; gap: var(--s-3);
  max-width: calc(100vw - 32px); padding: 8px 12px 8px 8px; border-radius: var(--r-pill); background: hsl(var(--hue) 12% 15% / 0.96);
  box-shadow: var(--shadow-lifted); transform: translate(-50%, 0); transition: opacity var(--t-fade) ease, transform var(--t-card) var(--ease-out);
}
.mini-player[data-state="hidden"] { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
.mini-player__stop { width: 36px; height: 36px; border-radius: var(--r-pill); border: 0; background: var(--accent-strong); color: var(--text-1); display: grid; place-items: center; cursor: pointer; }
.mini-player__stop .icon { width: 14px; height: 14px; }
.mini-player__text { min-width: 0; display: grid; }
.mini-player__label { color: var(--text-mute); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.04em; }
.mini-player__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 40vw; font-weight: 700; }
.mini-player__volume { width: 90px; accent-color: var(--accent); }
@media (max-width: 899px) { .mini-player__volume { display: none; } .mini-player { bottom: 72px; } }

/* chart dropdown portal */
.bm-charts-pop {
  position: absolute; z-index: 40; max-height: 200px; overflow-y: auto; padding: 8px; border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--bg-2); box-shadow: var(--shadow-lifted), 0 0 0 2px var(--accent); animation: fade-in var(--t-fade) ease-out;
}
.bm-charts-pop__list { display: grid; gap: 3px; }
.bm-charts-pop__list a { display: flex; align-items: center; gap: var(--s-2); padding: 3px 6px; border-radius: var(--r-sm); color: var(--text-1); min-height: 30px; }
.bm-charts-pop__list a:hover { background: var(--bg-3); }
.bm-charts-pop__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.signin-pop {
  position: absolute; z-index: 60; width: min(280px, calc(100vw - 32px)); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-2);
  box-shadow: var(--shadow-lifted); font-size: var(--fs-13);
}
.signin-pop p { margin-bottom: var(--s-2); color: var(--text-2); }

.scroll-top {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 70; width: 48px; height: 48px; border: 0; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--bg-3); color: var(--text-1); box-shadow: var(--shadow-lifted); cursor: pointer;
  transition: opacity var(--t-fade) ease;
}
.scroll-top[hidden] { display: none; }
.scroll-top:hover { background: var(--bg-4); }
.scroll-top svg.scroll-top__ring { position: absolute; inset: 0; width: 48px; height: 48px; }
.scroll-top__ring circle { fill: none; stroke: var(--accent); stroke-width: 3; }

/* ─── set page ────────────────────────────────────────────────────────────── */
.page--set { padding-top: var(--s-4); }
/* No `overflow: hidden` here: it would clip the install popover and the "..." menu, which are absolutely
   positioned inside the button row. The cover is clipped by its own rounded box instead. */
.set-header { position: relative; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg-1); min-height: 360px; }
.set-header__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.set-header__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.set-header__veil { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, hsl(var(--hue) 14% 7% / 0.3), hsl(var(--hue) 14% 7% / 0.85)); }
.set-header__grid { position: relative; display: grid; gap: var(--s-5); padding: var(--s-5) var(--s-4); }
@media (min-width: 900px) {
  .set-header__grid { grid-template-columns: minmax(0, 1fr) 300px; padding: var(--s-6) var(--s-8) var(--s-6); align-items: end; }
}
.set-header__left { min-width: 0; }
.state-notice {
  display: flex; align-items: center; gap: var(--s-2); width: fit-content; max-width: 100%; margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: hsl(205 88% 70% / 0.16); color: var(--st-pending);
}
.chart-picker {
  display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-left: -4px; padding: 4px; border-radius: var(--r-lg);
  background: hsl(var(--hue) 11% 20% / 0.55);
}
.chart-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; }
.chart-tile:hover { background: hsl(var(--hue) 14% 7% / 0.5); }
.chart-tile.is-selected { border-color: var(--link); background: hsl(var(--hue) 14% 7% / 0.5); }
.chart-tile__disc { width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--star); box-shadow: 0 0 0 1px var(--star-ring), 0 1px 3px hsl(0 0% 0% / 0.3); }
.set-header__chart { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.set-header__chart-name { font-size: 17px; font-weight: 700; }
.set-header__chart-stars { color: var(--st-featured); font-size: var(--fs-12); font-weight: 800; }
.set-header__counters { display: flex; gap: var(--s-3); font-size: var(--fs-12); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.set-header__counters span { display: inline-flex; align-items: center; gap: 4px; }
.set-header__counters .icon { width: 14px; height: 14px; }
.set-header__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-1); font-size: clamp(var(--fs-24), 4vw, var(--fs-30)); font-weight: 700; overflow-wrap: anywhere; }
.set-header__title a, .set-header__artist a { color: var(--text-1); }
.set-header__title a:hover, .set-header__artist a:hover { color: var(--accent); }
.set-header__unicode { color: var(--text-2); margin-bottom: var(--s-1); }
.set-header__artist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-20); font-weight: 600; margin-bottom: var(--s-5); overflow-wrap: anywhere; }
.mapper-card { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.mapper-card__lines p { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.mapper-card__lines p:first-child { font-size: var(--fs-12); }
.mapper-card__lines strong { color: var(--text-1); font-weight: 800; }
.avail-banner {
  display: flex; gap: var(--s-3); align-items: flex-start; max-width: 640px; margin: var(--s-3) 0; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: hsl(0 0% 0% / 0.6); color: var(--warn);
}
.avail-banner p { margin: 0; }
.avail-banner__reason, .avail-banner__more { font-size: var(--fs-12); color: var(--text-2); }
.set-header__buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.set-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 45px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-md); background: var(--accent-strong); color: var(--text-1); font-weight: 800; cursor: pointer;
  list-style: none; transition: background-color var(--t-hover) ease;
}
.set-btn::-webkit-details-marker { display: none; }
.set-btn:hover { background: hsl(var(--hue) 62% 62%); color: var(--text-1); }
.set-btn--square { width: 45px; padding: 0; }
.set-btn[aria-pressed="true"] .icon { fill: currentColor; }
.set-btn--download { min-width: 150px; justify-content: space-between; }
.set-btn__lines { display: grid; text-align: left; line-height: 1.2; }
.set-btn__main { font-size: var(--fs-14); }
.set-btn__sub { font-size: var(--fs-11); font-weight: 700; color: hsl(var(--hue) 40% 92%); }
/* "Install in game" is the primary action (wave I1): with the helper installed the link reaches the game directly,
   so Download steps back to the quieter colour and the popover becomes the fallback behind a split-button chevron. */
.set-btn--download, .set-more .set-btn { background: hsl(var(--hue) 11% 20% / 0.9); }
.set-btn--download:hover, .set-more .set-btn:hover { background: var(--bg-4); }
/* The popover hangs off the whole group, not off the 34 px chevron: anchored to the chevron it ran off the left
   edge of a phone (test/e2e/frame.e2e.test.ts). `position: static` hands the details' usual role to the group. */
.set-install-group { position: relative; display: inline-flex; align-items: stretch; }
.set-install { position: static; }
.set-install-group .set-btn--install { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: var(--s-3); }
.set-install__toggle { width: 34px; min-height: 45px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; }
.set-install__toggle .icon { transition: transform var(--t-hover) ease; }
.set-install[open] .set-install__toggle .icon { transform: rotate(180deg); }
.set-install__panel { left: 0; right: auto; width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 24px); padding: var(--s-4); }
.set-install__note { margin: 0 0 var(--s-2); font-size: var(--fs-12); color: var(--text-2); font-family: var(--font-text); font-weight: 400; }
.set-install__title { font-weight: 800; margin-bottom: var(--s-2); }
.set-install__steps { list-style: decimal; padding-left: 1.2em; display: grid; gap: var(--s-2); font-family: var(--font-text); font-weight: 400; color: var(--text-2); }
.set-install__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 var(--s-2); }
.set-install__actions .btn { width: auto; }
.set-install__help { margin: 0; font-size: var(--fs-12); }
/* Right-anchored at every width: left-anchoring ran the 220 px panel off the right edge of a phone. */
.set-more .menu__panel { max-width: calc(100vw - 24px); }

.set-header__right { display: grid; gap: var(--s-3); }
.set-status { display: flex; justify-content: flex-end; gap: var(--s-2); }
.set-details { display: grid; gap: 1px; overflow: hidden; border-radius: var(--r-md); }
.set-details > * { background: hsl(var(--hue) 14% 7% / 0.62); padding: var(--s-3) var(--s-4); }
.set-preview { position: relative; display: grid; place-items: center; min-height: 48px; padding: 0 !important; }
.set-preview .play { position: static; opacity: 1; width: 100%; height: 48px; }
.set-preview .ring { display: none; }
.set-preview .play.is-playing { color: var(--st-featured); }
.set-preview__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; }
.set-preview__fill { display: block; height: 100%; width: 100%; background: var(--st-featured); transform: scaleX(0); transform-origin: left; }
.set-preview__none { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-3); color: var(--text-3); font-size: var(--fs-12); }
.basic-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-bottom: var(--s-3); }
.basic-stat { display: flex; align-items: center; gap: 4px; color: var(--st-featured); font-size: var(--fs-12); font-weight: 800; font-variant-numeric: tabular-nums; }
.basic-stat .icon { width: 13px; height: 13px; color: var(--text-2); }
.attrs { display: grid; gap: 5px; }
.attr { display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: var(--s-2); font-size: var(--fs-12); }
.attr__name { color: var(--text-2); }
.attr__bar { width: 100%; height: 5px; }
.attr__value { text-align: right; font-variant-numeric: tabular-nums; }
.attr--stars .bar__fill { fill: var(--st-featured); }
.rating-box__head { text-align: center; margin-bottom: var(--s-2); font-size: var(--fs-13); }
.rating-split { width: 100%; height: 5px; }
.rating-split__neg { fill: hsl(8 80% 64%); }
.rating-split__pos { fill: var(--accent); }
.rating-box__counts { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--text-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.rating-box__spread { text-align: center; font-size: var(--fs-12); margin: var(--s-2) 0 var(--s-1); color: var(--text-2); }
.rating-hist { width: 100%; height: 44px; }
.rating-hist__bar { fill: var(--accent-strong); }
.rating-input { margin-top: var(--s-3); }
.rating-input__label { font-size: var(--fs-12); color: var(--text-2); margin-bottom: var(--s-1); }
.rating-input__scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.rating-input__seg {
  height: 26px; border: 0; border-radius: 3px; background: hsl(0 0% 100% / 0.1); color: var(--text-2); font-size: var(--fs-11); font-weight: 800;
  cursor: pointer; padding: 0; transition: background-color var(--t-hover) ease;
}
.rating-input__seg:hover, .rating-input__seg.is-hover { background: hsl(var(--hue) 100% 78% / 0.55); color: var(--on-pill); }
.rating-input__seg.is-on { background: var(--accent); color: var(--on-pill); }
.rating-input__remove { margin-top: var(--s-2); font-size: var(--fs-12); }
.rating-cannot { margin: var(--s-2) 0 0; font-size: var(--fs-12); color: var(--text-2); text-align: center; }
@media (hover: none) { .rating-input__seg { height: 44px; } }

.set-info {
  display: grid; gap: var(--s-6); padding: var(--s-6) var(--s-4); background: var(--bg-1);
}
@media (min-width: 900px) { .set-info { grid-template-columns: minmax(0, 1fr) 320px; padding: var(--s-6) var(--s-8); } }
.set-info__title { font-size: var(--fs-16); margin: 0 0 var(--s-3); }
.set-info__main .prose { color: var(--text-2); margin-bottom: var(--s-5); overflow-wrap: anywhere; }
.set-info__main .prose h3, .set-info__main .prose h4, .set-info__main .prose h5 { font-family: var(--font-ui); margin-top: var(--s-4); }
.set-info__main .prose ul { list-style: disc; padding-left: 1.2em; }
.set-info__main .prose ol { list-style: decimal; padding-left: 1.2em; }
.set-info__main .prose blockquote { margin: 0 0 var(--s-3); padding-left: var(--s-3); border-left: 3px solid var(--line); }
.set-info__main .prose pre { overflow-x: auto; padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-2); }
.featured-note { margin: 0 0 var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: hsl(44 100% 66% / 0.08); border-left: 3px solid var(--st-featured); }
.featured-note blockquote { margin: 0 0 var(--s-2); font-family: var(--font-text); font-weight: 400; }
.featured-note figcaption { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-12); color: var(--text-2); }
.library-attr { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-2); color: var(--badge-library); }
.library-attr p { margin: 0; }
.set-info__meta { display: grid; gap: var(--s-4); align-content: start; }
.meta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.meta-item__title { font-size: var(--fs-14); margin: 0 0 var(--s-1); }
.meta-item__body { color: hsl(var(--hue) 28% 86% / 0.85); overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 2px var(--s-2); }
.sha { font-size: var(--fs-11); color: var(--text-3); }
.set-charts { padding: var(--s-5) var(--s-4) var(--s-6); background: var(--bg-1); border-top: 1px solid var(--bg-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
@media (min-width: 900px) { .set-charts { padding: var(--s-5) var(--s-8) var(--s-6); } }
.charts-table, .history-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.charts-table th, .charts-table td, .history-table th, .history-table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--bg-3); white-space: nowrap; }
.charts-table thead th, .history-table thead th { color: var(--text-mute); font-size: var(--fs-12); font-weight: 700; }
.charts-table tbody th { font-weight: 700; }
.charts-table tr.is-selected { background: var(--bg-2); }
.set-comments { margin-top: var(--s-6); }
.set-comments:empty { display: none; }

.interstitial { text-align: center; margin-top: var(--s-12); padding: var(--s-12) var(--s-6); }
.interstitial__icon { width: 44px; height: 44px; margin: 0 auto var(--s-3); color: var(--badge-explicit); }
.interstitial__text { color: var(--text-2); font-family: var(--font-text); font-weight: 400; }
.interstitial__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-5); }

.history__title { font-size: var(--fs-24); }
.history__sub { font-size: var(--fs-16); margin-top: var(--s-6); }
.history-events { display: grid; gap: var(--s-2); color: var(--text-2); }
.history-events__what { color: var(--text-1); }

/* ─── profile ─────────────────────────────────────────────────────────────── */
.page--profile { padding-top: var(--s-4); }
.profile-header { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-1); }
.profile-header__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.profile-header__veil { position: absolute; inset: 0; background: linear-gradient(180deg, hsl(var(--hue) 14% 7% / 0.2), hsl(var(--hue) 13% 11% / 0.95)); }
.profile-header__inner { position: relative; display: grid; gap: var(--s-4); padding: var(--s-8) var(--s-4) var(--s-5); align-items: end; }
@media (min-width: 900px) { .profile-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--s-12) var(--s-8) var(--s-6); } }
.profile-header__who { min-width: 0; }
.profile-header__name { margin: 0; font-size: var(--fs-30); overflow-wrap: anywhere; }
.profile-header__username { margin: 0 0 var(--s-1); color: var(--text-2); }
.profile-header__joined, .profile-header__mc { margin: 0; color: var(--text-3); font-size: var(--fs-13); }
.mc-name { display: inline-flex; align-items: center; gap: 4px; margin-right: var(--s-2); color: var(--text-1); }
.mc-name__head { width: 20px; height: 20px; border-radius: 3px; image-rendering: pixelated; }
.profile-counts { display: grid; grid-template-columns: repeat(4, auto); gap: var(--s-4); margin: 0; }
.profile-counts dt { color: var(--text-mute); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.04em; }
.profile-counts dd { margin: 0; font-size: var(--fs-20); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .profile-counts { grid-template-columns: repeat(2, auto); } }
.profile-header__links { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.profile-section { margin-top: var(--s-8); }
.profile-section__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-20); }
.profile-section__title .icon { color: var(--accent); }
.profile-section__more { display: flex; justify-content: center; margin-top: var(--s-4); }
.recent-comments { display: grid; gap: var(--s-3); }
.recent-comments__item { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-1); }
.recent-comments__meta { font-size: var(--fs-12); color: var(--text-mute); margin-bottom: var(--s-1); }
.prose--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── home ────────────────────────────────────────────────────────────────── */
.home-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.home-strip__head .section__title { display: flex; align-items: center; gap: var(--s-2); }
.home-strip__head .section__title .icon { color: var(--accent); }
.home-strip__more { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; white-space: nowrap; }

@keyframes bm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bm-card, .bm-card__strip, .bm-card__body { transition: none; }
}

/* css/modules/help.css */
/* Help pages (03 §1): the hub, install, mapping and the FAQ. Text-column layout, same rhythm as the legal pages. */

.page--help { max-width: var(--max-text); }

.help-index { display: grid; gap: var(--s-4); min-width: 0; }
.help-index > * { min-width: 0; }
.help-index__lead { color: var(--text-2); font-family: var(--font-text); font-weight: 400; }
.help-index__list { display: grid; gap: var(--s-3); min-width: 0; }
.help-index__card a { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); color: inherit; }
.help-index__icon { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; color: var(--accent); }
.help-index__text { display: grid; gap: var(--s-1); min-width: 0; }
.help-index__title { font-weight: 800; font-size: var(--fs-16); color: var(--text-1); }
.help-index__sub { color: var(--text-3); font-size: var(--fs-13); font-family: var(--font-text); font-weight: 400; }

.help-links { display: grid; gap: var(--s-1); }
.help-links a { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; color: var(--link); }
.help-links .icon { flex: 0 0 auto; color: var(--text-mute); }

.help-page { display: grid; gap: var(--s-6); min-width: 0; }
.help-page > * { min-width: 0; }
.help-page__eyebrow { margin: 0 0 var(--s-2); font-size: var(--fs-13); }
.help-page__eyebrow a { display: inline-flex; align-items: center; gap: 4px; }
.help-page__eyebrow .icon { width: 14px; height: 14px; }
.help-page__title { font-size: clamp(var(--fs-24), 4vw, var(--fs-40)); margin-bottom: var(--s-3); overflow-wrap: anywhere; }
.help-page__lead { color: var(--text-2); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-18); margin: 0; }

.help-toc { padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-1); }
.help-toc__title { font-size: var(--fs-12); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--s-2); }
.help-toc ol { display: grid; gap: var(--s-1); padding-left: 1.2em; }

.help-section { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.help-section__title { font-size: var(--fs-20); margin-bottom: var(--s-3); overflow-wrap: anywhere; }
.help-section h3 { font-size: var(--fs-16); margin: var(--s-4) 0 var(--s-2); }
.help-section p { color: var(--text-2); font-family: var(--font-text); font-weight: 400; margin: 0 0 var(--s-3); }
.help-section p:last-child { margin-bottom: 0; }

.help-steps, .help-list { display: grid; gap: var(--s-2); margin: 0 0 var(--s-3); padding-left: 1.3em; color: var(--text-2); font-family: var(--font-text); font-weight: 400; }
.help-steps { list-style: decimal; }
.help-list { list-style: disc; }
.help-steps li::marker, .help-list li::marker { color: var(--text-mute); }

.help-note { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-1); }
.help-note .icon { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

.help-path { margin: 0 0 var(--s-3); }
.help-path code, .help-list code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-1); font-size: var(--fs-13); }

.help-page__foot { padding-top: var(--s-5); border-top: 1px solid var(--bg-3); }
.help-page__foot h2 { font-size: var(--fs-16); margin-bottom: var(--s-2); }

/* /help/install#helper — the QwU Workshop Helper download list (wave I1). Each row is one release file;
   a file that is not built yet keeps its row and says so, rather than turning into a dead link. */
.help-helper { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); }
.help-helper li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 36px; padding: var(--s-1) 0; border-bottom: 1px solid var(--bg-3); }
.help-helper li:last-child { border-bottom: 0; }
.help-helper a { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--link); }
.help-helper .icon { flex: 0 0 auto; color: var(--text-mute); }
.help-helper__name { overflow-wrap: anywhere; }
.help-helper__size { margin-left: auto; color: var(--text-mute); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.help-helper__soon { margin-left: auto; color: var(--text-mute); font-size: var(--fs-12); font-style: italic; }

/* css/modules/legal.css */
/* Legal and rules pages, the notice and counter-notice forms and the case page (04 §7, §10, 08 §A9). */

.page--text { max-width: var(--max-text); }

.legal-doc__head { margin-bottom: var(--s-6); }
.legal-doc__eyebrow { font-size: var(--fs-13); }
.legal-doc__title { font-size: var(--fs-30); margin: var(--s-2) 0; }
.legal-doc__meta { color: var(--text-mute); font-size: var(--fs-13); }
.legal-doc__lead { color: var(--text-2); font-size: var(--fs-16); }
.legal-doc__foot { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--bg-3); color: var(--text-3); font-size: var(--fs-13); }

.legal-toc { padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-1); margin-bottom: var(--s-6); }
.legal-toc__title { font-size: var(--fs-14); margin: 0 0 var(--s-2); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.legal-toc ol { display: grid; gap: var(--s-1); padding-left: var(--s-5); font-size: var(--fs-13); }

.legal-body { font-family: var(--font-text); line-height: 1.6; }
.legal-body h1, .legal-body h2, .legal-body h3, .legal-body h4 { font-family: var(--font-ui); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal-body h2 { margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-20); }
.legal-body h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-16); }
.legal-body h4 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-14); color: var(--text-2); }
.legal-body p, .legal-body li { color: var(--text-2); }
.legal-body p { margin: var(--s-3) 0; }
.legal-body ul, .legal-body ol { margin: var(--s-3) 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.legal-body blockquote { margin: var(--s-3) 0; padding-left: var(--s-4); border-left: 3px solid var(--bg-4); color: var(--text-3); }
.legal-body code { font-size: 0.9em; background: var(--bg-2); padding: 1px 4px; border-radius: var(--r-sm); }
.legal-anchor { margin-left: var(--s-2); color: var(--bg-4); text-decoration: none; font-weight: 400; }
.legal-anchor:hover { color: var(--accent); }
.legal-para { margin: var(--s-3) 0; color: var(--text-2); }

.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); margin: var(--s-4) 0; }
.legal-table th, .legal-table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--bg-3); vertical-align: top; }
.legal-table th { color: var(--text-3); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; }

.legal-todo { background: var(--warn); color: var(--on-pill); padding: 1px 6px; border-radius: var(--r-sm); font-weight: 700; }

/* 08 §A9: the postal address is only ever shown through this disclosure control. */
.legal-address { display: inline-block; margin: var(--s-1) 0; }
.legal-address > summary { cursor: pointer; color: var(--link); font-weight: 600; }
.legal-address__lines { display: block; margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--bg-2); font-style: normal; color: var(--text-1); }

.legal-index { display: grid; gap: var(--s-4); min-width: 0; }
.legal-index > * { min-width: 0; }
.legal-index__lead { color: var(--text-2); }
.legal-index__list { display: grid; gap: var(--s-2); min-width: 0; }
.legal-index__card a { display: block; padding: var(--s-4); color: inherit; }
.legal-index__card h2 { margin: 0 0 var(--s-1); font-size: var(--fs-16); }
.legal-index__card p { color: var(--text-3); font-size: var(--fs-13); margin: 0; }

.legal-page { display: grid; gap: var(--s-4); }
.legal-where { padding: var(--s-4); }
.legal-where__list { display: grid; gap: var(--s-2); padding-left: var(--s-5); font-size: var(--fs-14); }
.legal-warning { align-items: flex-start; }

.legal-form { padding: var(--s-5); display: grid; gap: var(--s-6); }
.legal-form__step h2 { font-size: var(--fs-16); margin: 0 0 var(--s-3); }
.legal-form__note { color: var(--warn); font-size: var(--fs-13); }
.legal-form__actions { display: grid; gap: var(--s-2); }
.legal-form__error { color: var(--danger); font-size: var(--fs-13); }
.legal-check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-13); color: var(--text-2); margin-bottom: var(--s-2); }
.legal-check input { margin-top: 3px; flex: 0 0 auto; }
.legal-radio { border: 0; padding: 0; margin: 0 0 var(--s-2); }
.legal-radio legend { font-weight: 700; font-size: var(--fs-13); margin-bottom: var(--s-2); }
.legal-rows { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.legal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto; gap: var(--s-2); align-items: center; }
.legal-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.is-optional .field__label::after { content: " (optional)"; color: var(--text-mute); font-weight: 400; }

.legal-success { padding: var(--s-5); }
.legal-success__ref { font-size: var(--fs-18); font-weight: 800; font-variant-numeric: tabular-nums; }

.legal-case { padding: var(--s-5); display: grid; gap: var(--s-4); }
.legal-case__status { font-weight: 700; color: var(--accent); }
.legal-case__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); font-size: var(--fs-13); }
.legal-case__facts dt { color: var(--text-3); }
.legal-case__facts dd { margin: 0; }
.legal-case__locations { display: grid; gap: var(--s-1); padding-left: var(--s-5); overflow-wrap: anywhere; }
.legal-case__copy { white-space: pre-wrap; padding: var(--s-3); background: var(--bg-2); border-radius: var(--r-sm); font-size: var(--fs-13); overflow-wrap: anywhere; }

/* css/modules/library.css */
/* Styles for the library module (03 §1). Owned by the library builder; bundled after components.css. */
.page--library { padding-top: var(--s-6); }
.library__head { margin-bottom: var(--s-5); }
.library__title { display: flex; align-items: center; gap: var(--s-2); }
.library__title .icon { width: 26px; height: 26px; color: var(--badge-library); }
.library__lead { color: var(--text-2); font-family: var(--font-text); font-weight: 400; max-width: 70ch; }
.library__filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.library__filters .input { flex: 1 1 240px; width: auto; }
.library__filters .select { flex: 0 1 220px; width: auto; }

.track-list { display: grid; gap: var(--s-2); }
.track {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-2); border-radius: var(--r-md); background: var(--bg-1);
}
@media (min-width: 900px) { .track { grid-template-columns: 64px minmax(0, 1fr) auto auto; } }
.track__thumb { position: relative; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-sm); }
.track__thumb img, .track__ph { width: 100%; height: 100%; object-fit: cover; }
.track__play { inset: 0; opacity: 1; background: hsl(var(--hue) 14% 7% / 0.45); }
.track__play .ring { width: 44px; height: 44px; }
.track__main { min-width: 0; }
.track__title { margin: 0; font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track__artist { margin: 0; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track__facts { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.track__facts span { display: inline-flex; align-items: center; gap: 4px; }
.track__facts .icon { width: 13px; height: 13px; }
.track__maps { grid-column: 2; margin: 0; color: var(--text-mute); font-size: var(--fs-12); }
@media (min-width: 900px) { .track__facts, .track__maps { grid-column: auto; } }

.track-hero { display: grid; gap: var(--s-5); margin-top: var(--s-3); }
@media (min-width: 700px) { .track-hero { grid-template-columns: 192px minmax(0, 1fr); } }
.track-hero__cover { width: 192px; height: 192px; overflow: hidden; border-radius: var(--r-md); }
.track-hero__cover img, .track-hero__ph { width: 100%; height: 100%; object-fit: cover; }
.track-hero__main { min-width: 0; }
.track-hero__title { margin: var(--s-2) 0 var(--s-1); overflow-wrap: anywhere; }
.track-hero__artist { font-size: var(--fs-18); color: var(--text-2); }
.track-hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--text-3); }
.track-hero__facts span { display: inline-flex; align-items: center; gap: 4px; }
.track-hero__preview { position: relative; max-width: 360px; margin: var(--s-3) 0; border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; }
.track-hero__preview .play { position: static; opacity: 1; width: 100%; height: 44px; }
.track-hero__preview .ring { display: none; }
.track-hero__licence { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-4); }
.track-hero__licence dt { color: var(--text-mute); }
.track-hero__licence dd { margin: 0; overflow-wrap: anywhere; }

/* css/modules/minecraft.css */
/* Styles for the minecraft module: the /link approval page. Uses .auth-switch / .auth-callout from account.css. */

.page--link { display: grid; gap: var(--s-5); align-content: start; }

.link-head { display: flex; align-items: flex-start; gap: var(--s-4); }
.link-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 120% at 0% 0%, hsl(var(--hue) 60% 40% / 0.6), var(--bg-2));
  color: var(--accent);
}
.link-head__icon .icon { width: 24px; height: 24px; }
.link-head__title { margin-bottom: var(--s-2); }
.link-head__lead { color: var(--text-2); font-family: var(--font-text); font-weight: 400; margin: 0; max-width: 60ch; }

.link-guest { text-align: center; padding: var(--s-8) var(--s-6); }
.link-guest__title { font-size: var(--fs-20); }
.link-guest__text { color: var(--text-2); margin-bottom: var(--s-5); }

.link-code .field__label { display: block; margin-bottom: var(--s-2); }
.link-code__row { display: flex; gap: var(--s-2); }
.link-code__input {
  min-height: 52px;
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--bg-2);
}
.link-code__input::placeholder { letter-spacing: 0.18em; color: var(--text-mute); }
.link-code .field__hint { margin: var(--s-2) 0 var(--s-3); }
.link-code .auth-callout { margin: 0; }
.link-code .btn--lg { min-height: 52px; }
@media (max-width: 520px) {
  .link-code__row { flex-direction: column; }
}

.link-card { display: grid; gap: var(--s-4); animation: fade-in var(--t-fade) ease-out; }
/* Component display rules must not defeat the hidden attribute the client toggles. */
.page--link [hidden], .page--link[hidden] { display: none !important; }
.link-card > * { margin: 0; }
.link-card__eyebrow {
  color: var(--accent);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.link-card__identity { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.link-card__head {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--r-md);
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--bg-3), var(--shadow);
}
.link-card__who { min-width: 0; }
.link-card__title { margin: 0; font-size: var(--fs-24); overflow-wrap: anywhere; }
.link-card__uuid { margin: var(--s-1) 0 0; color: var(--text-mute); font-size: var(--fs-12); overflow-wrap: anywhere; }
.link-card__uuid-label { font-weight: 800; letter-spacing: 0.04em; }
.link-card__cooldown { color: var(--warn); font-size: var(--fs-13); }
.link-card__section { display: grid; gap: var(--s-3); }
.link-card__section > .auth-callout { margin: 0; }

.link-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.link-facts__item { min-width: 0; }
.link-facts__item--wide { grid-column: 1 / -1; padding-top: var(--s-3); border-top: 1px solid var(--bg-4); }
.link-facts dt { color: var(--text-mute); font-size: var(--fs-11); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.link-facts dd { margin: 0; color: var(--text-1); font-weight: 700; overflow-wrap: anywhere; }
.link-facts__code { font-size: var(--fs-18); letter-spacing: 0.12em; }
.link-facts__label { color: var(--text-2); font-family: var(--font-text); font-weight: 400; }

.link-options { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-1); }

.link-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); }
@media (max-width: 520px) {
  .link-card__actions { flex-direction: column-reverse; }
  .link-card__actions .btn { width: 100%; }
}

.link-result { text-align: center; padding: var(--s-8) var(--s-6); animation: fade-in var(--t-fade) ease-out; }
.link-result:focus { outline: none; }
.link-result h2 { margin-bottom: var(--s-2); }
.link-result p { color: var(--text-2); margin: 0 auto var(--s-5); max-width: 48ch; }
.link-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-2);
}
.link-result__icon .icon { width: 28px; height: 28px; }
.link-result__icon--ok { background: hsl(88 70% 52% / 0.16); color: var(--ok); }

/* css/modules/moderation.css */
/* Moderation UI (04 §9): dense two-column layout, tables, tiles, the action dialog, the report dialog and
   /account/standing. Desktop-first, usable on a phone (the sidebar becomes a scrolling row). */

.page--mod { max-width: var(--max-wide); }

.mod-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 900px) {
  .mod-layout { grid-template-columns: 208px 1fr; gap: var(--s-6); align-items: start; }
}

/* `min-width: 0` keeps the nav from forcing the `1fr` grid column to its full min-content width, which scrolled
   every /mod page sideways to ~1300 px on a phone. */
.mod-nav { position: sticky; top: calc(var(--header-h) + var(--s-2)); min-width: 0; }
/* Both grid items need `min-width: 0`, or a wide nav strip or a wide table in a `.table-wrap` resolves the
   single `1fr` column to its min-content width and scrolls the whole page sideways on a phone. */
.mod-main { min-width: 0; }
.mod-main .table-wrap, .mod-panel { min-width: 0; }
.mod-nav ul { display: flex; gap: var(--s-1); overflow-x: auto; min-width: 0; padding-bottom: var(--s-2); }
@media (min-width: 900px) {
  .mod-nav ul { display: grid; overflow: visible; }
}
.mod-nav__link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: 700;
  font-size: var(--fs-13);
  white-space: nowrap;
}
.mod-nav__link:hover { background: var(--bg-2); color: var(--text-1); }
.mod-nav__link.is-active { background: var(--bg-3); color: var(--text-1); box-shadow: inset 2px 0 0 var(--accent); }

.mod-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.mod-head__title { font-size: var(--fs-24); margin: 0; }
.mod-search { margin-left: auto; min-width: 240px; }

.mod-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.mod-tile {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text-2);
}
.mod-tile:hover { background: var(--bg-3); color: var(--text-1); }
.mod-tile__icon { color: var(--accent); }
.mod-tile__value { font-size: var(--fs-30); font-weight: 800; color: var(--text-1); line-height: 1.1; }
.mod-tile__label { font-size: var(--fs-12); }
.mod-tile--danger { box-shadow: inset 0 0 0 1px var(--danger); }
.mod-tile--danger .mod-tile__value { color: var(--danger); }

.mod-panel { padding: var(--s-4); margin-bottom: var(--s-4); }
.mod-panel__title { margin: 0 0 var(--s-3); font-size: var(--fs-16); }
.mod-panel--danger { box-shadow: inset 0 0 0 1px var(--danger); }
.mod-note { color: var(--text-3); font-size: var(--fs-13); margin-bottom: var(--s-3); }
.mod-empty { color: var(--text-mute); padding: var(--s-6); text-align: center; }

.mod-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.mod-table th, .mod-table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--bg-3); vertical-align: top; }
.mod-table th { color: var(--text-3); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; }
.mod-table tr:hover td { background: var(--bg-2); }
.mod-table code { font-size: var(--fs-12); color: var(--text-2); }
.mod-table__data, .mod-table__body { max-width: 420px; overflow-wrap: anywhere; color: var(--text-3); }
.mod-table tr.is-overdue td { box-shadow: inset 2px 0 0 var(--danger); }
.mod-table tr.is-muted td { opacity: 0.6; }

.mod-tabs { display: flex; gap: var(--s-1); margin-bottom: var(--s-3); }
.mod-tab { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--text-3); font-weight: 700; font-size: var(--fs-13); }
.mod-tab.is-active { background: var(--bg-3); color: var(--text-1); }

.mod-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-4); }
.mod-filters .input, .mod-filters .select { width: auto; min-width: 140px; }

.mod-groups { display: grid; gap: var(--s-3); }
.mod-group { padding: var(--s-4); }
.mod-group.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }
.mod-group__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.mod-group__title { margin: 0; font-size: var(--fs-16); }
.mod-group__count { color: var(--text-3); font-size: var(--fs-12); }
.mod-group__age { margin-left: auto; color: var(--text-mute); font-size: var(--fs-12); }
.mod-group__age.is-overdue { color: var(--danger); font-weight: 700; }
.mod-group__reasons { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: var(--s-2) 0; }
.tag { padding: 1px 8px; border-radius: var(--r-pill); background: var(--bg-3); color: var(--text-2); font-size: var(--fs-12); }
.mod-group__reports { display: grid; gap: var(--s-2); margin: var(--s-2) 0; font-size: var(--fs-13); }
.mod-group__text { color: var(--text-3); }
.mod-group__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
.mod-group__assignee { color: var(--text-mute); font-size: var(--fs-12); }
.mod-snapshot, .mod-result { max-height: 240px; overflow: auto; padding: var(--s-2); background: var(--bg-0); border-radius: var(--r-sm); font-size: var(--fs-12); color: var(--text-3); }

.pill--p0 { background: var(--danger); color: hsl(355 40% 10%); }
.pill--p1 { background: var(--warn); color: var(--on-pill); }
.pill--p2 { background: var(--st-pending); color: var(--on-pill); }
.pill--p3 { background: var(--bg-4); color: var(--text-2); }

.mod-review { display: grid; gap: var(--s-3); }
.mod-review__head { display: flex; align-items: baseline; gap: var(--s-3); }
.mod-review__head h2 { margin: 0; font-size: var(--fs-18); }
.mod-review__wait { margin-left: auto; color: var(--text-mute); font-size: var(--fs-12); }
.mod-review__meta, .mod-review__audio, .mod-review__credits, .mod-review__desc { font-size: var(--fs-13); color: var(--text-2); margin: var(--s-2) 0; }
.mod-review__charts { display: flex; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-12); color: var(--text-3); }
.mod-review__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }

.mod-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); font-size: var(--fs-13); }
.mod-facts dt { color: var(--text-3); }
.mod-facts dd { margin: 0; color: var(--text-1); overflow-wrap: anywhere; }

.mod-actions-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.mod-form { display: grid; gap: var(--s-2); }
.mod-form--inline { grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); align-items: end; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); }
.mod-form__actions { display: flex; gap: var(--s-3); align-items: center; }
.mod-case__explanation, .mod-case__copy { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-13); }
.mod-gate { color: var(--danger); font-size: var(--fs-13); padding-left: var(--s-4); }

.mod-statements { display: grid; gap: var(--s-3); font-size: var(--fs-13); }
.mod-statements p { color: var(--text-2); }
.mod-appeals { display: grid; gap: var(--s-3); }
.mod-appeal__meta { color: var(--text-mute); font-size: var(--fs-12); }
.mod-appeal__statement { font-weight: 700; }
.mod-appeal__facts, .mod-appeal__body { color: var(--text-2); white-space: pre-wrap; font-size: var(--fs-13); }
.mod-mc { display: grid; gap: var(--s-1); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.mod-mc__masked { color: var(--text-mute); }

.dialog--wide { width: min(680px, calc(100vw - 32px)); }
.mod-action__target { color: var(--text-3); font-size: var(--fs-12); }
.mod-action__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.mod-action .dialog__body { max-height: 70vh; overflow-y: auto; }

.artist-status { padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 700; }
.artist-status--allowed { background: hsl(158 62% 60% / 0.2); color: var(--st-community); }
.artist-status--allowed_with_exceptions { background: hsl(40 100% 58% / 0.18); color: var(--warn); }
.artist-status--disallowed { background: hsl(355 85% 60% / 0.18); color: var(--danger); }

/* Report dialog (04 §6.1) */
.report-dialog .dialog__body { display: grid; gap: var(--s-3); }
.report-form__lead { color: var(--text-3); font-size: var(--fs-13); }
.report-form__legal { font-size: var(--fs-13); }
.report-form__legal-link { font-weight: 700; }

/* /account/standing */
.standing-list { display: grid; gap: var(--s-2); padding-left: var(--s-4); }
.standing-ok { display: flex; align-items: center; gap: var(--s-2); color: var(--ok); font-weight: 700; }
.standing-sub { font-size: var(--fs-14); margin-top: var(--s-4); }
.standing-statements { display: grid; gap: var(--s-4); }
.standing-statement { padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-2); }
.standing-statement h3 { margin: 0 0 var(--s-1); font-size: var(--fs-16); }
.standing-statement__scope { font-weight: 700; }
.standing-statement__meta { color: var(--text-mute); font-size: var(--fs-12); }
.standing-statement__facts { color: var(--text-2); white-space: pre-wrap; margin: var(--s-2) 0; }
.standing-statement__redress { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }

/* css/modules/social.css */
/* Styles for the social module (03 §4.3, research osu-lazer-ui §4, owner screenshot 05): comments component, comment
   permalink, notifications bell dropdown and /notifications. Owned by the social builder; bundled after components.css. */

/* ─── section frame ───────────────────────────────────────────────────────── */
.comments {
  margin-top: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  overflow: hidden;
}
.comments__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-3);
}
.comments__title { margin: 0; font-size: var(--fs-20); font-weight: 700; }
.comments__count { font-size: var(--fs-13); }

/* ─── editor ──────────────────────────────────────────────────────────────── */
.comments__editor {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-5) var(--s-5);
}
.comments__editor .comment-editor { grid-column: 1 / -1; }
.comment-editor { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: start; }
.comment-editor--reply, .comment-editor--edit { grid-template-columns: 1fr; margin-top: var(--s-2); }
.comment-editor__avatar { width: 40px; height: 40px; }
.avatar--ghost { display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--bg-3); }
.avatar--ghost .icon { width: 18px; height: 18px; }
/* The one-time acceptance shown in place of the editor (Terms 3.1): the same box, two real checkboxes. */
.comments__editor--accept { align-items: start; }
.cmt-accept {
  display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-3);
  box-shadow: inset 0 0 0 1px hsl(var(--hue) 62% 56% / 0.35);
}
.cmt-accept__title { margin: 0; font-size: var(--fs-16); color: var(--text-1); }
.cmt-accept__lead { margin: 0 0 var(--s-1); color: var(--text-2); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-14); }
.cmt-accept__check { display: flex; align-items: flex-start; gap: var(--s-3); }
.cmt-accept__check input {
  appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 5px; background: var(--bg-0); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line); transition: background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.cmt-accept__check input:checked {
  background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 2px var(--accent-strong);
}
.cmt-accept__check input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.cmt-accept__check label { color: var(--text-2); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-14); line-height: 1.45; cursor: pointer; }
.cmt-accept__check a { margin-left: var(--s-2); font-size: var(--fs-13); white-space: nowrap; }
.cmt-accept__error { margin: 0; color: var(--danger); font-size: var(--fs-13); font-weight: 700; }
.cmt-accept button { justify-self: start; }

.comment-editor__box {
  display: grid;
  border-radius: var(--r-md);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 2px var(--bg-3);
  transition: box-shadow var(--t-hover) ease;
}
.comment-editor__box:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.comment-editor__input {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3);
  border: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--bg-2);
  color: var(--text-1);
  font-family: var(--font-text);
  line-height: 1.5;
  resize: none;
}
.comment-editor__input:focus { outline: none; }
.comment-editor__input::placeholder { color: var(--text-mute); }
.comment-editor__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-2);
}
.comment-editor__hint { margin-right: auto; color: var(--text-mute); font-size: var(--fs-12); }
.comment-editor__count { color: var(--text-mute); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.comment-editor__count.is-over { color: var(--danger); }
.comment-editor__error { flex-basis: 100%; color: var(--danger); font-size: var(--fs-12); text-align: right; }
.comment-editor__error:empty { display: none; }
.comment-editor__spinner { display: none; width: 14px; height: 14px; }
.comment-editor[aria-busy="true"] .comment-editor__spinner { display: inline-block; animation: comments-spin 800ms linear infinite; }
@keyframes comments-spin { to { transform: rotate(360deg); } }
.comments__notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0; min-height: 40px; color: var(--text-2); }
.comments__notice p { margin: 0; }

/* ─── pinned, toolbar, list, footer ───────────────────────────────────────── */
.comments__pinned { background: var(--bg-2); border-top: 1px solid var(--bg-3); }
.comments__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  min-height: 48px;
  padding: var(--s-2) var(--s-5);
  background: var(--bg-2);
}
.comments__sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.comments__sort-label { margin-right: var(--s-2); color: var(--text-2); font-weight: 700; font-size: var(--fs-13); }
.sort-tab {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-weight: 700;
  font-size: var(--fs-13);
  text-decoration: none;
}
.sort-tab:hover { color: var(--text-1); }
.sort-tab.is-active { background: var(--bg-4); color: var(--text-1); }
.comments__staff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.comments__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-weight: 700;
  font-size: var(--fs-13);
  cursor: pointer;
}
.comments__toggle:hover { background: var(--bg-3); color: var(--text-1); }
.comments__toggle .icon { width: 14px; height: 14px; }
.comments__deleted-count { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-mute); font-size: var(--fs-12); font-weight: 700; }
.comments__deleted-count .icon { width: 14px; height: 14px; }
.comments__list > .comment, .comments__pinned > .comment { border-bottom: 1.5px solid var(--bg-0); }
.comments__footer { display: flex; justify-content: center; padding: var(--s-3) var(--s-5) var(--s-5); }
.comments__footer:empty { display: none; }
.comments__empty { margin: 0; padding: var(--s-4) 0; color: var(--text-mute); }
.comments__resumed { margin: 0; padding: var(--s-3) var(--s-5) 0; font-size: var(--fs-13); }
.show-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 36px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.show-more:hover { background: var(--bg-4); color: var(--text-1); }
.show-more .icon { width: 12px; height: 12px; }
.show-more[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ─── comment row ─────────────────────────────────────────────────────────── */
.comment { position: relative; padding: var(--s-4) var(--s-5) var(--s-3) 0; }
.comment .comment { padding: var(--s-3) 0 0; }
.comment__row {
  display: grid;
  grid-template-columns: 64px 40px minmax(0, 1fr);
  grid-template-areas:
    "vote avatar head"
    "vote avatar body"
    ".    avatar expand"
    ".    .      foot"
    ".    .      slot";
  column-gap: var(--s-3);
  align-items: start;
}
.comment .comment .comment__row { grid-template-columns: 48px 40px minmax(0, 1fr); }
.comment__vote { grid-area: vote; display: flex; justify-content: flex-end; padding-top: 10px; }
.comment__avatar, .comment__avatar-link { grid-area: avatar; width: 40px; height: 40px; }
.comment__avatar-link { display: block; border-radius: var(--r-pill); }
.comment__avatar-link img.comment__avatar { display: block; }
.comment__avatar-link .avatar--initial, .comment__avatar.avatar--initial { display: inline-flex; align-items: center; justify-content: center; }
.comment__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); min-height: 22px; }
.comment__body, .comment__placeholder { grid-area: body; }
.comment__row > .comment-editor--edit { grid-area: body; }
.comment__expand { grid-area: expand; justify-self: start; margin-top: 2px; font-size: var(--fs-12); }
.comment__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); margin-top: var(--s-1); font-size: var(--fs-12); }
.comment__slot { grid-area: slot; }
.comment__slot:empty { display: none; }

.comment__user { color: var(--link); font-weight: 800; font-size: var(--fs-14); text-decoration: none; }
.comment__user:hover { color: var(--accent); }
.comment__user--deleted, .comment__user--unknown, .comment__user--none { color: var(--text-3); }
.comment-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--text-2);
  color: var(--bg-1);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.comment-badge--admin { background: var(--danger); color: hsl(355 40% 10%); }
.comment-badge--mod { background: var(--st-community); color: var(--on-pill); }
.comment-badge--curator { background: var(--st-featured); color: var(--on-pill); }
.comment__parent, .comment__flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-2);
  font-weight: 800;
  font-size: var(--fs-13);
  text-decoration: none;
}
.comment__parent:hover { color: var(--text-1); }
.comment__parent .icon, .comment__flag .icon { width: 14px; height: 14px; }
.comment__flag--deleted, .comment__flag--hidden, .comment__flag--review { color: var(--warn); }

.comment__body { margin-top: 2px; color: var(--text-1); overflow-wrap: anywhere; max-width: 80ch; }
.comment__body p { margin: 0 0 var(--s-2); }
.comment__body p:last-child { margin-bottom: 0; }
.comment__body ul { list-style: disc; padding-left: 1.2em; margin: 0 0 var(--s-2); }
.comment__body ol { list-style: decimal; padding-left: 1.2em; margin: 0 0 var(--s-2); }
.comment__body blockquote { margin: 0 0 var(--s-2); padding-left: var(--s-3); border-left: 3px solid var(--line); color: var(--text-2); }
.comment__body pre { overflow-x: auto; margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--bg-0); }
.comment__body code { font-size: 0.92em; }
.comment__body a { color: var(--link); }
.comment__body a:hover { color: var(--accent); }
.comment__body .mention { font-weight: 600; text-decoration: none; }
.comment__body.is-clamped { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.comment__placeholder { margin: 2px 0 0; color: var(--text-mute); font-style: italic; }
.comment__row--placeholder .comment__head { color: var(--text-mute); }

.comment__time { color: var(--text-mute); text-decoration: none; }
.comment__time:hover { color: var(--text-2); }
.comment__meta { color: var(--text-mute); }
.comment__meta--deleted { color: var(--warn); }
.comment__meta-user { color: var(--text-2); font-weight: 700; }
.comment__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-weight: 800;
  font-size: var(--fs-12);
  text-decoration: none;
  cursor: pointer;
}
.comment__action:hover { color: var(--accent); }
.comment__action .icon { display: none; width: 14px; height: 14px; }
.comment__more { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); }
.comment__more-toggle { display: none; }
.comment__more-panel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); }

.vote-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: var(--fs-13);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px transparent;
  transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease, color var(--t-hover) ease;
}
button.vote-pill { cursor: pointer; }
button.vote-pill:hover { box-shadow: inset 0 0 0 2px var(--ok); }
.vote-pill.is-voted { background: var(--ok); color: var(--on-pill); }
button.vote-pill.is-voted:hover { background: hsl(88 60% 42%); }
.vote-pill--own { background: transparent; box-shadow: inset 0 0 0 1px var(--bg-4); color: var(--text-2); }
.vote-pill[aria-busy="true"] { opacity: 0.6; }

.comment--deleted > .comment__row { opacity: 0.6; }
.comment.is-highlighted > .comment__row { border-radius: var(--r-md); box-shadow: 0 0 0 2px var(--accent); background: var(--bg-2); padding: var(--s-2) 0; }
.comment.is-new > .comment__row { animation: comments-flash 1.2s var(--ease-out); }
@keyframes comments-flash { from { background: hsl(var(--hue) 60% 50% / 0.18); } to { background: transparent; } }

/* ─── replies ─────────────────────────────────────────────────────────────── */
.replies-toggle, .replies-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-2) 0 0 calc(64px + 40px + var(--s-3) * 2);
  min-height: 28px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.comment .comment .replies-toggle, .comment .comment .replies-more { margin-left: calc(48px + 40px + var(--s-3) * 2); }
.replies-toggle:hover, .replies-more:hover { background: var(--bg-4); color: var(--text-1); }
.replies-toggle .icon, .replies-more .icon { width: 12px; height: 12px; transition: transform var(--t-bar) ease; }
.replies-toggle[aria-expanded="true"] .replies-toggle__chevron { transform: rotate(180deg); }
.replies-more[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.comment__replies { padding-left: 20px; }
.comment__replies--flat { padding-left: 0; }
.comment__replies:empty { display: none; }

/* ─── permalink page ──────────────────────────────────────────────────────── */
.page--comment { max-width: 980px; }
.comments--permalink { margin-top: var(--s-3); }
.comments__parents { padding-bottom: var(--s-2); border-bottom: 1px solid var(--bg-3); }
.comment--ancestor { opacity: 0.85; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.comments--permalink .comments__footer { margin: 0; }

/* ─── phones (review: dedicated mobile layout) ────────────────────────────── */
@media (max-width: 899px) {
  .comments { border-radius: var(--r-md); }
  .comments__head, .comments__editor, .comments__toolbar { padding-left: var(--s-3); padding-right: var(--s-3); }
  .comments__editor { grid-template-columns: 32px 1fr; }
  .comment-editor { grid-template-columns: 32px 1fr; }
  .comment-editor--reply, .comment-editor--edit { grid-template-columns: 1fr; }
  .comment-editor__avatar { width: 32px; height: 32px; }
  .comment-editor__hint { flex-basis: 100%; }
  .comment { padding: var(--s-3) var(--s-3) var(--s-2); }
  .comment__row, .comment .comment .comment__row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "avatar head"
      "body   body"
      "expand expand"
      "foot   foot"
      "slot   slot";
    column-gap: var(--s-2);
  }
  .comment__vote { grid-area: foot; justify-self: start; align-self: start; position: relative; z-index: 1; padding-top: 15px; }
  .comment__foot { padding-left: 56px; min-height: 44px; column-gap: var(--s-2); }
  .comment__avatar, .comment__avatar-link { width: 32px; height: 32px; }
  .comment__action { min-height: 44px; padding: 0 4px; justify-content: center; }
  .comment__more-toggle { min-width: 44px; }
  .comment__more-toggle { display: inline-flex; }
  .comment__more-toggle .icon { display: inline-block; width: 18px; height: 18px; }
  .comment__more-panel {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    min-width: 180px;
    padding: var(--s-2);
    border-radius: var(--r-md);
    background: var(--bg-2);
    box-shadow: var(--shadow-lifted);
  }
  .comment__more.is-open .comment__more-panel { display: flex; }
  .comment__more-panel .comment__action { justify-content: flex-start; gap: var(--s-2); padding: 0 var(--s-3); border-radius: var(--r-sm); }
  .comment__more-panel .comment__action .icon { display: inline-block; }
  .comment__more-panel .comment__action:hover { background: var(--bg-4); }
  .replies-toggle, .replies-more, .comment .comment .replies-toggle, .comment .comment .replies-more { margin-left: 40px; min-height: 36px; }
  /* Only level 1 is indented; deeper levels are marked by a 2 px line instead of more indentation (review). */
  .comment__replies { padding-left: 12px; }
  .comment__replies .comment__replies { padding-left: 0; }
  .comment__replies .comment__replies > .comment > .comment__row { padding-left: 10px; box-shadow: inset 2px 0 0 var(--line); }
  .comment .comment { padding-right: 0; }
}

/* ─── notifications ───────────────────────────────────────────────────────── */
.bell-menu > summary.bell { position: relative; }
.bell-menu__panel { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.bell-menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--bg-4); }
.menu__panel .bell-menu__read-all { width: auto; min-height: 28px; padding: 0 var(--s-2); color: var(--link); font-size: var(--fs-12); }
.bell-menu__list { max-height: min(420px, 60vh); overflow-y: auto; }
.bell-menu__empty, .notif-empty { margin: 0; padding: var(--s-4); color: var(--text-mute); }
.menu__panel a.bell-menu__all { justify-content: center; border-radius: 0; border-top: 1px solid var(--bg-4); color: var(--link); }
.notif-list { display: grid; }
.notif { border-bottom: 1px solid var(--bg-3); }
.notif:last-child { border-bottom: 0; }
.menu__panel a.notif__link, .notif__link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 10px;
  align-items: start;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border-radius: 0;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
}
a.notif__link:hover { background: var(--bg-3); color: var(--text-1); }
.notif.is-unread .notif__link { color: var(--text-1); background: hsl(var(--hue) 30% 20% / 0.35); }
.notif__avatar { width: 32px; height: 32px; }
.notif__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--bg-3); color: var(--text-2); }
.notif__icon .icon { width: 16px; height: 16px; }
.notif__text { display: grid; gap: 2px; }
.notif__message { font-size: var(--fs-13); line-height: 1.35; overflow-wrap: anywhere; }
.notif__time { color: var(--text-mute); font-size: var(--fs-12); font-weight: 600; }
.notif__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: var(--r-pill); background: var(--accent); }
.notifications-page { padding: 0; overflow: hidden; }
.notifications-page__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--bg-3); }
.notifications-page__head h1 { margin: 0 auto 0 0; font-size: var(--fs-24); }
.notifications-page > p { margin: 0; padding: var(--s-3) var(--s-5); }
.notifications-page .notif__link { padding-left: var(--s-5); padding-right: var(--s-5); }
.notifications-page__more { text-align: center; }
.notifications-page__note { font-size: var(--fs-12); }
@media (max-width: 899px) {
  .bell-menu__panel { position: fixed; top: calc(var(--header-h) + 4px); right: 12px; left: 12px; width: auto; }
}

/* css/modules/spectrum.css */
/* Generated by tools/gen-spectrum-css.ts from client/spectrum.ts. Do not edit. */
/* --star: spectrum colour; --star-glyph: the ★ colour with the best contrast; --star-ring: ring for low-contrast dots. */
.sc-0 { --star: #7fb2ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-1 { --star: #7db5ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-2 { --star: #7bb7ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-3 { --star: #78baff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-4 { --star: #76bcff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-5 { --star: #73bfff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-6 { --star: #71c1ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-7 { --star: #6ec4ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-8 { --star: #6cc6ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-9 { --star: #69c9ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-10 { --star: #66cbff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-11 { --star: #63cdff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-12 { --star: #60cfff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-13 { --star: #5dd2ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-14 { --star: #59d4ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-15 { --star: #56d6ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-16 { --star: #56d9fa; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-17 { --star: #55dbf4; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-18 { --star: #55deee; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-19 { --star: #54e0e8; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-20 { --star: #54e3e2; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-21 { --star: #54e5dc; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-22 { --star: #53e8d6; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-23 { --star: #53eacf; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-24 { --star: #52edc8; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-25 { --star: #52efc0; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-26 { --star: #5fefb9; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-27 { --star: #6befb2; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-28 { --star: #75efaa; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-29 { --star: #7eefa2; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-30 { --star: #86ef99; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-31 { --star: #8eee8f; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-32 { --star: #95ee85; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-33 { --star: #9cee79; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-34 { --star: #a2ee6c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-35 { --star: #a8ee5c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-36 { --star: #b3ed5c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-37 { --star: #beec5c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-38 { --star: #c7ea5d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-39 { --star: #d1e95d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-40 { --star: #d9e85d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-41 { --star: #e1e75d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-42 { --star: #e9e65d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-43 { --star: #f1e45e; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-44 { --star: #f8e35e; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-45 { --star: #ffe25e; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-46 { --star: #ffdd5e; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-47 { --star: #ffd75d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-48 { --star: #ffd15d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-49 { --star: #ffcc5c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-50 { --star: #ffc55c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-51 { --star: #ffbf5c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-52 { --star: #ffb85b; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-53 { --star: #ffb15b; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-54 { --star: #ffaa5a; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-55 { --star: #ffa25a; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-56 { --star: #ff9d5c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-57 { --star: #ff985f; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-58 { --star: #ff9361; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-59 { --star: #ff8d64; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-60 { --star: #ff8866; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-61 { --star: #ff8168; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-62 { --star: #ff7b6a; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-63 { --star: #ff746c; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-64 { --star: #ff6c6e; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-65 { --star: #ff6470; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-66 { --star: #fb6380; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-67 { --star: #f8628d; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-68 { --star: #f46199; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-69 { --star: #f060a4; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-70 { --star: #ec5fae; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-71 { --star: #e85eb8; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-72 { --star: #e35dc0; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-73 { --star: #df5cc9; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-74 { --star: #db5bd1; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-75 { --star: #d65ad8; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-76 { --star: #d05bdc; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-77 { --star: #c95ce1; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-78 { --star: #c25de5; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-79 { --star: #bb5ee9; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-80 { --star: #b35fed; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-81 { --star: #ab60f0; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-82 { --star: #a260f4; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-83 { --star: #9861f8; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-84 { --star: #8e62fb; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-85 { --star: #8363ff; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-86 { --star: #7f60f8; --star-glyph: hsl(265 20% 12%); --star-ring: transparent; }
.sc-87 { --star: #7b5df2; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-88 { --star: #785aea; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-89 { --star: #7357e3; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-90 { --star: #6f53db; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-91 { --star: #6a4fd3; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-92 { --star: #664ccb; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-93 { --star: #6147c2; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-94 { --star: #5b43b8; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-95 { --star: #553eae; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-96 { --star: #4f39a3; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-97 { --star: #483396; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-98 { --star: #3f2c89; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-99 { --star: #362479; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-100 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-101 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-102 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-103 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-104 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-105 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-106 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-107 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-108 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-109 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-110 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-111 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-112 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-113 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-114 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-115 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-116 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-117 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-118 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-119 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }
.sc-120 { --star: #2a1a66; --star-glyph: var(--text-1); --star-ring: var(--text-3); }

/* css/modules/uploads.css */
/* Styles for the uploads module. Owned by the uploads builder; bundled after components.css.
   Upload wizard (03 §4.4): centred 880 px panel, step rail, steps slide in (fade + 24 px, 300 ms), lazer-like stage rows.
   Edit page: form + side cards. */

/* ─── gates ───────────────────────────────────────────────────────────────── */
.up-gate {
  margin-top: var(--s-12); padding: var(--s-12) var(--s-8); text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(var(--hue) 60% 40% / 0.22), transparent 60%),
    var(--bg-1);
}
.up-gate__icon { width: 44px; height: 44px; margin: 0 auto var(--s-4); color: var(--accent); }
.up-gate__title { font-size: var(--fs-30); margin-bottom: var(--s-3); }
.up-gate__text { max-width: 52ch; margin: 0 auto var(--s-6); color: var(--text-2); font-family: var(--font-text); font-weight: 400; }
.up-gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ─── wizard frame ────────────────────────────────────────────────────────── */
.upw { max-width: 880px; margin: var(--s-8) auto var(--s-16); }
.upw-head { text-align: center; margin-bottom: var(--s-6); }
.upw-head__eyebrow {
  margin: 0 0 var(--s-1); color: var(--accent); font-size: var(--fs-12); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.upw-head__eyebrow a { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; }
.upw-head__title { font-size: clamp(var(--fs-24), 4vw, var(--fs-40)); margin: 0; letter-spacing: -0.01em; }
.upw-head__lead { margin: var(--s-2) 0 0; color: var(--text-2); font-family: var(--font-text); font-weight: 400; }

.upw-rail {
  display: flex; justify-content: center; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; counter-reset: rail;
}
.upw-rail__step {
  position: relative; display: flex; align-items: center; gap: var(--s-2); padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--text-3); font-size: var(--fs-13); font-weight: 700;
  transition: background-color var(--t-card) var(--ease-out), color var(--t-card) var(--ease-out);
}
.upw-rail__num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--bg-4);
  color: var(--text-2); font-size: var(--fs-12); font-weight: 800; font-variant-numeric: tabular-nums;
}
.upw-rail__step.is-current { background: var(--bg-3); color: var(--text-1); box-shadow: 0 0 0 1px var(--accent-strong); }
.upw-rail__step.is-current .upw-rail__num { background: var(--accent-strong); color: var(--text-1); }
.upw-rail__step.is-done { color: var(--text-2); }
.upw-rail__step.is-done .upw-rail__num { background: var(--ok); color: var(--on-pill); }
@media (max-width: 640px) {
  .upw-rail__label { display: none; }
  .upw-rail__step { padding: 6px; }
  .upw-rail__step.is-current .upw-rail__label { display: inline; }
  .upw-rail__step.is-current { padding-right: 14px; }
}

.upw-panel {
  position: relative; overflow: hidden; padding: var(--s-6) var(--s-8) var(--s-8); border-radius: var(--r-lg); background: var(--bg-1);
  box-shadow: var(--shadow-lifted);
}
@media (max-width: 640px) {
  .upw-panel { padding: var(--s-5) var(--s-4) var(--s-6); }
}
.upw-loading { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 200px; color: var(--text-3); }
.upw-spin, .upw-stage__spin { animation: upw-spin 900ms linear infinite; }
@keyframes upw-spin { to { transform: rotate(360deg); } }

.upw-restore {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-5); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: hsl(var(--hue) 60% 50% / 0.12); color: var(--text-2); font-size: var(--fs-13);
}
.upw-restore .link-btn { margin-left: auto; }

.upw-step.is-entering { animation: upw-enter 300ms var(--ease-out); }
@keyframes upw-enter {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .upw-step.is-entering, .upw-result.is-flash { animation: none; }
}
.upw-step__title { font-size: var(--fs-24); margin: 0 0 var(--s-2); }
.upw-step__lead { margin: 0 0 var(--s-5); color: var(--text-2); font-family: var(--font-text); font-weight: 400; }

/* ─── step 1: the one-time rules acceptance ───────────────────────────────── */
.upw-accept__changed { margin: 0 0 var(--s-4); }

.upw-acards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.upw-acard {
  display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-2);
  box-shadow: inset 0 0 0 1px hsl(var(--hue) 10% 32% / 0.5);
}
.upw-acard__icon { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin-bottom: var(--s-1); border-radius: var(--r-md); background: hsl(var(--hue) 62% 56% / 0.16); color: var(--accent-strong); }
.upw-acard__icon .icon { width: 16px; height: 16px; }
.upw-acard__title { margin: 0; font-size: var(--fs-16); color: var(--text-1); }
.upw-acard__text { margin: 0; color: var(--text-2); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-13); line-height: 1.5; }
.upw-acard__link { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: auto; padding-top: var(--s-2); font-size: var(--fs-13); }
.upw-acard__link .icon { width: 13px; height: 13px; }

.upw-accept { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; border: 0; }
.upw-accept__legend { padding: 0 0 var(--s-3); font-size: var(--fs-16); font-weight: 800; color: var(--text-1); }
/* A real checkbox, styled: the box is the input itself, so clicks, focus and keyboard all work without a shadow box. */
.upw-acheck {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2);
  transition: background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.upw-acheck:hover { background: var(--bg-3); }
.upw-acheck:has(input:checked) { box-shadow: inset 0 0 0 1px hsl(var(--hue) 62% 56% / 0.45); }
.upw-acheck input {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; background: var(--bg-0); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line); transition: background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.upw-acheck input:checked {
  background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 2px var(--accent-strong);
}
.upw-acheck input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.upw-acheck label {
  color: var(--text-2); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-14); line-height: 1.45; cursor: pointer;
}
.upw-acheck:has(input:checked) label { color: var(--text-1); }
.upw-acheck a { position: relative; z-index: 1; white-space: nowrap; }
.upw-accept__error { margin: var(--s-3) 0 0; color: var(--danger); font-size: var(--fs-14); font-weight: 700; }

.upw-accepted { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; color: var(--text-3); font-size: var(--fs-13); }
.upw-accepted .icon { width: 15px; height: 15px; color: var(--ok, var(--accent-strong)); }
@media (max-width: 520px) {
  .upw-acards { grid-template-columns: 1fr; }
  .upw-acheck a { white-space: normal; }
}

.upw-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); }
.upw-actions--center { justify-content: center; flex-wrap: wrap; }
.upw-actions .btn--lg { min-width: 200px; }
@media (max-width: 520px) {
  .upw-actions { flex-direction: column-reverse; align-items: stretch; }
  .upw-actions .btn--lg { min-width: 0; }
}

/* ─── files ───────────────────────────────────────────────────────────────── */
.upw-drop {
  display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-5); border-radius: var(--r-lg); text-align: center;
  background:
    repeating-linear-gradient(135deg, hsl(var(--hue) 20% 50% / 0.035) 0 12px, transparent 12px 24px),
    var(--bg-2);
  box-shadow: inset 0 0 0 2px var(--bg-4);
  transition: box-shadow var(--t-card) var(--ease-out), background-color var(--t-card) var(--ease-out);
}
.upw-drop.is-over { box-shadow: inset 0 0 0 2px var(--accent); background-color: var(--bg-3); }
.upw-drop__icon { width: 36px; height: 36px; color: var(--accent); }
.upw-drop__title { margin: 0; font-size: var(--fs-18); font-weight: 800; color: var(--text-1); }
.upw-drop__hint { margin: 0; color: var(--text-3); font-size: var(--fs-13); overflow-wrap: anywhere; }
.upw-drop__hint code { color: var(--text-2); }
.upw-drop__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
.upw-drop__buttons label, .upw-section__head label, .upw-subpanel label.btn { cursor: pointer; }
.upw-drop__buttons label:focus-within, .upw-section label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.upw-notes { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.upw-note { color: var(--text-3); font-size: var(--fs-13); }
.upw-note::before { content: "•"; margin-right: var(--s-2); color: var(--accent); }

.upw-section { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--bg-3); }
.upw-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.upw-section__title { margin: 0 0 var(--s-3); font-size: var(--fs-18); }
.upw-section__head .upw-section__title { margin: 0; }
.upw-count { color: var(--text-3); font-size: var(--fs-13); font-weight: 700; margin-left: var(--s-1); }
.upw-empty { margin: var(--s-3) 0 0; color: var(--text-mute); font-size: var(--fs-14); }

.upw-charts { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.upw-chart {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md);
  background: var(--bg-2); box-shadow: inset 3px 0 0 var(--bg-4); animation: fade-in var(--t-fade) ease-out;
}
.upw-chart--ready { box-shadow: inset 3px 0 0 var(--ok); }
.upw-chart--kept { box-shadow: inset 3px 0 0 var(--st-pending); }
.upw-chart--error, .upw-chart--missing { box-shadow: inset 3px 0 0 var(--danger); }
.upw-chart--uploading { box-shadow: inset 3px 0 0 var(--accent); }
.upw-chart.is-dragging { opacity: 0.5; }
.upw-chart__handle { color: var(--text-mute); cursor: grab; letter-spacing: -2px; user-select: none; }
.upw-chart__main { display: grid; gap: var(--s-2); min-width: 0; }
.upw-chart__inputs { display: grid; grid-template-columns: 1fr 140px; gap: var(--s-2); }
.upw-chart__key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-13); }
.upw-chart__key:disabled { opacity: 0.7; }
.upw-chart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); min-width: 0; color: var(--text-3); font-size: var(--fs-12); }
.upw-chart__file { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.upw-chart__probe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-variant-numeric: tabular-nums; }
.upw-chart__actions { display: flex; align-items: center; gap: 2px; }
.upw-chart__move--down .icon { transform: rotate(180deg); }
.upw-chart__error, .upw-chart__ok, .upw-chart__kept { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-13); font-weight: 700; }
.upw-chart__error { color: var(--danger); flex-wrap: wrap; }
.upw-chart__ok { color: var(--ok); }
.upw-chart__kept { color: var(--st-pending); }
.upw-chart__error .icon, .upw-chart__ok .icon, .upw-chart__kept .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .upw-chart { grid-template-columns: 1fr auto; }
  .upw-chart__handle { display: none; }
  .upw-chart__inputs { grid-template-columns: 1fr; }
}

.upw-progress { display: block; height: 6px; border-radius: var(--r-pill); background: var(--bg-4); overflow: hidden; }
.upw-progress__bar {
  display: block; height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); transform-origin: left;
  transform: scaleX(0); transition: transform var(--t-bar) var(--ease-out);
}
.upw-warn { color: var(--warn); }

.upw-choice { display: grid; gap: var(--s-2); }
.upw-choice--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.upw-choice__opt {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2);
  cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.upw-choice__opt:hover { background: var(--bg-3); }
.upw-choice__opt:has(input:checked) { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.upw-choice__opt input { margin-top: 3px; accent-color: var(--accent-strong); }
.upw-choice__text { display: grid; gap: 2px; }
.upw-choice__label { color: var(--text-1); font-weight: 700; }
.upw-choice__hint { color: var(--text-3); font-size: var(--fs-13); font-family: var(--font-text); font-weight: 400; }

.upw-subpanel { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-2); }
.upw-subpanel__text { margin: 0; color: var(--text-2); font-size: var(--fs-14); font-family: var(--font-text); font-weight: 400; }
.upw-subpanel .input { width: 100%; }
.upw-files, .upw-fingerprint { width: 100%; }
.upw-file { display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-3); }
.upw-file > .icon { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.upw-file__main { display: grid; gap: var(--s-1); min-width: 0; flex: 1; }
.upw-file__name { color: var(--text-1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upw-file__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.upw-sha { color: var(--text-3); font-size: var(--fs-12); }

.upw-library { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); max-height: 320px; overflow: auto; }
.upw-library__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-3); }
.upw-library__item.is-selected { box-shadow: inset 0 0 0 1px var(--accent-strong); }
.upw-library__text { display: grid; min-width: 0; flex: 1; }
.upw-library__title { color: var(--text-1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upw-library__artist { color: var(--text-3); font-size: var(--fs-12); }
.upw-library__empty { color: var(--text-3); font-size: var(--fs-13); padding: var(--s-2); }

.upw-cover { display: grid; gap: var(--s-2); width: 100%; }
.upw-cover__img { width: 100%; max-width: 480px; aspect-ratio: 48 / 14; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow); }

.upw-issues { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.upw-issues:empty { display: none; }
.upw-issue {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: 700;
}
.upw-issue .icon { flex: none; width: 16px; height: 16px; }
.upw-issue--error { background: hsl(355 85% 60% / 0.12); color: hsl(355 90% 76%); }
.upw-issue--warning { background: hsl(40 100% 58% / 0.1); color: var(--warn); }
.upw-issue__note { flex-basis: 100%; padding-left: 24px; color: var(--text-2); font-weight: 400; font-family: var(--font-text); }

/* ─── details ─────────────────────────────────────────────────────────────── */
.upw-form { display: grid; gap: var(--s-1); }
.upw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
@media (max-width: 640px) {
  .upw-grid { grid-template-columns: 1fr; }
}
.upw-unicode { margin: calc(var(--s-3) * -1) 0 var(--s-4); }
.upw-unicode > summary { display: inline-block; list-style: none; font-size: var(--fs-13); }
.upw-unicode > summary::-webkit-details-marker { display: none; }
.upw-unicode[open] > summary { margin-bottom: var(--s-3); }

.upw-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-height: 40px; padding: 4px 6px; border-radius: var(--r-sm);
  background: var(--bg-3); cursor: text;
}
.upw-tags:focus-within { outline: 2px solid var(--accent); }
.upw-tags__list { display: contents; list-style: none; }
.upw-tags__chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: var(--r-pill); background: var(--bg-4);
  color: var(--text-1); font-size: var(--fs-13); font-weight: 700;
}
.upw-tags__remove { width: 22px; height: 22px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-3); cursor: pointer; line-height: 1; }
.upw-tags__remove:hover { background: hsl(0 0% 100% / 0.1); color: var(--text-1); }
.upw-tags__input { flex: 1; min-width: 140px; border: 0; background: transparent; color: var(--text-1); padding: 4px; outline: none; }

.upw-md__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.upw-tabs { display: inline-flex; padding: 2px; border-radius: var(--r-sm); background: var(--bg-2); }
.upw-tabs__tab { border: 0; padding: 4px 12px; border-radius: 3px; background: none; color: var(--text-3); font-size: var(--fs-12); font-weight: 800; cursor: pointer; }
.upw-tabs__tab.is-active { background: var(--bg-4); color: var(--text-1); }
.upw-md__preview { min-height: 168px; padding: var(--s-3); border-radius: var(--r-sm); background: var(--bg-2); overflow-wrap: anywhere; }

.upw-pp { margin: var(--s-2) 0 var(--s-5); }
.upw-pp__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.upw-pp__time { color: var(--text-2); font-size: var(--fs-13); font-weight: 700; }
.upw-pp__strip {
  position: relative; height: 72px; border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; touch-action: none; cursor: ew-resize;
  box-shadow: inset 0 0 0 1px var(--bg-3);
}
.upw-pp__wave { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); }
.upw-pp__window {
  position: absolute; top: 0; bottom: 0; left: 0; width: 10%; border-radius: var(--r-sm);
  background: hsl(var(--hue) 100% 78% / 0.12); box-shadow: inset 0 0 0 2px var(--accent); cursor: grab;
}
.upw-pp__window:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.upw-pp__window::before, .upw-pp__window::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 24px; margin-top: -12px; border-radius: var(--r-pill); background: var(--accent);
}
.upw-pp__window::before { left: -2px; }
.upw-pp__window::after { right: -2px; }
.upw-pp__playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text-1); box-shadow: 0 0 8px var(--accent); pointer-events: none; }
.upw-pp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.upw-pp.is-playing [data-pp-play] { background: var(--accent-strong); }

.upw-fieldset { margin: 0 0 var(--s-4); padding: 0; border: 0; }
.upw-fieldset legend { margin-bottom: var(--s-2); padding: 0; }
.upw-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-2); }
.upw-check { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-2); cursor: pointer; }
.upw-check input { margin-top: 3px; accent-color: var(--accent-strong); flex: none; }
.upw-check__label { display: block; color: var(--text-1); font-weight: 700; font-size: var(--fs-14); }
.upw-check__hint { display: block; color: var(--text-3); font-size: var(--fs-12); font-family: var(--font-text); font-weight: 400; }
.upw-check.is-locked { cursor: not-allowed; opacity: 0.75; }

/* ─── publish ─────────────────────────────────────────────────────────────── */
.upw-preview { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.upw-hp { position: relative; min-height: 160px; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-3); isolation: isolate; }
.upw-hp__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.upw-hp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, hsl(var(--hue) 14% 7% / 0.95), hsl(var(--hue) 14% 7% / 0.25)); }
.upw-hp__content { display: grid; justify-items: start; gap: 2px; padding: var(--s-8) var(--s-5) var(--s-4); }
.upw-hp__title { margin: var(--s-2) 0 0; font-size: var(--fs-30); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 8px hsl(0 0% 0% / 0.5); overflow-wrap: anywhere; }
.upw-hp__artist { margin: 0; color: var(--text-2); font-size: var(--fs-18); font-weight: 700; }
.upw-hp__charts { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.upw-hp__disc { width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--star); box-shadow: 0 0 0 1px var(--star-ring); }
.upw-card { max-width: 480px; }
.upw-card .bm-card__stats { display: none; }

.upw-review {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: hsl(205 88% 70% / 0.1); color: var(--st-pending); font-size: var(--fs-14); font-weight: 700;
}
.upw-review .icon { flex: none; margin-top: 2px; }
.upw-confirm { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.upw-confirm a { position: relative; z-index: 1; font-size: var(--fs-13); }
.upw-publish { background: linear-gradient(135deg, var(--accent-strong), hsl(calc(var(--hue) + 40) 70% 55%)); }
.upw-publish:not(:disabled):hover { filter: brightness(1.08); }

/* ─── progress ────────────────────────────────────────────────────────────── */
.upw-stages { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.upw-stage {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--bg-2); color: var(--text-3); font-size: var(--fs-16); font-weight: 700;
  transition: color var(--t-card) var(--ease-out), background-color var(--t-card) var(--ease-out);
}
.upw-stage__status { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.upw-stage__status .icon { grid-area: 1 / 1; width: 20px; height: 20px; display: none; }
.upw-stage.is-active { color: var(--text-1); background: var(--bg-3); }
.upw-stage.is-active .upw-stage__spin { display: block; color: var(--st-wip); }
.upw-stage.is-done { color: var(--text-2); }
.upw-stage.is-done .upw-stage__done { display: block; color: var(--ok); animation: upw-pop 400ms var(--ease-out); }
.upw-stage.is-failed { color: var(--text-1); box-shadow: inset 3px 0 0 var(--danger); }
.upw-stage.is-failed .upw-stage__fail { display: block; color: var(--danger); }
@keyframes upw-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.upw-failure { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: hsl(355 85% 60% / 0.1); }
.upw-failure__text { margin: 0 0 var(--s-3); color: hsl(355 90% 78%); font-weight: 700; }
.upw-result { margin-top: var(--s-6); display: grid; justify-items: center; gap: var(--s-4); }
.upw-result__lead:empty { display: none; }
.upw-result__card { width: 100%; max-width: 480px; }
.upw-result.is-flash .upw-result__card { animation: upw-flash 2000ms var(--ease-out); border-radius: var(--r-md); }
@keyframes upw-flash {
  from { box-shadow: 0 0 0 2px hsl(0 0% 100% / 0.9), 0 0 48px hsl(var(--hue) 100% 78% / 0.7); }
  to { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}

/* ─── edit page ───────────────────────────────────────────────────────────── */
.upe { max-width: var(--max-wide); margin: var(--s-6) auto var(--s-16); }
.upe-head { margin-bottom: var(--s-5); }
.upe-banner { margin: 0 0 var(--s-4); border-radius: var(--r-md); }
.upe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); align-items: start; }
@media (max-width: 960px) {
  .upe-layout { grid-template-columns: 1fr; }
}
.upe-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.upe-fieldset:disabled { opacity: 0.7; }
.upe-section__title { font-size: var(--fs-18); margin: 0 0 var(--s-2); }
.upe-side { display: grid; gap: var(--s-4); position: sticky; top: calc(var(--header-h) + var(--s-4)); }
@media (max-width: 960px) {
  .upe-side { position: static; }
}
.upe-card { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5); }
.upe-card .field__hint { margin: 0; }
.upe-card--danger { box-shadow: inset 0 0 0 1px hsl(355 85% 60% / 0.35); }
.upe-status { margin: 0; display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); }