/* ==========================================================================
   Tiktok Nightclub public site
   Palette: ink #0b0a12 · violet #b69cff · pink #ff6ec7
   Type: Be Vietnam Pro (self-hosted) · mono for numbers, paths, hashes
   ========================================================================== */

/* ---- Fonts (self-hosted, latin + vietnamese subsets) -------------------- */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/be-vietnam-pro-400-latin.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/be-vietnam-pro-600-latin.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/be-vietnam-pro-800-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/be-vietnam-pro-800-latin.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;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --bg-void: #0b0a12;
  --on-neon: #0b0a12;
  --bg-panel: #14121f;
  --bg-raised: #1c1930;
  --line: rgba(182, 156, 255, 0.15);
  --line-soft: rgba(182, 156, 255, 0.08);
  --neon-violet: #b69cff;
  --neon-pink: #ff6ec7;
  --zalo-blue: #0068ff;
  --ink: #ece8f8;
  --ink-muted: #b4abd2;
  /* Be Vietnam Pro ships latin + vietnamese subsets only, so the zh-CN locale
     needs an explicit CJK stack rather than an incidental generic fallback. */
  --font-body: "Be Vietnam Pro", system-ui, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --radius: 16px;
  --nav-h: 64px;
  --maxw: 1120px;
}

/* ---- Feature flags -------------------------------------------------------
   Entry points into retired-but-recoverable modules carry data-feature="...".
   They stay hidden by default; site.js removes the attribute only when
   web/data/site-config.json enables the flag, so a slow config fetch can
   never flash a retired module's links. */
[data-feature] { display: none !important; }

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; display: block; }
a { color: var(--neon-violet); text-decoration: none; }
a:hover { color: var(--neon-pink); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--neon-pink); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(182, 156, 255, 0.35); }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--neon-violet); color: var(--on-neon); font-weight: 600;
  padding: 0.5rem 1rem; border-radius: 8px; transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: var(--on-neon); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section + .section { border-top: 1px solid var(--line-soft); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-pink);
  margin-bottom: 0.9rem;
}
.sec-head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); max-width: 40rem; }
.sec-head h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.sec-head .sub { color: var(--ink-muted); margin-top: 0.7rem; }

/* ---- Header / nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 10, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  min-height: 44px; display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 800; letter-spacing: 0.14em; font-size: 0.86rem;
  color: var(--ink); text-transform: uppercase; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .brand-night { color: var(--neon-pink); }

/* Equalizer mark: the beat, as a logo */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.eq span {
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-violet));
  animation: eq-bounce 1.1s ease-in-out infinite;
}
.eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq span:nth-child(2) { height: 90%; animation-delay: 0.15s; }
.eq span:nth-child(3) { height: 60%; animation-delay: 0.3s; }
.eq span:nth-child(4) { height: 100%; animation-delay: 0.45s; }
.eq span:nth-child(5) { height: 50%; animation-delay: 0.6s; }
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}
.eq span { transform-origin: bottom; }

.nav-menu {
  display: flex; align-items: center; gap: 1.4rem;
  margin-left: auto; list-style: none;
}
.nav-menu a {
  color: var(--ink-muted); font-weight: 600; font-size: 1rem;
  padding: 0.3rem 0.1rem;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--ink); }
.nav-menu .nav-account {
  border: 1px solid rgba(255, 110, 199, 0.38); border-radius: 999px;
  padding: 0.42rem 0.9rem; color: var(--ink);
  background: rgba(255, 110, 199, 0.08);
}
.nav-menu .nav-account:hover { border-color: var(--neon-pink); color: var(--neon-pink); }
.nav-language-mobile { display: none; }

.lang-switch {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; font-family: var(--font-mono); font-size: 0.78rem;
}
.lang-switch button {
  min-width: 44px; min-height: 44px; padding: 0.32rem 0.7rem;
  color: var(--ink-muted); letter-spacing: 0.06em;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--neon-violet); color: var(--on-neon); font-weight: 700;
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--ink); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 0.95rem 1.7rem; border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: linear-gradient(100deg, var(--neon-violet), var(--neon-pink));
  color: #16091f;
  box-shadow: 0 4px 30px rgba(255, 110, 199, 0.28), 0 2px 14px rgba(182, 156, 255, 0.25);
}
.btn-primary:hover {
  color: #16091f; transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(255, 110, 199, 0.38), 0 4px 18px rgba(182, 156, 255, 0.32);
}
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: rgba(182, 156, 255, 0.05); }
.btn-ghost:hover { border-color: var(--neon-violet); color: var(--ink); transform: translateY(-2px); }

/* ---- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 11vh, 7.5rem) 0 370px;
  text-align: center;
}
.hero-inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.hero .eyebrow { margin-bottom: 1.4rem; }
.hero-title { line-height: 0.98; text-transform: uppercase; }
.hero-title .t1 {
  display: block; font-size: clamp(1rem, 2.8vw, 1.5rem); font-weight: 600;
  letter-spacing: 0.52em; text-indent: 0.52em; color: var(--ink); opacity: 0.9;
  margin-bottom: 0.4rem;
}
.hero-title .t2 {
  display: block; font-size: clamp(2.7rem, 10vw, 5.8rem); font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(97deg, var(--neon-violet) 15%, var(--neon-pink) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(182, 156, 255, 0.38)) drop-shadow(0 0 70px rgba(255, 110, 199, 0.2));
}
.hero-pitch {
  color: var(--ink-muted); font-size: clamp(1.05rem, 2.4vw, 1.16rem);
  margin: 1.5rem auto 2.2rem; max-width: 38rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.hero-chips {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  margin-top: 2.1rem; list-style: none;
}
.hero-chips li {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.34rem 0.85rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.hero-chips li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink);
}

/* Hero backdrop: one static ambience wash. Decorative animated orbs/lasers
   were removed per the locked visual language — glow is reserved for state
   (the LIVE lamp); depth comes from this quiet gradient alone. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(56vw 42vw at 12% 8%, rgba(182, 156, 255, 0.10), transparent 70%),
    radial-gradient(48vw 36vw at 88% 18%, rgba(255, 110, 199, 0.07), transparent 70%);
}

.floor {
  position: absolute; left: -12%; right: -12%; bottom: 0; height: 260px;
  background:
    linear-gradient(to bottom, rgba(182, 156, 255, 0.05), rgba(255, 110, 199, 0.03)),
    repeating-linear-gradient(90deg, rgba(182, 156, 255, 0.30) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(255, 110, 199, 0.22) 0 1px, transparent 1px 40px);
  transform: perspective(460px) rotateX(58deg);
  transform-origin: top center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, rgba(0,0,0,0.4));
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, rgba(0,0,0,0.4));
}
.horizon {
  position: absolute; left: 6%; right: 6%; bottom: 260px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-violet) 30%, var(--neon-pink) 70%, transparent);
  box-shadow: 0 0 22px 3px rgba(182, 156, 255, 0.4), 0 0 60px 10px rgba(255, 110, 199, 0.18);
  opacity: 0.75;
}

/* Compact hero variant (music page) */
.hero--compact { padding: clamp(3rem, 8vh, 4.5rem) 0 230px; }
.hero--compact .floor { height: 170px; }
.hero--compact .horizon { bottom: 170px; }
.hero--compact .hero-title .t2 { font-size: clamp(2rem, 6.5vw, 3.4rem); }
.hero-stats {
  margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--ink-muted); letter-spacing: 0.04em;
}

/* Home hero: real product proof, not a decorative placeholder. */
.hero--home {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.hero-home-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
/* The two-column hero caps the copy column at ~450px while `.hero-title .t2` is
   sized from the viewport, so at >=961px the wordmark outgrew its box. Because the
   glyphs are painted by a gradient through `background-clip: text`, the overflow
   rendered fully transparent rather than merely clipped. Size it from the
   container instead so the brand name always fits its own column. */
@media (min-width: 961px) {
  .hero--home .hero-copy { container-type: inline-size; }
  .hero--home .hero-title .t2 { font-size: clamp(2.7rem, 15cqi, 5.8rem); }
}
.hero--home .hero-pitch { margin: 1.5rem 0 2rem; }
.hero--home .hero-cta { justify-content: flex-start; align-items: center; }
.hero--home .hero-chips { justify-content: flex-start; margin-top: 1.7rem; }
.hero-account-link {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0.45rem 0.2rem; color: var(--neon-violet); font-weight: 700;
  text-decoration: underline; text-underline-offset: 0.28em;
}
.hero-stage {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid rgba(182, 156, 255, 0.28); border-radius: 24px;
  background: var(--bg-panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}
.hero-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(11, 10, 18, 0.86));
}
.hero-stage img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 24%;
  filter: saturate(0.92) contrast(1.04);
}
.hero-stage figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; z-index: 2;
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--neon-pink); box-shadow: 0 0 12px var(--neon-pink);
}

/* Live Signal Rail: the product's signature interaction sequence. */
.signal-section { padding: clamp(2.3rem, 5vw, 3.5rem) 0; background: rgba(182, 156, 255, 0.025); }
.signal-head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.8fr);
  gap: 2rem; align-items: end; margin-bottom: 1.8rem;
}
.signal-head .eyebrow { margin-bottom: 0.55rem; }
.signal-head h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; }
.signal-head > p { color: var(--ink-muted); }
.signal-rail {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: rgba(18, 15, 30, 0.78);
}
.signal-rail::before {
  content: ""; position: absolute; top: 30px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, var(--neon-violet), var(--neon-pink)); opacity: 0.65;
}
.signal-rail li {
  position: relative; z-index: 1; min-width: 0; padding: 1.15rem 1.25rem 1.3rem;
  display: grid; grid-template-rows: 34px auto auto; gap: 0.35rem;
}
.signal-rail li + li { border-left: 1px solid var(--line-soft); }
.signal-index {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-panel); border: 1px solid var(--neon-violet);
  color: var(--neon-violet); font-family: var(--font-mono); font-size: 0.72rem;
}
.signal-rail strong { margin-top: 0.35rem; }
.signal-rail li > span:last-child { color: var(--ink-muted); font-size: 0.92rem; }
/* Beat 01 is the LIVE moment — the only glow on the rail is this state lamp. */
.signal-rail li:first-child .signal-index {
  border-color: var(--neon-pink); color: var(--neon-pink);
  box-shadow: 0 0 12px rgba(255, 110, 199, 0.45);
}

/* ---- Features -------------------------------------------------------------- */
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  list-style: none;
}
.card {
  background: linear-gradient(180deg, rgba(182, 156, 255, 0.055), rgba(182, 156, 255, 0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.feature-card { transition: border-color 0.2s ease, transform 0.2s ease; }
.feature-card:hover { border-color: rgba(255, 110, 199, 0.4); transform: translateY(-3px); }
.feature-card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(182, 156, 255, 0.1); border: 1px solid var(--line);
  margin-bottom: 1rem;
}
.feature-card .icon svg { width: 24px; height: 24px; stroke: var(--neon-violet); fill: none; }
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.45rem; }
.feature-card p { color: var(--ink-muted); font-size: 1rem; }

/* ---- How it works ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; list-style: none; }
.step { position: relative; padding: 1.6rem 1.4rem; }
.step .n {
  font-family: var(--font-mono); font-weight: 400; font-size: 2.2rem; line-height: 1;
  background: linear-gradient(120deg, var(--neon-violet), var(--neon-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.step p { color: var(--ink-muted); font-size: 1rem; }

/* ---- Credit explanation --------------------------------------------------- */
.credit-section { background: rgba(255, 110, 199, 0.018); }
.credit-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(2rem, 7vw, 5.5rem); align-items: center;
}
.credit-grid h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.15; }
.credit-copy { color: var(--ink-muted); max-width: 40rem; margin: 1rem 0 1.5rem; }
.credit-facts {
  margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.credit-facts div {
  display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem; padding: 1rem 0;
}
.credit-facts div + div { border-top: 1px solid var(--line-soft); }
.credit-facts dt { color: var(--ink-muted); }
.credit-facts dd { margin: 0; font-family: var(--font-mono); font-weight: 700; text-align: right; }

/* ---- Download ------------------------------------------------------------------ */
.dl-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.1rem; align-items: start; }
.dl-card { padding: 1.9rem 1.8rem; }
/* Launcher-first card (4.2.3): the primary install path; the ZIP card moved
   into a collapsed fallback details below it. */
.dl-card--launcher .dl-version { font-family: var(--font-body); font-size: clamp(1.35rem, 3vw, 1.7rem); }
.launcher-steps { margin: 1rem 0 0.2rem; padding-left: 1.35rem; display: grid; gap: 0.4rem; }
.launcher-steps li { list-style: decimal; color: var(--ink-muted); }
.launcher-steps li::marker { color: var(--neon-violet); font-family: var(--font-mono); }
.dl-card--launcher .callout { margin-top: 1.2rem; }
.dl-older > .dl-card { margin-top: 0.85rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neon-pink);
  border: 1px solid rgba(255, 110, 199, 0.4); border-radius: 999px;
  padding: 0.28rem 0.8rem; margin-bottom: 1.1rem;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink);
}
.dl-version {
  font-family: var(--font-mono); font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.dl-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
  margin: 1.1rem 0 0.4rem; padding: 0; list-style: none;
}
.dl-meta .k { display: block; font-size: 0.8rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.dl-meta .v { font-family: var(--font-mono); font-size: 0.98rem; }
.dl-notes { color: var(--ink-muted); font-size: 0.92rem; margin-top: 0.6rem; }
.dl-action { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.dl-filename { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-muted); word-break: break-all; }
.dl-sha { margin-top: 1.3rem; border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.dl-sha summary {
  cursor: pointer; color: var(--ink-muted); font-size: 0.88rem; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 0.5rem;
}
.dl-sha summary::-webkit-details-marker { display: none; }
.dl-sha summary::before { content: "▸"; color: var(--neon-violet); transition: transform 0.15s ease; }
.dl-sha[open] summary::before { transform: rotate(90deg); }
.dl-sha .sha-value {
  display: block; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--ink); word-break: break-all;
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 0.7rem 0.9rem; margin-top: 0.7rem;
}
.dl-sha .sha-hint { color: var(--ink-muted); font-size: 0.83rem; margin-top: 0.6rem; }
.dl-sha .sha-cmd {
  display: block; font-family: var(--font-mono); font-size: 0.85rem; color: var(--neon-violet);
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 0.7rem 0.9rem; margin-top: 0.5rem; overflow-x: auto; white-space: nowrap;
}
.req-card { padding: 1.6rem 1.5rem; }
.req-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.9rem; }
.req-card ul { list-style: none; display: grid; gap: 0.6rem; }
.req-card li { display: flex; gap: 0.6rem; color: var(--ink-muted); font-size: 1rem; }
.req-card li::before { content: "✓"; color: var(--neon-violet); font-weight: 700; flex: none; }
.host-note {
  margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px;
  background: rgba(182, 156, 255, 0.06); border: 1px solid var(--line-soft);
  color: var(--ink-muted); font-size: 0.92rem;
}
.host-note p { margin: 0; }
.host-actions { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-top: 0.75rem; }
.host-actions a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.host-actions .host-action-primary { color: var(--neon-pink); }
.host-actions .host-action-primary:hover { color: var(--neon-violet); }
.dl-older { margin-top: 1.1rem; }
.dl-older summary {
  cursor: pointer; color: var(--ink-muted); font-size: 0.9rem; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 0.5rem;
}
.dl-older summary::-webkit-details-marker { display: none; }
.dl-older summary::before { content: "▸"; color: var(--neon-violet); transition: transform 0.15s ease; }
.dl-older[open] summary::before { transform: rotate(90deg); }
.dl-older ul { list-style: none; margin-top: 0.8rem; display: grid; gap: 0.5rem; }
.dl-older li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 0.65rem 1rem;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-muted);
}
.dl-older li .ver { color: var(--ink); font-weight: 700; }
.dl-older li a { margin-left: auto; }
.dl-empty { text-align: center; padding: 2.6rem 1.5rem; }
.dl-empty h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.dl-empty p { color: var(--ink-muted); }

/* ---- Media / gallery -------------------------------------------------------------- */
.media-grid--proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.media-proof {
  position: relative; overflow: hidden; height: 27rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel);
}
.media-proof--wide { grid-column: span 2; height: clamp(30rem, 48vw, 36rem); }
.media-proof::after {
  content: ""; position: absolute; inset: 38% 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 10, 18, 0.94));
}
.media-proof img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-proof--wide img { object-position: center 38%; }
.media-proof:not(.media-proof--wide) img { object-position: center 42%; }
.media-proof:last-child img { object-position: center 42%; }
.media-proof figcaption {
  position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.1rem;
  display: grid; gap: 0.2rem;
}
.media-proof figcaption strong { font-size: 1.05rem; }
.media-proof figcaption span { color: var(--ink-muted); font-size: 0.9rem; }

/* ---- FAQ and support -------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 7vw, 5rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  min-height: 60px; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; cursor: pointer; font-weight: 700; list-style: none; padding: 0.75rem 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--neon-violet); font-family: var(--font-mono); font-size: 1.35rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--ink-muted); padding: 0 2.5rem 1rem 0; }
.support-strip {
  margin-top: clamp(2.4rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.support-strip a {
  min-height: 96px; display: grid; align-content: center; gap: 0.18rem;
  padding: 1rem 1.2rem; color: var(--ink); background: rgba(182, 156, 255, 0.035);
}
.support-strip a + a { border-left: 1px solid var(--line); }
.support-strip a:hover { background: rgba(182, 156, 255, 0.075); color: var(--ink); }
.support-strip span { color: var(--ink-muted); font-size: 0.86rem; }
.support-strip strong::after { content: " →"; color: var(--neon-pink); }

/* ---- Contact form --------------------------------------------------------------------
   Self-registration is gone, so this form is the only acquisition channel the site has. */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 6vw, 4.5rem); align-items: start;
}
.contact-intro h2 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); line-height: 1.15; margin-top: 0.6rem; }
.contact-intro .sub { color: var(--ink-muted); margin-top: 0.9rem; max-width: 34rem; }
.contact-privacy { color: var(--ink-muted); font-size: 0.86rem; margin-top: 1.2rem; max-width: 32rem; }
.contact-direct {
  position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr);
  gap: 0.9rem; margin-top: 1.6rem; padding: 1.2rem;
  background: linear-gradient(135deg, rgba(182, 156, 255, 0.09), rgba(255, 110, 199, 0.035));
  border: 1px solid rgba(182, 156, 255, 0.25); border-radius: 14px;
}
.contact-direct-signal {
  width: 9px; height: 9px; margin-top: 0.45rem; border-radius: 50%;
  background: var(--neon-pink); box-shadow: 0 0 14px rgba(255, 110, 199, 0.8);
}
.contact-direct-label {
  color: var(--neon-pink); font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
.contact-direct h3 { margin-top: 0.15rem; font-size: 1.15rem; }
.contact-direct h3 + p { margin-top: 0.3rem; color: var(--ink-muted); font-size: 0.9rem; }
.contact-direct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.9rem; }
.contact-channel {
  min-height: 62px; display: grid; align-content: center; gap: 0.05rem;
  padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); background: rgba(11, 10, 18, 0.48);
}
.contact-channel:hover { border-color: var(--neon-violet); color: var(--ink); }
.contact-channel--zalo { border-color: color-mix(in srgb, var(--zalo-blue) 62%, transparent); }
.contact-channel--zalo:hover { border-color: var(--zalo-blue); }
.contact-channel span { color: var(--ink-muted); font-size: 0.75rem; }
.contact-channel strong { font-family: var(--font-mono); font-size: 0.86rem; }
.contact-form { display: grid; gap: 1rem; }
.contact-form .field { display: grid; gap: 0.4rem; }
.contact-form label { font-weight: 600; font-size: 0.92rem; display: flex; gap: 0.5rem; align-items: baseline; }
.field-optional {
  color: var(--ink-muted); font-weight: 500; font-size: 0.78rem;
  text-transform: lowercase; letter-spacing: 0.02em;
}
.contact-form input,
.contact-form textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: rgba(11, 10, 18, 0.55);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s ease;
}
.contact-form textarea { resize: vertical; min-height: 7.5rem; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: none; border-color: var(--neon-violet); }
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: var(--neon-pink); box-shadow: 0 0 0 1px rgba(255, 110, 199, 0.2); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-muted); opacity: 0.65; }
.field-help { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.45; }

/* Honeypot. clip-path, deliberately NOT display:none — display:none is skipped by
   many bots AND by browser autofill, which would defeat the trap from both sides.
   It stays in the layout at zero size, out of the tab order via tabindex="-1". */
.contact-honeypot {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.3rem; }
.contact-actions .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.contact-status { margin: 0; font-size: 0.9rem; color: var(--ink-muted); }
.contact-status.is-ok { color: var(--neon-violet); }
.contact-status.is-error { color: var(--neon-pink); }
.contact-status.is-busy { color: var(--ink-muted); }

/* Direct-contact dock: a compact LIVE-signal control on every public page. */
.contact-dock {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 55;
  display: flex; align-items: center; gap: 0.25rem; padding: 0.32rem;
  background: rgba(20, 18, 31, 0.94); border: 1px solid rgba(182, 156, 255, 0.3);
  border-radius: 999px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.contact-dock.is-redundant { opacity: 0; transform: translateY(10px); pointer-events: none; }
.contact-dock-live {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.55rem;
  color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.contact-dock-live::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink);
}
.contact-dock-action {
  min-height: 44px; min-width: 62px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.45rem 0.8rem; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 0.86rem;
}
.contact-dock-action:hover { color: var(--ink); background: rgba(182, 156, 255, 0.12); }
.contact-dock-action--zalo { background: var(--zalo-blue); color: #fff; }
.contact-dock-action--zalo:hover { background: #1675ff; color: #fff; }

/* ---- Invite acceptance page ------------------------------------------------------------ */
.invite-container { max-width: 42rem; }
.invite-card { padding: 2rem 1.8rem; display: grid; gap: 1rem; }
.invite-loading { color: var(--ink-muted); margin: 0; }
.invite-title { margin: 0; font-size: clamp(1.35rem, 3.4vw, 1.8rem); line-height: 1.2; }
.invite-body { margin: 0; color: var(--ink-muted); }
.invite-facts { margin: 0.4rem 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.invite-facts div {
  display: grid; grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem; padding: 0.85rem 0;
}
.invite-facts div + div { border-top: 1px solid var(--line-soft); }
.invite-facts dt { color: var(--ink-muted); font-size: 0.9rem; }
.invite-facts dd { margin: 0; font-family: var(--font-mono); font-weight: 700; word-break: break-word; }
.invite-exact { margin: 0; color: var(--ink-muted); font-size: 0.86rem; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

/* ---- Footer -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 3rem 0 2.4rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.footer-brand { max-width: 22rem; }
.footer-brand .brand { margin-bottom: 0.6rem; }
.footer-brand p { color: var(--ink-muted); font-size: 0.9rem; }
.footer-nav { margin-left: auto; display: flex; gap: 2.5rem; }
.footer-nav ul { list-style: none; display: grid; gap: 0.5rem; }
.footer-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-muted); font-size: 0.9rem; }
.footer-nav a:hover { color: var(--ink); }
.footer-legal {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  color: var(--ink-muted); font-size: 0.85rem;
}

/* ---- Music page: install guide ---------------------------------------------------------- */
.guide-list { list-style: none; counter-reset: gstep; display: grid; gap: 1rem; max-width: 46rem; }
.g-step { min-width: 0; counter-increment: gstep; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1.1rem; padding: 1.4rem 1.4rem; }
.g-step > div { min-width: 0; }
.g-step::before {
  content: counter(gstep, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 1.5rem; line-height: 1.2;
  background: linear-gradient(120deg, var(--neon-violet), var(--neon-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.g-step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.g-step p { color: var(--ink-muted); font-size: 1rem; }
.g-step code.inline-file {
  display: inline-block; margin-top: 0.55rem;
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 0.42rem 0.75rem; font-size: 0.85rem; color: var(--neon-violet);
  word-break: break-all;
}

.callout {
  border-radius: 12px; padding: 1rem 1.2rem; margin-top: 0.9rem;
  display: flex; gap: 0.8rem; align-items: flex-start;
}
.callout--narrow { max-width: 46rem; }
.callout svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.callout-warn { background: rgba(255, 110, 199, 0.08); border: 1px solid rgba(255, 110, 199, 0.38); }
.callout-warn svg { stroke: var(--neon-pink); fill: none; }
.callout-warn strong { color: var(--neon-pink); display: block; margin-bottom: 0.25rem; }
.callout-warn p { color: var(--ink); opacity: 0.9; font-size: 0.9rem; }
.callout-info { background: rgba(182, 156, 255, 0.07); border: 1px solid var(--line); }
.callout-info svg { stroke: var(--neon-violet); fill: none; }
.callout-info strong { color: var(--neon-violet); display: block; margin-bottom: 0.35rem; }
.callout-info ul { list-style: none; display: grid; gap: 0.4rem; }
.callout-info li { color: var(--ink); opacity: 0.88; font-size: 0.9rem; display: flex; gap: 0.5rem; }
.callout-info li::before { content: "→"; color: var(--neon-violet); flex: none; }

/* Folder-path breadcrumb widget */
.pathbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 0.9rem; margin-top: 0.7rem;
  font-family: var(--font-mono); font-size: 0.83rem;
}
.pathbar .crumb {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink); white-space: nowrap;
}
.pathbar .crumb svg { width: 15px; height: 15px; stroke: var(--neon-violet); fill: none; flex: none; }
.pathbar .crumb--target { color: var(--neon-pink); font-weight: 700; }
.pathbar .sep { color: var(--ink-muted); opacity: 0.7; }
.pathbar .crumb--ink-muted { color: var(--ink-muted); font-style: italic; }
.copy-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.85rem; font-size: 0.78rem; font-family: var(--font-body);
  font-weight: 600; color: var(--neon-violet);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { border-color: var(--neon-violet); }
.copy-btn.is-copied { color: var(--neon-pink); border-color: rgba(255, 110, 199, 0.5); }
.copy-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* ---- Music page: catalog ------------------------------------------------------------------ */
.catalog-tools {
  position: sticky; top: var(--nav-h); z-index: 10;
  background: rgba(11, 10, 18, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.8rem 0; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.search-box { position: relative; max-width: 26rem; }
.search-box svg {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--ink-muted); fill: none; pointer-events: none;
}
.search-box input {
  width: 100%; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink);
  font: inherit; font-size: 0.93rem;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
}
.search-box input::placeholder { color: var(--ink-muted); }
.search-box input:focus { outline: 2px solid var(--neon-pink); outline-offset: 2px; }

.playlist { margin-bottom: 1.6rem; padding: 1.4rem 1.4rem 0.8rem; }
.playlist-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  margin-bottom: 0.8rem;
}
.playlist-head h3 {
  font-size: 1.15rem; font-weight: 800; display: inline-flex; align-items: center; gap: 0.6rem;
}
.playlist-head h3 svg { width: 18px; height: 18px; stroke: var(--neon-pink); fill: none; }
.playlist-head .meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }

.track-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.track-table th {
  text-align: left; font-family: var(--font-mono); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.track-table td {
  padding: 0.52rem 0.6rem; border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem; vertical-align: middle;
}
.track-table tr:last-child td { border-bottom: 0; }
.track-table tbody tr:hover td { background: rgba(182, 156, 255, 0.04); }
.track-table .col-idx { width: 3rem; }
.track-table .col-dur { width: 6.5rem; }
.track-table .col-size { width: 7rem; }
.track-table .col-dl { width: 8.5rem; }
.track-table .t-idx { font-family: var(--font-mono); color: var(--ink-muted); font-size: 0.85rem; }
.track-table .t-name {
  font-family: var(--font-mono); font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.track-table .t-num { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-muted); }
.track-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.32rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--neon-violet);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.track-btn:hover { border-color: var(--neon-pink); color: var(--neon-pink); background: rgba(255, 110, 199, 0.07); }
.track-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex: none; }

.catalog-msg { color: var(--ink-muted); padding: 2rem 0; text-align: center; }
.catalog-msg[hidden] { display: none; }

/* Track selection (checkboxes + per-playlist toggle buttons) */
.track-table .col-check { width: 2.4rem; }
.track-check {
  display: block; width: 24px; height: 24px; margin: 0;
  accent-color: var(--neon-violet); cursor: pointer;
}
.track-table tbody tr.is-selected td { background: rgba(182, 156, 255, 0.1); }
.track-table tbody tr.is-selected:hover td { background: rgba(182, 156, 255, 0.14); }

.playlist-select { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.select-btn {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.32rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--neon-violet);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.select-btn:hover { border-color: var(--neon-violet); }
.select-btn[aria-pressed="true"] { color: var(--neon-pink); border-color: rgba(255, 110, 199, 0.5); }

/* Pagination bar under each track table */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  padding: 0.9rem 0 0.5rem;
}
.page-btn {
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.page-btn:hover:not(:disabled):not([aria-current="page"]) { border-color: var(--neon-violet); color: var(--ink); }
.page-btn:disabled { opacity: 0.35; cursor: default; }
.page-btn[aria-current="page"] {
  background: var(--neon-violet); border-color: var(--neon-violet);
  color: var(--on-neon); font-weight: 700; cursor: default;
}
.page-ellipsis { color: var(--ink-muted); padding: 0 0.2rem; }
.page-info {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 0.85rem; color: var(--ink-muted); letter-spacing: 0.04em;
}

/* Sticky batch-download bar (appears when tracks are selected) */
.select-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(18, 15, 30, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom, 0px));
}
.select-bar[hidden] { display: none; }
.select-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; }
.select-summary { font-weight: 600; }
.select-bar-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 0.6rem; }
.select-bar .btn { padding: 0.65rem 1.3rem; font-size: 0.92rem; }
.select-bar .btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.select-hint { flex-basis: 100%; color: var(--ink-muted); font-size: 0.85rem; }
.select-hint[hidden] { display: none; }
body.has-select-bar { padding-bottom: 150px; }

/* Pointer targets stay usable on touch screens and with motor impairments. */
.nav-menu a, .copy-btn, .track-btn, .select-btn, .page-btn { min-height: 44px; }
.nav-menu a, .copy-btn, .track-btn, .select-btn { display: inline-flex; align-items: center; }
.page-btn { min-width: 44px; }
.search-box input { min-height: 44px; }
.retry-action { margin-top: 0.9rem; }
.catalog-msg .retry-action { margin-inline: auto; }

/* ---- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .hero-home-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 44rem; }
  .hero-stage { max-height: 34rem; }
  .credit-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .dl-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 880px) {
  .nav-menu {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(11, 10, 18, 0.97);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 1.2rem 1.2rem;
  }
  .nav-menu.open { display: flex; }
  .nav-menu li a { display: block; padding: 0.8rem 0.2rem; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .nav-menu li .nav-account { margin-top: 0.55rem; padding: 0.7rem 0.9rem; text-align: center; border: 1px solid rgba(255, 110, 199, 0.38); }
  .nav > .lang-switch { display: none; }
  .nav-language-mobile { display: block; }
  .nav-language-mobile .lang-switch { margin-top: 0.8rem; }
  .nav-toggle { display: inline-flex; }
  .nav-toggle { margin-left: auto; }
  .hero { padding-bottom: 280px; }
  .hero--home { padding: 3.8rem 0; }
  .floor { height: 200px; }
  .horizon { bottom: 200px; }
  .hero--compact { padding-bottom: 190px; }
  .hero--compact .floor { height: 130px; }
  .hero--compact .horizon { bottom: 130px; }
  .signal-head { grid-template-columns: 1fr; gap: 0.75rem; }
  .signal-rail { grid-template-columns: 1fr; }
  .signal-rail::before { display: none; }
  .signal-rail li + li { border-left: 0; border-top: 1px solid var(--line-soft); }
  .steps { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .support-strip { grid-template-columns: 1fr; }
  .support-strip a + a { border-left: 0; border-top: 1px solid var(--line); }
  .track-table .col-size, .track-table .t-size { display: none; }
  .playlist-select { margin-left: 0; width: 100%; }
  body.has-select-bar { padding-bottom: 190px; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-stage { aspect-ratio: 1 / 1; }
  .media-grid--proof { grid-template-columns: 1fr; }
  .media-proof, .media-proof--wide { grid-column: span 1; height: 26rem; }
  .credit-facts div { grid-template-columns: 1fr; gap: 0.25rem; }
  .credit-facts dd { text-align: left; }
  .invite-facts div { grid-template-columns: 1fr; gap: 0.25rem; }
  .invite-actions .btn { width: 100%; justify-content: center; }
  .g-step { grid-template-columns: 40px minmax(0, 1fr); padding: 1.2rem 1.1rem; }
  .g-step::before { font-size: 1.2rem; }
  .footer-nav { margin-left: 0; }
  .pathbar { font-size: 0.76rem; }
  .copy-btn { margin-left: 0; width: 100%; justify-content: center; margin-top: 0.3rem; }
  .track-table .col-idx, .track-table .t-idx { display: none; }
  .btn { padding: 0.9rem 1.4rem; font-size: 0.95rem; }
  .contact-direct-actions { grid-template-columns: 1fr; }
  .page-info { margin-left: 0; flex-basis: 100%; padding-top: 0.3rem; }
}
@media (max-width: 400px) {
  .hero-title .t1 { letter-spacing: 0.34em; text-indent: 0.34em; }
  .lang-switch button { padding: 0.32rem 0.55rem; }
  .nav { gap: 0.8rem; }
  .track-table .col-dur, .track-table .t-dur { display: none; }
  .track-table .col-check { width: 1.9rem; }
  .select-bar-inner { gap: 0.5rem 0.8rem; }
  .select-summary { font-size: 0.92rem; flex-basis: 100%; }
  .select-bar-actions { margin-left: 0; width: 100%; }
  .select-bar .btn { flex: 1; padding: 0.6rem 0.9rem; font-size: 0.9rem; }
  .select-hint { font-size: 0.8rem; }
  body.has-select-bar { padding-bottom: 210px; }
}

/* ---- Reduced motion ---------------------------------------------------------------------------- */
/* Sticky mobile download CTA: phone visitors keep the one primary action in
   thumb reach; the download section itself offers the account link. */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.6rem clamp(1rem, 4vw, 2rem) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(11, 10, 18, 0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; }
  body[data-page="home"] { padding-bottom: 84px; }
  .contact-dock { right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  body[data-page="home"] .contact-dock { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .contact-dock-live { width: 34px; padding: 0; justify-content: center; font-size: 0; }
  .contact-dock-action { min-width: 56px; padding-inline: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eq span { animation: none !important; }
  .btn, .feature-card, .copy-btn, .track-btn, .select-btn, .page-btn, .contact-dock { transition: none; }
  .btn-primary:hover, .btn-ghost:hover, .feature-card:hover { transform: none; }
}