/* Beat Protector — shared "icy glass" styles for every page */

:root {
  --ink: #0d2236;
  --ink-soft: #33526e;
  --link: #0a5f8f;
  --glow: rgba(56, 189, 248, 0.4);
  --glow-strong: rgba(125, 211, 252, 0.7);
  --glass: rgba(236, 244, 251, 0.45);
  --glass-strong: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.7);
  --shadow: 0 24px 48px rgba(15, 40, 70, 0.18);
  --danger: #b42318;
  --danger-bg: rgba(254, 228, 226, 0.75);
  --success: #0f6b4c;
  --radius: 30px;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-body: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.55;
  background: #809cb9;
}

/* icy backdrop, fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 700px at 8% -10%, #cddbe9 0%, rgba(205, 219, 233, 0) 60%),
    radial-gradient(800px 800px at 100% 65%, #2c547f 0%, rgba(44, 84, 127, 0) 62%),
    radial-gradient(760px 520px at 35% 115%, #b1c5d9 0%, rgba(177, 197, 217, 0) 60%),
    radial-gradient(320px 320px at 72% 12%, rgba(125, 211, 252, 0.4) 0%, rgba(125, 211, 252, 0) 70%);
}

a { color: var(--link); }
a:hover { color: var(--ink); }

h1, h2, .display {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h1 { font-size: 38px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; font-weight: 700; }

.muted { color: var(--ink-soft); }
.hidden { display: none !important; }

/* ---------- Glass surfaces ---------- */
/* Realistic glass: thick, clear slabs. A convex face (light pools at the top),
   Fresnel edges (brighter at the rim than the centre), a bevel lit top-left and
   shaded bottom-right, a sliver of side wall below the face, and a soft caustic
   glow in the shadow. White/shadow overlays only, so page colours stay the same. */
.glass, .page-card {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--radius);
}
.glass, .page-card, .glass-sm, .btn:not(.btn-ghost), .player-bar {
  background:
    /* convex face: light pools on the upper half, falls off toward the bottom */
    radial-gradient(130% 85% at 50% -10%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(8, 28, 52, 0.09) 100%),
    /* Fresnel: edges reflect more than the centre */
    radial-gradient(150% 130% at 50% 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.14) 90%, rgba(255, 255, 255, 0.26) 100%),
    rgba(226, 241, 250, 0.08);
  box-shadow:
    /* bevel: bright lit edge top-left, shaded edge bottom-right */
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.65),
    inset 0 -1.5px 0 rgba(8, 28, 52, 0.22),
    inset -1.5px 0 0 rgba(8, 28, 52, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    /* thickness: a wide soft band inside the rim */
    inset 18px 20px 26px -20px rgba(255, 255, 255, 0.75),
    inset -22px -26px 34px -24px rgba(8, 28, 52, 0.38),
    /* light caught inside the slab along the bottom edge */
    inset 0 -10px 14px -12px rgba(255, 255, 255, 0.6),
    /* faint teal of thick glass edges */
    inset 0 0 0 4px rgba(140, 215, 205, 0.08),
    /* the slab's lower side wall */
    0 2px 0 -0.5px rgba(255, 255, 255, 0.55),
    0 4px 0 -1px rgba(160, 200, 225, 0.35),
    /* lifted off the page: long soft shadow + tight contact shadow */
    0 34px 56px -26px rgba(8, 28, 52, 0.55),
    0 10px 18px -8px rgba(8, 28, 52, 0.28),
    /* caustic: light focused through the glass onto the page */
    0 40px 56px -34px rgba(150, 235, 255, 0.7);
  -webkit-backdrop-filter: blur(2px) saturate(185%) brightness(1.07) contrast(1.04);
  backdrop-filter: blur(2px) saturate(185%) brightness(1.07) contrast(1.04);
}
.glass h1, .page-card h3 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
/* polished rim: brightest where the bevel catches the light, faint dispersion between */
.glass::before, .page-card::before, .glass-sm::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  z-index: -1;
  background: conic-gradient(from 200deg,
    rgba(255, 255, 255, 1) 0deg, rgba(255, 255, 255, 0.6) 30deg, rgba(255, 190, 225, 0.4) 50deg, rgba(160, 235, 255, 0.55) 68deg,
    rgba(255, 255, 255, 0.1) 100deg, rgba(8, 28, 52, 0.18) 150deg,
    rgba(255, 255, 255, 0.75) 185deg, rgba(255, 255, 255, 0.35) 210deg, rgba(170, 225, 255, 0.45) 235deg,
    rgba(255, 255, 255, 0.08) 280deg, rgba(8, 28, 52, 0.15) 330deg, rgba(255, 255, 255, 1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* soft highlight sitting on the curve of the top edge */
.glass::after, .page-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0) 80%);
  pointer-events: none;
}
/* Small glass pieces (buttons, pills, fields): same rim, lighter shadow */
.glass-sm {
  position: relative;
  isolation: isolate;
}
/* Pressed-in glass (terms, link boxes, dropdowns) */
.glass-well {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 2px 10px rgba(15, 40, 70, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.6);
}
.eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.badge { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

/* ---------- Buttons ---------- */
/* Glass pills with dark text. A leading icon sits in a solid dark disc. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  z-index: -1;
  background: conic-gradient(from 200deg,
    rgba(255, 255, 255, 1) 0deg, rgba(255, 255, 255, 0.6) 30deg, rgba(255, 190, 225, 0.4) 50deg, rgba(160, 235, 255, 0.55) 68deg,
    rgba(255, 255, 255, 0.1) 100deg, rgba(8, 28, 52, 0.18) 150deg,
    rgba(255, 255, 255, 0.75) 185deg, rgba(255, 255, 255, 0.35) 210deg, rgba(170, 225, 255, 0.45) 235deg,
    rgba(255, 255, 255, 0.08) 280deg, rgba(8, 28, 52, 0.15) 330deg, rgba(255, 255, 255, 1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.btn:hover { color: var(--ink); transform: translateY(-1px); background-color: rgba(255, 255, 255, 0.45); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 12px 26px -12px rgba(15, 40, 70, 0.4); }
.btn-block { width: 100%; }
/* leading icon → dark disc */
.btn > svg:first-child {
  width: 40px; height: 40px; padding: 11px; margin-left: -18px; flex-shrink: 0;
  border-radius: 50%; background: var(--ink); color: #fff; stroke: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(56, 189, 248, 0.45);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.btn-ghost::before { display: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.35); }

.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-sm > svg:first-child { width: 30px; height: 30px; padding: 8px; margin-left: -12px; }

/* ---------- Forms ---------- */
label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.form-group { margin-bottom: 18px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 18px;
  border: 0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 70%),
    rgba(236, 244, 251, 0.25);
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 6px 7px 14px -9px rgba(255, 255, 255, 0.7),
    inset -8px -9px 16px -10px rgba(15, 40, 70, 0.22),
    0 8px 18px -12px rgba(15, 40, 70, 0.3);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: 0;
  transition: box-shadow 0.15s, border-color 0.15s;
}
textarea { padding: 14px 18px; min-height: 160px; line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(13, 34, 54, 0.45); }
input:focus, textarea:focus { background-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px rgba(56, 189, 248, 0.35); }

.hint { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
/* password requirements: each rule ticks off as it's met */
.pw-rules { list-style: none; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; color: var(--ink-soft); }
.pw-rules li { display: flex; align-items: center; gap: 7px; }
.pw-rules li[hidden] { display: none; }
.pw-rules li::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(13, 34, 54, 0.3); }
.pw-rules li.ok { color: var(--ink); }
.pw-rules li.ok::before { background: var(--ink) 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.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: none; }
@media (max-width: 420px) { .pw-rules { grid-template-columns: 1fr; } }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
/* glass checkbox */
.checkbox-row input {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin: -3px 0 0; flex-shrink: 0; border-radius: 9px; cursor: pointer;
  background: rgba(236, 244, 251, 0.3);
  box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset -5px -6px 10px -7px rgba(15, 40, 70, 0.3), 0 6px 14px -8px rgba(15, 40, 70, 0.35);
}
.checkbox-row input:checked {
  background: rgba(236, 244, 251, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2236' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.checkbox-row input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6); }
.checkbox-row label { margin: 0; font-weight: 500; cursor: pointer; }

.alert {
  display: none;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--danger-bg);
  border: 1px solid rgba(180, 35, 24, 0.3);
  color: var(--danger);
  font-size: 14px;
  white-space: pre-line;
}

/* ---------- App shell (sidebar pages) ---------- */
.app {
  display: flex;
  gap: 24px;
  min-height: 100vh;
  padding: 28px;
}

.sidebar {
  width: 252px;
  flex-shrink: 0;
  padding: 26px 16px 18px;
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 28px;
  height: calc(100vh - 56px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.logo > span > span { font-weight: 300; }
.logo > span, .btn { white-space: nowrap; }
.logo svg, .logo-mark { flex-shrink: 0; }
.logo-mark { width: 24px; height: 24px; object-fit: contain; }
.sidebar .logo { padding: 0 10px 34px; }

.sidebar nav { display: flex; flex-direction: column; gap: 6px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-item:hover { color: var(--ink); background: rgba(255, 255, 255, 0.4); }
.nav-item.active {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  font-weight: 700;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 70%),
    rgba(236, 244, 251, 0.3);
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 6px 7px 14px -9px rgba(255, 255, 255, 0.75),
    inset -8px -9px 16px -10px rgba(15, 40, 70, 0.28), 0 10px 22px -12px rgba(15, 40, 70, 0.35);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-group { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.45); }
.nav-group .nav-item { color: var(--ink-soft); font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 4px 0;
}
.page-header p { margin-top: 6px; font-size: 16px; color: var(--ink-soft); }
.page-header .eyebrow { margin-bottom: 10px; }

/* ---------- Cards in lists (My Pages / Agreements) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
  align-items: start;
}

.page-card {
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.page-card h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 650; letter-spacing: -0.02em; font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
.page-card p { font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.page-card a { font-weight: 600; overflow-wrap: anywhere; }
/* label / value rows */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.kv dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.kv dd { overflow-wrap: anywhere; }
/* page link + copy */
.link-pill { display: flex; align-items: center; gap: 10px; border-radius: 999px; padding: 6px 6px 6px 16px; }
.link-pill a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: none; }
.link-pill a:hover { text-decoration: underline; }
.copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.copy-btn svg { width: 15px; height: 15px; }

/* dropdowns (terms, licensed files): pressed-in glass with Show / Hide */
.page-card details { border-radius: 20px; background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 10px rgba(15, 40, 70, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6); }
.page-card summary {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-card summary::-webkit-details-marker { display: none; }
.page-card summary::after { content: "Show"; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.page-card details[open] > summary::after { content: "Hide"; }
.page-card details[open] > summary { padding-bottom: 6px; }
.page-card summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5); border-radius: 20px; }
.page-card pre {
  padding: 6px 16px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}

.load-more-row { display: flex; justify-content: center; }

/* ---------- Privacy policy ---------- */
.policy { padding: 50px 0 10px; }
.policy-card { max-width: 820px; margin: 0 auto; padding: 44px 46px; border-radius: 40px; }
.policy-card h1 { font-size: 44px; margin: 10px 0 8px; }
.policy-updated { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.policy-body { margin-top: 28px; font-size: 15.5px; line-height: 1.7; }
.policy-body:empty { display: none; }
/* In the app layout (signed in), the card sits in the main column */
.policy-app .policy-card { margin: 0; width: 100%; }
/* Hold the page until we know which layout to show (max 2.5s) */
.auth-pending .site, .auth-pending .app { visibility: hidden; }
.policy-body h2 { font-size: 22px; margin: 28px 0 10px; }
.policy-body p, .policy-body ul { margin-bottom: 14px; }
.policy-body ul { padding-left: 20px; }
.policy-body h3 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
.policy-body li { margin-bottom: 6px; }
.policy-body ul ul { margin: 6px 0 0; }
.policy-body a { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Account page ---------- */
.account-col { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.account-col .page-card p { font-size: 14.5px; line-height: 1.6; }
.danger-card h3 { color: var(--danger); }
.danger-card form { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.danger-card .form-group { margin-bottom: 0; }
.btn-danger { color: var(--danger); align-self: flex-start; }
.btn-danger:hover { color: var(--danger); background-color: rgba(254, 228, 226, 0.55); }
.form-msg:empty { display: none; }
.account-legal { padding: 2px 6px 0; font-size: 13px; }
.account-legal a { font-weight: 600; color: var(--ink-soft); }
.card-grid > .empty, .card-grid > .status-msg, .card-grid > .error-msg { grid-column: 1 / -1; }
.licensed-files .lf-body { padding: 4px 16px 14px; }
.licensed-files .lf-folder { margin-bottom: 8px; }
.licensed-files ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.licensed-files li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.licensed-files .lf-name { color: var(--ink); overflow-wrap: anywhere; }
.licensed-files .lf-size { color: var(--ink-soft); flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; }
.empty { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.status-msg { color: var(--ink-soft); }
.error-msg { color: var(--danger); }

/* ---------- Downloads page ---------- */
/* No inner scrolling: the table grows with the list and "Show more" loads the next 50 */
.dl-table-wrap { padding: 8px 12px; }
.dl-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.dl-table th:nth-child(1) { width: 26%; }
.dl-table th:nth-child(2) { width: 28%; }
.dl-table th:nth-child(3) { width: 15%; }
.dl-table th:nth-child(4) { width: 17%; }
.dl-table th:nth-child(5) { width: 14%; }
.dl-table td a { overflow-wrap: anywhere; }
.dl-row.is-open td { border-bottom: 0; }
.dl-terms-btn { border: 0; background: none; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--link); cursor: pointer; text-decoration: underline; }
.dl-terms-btn:hover { color: var(--ink); }
.dl-terms-row td { padding-top: 0 !important; }
.dl-terms-label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.dl-terms-row pre { margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.7); font-family: var(--font-body); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 10px; border-bottom: 1px solid rgba(13, 34, 54, 0.12); }
.dl-table td { padding: 12px 10px; border-bottom: 1px solid rgba(13, 34, 54, 0.08); vertical-align: top; }
.dl-table tr:last-child td { border-bottom: 0; }
.dl-file { font-weight: 700; overflow-wrap: anywhere; }
.dl-sub { display: block; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.dl-empty { text-align: center; padding: 32px 10px !important; color: var(--ink-soft); }

/* ---------- Avatar ---------- */
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 18px;
}

/* ---------- Centered single-card pages (login, signup, landing) ---------- */
.center-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 18px;
}
.auth-card { width: 100%; max-width: 420px; padding: 36px 32px; }
.auth-card h1 { font-size: 32px; text-align: center; margin-bottom: 26px; }
.auth-card .link { display: block; text-align: center; margin-top: 18px; font-size: 14px; font-weight: 600; text-decoration: none; }
.action-msg { text-align: center; color: var(--ink-soft); font-size: 15px; margin: -14px 0 22px; overflow-wrap: anywhere; }
#nextBtn { margin-top: 4px; }
/* Continue with Google: glass pill with the standard multicolour "G" */
.btn-google > svg:first-child { width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 0; background: none; box-shadow: none; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(13, 34, 54, 0.08); }
.auth-card .error .text-btn { margin: 4px 0 0; font-size: 14px; }
.auth-card .error { min-height: 20px; margin-top: 12px; font-size: 14px; color: var(--danger); text-align: center; }

/* ---------- Dashboard ---------- */
.top-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.top-bar .logout-link { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.dash-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 20px 0 60px; }
.verify-banner { display: none; width: 100%; max-width: 680px; padding: 18px 22px; }
.verify-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.verify-text { flex: 1; min-width: 220px; font-size: 14px; color: var(--ink-soft); }
.verify-text strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.verify-status { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.welcome-card { width: 100%; max-width: 680px; padding: 44px 46px 40px; border-radius: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.welcome-card h1 { font-size: 44px; }
.welcome-card p { font-size: 16px; color: var(--ink-soft); max-width: 520px; }
.welcome-card .btn { margin-top: 14px; min-height: 58px; padding: 0 26px; }

/* ---------- Create page ---------- */
.create-col { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.create-card { padding: 30px 32px; }
.result-card { display: flex; flex-direction: column; gap: 14px; }
.result-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.9); }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.result-actions .btn { flex: 1; min-width: 160px; }
.preview-box { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--ink); padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 10px rgba(15, 40, 70, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }

/* ---------- Artist landing page ---------- */
.center-page > .container, body > .container { width: 100%; max-width: 640px; padding: 38px 38px 34px; border-radius: 44px; }
body > .container { margin: 60px auto; }
.container h1 { font-size: 32px; margin-bottom: 8px; }
.producer { font-size: 15px; color: var(--ink-soft); margin-bottom: 22px; }
.producer strong { color: var(--ink); }
.sign-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.sign-tile { width: 68px; height: 68px; border-radius: 22px; flex-shrink: 0; display: grid; place-items: center; }
.sign-tile svg { width: 32px; height: 32px; }
.sign-head h1 { font-size: 34px; line-height: 1.05; margin: 4px 0 2px; overflow-wrap: anywhere; }
.sign-head .producer { margin: 0; }
.terms-heading { display: flex; justify-content: space-between; margin: 0 6px 10px; }
.terms {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 24px;
  padding: 18px 20px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 10px rgba(15, 40, 70, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.65;
}
/* label inside the glass field */
.field { display: block; margin: 0; padding: 10px 18px 4px; border-radius: 20px; cursor: text; }
.field > span { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.field input[type] { min-height: 34px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; font-weight: 600; }
.field input[type]:focus { background: none; box-shadow: none; }
.field:focus-within { box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px rgba(56, 189, 248, 0.35); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.field-grid .full { grid-column: 1 / -1; }
#licenseForm .checkbox-row { margin: 4px 0 8px; padding: 8px 4px; }
#licenseForm .record-note { margin: 0 0 10px; }
#licenseForm .error { display: none; font-size: 13px; color: var(--danger); margin-bottom: 8px; }
#licenseForm .btn { margin-top: 12px; min-height: 66px; font-size: 18px; }
#licenseForm .btn > svg:first-child { width: 46px; height: 46px; padding: 13px; }
.landing-footer { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.landing-footer > span > span { font-weight: 600; }
.landing-footer svg, .landing-footer .logo-mark { width: 16px; height: 16px; }

/* ---------- Create page: beat files source ---------- */
.source-panel { padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 10px rgba(15, 40, 70, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.folder-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.folder-path { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.folder-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin-bottom: 12px; }
.folder-item { text-align: left; padding: 10px 16px; border-radius: 999px; border: 0; background: rgba(236, 244, 251, 0.3);
  box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset -6px -7px 12px -9px rgba(15, 40, 70, 0.25); font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.folder-item { display: flex; justify-content: space-between; align-items: center; }
.folder-item::after { content: "›"; font-size: 18px; color: var(--ink-soft); }
.folder-item:hover { background: rgba(255, 255, 255, 0.8); }
.folder-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.folder-selected { margin-top: 12px; font-size: 14px; overflow-wrap: anywhere; }
.text-btn { margin-top: 10px; border: 0; background: none; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--link); cursor: pointer; text-decoration: underline; }

/* ---------- Licensed files page ---------- */
/* Layout: files on the left, visualizer in the middle, player docked at the bottom */
.player-app {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px;
  /* room for the player bar: --pb-h is its measured height (set by files.html) */
  padding: 20px 20px calc(var(--pb-h, 96px) + 40px);
}
.library { display: flex; flex-direction: column; min-height: 0; padding: 24px 18px 18px; }
.library-head { padding: 0 6px; }
.library-head h1 { font-size: 26px; margin-bottom: 4px; }
.library-head .producer { margin-bottom: 16px; }
.library .file-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 2px 6px 6px; }
.library-foot { padding: 14px 6px 0; border-top: 1px solid rgba(13, 34, 54, 0.1); margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.library-foot .files-note { margin: 0; font-size: 12px; }
.library-foot .landing-footer { align-self: flex-start; }

.stage { display: flex; flex-direction: column; min-height: 0; padding: 30px 34px; overflow: hidden; }
.stage-head { position: relative; z-index: 2; min-width: 0; }
.stage-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.stage-title { font-size: 32px; margin: 6px 0 4px; overflow-wrap: anywhere; }
.stage-sub { font-size: 14px; color: var(--ink-soft); min-height: 1.4em; }
.viz { flex: 1; min-height: 0; width: 100%; display: block; margin-top: 12px; }

.file-list { display: flex; flex-direction: column; gap: 10px; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 22px; background: rgba(236, 244, 251, 0.2);
  box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset -8px -9px 16px -10px rgba(15, 40, 70, 0.22), 0 8px 18px -12px rgba(15, 40, 70, 0.3);
  transition: background 0.15s, box-shadow 0.15s; }
.file-row.is-current { background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 1.5px 0.5px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 22px rgba(56, 189, 248, 0.35); }
.file-info { flex: 1; min-width: 0; }
.file-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.file-meta { font-size: 13px; color: var(--ink-soft); }
.files-note { margin-top: 20px; }

.row-play { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(13, 34, 54, 0.15); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.row-play:hover { box-shadow: 0 0 16px rgba(56, 189, 248, 0.5); }
.row-play svg { width: 18px; height: 18px; fill: currentColor; }
.row-play .i-pause, .file-row.is-playing .row-play .i-play { display: none; }
.file-row.is-playing .row-play .i-pause { display: block; }
.file-row.is-playing .row-play { background: var(--ink); color: #fff; }
.row-play-off { cursor: default; background: rgba(255, 255, 255, 0.4); color: var(--ink-soft); }
.row-play-off:hover { box-shadow: none; }
.row-dl { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(13, 34, 54, 0.15); background: rgba(255, 255, 255, 0.6); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 0.15s, background 0.15s; }
.row-dl:hover:not(:disabled) { background: #fff; box-shadow: 0 0 16px rgba(56, 189, 248, 0.5); }
.row-dl:disabled { opacity: 0.45; cursor: default; }
.row-dl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-dl:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6); }
.row-play-off svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dl-progress { display: block; width: 100%; height: 6px; margin-top: 6px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(13, 34, 54, 0.12); appearance: none; }
.dl-progress::-webkit-progress-bar { background: rgba(13, 34, 54, 0.12); }
.dl-progress::-webkit-progress-value { background: var(--ink); }
.dl-progress::-moz-progress-bar { background: var(--ink); }
.dl-status { font-size: 12px; color: var(--ink-soft); min-height: 0; }
.dl-status:empty { display: none; }
.dl-direct { font-weight: 700; }

/* Player bar */
.player-bar {
  position: fixed; left: 20px; right: 20px; bottom: 16px; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 18px;
  padding: 14px 20px; border-radius: 30px;
}
.pb-track { min-width: 0; }
.pb-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-controls { display: flex; justify-content: center; align-items: center; gap: 14px; }
.pb-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.7); }
.pb-btn:disabled { opacity: 0.35; cursor: default; }
.pb-btn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pb-play { width: 46px; height: 46px; background: var(--ink); color: #fff; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.4), 0 8px 22px rgba(56, 189, 248, 0.4); position: relative; }
.pb-play:hover:not(:disabled) { background: var(--ink); }
.pb-play svg { stroke: none; }   /* solid icons: an outline would merge the pause bars */
.pb-play .i-pause, .player-bar.is-playing .pb-play .i-play { display: none; }
.player-bar.is-playing .pb-play .i-pause { display: block; }
.pb-play .i-spin { display: none; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(56, 189, 248, 0.25); border-top-color: #38bdf8; animation: pb-spin 0.8s linear infinite; }
.player-bar.is-loading .pb-play .i-spin { display: block; }
@keyframes pb-spin { to { transform: rotate(360deg); } }
.pb-seek { display: flex; align-items: center; gap: 10px; }
.pb-time { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 36px; text-align: center; }
.pb-range-wrap { position: relative; flex: 1; height: 20px; display: flex; align-items: center; }
.pb-buffered { position: absolute; left: 0; height: 4px; border-radius: 999px; background: rgba(13, 34, 54, 0.18); pointer-events: none; }
.player-bar input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 0; border-radius: 999px; background: rgba(13, 34, 54, 0.1); position: relative; cursor: pointer; }
.player-bar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 10px rgba(56, 189, 248, 0.7); }
.player-bar input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.pb-volume { display: flex; align-items: center; gap: 6px; width: 130px; }
.pb-small { width: 30px; height: 30px; flex-shrink: 0; }
.pb-toggle { position: relative; color: var(--ink-soft); }
.pb-toggle svg { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb-toggle[aria-pressed="true"], .pb-toggle.is-on { color: var(--link); }
.pb-toggle[aria-pressed="true"]::after, .pb-toggle.is-on::after { content: ""; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pb-one { display: none; position: absolute; top: 3px; right: 3px; font-size: 9px; font-weight: 700; line-height: 1; }
.pb-toggle.is-one .pb-one { display: block; }
.pb-small svg { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.pb-small .i-muted, .player-bar.is-muted .pb-small .i-vol { display: none; }
.player-bar.is-muted .pb-small .i-muted { display: block; }
.pb-error { grid-column: 1 / -1; margin: -4px 0 0; font-size: 13px; color: var(--danger); }
.player-bar:focus-within, .row-play:focus-visible, .pb-btn:focus-visible { outline: none; }
.row-play:focus-visible, .pb-btn:focus-visible { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6); }

/* ---------- Home page ---------- */
.site { max-width: 1100px; margin: 0 auto; padding: 24px 20px 40px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 22px; border-radius: 999px; }
.site-nav { display: flex; gap: 10px; }
.hero { text-align: center; padding: 110px 0 90px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero h1 { font-size: 60px; max-width: 780px; }
.hero p { font-size: 20px; color: var(--ink-soft); max-width: 600px; }
.cta-group { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.section { padding: 50px 0; }
.section-title { text-align: center; font-size: 36px; margin-bottom: 36px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.feature { padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.feature p { color: var(--ink-soft); font-size: 15px; }
.feature-icon, .step-number {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(236, 244, 251, 0.3);
  box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 6px 7px 14px -9px rgba(255, 255, 255, 0.75), inset -8px -9px 16px -10px rgba(15, 40, 70, 0.28), 0 10px 22px -12px rgba(15, 40, 70, 0.35);
}
.step-number { font-family: var(--font-mono); font-size: 18px; font-weight: 500; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.split-card { padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.split-card h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; letter-spacing: -0.025em; font-size: 26px; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; color: var(--ink-soft); }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { flex-shrink: 0; margin-top: 3px; color: var(--ink); }
.site-footer { margin-top: 50px; padding: 40px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 14px; }
.footer-note { max-width: 560px; font-size: 13px; }
.footer-links a { margin: 0 8px; font-weight: 600; text-decoration: none; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .app { flex-direction: column; padding: 16px; gap: 16px; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .sidebar .logo { padding: 0 8px; width: 100%; margin-bottom: 8px; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav-item { width: auto; padding: 10px 12px; }
  .nav-group { margin: 0 0 0 auto; padding: 0; border: 0; }
  h1 { font-size: 30px; }
  .card-grid { grid-template-columns: 1fr; }
  .dl-table thead { display: none; }
  .dl-table, .dl-table tbody, .dl-table tr, .dl-table td { display: block; width: 100%; }
  .dl-table tr { padding: 10px 0; border-bottom: 1px solid rgba(13, 34, 54, 0.1); }
  .dl-table td { border: 0; padding: 4px 6px; }
  .dl-table th { width: auto !important; }
  .dl-terms-row[hidden] { display: none; }
  .dl-row.is-open { border-bottom: 0; padding-bottom: 4px; }
  .dl-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
  .hero { padding: 70px 0 50px; }
  .hero h1 { font-size: 40px; }
  .split { grid-template-columns: 1fr; }
  .site-header { border-radius: 28px; }
  .welcome-card { padding: 30px 24px; border-radius: 32px; }
  .policy { padding-top: 30px; }
  .policy-card { padding: 30px 22px; border-radius: 32px; }
  .policy-card h1 { font-size: 32px; }
  .welcome-card h1 { font-size: 32px; }
  .field-grid { grid-template-columns: 1fr; }
  .sign-head h1 { font-size: 27px; }
  .center-page > .container { border-radius: 34px; }
  .sidebar { border-radius: 28px; }
  .create-card, .auth-card, .center-page > .container { padding: 26px 20px; }
  .player-app { height: auto; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px 12px calc(var(--pb-h, 170px) + 28px); }
  .stage { order: -1; height: 260px; padding: 20px 20px 14px; }
  .stage-title { font-size: 22px; }
  .library .file-list { overflow: visible; }
  .player-bar { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; left: 10px; right: 10px; bottom: 10px; }
  .pb-track { text-align: center; }
  .pb-volume { display: none; }
}
@media (max-width: 420px) {
  .site-header { padding: 10px 10px 10px 16px; gap: 8px; }
  .site-header .logo { font-size: 16px; gap: 8px; }
  .site-nav { gap: 6px; }
  .site-nav .btn-sm { padding: 0 16px; }
  .site-nav .btn-ghost { display: none; }   /* the hero has its own "How It Works" button */
}