/*
 * ============================================================
 *  Tempo — App Stylesheet
 * ============================================================
 *  Single CSS file. No build step. No Tailwind. No PostCSS.
 *
 *  Organized by:
 *    1. Reset & base
 *    2. Design tokens (CSS variables)
 *    3. Layout primitives
 *    4. Components (buttons, fields, cards, badges)
 *    5. Page-specific rules (landing, auth, operator)
 *    6. Utilities
 * ============================================================
 */

/* ---------- 1. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
/* Selection: subtle indigo wash, full-contrast text */
::selection     { background: rgba(129, 140, 248, 0.32); color: #fff; }
::-moz-selection{ background: rgba(129, 140, 248, 0.32); color: #fff; }

/* Scrollbars: thin, on-brand, hover-brightens.
   - Webkit/Chromium: ::-webkit-scrollbar-* primitives
   - Firefox:        scrollbar-width + scrollbar-color
   The `body` rule applies the Firefox style to the page; per-element
   overrides cascade naturally. */
html { scrollbar-width: thin; scrollbar-color: rgba(129, 140, 248, 0.25) transparent; }
::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        {
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.25), rgba(67, 56, 202, 0.25));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover  {
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.45), rgba(67, 56, 202, 0.45));
  background-clip: padding-box;
  border: 2px solid transparent;
}
::-webkit-scrollbar-corner       { background: transparent; }

a { color: var(--accent-light); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Respect reduced-motion preference. Browser-level user setting; we
   collapse all non-essential animation/transition durations. The 0.01ms
   value (instead of 0) is the standard incantation that still allows
   transitionend events to fire so JS-based UIs don't break. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 2. Design tokens ---------- */
:root {
  /* Backgrounds */
  --bg: #050714;
  --bg-2: #0a0d22;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.08);

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* Text */
  --text: #ffffff;
  --text-mute: rgba(255, 255, 255, 0.65);
  --text-mute-2: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.35);

  /* Brand */
  --accent: #4338ca;
  --accent-light: #818cf8;
  --accent-pale: #c7d2fe;
  --accent-glow: rgba(129, 140, 248, 0.4);

  /* Semantic */
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --success-border: rgba(74, 222, 128, 0.3);
  --danger: #f472b6;
  --danger-bg: rgba(244, 114, 182, 0.12);
  --danger-border: rgba(244, 114, 182, 0.3);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.12);
  --warn-border: rgba(251, 191, 36, 0.3);

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- 3. Layout primitives ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.center { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px; }

/* Ambient background — used on landing + auth */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center top, black 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 60%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.orb-1 { width: 700px; height: 700px; top: -200px; left: -100px; background: radial-gradient(circle, rgba(67,56,202,0.5), transparent 70%); animation: floatA 20s ease-in-out infinite; }
.orb-2 { width: 500px; height: 500px; top: 100px; right: -100px; background: radial-gradient(circle, rgba(124,58,237,0.35), transparent 70%); animation: floatB 24s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px, 60px) scale(1.1); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px, 80px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* Page contents above ambient */
.page { position: relative; z-index: 1; }

/* ---------- 4. Components ---------- */

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--text); }
.logo-mark {
  /* Tempo logo: rounded square with a play-triangle glyph inside.
     The play shape is an inline SVG data URI layered ABOVE the
     gradient via background-image stacking. No markup change to
     the existing <div class="logo-mark"> sites. */
  width: 28px; height: 28px; border-radius: 8px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M11 8.5 L19.5 14 L11 19.5 Z' fill='white' opacity='0.95'/></svg>") center / 100% 100% no-repeat,
    linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
}
.logo-mark::after {
  /* Subtle top-left sheen to give the gradient surface depth. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%);
  pointer-events: none;
}
.logo-lg .logo-mark { width: 36px; height: 36px; border-radius: 10px; }
.logo-lg { font-size: 22px; }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(165, 180, 252, 0.85);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 10px var(--accent-light);
}

/* Headings */
.h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; }
.h2 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }

.shimmer {
  background: linear-gradient(135deg, #fff 0%, var(--accent-pale) 40%, var(--accent-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 200%;
  animation: shimmerMove 8s ease-in-out infinite;
}
@keyframes shimmerMove { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Cards & glass surfaces.
   The shadow + inner highlight is what makes glass feel "lifted" rather
   than flat. The inset 1px gradient at top mimics a sheen — you'd see
   the same on real frosted glass under a soft top-light. */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,    /* top sheen */
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,           /* bottom shadow */
    0 8px 24px -12px rgba(0, 0, 0, 0.5),         /* soft outer */
    0 24px 48px -24px rgba(0, 0, 0, 0.4);        /* deeper outer */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Hover: only on cards that opt in via .glass-interactive (or anchor/button
   wrappers around them). Don't apply to all glass — settings sections etc.
   shouldn't lift on hover. */
.glass-interactive,
a.glass, button.glass {
  cursor: pointer;
}
.glass-interactive:hover,
a.glass:hover, button.glass:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 16px 32px -12px rgba(0, 0, 0, 0.6),
    0 32px 64px -24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(129, 140, 248, 0.08);          /* faint indigo halo */
}
.glass-deep {
  background: rgba(15, 17, 35, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 60px 120px -40px rgba(67, 56, 202, 0.15);    /* faint indigo bloom */
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: var(--r);
  border: none; cursor: pointer; line-height: 1;
  /* Specific properties only — avoids re-painting background-image (gradients)
     mid-transition which causes flicker on some GPUs. */
  transition: background-color 0.18s ease,
              border-color     0.18s ease,
              color            0.18s ease,
              transform        0.18s ease,
              box-shadow       0.18s ease,
              opacity          0.18s ease;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
  color: #fff;
  box-shadow:
    0 6px 20px -6px rgba(67, 56, 202, 0.6),
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 0 0 1px rgba(129, 140, 248, 0.4) inset;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #9aa3fa 0%, #5b51e0 100%);
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px -6px rgba(67, 56, 202, 0.7),
    0 0 32px rgba(129, 140, 248, 0.4),
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px rgba(129, 140, 248, 0.55) inset;
}
.btn-secondary {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(20px);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }
.btn-ghost {
  background: transparent; color: var(--text-mute);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface); }
.btn-danger {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-border);
}
.btn-danger:hover:not(:disabled) { background: rgba(244, 114, 182, 0.18); }
/* Sizes */
.btn-sm  { padding: 9px 16px;  font-size: 13px; }
.btn-lg  { padding: 17px 32px; font-size: 15.5px; border-radius: var(--r-lg); }
.btn-block, .btn.w-full { width: 100%; }
.btn-arrow svg { transition: transform 0.2s; width: 14px; height: 14px; }
.btn-arrow:hover svg { transform: translateX(2px); }

/* Form fields */
.field { margin-bottom: 16px; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.field-input, .field-textarea, .field-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit; font-size: 14px;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-faint); }
.field-input:focus, .field-textarea:focus, .field-select:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.6);
  background: var(--surface-3);
  /* Double-ring focus halo: tight inner + soft outer. The two-layer
     shadow is what makes Apple/macOS form focus look "premium" rather
     than the cheap-looking single 4px ring. */
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 5px rgba(129, 140, 248, 0.08),
    0 0 24px rgba(129, 140, 248, 0.1);
}
/* Disabled state — clearly inert. */
.field-input:disabled, .field-textarea:disabled, .field-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Native form validity. We only style :invalid AFTER user interaction
   (the :user-invalid pseudo-class) so empty required fields don't show
   red on first paint. Falls back gracefully where unsupported. */
.field-input:user-invalid, .field-textarea:user-invalid, .field-select:user-invalid {
  border-color: rgba(244, 114, 182, 0.5);
}
.field-input:user-invalid:focus, .field-textarea:user-invalid:focus {
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.1);
}
/* Kill number input spinners — on dark UIs they look broken. */
.field-input[type="number"]::-webkit-outer-spin-button,
.field-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-input[type="number"] { -moz-appearance: textfield; }
/* Chrome's autofill: yellow on yellow against dark glass = trash. Repaint. */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus,
.field-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px rgba(15, 18, 41, 0.95) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;  /* defers Chrome's own paint */
}
/* Native select arrow: hide the OS one and draw our own. */
.field-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field-select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-light) 50%),
    linear-gradient(135deg, var(--accent-light) 50%, transparent 50%);
}
/* Native checkbox/radio: replace with on-brand. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.15s, border-color 0.15s;
  vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent-light); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent-light);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
.field-textarea { resize: vertical; min-height: 96px; }
.field-helper { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }
.field-helper.success { color: var(--success); }
.field-helper.error   { color: var(--danger); }
.field-error { color: var(--danger); font-size: 12.5px; margin-top: 6px; }
.field-help  { color: var(--text-mute-2); font-size: 12.5px; margin-top: 6px; }

/* URL preview (used on signup) */
.url-preview {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(165, 180, 252, 0.8);
  margin-top: 6px;
}
.url-preview .dim { color: var(--text-faint); }
.url-preview strong { color: var(--accent-pale); font-weight: 500; }

/* Badges & pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  /* Inner highlight at top — gives the pill a tiny "embossed" feel
     that reads as more crafted than a flat tag. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pill-ok    { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.pill-fail  { background: var(--danger-bg);  border: 1px solid var(--danger-border);  color: var(--danger); }
.pill-warn  { background: var(--warn-bg);    border: 1px solid var(--warn-border);    color: var(--warn); }
.pill-info  { background: rgba(129,140,248,0.12); border: 1px solid rgba(129,140,248,0.3); color: var(--accent-pale); }

/* Dividers */
.divider {
  display: flex; align-items: center; gap: 16px;
  margin: 20px 0;
  color: var(--text-faint);
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* Flash messages */
.flash-stack { position: fixed; top: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.flash {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 14px 18px;
  font-size: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
  animation: slideIn 0.3s ease;
}
.flash.success { border-color: var(--success-border); background: rgba(74,222,128,0.06); }
.flash.error   { border-color: var(--danger-border);  background: rgba(244,114,182,0.06); }
.flash.info    { border-color: rgba(129,140,248,0.3); background: rgba(129,140,248,0.06); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------- 5. Page-specific ---------- */

/* Public landing nav */
.nav-wrap { position: sticky; top: 16px; z-index: 100; padding: 0 16px; }
.nav {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 12px 24px;
  background: rgba(10, 12, 28, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  color: var(--text-mute); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-pill); transition: all 0.2s ease;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-actions { display: flex; gap: 8px; align-items: center; }

/* Auth split layout */
.auth-split { display: grid; grid-template-columns: 1fr 480px; min-height: 100vh; }
.auth-left {
  padding: 48px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, rgba(67,56,202,0.08) 0%, rgba(5,7,20,0) 100%);
}
.auth-left::before {
  content: ''; position: absolute;
  top: 30%; left: 30%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(129,140,248,0.25), transparent 60%);
  filter: blur(60px); pointer-events: none;
}
.auth-pitch { position: relative; z-index: 1; max-width: 520px; }
.auth-headline { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin: 20px 0 28px; }
.auth-bullets { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-bullets li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.auth-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--success-bg); border: 1px solid var(--success-border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--success); margin-top: 2px;
}
.auth-check svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.auth-quote {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  backdrop-filter: blur(20px);
  max-width: 440px;
  font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.55;
}
.auth-right {
  background: rgba(10, 12, 28, 0.5);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 64px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.auth-form-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.auth-form-sub { font-size: 14px; color: var(--text-mute); margin-bottom: 28px; }
.auth-foot { margin-top: 24px; text-align: center; font-size: 13px; color: var(--text-mute-2); }
.auth-foot a { color: var(--accent-pale); font-weight: 500; }

/* Tabs (signup/login swap) */
.tabs {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px; border-radius: 12px;
  gap: 4px;
  margin-bottom: 28px;
}
.tab {
  flex: 1;
  padding: 9px 14px;
  background: none; border: none;
  color: var(--text-mute);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  text-decoration: none;
  text-align: center;
}
.tab.on { background: var(--surface-3); color: var(--text); }

/* Centered single-card auth (forgot/reset/verify) */
.auth-centered { max-width: 440px; margin: 0 auto; padding: 64px 24px; }
.auth-centered-card { padding: 36px; }

/* Dev-mode link box (shows verification/reset link inline) */
.dev-link-box {
  margin-top: 20px;
  padding: 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--warn);
  word-break: break-all;
}
.dev-link-box strong { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dev-link-box a { color: var(--warn); text-decoration: underline; }

/* Operator layout */
.operator-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.operator-side {
  background: rgba(10, 12, 28, 0.6);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.operator-side .logo { padding: 6px 10px 18px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.operator-side a {
  display: block; padding: 8px 12px; border-radius: var(--r);
  color: var(--text-mute); font-size: 13.5px; font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.operator-side a:hover { background: var(--surface-2); color: var(--text); }
.operator-side a.active {
  background: rgba(129, 140, 248, 0.1);
  border-color: rgba(129, 140, 248, 0.2);
  color: var(--accent-pale);
}
.operator-main { padding: 32px; }
.operator-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.operator-head h1 { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }
.operator-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.operator-stat { padding: 18px; }
.operator-stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute-2); margin-bottom: 12px; }
.operator-stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.operator-stat-trend { font-size: 11.5px; color: var(--accent-pale); margin-top: 6px; font-family: var(--font-mono); }

/* Artist table */
.artist-table { width: 100%; border-collapse: collapse; }
.artist-table thead th {
  text-align: left; padding: 12px 16px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute-2); font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.artist-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13.5px;
}
.artist-table tbody tr:hover { background: var(--surface-2); }
.artist-cell-name { display: flex; align-items: center; gap: 12px; }
.artist-cell-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  flex-shrink: 0;
}
.artist-cell-name strong { font-weight: 600; }
.artist-cell-name span { font-size: 12px; color: var(--text-mute-2); font-family: var(--font-mono); margin-top: 1px; display: block; }

/* Empty state */
.empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-mute);
}
.empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}
.empty h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; color: var(--text); }
.empty p { font-size: 14px; }

/* ---------- 6. Utilities ---------- */
.text-mute { color: var(--text-mute); }
.text-faint { color: var(--text-faint); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-right { border-left: none; border-top: 1px solid var(--border); padding: 40px 24px; }
  .auth-left { padding: 32px 24px; }
  .auth-headline { font-size: 36px; }
  .operator-shell { grid-template-columns: 1fr; }
  .operator-side { display: none; }
  .operator-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .operator-stats { grid-template-columns: 1fr; }
  .artist-table thead { display: none; }
  .artist-table tbody td { display: block; padding: 8px 16px; border-bottom: none; }
  .artist-table tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
}

/* ============================================================
   Phase 3 - Admin shell (dashboard layout)
============================================================ */

.studio-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ---------- Sidebar ---------- */
.studio-side {
  background: rgba(10, 12, 28, 0.6);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px 14px;
  display: flex; flex-direction: column;
  height: 100vh;
  position: sticky; top: 0;
  overflow-y: auto;
}
.studio-side .logo { padding: 6px 10px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.studio-side-section {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 14px 12px 6px;
}
.studio-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r);
  color: var(--text-mute);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  margin-bottom: 2px;
  position: relative;
}
.studio-nav-item:hover { background: var(--surface-2); color: var(--text); }
.studio-nav-item.active {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.18);
  color: var(--accent-pale);
}
/* Left-edge accent on active nav items.
   2px gradient bar that anchors the eye when scanning the nav.
   Rendered as a ::before so we don't have to redraw the layout. */
.studio-nav-item.active::before {
  content: '';
  position: absolute;
  left: -1px; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  box-shadow: 0 0 8px rgba(129, 140, 248, 0.5);
}
.studio-nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.studio-nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.studio-nav-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
}
.studio-nav-badge.live {
  background: rgba(74, 222, 128, 0.12);
  color: var(--success);
}
.studio-nav-badge.coming {
  background: rgba(251, 191, 36, 0.1);
  color: var(--warn);
}

.studio-side-storage {
  margin-top: auto;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.studio-side-storage-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute-2);
  margin-bottom: 8px;
}
.studio-side-storage-bar {
  height: 4px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden;
}
.studio-side-storage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  border-radius: 2px;
  transition: width 0.5s ease;
}
.studio-side-storage-bar-fill.warn  { background: linear-gradient(90deg, var(--warn), #ea580c); }
.studio-side-storage-bar-fill.full  { background: linear-gradient(90deg, var(--danger), #be185d); }
.studio-side-storage-text {
  font-size: 11px; color: var(--text-mute-2);
  margin-top: 8px;
}
.studio-side-storage-text strong { color: var(--text); font-weight: 600; }

/* ---------- Main panel ---------- */
.studio-main { min-height: 100vh; }

/* Top bar */
.studio-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px;
  background: rgba(10, 12, 28, 0.5);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 20;
}
.studio-search {
  flex: 1; max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px 8px 36px;
  font-family: inherit; font-size: 13px; color: var(--text);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>");
  background-repeat: no-repeat; background-position: 12px center;
}
.studio-search:focus { outline: none; border-color: rgba(129, 140, 248, 0.4); background-color: var(--surface-3); }
.studio-topbar-spacer { flex: 1; }
/* Profile menu — <details>/<summary> based dropdown.
   Uses native disclosure behaviour for accessibility (Esc closes,
   Space/Enter toggles, screen-reader semantics correct). The
   ::-webkit-details-marker reset is needed to hide the native
   triangle in WebKit. */
.studio-profile-menu {
  position: relative;
}
.studio-profile-menu summary::-webkit-details-marker { display: none; }
.studio-profile-menu summary { list-style: none; }

.studio-profile-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.studio-profile-chip:hover { background: var(--surface-3); border-color: var(--border-2); }
.studio-profile-menu[open] .studio-profile-chip {
  background: var(--surface-3);
  border-color: var(--border-2);
}
.studio-profile-menu[open] .studio-profile-arrow { transform: rotate(180deg); }

.studio-profile-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.studio-profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.studio-profile-name { font-size: 13px; font-weight: 600; }
.studio-profile-arrow {
  color: var(--text-faint);
  font-size: 10px;
  transition: transform 0.18s ease;
}

/* Dropdown panel */
.studio-profile-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: rgba(15, 17, 35, 0.92);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 32px -12px rgba(0, 0, 0, 0.6),
    0 32px 64px -24px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 100;
  animation: studioProfileMenuOpen 0.15s ease-out;
}
@keyframes studioProfileMenuOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.studio-profile-menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.studio-profile-menu-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.studio-profile-menu-slug {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}
.studio-profile-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text-mute);
  text-decoration: none;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.studio-profile-menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.studio-profile-menu-item--danger { color: var(--danger); }
.studio-profile-menu-item--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}
.studio-profile-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Main content area */
.studio-page { padding: 32px; max-width: 1400px; }
.studio-page-head {
  margin-bottom: 28px;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.studio-page-greet {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(165, 180, 252, 0.85);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
}
.studio-page-greet::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 10px var(--accent-light);
}
.studio-page-title {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.studio-page-actions { display: flex; gap: 10px; }

/* Welcome state for new artists */
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 980px) { .welcome-grid { grid-template-columns: 1fr; } }

.welcome-card {
  padding: 32px;
}
.welcome-step {
  display: flex; gap: 16px;
  margin-bottom: 16px;
}
.welcome-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.25);
  color: var(--accent-pale);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600; font-size: 13px;
}
.welcome-step-num.done {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}
.welcome-step-content { flex: 1; }
.welcome-step-title {
  font-size: 15px; font-weight: 600;
  margin-bottom: 4px;
}
.welcome-step-desc {
  font-size: 13px; color: var(--text-mute);
  line-height: 1.5;
}
.welcome-step-action {
  margin-top: 8px;
}
.welcome-step-action a {
  font-size: 12.5px; color: var(--accent-pale);
  font-weight: 500;
}

/* Settings sub-nav */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
}
.settings-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r);
  color: var(--text-mute);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
}
.settings-nav a:hover { background: var(--surface-2); color: var(--text); }
.settings-nav a.active {
  background: rgba(129, 140, 248, 0.1);
  border-color: rgba(129, 140, 248, 0.2);
  color: var(--accent-pale);
}
.settings-section {
  padding: 32px;
}
.settings-section-head { margin-bottom: 24px; }
.settings-section-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.settings-section-head p { color: var(--text-mute); font-size: 14px; }

.danger-zone {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--danger-border);
  background: rgba(244, 114, 182, 0.04);
  border-radius: var(--r-lg);
}
.danger-zone h3 {
  color: var(--danger);
  font-size: 16px; font-weight: 600;
  margin-bottom: 8px;
}
.danger-zone p { font-size: 13px; color: var(--text-mute); margin-bottom: 16px; }

/* Module placeholder page */
.module-placeholder {
  text-align: center;
  padding: 80px 24px;
  max-width: 480px;
  margin: 32px auto 0;
}
.module-placeholder-icon {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(67,56,202,0.05));
  border: 1px solid rgba(129, 140, 248, 0.3);
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
}
.module-placeholder-icon-shape {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  border-radius: 8px;
  box-shadow: 0 0 24px var(--accent-glow);
}
.module-placeholder h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.module-placeholder p {
  color: var(--text-mute);
  font-size: 15px; line-height: 1.55;
  margin-bottom: 24px;
}
.module-placeholder-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-pale);
  margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(129, 140, 248, 0.08);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: var(--r-pill);
}

/* Responsive studio */
@media (max-width: 980px) {
  .studio-shell { grid-template-columns: 1fr; }
  .studio-side { display: none; }
}

/* ============================================================
   Phase 4 - Media Library
============================================================ */

/* Filter tabs */
.media-filters {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  width: fit-content;
}
.media-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  text-decoration: none;
  transition: all 0.15s;
}
.media-filter:hover { color: var(--text); }
.media-filter.on {
  background: var(--surface-3);
  color: var(--text);
}
.media-filter-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  color: var(--text-mute-2);
}
.media-filter.on .media-filter-count {
  background: rgba(129,140,248,0.15);
  color: var(--accent-pale);
}

/* Grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.media-tile {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all 0.15s;
}
.media-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4);
}
.media-tile-art {
  aspect-ratio: 1;
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.media-tile-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-tile-icon {
  width: 48px; height: 48px;
  color: var(--accent-pale);
  opacity: 0.5;
}
.media-tile-icon svg { width: 100%; height: 100%; }
.media-tile-art.media-tile-audio {
  background: linear-gradient(135deg, rgba(244,114,182,0.15), rgba(67,56,202,0.15));
}
.media-tile-art.media-tile-video {
  background: linear-gradient(135deg, rgba(129,140,248,0.2), rgba(67,56,202,0.15));
}
.media-tile-art.media-tile-doc {
  background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(13,148,136,0.15));
}
.media-tile-kind {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.1em; font-weight: 600;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
}
.media-tile-meta {
  padding: 12px 14px;
}
.media-tile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.media-tile-info {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mute-2);
}

/* Drop zone overlay */
.dropzone {
  position: fixed;
  inset: 16px;
  z-index: 50;
  pointer-events: none;
  border: 2px dashed transparent;
  border-radius: var(--r-2xl);
  background: rgba(5, 7, 20, 0);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.dropzone.active {
  opacity: 1;
  pointer-events: auto;
  border-color: rgba(129, 140, 248, 0.5);
  background: rgba(5, 7, 20, 0.85);
  backdrop-filter: blur(10px);
}
.dropzone-inner { text-align: center; }
.dropzone-icon {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.3);
  border-radius: 20px;
  box-shadow: 0 0 32px var(--accent-glow);
}
.dropzone-text {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Upload progress */
.upload-progress-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 24px;
  backdrop-filter: blur(20px);
}
.upload-progress-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.upload-progress-item:last-child { border-bottom: none; }
.upload-progress-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.upload-progress-icon.pending { background: rgba(255,255,255,0.08); border: 1px solid var(--border); }
.upload-progress-icon.active  {
  background: rgba(129,140,248,0.15);
  border: 1px solid rgba(129,140,248,0.4);
  animation: spin 1s linear infinite;
}
.upload-progress-icon.done {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
}
.upload-progress-icon.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}
@keyframes spin { to { transform: rotate(360deg); } }
.upload-progress-name {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-progress-bar {
  width: 200px; height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.upload-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  border-radius: 2px;
  transition: width 0.2s ease;
}
.upload-progress-error {
  font-size: 12px;
  color: var(--danger);
}

/* File detail */
.media-detail {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
}
@media (max-width: 980px) {
  .media-detail { grid-template-columns: 1fr; }
}
.media-detail-preview {
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
  min-height: 360px;
  background: var(--surface);
}
.media-detail-preview img,
.media-detail-preview video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--r);
  display: block;
}
.media-detail-audio {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.media-detail-icon {
  width: 80px; height: 80px;
  background: rgba(244,114,182,0.12);
  border: 1px solid rgba(244,114,182,0.3);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger);
}
.media-detail-doc {
  text-align: center;
  color: var(--text-mute);
}
.media-detail-list {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  font-size: 13px;
}
.media-detail-list dt {
  color: var(--text-mute-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
}
.media-detail-list dd {
  color: var(--text);
}
.copy-row { display: flex; gap: 8px; }
.copy-row .field-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ============================================================
   Phase 5 - Releases & Custom Music Player
============================================================ */

/* ---------- Admin: releases list (grid of cards) ---------- */
.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.release-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
  display: block;
  backdrop-filter: blur(20px);
}
.release-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4);
}
.release-card-art {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--accent), #1e1b4b);
  position: relative;
  overflow: hidden;
}
.release-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.release-card-art-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #1e1b4b);
}
.release-card-art-placeholder::before {
  content: '';
  width: 32%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  box-shadow: 0 0 32px rgba(255,255,255,0.2);
}
.release-card-status {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.08em; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.5);
  color: #fff;
}
.release-card-status.live { background: rgba(74,222,128,0.18); color: var(--success); border-color: var(--success-border); }
.release-card-status.draft { background: rgba(251,191,36,0.18); color: var(--warn); border-color: var(--warn-border); }
.release-card-status.scheduled { background: rgba(129,140,248,0.18); color: var(--accent-pale); border-color: rgba(129,140,248,0.3); }

.release-card-meta { padding: 14px; }
.release-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.release-card-info { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute-2); }

.release-card-add {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  border: 1.5px dashed rgba(255,255,255,0.15);
  background: transparent;
  aspect-ratio: 0.75;
  color: var(--text-mute);
  text-decoration: none;
  border-radius: var(--r-lg);
  transition: all 0.15s;
}
.release-card-add:hover {
  border-color: rgba(129,140,248,0.4);
  color: var(--accent-pale);
  background: rgba(129,140,248,0.04);
  transform: translateY(-2px);
}

/* ---------- Admin: release editor ---------- */
.release-edit-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .release-edit-grid { grid-template-columns: 1fr; } }

.cover-picker {
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cover-picker img { width: 100%; height: 100%; object-fit: cover; }
.cover-picker-empty {
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
  padding: 24px;
}
.cover-picker-empty svg {
  width: 32px; height: 32px;
  margin: 0 auto 12px;
  display: block;
  color: var(--accent-pale);
  opacity: 0.6;
}
.cover-picker-actions {
  margin-top: 12px;
  display: flex; gap: 8px;
}
.cover-picker-actions .btn { flex: 1; }

/* ---------- Track editor ---------- */
.tracks-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.track-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.track-row-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
}
.track-num {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute);
}
.track-row-title {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px; font-weight: 600;
  font-family: inherit;
  width: 100%;
}
.track-row-title:focus, .track-row-title:hover {
  outline: none;
  background: var(--surface-2);
  border-color: var(--border-2);
}
.track-row-actions { display: flex; gap: 4px; }

.track-sources-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.track-source-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.track-source-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  color: #fff;
}
.track-source-icon.spotify    { background: #1ed760; color: #050714; }
.track-source-icon.apple      { background: #fa233b; }
.track-source-icon.soundcloud { background: #ff5500; }
.track-source-icon.youtube    { background: #ff0000; }
.track-source-icon.bandcamp   { background: #629aa9; }
.track-source-icon.beatport   { background: #a8e00f; color: #050714; }
.track-source-icon.direct     { background: linear-gradient(135deg, var(--accent-light), var(--accent)); }

.track-source-info { min-width: 0; }
.track-source-name { font-size: 13px; font-weight: 600; }
.track-source-url { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-source-status { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; }
.track-source-status.ok      { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.track-source-status.warn    { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.track-source-status.primary { background: rgba(129,140,248,0.15); color: var(--accent-pale); border: 1px solid rgba(129,140,248,0.3); }

.track-source-add {
  display: flex; gap: 8px; margin-top: 8px;
}
.track-source-add input { flex: 1; }

/* ---------- Public release page ---------- */
.release-public {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  position: relative;
  z-index: 1;
}
.release-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 720px) { .release-hero { grid-template-columns: 1fr; gap: 24px; text-align: center; } }
.release-hero-art {
  aspect-ratio: 1;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), #1e1b4b);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  position: relative;
}
.release-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.release-hero-meta-tags { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
@media (max-width: 720px) { .release-hero-meta-tags { justify-content: center; } }
.release-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff 0%, var(--accent-pale) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.release-hero-artist {
  font-size: 18px;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.release-hero-artist a { color: var(--accent-pale); }
.release-hero-date {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute-2);
}

/* ---------- Custom audio player ---------- */
.player-card {
  background: rgba(15, 17, 35, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}

.player-now { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.player-now-art {
  width: 56px; height: 56px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #1e1b4b);
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
.player-now-art img { width: 100%; height: 100%; object-fit: cover; }
.player-now-info { flex: 1; min-width: 0; }
.player-now-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-now-source {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-mute-2); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.player-now-source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 6px var(--accent-light); }

/* Source switcher (only shown when track has multiple playable sources) */
.player-source-switch {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em;
}
.player-source-switch button {
  background: transparent; border: none;
  color: var(--text-mute);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  cursor: pointer; font-weight: 600;
  text-transform: uppercase;
}
.player-source-switch button.on { background: var(--surface-3); color: var(--text); }

.player-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.player-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.player-btn:hover { background: var(--surface-3); }
.player-btn svg { width: 14px; height: 14px; fill: currentColor; }
.player-btn.play {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  border-color: transparent;
  box-shadow: 0 8px 24px var(--accent-glow);
  color: #fff;
}
.player-btn.play:hover { transform: scale(1.05); }
.player-btn.play svg { width: 16px; height: 16px; }

.player-progress {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.player-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  border-radius: 2px;
  transition: width 0.1s linear;
  width: 0%;
}
.player-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute-2); white-space: nowrap; }

/* Hidden iframes for SoundCloud / YouTube */
.player-hidden-frames {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Tracklist on the release page */
.tracklist {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(20px);
  overflow: hidden;
  margin-bottom: 24px;
}
.tracklist-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.15s;
}
.tracklist-row:last-child { border-bottom: none; }
.tracklist-row:hover { background: var(--surface-2); }
.tracklist-row.playing { background: rgba(129,140,248,0.07); }
.tracklist-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute-2);
  text-align: center;
  width: 28px;
}
.tracklist-row.playing .tracklist-num { color: var(--accent-light); }
.tracklist-title { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracklist-row.playing .tracklist-title { color: var(--accent-pale); font-weight: 600; }
.tracklist-duration {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--text-mute-2);
}

/* Available-on platform link buttons */
.available-on {
  margin-top: 24px;
}
.available-on-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute-2);
  margin-bottom: 12px;
}
.available-on-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.available-on-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  text-decoration: none;
  transition: all 0.15s;
  backdrop-filter: blur(10px);
}
.available-on-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.available-on-btn-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}
.available-on-btn-text {
  flex: 1;
  font-size: 13px; font-weight: 600;
}
.available-on-btn-arrow { color: var(--text-mute-2); font-size: 13px; }


/* ============================================================
   Phase 6 - Blog, Gigs, Merch, Mailing
============================================================ */

/* ============== Blog: studio list ============== */
.post-list { display: flex; flex-direction: column; gap: 8px; }
.post-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none; color: var(--text);
  transition: all 0.15s;
}
.post-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.post-row-thumb {
  width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(67,56,202,0.1));
  flex-shrink: 0;
}
.post-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-row-meta { min-width: 0; }
.post-row-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.post-row-info {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-mute-2);
  display: flex; gap: 10px; align-items: center;
}
.post-row-tag {
  display: inline-block; padding: 2px 8px;
  background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.2);
  color: var(--accent-pale); font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.05em; border-radius: 999px;
}

/* ============== Blog: public layout ============== */
.blog-public {
  max-width: 760px; margin: 0 auto;
  padding: 64px 24px 80px; position: relative; z-index: 1;
}

/* Cards on the index page */
.blog-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: all 0.18s;
}
.blog-card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.blog-card-cover {
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--bg-2); overflow: hidden;
}
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 22px 24px; }
.blog-card-date {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute-2);
  margin-bottom: 10px;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.2;
  margin: 0 0 10px;
}
.blog-card-excerpt {
  color: var(--text-mute);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* Single post */
.blog-post { }
.blog-post h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  margin: 0 0 12px;
}
.blog-post-cover {
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 24px; border: 1px solid var(--border);
}
.blog-post-cover img { width: 100%; display: block; }
.blog-post-meta {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-mute-2);
  margin-bottom: 32px;
}

/* Article body - rendered markdown */
.blog-post-body {
  font-size: 16px; line-height: 1.7; color: var(--text);
}
.blog-post-body h1, .blog-post-body h2, .blog-post-body h3, .blog-post-body h4 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 1.6em 0 0.6em; line-height: 1.25;
}
.blog-post-body h1 { font-size: 28px; }
.blog-post-body h2 { font-size: 24px; }
.blog-post-body h3 { font-size: 20px; }
.blog-post-body p { margin-bottom: 1.1em; color: rgba(255,255,255,0.85); }
.blog-post-body a { color: var(--accent-pale); text-decoration: underline; text-underline-offset: 3px; }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 1.1em 1.6em; }
.blog-post-body li { margin-bottom: 0.4em; color: rgba(255,255,255,0.85); }
.blog-post-body blockquote {
  border-left: 3px solid var(--accent-light);
  padding: 6px 0 6px 18px; margin: 1.4em 0;
  color: var(--text-mute); font-style: italic;
}
.blog-post-body code {
  font-family: var(--font-mono); font-size: 13px;
  padding: 1px 6px; background: rgba(255,255,255,0.06);
  border-radius: 4px; color: var(--accent-pale);
}
.blog-post-body pre {
  background: rgba(0,0,0,0.4); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px;
  overflow-x: auto; margin: 1.4em 0;
  font-size: 13px; line-height: 1.5;
}
.blog-post-body pre code {
  background: transparent; padding: 0; color: var(--text);
}
.blog-post-body img {
  max-width: 100%; height: auto;
  border-radius: var(--r); margin: 1.2em 0;
}
.blog-post-body hr {
  border: none; border-top: 1px solid var(--border);
  margin: 2.4em 0;
}

/* ============== Gigs: studio list ============== */
.gigs-section { margin-bottom: 32px; }
.gigs-section-title {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute-2);
  margin-bottom: 12px;
}

.gig-list { display: flex; flex-direction: column; gap: 8px; }

/* Gig row - shared between studio and fan */
.gig-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px; align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  transition: all 0.15s;
}
a.gig-row { text-decoration: none; }
a.gig-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.gig-row.cancelled { opacity: 0.55; }
.gig-row.cancelled .gig-row-venue { text-decoration: line-through; }

.gig-date {
  text-align: center; flex-shrink: 0;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.gig-date-month {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  font-weight: 600; color: var(--accent-pale);
  text-transform: uppercase;
}
.gig-date-day {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
  margin: 2px 0;
}
.gig-date-year {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text-mute-2);
}

.gig-row-info { min-width: 0; }
.gig-row-venue { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.gig-row-loc, .gig-row-location { font-size: 13px; color: var(--text-mute); }
.gig-row-time {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-mute-2);
  margin-top: 3px;
}
.gig-row-actions, .gig-actions { display: flex; gap: 6px; align-items: center; }

/* ============== Gigs: public ============== */
.gig-public {
  max-width: 760px; margin: 0 auto;
  padding: 64px 24px 80px;
  position: relative; z-index: 1;
}
.gig-section-divider {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute-2);
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.gig-section-divider:first-of-type { margin-top: 0; }

.gig-subscribe-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: rgba(129,140,248,0.06);
  border: 1px solid rgba(129,140,248,0.18);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.gig-subscribe-bar-text {
  font-size: 13px; color: var(--text-mute);
  flex: 1; min-width: 0;
}
.gig-subscribe-bar-text strong { color: var(--text); font-weight: 600; }

/* ============== Merch: shared grid (studio + fan) ============== */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.merch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: all 0.15s;
  display: block;
}
.merch-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4);
}
.merch-card-art {
  aspect-ratio: 1;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
.merch-card-art img { width: 100%; height: 100%; object-fit: cover; }
.merch-card-art-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(129,140,248,0.1), rgba(67,56,202,0.05));
}
.merch-card-art-empty {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(129,140,248,0.1), rgba(67,56,202,0.05));
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.merch-card-soldout {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.1em; font-weight: 600;
  background: rgba(0,0,0,0.7);
  color: var(--danger);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.merch-card-meta { padding: 14px; }
.merch-card-title {
  font-size: 14px; font-weight: 600;
  margin-bottom: 4px; line-height: 1.3;
}
.merch-card-price {
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-pale);
}

/* Merch: public wrapper */
.merch-public {
  max-width: 1080px; margin: 0 auto;
  padding: 64px 24px 80px;
  position: relative; z-index: 1;
}

/* ============== Smart-link import (merch studio) ============== */
.smart-import {
  padding: 24px;
  background: linear-gradient(135deg, rgba(129,140,248,0.06), rgba(67,56,202,0.02));
  border: 1px solid rgba(129,140,248,0.15);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.smart-import-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.smart-import-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--accent-glow);
}
.smart-import-form {
  display: flex; gap: 8px;
  margin-bottom: 12px;
}
.smart-import-form input { flex: 1; }
.smart-import-status {
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: 8px;
  display: none;
}
.smart-import-status.visible { display: block; }
.smart-import-status.error { color: var(--danger); }
.smart-import-status.ok    { color: var(--success); }

/* ============== Mailing: studio ============== */
.mailing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.mailing-stat {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.mailing-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute-2);
  margin-bottom: 10px;
}
.mailing-stat-num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
}
.mailing-stat-num.pending   { color: var(--warn); }
.mailing-stat-num.confirmed { color: var(--success); }

.mailing-table { width: 100%; border-collapse: collapse; }
.mailing-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute-2);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.mailing-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13.5px;
}
.mailing-table tbody tr:hover { background: var(--surface-2); }

.embed-code-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-pale);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 12px 0;
}

/* ============== Mailing: public confirm/unsub status pages ============== */
.confirm-public {
  max-width: 480px; margin: 0 auto;
  padding: 80px 24px;
  position: relative; z-index: 1;
  text-align: center;
}
.confirm-public-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
}
.confirm-public-icon.error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
.confirm-public h1 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.confirm-public p {
  color: var(--text-mute);
  font-size: 15px; line-height: 1.55;
  margin: 0 0 8px;
}

/* ============== Blog studio: list rows ============== */
.blog-list { display: flex; flex-direction: column; gap: 8px; }
.blog-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none; color: var(--text);
  transition: all 0.15s;
}
.blog-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.blog-row-thumb {
  width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(67,56,202,0.1));
  flex-shrink: 0;
}
.blog-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-row-title { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.blog-row-meta {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-mute-2);
}
.blog-row-status {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-mute);
}
.blog-row-status.live      { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.blog-row-status.scheduled { color: var(--warn);    border-color: var(--warn-border);    background: var(--warn-bg); }
.blog-row-status.draft     { color: var(--text-mute-2); }

/* ============== Merch studio: edit grid ============== */
.merch-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .merch-edit-grid { grid-template-columns: 1fr; }
}

/* Smart-fetch box (merch studio) */
.smart-fetch-box {
  padding: 20px;
  background: linear-gradient(135deg, rgba(129,140,248,0.06), rgba(67,56,202,0.02));
  border: 1px solid rgba(129,140,248,0.15);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.smart-fetch-box-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin-bottom: 10px;
  font-weight: 600;
}
.smart-fetch-box-row {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.smart-fetch-box-row input { flex: 1; }
.smart-fetch-box-help {
  font-size: 12px;
  color: var(--text-mute-2);
}

/* ============== Picker modal (shared - merch + future) ============== */
.picker-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,7,20,0.75);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.picker-modal-inner {
  max-width: 720px; width: 100%; max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
}
.image-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.image-picker-tile {
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s;
}
.image-picker-tile:hover { border-color: var(--accent-light); }
.image-picker-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============== Mailing: embed code box (studio index page) ============== */
.embed-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-pale);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 12px 0;
}

/* ==========================================================================
   PHASE 7 — Fan link pages
   ========================================================================== */

/* --- Admin: pages list --- */
.link-page-card {
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 18px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease;
}
.link-page-card:hover {
  border-color: rgba(129,140,248,0.5);
  transform: translateY(-1px);
}
.link-page-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.link-page-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.link-page-card__meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.link-page-card__url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  word-break: break-all;
  margin-bottom: 10px;
}
.link-page-card__stats {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.chip--accent { background: rgba(129,140,248,0.18); color: #c7cefe; border-color: rgba(129,140,248,0.35); }
.chip--live   { background: rgba(34,197,94,0.18);   color: #b6f0c4; border-color: rgba(34,197,94,0.35); }
.chip--draft  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.12); }

/* --- Admin: block editor layout --- */
.link-editor {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .link-editor { grid-template-columns: 1fr; }
}
.link-editor__sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.link-editor__main-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}

.slug-input {
  display: flex; align-items: stretch;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.slug-input .slug-prefix {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.2);
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  display: flex; align-items: center;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis;
}
.slug-input input { border: 0; background: transparent; flex: 1; }

.swatch-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.swatch {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 56px;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
.swatch input { position: absolute; opacity: 0; }
.swatch.on { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(129,140,248,0.25); }
.swatch__dot { width: 14px; height: 14px; border-radius: 50%; }
.swatch__label { font-size: 10px; margin-top: 4px; font-weight: 500; }

.segment {
  display: flex;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
.segment__opt { flex: 1; }
.segment__opt input { display: none; }
.segment__opt span {
  display: block;
  padding: 6px 10px;
  text-align: center;
  font-size: 13px;
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  transition: background 120ms ease, color 120ms ease;
}
.segment__opt input:checked + span {
  background: rgba(129,140,248,0.2);
  color: #fff;
}

.block-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.block-palette__btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.block-palette__btn:hover {
  border-color: rgba(129,140,248,0.4);
  background: rgba(129,140,248,0.1);
}
.block-palette__plus {
  font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.5);
}

.blocks-list { display: flex; flex-direction: column; gap: 10px; }
.block-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 120ms ease;
}
.block-card.dragging { opacity: 0.4; }
.block-card.drop-target { border-color: var(--accent-2); }
.block-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.block-card__handle {
  cursor: grab; user-select: none;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  letter-spacing: -2px;
}
.block-card__handle:active { cursor: grabbing; }
.block-card__type {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  flex: 1;
}
.block-card__actions { display: flex; gap: 4px; }
.btn-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 0; background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.btn-icon:hover { background: rgba(255,255,255,0.08); color: #fff; }
.btn-icon--danger:hover { background: rgba(239,68,68,0.2); color: #ff8c8c; }
.block-card__body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}

.blocks-empty {
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

.social-list { display: flex; flex-direction: column; gap: 8px; }
.social-row { display: grid; grid-template-columns: 130px 1fr 32px; gap: 6px; align-items: center; }
.checkbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }

/* --- Public link page --- */
.lp-html, .lp-body {
  margin: 0; padding: 0;
  background: var(--lp-base, #050714);
  color: var(--lp-text, #fff);
  font-family: var(--lp-font, 'Space Grotesk', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
.lp-root {
  position: relative;
  min-height: 100vh;
  background: var(--lp-bg, #050714);
}
.lp-bg-overlay {
  position: absolute; inset: 0;
  background: var(--lp-bg-overlay, transparent);
  pointer-events: none;
  z-index: 0;
}
.lp-main {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto;
  padding: 32px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-block { animation: lp-rise 480ms ease-out backwards; }
.lp-block:nth-child(1) { animation-delay: 0ms; }
.lp-block:nth-child(2) { animation-delay: 60ms; }
.lp-block:nth-child(3) { animation-delay: 120ms; }
.lp-block:nth-child(4) { animation-delay: 180ms; }
.lp-block:nth-child(5) { animation-delay: 240ms; }
.lp-block:nth-child(6) { animation-delay: 300ms; }
.lp-block:nth-child(7) { animation-delay: 360ms; }
.lp-block:nth-child(8) { animation-delay: 420ms; }
.lp-block:nth-child(n+9) { animation-delay: 480ms; }
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-block { animation: none; }
}

.lp-section-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin: 0 0 10px;
}

/* --- profile block --- */
.lp-profile {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 8px;
}
.lp-profile__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lp-accent);
  margin-bottom: 14px;
}
.lp-profile__name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.lp-profile__tagline {
  color: var(--lp-muted);
  font-size: 14px;
  margin: 0 0 12px;
  max-width: 360px;
  line-height: 1.45;
}
.lp-profile__socials {
  display: flex; gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lp-surface);
  color: var(--lp-text);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 160ms ease, background 160ms ease;
}
.lp-social-icon:hover { transform: translateY(-2px); background: var(--lp-accent); color: var(--lp-accent-ink); }

/* --- link button --- */
.lp-link-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lp-radius);
  color: var(--lp-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.lp-link-btn:hover { transform: translateY(-2px); border-color: var(--lp-accent); }
.lp-link-btn--highlight {
  background: var(--lp-accent);
  color: var(--lp-accent-ink);
  border-color: var(--lp-accent);
  box-shadow: 0 6px 24px rgba(129,140,248,0.2);
}
.lp-link-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-link-btn__label { letter-spacing: -0.01em; }

/* --- release block --- */
.lp-release {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--lp-radius);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease;
}
.lp-release:hover { transform: translateY(-2px); border-color: var(--lp-accent); }
.lp-release__cover { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.lp-release__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-release__title { font-weight: 600; font-size: 15px; }
.lp-release__type { font-size: 11px; text-transform: uppercase; color: var(--lp-muted); letter-spacing: 0.05em; margin-top: 2px; }
.lp-release__tracks { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; color: var(--lp-muted); }
.lp-release__tracks li { padding: 1px 0; }
.lp-release__track-num { color: var(--lp-accent); margin-right: 4px; }
.lp-release__cta { font-size: 13px; color: var(--lp-accent); font-weight: 500; flex-shrink: 0; }

/* --- gig list --- */
.lp-gig-list__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-gig {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.lp-gig__date-day { font-weight: 600; font-size: 13px; }
.lp-gig__date-time { font-size: 11px; color: var(--lp-muted); }
.lp-gig__venue { font-weight: 500; }
.lp-gig__city { font-size: 12px; color: var(--lp-muted); margin-top: 2px; }
.lp-gig__cta {
  padding: 6px 12px;
  background: var(--lp-accent);
  color: var(--lp-accent-ink);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}
.lp-gig__cta--cancel {
  background: transparent;
  border: 1px solid rgba(239,68,68,0.5);
  color: #ff8c8c;
}
.lp-gig-list__all {
  display: block;
  text-align: right;
  margin-top: 8px;
  color: var(--lp-accent);
  text-decoration: none;
  font-size: 13px;
}

/* --- merch grid --- */
.lp-merch-grid__items { display: grid; gap: 10px; }
.lp-merch-grid--cols-1 .lp-merch-grid__items { grid-template-columns: 1fr; }
.lp-merch-grid--cols-2 .lp-merch-grid__items { grid-template-columns: 1fr 1fr; }
.lp-merch-grid--cols-3 .lp-merch-grid__items { grid-template-columns: 1fr 1fr 1fr; }
.lp-merch-grid--cols-4 .lp-merch-grid__items { grid-template-columns: 1fr 1fr 1fr 1fr; }
.lp-merch-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--lp-radius);
  overflow: hidden;
  transition: transform 160ms ease;
}
.lp-merch-item:hover { transform: translateY(-2px); border-color: var(--lp-accent); }
.lp-merch-item__image { aspect-ratio: 1 / 1; background: rgba(0,0,0,0.3); }
.lp-merch-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-merch-item__title { padding: 8px 10px 0; font-weight: 500; font-size: 13px; }
.lp-merch-item__price { padding: 2px 10px 8px; color: var(--lp-accent); font-size: 12px; font-weight: 600; }

/* --- mail signup --- */
.lp-mail-signup {
  padding: 18px;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--lp-radius);
}
.lp-mail-signup__sub { color: var(--lp-muted); font-size: 13px; margin: 0 0 12px; }
.lp-mail-signup__form { display: flex; flex-direction: column; gap: 8px; }
.lp-mail-signup__name, .lp-mail-signup__email {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lp-radius);
  color: var(--lp-text);
  font: inherit;
}
.lp-mail-signup__name:focus, .lp-mail-signup__email:focus {
  outline: none;
  border-color: var(--lp-accent);
}
.lp-mail-signup__cta { width: 100%; cursor: pointer; border: 0; }

/* --- embed --- */
.lp-embed-frame {
  position: relative;
  background: rgba(0,0,0,0.4);
  border-radius: var(--lp-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.lp-embed-frame--audio { aspect-ratio: 4 / 1; }
.lp-embed-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- divider --- */
.lp-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 4px 0;
}
.lp-divider--labeled {
  background: transparent;
  display: flex; align-items: center; gap: 12px;
  height: auto;
  margin: 8px 0 4px;
}
.lp-divider--labeled::before, .lp-divider--labeled::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.lp-divider__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lp-muted);
}

/* --- text block --- */
.lp-text {
  padding: 4px 4px;
  color: var(--lp-text);
  line-height: 1.55;
  font-size: 14px;
}
.lp-text--center { text-align: center; }
.lp-text--right  { text-align: right; }
.lp-text h1, .lp-text h2, .lp-text h3 {
  margin: 0.5em 0 0.3em;
  font-weight: 700;
}
.lp-text p { margin: 0.5em 0; }
.lp-text a { color: var(--lp-accent); }

/* --- image block --- */
.lp-image {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--lp-radius);
  overflow: hidden;
}
.lp-image img { width: 100%; height: auto; display: block; }
.lp-image__caption {
  display: block;
  padding: 8px 12px;
  background: var(--lp-surface);
  font-size: 12px;
  color: var(--lp-muted);
}

/* --- footer --- */
.lp-footer {
  margin-top: 24px;
  text-align: center;
}
.lp-footer__brand {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-muted);
  text-decoration: none;
  opacity: 0.6;
}

/* --- alerts variants used in this phase --- */
.alert-warn {
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.4);
  color: #fde68a;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.alert-info {
  background: rgba(129,140,248,0.1);
  border: 1px solid rgba(129,140,248,0.3);
  color: #c7cefe;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.alert-info a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   PHASE 8 — EPK
   ========================================================================== */

/* --- Admin: photo picker --- */
.photo-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.photo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}
.photo-tile:hover { transform: translateY(-1px); border-color: rgba(129,140,248,0.4); }
.photo-tile.on { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(129,140,248,0.25); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile__name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 4px 6px;
  font-size: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-tile__order {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: var(--accent-2);
  color: #050714;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* --- Admin: release picker rows --- */
.release-picker { display: flex; flex-direction: column; gap: 6px; }
.release-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.release-row:hover { border-color: rgba(129,140,248,0.4); }
.release-row.on { border-color: var(--accent-2); }
.release-row__title { font-weight: 500; flex: 1; }
.release-row__type {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
.release-row__order {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-2);
}

/* --- Admin: repeating-row helper (quotes/highlights/socials) --- */
.repeating-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.repeating-row {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}
@media (max-width: 700px) {
  .repeating-row { grid-template-columns: 1fr 32px; }
  .repeating-row > .field:nth-child(2),
  .repeating-row > .field:nth-child(3) { grid-column: 1; }
}

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Public EPK page
   ========================================================================== */

.epk-html, .epk-body {
  margin: 0; padding: 0;
  background: #f7f7f5;
  color: #1a1a1a;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}
.epk-doc {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.epk-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(0,0,0,0.5);
  margin-bottom: 8px;
}

/* Header */
.epk-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
@media (max-width: 700px) {
  .epk-header { grid-template-columns: 1fr; }
}
.epk-header__image {
  aspect-ratio: 1 / 1;
  background: #ddd;
  border-radius: 6px;
  overflow: hidden;
}
.epk-header__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epk-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.05;
}
.epk-quick-facts {
  font-size: 14px;
  color: rgba(0,0,0,0.65);
}
.epk-fact-sep { margin: 0 8px; opacity: 0.5; }
.epk-header__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.epk-header__actions .btn {
  border-color: rgba(0,0,0,0.15);
  color: #1a1a1a;
  background: transparent;
}
.epk-header__actions .btn:hover { background: rgba(0,0,0,0.04); }
.epk-header__actions .btn-primary {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.epk-header__actions .btn-primary:hover { background: #000; }

/* Sections */
.epk-section { margin-bottom: 40px; }
.epk-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.epk-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
}

/* Contact */
.epk-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .epk-contact-grid { grid-template-columns: 1fr; } }
.epk-contact-block {
  padding: 14px 16px;
  background: rgba(0,0,0,0.025);
  border-radius: 6px;
}
.epk-contact-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.55);
  margin-bottom: 6px;
}
.epk-contact-name { font-weight: 500; margin-bottom: 2px; }
.epk-contact-email {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Bio */
.epk-bio-text p { margin: 0 0 12px; }
.epk-bio-text p:last-child { margin-bottom: 0; }
.epk-bio-extra {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
  font-size: 14px;
}
.epk-bio-extra summary {
  cursor: pointer;
  font-weight: 500;
  color: rgba(0,0,0,0.65);
}
.epk-bio-extra p { margin: 8px 0; }

/* Quotes */
.epk-quotes-list { display: flex; flex-direction: column; gap: 16px; }
.epk-quote {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid #1a1a1a;
  background: rgba(0,0,0,0.02);
}
.epk-quote p {
  margin: 0 0 6px;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
}
.epk-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  font-weight: 500;
}
.epk-quote cite a { color: inherit; }

/* Releases */
.epk-releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.epk-release {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease;
}
.epk-release:hover { transform: translateY(-2px); border-color: rgba(0,0,0,0.2); }
.epk-release__cover {
  aspect-ratio: 1 / 1;
  background: #ddd;
}
.epk-release__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epk-release__title { padding: 10px 12px 0; font-weight: 600; font-size: 14px; }
.epk-release__type {
  padding: 2px 12px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0,0,0,0.55);
}

/* Tour */
.epk-tour-block { margin-bottom: 20px; }
.epk-list { list-style: none; padding: 0; margin: 0; }
.epk-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 14px;
}
.epk-list li:last-child { border-bottom: 0; }
.epk-list__date {
  color: rgba(0,0,0,0.55);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.epk-list__main { font-weight: 500; }

/* Photos */
.epk-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.epk-photo {
  aspect-ratio: 1 / 1;
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.epk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Socials */
.epk-socials-list { list-style: none; padding: 0; margin: 0; }
.epk-socials-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}
.epk-socials__platform {
  color: rgba(0,0,0,0.55);
  font-weight: 500;
}
.epk-socials-list a {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-all;
}

.epk-footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.08); text-align: center; }
.epk-footer .muted { color: rgba(0,0,0,0.5); }
.epk-footer a { color: rgba(0,0,0,0.7); }

/* ==========================================================================
   EPK print rules
   ========================================================================== */

@media print {
  .epk-html, .epk-body { background: #fff; }
  .epk-doc { padding: 0; max-width: none; }
  .epk-header__actions, .epk-footer a[href="/"] + br { display: none !important; }
  .epk-section { page-break-inside: avoid; margin-bottom: 24px; }
  .epk-bio-extra { display: none; }
  .epk-name { font-size: 32px; }
  a { color: inherit; text-decoration: none; }
  .epk-contact-email { text-decoration: underline; }
}
.epk-print .epk-header__actions { display: none; }

/* ==========================================================================
   EPK studio: 404 / unpublished landing
   ========================================================================== */

.epk-unavailable {
  max-width: 480px;
  margin: 80px auto;
  padding: 32px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
}

/* ==========================================================================
   PHASE 9 — Analytics
   ========================================================================== */

/* --- Range switch (7d / 30d / 90d) --- */
.range-switch {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 3px;
}
.range-switch__opt {
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  border-radius: 7px;
  transition: background 120ms ease, color 120ms ease;
}
.range-switch__opt:hover { color: #fff; }
.range-switch__opt.on {
  background: rgba(129,140,248,0.2);
  color: #fff;
}

/* --- KPI grid --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.kpi-card {
  padding: 18px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.kpi-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.kpi-card__num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-card__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

/* --- Card surface ---
   Used everywhere as a content panel. Was previously undefined,
   which meant 50+ usages across views rendered as unstyled divs.
   Same surface treatment as .glass without the backdrop-filter
   (cheaper to render; cards usually have content, not chrome
   behind them). */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
.card + .card { margin-top: 16px; }

/* --- Card legend dots --- */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.card-head__legend {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2, #818cf8);
}
.legend-dot--views { background: #818cf8; }
.legend-dot--clicks { background: #22d3ee; }
.ml-3 { margin-left: 12px; }

/* --- Charts (SVG) --- */
.ch-svg {
  width: 100%;
  height: auto;
  display: block;
}
.ch-stack {
  padding: 8px;
}
.ch-stack__sub {
  margin-top: 4px;
  /* second chart uses cyan accent for clicks */
}
.ch-stack__sub .ch-line { stroke: #22d3ee; }
.ch-stack__sub .ch-area { fill: rgba(34, 211, 238, 0.12); }
.ch-stack__sub .ch-dot  { fill: #22d3ee; }

.ch-line {
  fill: none;
  stroke: #818cf8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ch-area {
  fill: rgba(129, 140, 248, 0.12);
}
.ch-dot {
  fill: #818cf8;
  cursor: default;
}
.ch-grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
.ch-tick {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}
.ch-bar {
  fill: rgba(129, 140, 248, 0.5);
}
.ch-bar-label {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-family: var(--font-sans, sans-serif);
}
.ch-bar-value {
  fill: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.ch-empty {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* --- Rank tables --- */
.rank-table {
  width: 100%;
  border-collapse: collapse;
}
.rank-table th, .rank-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
  text-align: left;
}
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.rank-table td a { color: #fff; text-decoration: none; }
.rank-table td a:hover { color: var(--accent-2); }
.rank-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Two-column grid for cards --- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PHASE 10 — Integrations
   ========================================================================== */

/* --- Share row (link page editor) --- */
.share-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 12px;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.share-btn:hover {
  border-color: rgba(129,140,248,0.4);
  background: rgba(129,140,248,0.08);
  transform: translateY(-1px);
}
.share-btn__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-full { width: 100%; }

/* --- New embed frame variants (TikTok, Instagram, Vimeo) --- */
.lp-embed-frame--vertical {
  aspect-ratio: 9 / 16;  /* TikTok vertical */
  max-width: 360px;
  margin: 0 auto;
}
.lp-embed-frame--portrait {
  aspect-ratio: 4 / 5;  /* Instagram post/reel ratio */
  max-width: 460px;
  margin: 0 auto;
}

/* Plain link card (Twitter/X fallback when no iframe possible) */
.lp-embed-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--lp-radius);
  color: var(--lp-text);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease;
}
.lp-embed-link:hover { transform: translateY(-1px); border-color: var(--lp-accent); }
.lp-embed-link__platform {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-accent);
}
.lp-embed-link__url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  word-break: break-all;
}

/* ==========================================================================
   PHASE 11a — Operator settings
   ========================================================================== */

/* --- Tabs --- */
.settings-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
}
.settings-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.settings-tab:hover { color: rgba(255,255,255,0.9); }
.settings-tab.on {
  color: #fff;
  border-bottom-color: var(--accent-2, #818cf8);
}

.settings-body {
  margin-top: 16px;
}

.settings-fieldset {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 16px 0 8px;
}
.settings-fieldset legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* --- Brand preview boxes --- */
.brand-preview {
  margin-bottom: 8px;
}

/* --- Reserved pill list --- */
.reserved-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  max-height: 140px;
  overflow-y: auto;
}
.reserved-pill {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: rgba(255,255,255,0.65);
}

/* --- Form actions row --- */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ==========================================================================
   PHASE 11b — Operator health page
   ========================================================================== */

/* --- Status chips --- */
.health-chip {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
}
.health-chip--ok   { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.health-chip--warn { background: rgba(234, 179, 8, 0.15);  color: #facc15; }
.health-chip--fail { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; }

/* --- Health table --- */
.health-table {
  width: 100%;
  border-collapse: collapse;
}
.health-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
  font-size: 13px;
}
.health-table tr:last-child td { border-bottom: 0; }
.health-table__status { width: 64px; }
.health-table__label  { font-weight: 500; }
.health-table__value  { font-size: 12px; color: rgba(255,255,255,0.85); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.health-table__detail { color: rgba(255,255,255,0.55); }
.health-table__time   { width: 60px; text-align: right; }

/* --- Log picker tabs --- */
.log-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.log-picker__opt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  transition: border-color 120ms ease, background 120ms ease;
  min-width: 120px;
}
.log-picker__opt.on,
.log-picker__opt:hover {
  border-color: rgba(129,140,248,0.5);
  background: rgba(129,140,248,0.1);
}
.log-picker__name { font-size: 13px; font-weight: 500; }
.log-picker__size { margin-top: 2px; }

/* --- Log list --- */
.log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.log-list__item {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.log-list__item:last-child { border-bottom: 0; }
.log-list__item summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.log-list__item summary::-webkit-details-marker { display: none; }
.log-list__item[open] summary {
  background: rgba(255,255,255,0.02);
}
.log-list__ts { font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.log-list__msg { font-size: 13px; color: rgba(255,255,255,0.9); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-list__trace {
  margin: 0;
  padding: 12px 16px;
  background: rgba(0,0,0,0.25);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Log pager --- */
.log-pager {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.log-pager__opt {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.log-pager__opt:hover { background: rgba(255,255,255,0.08); }
.log-pager__opt.on    { background: rgba(129,140,248,0.2); color: #fff; }

/* ==========================================================================
   PHASE 11c — Plans editor + plan cards
   ========================================================================== */

/* --- Marketing plan cards (landing page) --- */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  padding: 32px 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.plan-card--featured {
  border-color: rgba(129,140,248,0.4);
  background: linear-gradient(180deg, rgba(129,140,248,0.08), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 1px rgba(129,140,248,0.2), 0 8px 32px rgba(67,56,202,0.18);
}
.plan-card__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #4338ca, #818cf8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
}
.plan-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.plan-card__tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}
.plan-card__price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  margin-top: 16px;
}
.plan-card__annual {
  margin-top: 2px;
}
.plan-card__list {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  font-size: 13px;
  flex: 1;
}
.plan-card__list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.plan-card__list li:last-child { border-bottom: 0; }
.plan-card__list li::before {
  content: '✓';
  display: inline-block;
  width: 18px;
  color: #4ade80;
  font-weight: 600;
}

/* --- Inline mini plan picker (signup form) --- */
.plan-picker-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-picker-mini__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.plan-picker-mini__opt:hover {
  border-color: rgba(129,140,248,0.4);
}
.plan-picker-mini__opt.on {
  border-color: rgba(129,140,248,0.6);
  background: rgba(129,140,248,0.08);
}
.plan-picker-mini__opt input[type="radio"] {
  margin: 0;
}
.plan-picker-mini__name {
  font-weight: 500;
}
.plan-picker-mini__price {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}

/* --- Module checkbox grid (operator plan editor) --- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.module-grid__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 13px;
}
.module-grid__opt input[type="checkbox"] {
  margin: 0;
}

/* --- Sidebar locked badge --- */
.studio-nav-badge.locked {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
}

/* --- Form grid 2-col --- */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* --- Checkbox row --- */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  margin: 0;
}

/* ==========================================================================
   PHASE 11d — Updater
   ========================================================================== */

/* The updater reuses health-chip + health-table styles from 11b for
   step status indicators. No additional styling needed - kept here as
   a placeholder for future polish. */

/* ==========================================================================
   PHASE 12 — Export progress, accessibility
   ========================================================================== */

/* Export progress bar */
.export-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.export-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #4338ca, #818cf8);
  transition: width 250ms ease;
}

/* Skip-to-content link (a11y) */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 16px;
  background: #4338ca;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  left: 0;
}

/* Visible focus rings (a11y) */
:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* sr-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tap target minimum sizes */
.studio-nav-item, .btn-sm, .btn-ghost {
  min-height: 36px;
}
@media (max-width: 700px) {
  .btn, .btn-sm, .studio-nav-item, .reorder-btn {
    min-height: 44px;
  }
}

/* ============================================================
   Phase 13.1 — mobile improvements
   ============================================================ */

/* Hide the toggle checkbox - controlled via the label */
.mobile-nav-toggle { display: none; }

/* Hamburger trigger - desktop hides it, mobile shows it */
.mobile-nav-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  margin: -8px 4px -8px -8px;
}
.mobile-nav-trigger:hover { background: var(--surface-2); }

/* Backdrop sits behind the open drawer */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Operator mobile topbar (only visible on mobile) */
.operator-mobile-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 12, 28, 0.6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 50;
}
.operator-mobile-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 980px) {
  .mobile-nav-trigger { display: inline-flex; }
  .operator-mobile-topbar { display: flex; }

  /* Studio sidebar becomes off-canvas drawer */
  .studio-shell .studio-side,
  .operator-shell .operator-side {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 8px 0 32px rgba(0,0,0,0.4);
  }
  .operator-shell .operator-side { display: block; padding: 20px 14px; overflow-y: auto; }

  /* Toggle: when checkbox is checked, drawer slides in + backdrop appears */
  .mobile-nav-toggle:checked ~ .studio-side,
  .mobile-nav-toggle:checked ~ .operator-side {
    transform: translateX(0);
  }
  .mobile-nav-toggle:checked ~ .mobile-nav-backdrop {
    display: block;
  }

  /* Tighten studio topbar for small screens */
  .studio-topbar {
    padding: 10px 16px;
    gap: 10px;
  }
  .studio-search { display: none; }
  .studio-profile-name { display: none; }
  .studio-profile-arrow { display: none; }
  .studio-main { padding: 0; }

  /* Operator main padding */
  .operator-main { padding: 20px 16px; }
}

/* ---- Phone breakpoint ---- */
@media (max-width: 480px) {
  /* Tighten the auth (signup/login) right pane */
  .auth-right { padding: 24px 16px; }
  .auth-headline { font-size: 30px; }
  .auth-form-title { font-size: 22px; }

  /* Tighten landing-page section padding (handles the inline padding 80px / 100px) */
  /* Inline styles on landing.php would override these without !important.
     Apply only to top-level <section> children of .nav-wrap's parent which
     are inline-styled - we use a generic main > section selector. */

  /* Operator stats - one column already at 640px */

  /* Settings tabs: allow horizontal scroll instead of squashing */
  .settings-tabs, .health-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar,
  .health-tabs::-webkit-scrollbar { display: none; }
  .settings-tabs a, .health-tabs a { white-space: nowrap; flex-shrink: 0; }

  /* Tables: convert to stacked cards */
  .release-table thead, .blog-table thead, .gigs-table thead, .merch-table thead {
    display: none;
  }
  .release-table tr, .blog-table tr, .gigs-table tr, .merch-table tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .release-table td, .blog-table td, .gigs-table td, .merch-table td {
    display: block;
    padding: 4px 0;
    border: 0;
  }
}

/* ---- iOS Safari: prevent input zoom by ensuring 16px+ font-size ---- */
@media (max-width: 980px) {
  .field-input,
  .field-textarea,
  .field-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ---- Form field tap targets on mobile ---- */
@media (max-width: 700px) {
  .field-input, .field-select {
    min-height: 44px;
  }
  /* Make textareas comfortable but not huge */
  .field-textarea {
    min-height: 88px;
  }
}

/* ---- Fan link page: ensure block buttons are tappable ---- */
@media (max-width: 480px) {
  /* Padding tweak so the fan page doesn't waste edge space */
  .lp-main { padding: 24px 16px 60px; }
}

/* ---- Plan cards: stack on phone ---- */
@media (max-width: 700px) {
  .plan-cards { grid-template-columns: 1fr !important; }
}

/* ---- Modal/picker overflow fix on small phones ---- */
@media (max-width: 480px) {
  .modal-card,
  .picker-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* ---- Operator sidebar styles when shown as drawer (overrides desktop) ---- */
@media (max-width: 980px) {
  .operator-side {
    background: var(--surface-1);
    border-right: 1px solid var(--border);
  }
}

/* ============================================================
   Pagination (operator artists list, etc.)
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pagination-info {
  font-size: 13px;
  color: var(--text-mute-2);
}
.pagination-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-page-of {
  font-size: 12px;
  color: var(--text-mute-2);
  padding: 0 8px;
}
@media (max-width: 480px) {
  .pagination { justify-content: center; }
  .pagination-info { width: 100%; text-align: center; }
}

/* ============================================================
   POLISH PASS
   Added late: shared base classes, missing utilities,
   loading states, print sheet. Sweeps up inconsistencies
   accumulated across earlier phases.
   ============================================================ */

/* ---- Alerts: shared base + missing variants ---- */
/* Earlier phases declared .alert-warn and .alert-info standalone (each
   redeclaring padding/radius/font-size). Now there's a single .alert
   base; variants only set color tokens. */
.alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert a { color: inherit; text-decoration: underline; }
.alert strong { font-weight: 700; }
.alert-error,
.alert-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: #fbcfe8;
}
.alert-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: #bbf7d0;
}
/* Note: .alert-warn and .alert-info are kept earlier in this file as
   standalone rules for backwards compat; they don't NEED the .alert
   base class to render correctly, though they will compose with it
   if both are applied. */

/* ---- Missing utilities used across views ---- */
/* These were referenced by view templates but never defined; views
   silently rendered without them. Filled in here. */
.w-full       { width: 100%; }
.h-full       { height: 100%; }
.mt-1         { margin-top: 4px; }
.mt-3         { margin-top: 12px; }
.mt-5         { margin-top: 20px; }
.mb-1         { margin-bottom: 4px; }
.mb-3         { margin-bottom: 12px; }
.mb-5         { margin-bottom: 20px; }
.dim          { color: var(--text-mute-2); }
.muted        { color: var(--text-mute); }
.small        { font-size: 12.5px; }
.mono         { font-family: var(--font-mono); }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1        { gap: 4px; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.gap-4        { gap: 16px; }

/* ---- Loading states ---- */
/* Skeleton: a soft gradient sweep on a low-contrast surface block.
   Used as a placeholder while content loads. Markup is just an empty
   element with .skeleton + a width/height (or use .skeleton-line/text).
   Respects prefers-reduced-motion via the global rule above. */
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: block;
}
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-line.short { width: 40%; }
.skeleton-line.med   { width: 70%; }
.skeleton-line.long  { width: 95%; }
.skeleton-card { height: 120px; border-radius: var(--r-lg); margin-bottom: 12px; }

/* Spinner: matches button height. Used in async submit states. */
@keyframes tempoSpin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tempoSpin 0.7s linear infinite;
  vertical-align: -2px;
}
.btn .spinner { margin-right: 6px; }

/* ---- Cursor affordances ---- */
/* Sortable handles, drag bits — give the right cursor without each
   feature having to re-declare it. */
[data-sort-handle], .sortable-handle, .drag-handle { cursor: grab; }
[data-sort-handle]:active,
.sortable-handle:active,
.drag-handle:active { cursor: grabbing; }
[role="button"]:not(:disabled),
[data-clickable]:not(:disabled) { cursor: pointer; }

/* ---- Visually hidden (for screen-reader-only labels) ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Image loading defaults ---- */
/* Prevents layout shift on slow connections. */
img[loading="lazy"] { background: var(--surface); }

/* ---- Print stylesheet ---- */
/* Tempo isn't print-first, but artists occasionally print an EPK or
   release page to fax to a venue (yes, in 2026, this still happens).
   Hide chrome, force light background, expand all collapsed sections. */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  .ambient, .ambient-grid, .orb,
  .studio-sidebar, .studio-mobile-bar,
  .operator-sidebar, .operator-mobile-bar,
  .nav-wrap, .skip-to-content,
  .btn, .pagination,
  .studio-flash, .operator-flash {
    display: none !important;
  }
  .glass, .card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  /* Print URL after links so the printed doc retains the hyperlink info */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #555;
  }
  .studio-page, .operator-page, .epk-page {
    padding: 0 !important;
    max-width: none !important;
  }
  /* Avoid page breaks inside cards */
  .card, .glass, .release-row, .gig-row { break-inside: avoid; }
}

/* ============================================================
   ATMOSPHERE PASS
   The details that separate "competent" from "crafted." Each
   addition is restrained and serves a specific purpose.
   ============================================================ */

/* ---- Film grain ----
   A fixed-position pseudo-element on body that overlays the entire
   viewport with a noise pattern at ~3% opacity. Removes the "perfectly
   sterile digital" feel of pure-color UIs and gives the dark surface
   a sense of material. Used by Vercel, Linear, Arc, and most modern
   dark-mode design systems.
   The noise is a base64-encoded SVG so we ship zero extra image bytes.
   pointer-events:none so it never interferes with clicks. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Respect reduced-data preference: kill grain over metered connections.
   Saves ~2KB and a paint pass. */
@media (prefers-reduced-data: reduce) {
  body::after { display: none; }
}

/* ---- Link underline animation ----
   For text links inside prose contexts (body copy in landing, blog
   posts, EPK bio). The animation slides the underline from left over
   200ms — the classic editorial move. Scoped to .prose containers
   only so it doesn't hit nav links, link-page block links, or auth
   form footer links. Add class="prose" to any container of body copy
   to opt in. */
.prose a {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
  text-decoration: none;
}
.prose a:hover {
  background-size: 100% 1px;
}

/* ---- Logo glow: chromatic aberration ----
   A red+blue offset on the gradient logo's drop shadow. At normal
   viewing distance it reads as a richer glow; close up there's a
   subtle photographic "lens" effect. Imperceptible if missed but
   adds depth if noticed. */
.logo-mark {
  filter:
    drop-shadow(-1px 0 0 rgba(244, 114, 182, 0.15))
    drop-shadow(1px 0 0 rgba(67, 56, 202, 0.2));
}

/* ---- Smooth scroll ----
   Globally enabled. Already collapsed by prefers-reduced-motion above. */
html { scroll-behavior: smooth; }

/* ---- Caret color ----
   The text-input caret defaults to white; we tint it indigo so it
   feels intentional rather than browser-native. */
input, textarea, [contenteditable] {
  caret-color: var(--accent-light);
}

/* ---- Selection inside .glass surfaces ----
   Slightly stronger so the selected text reads cleanly through the blur. */
.glass ::selection, .glass-deep ::selection {
  background: rgba(129, 140, 248, 0.45);
}

/* ---- Cards with focus-visible rings ----
   When tabbing, give .glass-interactive a clean halo instead of the
   browser's default 1px outline (which clips against the rounded
   corners and looks bad). */
.glass-interactive:focus-visible,
a.glass:focus-visible {
  outline: none;
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 5px rgba(129, 140, 248, 0.1),
    0 16px 32px -12px rgba(0, 0, 0, 0.6);
}

/* ---- Staggered list reveal ----
   For lists of items rendered after a route change (release rows,
   gigs, etc.). Use by adding `.stagger > *` — each child fades in
   with a tiny delay relative to its index. Delays via inline custom
   property `--i: 0` (set in markup or by JS) — falls back to no delay. */
@keyframes staggerRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger > * {
  animation: staggerRise 0.4s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* ---- Subtle gradient sweep on focus rings of primary CTAs ----
   When the primary "submit" button has focus AND is hovered, the
   white surface picks up a faint indigo wash. Tiny but the kind of
   detail that registers subconsciously. */
.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.4),
    0 0 0 2px var(--bg),
    0 0 0 4px var(--accent-light),
    0 0 32px rgba(129, 140, 248, 0.4);
}

/* ---- Sibling spacing for stacked glass cards ----
   Considered: an automatic margin-top between adjacent .glass cards.
   Decided against — existing layouts manage their own spacing
   explicitly via .settings-section, .studio-page-stack, etc., and
   adding a default would cause double-margins in some places. */

/* ---- Page enter animation ----
   Considered, deliberately omitted. A subtle fade-up on every page
   navigation reads novel for the first three pages and tiresome by
   the tenth. Better to leave navigation feeling instant and reserve
   animation for moments where the user is creating something. */

/* ---- Keyboard focus ring on all interactive elements ----
   The global :focus-visible already exists; this adds it to common
   interactive HTML elements that don't go through .btn. */
button:focus-visible:not(.btn),
a:focus-visible:not(.btn):not(.studio-nav-item) {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   MOBILE / TOUCH ADJUSTMENTS
   The atmosphere pass added several hover-state effects (card
   lift, button glow, link underline animation). On touch devices,
   :hover fires on tap and stays until the next tap somewhere
   else — leaving cards permanently "hovered" until the user
   navigates. Disable those on hover-less devices. We also tone
   down some GPU-heavy effects on small screens.
   ============================================================ */

/* Touch devices (no fine pointer) — strip the hover animations.
   `hover: none` matches touch-only devices; `hover: hover` matches
   anything with a real cursor (mouse, trackpad, stylus with hover). */
@media (hover: none) {
  /* Card lift on hover -> nothing on touch */
  .glass-interactive:hover,
  a.glass:hover, button.glass:hover {
    transform: none;
    border-color: var(--border);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 -1px 0 rgba(0, 0, 0, 0.2) inset,
      0 8px 24px -12px rgba(0, 0, 0, 0.5),
      0 24px 48px -24px rgba(0, 0, 0, 0.4);
  }
  /* Active-press feedback INSTEAD of hover. Tighter, snappier.
     This fires for ~150ms on tap-down and gives the touch user
     the affordance the desktop user gets via hover. */
  .glass-interactive:active,
  a.glass:active, button.glass:active {
    transform: scale(0.99);
    transition: transform 0.08s ease;
  }

  /* Primary button: no glow, no lift on touch. Just darken slightly
     on tap. */
  .btn-primary:hover:not(:disabled) {
    background: rgba(255,255,255,0.95);
    transform: none;
    box-shadow:
      0 8px 24px -4px rgba(0,0,0,0.4),
      0 1px 0 rgba(255,255,255,0.4) inset;
  }
  .btn-primary:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }

  /* Link underline animation: instant on touch (the slide-in is
     pointless when the user can't hover-and-watch). */
  .prose a {
    transition: none;
    background-size: 100% 1px;  /* always-on underline on touch */
  }
}

/* Small screens: ease GPU load. The 4-layer drop shadow looks
   gorgeous on a 27" 5K display and is wasted on a 6" phone where
   the shadow visibility is < 5px anyway. Keep the inner highlight
   (cheap), drop the deep outer shadow (expensive paint on every
   scroll frame).
   Cutoff at 700px = roughly all phones in portrait, large phones
   in landscape stay full-quality. */
@media (max-width: 700px) {
  .glass {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 8px 16px -8px rgba(0, 0, 0, 0.5);
  }
  .glass-deep {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 12px 32px -8px rgba(0, 0, 0, 0.6);
  }
}

/* Film grain: cheap-Android perf concern.
   `mix-blend-mode: overlay` on a fixed layer that covers the whole
   viewport means a full-screen composite per frame. On a Pixel 4a
   or older this can drop scroll fps from 60 → 45.
   At <=480px we drop the blend-mode (still shows grain via
   straight opacity, which is GPU-cheap) and lower opacity slightly
   since straight-opacity grain reads stronger than overlay-blended
   grain at the same value. */
@media (max-width: 480px) {
  body::after {
    mix-blend-mode: normal;
    opacity: 0.025;
  }
}

/* Reduced-motion already handled globally — no extra mobile work
   needed there. The orbs animation is throttled by `prefers-reduced-motion`
   automatically. */

/* Studio nav active-bar position fix.
   On mobile when the sidebar is in drawer mode, it slides in from
   the left edge of the viewport. The active-bar uses `left: -1px`
   which hangs slightly outside its parent — fine when the sidebar
   has a visible right border, can clip on a drawer if the drawer
   has overflow-x: hidden anywhere up the tree.
   Force inside the parent on small screens. */
@media (max-width: 980px) {
  .studio-nav-item.active::before {
    left: 2px;
  }
}

/* ---- Mobile tap-target enforcement ----
   Custom checkboxes/radios are 16×16. Native browser controls
   include invisible click-area padding around them; our custom
   styled ones don't. WCAG 2.1 SC 2.5.5 (Target Size) recommends
   44×44 minimum on touch.
   Two layers of fix:
     1. Bump visible size 16 → 18 on touch (still proportional).
     2. Standard pattern in our markup is `<label><input>...</label>` —
        labels grow the click area implicitly. We give labels a min
        block size of 44px on touch so single-line checkbox labels
        get the recommended hit area without changing the look.
   Markup that uses bare <input type="checkbox"> outside a label
   won't get the label boost — but in this codebase every checkbox
   IS inside a label (audited the views). */
@media (max-width: 700px) and (hover: none) {
  input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
  }
  /* Touch-friendly labels containing form controls */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
}

/* ============================================================
   Studio overview — module count cards
   ============================================================ */
.overview-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
a:hover .overview-stat {
  background: var(--surface-2);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.overview-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.overview-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute-2);
}

/* Generic storage bar (also used for profile completeness on overview) */
.storage-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.storage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 999px;
  transition: width 0.4s ease;
}
@media (hover: none) {
  a:hover .overview-stat { transform: none; }
}

/* ============================================================
   File inputs — replace ugly native UI with styled control.
   Strategy: keep the native input fully functional and accessible,
   but visually hide it and style its parent label (or sibling) as
   a button. Two patterns supported:

   1) Plain <input type="file"> — gets a CSS-only treatment via
      ::file-selector-button (Chrome 89+, Firefox 82+, Safari 14.1+).
      No markup changes needed; existing forms automatically adopt
      the new look.

   2) <label class="file-input"><input type="file">…</label> — for
      cases where we want a "drop zone" or icon-rich variant. Use
      the .file-input wrapper class.
   ============================================================ */

/* Pattern 1: native file input with restyled selector button */
input[type="file"] {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-mute);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0;                              /* button supplies its own padding */
  cursor: pointer;
  width: 100%;
  max-width: 480px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
input[type="file"]:hover {
  border-color: var(--border-2);
  background: var(--surface-3);
}
input[type="file"]:focus-visible {
  outline: none;
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 5px rgba(129, 140, 248, 0.08);
}
/* The native "Choose file" button itself */
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-3);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: var(--r) 0 0 var(--r);
  padding: 10px 16px;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(129, 140, 248, 0.15);
  color: var(--accent-pale);
}
/* Webkit fallback — older Safari */
input[type="file"]::-webkit-file-upload-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-3);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: var(--r) 0 0 var(--r);
  padding: 10px 16px;
  margin-right: 12px;
  cursor: pointer;
}
/* Disabled state */
input[type="file"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
input[type="file"]:disabled::file-selector-button { cursor: not-allowed; }

/* Pattern 2: drop-zone variant (.file-input wrapper)
   Markup:
   <label class="file-input">
     <input type="file" name="…" accept="…" data-file-input>
     <span class="file-input-button">
       <svg>upload icon</svg> Choose file
     </span>
     <span class="file-input-hint" data-file-input-hint>PNG or JPG, up to 5 MB</span>
   </label>
   The native input is visually hidden but still receives clicks
   via the label association. JS in layouts/studio.php and
   layouts/operator.php updates the hint text on file pick and
   adds drag-and-drop. */
.file-input {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.file-input:hover {
  background: var(--surface-2);
  border-color: rgba(129, 140, 248, 0.45);
}
.file-input input[type="file"] {
  /* Visually hidden but still focusable & clickable via label */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* Focus halo: appears when the hidden input has keyboard focus.
   Gives the wrapper itself a focus ring matching form-field style. */
.file-input:focus-within {
  border-color: rgba(129, 140, 248, 0.55);
  border-style: solid;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 5px rgba(129, 140, 248, 0.08);
}
.file-input-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.file-input:hover .file-input-button {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.4);
  color: var(--accent-pale);
}
.file-input-hint {
  font-size: 12.5px;
  color: var(--text-mute-2);
  /* Truncate long filenames gracefully on small viewports */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Active drag state — solid indigo border, faint indigo wash */
.file-input.is-dragover {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.6);
  border-style: solid;
}
/* After a file has been picked: subtle "OK" treatment so the user
   sees confirmation without it being loud. The button itself shifts
   to the success palette to read as "done". */
.file-input.has-file {
  border-style: solid;
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.03);
}
.file-input.has-file .file-input-button {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.3);
  color: var(--success);
}
.file-input.has-file .file-input-hint {
  color: var(--text);
}

/* ============================================================
   LANDING PAGE — Numbers, Builder, How, FAQ, CTA
   Glass-aesthetic sections matching the rest of the marketing
   page. Self-contained — no dependencies on existing landing
   styles.
   ============================================================ */

/* ---- Numbers in motion ---- */
/* (lp-numbers consolidated in landing pass below) */

/* ---- Live builder section ---- */
.lp-builder {
  padding: 100px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.lp-builder__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.lp-builder__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-builder__bullets li {
  font-size: 14.5px;
  color: var(--text-mute);
  padding-left: 26px;
  position: relative;
  line-height: 1.55;
}
.lp-builder__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 2px;
  background: linear-gradient(90deg, var(--accent-light), transparent);
  border-radius: 2px;
}
@media (max-width: 980px) {
  .lp-builder__inner { grid-template-columns: 1fr; gap: 48px; }
}

/* Mock browser preview */
.lp-mock {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 60px 120px -40px rgba(67, 56, 202, 0.2);
  max-width: 420px;
  margin: 0 auto;
}
.lp-mock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border);
}
.lp-mock__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.lp-mock__dot:nth-child(1) { background: rgba(244, 114, 182, 0.4); }
.lp-mock__dot:nth-child(2) { background: rgba(251, 191, 36, 0.4); }
.lp-mock__dot:nth-child(3) { background: rgba(74, 222, 128, 0.4); }
.lp-mock__url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 8px;
}
.lp-mock__body {
  padding: 32px 28px;
  text-align: center;
}
.lp-mock__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  margin: 0 auto 16px;
  box-shadow: 0 0 24px rgba(129, 140, 248, 0.4);
}
.lp-mock__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.lp-mock__bio {
  font-size: 12px;
  color: var(--text-mute-2);
  margin-bottom: 24px;
}
.lp-mock__block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.lp-mock__block:hover {
  transform: translateX(2px);
  border-color: rgba(129, 140, 248, 0.3);
}
.lp-mock__block--release {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.12), rgba(67, 56, 202, 0.05));
  border-color: rgba(129, 140, 248, 0.25);
}
.lp-mock__block-cover {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f472b6, #818cf8, #4338ca);
  flex-shrink: 0;
}
.lp-mock__block-title { font-weight: 600; font-size: 13px; }
.lp-mock__block-sub { font-size: 11px; color: var(--text-mute-2); margin-top: 1px; }
.lp-mock__block--ghost {
  border-style: dashed;
  border-color: var(--border-2);
  background: transparent;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
}

/* (lp-how consolidated in landing rebuild below) */
.lp-how__body code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent-pale);
}
@media (max-width: 880px) {
  .lp-how__steps { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- FAQ ---- */
.lp-faq {
  padding: 100px 24px;
  max-width: 800px;
  margin: 0 auto;
}
.lp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.lp-faq__item[open] {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.lp-faq__item summary {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 20px 56px 20px 24px;
  cursor: pointer;
  list-style: none;
  position: relative;
  color: var(--text);
}
.lp-faq__item summary::-webkit-details-marker {
  display: none;
}
.lp-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--accent-light);
  transition: transform 0.2s ease;
  font-family: var(--font-mono);
  line-height: 1;
}
.lp-faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.lp-faq__answer {
  padding: 0 24px 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-mute);
}
.lp-faq__answer code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent-pale);
}

/* ---- Big CTA ---- */
.lp-cta {
  padding: 120px 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.lp-cta__inner {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(67, 56, 202, 0.04));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.lp-cta__inner::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.1), transparent 60%);
  pointer-events: none;
}
.lp-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 20px;
  position: relative;
}
.lp-cta__sub {
  font-size: 17px;
  color: var(--text-mute);
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.lp-cta__actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

/* Mobile tightening for landing-only sections */
@media (max-width: 700px) {
  .lp-builder, .lp-how, .lp-faq, .lp-cta { padding-top: 64px; padding-bottom: 64px; }
  .lp-cta__inner { padding: 56px 24px; }
}

/* ============================================================
   LANDING PAGE — full redesign
   Sections: hero, numbers, pillars (mouse-follow glow), live
   builder, how-it-works (mini-UI shimmers), pricing, FAQ, CTA
   (ambient orb), footer.
   ============================================================ */

/* ---- Hero ---- */
.lp-hero {
  position: relative;
  padding: 80px 24px 100px;
  max-width: 1280px;
  margin: 0 auto;
}
.lp-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lp-hero__copy { min-width: 0; }
.lp-hero__badge { margin-bottom: 24px; }
.lp-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.lp-hero__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 560px;
  margin-bottom: 32px;
}
.lp-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.lp-hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-hero__avatars { display: flex; }
.lp-hero__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g);
  border: 2px solid var(--bg);
  margin-left: -10px;
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}
.lp-hero__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lp-hero__avatar:first-child { margin-left: 0; }
.lp-hero__trust-text {
  font-size: 13px;
  color: var(--text-mute-2);
  line-height: 1.4;
}

/* Hero preview phone */
.lp-hero__preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}
.lp-hero__phone {
  width: 280px;
  height: 520px;
  background: linear-gradient(180deg, #0e1132 0%, #050714 100%);
  border-radius: 36px;
  border: 1px solid var(--border-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px -20px rgba(0,0,0,0.7),
    0 60px 120px -40px rgba(67,56,202,0.2);
  padding: 24px 18px;
  position: relative;
  overflow: hidden;
}
.lp-hero__phone-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  text-align: center;
}
.lp-hero__phone-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  margin: 8px auto 4px;
  box-shadow: 0 8px 20px -4px rgba(67,56,202,0.5);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lp-hero__phone-avatar svg { width: 100%; height: 100%; display: block; }
.lp-hero__phone-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--text);
}
.lp-hero__phone-bio {
  font-size: 11.5px;
  color: var(--text-mute-2);
  margin-bottom: 8px;
}
.lp-hero__phone-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  text-align: left;
}
.lp-hero__phone-cover {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  flex-shrink: 0;
}
.lp-hero__phone-row1 { font-weight: 600; }
.lp-hero__phone-row2 { color: var(--text-mute-2); font-size: 11px; }

/* Floating notification chips around the phone */
@keyframes chipBobA {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(-2deg); }
}
@keyframes chipBobB {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
.lp-hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(15, 18, 41, 0.85);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 32px -8px rgba(0,0,0,0.6);
  font-size: 12px;
}
.lp-hero__chip-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(129, 140, 248, 0.15);
  border-radius: 8px;
  font-size: 14px;
}
.lp-hero__chip-title { font-weight: 600; color: var(--text); }
.lp-hero__chip-sub   { font-size: 10.5px; color: var(--text-mute-2); margin-top: 1px; }
.lp-hero__chip--mail {
  top: 8%;
  left: -8%;
  animation: chipBobA 4.5s ease-in-out infinite;
}
.lp-hero__chip--epk {
  bottom: 14%;
  right: -10%;
  animation: chipBobB 5.2s ease-in-out infinite;
  animation-delay: -1s;
}

/* ---- Numbers in motion (canonical, single definition) ---- */
.lp-numbers {
  padding: 56px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.lp-numbers__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
  align-items: center;
  justify-items: center;
}
.lp-number {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-number__value {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff, var(--accent-pale));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lp-number__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute-2);
}

/* ---- Pillars grid (mouse-follow glow) ---- */
.lp-pillars {
  padding: 100px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.lp-pillars__head {
  text-align: center;
  margin-bottom: 56px;
}
.lp-pillars__head .eyebrow { margin-bottom: 16px; }
.lp-pillars__head h2 { margin-bottom: 20px; }
.lp-pillars__sub {
  font-size: 17px;
  color: var(--text-mute-2);
  max-width: 560px;
  margin: 0 auto;
}
.lp-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .lp-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lp-pillars__grid { grid-template-columns: 1fr; }
}
.lp-pillar {
  position: relative;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
/* The glow follows the cursor: ::before is a radial gradient
   centered on (--mx, --my). When --mx is unset, the gradient
   sits at top-left at low opacity (looks like ambient sheen). */
.lp-pillar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, -200px) var(--my, -200px),
    rgba(129, 140, 248, 0.15),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-pillar:hover::before { opacity: 1; }
.lp-pillar:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.lp-pillar > * { position: relative; z-index: 1; }
.lp-pillar__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 24px;
}
.lp-pillar__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.lp-pillar__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute-2);
}

/* ---- Live builder ---- */
.lp-builder {
  padding: 100px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.lp-builder__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lp-builder__copy .eyebrow { margin-bottom: 16px; }
.lp-builder__copy h2 { margin-bottom: 20px; }
.lp-builder__intro {
  font-size: 16px;
  color: var(--text-mute);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 32px;
}
.lp-builder__field { display: block; margin-bottom: 20px; max-width: 460px; }
.lp-builder__field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
  font-weight: 500;
}
.lp-builder__input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.lp-builder__input:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.5);
  background: var(--surface-3);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 5px rgba(129, 140, 248, 0.08);
}
.lp-builder__platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-builder__platform-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.lp-builder__platform {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-mute);
  padding: 8px 14px;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  flex-shrink: 0;
  white-space: nowrap;
}
.lp-builder__platform-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.lp-builder__platform.on .lp-builder__platform-dot { opacity: 1; }
.lp-builder__platform:hover {
  border-color: var(--border-2);
  color: var(--text);
}
.lp-builder__platform.on {
  background: rgba(129,140,248,0.12);
  border-color: rgba(129,140,248,0.4);
  color: var(--accent-pale);
}
.lp-builder__url {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.lp-builder__url:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.5);
  background: var(--surface-3);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 4px rgba(129, 140, 248, 0.08);
}
.lp-builder__url::placeholder { color: var(--text-faint); }
@media (max-width: 600px) {
  .lp-builder__platform-row { flex-direction: column; gap: 6px; }
  .lp-builder__platform { width: 100%; min-width: 0; justify-content: flex-start; }
}
.lp-builder__colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-builder__color {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
}
.lp-builder__color:hover { transform: scale(1.1); }
.lp-builder__color.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 16px currentColor;
  transform: scale(1.1);
}
.lp-builder__cta { margin-top: 16px; }

/* Live preview phone (interactive) */
.lp-builder__preview {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.lp-builder__phone {
  width: 300px;
  height: 580px;
  background: linear-gradient(180deg, #0e1132, #050714);
  border-radius: 40px;
  border: 1px solid var(--border-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 80px -20px rgba(0,0,0,0.7);
  padding: 32px 20px 24px;
  position: relative;
  overflow: hidden;
}
.lp-builder__phone-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 18px;
  background: #000;
  border-radius: 999px;
}
.lp-builder__phone-screen {
  display: flex; flex-direction: column;
  text-align: center;
  height: 100%;
  padding-top: 12px;
}
.lp-builder__phone-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-live), color-mix(in srgb, var(--accent-live) 50%, var(--accent)));
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px -4px var(--accent-live);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lp-builder__phone-avatar svg { width: 100%; height: 100%; display: block; }
.lp-builder__phone-name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lp-builder__phone-tag {
  font-size: 12px;
  color: var(--text-mute-2);
  margin-bottom: 24px;
}
.lp-builder__phone-blocks {
  display: flex; flex-direction: column;
  gap: 10px;
}
.lp-builder__phone-block {
  display: flex; align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12.5px;
  text-align: left;
  transition: background 0.15s ease;
}
.lp-builder__phone-block-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lp-builder__phone-block-label { color: var(--text); }
.lp-builder__phone-empty {
  color: var(--text-faint);
  font-size: 12px;
  padding: 24px 12px;
  font-style: italic;
}

/* ---- How it works (mini-UI shimmers) ----
   No background panel — let the page background flow through.
   The cards themselves provide the visual demarcation. */
.lp-how {
  padding: 100px 24px;
}
.lp-how__inner { max-width: 1280px; margin: 0 auto; }
.lp-how__head { text-align: center; margin-bottom: 56px; }
.lp-how__head .eyebrow { margin-bottom: 16px; }
.lp-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-how__step {
  padding: 32px 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.lp-how__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--accent-pale);
  margin-bottom: 16px;
  font-weight: 600;
}
.lp-how__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.lp-how__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mute);
  margin-bottom: 24px;
}
/* Mini-UI shimmer base. Visible against dark bg via brighter
   gradient stops than --surface (which was nearly invisible). */
@keyframes miniShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.lp-how__mini {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 14px;
}
/* Step 1: typing input */
.lp-how__mini--input {
  display: flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  gap: 2px;
}
.lp-how__mini-prefix { color: var(--text-mute-2); }
.lp-how__mini-typing {
  color: var(--text);
  border-right: 2px solid var(--accent-light);
  animation: miniCursor 1s step-end infinite;
  padding-right: 2px;
}
@keyframes miniCursor { 50% { border-color: transparent; } }
.lp-how__mini-check {
  margin-left: auto;
  color: var(--success);
  font-weight: 700;
}
/* Step 2: skeleton list — visible gradient stops */
.lp-how__mini--list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.lp-how__mini-row { display: flex; align-items: center; gap: 10px; }
.lp-how__mini-thumb {
  width: 28px; height: 28px;
  border-radius: 6px;
  background-color: rgba(129, 140, 248, 0.18);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: miniShimmer 2s ease-in-out infinite;
  flex-shrink: 0;
}
.lp-how__mini-bar {
  height: 10px;
  border-radius: 5px;
  background-color: rgba(129, 140, 248, 0.18);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: miniShimmer 2s ease-in-out infinite;
}
.lp-how__mini-bar--long  { width: 80%; }
.lp-how__mini-bar--med   { width: 60%; }
.lp-how__mini-bar--short { width: 40%; }
/* Step 3: bar chart */
.lp-how__mini--chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 80px;
}
.lp-how__mini-chartbar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-radius: 3px 3px 0 0;
  opacity: 0.6;
  animation: miniBarPulse 2.4s ease-in-out infinite;
}
.lp-how__mini-chartbar:nth-child(2) { animation-delay: 0.15s; }
.lp-how__mini-chartbar:nth-child(3) { animation-delay: 0.3s; }
.lp-how__mini-chartbar:nth-child(4) { animation-delay: 0.45s; }
.lp-how__mini-chartbar:nth-child(5) { animation-delay: 0.6s; }
.lp-how__mini-chartbar:nth-child(6) { animation-delay: 0.75s; }
@keyframes miniBarPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ---- Pricing ---- */
.lp-pricing {
  padding: 100px 24px 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.lp-pricing__head {
  text-align: center;
  margin-bottom: 48px;
}
.lp-pricing__head .eyebrow { margin-bottom: 16px; }

/* ---- FAQ ---- */
.lp-faq { padding: 100px 24px; max-width: 800px; margin: 0 auto; }
.lp-faq__head { text-align: center; margin-bottom: 56px; }
.lp-faq__head .eyebrow { margin-bottom: 16px; }
.lp-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lp-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.lp-faq__item[open] {
  border-color: rgba(129, 140, 248, 0.3);
}
.lp-faq__item summary {
  padding: 20px 24px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.15s ease;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-mute);
  border-bottom: 2px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.lp-faq__item[open] summary::after {
  transform: rotate(-135deg);
}
.lp-faq__item summary:hover { color: var(--accent-pale); }
.lp-faq__answer {
  padding: 0 24px 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-mute);
}
.lp-faq__answer code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* ---- Big CTA with ambient orb ---- */
.lp-cta {
  position: relative;
  padding: 120px 24px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.lp-cta__orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 800px; height: 800px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(67, 56, 202, 0.4) 0%,
    rgba(124, 58, 237, 0.15) 40%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: ctaOrb 12s ease-in-out infinite;
}
@keyframes ctaOrb {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.1); }
}
.lp-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}
.lp-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.lp-cta__sub {
  font-size: 17px;
  color: var(--text-mute);
  margin-bottom: 36px;
  line-height: 1.5;
}
.lp-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Footer ---- */
.lp-footer {
  padding: 48px 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.lp-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.lp-footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.lp-footer__extra {
  margin-top: 12px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .lp-hero__inner,
  .lp-builder__inner { grid-template-columns: 1fr; gap: 48px; }
  .lp-hero__preview { min-height: 480px; }
  .lp-numbers__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .lp-how__steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-hero { padding: 48px 20px 64px; }
  .lp-hero__phone { width: 240px; height: 460px; }
  .lp-hero__chip--mail { left: -4%; top: 4%; }
  .lp-hero__chip--epk  { right: -4%; bottom: 8%; }
  .lp-builder__phone { width: 260px; height: 500px; }
  .lp-pillars,
  .lp-builder,
  .lp-pricing,
  .lp-faq,
  .lp-cta { padding-left: 20px; padding-right: 20px; }
  .lp-cta { padding-top: 80px; padding-bottom: 80px; }
}

/* ============================================================
   Default avatar
   Gradient circle with a person silhouette inside. The silhouette
   is rendered via inline SVG (the partial app/Views/_avatar.php).
   The gradient is set per-instance via --av-gradient custom property
   so each avatar can have its own palette. Falls back to the brand
   indigo gradient when unspecified.
   ============================================================ */
.avatar-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--av-size, 48px);
  height: var(--av-size, 48px);
  border-radius: 50%;
  background: var(--av-gradient, linear-gradient(135deg, var(--accent-light), var(--accent)));
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset;
}
.avatar-default svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Profile-chip / artist-row silhouette fallback when no avatar
   image is uploaded. Inline SVG that fills the parent avatar circle. */
.avatar-silhouette {
  width: 100%;
  height: 100%;
  display: block;
}
.studio-profile-avatar svg.avatar-silhouette,
.artist-table img.avatar-silhouette,
.artist-row .avatar-silhouette {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Public artist placeholder page (.ap-*)
   The fallback shown at /{slug} when an artist has no live link
   page. With auto-create-on-signup this is a rare edge case but
   it should still look intentional, not half-built.
   ============================================================ */
.ap-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  position: relative;
  z-index: 1;
}
.ap-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 64px;
}
.ap-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.ap-byline:hover { color: var(--text-mute); }
.ap-hero {
  text-align: center;
  margin-bottom: 48px;
}
.ap-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  margin: 0 auto 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 8px 32px -8px rgba(67,56,202,0.5);
}
.ap-avatar svg { width: 100%; height: 100%; display: block; }
.ap-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ap-name {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.ap-handle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--text-mute-2);
  margin-bottom: 24px;
}
.ap-bio {
  max-width: 520px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mute);
}
.ap-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 56px;
}
.ap-nav-link {
  display: inline-block;
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  text-decoration: none;
  transition: all 0.15s ease;
}
.ap-nav-link:hover {
  border-color: var(--border-2);
  color: var(--text);
  background: var(--surface-2);
}
.ap-section { margin-bottom: 48px; }
.ap-section .eyebrow { margin-bottom: 16px; text-align: center; }
@media (max-width: 600px) {
  .ap-page { padding: 32px 20px 64px; }
  .ap-topbar { margin-bottom: 40px; }
  .ap-avatar { width: 80px; height: 80px; }
}

/* ============================================================
   Quick actions — used on studio overview for both new and
   returning artists. New-artist version is vertical (full
   description). Returning-artist version is inline (compact row).
   ============================================================ */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s ease;
}
.quick-action:hover {
  background: var(--surface-3, rgba(255,255,255,0.06));
  border-color: var(--border-2);
  transform: translateX(2px);
}
.quick-action-icon {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(129,140,248,0.10);
  border: 1px solid rgba(129,140,248,0.18);
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}
.quick-action-body { flex: 1; min-width: 0; }
.quick-action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.quick-action-sub {
  font-size: 12.5px;
  color: var(--text-mute-2);
  line-height: 1.3;
}
.quick-action-arrow {
  color: var(--text-faint);
  font-size: 16px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.quick-action:hover .quick-action-arrow {
  color: var(--accent-pale);
  transform: translateX(2px);
}

/* Inline (returning-artist) variant: compact horizontal grid */
.quick-actions--inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.quick-actions--inline .quick-action {
  padding: 12px 14px;
  gap: 10px;
}
.quick-actions--inline .quick-action-icon {
  width: 32px; height: 32px;
  font-size: 16px;
}
.quick-actions--inline .quick-action-title { font-size: 13.5px; margin-bottom: 0; }
.quick-actions--inline .quick-action-sub { display: none; }

@media (max-width: 600px) {
  .quick-actions--inline { grid-template-columns: 1fr; }
}

/* ============================================================
   Fan link pages — redesigned index card
   The card body is the click target for editing; the action row at
   the bottom holds Edit + View buttons. The "main page" variant
   gets a subtle accent border to telegraph that it's the default.
   ============================================================ */
.link-page-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.link-page-card:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5);
}
.link-page-card--main {
  border-color: rgba(129, 140, 248, 0.35);
  background: linear-gradient(180deg,
    rgba(129, 140, 248, 0.06),
    transparent 60%
  ), var(--surface);
}
.link-page-card--main:hover {
  border-color: rgba(129, 140, 248, 0.55);
}
.link-page-card__body {
  display: block;
  padding: 20px 22px 16px;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.link-page-card__body:hover { text-decoration: none; }
.link-page-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.link-page-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.link-page-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-page-card__meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.link-page-card__url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute-2);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-page-card__stats {
  font-size: 12.5px;
  color: var(--text-mute);
}
.link-page-card__actions {
  display: flex;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}
.link-page-card__actions .btn { flex: 1; justify-content: center; }
.btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Main-page chip — the most prominent variant, indigo gradient.
   Secondary-page chip — neutral, less attention-grabbing. */
.chip--main {
  background: linear-gradient(135deg, rgba(129,140,248,0.25), rgba(67,56,202,0.20));
  color: #e8eaff;
  border-color: rgba(129,140,248,0.45);
  font-weight: 600;
}
.chip--secondary {
  background: rgba(255,255,255,0.04);
  color: var(--text-mute);
  border-color: rgba(255,255,255,0.08);
}

/* Page-head sub-line (descriptive copy under h1) */
.studio-page-sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mute-2);
  max-width: 720px;
}
.studio-page-sub + .studio-page-sub {
  margin-top: 8px;
}
.studio-page-sub code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--accent-pale);
  font-family: var(--font-mono);
}

/* ============================================================
   Locked field — for the default page's URL display.
   The default fan link page is the artist's identity, so its slug
   is locked. We render it as a styled callout instead of a real
   input so the user understands they can't edit it.
   ============================================================ */
.locked-field {
  display: block;
  padding: 14px 16px;
  background: rgba(129, 140, 248, 0.06);
  border: 1px solid rgba(129, 140, 248, 0.20);
  border-radius: var(--r);
}
.locked-field .field-label {
  display: block;
  margin-bottom: 8px;
}
.locked-field__value {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.locked-field__url {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* card-grid — used by the fan-link-pages index. Each card spans
   full width on mobile, two columns on tablet+, three on wide. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* Landing builder — URL slug field with prefix */
.lp-builder__slug {
  display: flex;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lp-builder__slug:focus-within {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.4),
    0 0 0 4px rgba(129, 140, 248, 0.08);
}
.lp-builder__slug-prefix {
  padding: 12px 0 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute-2);
  white-space: nowrap;
}
.lp-builder__slug-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 12px 14px 12px 2px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
}
.lp-builder__slug-input:focus { outline: none; }
.lp-builder__slug-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-faint);
}

/* ============================================================
   How-it-works · Step 2 mini-UI: release cards
   Three little release rows (cover tile + title + meta) that
   communicate "your music catalog" rather than abstract bars.
   Rows stagger in with a gentle slide-from-right so it reads as
   "things being added" rather than static decoration.
   ============================================================ */
.lp-how__mini--releases {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 10px;
}
.lp-how__release-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  opacity: 0;
  transform: translateX(8px);
  animation: releaseAppear 4.5s ease-out infinite;
}
.lp-how__release-row:nth-child(1) { animation-delay: 0s; }
.lp-how__release-row:nth-child(2) { animation-delay: 0.6s; }
.lp-how__release-row:nth-child(3) { animation-delay: 1.2s; }
@keyframes releaseAppear {
  /* Staggered "drop in then settle" loop. Stays visible for the
     bulk of the cycle so users can read it; fades out only briefly
     before the next iteration. */
  0%   { opacity: 0; transform: translateX(8px); }
  10%  { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; transform: translateX(0); }
  95%  { opacity: 0; transform: translateX(-4px); }
  100% { opacity: 0; transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-how__release-row {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.lp-how__release-cover {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--cover);
  flex-shrink: 0;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.4);
}
.lp-how__release-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lp-how__release-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.lp-how__release-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute-2);
  margin-top: 2px;
  letter-spacing: 0.04em;
}