:root {
  /* ── ZAPSOC DARK "OBSIDIAN KINETIC" TOKENS ── */
  /* All names preserved. Values refined for a premium dark studio look. */
  --bg: #14171C;
  --bg-soft: #0F1216;
  --sidebar: #0F1216;
  --panel: #1B1F26;
  --panel-alt: #232830;
  --surface: var(--panel);
  --surface-2: var(--panel-alt);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #E1E5EC;
  --muted: #8B90A0;
  --soft: #6F7080;
  --accent: #3B82F6;
  --accent-2: #48DDC0;
  --accent-3: #C792EA;
  --warning: #FFC857;
  --danger: #F85149;
  --success: #3FB950;
  --info: #58A6FF;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: var(--font);
  --font-mono: var(--font);

  /* ── STITCH "OBSIDIAN KINETIC" ADDITIVE TOKENS ── */
  /* Parallel namespace. Used by is-stitch modifier classes. */
  --stitch-bg: #0F1218;
  --stitch-bg-soft: #0B0E14;
  --stitch-panel: #161A22;
  --stitch-panel-strong: #1D2128;
  --stitch-border: rgba(255, 255, 255, 0.08);
  --stitch-border-strong: rgba(255, 255, 255, 0.16);
  --stitch-text: #F0F6FC;
  --stitch-muted: #8B949E;
  --stitch-primary: #3B82F6;
  --stitch-primary-strong: #60A5FA;
  --stitch-primary-tint: rgba(59, 130, 246, 0.10);
  --stitch-secondary: #48DDC0;
  --stitch-secondary-tint: rgba(72, 221, 192, 0.10);
  --stitch-tertiary: #C792EA;
  --stitch-success: #3FB950;
  --stitch-warning: #FFC857;
  --stitch-danger: #F85149;
  --stitch-info: #58A6FF;
  --stitch-radius-sm: 4px;
  --stitch-radius-md: 8px;
  --stitch-radius-lg: 12px;
  --stitch-radius-xl: 16px;
  --stitch-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --stitch-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --stitch-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.5);
  --stitch-shadow-glow: 0 0 0 3px color-mix(in srgb, var(--stitch-primary) 22%, transparent);
}

html[data-theme="light"] {
  /* Light theme — same token names, premium light values. */
  --bg: #F5F7FA;
  --bg-soft: #FFFFFF;
  --sidebar: #FFFFFF;
  --panel: #FFFFFF;
  --panel-alt: #F0F3F8;
  --surface: var(--panel);
  --surface-2: var(--panel-alt);
  --border: #E1E4EA;
  --border-strong: #C7CCD6;
  --text: #1A1D23;
  --muted: #6E7480;
  --soft: #8C929F;
  --accent: #2563EB;
  --accent-2: #0D9488;
  --accent-3: #7C3AED;
  --warning: #B45309;
  --danger: #DC2626;
  --success: #16A34A;
  --info: #0284C7;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
}

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

html {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28rem),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent 26rem),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
  padding-bottom: 8rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brand::before {
  content: ">_";
  color: var(--accent);
}

.landing {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
  padding: 1rem 0 4rem;
}

.topbar,
.dashboard-topbar,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.section-head {
  align-items: flex-start;
  padding: .25rem 0;
}

.section-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.section-head h2 {
  margin: .2rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text);
}

.topbar {
  min-height: 4.5rem;
}

.topbar-actions,
.hero-actions,
.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.hero {
  display: grid;
  gap: 1.2rem;
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
}

.hero h1,
.dashboard-topbar h1,
.auth-card h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 6.4rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(0, 255, 170, 0.25);
}

.hero-copy {
  max-width: 58rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.7;
}

.kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: .35rem;
  height: .35rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}

.feature-grid,
.studio-grid,
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card,
.auth-card,
.sidebar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.card {
  padding: 1.15rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.feature-card,
.studio-card,
.media-card {
  display: grid;
  align-content: start;
  gap: .75rem;
  min-width: 0;
}

.feature-card h2,
.studio-card h2,
.media-panel h2,
.pending-card h2 {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -.005em;
  color: var(--text);
}

.feature-card p,
.pending-card p,
.muted {
  color: var(--muted);
  line-height: 1.6;
}

.module-code,
.badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  min-height: 1.7rem;
  padding: .3rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.module-code.is-muted {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.btn {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color: var(--text);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent));
  color: #ffffff;
  border-color: color-mix(in srgb, var(--accent) 70%, #000 0%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 96%, white 12%), color-mix(in srgb, var(--accent) 90%, white 0%));
  border-color: color-mix(in srgb, var(--accent) 90%, white 10%);
  color: #ffffff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow), 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.btn-secondary {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border-strong));
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, var(--surface-2));
}

.btn-tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  min-height: 2.45rem;
  padding: .5rem .8rem;
}

.btn-tertiary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color: transparent;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  min-height: 2.45rem;
}

.btn-ghost:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.btn-danger {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border-strong));
  color: color-mix(in srgb, var(--danger) 90%, white);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
}

.btn-danger:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-2));
  color: #fff;
}

.btn-sm {
  min-height: 2.2rem;
  padding: .5rem .75rem;
  font-size: .8rem;
}

.btn-lg {
  min-height: 3rem;
  padding: .85rem 1.2rem;
  font-size: 1rem;
}

.btn-icon {
  padding: .55rem;
  min-width: 2.45rem;
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1rem;
}

.auth-card {
  width: min(100%, 30rem);
  display: grid;
  gap: 1rem;
  padding: 1.4rem;
}

.auth-card h1 {
  max-width: 100%;
  font-size: clamp(2rem, 8vw, 3rem);
}

.form,
.studio-card form {
  display: grid;
  gap: .85rem;
}

label {
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.form-control {
  width: 100%;
  min-height: 2.65rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 50%, var(--bg));
  color: var(--text);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-control::placeholder {
  color: var(--soft);
}

.form-control:hover {
  border-color: var(--border-strong);
}

.form-control:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg));
  box-shadow: var(--shadow-glow);
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  opacity: .65;
  cursor: not-allowed;
}

textarea.form-control {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.55;
}

.alert {
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  color: var(--text);
  line-height: 1.55;
}

.alert-danger {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  color: color-mix(in srgb, var(--danger) 88%, white);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.alert-success {
  border-color: color-mix(in srgb, var(--success) 50%, var(--border));
  color: color-mix(in srgb, var(--success) 88%, white);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.alert-info {
  border-color: color-mix(in srgb, var(--info) 50%, var(--border));
  color: color-mix(in srgb, var(--info) 88%, white);
  background: color-mix(in srgb, var(--info) 8%, var(--surface));
}

.alert-warning {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  color: color-mix(in srgb, var(--warning) 88%, #000);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

/* ── SIDEBAR LAYOUT ─────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 22rem),
    var(--sidebar);
  overflow-x: hidden;
  overflow-y: visible;
  z-index: 100;
}

/* Desktop: always visible */
@media (min-width: 901px) {
  .sidebar {
    display: flex !important;
    transform: none !important;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1rem 1rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  gap: .5rem;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .95rem;
}

.sidebar-brand::before {
  content: ">_";
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06121f;
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

.sidebar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.sidebar-hamburger:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

.sidebar-hamburger svg {
  width: 1.2rem;
  height: 1.2rem;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .75rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.sidebar-group-items {
  display: flex;
  flex-direction: column;
  gap: .12rem;
}

.sidebar-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .55rem .7rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  text-align: left;
  gap: .4rem;
}

.sidebar-group-toggle:hover {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.sidebar-group-chevron {
  width: .85rem;
  height: .85rem;
  flex-shrink: 0;
  transition: transform .25s ease;
  opacity: .7;
}

.sidebar-group-chevron.is-collapsed,
[aria-expanded="false"] .sidebar-group-chevron {
  transform: rotate(-90deg);
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.6rem;
  padding: .55rem .7rem .55rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, padding-left .15s ease;
}

.sidebar-link:hover {
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
  border-color: var(--border);
  color: var(--text);
  transform: translateX(1px);
}

.sidebar-link.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.sidebar-link.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .85rem;
  width: .35rem;
  height: .35rem;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.sidebar-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: inherit;
  opacity: .65;
  transition: opacity .15s ease, color .15s ease;
}

.sidebar-link:hover .sidebar-link-icon,
.sidebar-link.is-active .sidebar-link-icon {
  opacity: 1;
  color: var(--accent);
}

.sidebar-link-icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-link-label {
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.sidebar-account {
  flex-shrink: 0;
  padding: .65rem .6rem .85rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .12rem;
  background: color-mix(in srgb, var(--surface-2) 30%, transparent);
}

.sidebar-account-label {
  padding: 0 .7rem .35rem;
  color: var(--soft);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Mobile/Tablet: sidebar as drawer */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 17rem;
    transform: translateX(-110%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    border-right: 1px solid var(--border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-hamburger {
    display: inline-flex;
  }

  .sidebar-header {
    padding-right: .75rem;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
  }
}

.dashboard-main {
  width: min(100%, 1800px);
  display: grid;
  gap: 1.25rem;
  padding: 1.4rem 1.4rem 7rem;
}

.wide-studio-page {
  max-width: 1800px;
}

.studio-page {
  width: 100%;
  max-width: 1800px;
}

.dashboard-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem .1rem .6rem;
  position: relative;
}

.dashboard-topbar > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-topbar h1 {
  max-width: 100%;
  margin: .15rem 0 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--text);
}

.page-subtitle {
  max-width: 62rem;
  margin: .45rem 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .95rem;
}

.user-chip,
.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

.user-chip {
  padding: .35rem .55rem .35rem .35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  box-shadow: var(--shadow-sm);
}

.pending-card {
  max-width: 48rem;
}

.media-panel {
  display: grid;
  gap: 1rem;
}

.media-preview {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 78%, var(--bg));
}

.media-preview img,
.media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview audio {
  width: 100%;
}

.api-output {
  max-height: 18rem;
  margin: 0;
  overflow: auto;
  padding: .8rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--bg));
  color: var(--muted);
  white-space: pre-wrap;
}

.theme-toggle {
  min-width: 4.6rem;
}

.check-row {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.card-row,
.inline-actions,
.preset-button-row,
.counter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}

.card-row,
.counter-row {
  justify-content: space-between;
}

.overview-grid .feature-card {
  min-height: 14rem;
}

.studio-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, .52fr);
  gap: 1rem;
  align-items: start;
}

.music-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, .55fr);
  gap: 1rem;
  align-items: start;
}

.studio-actionbar {
  position: sticky;
  top: .75rem;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(12px);
}

.studio-actionbar a,
.studio-actionbar button {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: var(--text);
  font-size: .82rem;
}

.music-hub-grid,
.preset-card-grid,
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.music-hub-card {
  min-height: 13rem;
}

.music-hub-card.is-planned {
  opacity: .72;
}

.music-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(18rem, .38fr) minmax(0, 1fr);
  gap: 1rem;
}

.workflow-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding-left: 1.4rem;
  color: var(--muted);
}

.workflow-list a,
.workflow-list span {
  color: var(--text);
}

.music-generator-layout,
.cover-layout,
.lyrics-image-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.tts-studio-page {
  max-width: 1800px;
}

.tts-grid {
  display: grid;
  grid-template-columns: minmax(22rem, .8fr) minmax(30rem, 1.2fr);
  gap: 1rem;
  align-items: start;
}

.tts-settings-panel,
.tts-editor-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.form-grid label {
  display: grid;
  gap: .35rem;
}

.tts-counter {
  padding: .3rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  font-size: .8rem;
}

.tts-result-panel {
  min-height: 20rem;
}

.tts-audio-card {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg));
}

.tts-audio-card audio {
  width: 100%;
}

.tts-status-terminal {
  margin-top: 1rem;
}

.video-maker-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.generator-left {
  grid-column: span 5;
  display: grid;
  gap: 1rem;
}

.generator-right {
  grid-column: span 7;
  display: grid;
  gap: 1rem;
}

.lyrics-layout {
  display: grid;
  grid-template-columns: minmax(19rem, .9fr) minmax(24rem, 1.1fr) minmax(25rem, 1.2fr);
  gap: 1rem;
  align-items: start;
}

.lyrics-output-panel {
  min-height: 100%;
}

.prompt-editor-large {
  min-height: 16rem;
}

.prompt-editor-tall {
  min-height: 30rem;
}

.compact-result-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.preset-card {
  display: grid;
  gap: .75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}

.preset-card h3,
.preset-card p,
.media-card h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.music-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.music-history-grid.is-list {
  grid-template-columns: 1fr;
}

.cover-result-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.cover-result-grid .media-preview {
  aspect-ratio: 1 / 1;
}

.metadata-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.capability-banner.is-warning {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.video-cover-preview,
.video-preview-frame {
  min-height: 16rem;
}

.video-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--bg));
}

.video-preview-frame img {
  width: 100%;
  max-height: 32rem;
  object-fit: cover;
}

.video-preview-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
}

/* Video Maker — selected image thumbnails */
.video-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.inline-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
}

.video-image-thumb {
  position: relative;
  width: 80px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.video-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-image-thumb .video-image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.video-image-thumb .video-image-index {
  position: absolute;
  top: 3px;
  left: 3px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 82%, #000);
  color: #fff;
  font: 700 .68rem/1 var(--font-mono);
}

.video-image-thumb .video-image-label {
  display: none;
}

.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;
}

.mono {
  font-family: var(--font-mono, var(--font));
  font-variant-numeric: tabular-nums;
}

.video-maker-layout.video-maker-pro {
  grid-template-columns: 1fr;
  gap: .9rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.video-maker-column {
  min-width: 0;
  display: grid;
  gap: .9rem;
  align-content: start;
}

.video-maker-tabs {
  display: flex;
  gap: .45rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg));
}

.video-maker-tabs button {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: .55rem .8rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.video-maker-tabs button.is-active,
.video-maker-tabs button:hover,
.video-maker-tabs button:focus-visible {
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--text);
  outline: none;
}

.video-tab-panel {
  min-width: 0;
  max-width: 100%;
}

.video-maker-tab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  align-items: start;
  min-width: 0;
}

.video-maker-tab-grid-media {
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
}

.video-maker-tab-grid-preview {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.video-tab-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .9rem;
}

.video-picker-panel {
  min-width: 0;
}

.picker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, auto);
  gap: .6rem;
  margin-bottom: .65rem;
}

.media-picker-grid,
.audio-picker-list {
  display: grid;
  gap: .5rem;
  margin-top: .65rem;
  max-height: 25rem;
  overflow: auto;
  padding-right: .15rem;
}

.media-picker-grid {
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.media-picker-card,
.audio-picker-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.media-picker-card:hover,
.audio-picker-card:hover,
.media-picker-card:focus-visible,
.audio-picker-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent-2) 58%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 9%, var(--surface-2));
  outline: none;
}

.media-picker-card.is-selected,
.audio-picker-card.is-selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 65%, transparent) inset;
  background: color-mix(in srgb, var(--accent-2) 12%, var(--surface-2));
}

.media-picker-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 8.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel-alt);
}

.media-picker-thumb img,
.video-selected-preview img,
.video-preview-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-picker-check,
.audio-selected-check {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 88%, #000);
  color: #fff;
  font-size: .78rem;
  opacity: 0;
}

.is-selected .media-picker-check,
.is-selected .audio-selected-check {
  opacity: 1;
}

.media-picker-title,
.audio-picker-title {
  display: block;
  min-width: 0;
  margin-top: .5rem;
  color: var(--text);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.media-picker-meta,
.audio-picker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .74rem;
}

.media-picker-empty {
  grid-column: 1 / -1;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 48%, transparent);
}

.video-selected-preview {
  min-height: 6.75rem;
  max-height: 10rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
}

.video-selected-preview.has-image {
  aspect-ratio: 16 / 8;
}

.audio-picker-list {
  max-height: 25rem;
}

.audio-picker-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
}

.audio-play-btn {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-2);
  cursor: pointer;
}

.audio-play-btn:hover,
.audio-play-btn:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

.audio-picker-main {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.audio-picker-main:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.audio-picker-progress {
  grid-column: 2 / 4;
  height: .28rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 68%, transparent);
}

.video-selection-summary {
  margin-top: .9rem;
}

.audio-picker-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-2);
}

.video-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 20rem;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--bg));
}

.video-preview-stage.ratio-16-9 { aspect-ratio: 16 / 9; }
.video-preview-stage.ratio-9-16 { aspect-ratio: 9 / 16; max-height: 38rem; margin-inline: auto; }
.video-preview-stage.ratio-1-1 { aspect-ratio: 1 / 1; max-height: 35rem; margin-inline: auto; }

.video-preview-overlay {
  position: absolute;
  left: 7%;
  right: 7%;
  display: grid;
  gap: .25rem;
  padding: .75rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.video-preview-overlay.pos-top { top: 6%; }
.video-preview-overlay.pos-center { top: 50%; transform: translateY(-50%); }
.video-preview-overlay.pos-bottom { bottom: 6%; }

.video-preview-title {
  color: #fff;
  font-weight: 850;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.video-preview-subtitle {
  color: rgba(255,255,255,.88);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.video-preview-overlay.size-small .video-preview-title { font-size: 1.35rem; }
.video-preview-overlay.size-medium .video-preview-title { font-size: clamp(1.45rem, 4vw, 2.6rem); }
.video-preview-overlay.size-large .video-preview-title { font-size: clamp(1.8rem, 5.4vw, 3.4rem); }
.video-preview-overlay.size-small .video-preview-subtitle { font-size: .9rem; }
.video-preview-overlay.size-medium .video-preview-subtitle { font-size: 1.05rem; }
.video-preview-overlay.size-large .video-preview-subtitle { font-size: 1.25rem; }

.video-plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .75rem;
}

.video-plan-summary span {
  min-width: 0;
  max-width: 100%;
  padding: .32rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-alt);
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.waveform-editor-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  touch-action: none;
}

.video-waveform-canvas {
  width: 100%;
  height: 10rem;
  display: block;
  cursor: crosshair;
}

.waveform-region {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-left: 2px solid var(--accent-2);
  border-right: 2px solid var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 16%, transparent);
  pointer-events: none;
}

.audio-transport,
.audio-editor-actions,
.toggle-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.audio-transport {
  margin: .7rem 0;
}

.toggle-row {
  margin-top: .7rem;
  color: var(--muted);
}

.audio-editor-actions {
  margin-top: .85rem;
}

.video-segment-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin-bottom: .8rem;
}

.video-segment-control button {
  min-height: 2.35rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--text);
  cursor: pointer;
}

.video-segment-control button.is-active,
.video-segment-control button:hover,
.video-segment-control button:focus-visible {
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, var(--panel-alt));
  outline: none;
}

.three-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-status-terminal,
.video-payload-details,
.video-payload-details pre,
.video-render-panel {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

.video-status-terminal {
  max-height: 15rem;
  overflow: auto;
}

.video-payload-details {
  margin-top: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
}

.video-payload-details summary {
  padding: .7rem .8rem;
  color: var(--accent-2);
  cursor: pointer;
}

.video-payload-details pre {
  margin: 0;
  padding: .8rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  white-space: pre-wrap;
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.45;
}

.video-render-progress {
  display: grid;
  gap: .5rem;
  margin-top: .8rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
}

.video-render-progress.is-error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.video-render-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--muted);
  font-size: .85rem;
}

.video-render-progress-track {
  height: .55rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

.video-render-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s ease;
}

.video-render-progress.is-error .video-render-progress-track span {
  background: var(--danger);
}

.video-download-area {
  display: grid;
  gap: .55rem;
  margin-top: .8rem;
  min-width: 0;
}

.music-metadata-card {
  min-width: 0;
}

.metadata-summary {
  margin-top: .7rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.music-metadata-panel {
  width: min(100vw - 1rem, 1120px);
}

.metadata-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .75fr);
  gap: 1rem;
  min-width: 0;
}

.metadata-modal-fields,
.metadata-cover-picker {
  min-width: 0;
}

.metadata-cover-preview {
  min-height: 8rem;
  display: grid;
  place-items: center;
  gap: .5rem;
  overflow: hidden;
  margin-bottom: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--muted);
}

.metadata-cover-preview.has-image {
  aspect-ratio: 1 / 1;
}

.metadata-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metadata-cover-preview span {
  padding: .45rem .6rem;
  overflow-wrap: anywhere;
}

.metadata-cover-grid {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  max-height: 20rem;
}

.metadata-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

@media (max-width: 1320px) {
  .video-maker-tab-grid,
  .video-maker-tab-grid-media,
  .video-maker-tab-grid-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .video-maker-layout.video-maker-pro {
    grid-template-columns: 1fr;
  }

  .picker-toolbar,
  .inline-upload-row,
  .three-fields {
    grid-template-columns: 1fr;
  }

  .media-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
  }

  .media-picker-thumb,
  .video-selected-preview {
    max-height: 8.75rem;
  }

  .video-segment-control {
    grid-template-columns: 1fr;
  }

  .metadata-modal-grid {
    grid-template-columns: 1fr;
  }
}

.media-library-page {
  max-width: 1800px;
}

.media-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-card {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.stat-card span {
  color: var(--muted);
  font-size: .82rem;
}

.stat-card strong {
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.media-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) repeat(4, minmax(9rem, 1fr)) auto;
  align-items: end;
  gap: .75rem;
  margin-bottom: 1rem;
}

.media-upload-center {
  display: grid;
  gap: .9rem;
  margin-bottom: 1rem;
}

.media-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.media-upload-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: .75rem;
}

.compact-status {
  min-height: 2.4rem;
  padding: .55rem .7rem;
}

.segmented-control {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  justify-content: flex-end;
}

.segmented-control .is-active {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.deluxe-media-grid {
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
}

.deluxe-media-grid.is-list {
  grid-template-columns: 1fr;
}

.deluxe-media-grid.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .7rem;
}

.media-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1rem 0;
  color: var(--muted);
  font-size: .9rem;
}

.media-page-status {
  margin: 0 0 1rem;
}

.deluxe-media-card {
  position: relative;
  overflow: hidden;
}

.deluxe-media-card.is-list {
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  align-items: start;
}

.deluxe-media-card.is-compact {
  gap: .55rem;
  padding: .75rem;
}

.deluxe-media-card.is-compact .media-card-preview {
  aspect-ratio: 16 / 10;
}

.deluxe-media-card.is-compact .media-play-surface {
  min-height: 7.4rem;
  padding: .55rem;
  gap: .45rem;
}

.deluxe-media-card.is-compact .media-wave-strip {
  min-height: 3.4rem;
}

.deluxe-media-card.is-compact .media-play-overlay {
  min-width: 4.7rem;
  min-height: 2rem;
  font-size: .72rem;
}

.deluxe-media-card.is-compact .media-card-seek {
  height: .42rem;
}

.deluxe-media-card.is-compact .media-card-body {
  gap: .45rem;
}

.deluxe-media-card.is-compact .card-row {
  gap: .3rem;
}

.deluxe-media-card.is-compact h3 {
  font-size: .95rem;
  line-height: 1.25;
}

.deluxe-media-card.is-compact .source-badge,
.deluxe-media-card.is-compact .media-badge,
.deluxe-media-card.is-compact .language-badge,
.deluxe-media-card.is-compact .module-code {
  min-height: 1.3rem;
  padding: .14rem .38rem;
  font-size: .68rem;
}

.deluxe-media-card.is-list .media-card-preview {
  aspect-ratio: 16 / 9;
}

.deluxe-media-card.is-list .media-play-surface {
  min-height: 10.2rem;
}

.media-card-body {
  display: grid;
  gap: .65rem;
  min-width: 0;
}

.media-card-meta {
  display: grid;
  gap: .15rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.media-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deluxe-media-card h3 {
  overflow-wrap: anywhere;
}

.media-card-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg));
}

.media-card-preview img,
.media-card-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card-preview audio {
  width: min(100% - 1rem, 22rem);
}

.media-play-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 10rem;
  display: grid;
  align-content: end;
  gap: .75rem;
  padding: .8rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface-2) 76%, var(--bg));
}

.media-play-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 32%);
  opacity: .85;
}

.audio-surface.has-cover {
  background: color-mix(in srgb, var(--surface-2) 74%, var(--bg));
}

.audio-surface.has-cover::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .68)),
    linear-gradient(90deg, rgba(0, 0, 0, .56), transparent 64%);
  opacity: 1;
}

.media-cover-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.02);
}

.video-surface {
  padding: .7rem;
}

.video-surface video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(.96);
}

.video-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(0, 0, 0, .52));
  pointer-events: none;
}

.media-play-overlay {
  position: relative;
  z-index: 2;
  width: max-content;
  min-width: 5.8rem;
  min-height: 2.45rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-2) 72%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 20%, var(--surface));
  color: var(--text);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  cursor: pointer;
  box-shadow: 0 .65rem 1.6rem rgba(0, 0, 0, .22);
}

.media-play-overlay:hover {
  background: color-mix(in srgb, var(--accent-2) 30%, var(--surface));
}

.audio-play-overlay {
  justify-self: start;
}

.media-wave-strip {
  position: relative;
  z-index: 2;
  min-height: 5.2rem;
  display: flex;
  align-items: end;
  gap: .18rem;
}

.media-wave-strip span {
  flex: 1;
  min-width: 2px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent) 70%, var(--accent-2)));
  opacity: .82;
}

.media-card-seek {
  position: relative;
  z-index: 2;
  height: .55rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-2) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
}

.media-card-seek span {
  display: block;
  height: 100%;
  min-width: .55rem;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.media-card-time {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.audio-surface.has-cover .media-wave-strip {
  min-height: 3.2rem;
  opacity: .62;
}

.audio-surface.has-cover .media-wave-strip span {
  background: rgba(255, 255, 255, .72);
}

.audio-surface.has-cover .media-card-time {
  color: rgba(255, 255, 255, .78);
}

.audio-surface.has-cover .media-card-seek {
  background: rgba(0, 0, 0, .28);
  border-color: rgba(255, 255, 255, .24);
}

.audio-surface.has-cover .media-card-seek span {
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--accent-2) 68%, white));
}

.media-play-cta {
  min-width: 5.2rem;
  letter-spacing: .08em;
}

.deluxe-media-card.is-playing-preview .media-play-overlay {
  border-color: color-mix(in srgb, var(--warning) 70%, var(--border));
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
}

.source-badge,
.media-badge,
.language-badge,
.tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  width: max-content;
  max-width: 100%;
  padding: .22rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: .76rem;
  overflow-wrap: anywhere;
}

.language-badge {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
}

.language-unknown {
  color: var(--muted);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.media-badge.is-favorite {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-2));
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.media-favorite {
  margin-left: auto;
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  cursor: pointer;
}

.media-favorite.is-active {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
}

.media-card-actions,
.media-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.media-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end;
}

.media-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .58);
}

.media-detail-panel {
  position: relative;
  z-index: 1;
  width: min(100vw - 1rem, 1180px);
  max-height: calc(100vh - 1rem);
  margin: .5rem;
  overflow: auto;
}

.media-detail-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 28rem) minmax(0, 1fr);
  gap: 1rem;
}

.media-detail-preview {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg));
}

.media-detail-preview img,
.media-detail-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-detail-preview audio {
  width: calc(100% - 1rem);
}

.metadata-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.metadata-grid div {
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 66%, transparent);
}

.metadata-grid span,
.metadata-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.metadata-grid span {
  margin-bottom: .25rem;
  color: var(--muted);
  font-size: .76rem;
}

.metadata-grid strong {
  color: var(--text);
  font-weight: 600;
}

.media-detail-editor {
  display: grid;
  gap: .8rem;
}

.cover-art-box {
  display: grid;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.cover-art-box h3 {
  margin: 0;
  font-size: 1rem;
}

.cover-art-picker {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}

.cover-art-preview {
  min-height: 7rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 0 1px, transparent 1px 9px),
    color-mix(in srgb, var(--surface) 82%, var(--bg));
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
}

.cover-art-preview.has-cover {
  position: relative;
  place-items: end start;
  border-style: solid;
  color: white;
}

.cover-art-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-art-preview span {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: .45rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .68));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cover-art-controls {
  display: grid;
  gap: .65rem;
}

.admin-page {
  max-width: 1800px;
}

.admin-toolbar,
.admin-form-card,
.admin-danger-zone {
  margin-bottom: 1rem;
}

.admin-filter-form,
.admin-user-form {
  display: grid;
  gap: 1rem;
}

.admin-filter-form {
  grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 14rem) auto;
  align-items: end;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-table td {
  color: var(--text);
  font-size: .9rem;
}

.admin-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.admin-action-buttons form {
  margin: 0;
}

.review-stack {
  display: grid;
  gap: 1rem;
}

.review-ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.review-card {
  display: grid;
  gap: 1rem;
}

.review-header,
.review-badges {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.review-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compact-check {
  min-height: 1.8rem;
  padding: .25rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: .78rem;
}

.review-grid {
  display: grid;
  grid-template-columns: minmax(15rem, .85fr) minmax(22rem, 1.25fr) minmax(24rem, 1.35fr);
  gap: 1rem;
  align-items: start;
}

.review-preview-panel,
.review-diff-panel,
.review-edit-panel {
  min-width: 0;
  display: grid;
  gap: .85rem;
}

.review-preview {
  min-height: 12rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--bg));
}

.review-preview img,
.review-preview video {
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
}

.review-preview audio {
  width: min(100% - 1rem, 32rem);
}

.review-preview-empty {
  color: var(--muted);
  font-size: .9rem;
}

.review-file-card {
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 66%, transparent);
}

.review-file-card span,
.review-file-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.review-file-card span {
  margin-bottom: .25rem;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.review-file-card strong {
  color: var(--text);
  font-size: .92rem;
}

.review-cover-ops {
  display: grid;
  gap: .7rem;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.cover-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .55rem;
}

.cover-result-card {
  display: grid;
  gap: .45rem;
  min-width: 0;
}

.cover-result-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg));
}

.review-diff-table {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.review-diff-row {
  display: grid;
  grid-template-columns: minmax(8rem, .65fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.review-diff-row > span {
  min-width: 0;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
  color: var(--text);
}

.review-diff-row > span + span {
  border-left: 1px solid var(--border);
}

.review-diff-row:last-child > span {
  border-bottom: 0;
}

.review-diff-head > span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--bg));
}

.review-diff-row.is-changed > span:last-child {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--text);
}

.review-reason {
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.review-reason span {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.review-reason p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.confidence-high {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  color: var(--success);
}

.confidence-medium {
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
}

.confidence-low {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  color: var(--warning);
}

.settings-page,
.profile-page {
  max-width: 1600px;
}

.settings-section,
.profile-card,
.profile-header {
  margin-bottom: 1rem;
}

.account-form {
  display: grid;
  gap: 1rem;
}

.profile-header {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.profile-avatar {
  width: 6rem;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 76%, var(--bg));
  color: var(--accent);
  font-size: 2.2rem;
  font-weight: 700;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.profile-media-card {
  display: grid;
  gap: .75rem;
}

.audio-player-card,
.audio-player-detail {
  display: grid;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg));
}

.audio-player-card audio,
.audio-player-detail audio {
  width: 100%;
}

.audio-controls {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  padding: .65rem;
  border-top: 1px solid var(--border);
}

.audio-speed-control {
  min-width: 6rem;
}

.zapsoc-audio-player {
  display: grid;
  gap: .75rem;
  width: 100%;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 78%, var(--bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
}

.zapsoc-audio-player.compact {
  padding: .75rem;
}

.zapsoc-audio-player.detail {
  padding: 1rem;
  border-color: var(--border-strong);
}

.zapsoc-audio-player audio {
  display: none;
}

.audio-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
}

.audio-title,
.audio-artist {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-title {
  color: var(--text);
  font-size: .95rem;
}

.audio-artist {
  color: var(--muted);
  font-size: .78rem;
}

.audio-controls-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
}

.audio-play {
  min-width: 3.4rem;
  height: 2.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
  cursor: pointer;
  font-size: .75rem;
}

.audio-progress {
  width: 100%;
  accent-color: var(--accent-2);
}

.audio-time {
  min-width: 5.7rem;
  color: var(--muted);
  font-size: .76rem;
  text-align: right;
}

.audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}

.audio-volume,
.audio-speed {
  display: inline-grid;
  gap: .25rem;
  color: var(--muted);
  font-size: .78rem;
}

.audio-volume input {
  width: 8rem;
  accent-color: var(--accent);
}

.audio-player-retro {
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 0 1px, transparent 1px 5px),
    var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

/* === GLOBAL AUDIO PLAYER === */
:root {
  --gap-seek-size: .95rem;
  --gap-progress: 0%;
}

.global-audio-player {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: calc(17rem + 1rem);
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(12rem, .8fr) minmax(22rem, 2.4fr) auto;
  grid-template-rows: auto;
  grid-template-areas:
    "header track controls extra";
  gap: .7rem;
  align-items: center;
  padding: .55rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: .85rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--bg)), var(--surface));
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
  transition: transform .25s ease, opacity .25s ease, border-radius .3s ease;
  overflow: hidden;
}

/* Header row */
.gap-actions-left {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
}

.zapamp-label {
  padding: .05rem .5rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--accent-2);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Track section (left column) */
.gap-track {
  grid-area: track;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.gap-cover {
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid var(--border-strong);
  border-radius: .5rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 16%, var(--surface-2)), var(--surface-2));
  color: var(--accent-2);
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.gap-cover.has-cover {
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .2);
}

.gap-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.gap-title,
.gap-artist {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gap-title {
  color: var(--text);
  font-weight: 800;
  font-size: .9rem;
}

.gap-artist {
  color: var(--muted);
  font-size: .76rem;
}

/* Controls section (center column) */
.gap-controls {
  grid-area: controls;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.gap-controls-row {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.gap-controls button,
.gap-extra button {
  min-height: 2rem;
  min-width: 2rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  padding: 0 .55rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}

.gap-controls button:hover,
.gap-extra button:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
}

.gap-controls button.is-active,
.gap-extra button.is-active {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}

.gap-play-btn {
  min-width: 2.45rem !important;
  min-height: 2.45rem !important;
  font-size: 1.1rem !important;
  border-radius: 50% !important;
  border-color: var(--accent-2) !important;
  background: color-mix(in srgb, var(--accent-2) 18%, transparent) !important;
}

.gap-play-btn:hover {
  background: color-mix(in srgb, var(--accent-2) 28%, transparent) !important;
  transform: scale(1.06);
}

/* Timeline row */
.gap-timeline {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: min(100%, 18rem);
  margin-left: 0;
}

.gap-current,
.gap-duration {
  color: var(--muted);
  font-size: .72rem;
  min-width: 2.8rem;
  font-variant-numeric: tabular-nums;
}

.gap-current { text-align: right; }
.gap-duration { text-align: left; }

.gap-seek {
  flex: 1;
  min-width: clamp(15rem, 34vw, 42rem);
  height: var(--gap-seek-size);
  accent-color: var(--accent-2);
  cursor: pointer;
  background: linear-gradient(to right,
    var(--accent-2) var(--gap-progress, 0%),
    color-mix(in srgb, var(--border-strong) 50%, transparent) var(--gap-progress, 0%)
  );
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
}

.gap-seek::-webkit-slider-runnable-track {
  height: .3rem;
  border-radius: 999px;
}

.gap-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--gap-seek-size);
  height: var(--gap-seek-size);
  border-radius: 50%;
  background: var(--accent-2);
  margin-top: calc((var(--gap-seek-size) - .3rem) / -2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .1s ease;
}

.gap-seek:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* Footer row — extras */
.gap-extra {
  grid-area: extra;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
  min-width: 0;
}

.gap-volume-wrap {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--muted);
  font-size: .72rem;
}

.gap-volume {
  width: 4.4rem;
  accent-color: var(--accent-2);
}

.gap-speed {
  width: 3.8rem;
  min-height: 2rem;
  padding-block: .2rem;
  font-size: .75rem;
}

/* Action buttons */
.gap-minimize-btn,
.gap-hide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  min-height: 1.8rem;
  border: 1px solid var(--border);
  border-radius: .45rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .8rem;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease;
}

.gap-minimize-btn:hover,
.gap-hide-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.gap-minimize-btn svg,
.gap-hide-btn svg {
  width: .9rem;
  height: .9rem;
}

.gap-minimize-btn.is-active {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* === State variants === */

/* Empty */
.global-audio-player[data-state="empty"] {
  opacity: .85;
}

/* Compact state */
.global-audio-player.is-compact {
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "track controls controls"
    "footer footer footer";
  padding: .5rem .75rem;
  border-radius: .9rem;
}

.global-audio-player.is-compact .gap-timeline,
.global-audio-player.is-compact .gap-extra,
.global-audio-player.is-compact .gap-cover {
  display: none;
}

.global-audio-player.is-compact .gap-track {
  padding-right: .3rem;
}

.global-audio-player.is-compact .gap-title { font-size: .82rem; }
.global-audio-player.is-compact .gap-artist { display: none; }

.global-audio-player.is-compact .gap-controls-row {
  gap: .2rem;
}

.global-audio-player.is-compact .gap-controls button {
  min-height: 1.8rem;
  min-width: 1.8rem;
  font-size: .72rem;
  padding: 0 .35rem;
}

.global-audio-player.is-compact .gap-play-btn {
  min-width: 2.2rem !important;
  min-height: 2.2rem !important;
}

/* Hidden state */
.global-audio-player.is-hidden {
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
}

/* Floating restore FAB */
.gap-fab {
  appearance: none;
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 79;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .65rem .8rem;
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg)));
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  color: var(--accent-2);
  font-family: var(--font);
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}

.gap-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
}

.gap-fab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.gap-fab.is-hidden {
  display: none;
}

.gap-fab-label {
  display: block;
  font-size: .58rem;
  color: var(--muted);
  font-family: var(--font);
  white-space: nowrap;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Queue panel */
.gap-queue-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + .6rem);
  width: min(26rem, calc(100vw - 2rem));
  margin: 0 auto;
  max-height: 24rem;
  overflow-y: auto;
  padding: .9rem;
  border: 1px solid var(--border-strong);
  border-radius: .85rem;
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

.gap-queue-panel:not([hidden]) {
  display: block;
}

.gap-queue-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem;
  padding: .6rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: .4rem;
  transition: background .1s ease;
}

.gap-queue-item:hover {
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
}

.gap-queue-item span {
  color: var(--muted);
  font-size: .74rem;
}

.gap-queue-item.is-active {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

/* Status bar */
.gap-status {
  position: absolute;
  bottom: .3rem;
  right: .8rem;
  color: var(--muted);
  font-size: .68rem;
}

/* Retro skin */
.global-audio-player.retro {
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 0 1px, transparent 1px 5px),
    var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.global-audio-player.retro .gap-cover {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-2) 10%, transparent) 0 1px, transparent 1px 8px),
    color-mix(in srgb, var(--accent-2) 16%, var(--surface-2));
}

.share-toggle {
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
}

.history-card p {
  max-height: 5.5rem;
  overflow: hidden;
}

[disabled] {
  cursor: not-allowed;
  opacity: .55;
}

.studio-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.wide-panel,
.prompt-panel {
  grid-column: 1 / -1;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.settings-grid.two-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.span-2 {
  grid-column: span 2;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem .85rem;
  padding-top: .35rem;
}

.prompt-textarea {
  min-height: 13rem;
  line-height: 1.65;
}

.prompt-textarea.compact {
  min-height: 8rem;
}

.editor-textarea {
  min-height: 11rem;
  line-height: 1.6;
}

.editor-textarea.compact {
  min-height: 7rem;
}

.status-terminal {
  min-height: 2.8rem;
  max-width: 100%;
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 84%, var(--bg));
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
}

.avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 78%, var(--bg));
  color: var(--accent-2);
  font-weight: 800;
}

.avatar img,
.profile-avatar img,
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: .82rem;
  flex: 0 0 auto;
}

.avatar-upload {
  gap: 1rem;
}

.avatar-preview {
  width: 5.5rem;
  height: 5.5rem;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.collection-card {
  display: grid;
  gap: .75rem;
  align-content: start;
}

.collection-cover {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent));
  color: var(--accent-2);
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 800;
}

.collection-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-items,
.rename-file-box,
.waveform-panel {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-alt) 70%, transparent);
}

.collection-role-badge {
  width: fit-content;
  padding: .25rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.voice-lab-page .voice-lab-grid {
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  align-items: start;
}

.voice-consent-card {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.voice-consent-checks {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
}

.voice-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.voice-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
}

.voice-card.is-muted {
  opacity: 0.65;
}

.voice-id {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--accent-2);
  font-size: 0.78rem;
}

.voice-status {
  text-transform: uppercase;
}

.voice-demo-player,
.voice-card audio {
  width: 100%;
}

.permission-notice {
  max-width: 760px;
}

.waveform-panel {
  margin-top: 1rem;
}

.waveform-canvas {
  width: 100%;
  height: 8rem;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--panel-alt);
}

.waveform-unavailable,
.waveform-loading,
.danger-hint {
  font-size: .85rem;
}

.audio-card audio {
  width: 100%;
}

.text-warning {
  color: #ffd166;
}

.text-danger {
  color: var(--danger);
}

.reference-panel.is-muted {
  opacity: .68;
}

.reference-preview {
  min-height: 12rem;
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: .75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  overflow: hidden;
}

.reference-preview img {
  max-width: 100%;
  max-height: 18rem;
  border-radius: var(--radius);
  object-fit: contain;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.result-card .media-preview {
  aspect-ratio: 1 / 1;
}

[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .feature-grid,
  .studio-grid,
  .media-grid,
  .result-grid,
  .checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-workbench {
    grid-template-columns: 1fr;
  }

  .music-workbench {
    grid-template-columns: 1fr;
  }

  .music-dashboard-grid,
  .music-generator-layout,
  .cover-layout,
  .tts-grid,
  .lyrics-image-layout,
  .video-maker-layout,
  .voice-lab-page .voice-lab-grid,
  .review-grid,
  .media-toolbar,
  .media-upload-grid,
  .media-upload-actions,
  .inline-upload-row,
  .media-detail-layout,
  .admin-filter-form,
  .lyrics-layout {
    grid-template-columns: 1fr;
  }

  .media-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generator-left,
  .generator-right {
    grid-column: auto;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
  }

  .global-audio-player {
    left: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "track"
      "controls"
      "extra";
    align-items: stretch;
  }

  .gap-actions-left {
    justify-content: space-between;
  }

  .gap-controls {
    flex-wrap: wrap;
  }

  .gap-timeline,
  .gap-seek {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .landing,
  .dashboard-main {
    width: min(100% - 1rem, 1320px);
    padding-inline: 0;
  }

  .topbar,
  .dashboard-topbar,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-header,
  .review-badges,
  .review-ops-toolbar {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .review-diff-head {
    display: none;
  }

  .review-diff-row {
    grid-template-columns: 1fr;
  }

  .review-diff-row > span + span {
    border-left: 0;
  }

  .review-diff-row > span:first-child {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: color-mix(in srgb, var(--surface-2) 88%, var(--bg));
  }

  .feature-grid,
  .studio-grid,
  .media-grid,
  .result-grid,
  .music-workbench,
  .media-stats,
  .metadata-grid,
  .profile-header,
  .profile-media-grid,
  .music-hub-grid,
  .preset-card-grid,
  .howto-grid,
  .music-history-grid,
  .settings-grid,
  .settings-grid.two-fields,
  .form-grid,
  .checkbox-grid,
  .sidebar nav {
    grid-template-columns: 1fr;
  }

  .span-2,
  .wide-panel,
  .prompt-panel {
    grid-column: auto;
  }

  .deluxe-media-card.is-list {
    grid-template-columns: 1fr;
  }

  .audio-meta,
  .audio-controls-main {
    grid-template-columns: 1fr;
  }

  .audio-time {
    text-align: left;
  }

  .audio-actions {
    align-items: stretch;
  }

  .audio-actions .btn,
  .audio-volume,
  .audio-speed,
  .audio-volume input {
    width: 100%;
  }

  .global-audio-player {
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
    gap: .55rem;
  }

  .cover-art-picker {
    grid-template-columns: 1fr;
  }

  .gap-fab {
    right: .75rem;
    bottom: .75rem;
  }

  .gap-track,
  .gap-timeline,
  .gap-controls,
  .gap-extra {
    width: 100%;
  }

  .gap-controls button,
  .gap-extra button,
  .gap-speed {
    flex: 1 1 auto;
  }

  .gap-hide-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
  }

  .media-detail-panel {
    width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 12vw, 3.4rem);
  }

  .topbar-actions,
  .hero-actions,
  .media-actions,
  .user-chip,
  .filters {
    width: 100%;
  }

  .btn,
  .topbar-actions a,
  .studio-actionbar a,
  .studio-actionbar button,
  .hero-actions a {
    width: 100%;
  }
}

/* ── ENHANCED HOVER / TRANSITIONS ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  }

  .btn:hover {
    filter: brightness(1.12);
  }

  .btn:active {
    transform: scale(.97);
    filter: brightness(.92);
  }

  .btn:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .card {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }

  .card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
    transform: translateY(-2px);
  }

  .studio-card,
  .media-card,
  .deluxe-media-card {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }

  .studio-card:hover,
  .media-card:hover,
  .deluxe-media-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    transform: translateY(-1px);
  }

  .form-control {
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    outline: none;
  }

  .admin-table tr {
    transition: background .1s ease;
  }

  .admin-table tr:hover td {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }

  .sidebar-group-toggle {
    transition: color .15s ease, background .15s ease;
  }

  .sidebar-link {
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  }

  .sidebar-link-icon {
    transition: opacity .15s ease, color .15s ease;
  }

  .segmented-control a,
  .segmented-control button {
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }

  .media-favorite {
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
  }

  .media-favorite:hover {
    transform: scale(1.15);
  }
}

.palette-shortcut-label {
  font-size: .7rem;
  font-weight: 600;
}

.command-palette-trigger {
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* === COMMAND PALETTE === */
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.command-palette-dialog {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100vw - 2rem));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: .85rem;
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.command-palette-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.command-search-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.command-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: .95rem;
  font-family: var(--font);
  outline: none;
  min-width: 0;
}

.command-input::placeholder {
  color: var(--muted);
}

.command-shortcut {
  padding: .15rem .45rem;
  border: 1px solid var(--border-strong);
  border-radius: .35rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .68rem;
  font-family: var(--font);
  flex-shrink: 0;
}

.command-palette-results {
  overflow-y: auto;
  padding: .4rem;
}

.command-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .85rem;
  border: 1px solid transparent;
  border-radius: .6rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background .1s ease, border-color .1s ease;
}

.command-item:hover,
.command-item.is-active {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 30%, transparent);
}

.command-item-main {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}

.command-title {
  font-weight: 600;
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-subtitle {
  color: var(--muted);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-group-badge {
  flex-shrink: 0;
  padding: .1rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.command-recent-badge {
  flex-shrink: 0;
  padding: .1rem .5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.command-section-label {
  padding: .5rem .85rem .2rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}

.command-divider {
  height: 1px;
  background: var(--border);
  margin: .2rem 0;
}

.command-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

.command-empty p { margin: 0; }

.command-empty-hint {
  margin-top: .5rem !important;
  font-size: .78rem;
  color: var(--muted);
}

.command-item[data-palette-recent] {
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.command-empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}

@media (max-width: 640px) {
  .command-palette {
    padding-top: 0;
    align-items: flex-end;
  }

  .command-palette-dialog {
    width: 100%;
    max-height: 85vh;
    border-radius: 1rem 1rem 0 0;
  }
}

.zapsoc-progress {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius);
  padding: .85rem;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.creator-helper {
  margin: .65rem 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--muted);
  font-size: .86rem;
}

.creator-helper summary {
  cursor: pointer;
  padding: .65rem .8rem;
  color: var(--text);
  font-weight: 700;
}

.creator-helper p,
.creator-helper ul {
  margin: 0;
  padding: 0 .9rem .8rem;
}

.creator-helper ul {
  padding-left: 1.9rem;
}

.creator-helper li + li {
  margin-top: .25rem;
}

.zapsoc-progress-head,
.zapsoc-progress-meta,
.zapsoc-progress-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.zapsoc-progress-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.zapsoc-progress-track {
  height: .55rem;
  overflow: hidden;
  border-radius: 999px;
  margin: .65rem 0 .5rem;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.zapsoc-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #6ee7f9);
  transition: width .25s ease;
}

.zapsoc-progress-meta {
  color: var(--muted);
  font-size: .82rem;
}

.zapsoc-progress.is-error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.zapsoc-progress.is-error .zapsoc-progress-track span {
  background: var(--danger);
}

.zapsoc-progress.is-complete .zapsoc-progress-track span {
  background: var(--success);
}

.zapsoc-progress-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.music-tools-cockpit {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(260px, 340px);
  gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.music-tools-cockpit * {
  box-sizing: border-box;
}

.mp3-library-panel,
.mp3-job-panel,
.mp3-workspace,
.mp3-tab-panel,
.mp3-timeline-panel,
.mp3-selected-strip {
  min-width: 0;
}

.mp3-workspace {
  display: grid;
  gap: 1rem;
}

.mp3-audio-list {
  display: grid;
  gap: .6rem;
  max-height: 66vh;
  overflow: auto;
  padding-right: .15rem;
}

.mp3-audio-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.mp3-audio-row.is-selected {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.mp3-audio-main {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mp3-selected-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mp3-selected-strip h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.mp3-waveform-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #080d18;
}

.mp3-waveform-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 220px;
}

.mp3-waveform-region {
  position: absolute;
  inset-block: 0;
  opacity: 0;
  border-inline: 2px solid #fff;
  background: rgba(78, 160, 255, .16);
  pointer-events: none;
}

.mp3-transport-compact {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.mp3-trim-console {
  display: grid;
  grid-template-columns: repeat(2, minmax(8rem, 1fr)) minmax(7rem, auto) repeat(3, auto);
  gap: .65rem;
  align-items: end;
  margin-top: .75rem;
  min-width: 0;
}

.mp3-trim-console label {
  display: grid;
  gap: .3rem;
  min-width: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.mp3-selection-meter {
  display: grid;
  gap: .2rem;
  min-height: 2.65rem;
  padding: .42rem .65rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.mp3-selection-meter span {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mp3-timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .75rem;
  color: var(--muted);
}

.mp3-timeline-footer label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.mp3-clips-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.mp3-clips-panel h3 {
  margin: 0;
}

.mp3-clips-list {
  display: grid;
  gap: .55rem;
}

.mp3-clip-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
}

.mp3-clip-block.is-selected {
  border-color: color-mix(in srgb, var(--accent) 76%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
}

.mp3-clip-index {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  font-weight: 800;
}

.mp3-clip-body {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.mp3-clip-label {
  min-height: 2.15rem;
}

.mp3-clip-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .35rem;
}

.mp3-tabs {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.mp3-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  padding: .65rem .85rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.mp3-tabs button.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
}

.mp3-tab-panel {
  min-width: 0;
}

.mp3-toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin: .75rem 0;
}

.mp3-mix-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.mp3-mix-lane {
  display: grid;
  gap: .75rem;
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.mp3-mix-lane-head,
.mp3-lane-toggles,
.mp3-mix-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.mp3-mix-lane h3 {
  margin: 0;
}

.mp3-mix-lane label {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.mp3-lane-toggles {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.mp3-mix-summary {
  align-items: end;
  margin-top: .85rem;
}

.mp3-mix-summary label {
  flex: 1 1 18rem;
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.mp3-mix-hint {
  flex: 1 1 16rem;
  color: var(--muted);
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.mp3-merge-list {
  display: grid;
  gap: .55rem;
  margin-bottom: .85rem;
}

.mp3-merge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: .5rem;
  align-items: center;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.mp3-merge-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.mp3-payload-card,
.mp3-next-steps {
  margin-top: 1rem;
}

.mp3-payload-card h3,
.mp3-next-steps h3 {
  margin-top: 0;
}

.mp3-next-steps ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .86rem;
}

.mp3-payload-card .api-output {
  max-height: 36vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .music-tools-cockpit {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }

  .mp3-job-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .music-tools-cockpit {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp3-audio-list {
    max-height: none;
  }

  .mp3-selected-strip,
  .zapsoc-progress-head,
  .zapsoc-progress-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .mp3-audio-row,
  .mp3-merge-row,
  .mp3-clip-block,
  .mp3-trim-console {
    grid-template-columns: 1fr;
  }

  .mp3-toggle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp3-mix-lanes {
    grid-template-columns: 1fr;
  }

  .mp3-mix-summary {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ZAPSOC DESIGN PHASE 1 — Stitch "Obsidian Kinetic" refinements
   ──────────────────────────────────────────────────────────── */

/* ── Status dot (success / warning / danger / info) ── */
.status-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--muted);
  vertical-align: middle;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  flex-shrink: 0;
}

.status-dot.is-success { background: var(--success); color: var(--success); }
.status-dot.is-warning { background: var(--warning); color: var(--warning); }
.status-dot.is-danger  { background: var(--danger);  color: var(--danger); }
.status-dot.is-info    { background: var(--info);    color: var(--info); }
.status-dot.is-accent  { background: var(--accent);  color: var(--accent); }

.status-dot.is-pulse {
  animation: zapsoc-status-pulse 2s ease-in-out infinite;
}

@keyframes zapsoc-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); }
}

/* ── Badge variants ── */
.badge.is-success {
  color: color-mix(in srgb, var(--success) 90%, white);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
}

.badge.is-warning {
  color: color-mix(in srgb, var(--warning) 90%, #000);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
}

.badge.is-danger {
  color: color-mix(in srgb, var(--danger) 90%, white);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
}

.badge.is-info {
  color: color-mix(in srgb, var(--info) 90%, white);
  background: color-mix(in srgb, var(--info) 14%, transparent);
  border-color: color-mix(in srgb, var(--info) 38%, var(--border));
}

.badge.is-neutral {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border-color: var(--border);
}

/* ── Status pills with dot inline ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem .25rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

.status-pill .status-dot {
  width: .42rem;
  height: .42rem;
}

.status-pill.is-success { color: color-mix(in srgb, var(--success) 90%, white); border-color: color-mix(in srgb, var(--success) 32%, var(--border)); }
.status-pill.is-warning { color: color-mix(in srgb, var(--warning) 90%, #000); border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); }
.status-pill.is-danger  { color: color-mix(in srgb, var(--danger) 90%, white);  border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.status-pill.is-info    { color: color-mix(in srgb, var(--info) 90%, white);    border-color: color-mix(in srgb, var(--info) 32%, var(--border)); }

/* ── Dashboard hero / intro section ── */
.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%),
    radial-gradient(circle at 6% 92%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), var(--panel));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 6%, transparent) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%);
  opacity: .35;
  pointer-events: none;
}

.dashboard-hero > * {
  position: relative;
  z-index: 1;
}

.dashboard-hero h1 {
  margin: .25rem 0 0;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--text);
}

.dashboard-hero .kicker {
  font-size: .7rem;
}

.dashboard-hero-copy {
  max-width: 38rem;
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.dashboard-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

/* ── Stats row (KPI cards) ── */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.stat-tile {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), var(--panel));
  position: relative;
  overflow: hidden;
}

.stat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%);
  pointer-events: none;
  opacity: .8;
}

.stat-tile > * {
  position: relative;
  z-index: 1;
}

.stat-tile-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.stat-tile-value {
  color: var(--text);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.stat-tile-hint {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}

/* ── Tool Card (dashboard feature-card) ── */
.tool-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: 1.25rem 1.3rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
  color: inherit;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent) 30%, color-mix(in srgb, var(--accent-2) 70%, transparent) 70%, transparent);
  opacity: 0;
  transition: opacity .2s ease;
}

.tool-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

.tool-card:hover::before {
  opacity: 1;
}

.tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}

.tool-card-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
}

.tool-card-icon.is-accent-2 { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 22%, var(--surface-2)), var(--surface-2)); color: var(--accent-2); }
.tool-card-icon.is-accent-3 { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 22%, var(--surface-2)), var(--surface-2)); color: var(--accent-3); }
.tool-card-icon.is-success  { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 22%, var(--surface-2)), var(--surface-2));  color: var(--success); }
.tool-card-icon.is-warning  { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 22%, var(--surface-2)), var(--surface-2));  color: var(--warning); }
.tool-card-icon.is-danger   { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 22%, var(--surface-2)), var(--surface-2));   color: var(--danger); }
.tool-card-icon.is-info     { background: linear-gradient(135deg, color-mix(in srgb, var(--info) 22%, var(--surface-2)), var(--surface-2));     color: var(--info); }

.tool-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text);
}

.tool-card-desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}

.tool-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .25rem;
}

.tool-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--accent);
  font-size: .85rem;
  font-weight: 600;
}

.tool-card-cta::after {
  content: "→";
  transition: transform .2s ease;
}

.tool-card:hover .tool-card-cta::after {
  transform: translateX(3px);
}

/* ── Quick Actions strip ── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

.quick-action {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  min-height: 3rem;
}

.quick-action:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
}

.quick-action-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 800;
}

.quick-action-text {
  display: grid;
  min-width: 0;
}

.quick-action-text strong {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-action-text span {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Section frame (used for "Recent Media" panels) ── */
.section-frame {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 50%, transparent), var(--panel));
  box-shadow: var(--shadow-sm);
}

.section-frame > .section-head {
  margin-bottom: .25rem;
}

/* ── Sticky topbar (is-stitch modifier) ── */
.dashboard-topbar.is-stitch {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -1.4rem -1.4rem 0;
  padding: .9rem 1.4rem 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* ── Glass card variant ── */
.card.is-glass {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

/* ── Subtle top accent border on cards ── */
.card.is-accent-top {
  border-top: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
}

/* ── Topbar user-chip extras ── */
.user-chip-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip-role {
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ── Theme toggle refinements ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  padding: .45rem .75rem;
}

.theme-toggle .theme-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  font-size: .9rem;
  line-height: 1;
}

/* ── Command palette trigger refinements ── */
.command-palette-trigger {
  padding: .45rem .75rem;
}

.command-palette-trigger .palette-shortcut-label {
  padding: .05rem .4rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-size: .68rem;
  color: var(--muted);
}

/* ── Avatar refinements ── */
.user-chip .avatar,
.user-chip .avatar-sm {
  width: 2.1rem;
  height: 2.1rem;
}

.user-chip > .avatar-sm + span {
  color: var(--text);
  font-weight: 600;
  font-size: .85rem;
}

/* ── Mobile refinements ── */
@media (max-width: 900px) {
  .dashboard-topbar.is-stitch {
    margin: -1rem -1rem 0;
    padding: .75rem 1rem .85rem;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 1.2rem 1.25rem;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-card {
    padding: 1rem 1.1rem 1.1rem;
  }

  .sidebar-link {
    min-height: 2.85rem;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }

  .sidebar-hamburger {
    min-width: 44px;
    min-height: 44px;
  }

  .btn {
    min-height: 2.85rem;
  }
}

@media (max-width: 640px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .stat-tile {
    padding: .85rem 1rem;
  }

  .stat-tile-value {
    font-size: 1.35rem;
  }

  .tool-card {
    padding: .95rem 1rem 1.05rem;
  }

  .tool-card-title {
    font-size: 1rem;
  }

  .tool-card-foot .btn {
    flex: 1 1 auto;
    min-height: 2.85rem;
  }

  .user-chip-name,
  .user-chip-role {
    display: none;
  }

  .dashboard-topbar {
    gap: .65rem;
  }

  .dashboard-main {
    padding-inline: 1rem;
    padding-bottom: 7rem;
  }
}

@media (min-width: 1280px) {
  .dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .dashboard-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── Focus visible baseline (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn:focus-visible,
.form-control:focus-visible,
.sidebar-link:focus-visible {
  outline: none;
}

/* ── Print-friendly safety ── */
@media print {
  .sidebar,
  .dashboard-topbar,
  .global-audio-player,
  .gap-fab {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ZAPSOC STITCH RECOVERY — true to Stitch "Obsidian Kinetic"
   No neon. No gaming. Just Material-3 dark creative studio.
   ──────────────────────────────────────────────────────────── */

/* ── 1. Stitch Material-3 tokens ── */
:root {
  --st-bg: #05070A;
  --st-surface: #111417;
  --st-surface-dim: #111417;
  --st-surface-bright: #37393D;
  --st-surface-container-lowest: #0C0E12;
  --st-surface-container-low: #191C1F;
  --st-surface-container: #1D2023;
  --st-surface-container-high: #282A2E;
  --st-surface-container-highest: #323539;
  --st-surface-variant: #323539;
  --st-panel: #161B22;
  --st-bg-soft: #0D1117;
  --st-border: rgba(255, 255, 255, 0.08);
  --st-border-strong: rgba(255, 255, 255, 0.14);
  --st-outline: #8B90A0;
  --st-outline-variant: #414754;
  --st-text: #F0F6FC;
  --st-on-surface: #E1E2E7;
  --st-on-surface-variant: #C1C6D7;
  --st-muted: #8B949E;
  --st-primary: #AEC6FF;
  --st-primary-container: #0070F3;
  --st-primary-fixed: #D8E2FF;
  --st-primary-fixed-dim: #AEC6FF;
  --st-on-primary-container: #FFFFFF;
  --st-secondary: #48DDBC;
  --st-secondary-container: #00BB9C;
  --st-tertiary: #ECB2FF;
  --st-tertiary-container: #BD01FF;
  --st-status-success: #198754;
  --st-status-warning: #FFC107;
  --st-status-danger: #DC3545;
  --st-radius: 4px;
  --st-radius-lg: 8px;
  --st-radius-xl: 12px;
  --st-radius-full: 9999px;
  --st-radius-md: 6px;
  --st-glass-bg: rgba(22, 27, 34, 0.7);
  --st-glass-border: rgba(255, 255, 255, 0.08);
  --st-glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --st-glow-focus: 0 0 0 2px rgba(0, 112, 243, 0.2);
  --st-glow-blue-shadow: 0 0 15px rgba(0, 112, 243, 0.5);
  --st-glow-cyan-shadow: 0 0 15px rgba(72, 221, 188, 0.3);
  --st-font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-headline: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", monospace;
}

html[data-theme="light"] {
  --st-bg: #FAFAFA;
  --st-surface: #FFFFFF;
  --st-surface-container-lowest: #FFFFFF;
  --st-surface-container-low: #F3F3F3;
  --st-surface-container: #EEEEEE;
  --st-surface-container-high: #E8E8E8;
  --st-surface-container-highest: #E2E2E2;
  --st-panel: #FFFFFF;
  --st-border: rgba(15, 23, 42, 0.08);
  --st-border-strong: rgba(15, 23, 42, 0.16);
  --st-text: #0B0E13;
  --st-on-surface: #1A1C1C;
  --st-on-surface-variant: #444748;
  --st-muted: #5E6675;
  --st-glass-bg: rgba(255, 255, 255, 0.85);
  --st-glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* ── 2. Stitch canvas ── */
body.st-stitch {
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font-body);
  min-height: 100vh;
}

/* ── Robust shell: kill the old grid, use explicit margin-left offset. ── */
.dashboard-shell.st-stitch {
  display: block;
  background: var(--st-bg);
  min-height: 100vh;
}

.st-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  background: var(--st-bg);
  /* Desktop: explicit offset for the fixed sidebar (16rem). */
  margin-left: 16rem;
  width: calc(100% - 16rem);
}

@media (max-width: 767px) {
  .st-main {
    margin-left: 0;
    width: 100%;
  }
}

.st-main-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem 1.75rem 6.5rem;
  gap: 1.5rem;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* ── 3. Glass panel ── */
.st-glass {
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-glass-border);
  box-shadow: var(--st-glass-shadow);
}

/* ── 4. SIDEBAR (true Stitch) ── */
.sidebar.st-stitch {
  position: fixed;
  top: 0;
  left: 0;
  width: 16rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  background: var(--st-surface);
  border-right: 1px solid var(--st-border);
  z-index: 40;
  /* Phase 8G.10M.1 — Sidebar Footer Pinning Fix.
     The sidebar shell no longer scrolls. Only the inner nav region
     (.z-sidebar-scroll) scrolls, while account/profile and logout sit
     pinned in .z-sidebar-footer at the bottom of the fixed 100vh shell. */
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 767px) {
  .sidebar.st-stitch {
    display: none;
  }
}

.st-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1rem 1.5rem;
}

.st-sidebar-brand-mark {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  color: var(--st-primary);
  font-size: 1.5rem;
}

.st-sidebar-brand-text h1 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--st-primary);
  line-height: 1.1;
}

.st-sidebar-brand-text p {
  margin: .1rem 0 0;
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--st-on-surface-variant);
  text-transform: uppercase;
}

.st-sidebar-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0 1rem 1.5rem;
  padding: .55rem 1rem;
  background: var(--st-primary-container);
  color: var(--st-on-primary-container);
  border: none;
  border-radius: var(--st-radius);
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.st-sidebar-new:hover {
  background: color-mix(in srgb, var(--st-primary-container) 90%, #000 10%);
  color: var(--st-on-primary-container);
}

.st-sidebar-new svg {
  width: 1rem;
  height: 1rem;
}

.st-sidebar-nav {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 0 .5rem;
  min-height: 0;
}

.st-sidebar-nav a,
.st-sidebar-nav .st-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  border-radius: var(--st-radius-lg);
  border-left: 2px solid transparent;
  color: var(--st-on-surface-variant);
  text-decoration: none;
  font-family: var(--st-font-body);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.st-sidebar-nav a:hover,
.st-sidebar-nav .st-sidebar-link:hover {
  background: var(--st-surface-variant);
  color: var(--st-on-surface);
}

.st-sidebar-nav a.is-active,
.st-sidebar-nav .st-sidebar-link.is-active {
  border-left-color: var(--st-primary);
  background: color-mix(in srgb, var(--st-primary-container) 10%, transparent);
  color: var(--st-primary);
  font-weight: 700;
}

.st-sidebar-nav .st-nav-icon {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  color: inherit;
  flex-shrink: 0;
}

.st-sidebar-nav .st-nav-icon svg {
  width: 100%;
  height: 100%;
}

.st-sidebar-nav a.is-active .st-nav-icon,
.st-sidebar-nav .st-sidebar-link.is-active .st-nav-icon {
  color: var(--st-primary);
}

.st-sidebar-account {
  /* Phase 8G.10M.1 — Pinned in .z-sidebar-footer, no longer needs
     margin-top:auto (the footer wrapper sits at the bottom of the
     flex column on the sidebar shell). */
  margin-top: 0;
  padding: .85rem 1rem 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.st-sidebar-account-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--st-radius-full);
  border: 1px solid var(--st-border);
  background: var(--st-surface-variant);
  display: grid;
  place-items: center;
  color: var(--st-muted);
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.st-sidebar-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-sidebar-account-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.st-sidebar-account-name {
  font-family: var(--st-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--st-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-sidebar-account-role {
  margin-top: .1rem;
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--st-muted);
}

/* ── 5. TOPBAR (true Stitch) ── */
.st-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
  padding: 0 1.75rem;
  background: color-mix(in srgb, var(--st-surface) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--st-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--st-primary-container) 5%, transparent);
}

.st-topbar-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
  min-width: 0;
}

.st-topbar-title {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--st-text);
  white-space: nowrap;
}

.st-topbar-search {
  position: relative;
  flex: 1;
  max-width: 28rem;
  margin-left: 1.5rem;
}

.st-topbar-search .st-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--st-on-surface-variant);
  pointer-events: none;
}

.st-topbar-search input {
  width: 100%;
  height: 2.25rem;
  padding: .35rem .75rem .35rem 2.4rem;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  font: inherit;
  font-size: .875rem;
  font-family: var(--st-font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.st-topbar-search input::placeholder {
  color: var(--st-on-surface-variant);
}

.st-topbar-search input:hover {
  border-color: var(--st-border-strong);
}

.st-topbar-search input:focus-visible {
  outline: none;
  border-color: var(--st-primary-container);
  box-shadow: var(--st-glow-focus);
}

.st-topbar-tabs {
  display: flex;
  gap: 1.25rem;
  margin-left: 1.5rem;
}

.st-topbar-tabs a {
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-on-surface-variant);
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.st-topbar-tabs a:hover {
  color: var(--st-primary);
}

.st-topbar-tabs a.is-active {
  color: var(--st-primary);
  border-bottom-color: var(--st-primary);
}

.st-topbar-right {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.st-topbar-icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--st-radius);
  border: none;
  background: transparent;
  color: var(--st-on-surface-variant);
  cursor: pointer;
  position: relative;
  transition: color .15s ease, background .15s ease;
}

.st-topbar-icon-btn:hover {
  color: var(--st-primary);
  background: var(--st-surface-variant);
}

.st-topbar-icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.st-topbar-icon-btn .st-dot {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: .4rem;
  height: .4rem;
  border-radius: var(--st-radius-full);
  background: var(--st-primary-container);
  border: 1px solid var(--st-surface);
}

.st-topbar-actions {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-right: .85rem;
  border-right: 1px solid var(--st-border);
}

.st-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 2.25rem;
  padding: 0 1rem;
  background: var(--st-primary-container);
  color: var(--st-on-primary-container);
  border: none;
  border-radius: var(--st-radius);
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}

.st-topbar-cta:hover {
  background: color-mix(in srgb, var(--st-primary-container) 90%, #000 10%);
  color: var(--st-on-primary-container);
}

.st-topbar-cta svg {
  width: 1rem;
  height: 1rem;
}

.st-topbar-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--st-radius-full);
  border: 1px solid var(--st-border);
  background: var(--st-surface-variant);
  display: grid;
  place-items: center;
  color: var(--st-muted);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

.st-topbar-avatar:hover {
  border-color: var(--st-border-strong);
}

.st-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 6. DASHBOARD HERO (single-column + bento) ── */
.st-hero {
  position: relative;
  display: block;
  padding: 2.5rem 3rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--st-glass-shadow);
  overflow: hidden;
  isolation: isolate;
}

.st-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--st-primary-container) 35%, transparent), transparent 50%);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}

.st-hero > * {
  position: relative;
  z-index: 1;
}

.st-hero-inner {
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.st-hero h2 {
  margin: 0;
  font-family: var(--st-font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--st-text);
}

.st-hero h2 .st-accent {
  color: var(--st-primary);
}

.st-hero p {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--st-muted);
  max-width: 34rem;
}

/* Bento quick actions */
.st-bento {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}

.st-bento-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.1rem .65rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  color: var(--st-text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  text-align: center;
}

.st-bento-item:hover {
  border-color: color-mix(in srgb, var(--st-primary-container) 30%, var(--st-border));
  box-shadow: 0 0 15px color-mix(in srgb, var(--st-primary-container) 15%, transparent);
  transform: translateY(-1px);
}

.st-bento-item .st-bento-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--st-primary);
  transition: transform .15s ease;
}

.st-bento-item:hover .st-bento-icon {
  transform: scale(1.08);
}

.st-bento-item .st-bento-label {
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--st-text);
}

.st-bento-item.is-muted .st-bento-icon {
  color: var(--st-muted);
}

.st-bento-item.is-muted .st-bento-label {
  color: var(--st-muted);
}

.st-bento-item.is-muted:hover {
  border-color: var(--st-border-strong);
  box-shadow: none;
}

/* ── 7. SECTION (headline-md + label-caps title pattern) ── */
.st-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.st-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .25rem;
}

.st-section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--st-text);
}

.st-section-title .st-section-title-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--st-primary);
}

.st-section-link {
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-primary);
  text-decoration: none;
}

.st-section-link:hover {
  color: var(--st-text);
}

.st-section-hint {
  margin: -.25rem 0 0;
  font-family: var(--st-font-body);
  font-size: .875rem;
  color: var(--st-muted);
}

/* ── 8. STATUS CARDS (Stitch style — 4-up, left-border accent) ── */
.st-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.st-status-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-left-width: 2px;
  border-radius: var(--st-radius-lg);
  overflow: hidden;
}

.st-status-card.is-success { border-left-color: var(--st-status-success); }
.st-status-card.is-primary { border-left-color: var(--st-primary); }
.st-status-card.is-secondary { border-left-color: var(--st-secondary); }
.st-status-card.is-warning { border-left-color: var(--st-status-warning); }
.st-status-card.is-danger { border-left-color: var(--st-status-danger); }

.st-status-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

.st-status-card-label {
  font-family: var(--st-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--st-muted);
}

.st-status-card .st-status-dot {
  width: .42rem;
  height: .42rem;
  border-radius: var(--st-radius-full);
  flex-shrink: 0;
}

.st-status-card.is-success .st-status-dot {
  background: var(--st-status-success);
  box-shadow: 0 0 6px color-mix(in srgb, var(--st-status-success) 60%, transparent);
}

.st-status-card.is-primary .st-status-dot {
  background: var(--st-primary);
}

.st-status-card.is-secondary .st-status-dot {
  background: var(--st-secondary);
}

.st-status-card.is-warning .st-status-dot {
  background: var(--st-status-warning);
}

.st-status-card.is-danger .st-status-dot {
  background: var(--st-status-danger);
}

.st-status-card-value {
  font-family: var(--st-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text);
  letter-spacing: -.01em;
}

.st-status-card-hint {
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.st-status-card.is-success .st-status-card-hint { color: var(--st-status-success); }
.st-status-card.is-primary .st-status-card-hint { color: var(--st-primary); }
.st-status-card.is-warning .st-status-card-hint { color: var(--st-status-warning); }

.st-status-card-bar {
  position: relative;
  height: .25rem;
  background: var(--st-bg);
  border-radius: var(--st-radius-full);
  overflow: hidden;
}

.st-status-card-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .25s ease;
}

.st-status-card.is-success .st-status-card-bar > span { background: var(--st-status-success); }
.st-status-card.is-primary .st-status-card-bar > span { background: var(--st-primary-container); }
.st-status-card.is-warning .st-status-card-bar > span { background: var(--st-status-warning); }

/* ── 9. MEDIA CARD (Stitch true — glass-panel + 128px preview + badge + hover) ── */
.st-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}

.st-media-card {
  display: flex;
  flex-direction: column;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .1s ease;
}

.st-media-card:hover {
  border-color: color-mix(in srgb, var(--st-primary-container) 25%, var(--st-border));
  transform: translateY(-1px);
}

.st-media-preview {
  position: relative;
  height: 8.5rem;
  background: var(--st-surface-container);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.st-media-preview img,
.st-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: opacity .2s ease;
}

.st-media-card:hover .st-media-preview img,
.st-media-card:hover .st-media-preview video {
  opacity: 1;
}

.st-media-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .5rem;
  background: color-mix(in srgb, #000 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: var(--st-radius);
  font-family: var(--st-font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.st-media-badge svg {
  width: .75rem;
  height: .75rem;
}

.st-media-badge.is-primary svg { color: var(--st-primary); }
.st-media-badge.is-secondary svg { color: var(--st-secondary); }
.st-media-badge.is-tertiary svg { color: var(--st-tertiary); }

.st-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  background: color-mix(in srgb, #000 50%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.st-media-card:hover .st-media-overlay {
  opacity: 1;
  pointer-events: auto;
}

.st-media-overlay-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--st-radius-full);
  background: var(--st-primary-container);
  color: var(--st-on-primary-container);
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  box-shadow: 0 0 15px color-mix(in srgb, var(--st-primary-container) 50%, transparent);
}

.st-media-overlay-btn:hover {
  background: color-mix(in srgb, var(--st-primary-container) 90%, #000 10%);
  transform: scale(1.05);
}

.st-media-overlay-btn.is-cyan {
  background: var(--st-secondary);
  color: #002019;
  box-shadow: 0 0 15px color-mix(in srgb, var(--st-secondary) 30%, transparent);
}

.st-media-overlay-btn.is-secondary {
  background: var(--st-surface-variant);
  color: var(--st-text);
  border: 1px solid var(--st-border);
  box-shadow: none;
}

.st-media-overlay-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.st-media-body {
  padding: .85rem .9rem;
  border-top: 1px solid color-mix(in srgb, var(--st-border) 50%, transparent);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.st-media-title {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--st-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-media-meta {
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--st-muted);
}

/* ── 10. ACTIVE JOBS PANEL ── */
.st-jobs-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  padding: 1.15rem;
  gap: 1rem;
}

.st-jobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--st-border) 50%, transparent);
}

.st-jobs-count {
  display: inline-block;
  padding: .18rem .5rem;
  background: var(--st-surface-bright);
  border-radius: var(--st-radius);
  font-family: var(--st-font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--st-muted);
}

.st-jobs-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 1;
  overflow-y: auto;
  padding-right: .25rem;
}

.st-job {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem .9rem;
  background: color-mix(in srgb, var(--st-surface-container) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-border) 50%, transparent);
  border-radius: var(--st-radius-lg);
}

.st-job.is-done {
  border-color: color-mix(in srgb, var(--st-status-success) 20%, transparent);
  background: color-mix(in srgb, var(--st-surface-container) 20%, transparent);
}

.st-job.is-done .st-job-title {
  color: color-mix(in srgb, var(--st-text) 70%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #fff 30%, transparent);
}

.st-job.is-queued {
  opacity: .7;
}

.st-job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}

.st-job-title-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.st-job-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid color-mix(in srgb, var(--st-primary) 30%, transparent);
  border-top-color: var(--st-primary);
  border-radius: var(--st-radius-full);
  animation: st-job-spin 1s linear infinite;
  flex-shrink: 0;
}

.st-job-spinner.is-cyan {
  border-color: color-mix(in srgb, var(--st-secondary) 30%, transparent);
  border-top-color: var(--st-secondary);
}

.st-job-spinner.is-static {
  border: none;
  background: none;
  animation: none;
  color: var(--st-muted);
}

.st-job-spinner.is-done {
  color: var(--st-status-success);
  border: none;
  background: none;
  animation: none;
}

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

.st-job-title {
  font-family: var(--st-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--st-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-job-pct {
  font-family: var(--st-font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--st-primary);
  flex-shrink: 0;
}

.st-job-pct.is-cyan {
  color: var(--st-secondary);
}

.st-job-pct.is-muted {
  color: var(--st-muted);
}

.st-job-pct.is-done {
  color: var(--st-status-success);
}

.st-job-bar {
  position: relative;
  height: .38rem;
  background: var(--st-bg);
  border-radius: var(--st-radius-full);
  overflow: hidden;
}

.st-job-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--st-primary-container);
  position: relative;
  transition: width .25s ease;
}

.st-job-bar > span.is-cyan {
  background: var(--st-secondary);
}

.st-job-bar > span.is-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #fff 20%, transparent);
  animation: st-job-pulse 2s ease-in-out infinite;
}

@keyframes st-job-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.st-job-bar > span.is-static {
  background: var(--st-surface-bright);
}

.st-job-meta {
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--st-muted);
}

/* ── 11. DASHBOARD 2-column layout (recent media + active jobs) ── */
.st-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.st-dash-grid > * { min-width: 0; }

@media (max-width: 1023px) {
  .st-dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 12. MEDIA LIBRARY — pill filters + new cards ── */
.st-ml-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.st-ml-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
}

.st-ml-stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  min-width: 0;
}

.st-ml-stat-label {
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.st-ml-stat-value {
  font-family: var(--st-font-body);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--st-text);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.st-ml-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
}

.st-ml-pills {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.st-ml-pills::-webkit-scrollbar { display: none; }

.st-ml-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  background: transparent;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full);
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.st-ml-pill:hover {
  background: var(--st-surface-variant);
  color: var(--st-text);
}

.st-ml-pill.is-active {
  background: var(--st-surface-variant);
  color: var(--st-text);
  border-color: var(--st-border-strong);
}

.st-ml-pill svg {
  width: .75rem;
  height: .75rem;
}

.st-ml-toolbar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.st-ml-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.st-ml-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  height: 2.1rem;
  padding: .35rem 2rem .35rem .75rem;
  background: var(--st-panel);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .15s ease;
}

.st-ml-select-wrap select:hover { border-color: var(--st-border-strong); }
.st-ml-select-wrap select:focus-visible { outline: none; border-color: var(--st-primary-container); box-shadow: var(--st-glow-focus); }

.st-ml-select-wrap::after {
  content: "";
  position: absolute;
  right: .65rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1.5px solid var(--st-on-surface-variant);
  border-bottom: 1.5px solid var(--st-on-surface-variant);
  pointer-events: none;
}

.st-ml-view-toggle {
  display: inline-flex;
  padding: .15rem;
  background: var(--st-panel);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
}

.st-ml-view-toggle button {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  background: transparent;
  border: none;
  border-radius: calc(var(--st-radius) - 1px);
  color: var(--st-on-surface-variant);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.st-ml-view-toggle button.is-active {
  background: var(--st-surface-variant);
  color: var(--st-text);
}

.st-ml-view-toggle button svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Media library grid (matches Stitch aspect 4/5) */
.st-ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1rem;
}

/* ── 13. Upload area ── */
.st-ml-upload {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.st-ml-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.st-ml-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.st-ml-upload-grid label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--st-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-on-surface-variant);
}

.st-ml-upload-grid .form-control {
  width: 100%;
  height: 2.4rem;
  padding: .35rem .65rem;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  font: inherit;
  font-family: var(--st-font-body);
  font-size: .875rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.st-ml-upload-grid .form-control:focus-visible {
  outline: none;
  border-color: var(--st-primary-container);
  box-shadow: var(--st-glow-focus);
}

.st-ml-upload-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.st-ml-upload-status {
  flex: 1;
  min-width: 12rem;
  padding: .55rem .75rem;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  font-family: var(--st-font-mono);
  font-size: .75rem;
  color: var(--st-muted);
}

.st-ml-upload-pill {
  display: inline-block;
  padding: .15rem .5rem;
  background: color-mix(in srgb, var(--st-secondary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-secondary) 32%, var(--st-border));
  border-radius: var(--st-radius-full);
  font-family: var(--st-font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-secondary);
}

/* ── 14. Empty state ── */
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 3rem 1.5rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed var(--st-border-strong);
  border-radius: var(--st-radius-xl);
  text-align: center;
}

.st-empty h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--st-text);
}

.st-empty p {
  margin: 0;
  max-width: 32rem;
  color: var(--st-muted);
  font-size: .875rem;
}

.st-empty .st-empty-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem;
}

/* ── 15. Page controls ── */
[aria-live="polite"] > .deluxe-media-grid + div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .85rem;
  padding: .85rem 1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  font-family: var(--st-font-mono);
  font-size: .75rem;
  color: var(--st-muted);
}

[data-media-showing] {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}

/* ── 16. BOTTOM MOBILE NAV (Stitch true) ── */
.st-bottomnav {
  display: none;
}

@media (max-width: 767px) {
  .st-bottomnav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    align-items: center;
    justify-content: space-around;
    padding: .5rem 1rem 1rem;
    background: var(--st-surface-container);
    border-top: 1px solid var(--st-border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
    font-family: var(--st-font-mono);
    font-size: .69rem;
    font-weight: 500;
    letter-spacing: .02em;
  }

  /* Lift global audio player above the bottom-nav so it's not covered on mobile. */
  .global-audio-player {
    bottom: calc(5.25rem + .5rem) !important;
  }
  .gap-fab {
    bottom: calc(5.25rem + 1.2rem) !important;
  }

  .st-main-canvas {
    padding-bottom: 6.5rem;
  }

  .st-bottomnav a,
  .st-bottomnav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .35rem .65rem;
    border: 0;
    border-radius: var(--st-radius-lg);
    background: transparent;
    color: var(--st-on-surface-variant);
    font: inherit;
    text-decoration: none;
    opacity: .7;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
    transform: scale(.9);
  }

  .st-bottomnav a:hover,
  .st-bottomnav button:hover,
  .st-bottomnav a.is-active {
    opacity: 1;
    color: var(--st-secondary);
    background: color-mix(in srgb, var(--st-secondary) 10%, transparent);
  }

  .st-bottomnav a svg,
  .st-bottomnav button svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ── 17. Status chips (mobile hero) ── */
.st-status-chips {
  display: flex;
  gap: .5rem;
  padding-bottom: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.st-status-chips::-webkit-scrollbar { display: none; }

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  background: var(--st-surface-container);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full);
  font-family: var(--st-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--st-on-surface);
  white-space: nowrap;
  flex-shrink: 0;
}

.st-chip .st-chip-dot {
  width: .42rem;
  height: .42rem;
  border-radius: var(--st-radius-full);
}

.st-chip .st-chip-dot.is-success { background: var(--st-status-success); }
.st-chip .st-chip-dot.is-warning { background: var(--st-status-warning); }
.st-chip svg { width: .85rem; height: .85rem; }

/* ── 18. Recent activity mobile row ── */
.st-activity-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem;
  background: var(--st-panel);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease;
}

.st-activity-row:hover {
  border-color: color-mix(in srgb, var(--st-primary-container) 25%, var(--st-border));
}

.st-activity-thumb {
  width: 6rem;
  height: 6rem;
  border-radius: var(--st-radius-lg);
  background: var(--st-surface-variant);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.st-activity-thumb img,
.st-activity-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-activity-thumb .st-activity-badge {
  position: absolute;
  top: .25rem;
  right: .25rem;
  padding: .1rem .35rem;
  background: color-mix(in srgb, var(--st-surface-container-high) 80%, transparent);
  backdrop-filter: blur(4px);
  border-radius: var(--st-radius);
  font-family: var(--st-font-body);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-on-surface);
}

.st-activity-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  flex: 1;
  padding: .5rem .65rem .5rem 0;
}

.st-activity-title {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: 1rem;
  color: var(--st-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-activity-meta {
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--st-muted);
}

.st-activity-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .25rem;
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
}

.st-activity-status .st-status-dot { width: .42rem; height: .42rem; border-radius: var(--st-radius-full); }
.st-activity-status .st-status-dot.is-success { background: var(--st-status-success); }
.st-activity-status .st-status-dot.is-warning { background: var(--st-status-warning); }
.st-activity-status .st-status-dot.is-muted { background: var(--st-outline); }

/* ── 19. Mobile specific overrides ── */
@media (max-width: 1023px) {
  .st-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-ml-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-ml-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .st-hero { padding: 1.5rem 1.5rem; }
  .st-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-ml-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .st-topbar { padding: 0 1rem; gap: .65rem; }
  .st-topbar-title { font-size: 1.1rem; }
  .st-topbar-search { display: none; }
  .st-topbar-tabs { display: none; }
  .st-topbar-actions { display: none; }
  .st-hero h2 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .st-hero { padding: 1.25rem 1rem; }
  .st-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-ml-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-media-grid { grid-template-columns: 1fr; }
  .st-ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .st-ml-upload-grid { grid-template-columns: 1fr; }
  .st-ml-toolbar { flex-direction: column; align-items: stretch; }
  .st-ml-toolbar-right { justify-content: flex-end; }
  .st-section-title { font-size: 1.2rem; }
  .st-section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .st-ml-grid { grid-template-columns: 1fr; }
}

/* ── 20. Override old topbar/sidebar so they stay consistent ── */
body.st-stitch .dashboard-topbar.is-stitch.is-studio,
body.st-stitch .dashboard-topbar.is-stitch {
  display: none !important;
}

/* ── 20b. Phase 3A shell: legacy <main class="dashboard-main"> pages ── */
/* Studio/tool pages still emit <main class="dashboard-main studio-page">.     */
/* Give them the explicit offset that matches the new fixed sidebar.            */
.dashboard-shell.st-stitch > .dashboard-main {
  margin-left: 16rem;
  width: calc(100% - 16rem);
  min-width: 0;
  min-height: 100vh;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch > .dashboard-main {
    margin-left: 0;
    width: 100%;
  }
}

/* Direct children of legacy main (sections / forms) get proper breathing room. */
.dashboard-shell.st-stitch > .dashboard-main > *:not(.st-topbar):not(.dashboard-topbar):not(.topbar) {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 7rem;
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch > .dashboard-main > *:not(.st-topbar):not(.dashboard-topbar):not(.topbar) {
    padding: 1.25rem 1rem 7.5rem;
  }
}

/* Phase 3A shared layout components (scoped under st-stitch to not leak). */
.dashboard-shell.st-stitch .st-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 7rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch .st-page {
    padding: 1.25rem 1rem 7.5rem;
    gap: 1.25rem;
  }
}

.dashboard-shell.st-stitch .st-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .5rem;
}

.dashboard-shell.st-stitch .st-page-header .st-page-title-block {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .st-page-kicker {
  margin: 0;
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--st-secondary);
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .st-page-title {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--st-text);
  line-height: 1.15;
}

.dashboard-shell.st-stitch .st-page-subtitle {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .95rem;
  color: var(--st-muted);
  max-width: 56rem;
  line-height: 1.5;
}

.dashboard-shell.st-stitch .st-page-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Premium panel (glass surface for tool workbenches). */
.dashboard-shell.st-stitch .st-panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem 1.4rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.dashboard-shell.st-stitch .st-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .st-panel-title {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--st-text);
}

/* Premium toolbar for action rows / segmented controls. */
.dashboard-shell.st-stitch .st-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
}

.dashboard-shell.st-stitch .st-toolbar > .st-toolbar-spacer {
  flex: 1;
}

/* Form grid (2-col default, auto-fit on small). */
.dashboard-shell.st-stitch .st-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

.dashboard-shell.st-stitch .st-form-grid.span-full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .dashboard-shell.st-stitch .st-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Card grid for tool/preset tiles. */
.dashboard-shell.st-stitch .st-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

/* Editor shell — for split-pane tool editors. */
.dashboard-shell.st-stitch .st-editor-shell {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.dashboard-shell.st-stitch .st-editor-panel {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  min-width: 0;
}

/* Empty state — premium dashed panel. */
.dashboard-shell.st-stitch .st-empty-state {
  display: grid;
  gap: .85rem;
  justify-items: center;
  padding: 2.5rem 1.5rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed var(--st-border-strong);
  border-radius: var(--st-radius-xl);
  text-align: center;
}

.dashboard-shell.st-stitch .st-empty-state h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--st-text);
}

.dashboard-shell.st-stitch .st-empty-state p {
  margin: 0;
  max-width: 32rem;
  color: var(--st-muted);
  font-size: .875rem;
}

.dashboard-shell.st-stitch .st-empty-state .st-empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: .25rem;
}

/* Action row. */
.dashboard-shell.st-stitch .st-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

/* Premium segmented control used inside st-toolbar. */
.dashboard-shell.st-stitch .st-segmented {
  display: inline-flex;
  padding: .2rem;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
}

.dashboard-shell.st-stitch .st-segmented button {
  min-height: 2rem;
  padding: .35rem .75rem;
  background: transparent;
  border: none;
  border-radius: calc(var(--st-radius) - 1px);
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-body);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.dashboard-shell.st-stitch .st-segmented button.is-active {
  background: color-mix(in srgb, var(--st-primary-container) 18%, transparent);
  color: var(--st-text);
  border: 1px solid color-mix(in srgb, var(--st-primary-container) 35%, transparent);
}

/* Premium badge refinements inside st-stitch pages. */
.dashboard-shell.st-stitch .badge {
  padding: .22rem .55rem;
  letter-spacing: .1em;
  font-weight: 700;
}

.dashboard-shell.st-stitch .module-code {
  padding: .25rem .55rem;
}

/* Make existing studio-page headings more readable inside the new shell. */
.dashboard-shell.st-stitch .dashboard-main h2,
.dashboard-shell.st-stitch .dashboard-main h3 {
  color: var(--st-text);
}

.dashboard-shell.st-stitch .dashboard-main label {
  color: var(--st-on-surface-variant);
}

.dashboard-shell.st-stitch .dashboard-main .form-control {
  background: var(--st-bg);
  border-color: var(--st-border);
  color: var(--st-text);
}

.dashboard-shell.st-stitch .dashboard-main .form-control:focus-visible {
  border-color: var(--st-primary-container);
  box-shadow: var(--st-glow-focus);
}

.dashboard-shell.st-stitch .dashboard-main .form-control::placeholder {
  color: var(--st-muted);
}

.dashboard-shell.st-stitch .dashboard-main .card {
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--st-border);
}

.dashboard-shell.st-stitch .dashboard-main .btn-primary {
  background: linear-gradient(135deg, var(--st-primary-container), color-mix(in srgb, var(--st-primary-container) 88%, #000 12%));
  color: var(--st-on-primary-container);
  border-color: transparent;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--st-primary-container) 28%, transparent);
}

.dashboard-shell.st-stitch .dashboard-main .btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--st-primary-container) 92%, #fff 8%), var(--st-primary-container));
  color: var(--st-on-primary-container);
}

.dashboard-shell.st-stitch .dashboard-main .btn-secondary {
  background: color-mix(in srgb, var(--st-panel-2, var(--st-surface-container)) 80%, transparent);
  border-color: var(--st-border-strong);
  color: var(--st-text);
}

.dashboard-shell.st-stitch .dashboard-main .btn-secondary:hover {
  background: color-mix(in srgb, var(--st-primary-container) 12%, var(--st-panel-2, var(--st-surface-container)));
  border-color: color-mix(in srgb, var(--st-primary-container) 40%, var(--st-border-strong));
  color: var(--st-text);
}

.dashboard-shell.st-stitch .dashboard-main .kicker {
  color: var(--st-secondary);
}

.dashboard-shell.st-stitch .dashboard-main .muted,
.dashboard-shell.st-stitch .dashboard-main .status-terminal,
.dashboard-shell.st-stitch .dashboard-main .workflow-list {
  color: var(--st-muted);
}

.dashboard-shell.st-stitch .dashboard-main .status-terminal {
  background: var(--st-bg);
  border-color: var(--st-border);
}

/* Old dashboard-topbar inside migrated pages (none expected, but keep safety). */
.dashboard-shell.st-stitch .dashboard-main > .dashboard-topbar,
.dashboard-shell.st-stitch .dashboard-main > .topbar {
  display: none;
}

/* ── 20c. Phase 3B: admin/profile/settings scoped refinements ─────────────── */

.dashboard-shell.st-stitch .admin-page,
.dashboard-shell.st-stitch .profile-page,
.dashboard-shell.st-stitch .settings-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Page header for admin/profile/settings. */
.dashboard-shell.st-stitch .admin-page h2:first-child,
.dashboard-shell.st-stitch .profile-page h2:first-child,
.dashboard-shell.st-stitch .settings-page h2:first-child {
  margin-top: 0;
}

.dashboard-shell.st-stitch .admin-page .section-head h2,
.dashboard-shell.st-stitch .settings-page .section-head h2,
.dashboard-shell.st-stitch .profile-page .section-head h2 {
  color: var(--st-text);
}

.dashboard-shell.st-stitch .admin-page .section-head .kicker,
.dashboard-shell.st-stitch .settings-page .section-head .kicker,
.dashboard-shell.st-stitch .profile-page .section-head .kicker {
  color: var(--st-secondary);
}

/* KPI stats grid (admin + profile reuse this). */
.dashboard-shell.st-stitch .media-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .85rem;
  margin-bottom: .25rem;
}

.dashboard-shell.st-stitch .stat-card {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.15rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  min-width: 0;
}

.dashboard-shell.st-stitch .stat-card span {
  color: var(--st-muted);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .stat-card strong {
  color: var(--st-text);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* Admin toolbar (filter form container). */
.dashboard-shell.st-stitch .admin-toolbar,
.dashboard-shell.st-stitch .admin-form-card,
.dashboard-shell.st-stitch .admin-danger-zone {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  margin-bottom: .25rem;
}

.dashboard-shell.st-stitch .admin-filter-form,
.dashboard-shell.st-stitch .admin-user-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 14rem) auto;
  gap: .85rem;
  align-items: end;
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch .admin-filter-form,
  .dashboard-shell.st-stitch .admin-user-form {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell.st-stitch .admin-filter-form label,
.dashboard-shell.st-stitch .admin-user-form label,
.dashboard-shell.st-stitch .settings-grid label,
.dashboard-shell.st-stitch .account-form label,
.dashboard-shell.st-stitch .settings-page label {
  color: var(--st-on-surface-variant);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Admin table. */
.dashboard-shell.st-stitch .table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-panel) 60%, transparent);
}

.dashboard-shell.st-stitch .admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: var(--st-font-body);
  font-size: .875rem;
  color: var(--st-text);
}

.dashboard-shell.st-stitch .admin-table th,
.dashboard-shell.st-stitch .admin-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--st-border) 70%, transparent);
  text-align: left;
  vertical-align: middle;
}

.dashboard-shell.st-stitch .admin-table thead th {
  color: var(--st-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--st-surface-container) 70%, transparent);
}

.dashboard-shell.st-stitch .admin-table tbody tr {
  transition: background .12s ease;
}

.dashboard-shell.st-stitch .admin-table tbody tr:hover {
  background: color-mix(in srgb, var(--st-primary-container) 6%, transparent);
}

.dashboard-shell.st-stitch .admin-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-shell.st-stitch .admin-table .badge {
  padding: .18rem .5rem;
  letter-spacing: .08em;
}

.dashboard-shell.st-stitch .admin-action-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dashboard-shell.st-stitch .admin-action-buttons form {
  margin: 0;
  display: inline-flex;
}

.dashboard-shell.st-stitch .admin-action-buttons .btn-sm {
  min-height: 1.85rem;
  padding: .25rem .55rem;
  font-size: .72rem;
}

/* Review queue (admin-media-review). */
.dashboard-shell.st-stitch .review-stack {
  display: grid;
  gap: 1rem;
}

.dashboard-shell.st-stitch .review-ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.dashboard-shell.st-stitch .review-card {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.dashboard-shell.st-stitch .review-header,
.dashboard-shell.st-stitch .review-badges {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .review-badges {
  justify-content: flex-end;
}

.dashboard-shell.st-stitch .review-grid {
  display: grid;
  grid-template-columns: minmax(15rem, .85fr) minmax(22rem, 1.25fr) minmax(24rem, 1.35fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1320px) {
  .dashboard-shell.st-stitch .review-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .dashboard-shell.st-stitch .review-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell.st-stitch .review-preview-panel,
.dashboard-shell.st-stitch .review-diff-panel,
.dashboard-shell.st-stitch .review-edit-panel {
  min-width: 0;
  display: grid;
  gap: .85rem;
}

.dashboard-shell.st-stitch .review-preview {
  min-height: 12rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: var(--st-bg);
}

.dashboard-shell.st-stitch .review-preview img,
.dashboard-shell.st-stitch .review-preview video {
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
}

.dashboard-shell.st-stitch .review-preview audio {
  width: min(100% - 2rem, 32rem);
}

.dashboard-shell.st-stitch .review-preview-empty {
  color: var(--st-muted);
  font-size: .875rem;
  padding: 1.25rem;
}

.dashboard-shell.st-stitch .review-file-card {
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

.dashboard-shell.st-stitch .review-file-card span,
.dashboard-shell.st-stitch .review-file-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.dashboard-shell.st-stitch .review-file-card span {
  margin-bottom: .25rem;
  color: var(--st-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .review-file-card strong {
  color: var(--st-text);
  font-size: .92rem;
  font-weight: 600;
}

.dashboard-shell.st-stitch .review-cover-ops {
  display: grid;
  gap: .7rem;
  padding: .85rem .9rem;
  border: 1px solid color-mix(in srgb, var(--st-secondary) 30%, var(--st-border));
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

.dashboard-shell.st-stitch .review-diff-table {
  display: grid;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  overflow: hidden;
}

.dashboard-shell.st-stitch .review-diff-row {
  display: grid;
  grid-template-columns: minmax(8rem, .65fr) minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-shell.st-stitch .review-diff-row > span {
  padding: .65rem .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--st-border) 70%, transparent);
  overflow-wrap: anywhere;
  color: var(--st-text);
}

.dashboard-shell.st-stitch .review-diff-row > span + span {
  border-left: 1px solid color-mix(in srgb, var(--st-border) 70%, transparent);
}

.dashboard-shell.st-stitch .review-diff-row:last-child > span {
  border-bottom: none;
}

.dashboard-shell.st-stitch .review-diff-head > span {
  color: var(--st-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--st-surface-container) 70%, transparent);
}

.dashboard-shell.st-stitch .review-diff-row.is-changed > span:last-child {
  background: color-mix(in srgb, var(--st-secondary) 12%, transparent);
  color: var(--st-text);
}

.dashboard-shell.st-stitch .review-reason {
  padding: .9rem 1rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

.dashboard-shell.st-stitch .review-reason span {
  display: block;
  margin-bottom: .35rem;
  color: var(--st-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .review-reason p {
  margin: 0;
  color: var(--st-text);
  line-height: 1.55;
}

/* Confidence badges (review). */
.dashboard-shell.st-stitch .confidence-high {
  border-color: color-mix(in srgb, var(--st-status-success) 45%, var(--st-border));
  color: var(--st-status-success);
}

.dashboard-shell.st-stitch .confidence-medium {
  border-color: color-mix(in srgb, var(--st-secondary) 45%, var(--st-border));
  color: var(--st-secondary);
}

.dashboard-shell.st-stitch .confidence-low {
  border-color: color-mix(in srgb, var(--st-warning) 45%, var(--st-border));
  color: var(--st-warning);
}

/* Profile / settings layouts. */
.dashboard-shell.st-stitch .profile-header {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.dashboard-shell.st-stitch .profile-avatar {
  width: 6rem;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: var(--st-surface-variant);
  color: var(--st-primary);
  font-size: 2.2rem;
  font-weight: 700;
}

.dashboard-shell.st-stitch .profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-shell.st-stitch .profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.dashboard-shell.st-stitch .profile-media-card {
  display: grid;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
}

.dashboard-shell.st-stitch .audio-player-card,
.dashboard-shell.st-stitch .audio-player-detail {
  display: grid;
  gap: .65rem;
  padding: .85rem .95rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

/* Settings sections. */
.dashboard-shell.st-stitch .settings-section,
.dashboard-shell.st-stitch .profile-card,
.dashboard-shell.st-stitch .settings-page .card {
  margin-bottom: 0;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  display: grid;
  gap: 1rem;
}

.dashboard-shell.st-stitch .settings-grid,
.dashboard-shell.st-stitch .settings-grid.two-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
}

@media (max-width: 640px) {
  .dashboard-shell.st-stitch .settings-grid,
  .dashboard-shell.st-stitch .settings-grid.two-fields {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell.st-stitch .settings-grid .span-2 {
  grid-column: 1 / -1;
}

.dashboard-shell.st-stitch .account-form {
  display: grid;
  gap: 1rem;
}

.dashboard-shell.st-stitch .account-form .form-control,
.dashboard-shell.st-stitch .admin-filter-form .form-control,
.dashboard-shell.st-stitch .admin-user-form .form-control,
.dashboard-shell.st-stitch .settings-grid .form-control {
  background: var(--st-bg);
  border-color: var(--st-border);
  color: var(--st-text);
  font-family: var(--st-font-body);
}

.dashboard-shell.st-stitch .account-form .form-control:focus-visible,
.dashboard-shell.st-stitch .admin-filter-form .form-control:focus-visible,
.dashboard-shell.st-stitch .settings-grid .form-control:focus-visible {
  border-color: var(--st-primary-container);
  box-shadow: var(--st-glow-focus);
}

/* User admin form (admin-user-edit). */
.dashboard-shell.st-stitch .admin-user-form label {
  color: var(--st-on-surface-variant);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Collection pages (collection.php, collection-edit.php). */
.dashboard-shell.st-stitch .collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.dashboard-shell.st-stitch .collection-card {
  display: grid;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
}

.dashboard-shell.st-stitch .collection-cover {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--st-primary-container) 18%, transparent), color-mix(in srgb, var(--st-secondary) 14%, transparent));
  color: var(--st-secondary);
  font-family: var(--st-font-mono);
  font-size: 1.4rem;
  font-weight: 800;
}

.dashboard-shell.st-stitch .collection-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-shell.st-stitch .collection-items,
.dashboard-shell.st-stitch .rename-file-box,
.dashboard-shell.st-stitch .waveform-panel {
  padding: 1rem 1.1rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

.dashboard-shell.st-stitch .collection-role-badge {
  width: fit-content;
  padding: .25rem .5rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full);
  color: var(--st-secondary);
  background: color-mix(in srgb, var(--st-secondary) 12%, transparent);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Page actions row + alerts on st-stitch. */
.dashboard-shell.st-stitch .page-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.dashboard-shell.st-stitch .alert-danger {
  border-color: color-mix(in srgb, var(--st-status-danger) 50%, var(--st-border));
  color: color-mix(in srgb, var(--st-status-danger) 90%, white);
  background: color-mix(in srgb, var(--st-status-danger) 8%, var(--st-panel));
}

.dashboard-shell.st-stitch .alert-success {
  border-color: color-mix(in srgb, var(--st-status-success) 50%, var(--st-border));
  color: color-mix(in srgb, var(--st-status-success) 90%, white);
  background: color-mix(in srgb, var(--st-status-success) 8%, var(--st-panel));
}

/* Checkbox row (account settings). */
.dashboard-shell.st-stitch .check-row {
  color: var(--st-on-surface-variant);
}

/* Media import page uses .page-actions, .admin-form-card, etc. */
.dashboard-shell.st-stitch .admin-form-card {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.dashboard-shell.st-stitch .danger-hint {
  color: color-mix(in srgb, var(--st-status-warning) 85%, var(--st-text));
  font-size: .82rem;
}

/* Empty / muted states. */
.dashboard-shell.st-stitch .muted {
  color: var(--st-muted);
}

/* Permissions notice (voice-lab etc). */
.dashboard-shell.st-stitch .permission-notice {
  max-width: 760px;
  padding: 1rem 1.15rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--st-status-warning) 30%, var(--st-border));
  border-radius: var(--st-radius-xl);
}

/* Phase 3C admin shell offset fix */
/* Bug: the .admin-page class resets margin via the shorthand `margin: 0`, which       */
/* comes AFTER the Phase 3A `margin-left: 16rem` rule. Both rules are at specificity     */
/* (0,3,0); the later rule wins, so margin-left collapses to 0 and main sits under the   */
/* fixed sidebar. We re-assert the shell offset at higher specificity (0,4,0) — direct   */
/* child + .admin-page — so it wins over both conflicting rules.                          */
.dashboard-shell.st-stitch > .dashboard-main.admin-page {
  margin-left: 16rem;
  width: calc(100% - 16rem);
  min-width: 0;
  min-height: 100vh;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch > .dashboard-main.admin-page {
    margin-left: 0;
    width: 100%;
  }
}

/* Phase 3D profile/settings shell offset fix */
/* Same conflict as Phase 3C admin-page, but for .profile-page and .settings-page.        */
/* The .admin-page rule above already won via higher specificity (0,4,0). We extend that   */
/* pattern here for the two remaining classes that are also overridden by the             */
/* Phase 3C `margin: 0` shorthand reset. Same specificity pattern (0,4,0) wins.            */
.dashboard-shell.st-stitch > .dashboard-main.profile-page,
.dashboard-shell.st-stitch > .dashboard-main.settings-page {
  margin-left: 16rem;
  width: calc(100% - 16rem);
  min-width: 0;
  min-height: 100vh;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch > .dashboard-main.profile-page,
  .dashboard-shell.st-stitch > .dashboard-main.settings-page {
    margin-left: 0;
    width: 100%;
  }
}

/* ── 21a. Dashboard Phase 4A: honest control center components ── */
.st-hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .25rem;
}

.st-quick-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.st-tool-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  min-width: 0;
}

.st-tool-card:hover {
  border-color: color-mix(in srgb, var(--st-primary-container) 35%, var(--st-border));
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  color: inherit;
}

.st-tool-card-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  border: 1px solid var(--st-border);
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-surface-container));
  color: var(--st-primary);
  flex-shrink: 0;
}

.st-tool-card-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.st-tool-card-body {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.st-tool-card-title {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.st-tool-card-desc {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .82rem;
  color: var(--st-muted);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-tool-card-foot {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.st-tool-card-arrow {
  color: var(--st-muted);
  font-size: 1rem;
  transition: transform .18s ease, color .18s ease;
}

.st-tool-card:hover .st-tool-card-arrow {
  color: var(--st-primary);
  transform: translateX(2px);
}

.st-admin-teaser {
  padding: 0;
}

.st-admin-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

@media (max-width: 1080px) {
  .st-quick-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .st-quick-create-grid {
    grid-template-columns: 1fr;
  }
  .st-tool-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .st-tool-card-foot {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .st-tool-card-desc {
    white-space: normal;
  }
  .st-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .st-hero-cta .btn {
    width: 100%;
  }
}

/* ── 21. Status terminal / API output compatibility ── */
.status-terminal {
  font-family: var(--st-font-mono);
  font-size: .75rem;
  color: var(--st-muted);
}

body.st-stitch .section-head.is-studio,
body.st-stitch .section-head {
  display: none;
}

/* ── 22. Hero accent, text helpers ── */
.st-text-primary { color: var(--st-primary); }
.st-text-muted { color: var(--st-muted); }
.st-text-success { color: var(--st-status-success); }
.st-text-warning { color: var(--st-status-warning); }
.st-text-danger { color: var(--st-status-danger); }
.st-text-mono { font-family: var(--st-font-mono); letter-spacing: .02em; }

/* ── 23. Hide pending card old style under stitch; pending still works ── */
body.st-stitch .pending-card {
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  padding: 1.25rem;
}

/* ── 24. Detail modal compatibility (still works) ── */
body.st-stitch .media-detail-panel {
  background: var(--st-panel);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

/* ── 25. Pending include block ── */
body.st-stitch .pending-card h2,
body.st-stitch .pending-card p {
  color: var(--st-text);
}

/* ── 26. Music Studio — visual prompt builder (Phase 4) ────────────────── */
.st-music-builder {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem 1.75rem 6rem;
}

.st-music-hero {
  position: relative;
  padding: 2rem 2.25rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--st-glass-shadow);
  overflow: hidden;
}

.st-music-hero-inner {
  position: relative;
  display: grid;
  gap: .5rem;
}

.st-music-hero .kicker {
  color: var(--st-secondary);
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.st-music-hero h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--st-text);
  line-height: 1.05;
}

.st-music-hero-sub {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: 1rem;
  color: var(--st-muted);
  line-height: 1.55;
  max-width: 38rem;
}

.st-music-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.st-music-hero-count {
  font-family: var(--st-font-mono);
  font-size: .69rem;
  letter-spacing: .12em;
  color: var(--st-muted);
  text-transform: uppercase;
}

.st-music-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.st-music-col {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.st-music-col-preview {
  position: sticky;
  top: 4.25rem;
}

.st-panel {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
}

.st-panel-head {
  display: grid;
  gap: .25rem;
}

.st-panel-head h3 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.st-panel-head-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}

.st-panel-hint {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .82rem;
  color: var(--st-muted);
  line-height: 1.45;
}

.st-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .65rem;
}

.st-preset-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
  font-family: inherit;
}

.st-preset-card:hover,
.st-preset-card:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 50%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 8%, var(--st-panel));
  outline: none;
}

.st-preset-card:active {
  transform: translateY(1px);
}

.st-preset-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--st-primary-container) 14%, transparent);
  color: var(--st-primary);
  flex-shrink: 0;
}

.st-preset-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.st-preset-text {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.st-preset-text strong {
  font-family: var(--st-font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--st-text);
}

.st-preset-text span {
  font-family: var(--st-font-body);
  font-size: .76rem;
  color: var(--st-muted);
}

.st-music-instrument-groups {
  display: grid;
  gap: .75rem;
}

.st-music-group-title {
  margin: .5rem 0 0;
  font-family: var(--st-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-secondary);
}

.st-instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .55rem;
}

.st-instrument-card {
  display: grid;
  gap: .35rem;
  padding: .8rem .75rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease, box-shadow .12s ease;
  font-family: inherit;
  position: relative;
}

.st-instrument-card:hover,
.st-instrument-card:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 6%, var(--st-panel));
  outline: none;
}

.st-instrument-card.is-selected {
  border-color: var(--st-primary-container);
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-primary-container) 50%, transparent) inset;
}

.st-instrument-card:active {
  transform: translateY(1px);
}

.st-instrument-card svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--st-text);
}

.st-instrument-card.is-selected svg {
  color: var(--st-primary);
}

.st-instrument-card .st-instrument-name {
  font-family: var(--st-font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--st-text);
}

.st-instrument-card .st-instrument-flavor {
  font-family: var(--st-font-body);
  font-size: .7rem;
  color: var(--st-muted);
  line-height: 1.3;
}

.st-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.st-music-chip {
  padding: .35rem .8rem;
  background: transparent;
  border: 1px solid var(--st-border);
  border-radius: 999px;
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-body);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.st-music-chip:hover,
.st-music-chip:focus-visible {
  background: color-mix(in srgb, var(--st-primary-container) 6%, transparent);
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-primary-container) 40%, var(--st-border));
  outline: none;
}

.st-music-chip.is-selected {
  background: color-mix(in srgb, var(--st-primary-container) 18%, transparent);
  color: var(--st-text);
  border-color: var(--st-primary-container);
}

.st-music-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
}

.st-toggle-group {
  display: inline-flex;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: 999px;
  padding: .2rem;
  gap: .2rem;
}

.st-toggle {
  padding: .35rem .85rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--st-muted);
  font-family: var(--st-font-body);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.st-toggle.is-selected {
  background: color-mix(in srgb, var(--st-primary-container) 20%, transparent);
  color: var(--st-text);
}

.st-prompt-preview-panel {
  gap: 1rem;
}

.st-prompt-preview {
  width: 100%;
  min-height: 9rem;
  padding: 1rem 1.1rem;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  font-family: var(--st-font-mono);
  font-size: .85rem;
  line-height: 1.6;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.st-prompt-preview:focus,
.st-prompt-preview:focus-visible {
  outline: none;
  border-color: var(--st-primary-container);
  box-shadow: var(--st-glow-focus);
}

.st-prompt-preview.is-flash {
  border-color: color-mix(in srgb, var(--st-warning) 60%, var(--st-border));
  animation: st-music-flash .35s ease;
}

@keyframes st-music-flash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-warning) 35%, transparent); }
}

.st-music-preview-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--st-font-mono);
  font-size: .72rem;
  color: var(--st-muted);
  letter-spacing: .02em;
}

.st-music-summary {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

.st-music-summary summary {
  cursor: pointer;
  padding: .65rem .8rem;
  font-family: var(--st-font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--st-text);
  list-style: none;
}

.st-music-summary summary::after {
  content: " +";
  float: right;
  color: var(--st-muted);
}

.st-music-summary[open] summary::after {
  content: " -";
}

.st-music-summary ul {
  margin: 0;
  padding: 0 .8rem .65rem 1.8rem;
  font-family: var(--st-font-body);
  font-size: .8rem;
  color: var(--st-text);
}

.st-music-summary li + li {
  margin-top: .2rem;
}

.st-music-summary-empty {
  list-style: none;
  margin-left: -.6rem;
  color: var(--st-muted);
  font-style: italic;
}

.st-music-preview-actions {
  display: inline-flex;
  gap: .4rem;
}

.st-music-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

.st-music-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.st-music-recent-card {
  display: grid;
  gap: .5rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
}

.st-music-recent-card h4 {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--st-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-music-recent-card audio {
  width: 100%;
}

@media (max-width: 1080px) {
  .st-music-grid {
    grid-template-columns: 1fr;
  }
  .st-music-col-preview {
    position: static;
  }
}

@media (max-width: 640px) {
  .st-music-builder {
    padding: 1rem .85rem 7rem;
  }
  .st-music-hero {
    padding: 1.5rem 1.25rem;
  }
  .st-preset-grid {
    grid-template-columns: 1fr;
  }
  .st-instrument-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-music-recent-grid {
    grid-template-columns: 1fr;
  }
  .st-music-toggle-row {
    flex-direction: column;
    align-items: stretch;
  }
  .st-toggle-group {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════

/* ── 27. Creative Studio Phase 5C — Generator Hub Cards ──────────────── */
.st-generator-hub {
  display: grid;
  gap: 1.25rem;
  width: 100%;
}

.st-generator-head {
  display: grid;
  gap: .25rem;
}

.st-generator-head h3 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.st-generator-head p {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .82rem;
  color: var(--st-muted);
  line-height: 1.45;
}

.st-quick-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .25rem;
}

.st-quick-action-row .st-quick-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: 999px;
  color: var(--st-text);
  font-family: var(--st-font-body);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease, color .15s ease;
}

.st-quick-action-row .st-quick-action:hover,
.st-quick-action-row .st-quick-action:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 8%, var(--st-panel));
  color: var(--st-text);
  outline: none;
}

.st-quick-action-row .st-quick-action:active {
  transform: translateY(1px);
}

.st-quick-action-row .st-quick-action svg {
  width: 1rem;
  height: 1rem;
  color: var(--st-primary);
}

.st-generator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .85rem;
}

.st-generator-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .85rem;
  padding: 1.1rem 1.15rem 1rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .18s ease, transform .15s ease, box-shadow .18s ease;
  min-width: 0;
}

.st-generator-card:hover {
  border-color: color-mix(in srgb, var(--st-primary-container) 40%, var(--st-border));
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: inherit;
}

.st-generator-card:focus-visible {
  outline: none;
  border-color: var(--st-primary-container);
  box-shadow: var(--st-glow-focus);
}

.st-generator-card-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.st-generator-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--st-border);
  background: color-mix(in srgb, var(--st-primary-container) 16%, var(--st-surface-container));
  color: var(--st-primary);
  flex-shrink: 0;
}

.st-generator-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.st-generator-card-title {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.st-generator-card-desc {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .8rem;
  color: var(--st-muted);
  line-height: 1.5;
}

.st-generator-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-top: 1px solid var(--st-border);
  padding-top: .7rem;
}

.st-generator-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--st-font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.st-generator-status .st-generator-status-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--st-status-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-status-success) 25%, transparent);
}

.st-generator-status.is-warning .st-generator-status-dot {
  background: var(--st-status-warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-status-warning) 25%, transparent);
}

.st-generator-status.is-secondary .st-generator-status-dot {
  background: var(--st-secondary-container);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-secondary-container) 25%, transparent);
}

.st-generator-status.is-info .st-generator-status-dot {
  background: var(--st-primary-container);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-primary-container) 25%, transparent);
}

.st-generator-arrow {
  color: var(--st-muted);
  font-size: 1rem;
  transition: transform .18s ease, color .18s ease;
}

.st-generator-card:hover .st-generator-arrow,
.st-generator-card:focus-visible .st-generator-arrow {
  color: var(--st-primary);
  transform: translateX(2px);
}

/* ── 28. Creative Studio Phase 5D — Image Studio Visual Builder ─────── */
.st-image-builder {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem 1.75rem 6rem;
}

.st-image-hero {
  position: relative;
  padding: 2rem 2.25rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--st-glass-shadow);
  overflow: hidden;
}

.st-image-hero-inner {
  display: grid;
  gap: .5rem;
}

.st-image-hero h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--st-text);
  line-height: 1.05;
}

.st-image-hero-sub {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: 1rem;
  color: var(--st-muted);
  line-height: 1.55;
  max-width: 38rem;
}

.st-image-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.st-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.st-image-col {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.st-image-col-preview {
  position: sticky;
  top: 4.25rem;
}

.st-image-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .55rem;
}

.st-image-style-card {
  display: grid;
  gap: .35rem;
  padding: .8rem .75rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
  font-family: inherit;
  min-width: 0;
}

.st-image-style-card:hover,
.st-image-style-card:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 6%, var(--st-panel));
  outline: none;
}

.st-image-style-card.is-selected {
  border-color: var(--st-primary-container);
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-primary-container) 50%, transparent) inset;
}

.st-image-style-card:active {
  transform: translateY(1px);
}

.st-image-style-card svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--st-text);
}

.st-image-style-card.is-selected svg {
  color: var(--st-primary);
}

.st-image-style-card .st-image-style-name {
  font-family: var(--st-font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--st-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-image-style-card .st-image-style-flavor {
  font-family: var(--st-font-body);
  font-size: .7rem;
  color: var(--st-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.st-image-chip {
  padding: .35rem .8rem;
  background: transparent;
  border: 1px solid var(--st-border);
  border-radius: 999px;
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-body);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.st-image-chip:hover,
.st-image-chip:focus-visible {
  background: color-mix(in srgb, var(--st-primary-container) 6%, transparent);
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-primary-container) 40%, var(--st-border));
  outline: none;
}

.st-image-chip.is-selected {
  background: color-mix(in srgb, var(--st-primary-container) 18%, transparent);
  color: var(--st-text);
  border-color: var(--st-primary-container);
}

.st-negative-chip {
  padding: .3rem .7rem;
  background: transparent;
  border: 1px dashed var(--st-border);
  border-radius: 999px;
  color: var(--st-muted);
  font-family: var(--st-font-mono);
  font-size: .72rem;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.st-negative-chip:hover,
.st-negative-chip:focus-visible {
  background: color-mix(in srgb, var(--st-status-danger) 10%, transparent);
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-status-danger) 40%, var(--st-border));
  outline: none;
}

.st-negative-chip.is-selected {
  background: color-mix(in srgb, var(--st-status-danger) 18%, transparent);
  color: var(--st-text);
  border-color: var(--st-status-danger);
  border-style: solid;
}

.st-image-preview-panel {
  gap: 1rem;
}

.st-image-preview-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--st-font-mono);
  font-size: .72rem;
  color: var(--st-muted);
  letter-spacing: .02em;
}

.st-image-summary {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
}

.st-image-summary summary {
  cursor: pointer;
  padding: .65rem .8rem;
  font-family: var(--st-font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--st-text);
  list-style: none;
}

.st-image-summary summary::after {
  content: " +";
  float: right;
  color: var(--st-muted);
}

.st-image-summary[open] summary::after {
  content: " -";
}

.st-image-summary ul {
  margin: 0;
  padding: 0 .8rem .65rem 1.5rem;
  font-family: var(--st-font-body);
  font-size: .8rem;
  color: var(--st-text);
}

.st-image-summary-empty {
  list-style: none;
  margin-left: -.6rem;
  color: var(--st-muted);
  font-style: italic;
}

.st-image-summary li + li {
  margin-top: .2rem;
}

.st-image-preview-actions {
  display: inline-flex;
  gap: .4rem;
}

.st-image-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

@media (max-width: 1080px) {
  .st-image-grid {
    grid-template-columns: 1fr;
  }
  .st-image-col-preview {
    position: static;
  }
}

@media (max-width: 640px) {
  .st-image-builder {
    padding: 1rem .85rem 7rem;
  }
  .st-image-hero {
    padding: 1.5rem 1.25rem;
  }
  .st-image-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 29. Creative Studio Phase 5E — Video Maker Scene Builder ───────── */
.st-video-builder {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem 1.75rem 6rem;
}

.st-video-hero {
  position: relative;
  padding: 2rem 2.25rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--st-glass-shadow);
  overflow: hidden;
}

.st-video-hero-inner {
  display: grid;
  gap: .5rem;
}

.st-video-hero h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--st-text);
  line-height: 1.05;
}

.st-video-hero-sub {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: 1rem;
  color: var(--st-muted);
  line-height: 1.55;
  max-width: 38rem;
}

.st-video-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.st-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.st-video-col {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.st-video-col-preview {
  position: sticky;
  top: 4.25rem;
}

.st-video-grid-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .55rem;
}

.st-scene-card {
  display: grid;
  gap: .35rem;
  padding: .8rem .75rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
  font-family: inherit;
  min-width: 0;
}

.st-scene-card:hover,
.st-scene-card:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 6%, var(--st-panel));
  outline: none;
}

.st-scene-card.is-selected {
  border-color: var(--st-primary-container);
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-primary-container) 50%, transparent) inset;
}

.st-scene-card:active {
  transform: translateY(1px);
}

.st-scene-card svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--st-text);
}

.st-scene-card.is-selected svg {
  color: var(--st-primary);
}

.st-scene-card .st-scene-name {
  font-family: var(--st-font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--st-text);
}

.st-scene-card .st-scene-flavor {
  font-family: var(--st-font-body);
  font-size: .7rem;
  color: var(--st-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.st-motion-chip {
  padding: .35rem .8rem;
  background: transparent;
  border: 1px solid var(--st-border);
  border-radius: 999px;
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-body);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.st-motion-chip:hover,
.st-motion-chip:focus-visible {
  background: color-mix(in srgb, var(--st-primary-container) 6%, transparent);
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-primary-container) 40%, var(--st-border));
  outline: none;
}

.st-motion-chip.is-selected {
  background: color-mix(in srgb, var(--st-primary-container) 18%, transparent);
  color: var(--st-text);
  border-color: var(--st-primary-container);
}

.st-video-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .55rem;
}

.st-video-media-card {
  position: relative;
  display: grid;
  gap: .35rem;
  padding: .55rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  font-family: inherit;
  min-width: 0;
}

.st-video-media-card:hover,
.st-video-media-card:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 6%, var(--st-panel));
  outline: none;
}

.st-video-media-card.is-selected {
  border-color: var(--st-primary-container);
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-panel));
}

.st-video-media-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  overflow: hidden;
}

.st-video-media-thumb img,
.st-video-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-video-media-thumb .st-video-media-icon {
  color: var(--st-muted);
  width: 1.4rem;
  height: 1.4rem;
}

.st-video-media-title {
  font-family: var(--st-font-body);
  font-size: .74rem;
  color: var(--st-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-video-media-empty {
  display: grid;
  place-items: center;
  gap: .25rem;
  padding: 1rem;
  text-align: center;
  color: var(--st-muted);
  font-family: var(--st-font-body);
  font-size: .8rem;
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius);
  background: color-mix(in srgb, var(--st-panel) 60%, transparent);
}

.st-video-preview-panel {
  gap: 1rem;
}

.st-video-summary {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: color-mix(in srgb, var(--st-panel) 70%, transparent);
  padding: .8rem .85rem;
  display: grid;
  gap: .35rem;
}

.st-video-summary-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-family: var(--st-font-body);
  font-size: .82rem;
  color: var(--st-text);
}

.st-video-summary-row span:first-child {
  color: var(--st-muted);
  font-family: var(--st-font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.st-video-summary-row span:last-child {
  color: var(--st-text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-video-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

@media (max-width: 1080px) {
  .st-video-grid {
    grid-template-columns: 1fr;
  }
  .st-video-col-preview {
    position: static;
  }
}

@media (max-width: 640px) {
  .st-video-builder {
    padding: 1rem .85rem 7rem;
  }
  .st-video-hero {
    padding: 1.5rem 1.25rem;
  }
  .st-video-grid-scenes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-video-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 30. Creative Studio Phase 6A — Unified Create Flow ────────────── */
.st-create-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .7rem .85rem;
  margin: 0 0 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  font-family: var(--st-font-body);
}

.st-create-flow-label {
  font-family: var(--st-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-muted);
  margin-right: .25rem;
  padding-right: .55rem;
  border-right: 1px solid var(--st-border);
}

.st-create-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-create-flow-step {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--st-border);
  background: transparent;
  color: var(--st-on-surface-variant);
  font-family: var(--st-font-body);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.st-create-flow-step:hover,
.st-create-flow-step:focus-visible {
  background: color-mix(in srgb, var(--st-primary-container) 6%, transparent);
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-primary-container) 40%, var(--st-border));
  outline: none;
}

.st-create-flow-step .st-create-flow-step-num {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  font-family: var(--st-font-mono);
  font-size: .65rem;
  color: var(--st-muted);
}

.st-create-flow-step.is-active {
  background: color-mix(in srgb, var(--st-primary-container) 18%, transparent);
  color: var(--st-text);
  border-color: var(--st-primary-container);
}

.st-create-flow-step.is-active .st-create-flow-step-num {
  background: var(--st-primary-container);
  color: #FFFFFF;
  border-color: var(--st-primary-container);
}

.st-create-flow-step.is-done {
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-secondary-container) 40%, var(--st-border));
}

.st-create-flow-step.is-done .st-create-flow-step-num {
  background: var(--st-secondary-container);
  color: #FFFFFF;
  border-color: var(--st-secondary-container);
}

.st-create-flow-sep {
  width: .65rem;
  height: 1px;
  background: var(--st-border);
  display: inline-block;
}

.st-create-flow-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.st-create-flow-cta .btn {
  padding: .35rem .75rem;
  font-size: .78rem;
}

@media (max-width: 760px) {
  .st-create-flow {
    padding: .55rem .7rem;
  }
  .st-create-flow-label {
    flex-basis: 100%;
    border-right: none;
    border-bottom: 1px solid var(--st-border);
    padding-right: 0;
    padding-bottom: .35rem;
    margin-bottom: .25rem;
  }
  .st-create-flow-cta {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ── 31. Creative Studio Phase 6B — Shared Campaign Presets ───────── */
.st-campaign-presets {
  display: grid;
  gap: 1rem;
}

.st-campaign-presets-head {
  display: grid;
  gap: .25rem;
}

.st-campaign-presets-head h3 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.st-campaign-presets-head p {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .82rem;
  color: var(--st-muted);
  line-height: 1.45;
}

.st-campaign-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .65rem;
}

.st-campaign-preset-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: .5rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--st-panel) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  font-family: inherit;
  position: relative;
  min-width: 0;
}

.st-campaign-preset-card:hover,
.st-campaign-preset-card:focus-visible {
  border-color: color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  background: color-mix(in srgb, var(--st-primary-container) 8%, var(--st-panel));
  outline: none;
}

.st-campaign-preset-card:active {
  transform: translateY(1px);
}

.st-campaign-preset-card.is-active {
  border-color: var(--st-primary-container);
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-primary-container) 50%, transparent) inset;
}

.st-campaign-preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.st-campaign-preset-title {
  font-family: var(--st-font-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--st-text);
}

.st-campaign-preset-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--st-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st-secondary-container) 18%, transparent);
  color: var(--st-text);
  border: 1px solid color-mix(in srgb, var(--st-secondary-container) 35%, var(--st-border));
}

.st-campaign-preset-summary {
  font-family: var(--st-font-body);
  font-size: .76rem;
  color: var(--st-muted);
  line-height: 1.45;
}

.st-campaign-preset-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.st-campaign-preset-meta span {
  font-family: var(--st-font-mono);
  font-size: .66rem;
  letter-spacing: .04em;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  color: var(--st-muted);
}

.st-campaign-preset-card.is-active .st-campaign-preset-meta span {
  color: var(--st-text);
  border-color: color-mix(in srgb, var(--st-primary-container) 35%, var(--st-border));
}

/* Active preset banner */
.st-active-preset-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .85rem 1rem;
  margin: 0 0 1.25rem;
  background: color-mix(in srgb, var(--st-primary-container) 14%, var(--st-panel));
  border: 1px solid color-mix(in srgb, var(--st-primary-container) 45%, var(--st-border));
  border-radius: var(--st-radius-lg);
  font-family: var(--st-font-body);
}

.st-active-preset-banner-mark {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: var(--st-primary-container);
  color: #FFFFFF;
  flex-shrink: 0;
}

.st-active-preset-banner-mark svg {
  width: .95rem;
  height: .95rem;
}

.st-active-preset-banner-text {
  display: grid;
  gap: .15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.st-active-preset-banner-text strong {
  font-family: var(--st-font-headline);
  font-size: .92rem;
  font-weight: 600;
  color: var(--st-text);
}

.st-active-preset-banner-text span {
  font-family: var(--st-font-body);
  font-size: .78rem;
  color: var(--st-muted);
}

.st-active-preset-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.st-active-preset-banner-actions .btn {
  padding: .3rem .65rem;
  font-size: .76rem;
}

/* Inline compact selector for studio pages */
.st-campaign-preset-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.st-campaign-preset-inline .st-campaign-preset-card {
  grid-template-rows: auto auto;
  padding: .65rem .8rem;
  gap: .35rem;
  font-size: .82rem;
}

.st-campaign-preset-inline .st-campaign-preset-title {
  font-size: .85rem;
}

.st-campaign-preset-inline .st-campaign-preset-summary,
.st-campaign-preset-inline .st-campaign-preset-meta {
  display: none;
}

@media (max-width: 640px) {
  .st-campaign-preset-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Phase 8G.2 — Admin Billing UI refresh
   Scoped to dashboard-shell.st-stitch so we do not bleed into
   the public marketing pages (pricing/billing).
   - admin-page-header / admin-status-bar
   - billing-stat-card (stat-card with icon)
   - billing-section / form-section
   - safety-panel / safety-list
   - plan-card / plan-card-grid
   - responsive-table (mobile card fallback)
   - empty-state / form-actions-sticky
   ───────────────────────────────────────────────────────────── */

.dashboard-shell.st-stitch .admin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem .25rem .35rem;
}

.dashboard-shell.st-stitch .admin-page-title-block {
  display: grid;
  gap: .25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-shell.st-stitch .admin-page-kicker {
  margin: 0;
  font-family: var(--st-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--st-secondary);
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .admin-page-title {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--st-text);
  line-height: 1.15;
}

.dashboard-shell.st-stitch .admin-page-subtitle {
  margin: 0;
  font-family: var(--st-font-body);
  font-size: .92rem;
  color: var(--st-muted);
  max-width: 60rem;
  line-height: 1.5;
}

.dashboard-shell.st-stitch .admin-page-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .admin-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .25rem;
  padding: 0;
}

.dashboard-shell.st-stitch .admin-status-bar .status-pill {
  font-size: .7rem;
}

.dashboard-shell.st-stitch .admin-status-bar .status-pill svg {
  width: .65rem;
  height: .65rem;
}

/* Stat card with icon (extends .stat-card) */
.dashboard-shell.st-stitch .billing-stat-card {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .85rem;
  align-items: center;
  padding: 1rem 1.15rem;
}

.dashboard-shell.st-stitch .billing-stat-card .billing-stat-body {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .billing-stat-card .stat-card-label {
  color: var(--st-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .billing-stat-card strong {
  color: var(--st-text);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch .billing-stat-card .stat-card-hint {
  color: var(--st-muted);
  font-size: .72rem;
  margin-top: .15rem;
}

.dashboard-shell.st-stitch .billing-stat-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--st-radius-md);
  background: color-mix(in srgb, var(--info) 18%, var(--st-glass-bg));
  color: var(--info);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .billing-stat-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.dashboard-shell.st-stitch .billing-stat-icon.is-success {
  background: color-mix(in srgb, var(--success) 18%, var(--st-glass-bg));
  color: var(--success);
}

.dashboard-shell.st-stitch .billing-stat-icon.is-warning {
  background: color-mix(in srgb, var(--warning) 22%, var(--st-glass-bg));
  color: var(--warning);
}

.dashboard-shell.st-stitch .billing-stat-icon.is-danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--st-glass-bg));
  color: var(--danger);
}

.dashboard-shell.st-stitch .billing-stat-icon.is-neutral {
  background: color-mix(in srgb, var(--st-muted) 18%, var(--st-glass-bg));
  color: var(--st-muted);
}

/* Section panel (page-level card variant) */
.dashboard-shell.st-stitch .billing-section {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  margin-bottom: .25rem;
}

.dashboard-shell.st-stitch .billing-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
}

.dashboard-shell.st-stitch .billing-section-head .head-title-block {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .billing-section-head .head-kicker {
  margin: 0;
  font-family: var(--st-font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--st-secondary);
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .billing-section-head h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--st-text);
}

.dashboard-shell.st-stitch .billing-section-head p {
  margin: .15rem 0 0;
  color: var(--st-muted);
  font-size: .85rem;
  line-height: 1.45;
}

.dashboard-shell.st-stitch .billing-section-head .head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Form sub-section */
.dashboard-shell.st-stitch .form-section {
  display: grid;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-glass-bg) 45%, transparent);
}

.dashboard-shell.st-stitch .form-section + .form-section {
  margin-top: .25rem;
}

.dashboard-shell.st-stitch .form-section-head {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.dashboard-shell.st-stitch .form-section-icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--st-radius-md);
  background: color-mix(in srgb, var(--info) 18%, var(--st-glass-bg));
  color: var(--info);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .form-section-icon svg {
  width: .9rem;
  height: .9rem;
}

.dashboard-shell.st-stitch .form-section-icon.is-success {
  background: color-mix(in srgb, var(--success) 18%, var(--st-glass-bg));
  color: var(--success);
}

.dashboard-shell.st-stitch .form-section-icon.is-warning {
  background: color-mix(in srgb, var(--warning) 22%, var(--st-glass-bg));
  color: var(--warning);
}

.dashboard-shell.st-stitch .form-section-icon.is-danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--st-glass-bg));
  color: var(--danger);
}

.dashboard-shell.st-stitch .form-section-icon.is-neutral {
  background: color-mix(in srgb, var(--st-muted) 18%, var(--st-glass-bg));
  color: var(--st-muted);
}

.dashboard-shell.st-stitch .form-section-head h3 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: .95rem;
  font-weight: 600;
  color: var(--st-text);
  letter-spacing: -.005em;
}

.dashboard-shell.st-stitch .form-section-head .form-section-hint {
  margin: 0 0 0 auto;
  font-size: .75rem;
  color: var(--st-muted);
  font-family: var(--st-font-body);
}

.dashboard-shell.st-stitch .form-section .form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.dashboard-shell.st-stitch .form-section .form-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

.dashboard-shell.st-stitch .form-section label {
  display: grid;
  gap: .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--st-muted);
  letter-spacing: .02em;
  min-width: 0;
}

.dashboard-shell.st-stitch .form-section .form-help {
  font-size: .72rem;
  font-weight: 400;
  color: var(--st-muted);
  letter-spacing: 0;
  font-family: var(--st-font-body);
}

.dashboard-shell.st-stitch .form-section .form-checkbox-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--st-text);
  letter-spacing: 0;
  padding: .4rem .55rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  background: color-mix(in srgb, var(--st-glass-bg) 50%, transparent);
}

.dashboard-shell.st-stitch .form-section .form-checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--info);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .form-section .form-checkbox-row .checkbox-hint {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--st-muted);
  margin-top: .1rem;
}

.dashboard-shell.st-stitch .form-section.span-2 {
  grid-column: span 2;
}

@media (max-width: 720px) {
  .dashboard-shell.st-stitch .form-section .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .dashboard-shell.st-stitch .form-section.span-2 {
    grid-column: auto;
  }
}

/* Form actions (bottom row) */
.dashboard-shell.st-stitch .form-actions-sticky {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: .85rem;
  border-top: 1px solid var(--st-border);
  margin-top: .35rem;
}

.dashboard-shell.st-stitch .form-actions-sticky .form-actions-left {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.dashboard-shell.st-stitch .form-actions-sticky .form-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-left: auto;
}

.dashboard-shell.st-stitch .form-actions-sticky .form-actions-hint {
  color: var(--st-muted);
  font-size: .78rem;
}

/* Safety panel */
.dashboard-shell.st-stitch .safety-panel {
  display: grid;
  gap: .85rem;
  padding: 1.15rem 1.25rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-left: 4px solid color-mix(in srgb, var(--warning) 70%, var(--st-border));
  border-radius: var(--st-radius-xl);
  margin-bottom: .25rem;
}

.dashboard-shell.st-stitch .safety-panel.is-success {
  border-left-color: color-mix(in srgb, var(--success) 70%, var(--st-border));
}

.dashboard-shell.st-stitch .safety-panel.is-danger {
  border-left-color: color-mix(in srgb, var(--danger) 70%, var(--st-border));
}

.dashboard-shell.st-stitch .safety-panel-head {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.dashboard-shell.st-stitch .safety-panel-head .safety-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--st-radius-md);
  background: color-mix(in srgb, var(--warning) 22%, var(--st-glass-bg));
  color: var(--warning);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .safety-panel.is-success .safety-panel-head .safety-icon {
  background: color-mix(in srgb, var(--success) 22%, var(--st-glass-bg));
  color: var(--success);
}

.dashboard-shell.st-stitch .safety-panel.is-danger .safety-panel-head .safety-icon {
  background: color-mix(in srgb, var(--danger) 22%, var(--st-glass-bg));
  color: var(--danger);
}

.dashboard-shell.st-stitch .safety-panel-head .safety-icon svg {
  width: 1rem;
  height: 1rem;
}

.dashboard-shell.st-stitch .safety-panel-head h2 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--st-text);
}

.dashboard-shell.st-stitch .safety-list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-shell.st-stitch .safety-list li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .55rem;
  align-items: start;
  font-size: .88rem;
  color: var(--st-text);
  line-height: 1.5;
}

.dashboard-shell.st-stitch .safety-list li svg {
  width: 1rem;
  height: 1rem;
  color: var(--st-muted);
  margin-top: .15rem;
}

.dashboard-shell.st-stitch .safety-list li strong {
  color: var(--st-text);
  font-weight: 600;
}

.dashboard-shell.st-stitch .safety-list li code {
  font-size: .82rem;
}

/* Plan card grid */
.dashboard-shell.st-stitch .plan-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

.dashboard-shell.st-stitch .plan-card {
  display: grid;
  gap: .85rem;
  padding: 1.1rem 1.2rem;
  background: var(--st-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-xl);
  position: relative;
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-card.is-inactive {
  opacity: .82;
}

.dashboard-shell.st-stitch .plan-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
}

.dashboard-shell.st-stitch .plan-card-head .plan-card-name-block {
  min-width: 0;
  display: grid;
  gap: .25rem;
}

.dashboard-shell.st-stitch .plan-card-head .plan-card-name {
  font-family: var(--st-font-headline);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--st-text);
  letter-spacing: -.005em;
  margin: 0;
}

.dashboard-shell.st-stitch .plan-card-head .plan-card-code {
  font-family: var(--st-font-mono);
  font-size: .72rem;
  color: var(--st-muted);
  letter-spacing: .02em;
  word-break: break-all;
}

.dashboard-shell.st-stitch .plan-card-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .plan-card-price-row {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .plan-card-price-row .plan-price-amount {
  font-family: var(--st-font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--st-text);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch .plan-card-price-row .plan-price-interval {
  color: var(--st-muted);
  font-size: .82rem;
  letter-spacing: .02em;
}

.dashboard-shell.st-stitch .plan-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .55rem .85rem;
}

.dashboard-shell.st-stitch .plan-card-meta .meta-item {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-card-meta .meta-item .meta-label {
  font-size: .62rem;
  font-weight: 700;
  color: var(--st-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .plan-card-meta .meta-item .meta-value {
  font-size: .92rem;
  color: var(--st-text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.dashboard-shell.st-stitch .plan-card-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
  font-size: .85rem;
  color: var(--st-muted);
}

.dashboard-shell.st-stitch .plan-card-features li {
  display: grid;
  grid-template-columns: .9rem 1fr;
  gap: .35rem;
  align-items: start;
}

.dashboard-shell.st-stitch .plan-card-features li svg {
  width: .85rem;
  height: .85rem;
  color: var(--success);
  margin-top: .15rem;
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .plan-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: 1px solid var(--st-border);
  padding-top: .85rem;
}

.dashboard-shell.st-stitch .plan-card-actions form {
  margin: 0;
}

.dashboard-shell.st-stitch .plan-card-actions .row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Empty state */
.dashboard-shell.st-stitch .empty-state {
  display: grid;
  place-items: center;
  gap: .55rem;
  padding: 2rem 1rem;
  color: var(--st-muted);
  text-align: center;
}

.dashboard-shell.st-stitch .empty-state .empty-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--st-radius-lg);
  background: color-mix(in srgb, var(--st-muted) 18%, var(--st-glass-bg));
  color: var(--st-muted);
}

.dashboard-shell.st-stitch .empty-state .empty-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.dashboard-shell.st-stitch .empty-state .empty-title {
  font-weight: 600;
  color: var(--st-text);
  font-size: .95rem;
}

.dashboard-shell.st-stitch .empty-state .empty-text {
  font-size: .85rem;
  max-width: 32rem;
  color: var(--st-muted);
}

/* Responsive table (mobile card fallback) */
.dashboard-shell.st-stitch .responsive-table {
  width: 100%;
}

@media (max-width: 760px) {
  .dashboard-shell.st-stitch .responsive-table thead {
    display: none;
  }

  .dashboard-shell.st-stitch .responsive-table tbody tr {
    display: grid;
    gap: .35rem;
    padding: .85rem 1rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    background: color-mix(in srgb, var(--st-glass-bg) 50%, transparent);
    margin-bottom: .65rem;
  }

  .dashboard-shell.st-stitch .responsive-table tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) 1fr;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem 0;
    border: none;
    font-size: .85rem;
    min-width: 0;
  }

  .dashboard-shell.st-stitch .responsive-table tbody td::before {
    content: attr(data-label);
    color: var(--st-muted);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .dashboard-shell.st-stitch .responsive-table tbody td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .dashboard-shell.st-stitch .responsive-table tbody td[data-cell="actions"] {
    grid-template-columns: 1fr;
    gap: .4rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--st-border);
    margin-top: .25rem;
  }

  .dashboard-shell.st-stitch .responsive-table tbody td[data-cell="actions"]::before {
    display: none;
  }

  .dashboard-shell.st-stitch .responsive-table tbody td[data-cell="actions"] .row-actions {
    width: 100%;
  }
}

/* Plan group header (subsections inside catalog) */
.dashboard-shell.st-stitch .plan-group {
  display: grid;
  gap: .85rem;
  margin-bottom: 1.25rem;
}

.dashboard-shell.st-stitch .plan-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0 .25rem;
}

.dashboard-shell.st-stitch .plan-group-head .plan-group-icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--st-radius-md);
  background: color-mix(in srgb, var(--info) 18%, var(--st-glass-bg));
  color: var(--info);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .plan-group-head .plan-group-icon svg {
  width: .9rem;
  height: .9rem;
}

.dashboard-shell.st-stitch .plan-group-head .plan-group-icon.is-success {
  background: color-mix(in srgb, var(--success) 18%, var(--st-glass-bg));
  color: var(--success);
}

.dashboard-shell.st-stitch .plan-group-head .plan-group-icon.is-warning {
  background: color-mix(in srgb, var(--warning) 22%, var(--st-glass-bg));
  color: var(--warning);
}

.dashboard-shell.st-stitch .plan-group-head .plan-group-icon.is-neutral {
  background: color-mix(in srgb, var(--st-muted) 18%, var(--st-glass-bg));
  color: var(--st-muted);
}

.dashboard-shell.st-stitch .plan-group-head h3 {
  margin: 0;
  font-family: var(--st-font-headline);
  font-size: 1rem;
  font-weight: 600;
  color: var(--st-text);
}

.dashboard-shell.st-stitch .plan-group-head .plan-group-count {
  color: var(--st-muted);
  font-size: .78rem;
  font-family: var(--st-font-body);
}

/* Page-level header responsive */
@media (max-width: 720px) {
  .dashboard-shell.st-stitch .admin-page-header {
    align-items: flex-start;
  }

  .dashboard-shell.st-stitch .admin-page-actions {
    width: 100%;
  }

  .dashboard-shell.st-stitch .billing-stat-card {
    grid-template-columns: 2rem 1fr;
    gap: .65rem;
    padding: .85rem .9rem;
  }

  .dashboard-shell.st-stitch .billing-stat-icon {
    width: 2rem;
    height: 2rem;
  }

  .dashboard-shell.st-stitch .billing-stat-card strong {
    font-size: 1.2rem;
  }
}

/* Status bar small dot pulse */
.dashboard-shell.st-stitch .status-pill .status-dot.is-pulse {
  animation: zapsoc-status-pulse 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────
   Phase 8G.3 — Admin Billing UI redesign
   Scoped to dashboard-shell.st-stitch. Do not bleed into public
   pricing / billing pages.
   - plans-admin / billing-admin (page-level wrappers)
   - metrics-row / metric-card (compact stat strip, 5–7 cards)
   - plans-shell / plans-layout (split: catalog + editor)
   - plans-catalog / plan-group / plan-list / plan-row
   - plans-editor / editor-panel / editor-form
   - feature-chip (compact feature rendering)
   - billing-grid / kv-strip / kv-list / safety-strip
   - compact-table (denser table variant)
   ───────────────────────────────────────────────────────────── */

/* Design tokens (admin-only). Scoped, low-specificity. */
.dashboard-shell.st-stitch {
  --billing-space-1: 4px;
  --billing-space-2: 8px;
  --billing-space-3: 12px;
  --billing-space-4: 16px;
  --billing-space-5: 24px;
  --billing-radius-sm: 6px;
  --billing-radius-md: 10px;
  --billing-radius-lg: 14px;
}

/* ── Header (override, slightly tighter than 8G.2) ── */
.dashboard-shell.st-stitch .admin-page-header {
  padding: .15rem .1rem .25rem;
  margin-bottom: .5rem;
  gap: .75rem;
}

.dashboard-shell.st-stitch .admin-page-title {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.15;
}

.dashboard-shell.st-stitch .admin-page-subtitle {
  font-size: .85rem;
  max-width: 60rem;
  line-height: 1.4;
}

/* ── Metrics row: compact horizontal stat strip ── */
.dashboard-shell.st-stitch .metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: .5rem;
  margin: 0 0 .75rem;
}

.dashboard-shell.st-stitch .metric-card {
  display: grid;
  gap: .15rem;
  padding: .65rem .8rem;
  background: var(--st-glass-bg, var(--panel));
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-md);
  min-width: 0;
  position: relative;
}

.dashboard-shell.st-stitch .metric-card .metric-label {
  color: var(--st-muted, var(--muted));
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .metric-card .metric-value {
  color: var(--st-text, var(--text));
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  word-break: break-word;
}

.dashboard-shell.st-stitch .metric-card .metric-hint {
  color: var(--st-muted, var(--muted));
  font-size: .68rem;
  line-height: 1.3;
}

.dashboard-shell.st-stitch .metric-card.is-success {
  border-color: color-mix(in srgb, var(--success) 30%, var(--st-border, var(--border)));
}
.dashboard-shell.st-stitch .metric-card.is-info {
  border-color: color-mix(in srgb, var(--info) 30%, var(--st-border, var(--border)));
}
.dashboard-shell.st-stitch .metric-card.is-warning {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--st-border, var(--border)));
}
.dashboard-shell.st-stitch .metric-card.is-danger {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--st-border, var(--border)));
}

.dashboard-shell.st-stitch .metric-card-compact .metric-value {
  font-size: 1rem;
}

/* ── Plans layout (split: catalog + editor) ── */
.dashboard-shell.st-stitch .plans-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .dashboard-shell.st-stitch .plans-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Plan catalog ── */
.dashboard-shell.st-stitch .plans-catalog {
  display: grid;
  gap: .75rem;
  background: var(--st-glass-bg, var(--panel));
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-lg);
  padding: .9rem 1rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .plans-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--st-border, var(--border));
}

.dashboard-shell.st-stitch .plans-catalog-title {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--st-text, var(--text));
  letter-spacing: -.005em;
}

.dashboard-shell.st-stitch .plans-catalog-sub {
  margin: .1rem 0 0;
  font-size: .75rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plans-catalog-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.dashboard-shell.st-stitch .plans-foot {
  margin: .5rem 0 0;
  font-size: .75rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plans-empty {
  padding: 1.5rem 1rem;
}

/* ── Plan group (subsections inside catalog) ── */
.dashboard-shell.st-stitch .plan-group {
  display: grid;
  gap: .4rem;
  margin-top: .35rem;
}

.dashboard-shell.st-stitch .plan-group-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: 0;
}

.dashboard-shell.st-stitch .plan-group-head h3 {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: .8rem;
  font-weight: 700;
  color: var(--st-muted, var(--muted));
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .plan-group-count {
  color: var(--st-muted, var(--muted));
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* ── Plan list (desktop table-style rows) ── */
.dashboard-shell.st-stitch .plan-list-mobile {
  display: none;
}

.dashboard-shell.st-stitch .plan-list-desktop {
  display: grid;
  gap: 0;
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--st-glass-bg, var(--panel)) 60%, transparent);
}

.dashboard-shell.st-stitch .plan-list-head,
.dashboard-shell.st-stitch .plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr) minmax(0, .8fr) minmax(0, .55fr) minmax(0, .85fr) minmax(0, .9fr);
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
}

.dashboard-shell.st-stitch .plan-list-head {
  background: color-mix(in srgb, var(--st-glass-bg, var(--panel)) 100%, transparent);
  border-bottom: 1px solid var(--st-border, var(--border));
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plan-row {
  border-top: 1px solid var(--st-border, var(--border));
  transition: background .12s ease;
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-row:first-of-type {
  border-top: none;
}

.dashboard-shell.st-stitch .plan-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.dashboard-shell.st-stitch .plan-row.is-selected {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.dashboard-shell.st-stitch .plan-row.is-inactive {
  opacity: .7;
}

.dashboard-shell.st-stitch .plan-col-name {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-row-link {
  display: grid;
  gap: .05rem;
  color: var(--st-text, var(--text));
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-row-name {
  font-weight: 600;
  font-size: .92rem;
  color: var(--st-text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell.st-stitch .plan-row-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .68rem;
  color: var(--st-muted, var(--muted));
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell.st-stitch .plan-row-desc {
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28rem;
}

.dashboard-shell.st-stitch .plan-row-features {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .15rem;
}

.dashboard-shell.st-stitch .plan-col-type {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.dashboard-shell.st-stitch .plan-col-price {
  display: grid;
  gap: .05rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-row-price {
  font-weight: 600;
  font-size: .9rem;
  color: var(--st-text, var(--text));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-shell.st-stitch .plan-row-interval {
  font-size: .68rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plan-col-credits {
  font-variant-numeric: tabular-nums;
  color: var(--st-text, var(--text));
  font-size: .88rem;
}

.dashboard-shell.st-stitch .plan-col-status {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.dashboard-shell.st-stitch .plan-col-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  justify-content: flex-end;
}

.dashboard-shell.st-stitch .plan-col-actions .inline-form {
  margin: 0;
}

@media (max-width: 980px) {
  .dashboard-shell.st-stitch .plan-list-head,
  .dashboard-shell.st-stitch .plan-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1fr);
  }
  .dashboard-shell.st-stitch .plan-col-credits,
  .dashboard-shell.st-stitch .plan-col-status {
    display: none;
  }
}

@media (max-width: 760px) {
  .dashboard-shell.st-stitch .plan-list-desktop {
    display: none;
  }
  .dashboard-shell.st-stitch .plan-list-mobile {
    display: grid;
    gap: .5rem;
  }
}

/* ── Mobile plan cards (compact) ── */
.dashboard-shell.st-stitch .plan-mobile-card {
  display: grid;
  gap: .5rem;
  padding: .75rem .85rem;
  background: var(--st-glass-bg, var(--panel));
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-md);
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-mobile-card.is-inactive {
  opacity: .75;
}

.dashboard-shell.st-stitch .plan-mobile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.dashboard-shell.st-stitch .plan-mobile-name-block {
  display: grid;
  gap: .05rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .plan-mobile-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--st-text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell.st-stitch .plan-mobile-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .7rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plan-mobile-price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--st-text, var(--text));
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch .plan-mobile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.dashboard-shell.st-stitch .plan-mobile-desc {
  margin: 0;
  font-size: .8rem;
  color: var(--st-muted, var(--muted));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-shell.st-stitch .plan-mobile-features {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.dashboard-shell.st-stitch .plan-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  border-top: 1px solid var(--st-border, var(--border));
  padding-top: .5rem;
}

.dashboard-shell.st-stitch .plan-mobile-actions .inline-form {
  margin: 0;
}

/* ── Feature chip (compact, defensive rendering) ── */
.dashboard-shell.st-stitch .feature-chip {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--st-text, var(--text));
  background: color-mix(in srgb, var(--info) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 26%, var(--st-border, var(--border)));
  border-radius: 999px;
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell.st-stitch .feature-chip.is-muted {
  color: var(--st-muted, var(--muted));
  background: color-mix(in srgb, var(--st-muted) 10%, transparent);
  border-color: color-mix(in srgb, var(--st-muted) 24%, var(--st-border, var(--border)));
}

/* ── Editor (inspector) ── */
.dashboard-shell.st-stitch .plans-editor {
  min-width: 0;
}

.dashboard-shell.st-stitch .editor-panel {
  background: var(--st-glass-bg, var(--panel));
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-lg);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .75rem;
  position: sticky;
  top: 1rem;
}

.dashboard-shell.st-stitch .editor-panel-empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
}

.dashboard-shell.st-stitch .editor-panel-empty .editor-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--billing-radius-md);
  background: color-mix(in srgb, var(--info) 18%, transparent);
  color: var(--info);
}

.dashboard-shell.st-stitch .editor-panel-empty .editor-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.dashboard-shell.st-stitch .editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--st-border, var(--border));
}

.dashboard-shell.st-stitch .editor-kicker {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-secondary, var(--muted));
}

.dashboard-shell.st-stitch .editor-title {
  margin: .1rem 0 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--st-text, var(--text));
  letter-spacing: -.005em;
}

.dashboard-shell.st-stitch .editor-sub {
  margin: .1rem 0 0;
  font-size: .78rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .editor-alert {
  margin: 0;
  padding: .5rem .7rem;
  font-size: .82rem;
}

.dashboard-shell.st-stitch .editor-form {
  display: grid;
  gap: .6rem;
}

.dashboard-shell.st-stitch .editor-section {
  display: grid;
  gap: .35rem;
  padding: .55rem .65rem;
  background: color-mix(in srgb, var(--st-glass-bg, var(--panel)) 40%, transparent);
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-md);
}

.dashboard-shell.st-stitch .editor-section-title {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.dashboard-shell.st-stitch .editor-grid label {
  display: grid;
  gap: .2rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--st-muted, var(--muted));
  min-width: 0;
}

.dashboard-shell.st-stitch .editor-grid .form-control {
  font-size: .85rem;
  padding: .35rem .55rem;
}

.dashboard-shell.st-stitch .editor-grid-full {
  grid-column: 1 / -1;
}

.dashboard-shell.st-stitch .editor-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}

.dashboard-shell.st-stitch .editor-toggle-row .form-checkbox-row {
  padding: .3rem .5rem;
  font-size: .8rem;
  gap: .4rem;
}

.dashboard-shell.st-stitch .editor-toggle-row .checkbox-hint {
  font-size: .68rem;
}

.dashboard-shell.st-stitch .editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .35rem;
  border-top: 1px solid var(--st-border, var(--border));
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .editor-actions .form-help {
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
}

@media (max-width: 720px) {
  .dashboard-shell.st-stitch .editor-grid,
  .dashboard-shell.st-stitch .editor-toggle-row {
    grid-template-columns: 1fr;
  }
  .dashboard-shell.st-stitch .editor-panel {
    position: static;
  }
}

/* ── Button icon (inline svg, kept tiny) ── */
.dashboard-shell.st-stitch .btn-icon {
  display: inline-grid;
  place-items: center;
  width: .95rem;
  height: .95rem;
  margin-right: .25rem;
  vertical-align: -2px;
}

.dashboard-shell.st-stitch .btn-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Billing grid (revenue page 2-col dashboard) ── */
.dashboard-shell.st-stitch .billing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .85rem;
  margin-bottom: .85rem;
}

@media (max-width: 1100px) {
  .dashboard-shell.st-stitch .billing-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell.st-stitch .billing-section {
  display: grid;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--st-glass-bg, var(--panel));
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-lg);
  min-width: 0;
}

.dashboard-shell.st-stitch .billing-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--st-border, var(--border));
}

.dashboard-shell.st-stitch .billing-section-head > div {
  min-width: 0;
}

.dashboard-shell.st-stitch .billing-section-head h2 {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1rem;
  font-weight: 600;
  color: var(--st-text, var(--text));
  letter-spacing: -.005em;
}

.dashboard-shell.st-stitch .billing-section-head p {
  margin: .1rem 0 0;
  color: var(--st-muted, var(--muted));
  font-size: .78rem;
  line-height: 1.4;
}

.dashboard-shell.st-stitch .billing-foot {
  margin: .25rem 0 0;
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
}

/* ── Compact key-value list (used inside sections) ── */
.dashboard-shell.st-stitch .kv-list {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-shell.st-stitch .kv-list li {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) 1fr;
  gap: .5rem;
  align-items: baseline;
  padding: .3rem 0;
  border-bottom: 1px solid var(--st-border, var(--border));
  font-size: .8rem;
  color: var(--st-text, var(--text));
  min-width: 0;
}

.dashboard-shell.st-stitch .kv-list li:last-child {
  border-bottom: none;
}

.dashboard-shell.st-stitch .kv-list li > span:first-child {
  color: var(--st-muted, var(--muted));
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.dashboard-shell.st-stitch .kv-list li > span:last-child {
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.dashboard-shell.st-stitch .kv-list code {
  font-size: .75rem;
}

/* ── Compact horizontal KV strip (revenue secondary metrics) ── */
.dashboard-shell.st-stitch .kv-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: .5rem;
  margin: 0 0 .75rem;
  padding: .5rem .75rem;
  background: var(--st-glass-bg, var(--panel));
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--billing-radius-md);
}

.dashboard-shell.st-stitch .kv-strip-item {
  display: grid;
  gap: .05rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .kv-strip-item dt {
  color: var(--st-muted, var(--muted));
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .kv-strip-item dd {
  margin: 0;
  color: var(--st-text, var(--text));
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Safety strip (compact one-row safety summary) ── */
.dashboard-shell.st-stitch .safety-strip {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  margin: 0 0 .85rem;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--st-border, var(--border)));
  border-left: 3px solid var(--success);
  border-radius: var(--billing-radius-md);
  background: color-mix(in srgb, var(--success) 8%, var(--st-glass-bg, var(--panel)));
}

.dashboard-shell.st-stitch .safety-strip-icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--billing-radius-sm);
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .safety-strip-icon svg {
  width: .95rem;
  height: .95rem;
}

.dashboard-shell.st-stitch .safety-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: var(--st-text, var(--text));
}

.dashboard-shell.st-stitch .safety-strip-list li {
  position: relative;
  padding-left: .75rem;
  color: var(--st-text, var(--text));
}

.dashboard-shell.st-stitch .safety-strip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

@media (max-width: 760px) {
  .dashboard-shell.st-stitch .safety-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-shell.st-stitch .safety-strip-list {
    font-size: .72rem;
  }
}

/* ── Compact tables (revenue tables) ── */
.dashboard-shell.st-stitch .compact-table {
  font-size: .8rem;
}

.dashboard-shell.st-stitch .compact-table thead th {
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-muted, var(--muted));
  padding: .45rem .6rem;
  font-weight: 700;
  border-bottom: 1px solid var(--st-border, var(--border));
}

.dashboard-shell.st-stitch .compact-table tbody td {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--st-border, var(--border));
  vertical-align: middle;
}

.dashboard-shell.st-stitch .compact-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-shell.st-stitch .compact-table code {
  font-size: .72rem;
}

/* ── Empty state (slightly tighter) ── */
.dashboard-shell.st-stitch .billing-section .empty-state {
  padding: 1rem .5rem;
  gap: .25rem;
}

.dashboard-shell.st-stitch .billing-section .empty-state .empty-title {
  font-size: .85rem;
}

.dashboard-shell.st-stitch .billing-section .empty-state .empty-text {
  font-size: .78rem;
  max-width: 30rem;
}

/* ── Status strip overrides (slim down existing) ── */
.dashboard-shell.st-stitch .plans-status-strip,
.dashboard-shell.st-stitch .billing-status-strip {
  margin: 0 0 .5rem;
}

.dashboard-shell.st-stitch .plans-status-strip .status-pill,
.dashboard-shell.st-stitch .billing-status-strip .status-pill {
  font-size: .68rem;
  padding: .18rem .55rem;
}

/* ── Tighten page bottom spacing ── */
.dashboard-shell.st-stitch .plans-admin,
.dashboard-shell.st-stitch .billing-admin {
  padding-bottom: 2rem;
}

/* ─────────────────────────────────────────────────────────────
   Phase 8G.4 — Shell harmonization (billing pages)
   Tighter spacing, less visual noise. All scoped under
   .dashboard-shell.st-stitch so other pages are unaffected.
   - hide topbar right-side "New" CTA + page-actions on billing
   - compact admin-page-header on billing
   - compact status strip
   - tighter grid gaps between sections
   ───────────────────────────────────────────────────────────── */

/* Topbar: hide the right-side "New" CTA + page-actions inject on
   billing pages (templates set $hideTopbarActions / $hideTopbarNew
   before include). */
.dashboard-shell.st-stitch.plans-admin .st-topbar-actions,
.dashboard-shell.st-stitch.billing-admin .st-topbar-actions,
.dashboard-shell.st-stitch.plans-admin .st-topbar-cta,
.dashboard-shell.st-stitch.billing-admin .st-topbar-cta,
.dashboard-shell.st-stitch.plans-admin .st-topbar-tabs,
.dashboard-shell.st-stitch.billing-admin .st-topbar-tabs,
.dashboard-shell.st-stitch.plans-admin .st-topbar-search,
.dashboard-shell.st-stitch.billing-admin .st-topbar-search {
  display: none !important;
}

/* Slightly trim topbar height on billing pages since search + tabs
   are gone. */
.dashboard-shell.st-stitch.plans-admin .st-topbar,
.dashboard-shell.st-stitch.billing-admin .st-topbar {
  min-height: 3rem;
  padding-block: .35rem;
}

/* Page header on billing pages — tighter than the global default. */
.dashboard-shell.st-stitch.plans-admin .admin-page-header,
.dashboard-shell.st-stitch.billing-admin .admin-page-header {
  padding: .1rem 0 .15rem;
  margin: 0 0 .35rem;
  gap: .5rem;
}

.dashboard-shell.st-stitch.plans-admin .admin-page-title,
.dashboard-shell.st-stitch.billing-admin .admin-page-title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.15;
}

.dashboard-shell.st-stitch.plans-admin .admin-page-subtitle,
.dashboard-shell.st-stitch.billing-admin .admin-page-subtitle {
  font-size: .8rem;
  max-width: 56rem;
  line-height: 1.4;
}

.dashboard-shell.st-stitch.plans-admin .admin-page-kicker,
.dashboard-shell.st-stitch.billing-admin .admin-page-kicker {
  font-size: .65rem;
}

.dashboard-shell.st-stitch.plans-admin .admin-page-actions,
.dashboard-shell.st-stitch.billing-admin .admin-page-actions {
  gap: .35rem;
}

/* Status strip — tighter pill padding and gap. */
.dashboard-shell.st-stitch.plans-admin .admin-status-bar,
.dashboard-shell.st-stitch.billing-admin .admin-status-bar {
  margin: 0 0 .55rem;
  gap: .35rem;
}

.dashboard-shell.st-stitch.plans-admin .admin-status-bar .status-pill,
.dashboard-shell.st-stitch.billing-admin .admin-status-bar .status-pill {
  padding: .14rem .5rem;
  font-size: .66rem;
}

/* Metrics row — closer to header. */
.dashboard-shell.st-stitch.plans-admin .metrics-row,
.dashboard-shell.st-stitch.billing-admin .metrics-row {
  margin: 0 0 .65rem;
  gap: .4rem;
}

.dashboard-shell.st-stitch.plans-admin .metric-card,
.dashboard-shell.st-stitch.billing-admin .metric-card {
  padding: .5rem .65rem;
}

.dashboard-shell.st-stitch.plans-admin .metric-card .metric-value,
.dashboard-shell.st-stitch.billing-admin .metric-card .metric-value {
  font-size: 1.05rem;
}

.dashboard-shell.st-stitch.plans-admin .metric-card .metric-label,
.dashboard-shell.st-stitch.billing-admin .metric-card .metric-label {
  font-size: .62rem;
}

.dashboard-shell.st-stitch.plans-admin .metric-card .metric-hint,
.dashboard-shell.st-stitch.billing-admin .metric-card .metric-hint {
  font-size: .65rem;
}

/* KV strip — closer to metrics. */
.dashboard-shell.st-stitch.billing-admin .kv-strip {
  margin: 0 0 .55rem;
  padding: .35rem .65rem;
}

.dashboard-shell.st-stitch.billing-admin .kv-strip-item dd {
  font-size: .9rem;
}

/* Safety strip — closer. */
.dashboard-shell.st-stitch.billing-admin .safety-strip {
  margin: 0 0 .65rem;
  padding: .4rem .65rem;
}

.dashboard-shell.st-stitch.billing-admin .safety-strip-list {
  font-size: .72rem;
  gap: .1rem .6rem;
}

/* Plans layout — slightly closer to metrics. */
.dashboard-shell.st-stitch.plans-admin .plans-layout {
  margin-top: 0;
  gap: .75rem;
}

.dashboard-shell.st-stitch.plans-admin .plans-catalog {
  padding: .75rem .85rem;
  gap: .55rem;
}

.dashboard-shell.st-stitch.plans-admin .plans-catalog-head {
  padding-bottom: .25rem;
}

.dashboard-shell.st-stitch.plans-admin .plans-catalog-title {
  font-size: .95rem;
}

/* Billing grid — closer sections. */
.dashboard-shell.st-stitch.billing-admin .billing-grid {
  gap: .65rem;
  margin-bottom: .65rem;
}

.dashboard-shell.st-stitch.billing-admin .billing-section {
  padding: .7rem .85rem;
  gap: .5rem;
}

.dashboard-shell.st-stitch.billing-admin .billing-section-head {
  padding-bottom: .25rem;
}

.dashboard-shell.st-stitch.billing-admin .billing-section-head h2 {
  font-size: .92rem;
}

.dashboard-shell.st-stitch.billing-admin .billing-section-head p {
  font-size: .72rem;
}

.dashboard-shell.st-stitch.billing-admin .compact-table thead th,
.dashboard-shell.st-stitch.billing-admin .compact-table tbody td {
  padding: .35rem .5rem;
}

/* Mobile tightening. */
@media (max-width: 760px) {
  .dashboard-shell.st-stitch.plans-admin .admin-page-header,
  .dashboard-shell.st-stitch.billing-admin .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-shell.st-stitch.plans-admin .admin-page-actions,
  .dashboard-shell.st-stitch.billing-admin .admin-page-actions {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   Phase 8G.5 — Stitch design import (pricing + admin plans)
   Layout patterns adopted from the Stitch "Zapsoc Design Project"
   (projects/2537362986029516937). All selectors scoped under
   .dashboard-shell.st-stitch so public pricing and admin pages
   inherit the existing ZAPSOC dark theme rather than the light
   "Kinetic Logic" palette used in the Stitch source.
   - .pricing-stitch : public pricing (5-tier grid, FAQ, current plan row)
   - .plans-stitch   : admin plans (toolbar + table footer)
   ───────────────────────────────────────────────────────────── */

/* Local tokens (admin-shell scoped) — Stitch "Kinetic Logic" mapped to ZAPSOC dark. */
.dashboard-shell.st-stitch .pricing-stitch,
.dashboard-shell.st-stitch .plans-stitch {
  --stitch-card-bg: var(--st-glass-bg, rgba(27, 31, 38, 0.7));
  --stitch-card-border: 1px solid var(--st-border, rgba(255, 255, 255, 0.08));
  --stitch-radius-sm: 6px;
  --stitch-radius-md: 10px;
  --stitch-radius-lg: 14px;
  --stitch-radius-xl: 18px;
  --stitch-accent-bar: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
  --stitch-popular-bar: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  --stitch-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Public Pricing ─────────────────────────────────────────── */

.dashboard-shell.st-stitch .pricing-stitch {
  display: grid;
  gap: 1rem;
  padding-top: .25rem;
}

/* Checkout-disabled banner (compact one-row). */
.dashboard-shell.st-stitch .pricing-stitch-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .75rem;
  border: 1px solid color-mix(in srgb, var(--info) 32%, var(--st-border, var(--border)));
  border-left: 3px solid var(--info);
  border-radius: var(--stitch-radius-md);
  background: color-mix(in srgb, var(--info) 8%, var(--stitch-card-bg));
  font-size: .82rem;
  color: var(--st-text, var(--text));
}

.dashboard-shell.st-stitch .pricing-stitch-banner-icon {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--stitch-radius-sm);
  background: color-mix(in srgb, var(--info) 18%, transparent);
  color: var(--info);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .pricing-stitch-banner-icon svg {
  width: .9rem;
  height: .9rem;
}

.dashboard-shell.st-stitch .pricing-stitch-banner-text {
  line-height: 1.4;
}

.dashboard-shell.st-stitch .pricing-stitch-banner-text a {
  color: var(--accent);
}

/* Hero. */
.dashboard-shell.st-stitch .pricing-stitch-hero {
  display: grid;
  gap: .35rem;
  padding: .25rem 0;
  text-align: center;
  justify-items: center;
}

.dashboard-shell.st-stitch .pricing-stitch-hero .kicker {
  margin: 0;
  color: var(--st-secondary, var(--muted));
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch .pricing-stitch-title {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--st-text, var(--text));
  max-width: 22ch;
}

.dashboard-shell.st-stitch .pricing-stitch-sub {
  margin: 0;
  font-size: .95rem;
  color: var(--st-muted, var(--muted));
  max-width: 56ch;
  line-height: 1.5;
}

/* Current-plan summary row. */
.dashboard-shell.st-stitch .pricing-stitch-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .85rem;
  border: var(--stitch-card-border);
  border-radius: var(--stitch-radius-md);
  background: var(--stitch-card-bg);
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .pricing-stitch-current-left {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .pricing-stitch-current-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--stitch-radius-sm);
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  color: var(--accent-2);
  flex-shrink: 0;
}

.dashboard-shell.st-stitch .pricing-stitch-current-icon svg {
  width: 1rem;
  height: 1rem;
}

.dashboard-shell.st-stitch .pricing-stitch-current-label {
  margin: 0;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .pricing-stitch-current-name {
  margin: .1rem 0 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--st-text, var(--text));
}

.dashboard-shell.st-stitch .pricing-stitch-current-meta {
  margin: .15rem 0 0;
  font-size: .75rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .pricing-stitch-current-meta code {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--accent-2);
}

/* Empty state. */
.dashboard-shell.st-stitch .pricing-stitch-empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: .25rem;
  padding: 1.5rem 1rem;
  border: var(--stitch-card-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-card-bg);
}

.dashboard-shell.st-stitch .pricing-stitch-empty-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--stitch-radius-md);
  background: color-mix(in srgb, var(--st-muted) 18%, transparent);
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .pricing-stitch-empty-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.dashboard-shell.st-stitch .pricing-stitch-empty-title {
  margin: 0;
  font-weight: 600;
  font-size: .95rem;
  color: var(--st-text, var(--text));
}

.dashboard-shell.st-stitch .pricing-stitch-empty-text {
  margin: 0;
  font-size: .82rem;
  color: var(--st-muted, var(--muted));
  max-width: 36rem;
}

/* Section header (used by packs + FAQ). */
.dashboard-shell.st-stitch .pricing-stitch-section-head {
  display: grid;
  gap: .15rem;
  padding: 0;
  margin-top: .5rem;
}

.dashboard-shell.st-stitch .pricing-stitch-section-head h2 {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--st-text, var(--text));
}

.dashboard-shell.st-stitch .pricing-stitch-section-head p {
  margin: 0;
  font-size: .82rem;
  color: var(--st-muted, var(--muted));
}

/* Pricing grid (5-tier auto-fit). */
.dashboard-shell.st-stitch .pricing-stitch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: .85rem;
  align-items: stretch;
}

.dashboard-shell.st-stitch .pricing-stitch-grid--packs {
  margin-top: .75rem;
}

/* Pricing card. */
.dashboard-shell.st-stitch .pricing-card-stitch {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  gap: .5rem;
  padding: 1rem 1.1rem 1.1rem;
  border: var(--stitch-card-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-card-bg);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dashboard-shell.st-stitch .pricing-card-stitch:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--st-border, var(--border)));
  box-shadow: var(--stitch-shadow);
}

/* Top accent bar (Stitch pattern). */
.dashboard-shell.st-stitch .pricing-card-stitch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stitch-accent-bar);
  opacity: .65;
}

.dashboard-shell.st-stitch .pricing-card-stitch.is-popular {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--st-border, var(--border)));
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.dashboard-shell.st-stitch .pricing-card-stitch.is-popular::before {
  background: var(--stitch-popular-bar);
  opacity: 1;
  height: 4px;
}

.dashboard-shell.st-stitch .pricing-card-stitch.is-current {
  outline: 1px dashed color-mix(in srgb, var(--success) 50%, transparent);
  outline-offset: -2px;
}

.dashboard-shell.st-stitch .pricing-card-stitch.is-manual {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--st-border, var(--border)));
}

/* Popular pill. */
.dashboard-shell.st-stitch .pricing-card-stitch-popular {
  position: absolute;
  top: -.55rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  background: var(--accent);
  color: var(--bg);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

.dashboard-shell.st-stitch .pricing-card-stitch-popular-icon {
  display: inline-grid;
  place-items: center;
  width: .75rem;
  height: .75rem;
}

.dashboard-shell.st-stitch .pricing-card-stitch-popular-icon svg {
  width: 100%;
  height: 100%;
}

/* Card head. */
.dashboard-shell.st-stitch .pricing-card-stitch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .pricing-card-stitch-name {
  margin: 0;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text, var(--text));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-shell.st-stitch .pricing-card-stitch-tag {
  margin: 0;
  font-size: .78rem;
  color: var(--st-muted, var(--muted));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price block. */
.dashboard-shell.st-stitch .pricing-card-stitch-price {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .pricing-card-stitch-amount {
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--st-text, var(--text));
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch .pricing-card-stitch-suffix {
  font-size: .85rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .pricing-card-stitch-bill {
  margin: -.15rem 0 0;
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
}

/* Credits row. */
.dashboard-shell.st-stitch .pricing-card-stitch-credits {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--st-border, var(--border)));
  border-radius: var(--stitch-radius-sm);
  width: fit-content;
}

.dashboard-shell.st-stitch .pricing-card-stitch-credits-icon {
  display: inline-grid;
  place-items: center;
  width: .9rem;
  height: .9rem;
  color: var(--accent-2);
}

.dashboard-shell.st-stitch .pricing-card-stitch-credits-icon svg {
  width: 100%;
  height: 100%;
}

.dashboard-shell.st-stitch .pricing-card-stitch-credits-num {
  font-weight: 700;
  font-size: .9rem;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch .pricing-card-stitch-credits-label {
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
}

/* Feature list. */
.dashboard-shell.st-stitch .pricing-card-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
  font-size: .78rem;
  color: var(--st-muted, var(--muted));
  align-self: stretch;
}

.dashboard-shell.st-stitch .pricing-card-features li {
  display: grid;
  grid-template-columns: .9rem 1fr;
  gap: .35rem;
  align-items: start;
  line-height: 1.4;
}

.dashboard-shell.st-stitch .pricing-card-check {
  display: inline-grid;
  place-items: center;
  width: .9rem;
  height: .9rem;
  color: var(--success);
  flex-shrink: 0;
  margin-top: .1rem;
}

.dashboard-shell.st-stitch .pricing-card-check svg {
  width: 100%;
  height: 100%;
}

/* CTA. */
.dashboard-shell.st-stitch .pricing-card-stitch-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.dashboard-shell.st-stitch .pricing-card-stitch-cta .btn {
  width: 100%;
  justify-content: center;
}

.dashboard-shell.st-stitch .pricing-card-stitch-current-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
  color: var(--success);
  font-size: .75rem;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

/* Packs variant (smaller card). */
.dashboard-shell.st-stitch .pricing-card-stitch--pack {
  grid-template-rows: auto auto auto auto auto;
  padding: .85rem .9rem 1rem;
}

.dashboard-shell.st-stitch .pricing-card-stitch--pack .pricing-card-stitch-amount {
  font-size: 1.5rem;
}

/* FAQ. */
.dashboard-shell.st-stitch .pricing-stitch-faq {
  margin-top: 1.5rem;
  display: grid;
  gap: .65rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-list {
  display: grid;
  gap: .5rem;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-item {
  border: var(--stitch-card-border);
  border-radius: var(--stitch-radius-md);
  background: var(--stitch-card-bg);
  overflow: hidden;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem 1rem;
  cursor: pointer;
  font-family: var(--st-font-headline, var(--font-display, var(--font)));
  font-size: 1rem;
  font-weight: 600;
  color: var(--st-text, var(--text));
  list-style: none;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-item summary::-webkit-details-marker {
  display: none;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-item summary:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.dashboard-shell.st-stitch .pricing-stitch-faq-chev {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: var(--st-muted, var(--muted));
  transition: transform .15s ease;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-chev svg {
  width: 100%;
  height: 100%;
}

.dashboard-shell.st-stitch .pricing-stitch-faq-item[open] .pricing-stitch-faq-chev {
  transform: rotate(180deg);
}

.dashboard-shell.st-stitch .pricing-stitch-faq-item p {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: .85rem;
  color: var(--st-muted, var(--muted));
  line-height: 1.5;
}

/* Notes panel. */
.dashboard-shell.st-stitch .pricing-stitch-notes {
  padding: .85rem 1rem;
}

.dashboard-shell.st-stitch .pricing-stitch-notes-list {
  margin: .35rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: .25rem;
  font-size: .82rem;
  color: var(--st-muted, var(--muted));
  line-height: 1.5;
}

/* Responsive. */
@media (max-width: 760px) {
  .dashboard-shell.st-stitch .pricing-stitch-title {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }
  .dashboard-shell.st-stitch .pricing-card-stitch {
    padding: .9rem .9rem 1rem;
  }
  .dashboard-shell.st-stitch .pricing-card-stitch-amount {
    font-size: 1.5rem;
  }
}

/* ── Admin Plans: Stitch table pattern ─────────────────────── */

.dashboard-shell.st-stitch .plans-stitch .plans-catalog {
  padding: .9rem 1rem;
}

/* Toolbar (search + filter). */
.dashboard-shell.st-stitch .plans-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .65rem;
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--stitch-radius-md);
  background: color-mix(in srgb, var(--st-glass-bg, var(--panel)) 60%, transparent);
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .plans-table-search {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
}

.dashboard-shell.st-stitch .plans-table-search-icon {
  position: absolute;
  top: 50%;
  left: .65rem;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: .9rem;
  height: .9rem;
  color: var(--st-muted, var(--muted));
  pointer-events: none;
}

.dashboard-shell.st-stitch .plans-table-search-icon svg {
  width: 100%;
  height: 100%;
}

.dashboard-shell.st-stitch .plans-table-search-input.form-control {
  width: 100%;
  padding-left: 1.9rem;
  font-size: .82rem;
  height: 2rem;
}

.dashboard-shell.st-stitch .plans-table-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.dashboard-shell.st-stitch .plans-table-filter {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* Data table. */
.dashboard-shell.st-stitch .plans-table-wrap {
  border: 1px solid var(--st-border, var(--border));
  border-radius: var(--stitch-radius-md);
  overflow: hidden;
  background: var(--st-glass-bg, var(--panel));
  overflow-x: auto;
}

.dashboard-shell.st-stitch .plans-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .82rem;
  color: var(--st-text, var(--text));
  min-width: 640px;
}

.dashboard-shell.st-stitch .plans-table thead th {
  text-align: left;
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted, var(--muted));
  padding: .55rem .75rem;
  background: color-mix(in srgb, var(--st-glass-bg, var(--panel)) 100%, transparent);
  border-bottom: 1px solid var(--st-border, var(--border));
  white-space: nowrap;
}

.dashboard-shell.st-stitch .plans-table tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--st-border, var(--border));
  vertical-align: middle;
}

.dashboard-shell.st-stitch .plans-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-shell.st-stitch .plans-table tbody tr.plans-row {
  transition: background .12s ease;
}

.dashboard-shell.st-stitch .plans-table tbody tr.plans-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.dashboard-shell.st-stitch .plans-table tbody tr.plans-row.is-selected {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.dashboard-shell.st-stitch .plans-table tbody tr.plans-row.is-inactive {
  opacity: .7;
}

/* Column-specific styles. */
.dashboard-shell.st-stitch .plans-col-plan {
  min-width: 14rem;
}

.dashboard-shell.st-stitch .plans-row-name-link {
  display: grid;
  gap: .05rem;
  color: var(--st-text, var(--text));
  min-width: 0;
}

.dashboard-shell.st-stitch .plans-row-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--st-text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell.st-stitch .plans-row-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .68rem;
  color: var(--accent-2);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell.st-stitch .plans-row-desc {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32rem;
}

.dashboard-shell.st-stitch .plans-row-features {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .2rem;
}

.dashboard-shell.st-stitch .plans-col-status {
  white-space: nowrap;
}

.dashboard-shell.st-stitch .plans-col-status .badge {
  margin-right: .2rem;
}

.dashboard-shell.st-stitch .plans-col-price {
  white-space: nowrap;
}

.dashboard-shell.st-stitch .plans-row-price {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--st-text, var(--text));
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch .plans-row-interval {
  display: block;
  font-size: .68rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plans-col-credits {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--st-text, var(--text));
  font-size: .88rem;
}

.dashboard-shell.st-stitch .plans-col-actions {
  white-space: nowrap;
  text-align: right;
}

.dashboard-shell.st-stitch .plans-row-actions {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dashboard-shell.st-stitch .plans-row-actions .inline-form {
  margin: 0;
}

/* Table footer. */
.dashboard-shell.st-stitch .plans-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .65rem;
  border: 1px solid var(--st-border, var(--border));
  border-top: none;
  border-radius: 0 0 var(--stitch-radius-md) var(--stitch-radius-md);
  background: color-mix(in srgb, var(--st-glass-bg, var(--panel)) 80%, transparent);
  font-size: .75rem;
  color: var(--st-muted, var(--muted));
}

.dashboard-shell.st-stitch .plans-table-footer-text {
  font-family: var(--st-font-mono, ui-monospace, monospace);
}

.dashboard-shell.st-stitch .plans-table-footer-links {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.dashboard-shell.st-stitch .plans-table-nav-btn {
  padding: .25rem .4rem;
}

.dashboard-shell.st-stitch .plans-table-nav-btn svg {
  width: .85rem;
  height: .85rem;
}

/* Mobile responsive — table collapses to card stack. */
@media (max-width: 760px) {
  .dashboard-shell.st-stitch .plans-table thead {
    display: none;
  }
  .dashboard-shell.st-stitch .plans-table tbody tr.plans-row {
    display: grid;
    gap: .35rem;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--st-border, var(--border));
  }
  .dashboard-shell.st-stitch .plans-table tbody tr.plans-row td {
    padding: 0;
    border: none;
    display: grid;
    grid-template-columns: minmax(5.5rem, 36%) 1fr;
    align-items: baseline;
    gap: .35rem;
    font-size: .82rem;
  }
  .dashboard-shell.st-stitch .plans-table tbody tr.plans-row td::before {
    content: attr(data-label);
    color: var(--st-muted, var(--muted));
    font-family: var(--st-font-mono, ui-monospace, monospace);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .dashboard-shell.st-stitch .plans-table tbody tr.plans-row td.plans-col-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: .25rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--st-border, var(--border));
    margin-top: .25rem;
  }
  .dashboard-shell.st-stitch .plans-table tbody tr.plans-row td.plans-col-actions::before {
    display: none;
  }
  .dashboard-shell.st-stitch .plans-table tbody tr.plans-row td.plans-col-actions .plans-row-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .dashboard-shell.st-stitch .plans-table-wrap {
    overflow-x: visible;
  }
  .dashboard-shell.st-stitch .plans-table {
    min-width: 0;
  }
}

/* Tighten the metrics-row when used inside plans-stitch shell. */
.dashboard-shell.st-stitch .plans-stitch .metrics-row {
  margin: 0 0 .55rem;
}

/* ─────────────────────────────────────────────────────────────
   Phase 8G.6 — Admin stabilization + logout + functional search
   Minimal additions only:
   - .st-topbar-logout : visible logout button (anchored, real route)
   - .plans-table-count : live search result counter
   - .plans-row-empty   : no-match state row
   ───────────────────────────────────────────────────────────── */

/* Topbar logout button — uses existing .st-topbar-icon-btn visual style
   but tints slightly red so it stands apart from theme/command buttons. */
.st-topbar-logout {
  position: relative;
}
.st-topbar-logout:hover,
.st-topbar-logout:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--st-border, var(--border)));
}
.st-topbar-logout svg {
  width: 1rem;
  height: 1rem;
}

/* Mobile: hide avatar label, keep icon-only logout visible. */
@media (max-width: 480px) {
  .st-topbar-logout {
    /* keep visible — it's the most important action */
  }
}

/* Live search counter — shows e.g. "3 of 7 plans" while typing. */
.dashboard-shell.st-stitch .plans-table-count {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  color: var(--st-muted, var(--muted));
  padding-left: .25rem;
  white-space: nowrap;
}

/* No-match row — visible only when search yields zero hits. */
.dashboard-shell.st-stitch .plans-row-empty[hidden] {
  display: none;
}
.dashboard-shell.st-stitch .plans-row-empty td {
  padding: 0;
  border: none;
}
.dashboard-shell.st-stitch .plans-row-empty .empty-state {
  padding: 1.25rem 1rem;
}

/* Search input — type="search" clears the default UA "X" button which
   would clash with our magnifier icon. */
.plans-table-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* === ZAPSOC Kinetic Design Foundation · Phase 8G.7A === */
:root {
  --kin-bg: #09090b;
  --kin-surface: #131315;
  --kin-surface-lowest: #0e0e10;
  --kin-surface-low: #1c1b1d;
  --kin-surface-container: #201f22;
  --kin-surface-high: #2a2a2c;
  --kin-surface-variant: #353437;
  --kin-border: rgba(255, 255, 255, .08);
  --kin-border-strong: rgba(255, 255, 255, .14);
  --kin-text: #e5e1e4;
  --kin-muted: #c3c6d7;
  --kin-primary: #b4c5ff;
  --kin-primary-strong: #2563eb;
  --kin-tertiary: #4cd7f6;
  --kin-secondary: #d2bbff;
  --kin-success: #22c55e;
  --kin-warning: #f59e0b;
  --kin-error: #ef4444;
  --kin-glass: rgba(255, 255, 255, .03);
  --kin-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kin-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.kin-public-page {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .22), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(76, 215, 246, .12), transparent 26rem),
    radial-gradient(circle at 68% 82%, rgba(210, 187, 255, .14), transparent 28rem),
    var(--kin-bg);
  color: var(--kin-text);
  font-family: var(--kin-font);
  overflow-x: hidden;
  padding-bottom: 0;
}

.kin-bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .22), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(76, 215, 246, .12), transparent 26rem),
    radial-gradient(circle at 68% 82%, rgba(210, 187, 255, .14), transparent 28rem);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  background-position: center top;
}

.kin-public-shell,
.kin-nav-inner,
.kin-footer-inner {
  width: min(100% - 2rem, 1280px);
  margin-inline: auto;
}

.kin-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--kin-border);
  background: rgba(9, 9, 11, .78);
  backdrop-filter: blur(18px);
}

.kin-nav-inner {
  min-height: 4.75rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.kin-brand,
.kin-nav-links,
.kin-nav-actions,
.kin-actions,
.kin-mockup-toolbar,
.kin-trust-strip,
.kin-footer-grid,
.kin-workflow-grid {
  display: flex;
  align-items: center;
}

.kin-brand {
  gap: .7rem;
  color: var(--kin-text);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kin-brand:hover,
.kin-nav a:hover,
.kin-footer a:hover {
  color: var(--kin-tertiary);
}

.kin-brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(180, 197, 255, .42);
  border-radius: .65rem;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .85), rgba(76, 215, 246, .22)),
    var(--kin-surface);
  box-shadow: 0 0 32px rgba(37, 99, 235, .26);
}

.kin-brand-mark::after {
  content: "";
  display: block;
  width: .58rem;
  height: .58rem;
  margin: .72rem auto 0;
  border-radius: 999px;
  background: var(--kin-tertiary);
  box-shadow: 0 0 16px var(--kin-tertiary);
}

.kin-nav-links {
  justify-content: center;
  gap: .35rem;
}

.kin-nav a,
.kin-footer a {
  color: var(--kin-muted);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.kin-nav-links a,
.kin-nav-login {
  padding: .58rem .76rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 650;
}

.kin-nav-links a:hover,
.kin-nav-login:hover {
  background: rgba(255, 255, 255, .045);
}

.kin-nav-actions,
.kin-actions {
  justify-content: flex-end;
  gap: .7rem;
}

.kin-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(24rem, 1.08fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(2rem, 5vw, 4rem);
}

.kin-hero-copy {
  min-width: 0;
}

.kin-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.05rem;
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.kin-kicker::before {
  content: "";
  width: .46rem;
  height: .46rem;
  border-radius: 999px;
  background: var(--kin-tertiary);
  box-shadow: 0 0 16px var(--kin-tertiary);
}

.kin-hero-title {
  max-width: 12.5ch;
  margin: 0;
  color: #f7f7fb;
  font-size: clamp(3rem, 6.7vw, 6.2rem);
  font-weight: 780;
  line-height: .94;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 20px 70px rgba(37, 99, 235, .22);
}

.kin-hero-title span {
  color: var(--kin-primary);
}

.kin-hero-lead {
  max-width: 43rem;
  margin: 1.4rem 0 0;
  color: var(--kin-muted);
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  line-height: 1.75;
}

.kin-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1.7rem;
}

.kin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--kin-border-strong);
  border-radius: 999px;
  color: var(--kin-text);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.kin-btn:hover {
  transform: translateY(-1px);
}

.kin-btn-primary {
  border-color: rgba(180, 197, 255, .44);
  background: linear-gradient(135deg, var(--kin-primary-strong), #173fb7);
  color: #fff;
  box-shadow: 0 18px 44px rgba(37, 99, 235, .28);
}

.kin-btn-primary:hover {
  color: #fff;
  border-color: rgba(76, 215, 246, .55);
  box-shadow: 0 22px 54px rgba(37, 99, 235, .36);
}

.kin-btn-secondary {
  background: rgba(255, 255, 255, .04);
}

.kin-btn-secondary:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--kin-text);
}

.kin-btn-compact {
  min-height: 2.45rem;
  padding: .68rem .92rem;
  font-size: .88rem;
}

.kin-product-frame {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.kin-stage-glow {
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 24% 18%, rgba(76, 215, 246, .3), transparent 16rem),
    radial-gradient(circle at 78% 72%, rgba(210, 187, 255, .2), transparent 15rem),
    rgba(37, 99, 235, .1);
  filter: blur(28px);
}

.kin-product-mockup {
  overflow: hidden;
  border: 1px solid var(--kin-border-strong);
  border-radius: 1.25rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    var(--kin-surface-lowest);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .55);
}

.kin-mockup-toolbar {
  min-height: 3.6rem;
  gap: .5rem;
  padding: .8rem .95rem;
  border-bottom: 1px solid var(--kin-border);
  background: rgba(255, 255, 255, .035);
}

.kin-dot {
  width: .68rem;
  height: .68rem;
  border-radius: 999px;
  background: var(--kin-surface-variant);
}

.kin-dot.is-red {
  background: var(--kin-error);
}

.kin-dot.is-yellow {
  background: var(--kin-warning);
}

.kin-dot.is-green {
  background: var(--kin-success);
}

.kin-tab,
.kin-credits-pill {
  min-width: 0;
  border: 1px solid var(--kin-border);
  border-radius: 999px;
  padding: .42rem .68rem;
  color: var(--kin-muted);
  font-family: var(--kin-font-mono);
  font-size: .72rem;
}

.kin-tab {
  margin-left: .35rem;
}

.kin-tab + .kin-tab {
  margin-left: 0;
}

.kin-tab.is-active {
  color: var(--kin-text);
  background: rgba(37, 99, 235, .16);
  border-color: rgba(180, 197, 255, .3);
}

.kin-credits-pill {
  margin-left: auto;
  color: var(--kin-tertiary);
  background: rgba(76, 215, 246, .08);
}

.kin-mockup-grid {
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 1.2fr) minmax(10rem, .78fr);
  grid-template-rows: auto minmax(13rem, 1fr);
  gap: .9rem;
  padding: .9rem;
}

.kin-mini-rail {
  grid-row: 1 / 3;
  display: grid;
  align-content: start;
  gap: .72rem;
  padding: .72rem;
  border: 1px solid var(--kin-border);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .025);
}

.kin-mini-rail span {
  aspect-ratio: 1;
  border-radius: .72rem;
  background: rgba(255, 255, 255, .07);
}

.kin-mini-rail span:first-child {
  background: linear-gradient(135deg, var(--kin-primary-strong), var(--kin-tertiary));
}

.kin-panel {
  border: 1px solid var(--kin-border);
  border-radius: 1rem;
  background: var(--kin-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.kin-prompt-card {
  display: grid;
  gap: .75rem;
  padding: 1rem;
}

.kin-panel-label {
  margin: 0;
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kin-prompt-card h2 {
  max-width: 20rem;
  margin: 0;
  color: var(--kin-text);
  font-size: clamp(1rem, 2vw, 1.42rem);
  line-height: 1.25;
}

.kin-prompt-lines {
  display: grid;
  gap: .45rem;
}

.kin-prompt-lines span {
  height: .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.kin-prompt-lines span:nth-child(1) {
  width: 88%;
}

.kin-prompt-lines span:nth-child(2) {
  width: 64%;
}

.kin-prompt-lines span:nth-child(3) {
  width: 42%;
  background: rgba(76, 215, 246, .18);
}

.kin-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  min-height: 13rem;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(37, 99, 235, .13), transparent),
    rgba(255, 255, 255, .025);
}

.kin-waveform span {
  width: min(.64rem, 3.2%);
  height: var(--bar);
  min-height: 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--kin-tertiary), var(--kin-primary-strong));
  box-shadow: 0 0 16px rgba(76, 215, 246, .24);
}

.kin-job-stack {
  grid-row: 1 / 3;
  display: grid;
  align-content: start;
  gap: .7rem;
  padding: .8rem;
}

.kin-job-card {
  display: grid;
  gap: .25rem;
  padding: .78rem;
  border: 1px solid var(--kin-border);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .035);
}

.kin-job-card span {
  color: var(--kin-muted);
  font-family: var(--kin-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kin-job-card strong {
  color: var(--kin-text);
  font-size: .95rem;
}

.kin-job-card.is-active {
  border-color: rgba(76, 215, 246, .4);
  background: rgba(76, 215, 246, .08);
}

.kin-trust-strip {
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin: 0 0 clamp(3rem, 6vw, 5.5rem);
  padding: .85rem;
  border: 1px solid var(--kin-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .028);
}

.kin-trust-strip span {
  color: var(--kin-muted);
  font-family: var(--kin-font-mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.kin-section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.kin-section-head {
  max-width: 50rem;
  margin-bottom: 1.5rem;
}

.kin-section-head h2,
.kin-cta h2 {
  margin: 0;
  color: var(--kin-text);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: 0;
}

.kin-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.kin-feature-card,
.kin-workflow-step,
.kin-cta,
.kin-alert {
  border: 1px solid var(--kin-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .035);
}

.kin-feature-card {
  display: grid;
  align-content: start;
  gap: .8rem;
  min-height: 15rem;
  padding: 1.1rem;
}

.kin-feature-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
  background: rgba(180, 197, 255, .16);
  border: 1px solid rgba(180, 197, 255, .24);
}

.kin-feature-card.is-cyan .kin-feature-icon {
  background: rgba(76, 215, 246, .14);
  border-color: rgba(76, 215, 246, .28);
}

.kin-feature-card.is-violet .kin-feature-icon {
  background: rgba(210, 187, 255, .14);
  border-color: rgba(210, 187, 255, .28);
}

.kin-feature-card.is-green .kin-feature-icon {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .28);
}

.kin-feature-card h3 {
  margin: 0;
  color: var(--kin-text);
  font-size: 1.08rem;
}

.kin-feature-card p {
  margin: 0;
  color: var(--kin-muted);
  line-height: 1.65;
}

.kin-workflow-grid {
  align-items: stretch;
  gap: 1rem;
}

.kin-workflow-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 1rem;
}

.kin-workflow-step span {
  display: inline-flex;
  margin-bottom: 1.2rem;
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
  font-size: .75rem;
  font-weight: 900;
}

.kin-workflow-step h3 {
  margin: 0;
  color: var(--kin-text);
  font-size: 1.05rem;
  line-height: 1.35;
}

.kin-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: clamp(1rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 6rem);
  padding: clamp(1.3rem, 4vw, 2rem);
  background:
    radial-gradient(circle at 12% 20%, rgba(37, 99, 235, .2), transparent 18rem),
    radial-gradient(circle at 78% 78%, rgba(76, 215, 246, .12), transparent 18rem),
    rgba(255, 255, 255, .04);
}

.kin-alert {
  margin-top: 1rem;
  padding: .85rem 1rem;
  color: #fecaca;
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .28);
}

.kin-footer {
  border-top: 1px solid var(--kin-border);
  background: rgba(0, 0, 0, .28);
}

.kin-footer-inner {
  display: grid;
  grid-template-columns: minmax(10rem, .7fr) minmax(0, 1.5fr);
  gap: 2rem;
  padding: 2rem 0;
}

.kin-footer-grid {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}

.kin-footer-grid > div {
  display: grid;
  gap: .48rem;
  min-width: 0;
}

.kin-footer h2 {
  margin: 0 0 .35rem;
  color: var(--kin-text);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kin-footer p {
  max-width: 12rem;
  margin: 0;
  color: var(--kin-muted);
  font-size: .88rem;
  line-height: 1.5;
}

.kin-footer a {
  font-size: .92rem;
}

@media (max-width: 1040px) {
  .kin-hero {
    grid-template-columns: 1fr;
  }
  .kin-hero-title {
    max-width: 13.5ch;
  }
  .kin-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kin-footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .kin-public-shell,
  .kin-nav-inner,
  .kin-footer-inner {
    width: min(100% - 1rem, 1280px);
  }
  .kin-nav-inner {
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: .75rem 0;
  }
  .kin-nav-links,
  .kin-nav-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .kin-hero {
    padding-top: 2.5rem;
  }
  .kin-hero-title {
    font-size: clamp(2.5rem, 15vw, 4rem);
  }
  .kin-actions,
  .kin-btn,
  .kin-cta,
  .kin-footer-grid {
    width: 100%;
  }
  .kin-btn {
    white-space: normal;
  }
  .kin-mockup-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .kin-mini-rail {
    grid-row: auto;
    display: flex;
  }
  .kin-mini-rail span {
    width: 2rem;
  }
  .kin-job-stack {
    grid-row: auto;
  }
  .kin-feature-grid,
  .kin-workflow-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .kin-feature-card {
    min-height: auto;
  }
  .kin-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .kin-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .kin-mockup-toolbar {
    flex-wrap: wrap;
  }
  .kin-credits-pill {
    width: 100%;
    margin-left: 0;
  }
  .kin-waveform {
    gap: .2rem;
    padding-inline: .6rem;
  }
  .kin-trust-strip {
    justify-content: flex-start;
  }
  .kin-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* === ZAPSOC Kinetic Pricing · Phase 8G.7B === */
.kin-pricing-page {
  background:
    radial-gradient(circle at 20% 10%, rgba(37, 99, 235, .18), transparent 32rem),
    radial-gradient(circle at 85% 18%, rgba(76, 215, 246, .12), transparent 28rem),
    var(--kin-bg);
}

.kin-pricing-page .dashboard-main {
  background: transparent;
}

.kin-pricing-main {
  color: var(--kin-text);
  font-family: var(--kin-font);
}

.kin-checkout-banner,
.kin-current-plan,
.kin-note-panel,
.kin-pricing-card,
.kin-credit-card,
.kin-faq-item {
  border: 1px solid var(--kin-border);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)),
    rgba(9, 9, 11, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.kin-checkout-banner {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin: .25rem 0 1.25rem;
  padding: .95rem 1rem;
}

.kin-checkout-dot {
  flex: 0 0 auto;
  width: .8rem;
  height: .8rem;
  margin-top: .25rem;
  border-radius: 999px;
  background: var(--kin-warning);
  box-shadow: 0 0 18px rgba(245, 158, 11, .45);
}

.kin-checkout-banner strong,
.kin-current-plan h2,
.kin-note-panel h2,
.kin-pricing-card h3,
.kin-credit-card h3 {
  color: var(--kin-text);
}

.kin-checkout-banner p,
.kin-current-plan p,
.kin-note-panel p,
.kin-pricing-card p,
.kin-credit-card p,
.kin-faq-item p {
  margin: .25rem 0 0;
  color: var(--kin-muted);
  line-height: 1.6;
}

.kin-pricing-hero {
  max-width: 58rem;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem);
}

.kin-pricing-hero h1 {
  max-width: 11ch;
  margin: 0;
  color: #f7f7fb;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .96;
  letter-spacing: 0;
  text-transform: none;
}

.kin-pricing-hero p:not(.kin-kicker) {
  max-width: 46rem;
  margin: 1.1rem 0 0;
  color: var(--kin-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.75;
}

.kin-current-plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.kin-current-plan h2,
.kin-note-panel h2 {
  margin: .2rem 0 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.kin-current-plan code {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
}

.kin-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
  align-items: stretch;
}

.kin-pricing-card,
.kin-credit-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .95rem;
  min-height: 100%;
  padding: 1.15rem;
  overflow: hidden;
}

.kin-pricing-card.is-featured {
  border-color: rgba(180, 197, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 24px 70px rgba(37, 99, 235, .2);
}

.kin-pricing-card.is-current {
  border-color: rgba(76, 215, 246, .36);
}

.kin-pricing-card-head {
  display: grid;
  gap: .45rem;
}

.kin-plan-kicker {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kin-plan-badge {
  position: absolute;
  top: .9rem;
  right: .9rem;
  padding: .36rem .58rem;
  border: 1px solid rgba(180, 197, 255, .35);
  border-radius: 999px;
  color: var(--kin-primary);
  background: rgba(37, 99, 235, .12);
  font-family: var(--kin-font-mono);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.kin-plan-price {
  display: grid;
  gap: .2rem;
}

.kin-plan-price strong {
  color: var(--kin-text);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
}

.kin-plan-interval {
  color: var(--kin-muted);
  font-size: .9rem;
}

.kin-credit-line {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: .45rem .62rem;
  border: 1px solid rgba(76, 215, 246, .22);
  border-radius: 999px;
  color: var(--kin-tertiary);
  background: rgba(76, 215, 246, .075);
  font-family: var(--kin-font-mono);
  font-size: .78rem;
  font-weight: 760;
}

.kin-plan-features {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kin-plan-feature {
  display: grid;
  grid-template-columns: .75rem 1fr;
  gap: .5rem;
  color: var(--kin-muted);
  line-height: 1.5;
}

.kin-plan-feature::before {
  content: "";
  width: .48rem;
  height: .48rem;
  margin-top: .47rem;
  border-radius: 999px;
  background: var(--kin-tertiary);
  box-shadow: 0 0 10px rgba(76, 215, 246, .38);
}

.kin-plan-cta {
  align-self: end;
  margin-top: .4rem;
}

.kin-plan-cta .kin-btn,
.kin-credit-card .kin-btn,
.kin-disabled-cta {
  width: 100%;
}

.kin-disabled-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .85rem 1rem;
  border: 1px solid var(--kin-border);
  border-radius: 999px;
  color: var(--kin-muted);
  background: rgba(255, 255, 255, .035);
  font-weight: 800;
  text-align: center;
}

a.kin-disabled-cta:hover {
  color: var(--kin-text);
  border-color: var(--kin-border-strong);
}

.kin-credit-section {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.kin-credit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

.kin-faq-list {
  display: grid;
  gap: .75rem;
}

.kin-faq-item {
  padding: 0;
}

.kin-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--kin-text);
  cursor: pointer;
  font-weight: 760;
}

.kin-faq-item summary::-webkit-details-marker {
  display: none;
}

.kin-faq-item summary::after {
  content: "+";
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
}

.kin-faq-item[open] summary::after {
  content: "-";
}

.kin-faq-item p {
  margin: 0;
  padding: 0 1rem 1rem;
}

.kin-note-panel {
  padding: 1.15rem;
  margin-bottom: 1.5rem;
}

.kin-pricing-footer {
  margin-top: clamp(2rem, 6vw, 5rem);
  border: 1px solid var(--kin-border);
  border-radius: 1rem 1rem 0 0;
}

@media (max-width: 760px) {
  .kin-pricing-hero h1 {
    font-size: clamp(2.45rem, 14vw, 4rem);
  }
  .kin-current-plan,
  .kin-checkout-banner {
    align-items: stretch;
  }
  .kin-current-plan {
    flex-direction: column;
  }
  .kin-current-plan .kin-btn,
  .kin-pricing-card .kin-btn,
  .kin-credit-card .kin-btn {
    width: 100%;
  }
}

/* === ZAPSOC Kinetic Admin Plans · Phase 8G.7C === */
.dashboard-shell.st-stitch.kin-admin-plans {
  background-color: var(--kin-bg);
}

.kin-admin-plans .dashboard-main {
  background:
    linear-gradient(180deg, rgba(9, 9, 11, .72), rgba(9, 9, 11, .94)),
    radial-gradient(circle at 22% 0%, rgba(37, 99, 235, .2), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(76, 215, 246, .13), transparent 28%);
}

.kin-admin-plans-main {
  min-width: 0;
}

.kin-admin-header {
  position: relative;
  padding: .95rem 1rem;
  border: 1px solid var(--kin-border);
  border-radius: .95rem;
  background: linear-gradient(135deg, rgba(23, 27, 37, .78), rgba(13, 14, 18, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
}

.kin-admin-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--kin-primary), var(--kin-tertiary));
}

.kin-admin-header .admin-page-title {
  color: var(--kin-text);
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
}

.kin-admin-header .admin-page-kicker {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
  font-weight: 850;
}

.kin-admin-header .admin-page-subtitle {
  color: var(--kin-muted);
}

.kin-admin-actions {
  position: relative;
  z-index: 1;
}

.kin-admin-status-strip {
  margin-bottom: .75rem;
  border-color: rgba(180, 197, 255, .18);
  background: rgba(20, 22, 29, .72);
}

.kin-admin-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}

.kin-admin-card,
.kin-admin-table-card,
.kin-admin-editor .editor-panel {
  border-color: var(--kin-border);
  background: linear-gradient(180deg, rgba(21, 24, 31, .82), rgba(14, 15, 19, .84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 18px 55px rgba(0, 0, 0, .22);
}

.kin-admin-card {
  min-height: 5rem;
}

.kin-admin-card .metric-label {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
}

.kin-admin-card .metric-value {
  color: var(--kin-text);
  font-size: 1.45rem;
}

.kin-admin-card .metric-hint {
  color: var(--kin-muted);
}

.kin-admin-layout {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
  gap: 1rem;
}

.kin-admin-table-card {
  padding: 1rem;
  overflow: hidden;
}

.kin-admin-table-card .plans-catalog-head {
  border-bottom-color: var(--kin-border);
}

.kin-admin-table-card .plans-catalog-title,
.kin-admin-editor .editor-title {
  color: var(--kin-text);
}

.kin-admin-table-card .plans-catalog-sub,
.kin-admin-editor .editor-sub,
.kin-admin-table-card .plans-foot {
  color: var(--kin-muted);
}

.kin-admin-toolbar {
  border-color: var(--kin-border);
  background: rgba(255, 255, 255, .035);
}

.kin-admin-search .form-control {
  min-height: 2.35rem;
  border-color: rgba(180, 197, 255, .14);
  background: rgba(6, 8, 12, .66);
}

.kin-admin-table {
  min-width: 900px;
}

.kin-admin-table thead th {
  color: rgba(195, 198, 215, .78);
  background: rgba(255, 255, 255, .03);
}

.kin-admin-table tbody td {
  border-bottom-color: rgba(255, 255, 255, .07);
}

.kin-admin-table-row {
  position: relative;
}

.kin-admin-table-row.is-selected,
.kin-admin-row-selected {
  background: rgba(37, 99, 235, .1);
  box-shadow: inset 4px 0 0 0 var(--kin-tertiary);
}

.kin-admin-table-row.is-inactive {
  opacity: .62;
}

.kin-admin-table-row .plans-row-name {
  color: var(--kin-text);
}

.kin-admin-table-row .plans-row-code {
  color: var(--kin-tertiary);
}

.kin-admin-table-row .plans-row-desc,
.kin-admin-table-row .plans-row-interval {
  color: var(--kin-muted);
}

.kin-admin-table .plans-col-type,
.kin-admin-table .plans-col-status,
.kin-admin-table .plans-col-visibility {
  min-width: 7.5rem;
  white-space: nowrap;
}

.kin-admin-table .plans-col-actions {
  min-width: 13rem;
}

.kin-admin-badge {
  border: 1px solid var(--kin-border);
  background: rgba(255, 255, 255, .045);
  color: var(--kin-muted);
}

.kin-admin-badge.is-active,
.kin-admin-badge.is-public,
.kin-admin-badge.is-type-success {
  border-color: rgba(76, 215, 246, .28);
  color: var(--kin-tertiary);
  background: rgba(76, 215, 246, .085);
}

.kin-admin-badge.is-inactive,
.kin-admin-badge.is-hidden {
  border-color: rgba(195, 198, 215, .18);
  color: rgba(195, 198, 215, .78);
  background: rgba(195, 198, 215, .055);
}

.kin-admin-badge.is-type-info {
  border-color: rgba(180, 197, 255, .3);
  color: var(--kin-primary);
  background: rgba(37, 99, 235, .1);
}

.kin-admin-badge.is-type-warning {
  border-color: rgba(167, 139, 250, .3);
  color: var(--kin-secondary);
  background: rgba(167, 139, 250, .1);
}

.kin-feature-chips .feature-chip {
  max-width: 12rem;
  border-color: rgba(76, 215, 246, .24);
  color: var(--kin-muted);
  background: rgba(76, 215, 246, .07);
}

.kin-admin-editor .editor-panel {
  top: 1rem;
}

.kin-admin-editor .editor-head,
.kin-admin-editor .editor-actions {
  border-color: var(--kin-border);
}

.kin-admin-editor-section {
  border-color: var(--kin-border);
  background: rgba(255, 255, 255, .035);
}

.kin-admin-editor-section .editor-section-title {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
}

.kin-form-grid {
  gap: .65rem;
}

.kin-form-field {
  color: var(--kin-muted);
}

.kin-form-field .form-control,
.kin-admin-editor select.form-control,
.kin-admin-editor textarea.form-control,
.kin-admin-editor input.form-control {
  border-color: rgba(180, 197, 255, .14);
  background: rgba(6, 8, 12, .58);
}

.kin-admin-editor .form-checkbox-row {
  border-color: var(--kin-border);
  background: rgba(255, 255, 255, .035);
}

.kin-empty-row .empty-state {
  background: rgba(255, 255, 255, .025);
}

.kin-inline-action,
.kin-muted-action {
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .kin-admin-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  }
  .kin-admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .kin-admin-header {
    padding: .85rem .9rem;
  }
  .kin-admin-actions,
  .kin-admin-actions .btn,
  .kin-admin-table-card .plans-catalog-actions,
  .kin-admin-table-card .plans-catalog-actions .btn {
    width: 100%;
  }
  .kin-admin-toolbar {
    align-items: stretch;
  }
  .kin-admin-table {
    min-width: 0;
  }
  .kin-admin-table tbody tr.plans-row td {
    grid-template-columns: minmax(6.4rem, 38%) minmax(0, 1fr);
  }
  .kin-admin-table .plans-col-type,
  .kin-admin-table .plans-col-status,
  .kin-admin-table .plans-col-visibility,
  .kin-admin-table .plans-col-actions {
    min-width: 0;
  }
}

/* === ZAPSOC Kinetic Admin Plans Visual Hotfix · Phase 8G.7C.1 === */
.dashboard-shell.st-stitch.kin-admin-plans > .dashboard-main.kin-admin-page {
  padding-top: .9rem;
  background:
    linear-gradient(rgba(180, 197, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 197, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, .26), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(76, 215, 246, .16), transparent 24rem),
    #09090b;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-header {
  margin-bottom: .85rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(180, 197, 255, .24);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(76, 215, 246, .08) 46%, rgba(13, 14, 18, .92)),
    rgba(13, 14, 18, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 70px rgba(0, 0, 0, .34);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .45;
  pointer-events: none;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-header > * {
  position: relative;
  z-index: 1;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .admin-page-title {
  color: #f4f7ff;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  letter-spacing: 0;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .admin-page-kicker,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .metric-label,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .editor-section-title {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-status-strip {
  padding: .5rem .6rem;
  border: 1px solid rgba(76, 215, 246, .2);
  border-radius: .85rem;
  background: rgba(10, 13, 20, .78);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-status-strip .status-pill {
  padding: .32rem .68rem;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-metrics {
  gap: .75rem;
  margin-bottom: .9rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-card {
  padding: .82rem .9rem;
  border-color: rgba(180, 197, 255, .2);
  border-radius: .85rem;
  background:
    linear-gradient(180deg, rgba(31, 35, 46, .8), rgba(13, 15, 20, .88)),
    rgba(13, 15, 20, .86);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .metric-value {
  color: #f4f7ff;
  font-size: 1.55rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-layout {
  gap: 1rem;
  align-items: start;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-card,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel {
  position: relative;
  padding: 1rem;
  border: 1px solid rgba(180, 197, 255, .22);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(24, 28, 38, .86), rgba(11, 13, 18, .9)),
    rgba(11, 13, 18, .88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 22px 70px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-card::before,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--kin-primary), var(--kin-tertiary), var(--kin-secondary));
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-head,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .editor-head {
  padding-bottom: .7rem;
  border-bottom-color: rgba(180, 197, 255, .16);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-title,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .editor-title {
  color: #f4f7ff;
  font-size: 1.12rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-toolbar {
  padding: .65rem;
  border-color: rgba(76, 215, 246, .18);
  border-radius: .8rem;
  background: rgba(76, 215, 246, .045);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-table-wrap {
  border-color: rgba(180, 197, 255, .18);
  border-radius: .85rem;
  background: rgba(7, 9, 13, .76);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table thead th {
  padding-block: .7rem;
  color: rgba(195, 198, 215, .82);
  background: rgba(180, 197, 255, .055);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table tbody td {
  padding-block: .68rem;
  border-bottom-color: rgba(255, 255, 255, .075);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-row:hover {
  background: rgba(76, 215, 246, .055);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-row.is-selected,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-row-selected {
  background: rgba(37, 99, 235, .14);
  box-shadow: inset 4px 0 0 0 var(--kin-tertiary);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-row.is-inactive {
  opacity: .58;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-badge {
  padding: .24rem .5rem;
  border-radius: 999px;
  font-family: var(--kin-font-mono);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .04em;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-feature-chips .feature-chip {
  border-color: rgba(76, 215, 246, .28);
  color: var(--kin-tertiary);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel {
  top: 1rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor-section {
  padding: .7rem;
  border-color: rgba(180, 197, 255, .16);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .038);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-form-field .form-control,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor select.form-control,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor textarea.form-control,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor input.form-control {
  border-color: rgba(180, 197, 255, .18);
  background: rgba(5, 7, 11, .72);
}

@media (max-width: 760px) {
  .dashboard-shell.st-stitch.kin-admin-plans > .dashboard-main.kin-admin-page {
    padding-top: .65rem;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-header,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-card,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel {
    border-radius: .85rem;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-status-strip {
    align-items: stretch;
  }
}

/* === ZAPSOC Kinetic Admin Plans Compact UX · Phase 8G.7C.2 === */
.dashboard-shell.st-stitch.kin-admin-plans > .dashboard-main.kin-admin-page {
  padding-top: .45rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .45rem;
  padding: .72rem .9rem;
  border-radius: .8rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 12px 36px rgba(0, 0, 0, .24);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header::after {
  opacity: .22;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header .admin-page-title-block {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header .admin-page-kicker {
  display: none;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header .admin-page-title {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header .admin-page-subtitle {
  margin: 0;
  max-width: 48rem;
  font-size: .78rem;
  line-height: 1.28;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-actions {
  flex: 0 0 auto;
  gap: .4rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-actions .btn {
  min-height: 2rem;
  padding: .42rem .68rem;
  font-size: .78rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem;
  margin: 0 0 .55rem;
  padding: .38rem .5rem;
  border-radius: .72rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-strip .status-pill,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 1.65rem;
  padding: .24rem .52rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: var(--kin-muted);
  font-size: .68rem;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-stat-pill strong {
  color: var(--kin-tertiary);
  font-family: var(--kin-font-mono);
  font-size: .72rem;
  font-weight: 850;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-layout {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  gap: .75rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-layout > * {
  min-width: 0;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-table-card,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel {
  padding: .78rem;
  border-radius: .82rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 12px 42px rgba(0, 0, 0, .23);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-head {
  align-items: center;
  gap: .6rem;
  padding-bottom: .52rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-title,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .editor-title {
  font-size: .98rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-sub {
  font-size: .72rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-toolbar {
  padding: .42rem;
  gap: .42rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-table-search-input.form-control {
  height: 1.95rem;
  min-height: 1.95rem;
  font-size: .78rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-table-count {
  font-size: .68rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-list {
  display: grid;
  gap: .38rem;
  min-width: 0;
  overflow: visible;
  padding: .42rem;
  border-color: rgba(180, 197, 255, .16);
  border-radius: .72rem;
  background: rgba(7, 9, 13, .68);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, auto) minmax(12rem, .54fr);
  gap: .7rem;
  padding: .1rem .42rem .22rem;
  color: rgba(195, 198, 215, .66);
  font-family: var(--kin-font-mono);
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, auto) minmax(12rem, .54fr);
  grid-template-areas: "main actions meta";
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .58rem .62rem;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: .62rem;
  background: rgba(255, 255, 255, .026);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-row:hover {
  background: rgba(76, 215, 246, .055);
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-main {
  grid-area: main;
  display: grid;
  gap: .18rem;
  min-width: 0;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-description {
  max-width: 54rem;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions {
  grid-area: actions;
  min-width: 0;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions .plans-row-actions {
  justify-content: flex-start;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions .btn {
  min-height: 1.9rem;
  padding: .34rem .52rem;
  font-size: .74rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-meta {
  grid-area: meta;
  display: grid;
  justify-items: end;
  gap: .28rem;
  min-width: 0;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-price-block {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  min-width: 0;
  color: var(--kin-text);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-badges {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .22rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-badges .kin-admin-badge,
.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-feature-chips .feature-chip {
  padding: .16rem .38rem;
  font-size: .62rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-foot {
  margin-top: .3rem;
  font-size: .69rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel {
  top: .65rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor-section {
  padding: .56rem;
  gap: .28rem;
  border-radius: .62rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .editor-form {
  gap: .48rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-form-grid {
  gap: .45rem;
}

.dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .editor-grid .form-control {
  padding: .32rem .48rem;
  font-size: .8rem;
}

@media (max-width: 1180px) {
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-editor .editor-panel {
    position: static;
  }
}

@media (max-width: 920px) {
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-list-head {
    display: none;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main actions"
      "meta meta";
    align-items: start;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-meta {
    justify-items: start;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-price-block,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-header {
    align-items: stretch;
    flex-direction: column;
    padding: .65rem .72rem;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-actions,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-actions .btn {
    width: 100%;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-strip {
    align-items: stretch;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-compact-strip .status-pill,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-admin-stat-pill {
    flex: 1 1 calc(50% - .35rem);
    justify-content: center;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-head {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-actions,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .plans-catalog-actions .btn {
    width: 100%;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "meta"
      "actions";
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions .plans-row-actions,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions .btn,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions .inline-form,
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-actions button {
    width: 100%;
  }
  .dashboard-shell.st-stitch.kin-admin-plans .kin-admin-page .kin-plan-description {
    white-space: normal;
  }
}

/* === ZAPSOC Kinetic Admin Shell · Phase 8G.8A ===
   Adds admin-context shell styling on top of the shared Kinetic sidebar
   and topbar. Scoped to body.kin-admin-shell so non-admin pages are
   untouched. Companion classes are appended in sidebar.php:
     - .st-sidebar-section--admin (grouped admin nav, with label)
     - .st-sidebar-logout        (admin-only logout link in footer)
   The shared topbar logout button is hidden here so admins see logout
   exactly once (in the sidebar).
   ============================================================= */

/* 1. Hide the topbar logout on admin pages — sidebar takes over. */
.dashboard-shell.kin-admin-shell .st-topbar-logout {
  display: none;
}

/* 2. Admin nav section — divider, label, items.
   Reuses existing .st-sidebar-nav <a> styling for consistency. */
.dashboard-shell.kin-admin-shell .st-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: .65rem 1rem 0;
  padding-top: .65rem;
  border-top: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .st-sidebar-section-label {
  display: block;
  margin: 0 0 .35rem;
  padding: 0 .35rem;
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kin-tertiary, var(--st-tertiary));
}

.dashboard-shell.kin-admin-shell .st-sidebar-section a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  margin: 0;
  border-radius: var(--st-radius, 6px);
  font-size: .82rem;
  font-weight: 500;
  color: var(--st-on-surface-variant);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.dashboard-shell.kin-admin-shell .st-sidebar-section a:hover,
.dashboard-shell.kin-admin-shell .st-sidebar-section a:focus-visible {
  background: color-mix(in srgb, var(--st-primary-container, var(--st-primary)) 14%, transparent);
  color: var(--st-text);
  outline: none;
}

.dashboard-shell.kin-admin-shell .st-sidebar-section a.is-active {
  background: color-mix(in srgb, var(--st-primary-container, var(--st-primary)) 18%, transparent);
  color: var(--st-text);
  box-shadow: inset 2px 0 0 var(--st-primary-container, var(--st-primary));
}

.dashboard-shell.kin-admin-shell .st-sidebar-section a .st-nav-icon {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.dashboard-shell.kin-admin-shell .st-sidebar-section a .st-nav-icon svg {
  width: 1rem;
  height: 1rem;
}

/* 3. Sidebar logout footer link (admin-only). */
.dashboard-shell.kin-admin-shell .st-sidebar-logout {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: auto 1rem .5rem;
  padding: .5rem .65rem;
  border-top: 1px solid var(--st-border);
  padding-top: .75rem;
  border-radius: var(--st-radius, 6px);
  font-size: .78rem;
  font-weight: 600;
  color: var(--st-on-surface-variant);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.dashboard-shell.kin-admin-shell .st-sidebar-logout:hover,
.dashboard-shell.kin-admin-shell .st-sidebar-logout:focus-visible {
  background: color-mix(in srgb, var(--danger, #dc3545) 14%, transparent);
  color: var(--danger, #dc3545);
  outline: none;
}

.dashboard-shell.kin-admin-shell .st-sidebar-logout-icon {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.dashboard-shell.kin-admin-shell .st-sidebar-logout-icon svg {
  width: 1rem;
  height: 1rem;
}

.dashboard-shell.kin-admin-shell .st-sidebar-logout-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* 4. Slightly tighter sidebar nav padding on admin pages so the extra
   admin group fits comfortably without scrolling on 1024px+ viewports. */
.dashboard-shell.kin-admin-shell .st-sidebar-nav > a {
  padding: .45rem .65rem;
  font-size: .82rem;
}

/* 5. Admin page header baseline — compact, no giant hero. Per-page
   kinetic scopes (e.g. .kin-admin-plans) override these locally. */
.dashboard-shell.kin-admin-shell .admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin: 0 0 .55rem;
  padding: .72rem .9rem;
  border-radius: .8rem;
  background: var(--st-surface-container-low, var(--st-surface));
  border: 1px solid var(--st-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 8px 24px rgba(0, 0, 0, .22);
}

.dashboard-shell.kin-admin-shell .admin-page-header .admin-page-title-block {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

.dashboard-shell.kin-admin-shell .admin-page-header .admin-page-title {
  margin: 0;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.dashboard-shell.kin-admin-shell .admin-page-header .admin-page-kicker {
  display: none;
}

.dashboard-shell.kin-admin-shell .admin-page-header .admin-page-subtitle {
  margin: 0;
  max-width: 48rem;
  font-size: .78rem;
  line-height: 1.28;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .admin-page-header .admin-page-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* 6. Admin status-bar baseline — compact horizontal strip with pills. */
.dashboard-shell.kin-admin-shell .admin-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem;
  margin: 0 0 .65rem;
  padding: .42rem .55rem;
  border-radius: .72rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 75%, transparent);
  border: 1px solid var(--st-border);
}

/* 7. Admin page metric card baseline — used by revenue, usage, users. */
.dashboard-shell.kin-admin-shell .metric-card {
  display: grid;
  gap: .15rem;
  padding: .55rem .7rem;
  border-radius: .72rem;
  background: var(--st-surface-container-low, var(--st-surface));
  border: 1px solid var(--st-border);
  border-left: 3px solid var(--st-primary-container, var(--st-primary));
}

.dashboard-shell.kin-admin-shell .metric-card .metric-label {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .metric-card .metric-value {
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .metric-card .metric-hint {
  font-size: .72rem;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .metric-card.is-success {
  border-left-color: var(--kin-success, var(--st-status-success));
}
.dashboard-shell.kin-admin-shell .metric-card.is-warning {
  border-left-color: var(--kin-warning, var(--st-status-warning));
}
.dashboard-shell.kin-admin-shell .metric-card.is-info {
  border-left-color: var(--kin-tertiary, var(--st-primary));
}

/* 8. Admin kv-strip baseline — compact horizontal key/value row. */
.dashboard-shell.kin-admin-shell .kv-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .4rem;
  margin: 0 0 .65rem;
  padding: 0;
  list-style: none;
}

.dashboard-shell.kin-admin-shell .kv-strip,
.dashboard-shell.kin-admin-shell .kv-strip-item {
  background: transparent;
}

.dashboard-shell.kin-admin-shell .kv-strip-item {
  display: grid;
  gap: .1rem;
  padding: .42rem .65rem;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 70%, transparent);
  border: 1px solid var(--st-border);
  min-width: 8rem;
}

.dashboard-shell.kin-admin-shell .kv-strip-item dt {
  margin: 0;
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .kv-strip-item dd {
  margin: 0;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: .98rem;
  font-weight: 700;
  color: var(--st-text);
}

/* 9. Admin safety-strip baseline — keeps existing semantic classes,
   applies kinetic border/glow + a left accent bar. */
.dashboard-shell.kin-admin-shell .safety-strip {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .8rem;
  padding: .55rem .75rem;
  border-radius: .72rem;
  background: color-mix(in srgb, var(--kin-success, var(--st-status-success)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kin-success, var(--st-status-success)) 35%, var(--st-border));
  border-left: 3px solid var(--kin-success, var(--st-status-success));
  font-size: .8rem;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .safety-strip.is-success {
  /* default above already covers success */
}

.dashboard-shell.kin-admin-shell .safety-strip-icon {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  color: var(--kin-success, var(--st-status-success));
}

.dashboard-shell.kin-admin-shell .safety-strip-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dashboard-shell.kin-admin-shell .safety-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--st-on-surface-variant);
}

.dashboard-shell.kin-admin-shell .safety-strip-list li {
  margin: 0;
  padding: 0;
}

/* 10. Admin section card baseline (used by billing-grid children). */
.dashboard-shell.kin-admin-shell .card.billing-section,
.dashboard-shell.kin-admin-shell .card.studio-panel {
  border-radius: .8rem;
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, var(--st-surface));
}

.dashboard-shell.kin-admin-shell .billing-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .billing-section-head h2 {
  margin: 0;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.005em;
}

.dashboard-shell.kin-admin-shell .billing-section-head p {
  margin: .12rem 0 0;
  font-size: .75rem;
  color: var(--st-muted);
}

/* 11. Empty state baseline — used inside table bodies. */
.dashboard-shell.kin-admin-shell .empty-state {
  padding: 1rem;
  text-align: center;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .empty-state .empty-title {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .empty-state .empty-text {
  margin: .25rem 0 0;
  font-size: .78rem;
  color: var(--st-muted);
}

/* 12. Mobile: keep admin section + logout accessible. */
@media (max-width: 767px) {
  .dashboard-shell.kin-admin-shell .st-sidebar-section-label {
    font-size: .58rem;
  }
  .dashboard-shell.kin-admin-shell .st-sidebar-section a,
  .dashboard-shell.kin-admin-shell .st-sidebar-logout {
    font-size: .78rem;
  }
}

/* === ZAPSOC Kinetic Admin Revenue · Phase 8G.8B ===
   Page-specific restyle for public/admin-revenue.php on top of the
   shared 8G.8A admin shell. Scope: body.kin-admin-revenue.
   Preserves all real diagnostics, manual credit adjustment flow,
   redacted secret labels, and empty states. Adds tighter rhythm and
   kinetic compact layout for the metric row, kv-strip, safety strip,
   billing-grid sections, and ledger/checkout tables.
   ============================================================= */

/* Tighter main padding to match the compact admin rhythm. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue > .dashboard-main {
  padding-top: .45rem;
}

/* Metric row — wraps to 4 columns at desktop, 2 at tablet, 1 at mobile. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin: 0 0 .75rem;
}

@media (max-width: 1100px) {
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .metrics-row {
    grid-template-columns: 1fr;
  }
}

/* Metric card — compact, mono value, status left-border.
   Re-uses the 8G.8A .metric-card baseline; this layer tightens further. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card {
  display: grid;
  gap: .12rem;
  padding: .6rem .75rem;
  border-radius: .72rem;
  background: var(--st-surface-container-low, var(--st-surface));
  border: 1px solid var(--st-border);
  border-left: 3px solid var(--kin-tertiary, var(--st-primary));
  min-width: 0;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card .metric-label {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card .metric-value {
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--st-text);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card .metric-hint {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .68rem;
  color: var(--st-muted);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card.is-success {
  border-left-color: var(--kin-success, var(--st-status-success));
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card.is-warning {
  border-left-color: var(--kin-warning, var(--st-status-warning));
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card.is-info {
  border-left-color: var(--kin-tertiary, var(--st-primary));
}

/* KV strip — compact horizontal pill row with mono numbers. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .4rem;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-strip-item {
  display: grid;
  gap: .08rem;
  padding: .42rem .7rem;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 70%, transparent);
  border: 1px solid var(--st-border);
  min-width: 7.5rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-strip-item dt {
  margin: 0;
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-strip-item dd {
  margin: 0;
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .98rem;
  font-weight: 700;
  color: var(--st-text);
}

/* Safety strip — kinetic left accent bar + tight padding. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .safety-strip {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0 0 .8rem;
  padding: .55rem .75rem;
  border-radius: .72rem;
  background: color-mix(in srgb, var(--kin-success, var(--st-status-success)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kin-success, var(--st-status-success)) 35%, var(--st-border));
  border-left: 3px solid var(--kin-success, var(--st-status-success));
  font-size: .78rem;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .safety-strip-icon {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  color: var(--kin-success, var(--st-status-success));
  margin-top: .05rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .safety-strip-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .safety-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--st-on-surface-variant);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .safety-strip-list li {
  margin: 0;
  padding: 0;
}

/* Billing grid — 2 columns desktop, 1 column mobile. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .65rem;
  margin: 0 0 .65rem;
}

@media (max-width: 980px) {
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-grid {
    grid-template-columns: 1fr;
  }
}

/* Billing section card — compact padding, kinetic accent. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section {
  border-radius: .8rem;
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, var(--st-surface));
  border-left: 3px solid var(--kin-tertiary, var(--st-primary));
  overflow: hidden;
  min-width: 0;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section-head h2 {
  margin: 0;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section-head p {
  margin: .12rem 0 0;
  font-size: .74rem;
  color: var(--st-muted);
}

/* kv-list inside billing-section — match revenue read-only diagnostics look. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-list {
  list-style: none;
  margin: 0;
  padding: .6rem .85rem;
  display: grid;
  gap: .32rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .65rem;
  font-size: .78rem;
  padding-bottom: .3rem;
  border-bottom: 1px dashed var(--st-border);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-list li > span:first-child {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-muted);
  flex: 0 0 auto;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-list li > span:last-child {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  color: var(--st-text);
  text-align: right;
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-list code {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: 4px;
  padding: 0 .3rem;
}

/* billing-foot helper paragraph. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-foot {
  margin: 0;
  padding: .55rem .85rem .75rem;
  font-size: .74rem;
  color: var(--st-muted);
  border-top: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-foot a {
  color: var(--kin-tertiary, var(--st-primary));
}

/* Manual credit adjustment form inside billing-section. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section form {
  padding: .65rem .85rem;
  display: grid;
  gap: .55rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding-top: .35rem;
  border-top: 1px solid var(--st-border);
  margin-top: .35rem;
  flex-wrap: wrap;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .form-help {
  font-size: .72rem;
  color: var(--st-muted);
}

/* Table wrap — already styled elsewhere; tighten padding inside revenue cards. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .table-wrap {
  padding: 0;
  margin: 0;
  border: none;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .admin-table {
  margin: 0;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .admin-table th {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
  padding: .5rem .65rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .admin-table td {
  padding: .5rem .65rem;
  font-size: .78rem;
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .admin-table code {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .74rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: 4px;
  padding: 0 .3rem;
}

/* Empty state inside revenue tables. */
.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .empty-state {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .empty-state .empty-title {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .empty-state .empty-text {
  margin: .25rem 0 0;
  font-size: .78rem;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .empty-state a {
  color: var(--kin-tertiary, var(--st-primary));
}

/* Mobile rhythm — single column, reduced padding. */
@media (max-width: 600px) {
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .metric-card,
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .kv-strip-item {
    padding: .5rem .6rem;
  }
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section-head,
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section .kv-list,
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-section form,
  .dashboard-shell.kin-admin-shell.kin-admin-revenue .billing-foot {
    padding-left: .65rem;
    padding-right: .65rem;
  }
}

/* === ZAPSOC Kinetic Remaining Admin Pages · Phase 8G.8C ===
   Refines the remaining admin pages (settings, users, user create/edit,
   usage, payment fixtures, media import, media review) inside the
   shared 8G.8A admin shell. Scoped to body.kin-admin-shell so non-admin
   pages are untouched.

   All rules only tighten or restyle existing classes used by these
   pages — no markup is renamed and no logic is changed.
   ============================================================= */

/* 1. Tighter .admin-page main column — keep room for header + content. */
.dashboard-shell.kin-admin-shell > .dashboard-main.admin-page {
  padding-top: .45rem;
  max-width: 1600px;
}

/* 2. Compact stat-card row used by every remaining admin page.
   Uses grid with auto-fit so the row wraps gracefully on narrow viewports. */
.dashboard-shell.kin-admin-shell .media-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem;
  margin: 0 0 .75rem;
}

.dashboard-shell.kin-admin-shell .media-stats .stat-card,
.dashboard-shell.kin-admin-shell .stat-card {
  display: grid;
  gap: .12rem;
  padding: .55rem .7rem;
  border-radius: .72rem;
  background: var(--st-surface-container-low, var(--st-surface));
  border: 1px solid var(--st-border);
  border-left: 3px solid var(--kin-tertiary, var(--st-primary));
  min-width: 0;
}

.dashboard-shell.kin-admin-shell .stat-card span {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .stat-card strong {
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: 1rem;
  font-weight: 700;
  color: var(--st-text);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .stat-card strong.text-success {
  color: var(--kin-success, var(--st-status-success));
}
.dashboard-shell.kin-admin-shell .stat-card strong.text-warning {
  color: var(--kin-warning, var(--st-status-warning));
}
.dashboard-shell.kin-admin-shell .stat-card strong.muted {
  color: var(--st-muted);
}

/* 3. Compact admin toolbar (filter / search bar). */
.dashboard-shell.kin-admin-shell .admin-toolbar {
  display: grid;
  gap: .55rem;
  padding: .55rem .75rem;
  margin: 0 0 .75rem;
  border-radius: .72rem;
  background: var(--st-surface-container-low, var(--st-surface));
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .admin-filter-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 12rem) auto;
  align-items: end;
  gap: .55rem;
  margin: 0;
}

.dashboard-shell.kin-admin-shell .admin-filter-form label {
  display: grid;
  gap: .25rem;
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .admin-filter-form .form-control {
  margin: 0;
  font-size: .82rem;
}

@media (max-width: 720px) {
  .dashboard-shell.kin-admin-shell .admin-filter-form {
    grid-template-columns: 1fr;
  }
}

/* 4. Compact admin form card + danger zone. */
.dashboard-shell.kin-admin-shell .admin-form-card,
.dashboard-shell.kin-admin-shell .admin-danger-zone,
.dashboard-shell.kin-admin-shell .card.studio-panel,
.dashboard-shell.kin-admin-shell .card.admin-toolbar,
.dashboard-shell.kin-admin-shell section.card,
.dashboard-shell.kin-admin-shell section.card.review-ops-toolbar {
  margin: 0 0 .65rem;
  padding: 0;
  border-radius: .8rem;
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, var(--st-surface));
  overflow: hidden;
}

.dashboard-shell.kin-admin-shell .admin-form-card > .kicker,
.dashboard-shell.kin-admin-shell .admin-danger-zone > .kicker,
.dashboard-shell.kin-admin-shell .card.studio-panel > .kicker,
.dashboard-shell.kin-admin-shell section.card > .kicker,
.dashboard-shell.kin-admin-shell section.card.review-ops-toolbar > .kicker,
.dashboard-shell.kin-admin-shell section.card.studio-panel > .kicker,
.dashboard-shell.kin-admin-shell section.card.import-policy-panel > .kicker {
  display: block;
  margin: 0;
  padding: .55rem .85rem 0;
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kin-tertiary, var(--st-primary));
}

.dashboard-shell.kin-admin-shell .admin-form-card > h2,
.dashboard-shell.kin-admin-shell .admin-danger-zone > h2,
.dashboard-shell.kin-admin-shell .card.studio-panel > h2,
.dashboard-shell.kin-admin-shell section.card > h2,
.dashboard-shell.kin-admin-shell section.card.studio-panel > h2,
.dashboard-shell.kin-admin-shell section.card.import-policy-panel > h2 {
  margin: 0;
  padding: .25rem .85rem .55rem;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .admin-form-card > p,
.dashboard-shell.kin-admin-shell .admin-danger-zone > p,
.dashboard-shell.kin-admin-shell .card.studio-panel > p,
.dashboard-shell.kin-admin-shell section.card > p:not(.kicker) {
  margin: 0;
  padding: 0 .85rem .55rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .admin-form-card > form,
.dashboard-shell.kin-admin-shell .admin-danger-zone > form,
.dashboard-shell.kin-admin-shell .card.studio-panel > form {
  padding: 0 .85rem .85rem;
  display: grid;
  gap: .55rem;
}

.dashboard-shell.kin-admin-shell .admin-form-card > .metadata-grid,
.dashboard-shell.kin-admin-shell .admin-form-card > .settings-grid,
.dashboard-shell.kin-admin-shell .admin-form-card > .checkbox-grid,
.dashboard-shell.kin-admin-shell .admin-form-card > .admin-action-buttons,
.dashboard-shell.kin-admin-shell .admin-form-card > ul,
.dashboard-shell.kin-admin-shell .admin-form-card > ol {
  padding-left: .85rem;
  padding-right: .85rem;
}

.dashboard-shell.kin-admin-shell .admin-danger-zone {
  border-left: 3px solid var(--kin-warning, var(--st-status-warning));
}

.dashboard-shell.kin-admin-shell .admin-danger-zone > .admin-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: .55rem .85rem .85rem;
}

.dashboard-shell.kin-admin-shell .admin-danger-zone > .admin-action-buttons form {
  margin: 0;
}

/* 5. Tighten admin-table inside admin pages. */
.dashboard-shell.kin-admin-shell .admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.dashboard-shell.kin-admin-shell .admin-table th,
.dashboard-shell.kin-admin-shell .admin-table td {
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--st-border);
  text-align: left;
  vertical-align: middle;
  font-size: .78rem;
}

.dashboard-shell.kin-admin-shell .admin-table th {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 70%, transparent);
  border-bottom-color: var(--st-border-strong);
  white-space: nowrap;
}

.dashboard-shell.kin-admin-shell .admin-table td {
  color: var(--st-on-surface);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .admin-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-shell.kin-admin-shell .admin-table tbody tr:hover td {
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 45%, transparent);
}

.dashboard-shell.kin-admin-shell .admin-table code {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: 4px;
  padding: 0 .3rem;
}

/* 6. Action buttons inside admin tables. */
.dashboard-shell.kin-admin-shell .admin-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dashboard-shell.kin-admin-shell .admin-action-buttons form {
  margin: 0;
  display: inline-flex;
}

.dashboard-shell.kin-admin-shell .admin-action-buttons .btn {
  min-height: 1.75rem;
  padding: .25rem .55rem;
  font-size: .72rem;
  border-radius: .55rem;
}

/* 7. Settings grid + checkbox grid (form layout). */
.dashboard-shell.kin-admin-shell .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .55rem;
}

.dashboard-shell.kin-admin-shell .settings-grid.two-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .dashboard-shell.kin-admin-shell .settings-grid,
  .dashboard-shell.kin-admin-shell .settings-grid.two-fields {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell.kin-admin-shell .settings-grid label,
.dashboard-shell.kin-admin-shell .admin-user-form label,
.dashboard-shell.kin-admin-shell .admin-filter-form label {
  display: grid;
  gap: .25rem;
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .admin-user-form label,
.dashboard-shell.kin-admin-shell .settings-grid label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .82rem;
  color: var(--st-on-surface-variant);
}

.dashboard-shell.kin-admin-shell .checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .4rem;
  padding: .55rem .85rem .85rem;
}

.dashboard-shell.kin-admin-shell .checkbox-grid .check-row {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .35rem .55rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 60%, transparent);
  border: 1px solid var(--st-border);
  font-size: .78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--st-on-surface);
  cursor: pointer;
}

.dashboard-shell.kin-admin-shell .check-row {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .78rem;
  color: var(--st-on-surface-variant);
}

.dashboard-shell.kin-admin-shell .inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding-top: .35rem;
  border-top: 1px solid var(--st-border);
  margin-top: .35rem;
}

/* 8. Form controls consistent kinetic look. */
.dashboard-shell.kin-admin-shell .form-control {
  font-family: var(--st-font-body);
  font-size: .82rem;
  padding: .4rem .55rem;
  border-radius: .55rem;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .form-control:focus {
  outline: none;
  border-color: var(--kin-tertiary, var(--st-primary));
  box-shadow: var(--st-glow-focus);
}

.dashboard-shell.kin-admin-shell .form-control:disabled {
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 60%, transparent);
  color: var(--st-muted);
}

/* 9. Inline alerts (success/danger) — compact kinetic pill. */
.dashboard-shell.kin-admin-shell .alert {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .65rem;
  padding: .5rem .75rem;
  border-radius: .65rem;
  font-size: .82rem;
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .alert-success {
  background: color-mix(in srgb, var(--kin-success, var(--st-status-success)) 10%, transparent);
  border-color: color-mix(in srgb, var(--kin-success, var(--st-status-success)) 40%, var(--st-border));
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .alert-danger {
  background: color-mix(in srgb, var(--kin-error, var(--st-status-danger)) 10%, transparent);
  border-color: color-mix(in srgb, var(--kin-error, var(--st-status-danger)) 40%, var(--st-border));
  color: var(--st-text);
}

/* 10. Status terminal + metadata grid + helper text. */
.dashboard-shell.kin-admin-shell .status-terminal {
  margin: .55rem .85rem .85rem;
  padding: .5rem .65rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  color: var(--st-on-surface-variant);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .status-terminal.compact-status {
  margin: 0;
  padding: .35rem .55rem;
}

.dashboard-shell.kin-admin-shell .metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .45rem;
  padding: .55rem .85rem .85rem;
}

.dashboard-shell.kin-admin-shell .metadata-grid > div {
  display: grid;
  gap: .12rem;
  padding: .4rem .55rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 60%, transparent);
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .metadata-grid > div > span {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .metadata-grid > div > strong {
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: .82rem;
  color: var(--st-text);
}

/* 11. Section head + kicker consistency. */
.dashboard-shell.kin-admin-shell .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .section-head.compact {
  padding: .35rem .65rem;
}

.dashboard-shell.kin-admin-shell .section-head h2,
.dashboard-shell.kin-admin-shell .section-head h3 {
  margin: 0;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: .88rem;
  font-weight: 700;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .section-head h3 {
  font-size: .82rem;
}

.dashboard-shell.kin-admin-shell .section-head .kicker {
  margin: 0;
  padding: 0;
  font-size: .6rem;
}

.dashboard-shell.kin-admin-shell .section-head + * {
  margin: 0;
}

/* 12. Two-column music-dashboard-grid used by admin-usage. */
.dashboard-shell.kin-admin-shell .music-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .65rem;
  margin: 0 0 .65rem;
}

@media (max-width: 980px) {
  .dashboard-shell.kin-admin-shell .music-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* 13. Review-page (admin-media-review) layout: stack + card + grid + diff. */
.dashboard-shell.kin-admin-shell .review-stack {
  display: grid;
  gap: .65rem;
  margin: 0;
}

.dashboard-shell.kin-admin-shell .review-card {
  display: grid;
  gap: .55rem;
  padding: .65rem .85rem;
  border-radius: .8rem;
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, var(--st-surface));
}

.dashboard-shell.kin-admin-shell .review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  padding: 0 0 .55rem;
  border-bottom: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .review-header h2 {
  margin: 0;
  font-family: var(--st-font-headline, var(--st-font-body));
  font-size: 1rem;
  font-weight: 700;
  color: var(--st-text);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .review-header .kicker {
  margin: 0 0 .12rem;
  padding: 0;
  font-size: .6rem;
}

.dashboard-shell.kin-admin-shell .review-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  flex: 0 0 auto;
  max-width: 24rem;
  justify-content: flex-end;
}

.dashboard-shell.kin-admin-shell .review-badges .badge {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-shell.kin-admin-shell .review-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: .55rem;
}

@media (max-width: 1100px) {
  .dashboard-shell.kin-admin-shell .review-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .dashboard-shell.kin-admin-shell .review-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell.kin-admin-shell .review-preview-panel,
.dashboard-shell.kin-admin-shell .review-diff-panel,
.dashboard-shell.kin-admin-shell .review-edit-panel {
  display: grid;
  gap: .55rem;
  padding: .55rem;
  border-radius: .65rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 50%, transparent);
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .review-preview {
  display: grid;
  place-items: center;
  padding: .55rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: .55rem;
  min-height: 8rem;
  max-height: 16rem;
  overflow: hidden;
}

.dashboard-shell.kin-admin-shell .review-preview img,
.dashboard-shell.kin-admin-shell .review-preview video {
  max-width: 100%;
  max-height: 14rem;
  border-radius: .55rem;
}

.dashboard-shell.kin-admin-shell .review-preview audio {
  width: 100%;
}

.dashboard-shell.kin-admin-shell .review-preview-empty {
  color: var(--st-muted);
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-shell.kin-admin-shell .review-file-card {
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  gap: .55rem;
  align-items: baseline;
  padding: .35rem .55rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 60%, transparent);
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .review-file-card span {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .review-file-card strong {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .74rem;
  color: var(--st-text);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .review-cover-ops {
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--kin-tertiary, var(--st-primary)) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--kin-tertiary, var(--st-primary)) 25%, var(--st-border));
}

.dashboard-shell.kin-admin-shell .review-cover-ops .kicker {
  margin: 0;
  padding: 0;
  font-size: .6rem;
}

.dashboard-shell.kin-admin-shell .review-diff-table {
  display: grid;
  gap: .2rem;
}

.dashboard-shell.kin-admin-shell .review-diff-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: .55rem;
  padding: .35rem .5rem;
  border-radius: .45rem;
  font-size: .76rem;
  border: 1px solid transparent;
}

.dashboard-shell.kin-admin-shell .review-diff-row > span:first-child {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-muted);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .review-diff-row > span + span {
  font-family: var(--st-font-body);
  color: var(--st-on-surface);
  word-break: break-word;
}

.dashboard-shell.kin-admin-shell .review-diff-row.is-changed {
  background: color-mix(in srgb, var(--kin-tertiary, var(--st-primary)) 8%, transparent);
  border-color: color-mix(in srgb, var(--kin-tertiary, var(--st-primary)) 25%, var(--st-border));
}

.dashboard-shell.kin-admin-shell .review-diff-head {
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 70%, transparent);
  border-bottom: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .review-reason {
  display: grid;
  gap: .25rem;
  padding: .5rem .65rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 60%, transparent);
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .review-reason span {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .review-reason p {
  margin: 0;
  font-size: .78rem;
  color: var(--st-on-surface);
}

/* 14. Cover result grid (after image generation). */
.dashboard-shell.kin-admin-shell .cover-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .35rem;
  margin-top: .35rem;
}

.dashboard-shell.kin-admin-shell .cover-result-card {
  display: grid;
  gap: .35rem;
  padding: .35rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 70%, transparent);
  border: 1px solid var(--st-border);
}

.dashboard-shell.kin-admin-shell .cover-result-card img {
  width: 100%;
  height: auto;
  border-radius: .35rem;
  display: block;
}

/* 15. Review ops toolbar — batch operations header. */
.dashboard-shell.kin-admin-shell section.card.review-ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .55rem .85rem;
  flex-wrap: wrap;
}

.dashboard-shell.kin-admin-shell section.card.review-ops-toolbar > div {
  min-width: 0;
}

.dashboard-shell.kin-admin-shell section.card.review-ops-toolbar .admin-action-buttons {
  flex: 0 0 auto;
}

/* 16. Muted helper paragraphs inside admin cards. */
.dashboard-shell.kin-admin-shell .admin-form-card .muted,
.dashboard-shell.kin-admin-shell .admin-danger-zone .muted,
.dashboard-shell.kin-admin-shell .card.studio-panel .muted,
.dashboard-shell.kin-admin-shell section.card .muted {
  margin: 0;
  padding: 0 .85rem .65rem;
  font-size: .75rem;
  color: var(--st-muted);
}

.dashboard-shell.kin-admin-shell .admin-form-card .muted a,
.dashboard-shell.kin-admin-shell .admin-danger-zone .muted a,
.dashboard-shell.kin-admin-shell .card.studio-panel .muted a,
.dashboard-shell.kin-admin-shell section.card .muted a {
  color: var(--kin-tertiary, var(--st-primary));
}

.dashboard-shell.kin-admin-shell .admin-form-card .muted code,
.dashboard-shell.kin-admin-shell .card.studio-panel .muted code,
.dashboard-shell.kin-admin-shell section.card .muted code {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: 4px;
  padding: 0 .3rem;
}

.dashboard-shell.kin-admin-shell .admin-form-card ul.muted,
.dashboard-shell.kin-admin-shell .card.studio-panel ul.muted,
.dashboard-shell.kin-admin-shell section.card ul.muted {
  list-style: none;
  margin: 0;
  padding: 0 .85rem .85rem;
  display: grid;
  gap: .35rem;
}

.dashboard-shell.kin-admin-shell .admin-form-card ul.muted li,
.dashboard-shell.kin-admin-shell .card.studio-panel ul.muted li,
.dashboard-shell.kin-admin-shell section.card ul.muted li {
  margin: 0;
  padding: .4rem .55rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 50%, transparent);
  border: 1px solid var(--st-border);
  font-size: .76rem;
  color: var(--st-on-surface-variant);
  line-height: 1.45;
}

.dashboard-shell.kin-admin-shell .admin-form-card ul.muted li strong,
.dashboard-shell.kin-admin-shell .card.studio-panel ul.muted li strong,
.dashboard-shell.kin-admin-shell section.card ul.muted li strong {
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .admin-form-card ul.muted li code,
.dashboard-shell.kin-admin-shell .card.studio-panel ul.muted li code,
.dashboard-shell.kin-admin-shell section.card ul.muted li code {
  font-family: var(--st-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  background: color-mix(in srgb, var(--st-surface-container, var(--st-surface)) 80%, transparent);
  border: 1px solid var(--st-border);
  border-radius: 4px;
  padding: 0 .3rem;
}

/* 17. Empty state inside admin cards (e.g. fixtures empty / review empty). */
.dashboard-shell.kin-admin-shell .empty-state,
.dashboard-shell.kin-admin-shell section.card .empty-state,
.dashboard-shell.kin-admin-shell section.card .muted.empty-state {
  padding: 1.25rem 1rem;
  text-align: center;
}

.dashboard-shell.kin-admin-shell .empty-state .empty-title,
.dashboard-shell.kin-admin-shell section.card .empty-state .empty-title {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--st-text);
}

.dashboard-shell.kin-admin-shell .empty-state .empty-text,
.dashboard-shell.kin-admin-shell section.card .empty-state .empty-text {
  margin: .25rem 0 0;
  font-size: .78rem;
  color: var(--st-muted);
}

/* 18. Mobile rhythm — single column everywhere. */
@media (max-width: 767px) {
  .dashboard-shell.kin-admin-shell > .dashboard-main.admin-page {
    padding: .25rem .65rem 4rem;
  }
  .dashboard-shell.kin-admin-shell .media-stats {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-shell.kin-admin-shell .stat-card {
    padding: .5rem .55rem;
  }
  .dashboard-shell.kin-admin-shell .admin-page-header {
    padding: .55rem .65rem;
  }
  .dashboard-shell.kin-admin-shell .admin-page-header .admin-page-title {
    font-size: 1.05rem;
  }
  .dashboard-shell.kin-admin-shell .review-card {
    padding: .55rem .65rem;
  }
  .dashboard-shell.kin-admin-shell .review-diff-row {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
}

/* === ZAPSOC Admin Media Review Overflow Hotfix · Phase 8G.8D ===
   Authenticated Playwright QA found page-wide horizontal scroll on
   /admin-media-review.php at 1440 viewport (scrollWidth 1662 vs
   innerWidth 1440). Root cause: CSS grid items default to
   min-width: auto, so the .review-edit-panel was wider than its
   allocated 1fr column because of long input/textarea content.
   Fix: force min-width: 0 on every grid container in the review
   card chain so 1fr columns can actually shrink, and let long
   strings (file names, slugs, IDs, URLs) wrap instead of pushing
   the column wider.
   ============================================================= */

.dashboard-shell.kin-admin-shell .review-card,
.dashboard-shell.kin-admin-shell .review-stack,
.dashboard-shell.kin-admin-shell .review-grid,
.dashboard-shell.kin-admin-shell .review-header,
.dashboard-shell.kin-admin-shell .review-preview-panel,
.dashboard-shell.kin-admin-shell .review-diff-panel,
.dashboard-shell.kin-admin-shell .review-edit-panel,
.dashboard-shell.kin-admin-shell .review-diff-table,
.dashboard-shell.kin-admin-shell .review-diff-row,
.dashboard-shell.kin-admin-shell .review-preview,
.dashboard-shell.kin-admin-shell .review-file-card,
.dashboard-shell.kin-admin-shell .review-cover-ops,
.dashboard-shell.kin-admin-shell .cover-result-grid,
.dashboard-shell.kin-admin-shell .cover-result-card,
.dashboard-shell.kin-admin-shell .review-reason {
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell.kin-admin-shell .review-card {
  overflow: hidden;
}

.dashboard-shell.kin-admin-shell .review-edit-panel form,
.dashboard-shell.kin-admin-shell .review-diff-panel .review-diff-table {
  max-width: 100%;
}

/* Allow long form values, file names, slugs, IDs, URLs to wrap
   instead of forcing their parent column wider. */
.dashboard-shell.kin-admin-shell .review-card code,
.dashboard-shell.kin-admin-shell .review-card pre,
.dashboard-shell.kin-admin-shell .review-card .form-control,
.dashboard-shell.kin-admin-shell .review-card .review-file-card strong,
.dashboard-shell.kin-admin-shell .review-card .review-diff-row > span,
.dashboard-shell.kin-admin-shell .review-card .review-reason p,
.dashboard-shell.kin-admin-shell .review-card .badge {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.dashboard-shell.kin-admin-shell .review-card .form-control {
  min-width: 0;
  width: 100%;
}

/* Constrain any future inner scroll containers so they never
   push the page wider. */
.dashboard-shell.kin-admin-shell .review-card .table-wrap,
.dashboard-shell.kin-admin-shell .review-card .review-diff-table {
  max-width: 100%;
  overflow-x: auto;
}

/* Make sure the admin-page-header actions row doesn't push wider
   on review/settings pages with many buttons. */
.dashboard-shell.kin-admin-shell .admin-page-header .admin-page-actions {
  flex-wrap: wrap;
  max-width: 100%;
}

/* === ZAPSOC Music Studio Layout Hotfix · Phase 8G.9A ===
   Authenticated QA reported /music-studio.php content rendering
   underneath the fixed sidebar (main.left=0 while sidebar.right=256).
   Root cause: equal-specificity CSS cascade. The shell rule
   `.dashboard-shell.st-stitch > .dashboard-main { margin-left: 16rem; }`
   was overridden by `.dashboard-shell.st-stitch .st-page { margin: 0 auto; }`
   and `.st-music-builder { margin: 0 auto; width: 100%; }`, both of
   which reset margin-left to auto.
   Fix: scope the shell margin offset to body.music-studio-page so the
   scoped selector beats the equal-specificity resets above.
   Also: instrument block moved higher (see music-studio.php) so it
   appears near the top of the prompt builder area, and mobile
   horizontal-scroll safety rules added.
   ============================================================= */

/* Restore the 16rem sidebar offset for music-studio specifically.
   Specificity 0,4,0 beats both .dashboard-shell.st-stitch > .dashboard-main
   (0,3,0) and .dashboard-shell.st-stitch .st-page (0,3,0). */
body.music-studio-page.dashboard-shell.st-stitch .dashboard-main {
  margin-left: 16rem;
  width: calc(100% - 16rem);
  margin-right: 0;
  max-width: none;
  min-width: 0;
}

/* Mobile: drop the sidebar offset so the page is full-width. */
@media (max-width: 767px) {
  body.music-studio-page.dashboard-shell.st-stitch .dashboard-main {
    margin-left: 0;
    width: 100%;
  }
}

/* Reset the .st-music-builder margin that was also fighting the shell;
   keep its layout but remove the redundant `margin: 0 auto` so the
   shell-level offset shows through cleanly. */
body.music-studio-page .st-music-builder {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  min-width: 0;
  padding: 1.25rem 1.75rem 6rem;
}

/* Mobile: tighter padding for music-studio. */
@media (max-width: 767px) {
  body.music-studio-page .st-music-builder {
    padding: 1rem 1rem 6rem;
  }
}

/* Long instrument group titles + song-prompt preview wraps gracefully. */
body.music-studio-page .st-prompt-preview,
body.music-studio-page .st-music-summary,
body.music-studio-page .st-music-group-title,
body.music-studio-page .st-instrument-name,
body.music-studio-page .st-instrument-flavor {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Defensive overflow guard — never let any element push the page wider
   than the music-studio main column. */
body.music-studio-page .st-music-builder,
body.music-studio-page .st-music-grid,
body.music-studio-page .st-music-col,
body.music-studio-page .st-music-col-preview,
body.music-studio-page .st-panel,
body.music-studio-page .st-music-recent-grid,
body.music-studio-page .st-music-recent-card {
  min-width: 0;
  max-width: 100%;
}

/* === ZAPSOC Music Studio Responsive Overflow Hotfix · Phase 8G.9A.1 ===
   Authenticated QA after deploy reported two remaining responsive
   problems on /music-studio.php:
     @1024 viewport: scrollWidth 1273 vs innerWidth 1024 (249px overflow)
     @430  viewport: scrollWidth 444  vs innerWidth 430  (14px overflow)

   Root cause: CSS block-level defaults give every container an implicit
   `min-width: auto` which equals its min-content width. The topbar
   (search input + tabs + page title + command palette + theme + new
   project CTA + avatar + logout) sums to ~989px intrinsic width at
   1024. Because the topbar has no `min-width: 0` constraint, it expands
   its parent (main) past the viewport, and all subsequent siblings
   (hero, music-grid, panels) inherit the same width because they all
   share the same expanding parent.

   Fix:
     1. `body.music-studio-page .dashboard-main > * { min-width: 0; max-width: 100%; }`
        — every direct child of main must shrink to its container.
        Includes .st-topbar (which the 8G.9A list missed).
     2. `body.music-studio-page .dashboard-main { overflow-x: clip; }`
        — defensive last-resort. No inner content should escape, but if
        some plugin injects a fixed-width element, it cannot push the
        body wider than the viewport.
     3. At widths ≤ 1180px the music-studio's two-column
        left-builder / right-preview grid becomes too cramped. Force
        a single column earlier.
     4. Mobile (≤ 767px): drop the hero padding, tighten music-builder
        top padding, reduce panel padding, ensure no hero block pushes
        Instruments below the fold.
     5. Hero and st-create-flow also constrained so they can never
        widen the column.
   ============================================================= */

body.music-studio-page .dashboard-main {
  overflow-x: clip;
}

body.music-studio-page .dashboard-main > * {
  min-width: 0;
  max-width: 100%;
}

body.music-studio-page .st-topbar,
body.music-studio-page .st-create-flow,
body.music-studio-page .st-music-hero,
body.music-studio-page .st-music-grid,
body.music-studio-page .st-music-recent-grid {
  min-width: 0;
  max-width: 100%;
}

/* Force the music-studio's 2-col grid to a single column earlier than
   the default breakpoint, so it fits inside the 768px main column at
   1024 viewport. */
@media (max-width: 1180px) {
  body.music-studio-page .st-music-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile (≤ 767px): sidebar collapses, so main is full-width viewport.
   Compact hero + tighter builder padding so Instruments appear higher
   on the page (above the fold at 720px height). */
@media (max-width: 767px) {
  body.music-studio-page .st-music-builder {
    padding: .5rem 1rem 6rem;
    gap: .75rem;
  }

  body.music-studio-page .st-music-hero {
    padding: 1rem;
    margin-bottom: .25rem;
  }

  body.music-studio-page .st-music-hero-inner {
    padding: 0;
  }

  body.music-studio-page .st-panel {
    padding: .75rem .85rem;
  }

  body.music-studio-page .st-music-grid {
    gap: .5rem;
  }

  body.music-studio-page .st-music-instrument-groups {
    gap: .35rem;
  }

  body.music-studio-page [data-music-instrument-groups] {
    gap: .35rem;
  }

  body.music-studio-page .st-instrument-grid {
    gap: .35rem;
  }

  body.music-studio-page .st-music-recent-grid {
    gap: .5rem;
  }
}

/* === ZAPSOC Music Studio Prompt UX Polish · Phase 8G.9B ===
   After 8G.9A + 8G.9A.1 the music-studio is stable on all three
   viewports (no overflow, instruments above fold on 1440/1024).
   Remaining issue on mobile (430): instrumentTop = 964 still below
   the 900-fold because the decorative hero block (~250px tall) eats
   the entire viewport above the work area.

   Fix:
     1. Desktop: compact the hero text/padding so the work area starts
        earlier in the scroll.
     2. Mobile (≤ 767px): hide the decorative hero entirely. The
        title "Music Studio" is already shown in the topbar heading
        (`Music Studio`); the hero is decorative. Tools should look
        like tools, not landing pages.
     3. Tighten panel rhythm and instrument grid gaps on all sizes.
     4. Make the prompt preview panel feel like a builder: sticky-
        ish on desktop so the Open-in-Generator CTA stays in view as
        the user picks instruments.

   No markup changes, no JS hooks touched, no event targets moved.
   ============================================================= */

/* Desktop hero compaction. */
body.music-studio-page .st-music-hero {
  padding: 1.25rem 1.5rem;
  margin-bottom: .75rem;
}

body.music-studio-page .st-music-hero h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.025em;
  margin: .15rem 0 .25rem;
}

body.music-studio-page .st-music-hero p.kicker {
  font-size: .62rem;
  margin: 0 0 .25rem;
}

body.music-studio-page .st-music-hero p.st-music-hero-sub {
  font-size: .82rem;
  line-height: 1.35;
  margin: 0 0 .35rem;
  max-width: 56rem;
}

body.music-studio-page .st-music-hero-meta {
  margin-top: .5rem;
  gap: .5rem;
}

/* Tighten panel rhythm across all sizes. */
body.music-studio-page .st-panel {
  border-radius: .9rem;
}

body.music-studio-page .st-panel-head {
  margin-bottom: .55rem;
}

body.music-studio-page .st-panel-head h3 {
  font-size: .95rem;
  letter-spacing: -.005em;
}

body.music-studio-page .st-panel-hint {
  font-size: .75rem;
  line-height: 1.35;
}

/* Tighter instrument grid rhythm. */
body.music-studio-page .st-instrument-grid {
  gap: .45rem;
}

body.music-studio-page [data-music-instrument-groups] {
  gap: .55rem;
}

/* Tighter chip rows. */
body.music-studio-page .st-chip-row {
  gap: .35rem;
  flex-wrap: wrap;
}

/* Mobile: hide decorative hero entirely so work area starts near top. */
@media (max-width: 767px) {
  body.music-studio-page .st-music-hero {
    display: none;
  }

  body.music-studio-page .st-music-builder {
    padding-top: .25rem;
    gap: .55rem;
  }

  body.music-studio-page .st-panel {
    padding: .7rem .85rem;
    border-radius: .75rem;
  }

  body.music-studio-page .st-panel-head {
    margin-bottom: .35rem;
  }

  body.music-studio-page [data-music-instrument-groups] {
    gap: .35rem;
  }

  body.music-studio-page .st-instrument-grid {
    gap: .3rem;
  }

  body.music-studio-page .st-chip-row {
    gap: .3rem;
  }

  body.music-studio-page .st-music-group-title {
    font-size: .72rem;
    margin: .2rem 0;
  }
}

/* Desktop ≥ 1024: make the Final Prompt preview panel feel like a
   builder sticky — keeps the Open in Generator CTA reachable while
   the user scrolls through instruments. Pure CSS sticky, no JS. */
@media (min-width: 1024px) {
  body.music-studio-page .st-music-col-preview .st-panel {
    position: sticky;
    top: 1rem;
  }
}

/* === ZAPSOC Sidebar Logout Compact Hotfix · Phase 8G.9B.1 ===
   Authenticated Playwright reported that the sidebar logout link is
   rendered with default browser styling on music-studio (and any other
   dashboard-shell page that does not also carry .kin-admin-shell):
     admin-plans.php    ->  width 223, height 37  (compact, correct)
     music-studio.php   ->  width 255, height 276 (un-styled — broken)

   Root cause: the 8G.8A sidebar-logout rules were scoped to
   `.dashboard-shell.kin-admin-shell .st-sidebar-logout`. On music-studio
   (which only carries `music-studio-page`, not `kin-admin-shell`) the
   rules don't match, so the `<a>` falls back to default anchor styles
   (no padding, default 16px font, no flex), causing the icon + label to
   stack vertically and balloon the link to ~276px tall.

   This is also the source of the duplicate topbar logout on music-studio:
   sidebar.php renders `.st-sidebar-logout` whenever is_admin($user) is
   true, but the 8G.8A topbar-logout hide rule was scoped to
   `.kin-admin-shell`. So when an admin visits music-studio, both the
   sidebar logout AND the topbar logout render.

   Fix:
     1. Promote the sidebar-logout rules from `.kin-admin-shell` scope
        to `.dashboard-shell` so they apply on every page where
        sidebar.php renders the link (admin pages + music-studio +
        any future page where an admin visits).
     2. Extend the topbar-logout hide rule to also cover
        `.music-studio-page` so admins do not see logout twice on
        music-studio.

   Markup is unchanged. Auth flow is unchanged. The logout still
   posts to /logout.php and the href/title/aria-label are preserved.
   ============================================================= */

/* (1) Compact sidebar logout — apply on every dashboard-shell page,
   not just admin pages. Keeps the exact same visual the admin pages
   already had, so admins see one consistent footer logout everywhere. */
.dashboard-shell .st-sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  width: calc(100% - 2rem);
  margin: auto 1rem .5rem;
  padding: .55rem .7rem;
  border-top: 1px solid var(--st-border);
  padding-top: .75rem;
  border-radius: var(--st-radius, 6px);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-on-surface-variant);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.dashboard-shell .st-sidebar-logout:hover,
.dashboard-shell .st-sidebar-logout:focus-visible {
  background: color-mix(in srgb, var(--danger, #dc3545) 14%, transparent);
  color: var(--danger, #dc3545);
  outline: none;
}

.dashboard-shell .st-sidebar-logout-icon {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.dashboard-shell .st-sidebar-logout-icon svg {
  width: 1rem;
  height: 1rem;
}

.dashboard-shell .st-sidebar-logout-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (2) Hide the topbar logout whenever the sidebar logout is also rendered,
   which is true on every .dashboard-shell page when the user is admin.
   Admin pages already opt in via .kin-admin-shell; music-studio is the
   other major page an admin can visit, so opt it in too. */
.dashboard-shell.kin-admin-shell .st-topbar-logout,
.dashboard-shell.music-studio-page .st-topbar-logout {
  display: none;
}

/* Mobile override for sidebar logout: keep compact. */
@media (max-width: 767px) {
  .dashboard-shell .st-sidebar-section a,
  .dashboard-shell .st-sidebar-logout {
    font-size: .78rem;
  }
  .dashboard-shell .st-sidebar-logout {
    padding: .5rem .65rem;
    padding-top: .7rem;
    width: calc(100% - 1.5rem);
    margin: auto .75rem .4rem;
  }
}

/* === ZAPSOC Sidebar Responsive Polish · Phase 8G.9B.2 ===
   Phase 8G.9B.1 fixed the sidebar logout size on admin pages but the
   user block (.st-sidebar-account) and the role line below it
   (.st-sidebar-account-role) still lack truncation rules. With a long
   display name, role, or status, the role line wraps awkwardly and
   can balloon the sidebar footer. The sidebar scrollbar also has no
   visual treatment — it inherits the browser default which clashes
   with the Kinetic dark theme.

   Fix:
     1. Tighten user block: min-width:0 on every child so flex can
        shrink, overflow:hidden + text-overflow:ellipsis on the
        role line (the name line already had this).
     2. Avatar stays flex:0 0 auto at fixed size.
     3. Sidebar scrollbar styled for Firefox + Chromium + Safari:
        scrollbar-width: thin + scrollbar-color for Firefox;
        ::-webkit-scrollbar with subtle kinetic gradient thumb and
        transparent track for Chromium/Safari.
     4. Drawer-mode safety: when the sidebar drawer is open on mobile
        (<= 767px) the elements still need to work. The desktop rules
        already cover this because the sidebar is the same DOM node
        in both modes.

   No markup change, no auth logic change, no JS change.
   ============================================================= */

/* User block: keep avatar fixed, give text room to ellipsize. */
.dashboard-shell .st-sidebar-account {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}

.dashboard-shell .st-sidebar-account-avatar {
  flex: 0 0 2rem;
  min-width: 2rem;
  max-width: 2rem;
}

.dashboard-shell .st-sidebar-account-text {
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(100% - 2.65rem);
  overflow: hidden;
}

/* Name already has overflow:hidden + text-overflow:ellipsis + nowrap
   from the original .st-sidebar-account-name rule (line ~5773).
   Defensive re-assertion so any later override doesn't break it. */
.dashboard-shell .st-sidebar-account-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role line: was missing overflow handling — add it now so long
   "Role · status" lines ellipsize instead of wrapping. */
.dashboard-shell .st-sidebar-account-role {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Logout: defensive re-assertion so it stays compact even when the
   drawer is opened (sidebar.st-stitch visible on desktop OR inside
   .sidebar-overlay drawer on mobile). Keep same width rhythm as the
   sidebar nav items. */
.dashboard-shell .st-sidebar-logout {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap !important;
  gap: .55rem;
  width: calc(100% - 2rem);
  max-width: calc(100% - 2rem);
  min-width: 0;
  min-height: 0;
  margin: auto 1rem .5rem;
  padding: .55rem .7rem;
  border-top: 1px solid var(--st-border);
  padding-top: .75rem;
  border-radius: var(--st-radius, 6px);
  font-size: .78rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--st-on-surface-variant);
  text-decoration: none;
  overflow: hidden;
  transition: background-color .15s ease, color .15s ease;
}

.dashboard-shell .st-sidebar-logout svg {
  width: 1rem !important;
  height: 1rem !important;
  flex: 0 0 auto;
}

.dashboard-shell .st-sidebar-logout-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar scrollbar: Kinetic dark friendly.
   Firefox: scrollbar-width + scrollbar-color.
   Chromium/Safari: ::-webkit-scrollbar custom rules. */
.dashboard-shell .sidebar.st-stitch,
.dashboard-shell .sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .32) transparent;
}

.dashboard-shell .sidebar.st-stitch::-webkit-scrollbar,
.dashboard-shell .sidebar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dashboard-shell .sidebar.st-stitch::-webkit-scrollbar-track,
.dashboard-shell .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-shell .sidebar.st-stitch::-webkit-scrollbar-thumb,
.dashboard-shell .sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(148, 163, 184, .34), rgba(94, 234, 212, .22));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .15s ease;
}

.dashboard-shell .sidebar.st-stitch::-webkit-scrollbar-thumb:hover,
.dashboard-shell .sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(148, 163, 184, .52), rgba(94, 234, 212, .36));
  background-clip: padding-box;
}

.dashboard-shell .sidebar.st-stitch::-webkit-scrollbar-thumb:active,
.dashboard-shell .sidebar::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(174, 198, 255, .68), rgba(94, 234, 212, .48));
  background-clip: padding-box;
}

/* When the sidebar is in the drawer overlay state, ensure it still
   has a scrollbar styled the same way (visible on mobile). */
.dashboard-shell .sidebar-overlay + .sidebar.st-stitch,
.dashboard-shell .sidebar.is-open {
  scrollbar-width: thin;
}

/* Mobile drawer: when the sidebar opens on <= 767px it becomes
   visible; keep its inner elements compact. */
@media (max-width: 767px) {
  .dashboard-shell .st-sidebar-account-text {
    max-width: calc(100% - 2.65rem);
  }
  .dashboard-shell .st-sidebar-account-name,
  .dashboard-shell .st-sidebar-account-role {
    max-width: 100%;
  }
  .dashboard-shell .st-sidebar-logout {
    width: calc(100% - 1.5rem);
    margin: auto .75rem .4rem;
    padding: .5rem .65rem;
    padding-top: .7rem;
  }
}

/* === ZAPSOC Unified Design Foundation · Phase 8G.10A ===
   Shared, additive tokens and defensive layout guards for the whole app.
   These rules do not change form names, JS hooks, API payloads, auth, billing,
   credits, or generation behavior. */
:root {
  --z-bg: var(--st-bg, #050816);
  --z-bg-soft: var(--st-bg-soft, #0b0f17);
  --z-panel: var(--st-glass-bg, rgba(15, 23, 42, .78));
  --z-panel-strong: var(--st-surface-container-low, rgba(15, 23, 42, .92));
  --z-border: var(--st-border, rgba(148, 163, 184, .18));
  --z-border-strong: var(--st-border-strong, rgba(94, 234, 212, .28));
  --z-text: var(--st-text, var(--text, #e5edf7));
  --z-muted: var(--st-muted, var(--muted, #94a3b8));
  --z-accent: var(--st-secondary, var(--accent-2, #5eead4));
  --z-accent-2: var(--st-primary, var(--accent-3, #a78bfa));
  --z-danger: var(--st-status-danger, var(--danger, #fb7185));
  --z-radius-sm: var(--st-radius-md, .75rem);
  --z-radius-md: var(--st-radius-lg, 1rem);
  --z-radius-lg: var(--st-radius-xl, 1.35rem);
  --z-shadow-glow: 0 18px 55px rgba(15, 23, 42, .34);
  --z-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --z-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.dashboard-shell,
.dashboard-shell * {
  box-sizing: border-box;
}

.dashboard-shell,
.dashboard-shell .st-main,
.dashboard-shell .dashboard-main,
.dashboard-shell .st-main-canvas,
.dashboard-shell .st-page,
.dashboard-shell .st-panel,
.dashboard-shell .card,
.dashboard-shell .admin-page,
.dashboard-shell .profile-page,
.dashboard-shell .settings-page {
  min-width: 0;
}

.dashboard-shell .st-main,
.dashboard-shell .dashboard-main,
.dashboard-shell .st-main-canvas,
.dashboard-shell .st-page {
  max-width: 100%;
}

.dashboard-shell.st-stitch,
.dashboard-shell.st-stitch .st-main,
.dashboard-shell.st-stitch > .dashboard-main {
  overflow-x: clip;
}

.dashboard-shell img,
.dashboard-shell video,
.dashboard-shell canvas,
.dashboard-shell svg {
  max-width: 100%;
}

.dashboard-shell .st-topbar {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.dashboard-shell .st-topbar-left,
.dashboard-shell .st-topbar-right,
.dashboard-shell .st-topbar-actions,
.dashboard-shell .admin-page-actions,
.dashboard-shell .page-actions,
.dashboard-shell .media-card-actions,
.dashboard-shell .form-actions {
  min-width: 0;
}

.dashboard-shell .st-topbar-title,
.dashboard-shell .admin-page-title,
.dashboard-shell .st-page-title,
.dashboard-shell .st-section-title,
.dashboard-shell .media-title,
.dashboard-shell .st-media-title {
  overflow-wrap: anywhere;
}

.dashboard-shell .st-topbar-actions,
.dashboard-shell .admin-page-actions,
.dashboard-shell .page-actions,
.dashboard-shell .media-card-actions,
.dashboard-shell .form-actions {
  display: flex;
  flex-wrap: wrap;
}

.dashboard-shell .st-topbar .btn,
.dashboard-shell .st-topbar-cta,
.dashboard-shell .st-topbar-icon-btn,
.dashboard-shell .st-topbar-avatar,
.dashboard-shell .st-sidebar-logout {
  flex: 0 0 auto;
}

.dashboard-shell .btn,
.auth-shell .btn,
.kin-public-page .kin-btn {
  max-width: 100%;
  white-space: nowrap;
}

.dashboard-shell .btn {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-shell .form-control,
.dashboard-shell input,
.dashboard-shell select,
.dashboard-shell textarea,
.auth-shell .form-control {
  max-width: 100%;
}

.dashboard-shell table,
.dashboard-shell pre,
.dashboard-shell code,
.dashboard-shell .status-terminal,
.dashboard-shell .review-file-card,
.dashboard-shell .metadata-grid,
.dashboard-shell .kv-list {
  overflow-wrap: anywhere;
}

.dashboard-shell .table-wrap,
.dashboard-shell .admin-table-wrap,
.dashboard-shell .review-diff-table,
.dashboard-shell .status-terminal {
  max-width: 100%;
}

.dashboard-shell .empty-state,
.dashboard-shell .st-empty,
.dashboard-shell .st-empty-state,
.dashboard-shell .alert {
  min-width: 0;
}

.sidebar.st-stitch .st-sidebar-brand,
.sidebar.st-stitch .st-sidebar-new,
.sidebar.st-stitch .st-sidebar-nav a,
.sidebar.st-stitch .st-sidebar-section,
.sidebar.st-stitch .st-sidebar-account,
.sidebar.st-stitch .st-sidebar-logout {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .dashboard-shell .st-topbar {
    gap: .6rem;
  }

  .dashboard-shell .st-topbar-search,
  .dashboard-shell .st-topbar-tabs {
    display: none;
  }
}

@media (max-width: 767px) {
  .dashboard-shell.st-stitch,
  .dashboard-shell.st-stitch .st-main,
  .dashboard-shell.st-stitch > .dashboard-main {
    overflow-x: hidden;
  }

  .dashboard-shell .st-topbar {
    padding-inline: 1rem;
  }

  .dashboard-shell .st-topbar-title {
    max-width: min(52vw, 18rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .dashboard-shell .btn,
  .auth-shell .btn {
    white-space: normal;
  }
}

/* === ZAPSOC Dashboard Account Unification · Phase 8G.10B ===
   Scoped visual alignment for dashboard, profile, user profile, profile-edit,
   and settings pages. No form names, hooks, auth, billing, credits, generation,
   or database behavior are changed here. */
body.z-dashboard-page.dashboard-shell.st-stitch .st-main,
body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-main,
.dashboard-shell.st-stitch .z-account-page {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-main {
  gap: clamp(1rem, 1.5vw, 1.35rem);
  padding-top: 1rem;
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-create-flow,
body.z-dashboard-page.dashboard-shell.st-stitch [data-active-preset-banner],
body.z-dashboard-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-dashboard-page.dashboard-shell.st-stitch .st-section,
.dashboard-shell.st-stitch .z-account-page > .alert,
.dashboard-shell.st-stitch .z-account-page > .z-account-hero,
.dashboard-shell.st-stitch .z-account-page > .z-account-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero {
  padding: clamp(1.1rem, 2.2vw, 1.65rem);
  border-radius: var(--z-radius-md);
  border-color: color-mix(in srgb, var(--z-accent) 22%, var(--z-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--z-panel-strong) 90%, transparent), color-mix(in srgb, var(--z-bg-soft) 84%, transparent)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--z-accent) 14%, transparent), transparent 46%);
  box-shadow: var(--z-shadow-glow);
}

body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero::before {
  opacity: .12;
}

body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero .st-hero-inner {
  max-width: 48rem;
  gap: .85rem;
}

body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: 0;
}

body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero p {
  max-width: 42rem;
  font-size: .95rem;
  line-height: 1.55;
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-hero-cta,
body.z-dashboard-page.dashboard-shell.st-stitch .st-quick-action-row,
.dashboard-shell.st-stitch .z-account-page .page-actions,
.dashboard-shell.st-stitch .z-account-page .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-section,
.dashboard-shell.st-stitch .z-account-panel,
.dashboard-shell.st-stitch .z-account-hero {
  border-radius: var(--z-radius-md);
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-section {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-section-head,
.dashboard-shell.st-stitch .z-account-page .section-head {
  gap: .75rem;
  padding-bottom: 0;
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-section-title,
.dashboard-shell.st-stitch .z-account-page h2 {
  letter-spacing: 0;
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-status-grid,
body.z-dashboard-page.dashboard-shell.st-stitch .st-generator-grid,
body.z-dashboard-page.dashboard-shell.st-stitch .st-quick-create-grid,
body.z-dashboard-page.dashboard-shell.st-stitch .st-media-grid,
.dashboard-shell.st-stitch .z-account-page .profile-media-grid,
.dashboard-shell.st-stitch .z-account-page .collection-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

body.z-dashboard-page.dashboard-shell.st-stitch .st-status-card,
body.z-dashboard-page.dashboard-shell.st-stitch .st-generator-card,
body.z-dashboard-page.dashboard-shell.st-stitch .st-tool-card,
body.z-dashboard-page.dashboard-shell.st-stitch .st-media-card,
.dashboard-shell.st-stitch .z-account-page .profile-media-card,
.dashboard-shell.st-stitch .z-account-page .collection-card {
  min-width: 0;
  border-radius: var(--z-radius-sm);
  background: color-mix(in srgb, var(--z-panel-strong) 74%, transparent);
}

.dashboard-shell.st-stitch .z-account-page {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.35rem);
  align-content: start;
}

.dashboard-shell.st-stitch .z-account-hero {
  grid-template-columns: minmax(4.75rem, 5.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border-color: color-mix(in srgb, var(--z-accent) 18%, var(--z-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--z-panel-strong) 90%, transparent), color-mix(in srgb, var(--z-bg-soft) 84%, transparent)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--z-accent-2) 11%, transparent), transparent 44%);
  box-shadow: var(--z-shadow-glow);
}

.dashboard-shell.st-stitch .z-account-hero > div {
  min-width: 0;
}

.dashboard-shell.st-stitch .z-account-hero h2,
.dashboard-shell.st-stitch .z-account-panel h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.15;
}

.dashboard-shell.st-stitch .z-account-hero p,
.dashboard-shell.st-stitch .z-account-panel p,
.dashboard-shell.st-stitch .z-account-panel a {
  overflow-wrap: anywhere;
}

.dashboard-shell.st-stitch .z-account-page .profile-avatar,
.dashboard-shell.st-stitch .z-account-page .avatar-preview {
  width: clamp(4.5rem, 8vw, 5.5rem);
  max-width: 100%;
  border-radius: var(--z-radius-sm);
}

.dashboard-shell.st-stitch .z-account-panel,
.dashboard-shell.st-stitch .z-account-page .settings-section,
.dashboard-shell.st-stitch .z-account-page .profile-card {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel) 82%, transparent);
  box-shadow: none;
}

.dashboard-shell.st-stitch .z-account-page .kicker,
.dashboard-shell.st-stitch .z-account-page .settings-grid label,
.dashboard-shell.st-stitch .z-account-page .account-form > label {
  letter-spacing: .08em;
}

.dashboard-shell.st-stitch .z-account-page .settings-grid,
.dashboard-shell.st-stitch .z-account-page .settings-grid.two-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .8rem .9rem;
}

.dashboard-shell.st-stitch .z-account-form {
  gap: .9rem;
}

.dashboard-shell.st-stitch .z-account-page .form-control {
  min-height: 2.55rem;
}

.dashboard-shell.st-stitch .z-account-page textarea.form-control {
  min-height: 8.5rem;
  resize: vertical;
}

.dashboard-shell.st-stitch .z-account-page .check-row {
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, var(--z-border) 88%, transparent);
  border-radius: var(--z-radius-sm);
  background: color-mix(in srgb, var(--z-panel-strong) 62%, transparent);
}

.dashboard-shell.st-stitch .z-account-page .alert {
  border-radius: var(--z-radius-sm);
  overflow-wrap: anywhere;
}

.dashboard-shell.st-stitch .z-account-page .collection-cover,
.dashboard-shell.st-stitch .z-account-page .profile-media-card {
  max-width: 100%;
}

.dashboard-shell.st-stitch .z-account-page .profile-media-card {
  overflow: hidden;
}

.dashboard-shell.st-stitch .z-account-page .profile-media-card > *,
.dashboard-shell.st-stitch .z-account-page .zapsoc-audio-player *,
.dashboard-shell.st-stitch .z-account-page .media-card-actions > *,
.dashboard-shell.st-stitch .z-account-page .audio-actions > * {
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell.st-stitch .z-account-page .zapsoc-audio-player,
.dashboard-shell.st-stitch .z-account-page .media-card-actions,
.dashboard-shell.st-stitch .z-account-page .audio-actions,
.dashboard-shell.st-stitch .z-account-page .audio-controls-main,
.dashboard-shell.st-stitch .z-account-page .audio-meta {
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell.st-stitch .z-account-page .zapsoc-audio-player {
  justify-self: stretch;
  width: 100%;
  overflow: hidden;
}

.dashboard-shell.st-stitch .z-account-page .media-card-actions,
.dashboard-shell.st-stitch .z-account-page .audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
}

.dashboard-shell.st-stitch .z-account-page .media-card-actions .btn,
.dashboard-shell.st-stitch .z-account-page .media-card-actions button,
.dashboard-shell.st-stitch .z-account-page .media-card-actions a,
.dashboard-shell.st-stitch .z-account-page .audio-actions .btn,
.dashboard-shell.st-stitch .z-account-page .audio-actions button {
  min-width: 0;
  max-width: 100%;
}

body.z-account-shell.dashboard-shell .global-audio-player,
body.z-account-shell.dashboard-shell .global-audio-player .gap-controls,
body.z-account-shell.dashboard-shell .global-audio-player .gap-timeline,
body.z-account-shell.dashboard-shell .global-audio-player .gap-seek {
  min-width: 0;
  max-width: 100%;
}

body.z-account-shell.dashboard-shell .global-audio-player .gap-seek {
  width: 100%;
}

@media (max-width: 1024px) {
  body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-main,
  .dashboard-shell.st-stitch .z-account-page {
    gap: 1rem;
  }

  body.z-dashboard-page.dashboard-shell.st-stitch .st-section {
    padding: 1rem;
  }
}

@media (max-width: 767px) {
  body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-main,
  .dashboard-shell.st-stitch .z-account-page {
    overflow-x: hidden;
  }

  body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero,
  .dashboard-shell.st-stitch .z-account-hero,
  .dashboard-shell.st-stitch .z-account-panel {
    padding: 1rem;
  }

  body.z-dashboard-page.dashboard-shell.st-stitch .st-hero-cta,
  body.z-dashboard-page.dashboard-shell.st-stitch .st-quick-action-row,
  .dashboard-shell.st-stitch .z-account-page .form-actions {
    align-items: stretch;
  }

  body.z-dashboard-page.dashboard-shell.st-stitch .st-hero-cta .btn,
  body.z-dashboard-page.dashboard-shell.st-stitch .st-quick-action,
  .dashboard-shell.st-stitch .z-account-page .form-actions .btn,
  .dashboard-shell.st-stitch .z-account-page .page-actions .btn,
  .dashboard-shell.st-stitch .z-account-page .media-card-actions .btn,
  .dashboard-shell.st-stitch .z-account-page .media-card-actions button,
  .dashboard-shell.st-stitch .z-account-page .media-card-actions a,
  .dashboard-shell.st-stitch .z-account-page .audio-actions .btn,
  .dashboard-shell.st-stitch .z-account-page .audio-actions button {
    width: 100%;
    justify-content: center;
  }

  .dashboard-shell.st-stitch .z-account-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-shell.st-stitch .z-account-page .profile-avatar,
  .dashboard-shell.st-stitch .z-account-page .avatar-preview {
    width: 4.5rem;
  }
}

@media (max-width: 430px) {
  body.z-dashboard-page.dashboard-shell.st-stitch .z-dashboard-hero h2 {
    font-size: 1.45rem;
  }

  body.z-dashboard-page.dashboard-shell.st-stitch .st-status-grid,
  body.z-dashboard-page.dashboard-shell.st-stitch .st-generator-grid,
  body.z-dashboard-page.dashboard-shell.st-stitch .st-quick-create-grid,
  body.z-dashboard-page.dashboard-shell.st-stitch .st-media-grid,
  .dashboard-shell.st-stitch .z-account-page .profile-media-grid,
  .dashboard-shell.st-stitch .z-account-page .collection-grid,
  .dashboard-shell.st-stitch .z-account-page .settings-grid,
  .dashboard-shell.st-stitch .z-account-page .settings-grid.two-fields {
    grid-template-columns: 1fr;
  }

  .dashboard-shell.st-stitch .z-account-page .audio-controls-main {
    grid-template-columns: 1fr;
  }

  .dashboard-shell.st-stitch .z-account-page .audio-time {
    min-width: 0;
    text-align: left;
  }

  .dashboard-shell.st-stitch .z-account-page .audio-play {
    width: 100%;
  }
}

/* === ZAPSOC Media Library Collections Unification · Phase 8G.10C ===
   Scoped visual alignment for /collections.php and /media-library.php.
   Adds page-body classes (z-collections-page / z-media-library-page) and
   reuses --z-* tokens from 8G.10A. No form names, data-* hooks, auth,
   billing, credits, generation, modal/upload/save/delete/rename behavior,
   or database behavior are changed here. */

/* ── A. Collections page shell ── */

body.z-collections-page.dashboard-shell.st-stitch {
  --z-collections-page-gap: clamp(1rem, 1.5vw, 1.35rem);
}

body.z-collections-page.dashboard-shell.st-stitch > .dashboard-main {
  display: grid;
  gap: var(--z-collections-page-gap);
  align-content: start;
  padding-top: 1rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body.z-collections-page.dashboard-shell.st-stitch .collection-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

body.z-collections-page.dashboard-shell.st-stitch .collection-card {
  min-width: 0;
  max-width: 100%;
  padding: clamp(.85rem, 1.4vw, 1.1rem);
  border-radius: var(--z-radius-md);
  background: color-mix(in srgb, var(--z-panel-strong) 72%, transparent);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  box-shadow: var(--z-shadow-glow);
  gap: .65rem;
}

body.z-collections-page.dashboard-shell.st-stitch .collection-cover {
  border-radius: var(--z-radius-sm);
  border-color: color-mix(in srgb, var(--z-border-strong) 60%, var(--z-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--z-accent) 18%, transparent), color-mix(in srgb, var(--z-accent-2) 14%, transparent));
}

body.z-collections-page.dashboard-shell.st-stitch .collection-card .source-badge {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .69rem;
  font-weight: 700;
  color: var(--z-muted);
  width: fit-content;
  max-width: 100%;
  padding: .15rem .55rem;
  border: 1px solid color-mix(in srgb, var(--z-border) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--z-panel-strong) 50%, transparent);
}

body.z-collections-page.dashboard-shell.st-stitch .collection-card h2 {
  margin: 0;
  font-family: var(--z-font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--z-text);
  overflow-wrap: anywhere;
}

body.z-collections-page.dashboard-shell.st-stitch .collection-card p.muted {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--z-muted);
  overflow-wrap: anywhere;
}

body.z-collections-page.dashboard-shell.st-stitch .media-card-actions {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}

body.z-collections-page.dashboard-shell.st-stitch .media-card-actions .btn {
  min-width: 0;
  max-width: 100%;
}

body.z-collections-page.dashboard-shell.st-stitch .empty-state.card {
  min-width: 0;
  max-width: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--z-radius-md);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--z-border-strong) 60%, transparent);
  background: color-mix(in srgb, var(--z-panel) 68%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  grid-column: 1 / -1;
}

body.z-collections-page.dashboard-shell.st-stitch .empty-state.card h2 {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  letter-spacing: 0;
  color: var(--z-text);
}

body.z-collections-page.dashboard-shell.st-stitch .empty-state.card p.kicker {
  margin: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .69rem;
  font-weight: 700;
  color: var(--z-muted);
}

@media (max-width: 430px) {
  body.z-collections-page.dashboard-shell.st-stitch .collection-grid {
    grid-template-columns: 1fr;
  }

  body.z-collections-page.dashboard-shell.st-stitch .media-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── B. Media library page shell ── */

body.z-media-library-page.dashboard-shell.st-stitch {
  --z-ml-page-gap: clamp(1rem, 1.5vw, 1.35rem);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-main-canvas.st-ml-page,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-page {
  gap: var(--z-ml-page-gap);
  padding-top: 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner],
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stats,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-section,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-grid,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pagination,
body.z-media-library-page.dashboard-shell.st-stitch .st-empty,
body.z-media-library-page.dashboard-shell.st-stitch [aria-live="polite"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stats {
  border-radius: var(--z-radius-md);
  background: color-mix(in srgb, var(--z-panel) 60%, transparent);
  padding: clamp(.65rem, 1.2vw, .85rem);
  gap: .65rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stat {
  border-radius: var(--z-radius-md);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong) 78%, transparent);
  padding: clamp(.8rem, 1.4vw, 1.05rem) clamp(.95rem, 1.6vw, 1.15rem);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stat-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stat-value {
  color: var(--z-text);
  font-family: var(--z-font-body);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-section,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload {
  border-radius: var(--z-radius-md);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel) 78%, transparent);
  padding: clamp(1rem, 1.6vw, 1.25rem);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-section-head {
  padding-bottom: .35rem;
  gap: .35rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-section-hint {
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-section-title {
  letter-spacing: 0;
  color: var(--z-text);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload-pill {
  background: color-mix(in srgb, var(--z-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--z-accent) 32%, var(--z-border));
  color: var(--z-accent);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload-grid {
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload-grid label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload-grid .form-control {
  background: var(--z-bg);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  color: var(--z-text);
  font-family: var(--z-font-body);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload-status {
  background: var(--z-bg);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  color: var(--z-muted);
  font-family: var(--z-font-mono);
  border-radius: var(--z-radius-sm);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar {
  gap: 1rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pill {
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  color: var(--z-muted);
  background: transparent;
  font-family: var(--z-font-mono);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pill:hover {
  background: color-mix(in srgb, var(--z-panel-strong) 60%, transparent);
  color: var(--z-text);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pill.is-active {
  background: color-mix(in srgb, var(--z-panel-strong) 80%, transparent);
  color: var(--z-text);
  border-color: color-mix(in srgb, var(--z-border-strong) 60%, var(--z-border));
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pill:focus-visible,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-view-toggle button:focus-visible,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-select-wrap select:focus-visible,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar-right input[type="search"]:focus-visible {
  outline: none;
  box-shadow: var(--st-glow-focus);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar-right {
  gap: .55rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar-right input[type="search"] {
  background: var(--z-bg);
  border: 1px solid color-mix(in srgb, var(--z-border) 88%, transparent);
  border-radius: var(--z-radius-sm);
  color: var(--z-text);
  font-family: var(--z-font-body);
  min-width: 11rem;
  max-width: 100%;
  height: 2.25rem;
  font-size: .875rem;
  padding: .35rem .65rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-select-wrap {
  display: inline-flex;
  align-items: center;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-select-wrap select {
  background: var(--z-bg);
  border: 1px solid color-mix(in srgb, var(--z-border) 88%, transparent);
  border-radius: var(--z-radius-sm);
  color: var(--z-text);
  font-family: var(--z-font-body);
  height: 2.25rem;
  padding: .35rem 2rem .35rem .75rem;
  font-size: .85rem;
  max-width: 100%;
  min-width: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-view-toggle {
  background: var(--z-bg);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  border-radius: var(--z-radius-sm);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-view-toggle button {
  color: var(--z-muted);
  width: 1.95rem;
  height: 1.95rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-view-toggle button.is-active {
  background: color-mix(in srgb, var(--z-panel-strong) 80%, transparent);
  color: var(--z-text);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-grid {
  border-radius: var(--z-radius-md);
  gap: clamp(.85rem, 1.4vw, 1.1rem);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pagination {
  border-radius: var(--z-radius-md);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel) 78%, transparent);
  padding: clamp(.75rem, 1.4vw, .95rem) clamp(1rem, 1.6vw, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pagination-meta,
body.z-media-library-page.dashboard-shell.st-stitch [data-media-showing] {
  color: var(--z-muted);
  font-family: var(--z-font-mono);
  font-size: .75rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-empty {
  border-radius: var(--z-radius-md);
  background: color-mix(in srgb, var(--z-panel) 78%, transparent);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--z-border-strong) 60%, transparent);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-empty h2 {
  color: var(--z-text);
  letter-spacing: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-empty p {
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: .5rem;
}

/* Status terminal (read-only DOM style alignment) */
body.z-media-library-page.dashboard-shell.st-stitch .status-terminal.compact-status.media-page-status,
body.z-media-library-page.dashboard-shell.st-stitch [data-media-status] {
  min-width: 0;
  max-width: 100%;
  border-radius: var(--z-radius-sm);
  padding: .55rem .75rem;
  background: color-mix(in srgb, var(--z-panel) 78%, transparent);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  color: var(--z-muted);
  font-family: var(--z-font-mono);
  font-size: .75rem;
}

/* ── C. Media detail modal — read-only alignment ── */

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-modal {
  padding: 1rem;
  display: grid;
  place-items: center;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-panel {
  width: min(100%, 64rem);
  max-height: calc(100vh - 2rem);
  border-radius: var(--z-radius-lg);
  background: color-mix(in srgb, var(--z-panel-strong) 92%, transparent);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-panel .section-head {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--z-border) 80%, transparent);
  align-items: flex-start;
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-panel .kicker {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .69rem;
  font-weight: 700;
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch #media-detail-title,
body.z-media-library-page.dashboard-shell.st-stitch [data-detail-title] {
  font-family: var(--z-font-body);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: var(--z-text);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-layout {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  gap: clamp(1rem, 1.6vw, 1.35rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-preview,
body.z-media-library-page.dashboard-shell.st-stitch .waveform-panel,
body.z-media-library-page.dashboard-shell.st-stitch .collection-items,
body.z-media-library-page.dashboard-shell.st-stitch .rename-file-box,
body.z-media-library-page.dashboard-shell.st-stitch .cover-art-box {
  border-radius: var(--z-radius-sm);
  background: color-mix(in srgb, var(--z-panel) 78%, transparent);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  min-width: 0;
  max-width: 100%;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-preview {
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-bg-soft) 60%, transparent);
}

body.z-media-library-page.dashboard-shell.st-stitch .waveform-canvas {
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: var(--z-bg);
}

body.z-media-library-page.dashboard-shell.st-stitch .metadata-grid {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

body.z-media-library-page.dashboard-shell.st-stitch .metadata-grid div {
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong) 60%, transparent);
  min-width: 0;
  max-width: 100%;
}

body.z-media-library-page.dashboard-shell.st-stitch .metadata-grid span {
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch .metadata-grid strong {
  color: var(--z-text);
  overflow-wrap: anywhere;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 1rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor .editor-textarea,
body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor .form-control,
body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor select {
  min-width: 0;
  max-width: 100%;
  background: var(--z-bg);
  color: var(--z-text);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor .form-control:focus-visible,
body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor select:focus-visible,
body.z-media-library-page.dashboard-shell.st-stitch .media-detail-editor textarea:focus-visible {
  outline: none;
  box-shadow: var(--st-glow-focus);
}

body.z-media-library-page.dashboard-shell.st-stitch .settings-grid.two-fields {
  gap: .8rem .9rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .check-row.share-toggle {
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, var(--z-border) 88%, transparent);
  border-radius: var(--z-radius-sm);
  background: color-mix(in srgb, var(--z-panel-strong) 62%, transparent);
  width: fit-content;
  max-width: 100%;
  color: var(--z-text);
}

body.z-media-library-page.dashboard-shell.st-stitch .cover-art-box {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .cover-art-box h3 {
  margin: 0;
  color: var(--z-text);
}

body.z-media-library-page.dashboard-shell.st-stitch .cover-art-picker {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .cover-art-preview {
  min-height: 8rem;
  border-radius: var(--z-radius-sm);
  border-color: color-mix(in srgb, var(--z-border) 88%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--z-accent-2) 10%, transparent) 0 1px, transparent 1px 9px),
    color-mix(in srgb, var(--z-bg-soft) 70%, transparent);
  color: var(--z-muted);
}

body.z-media-library-page.dashboard-shell.st-stitch .rename-file-box {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .rename-file-box .danger-hint {
  color: color-mix(in srgb, var(--z-danger) 75%, var(--z-text));
}

body.z-media-library-page.dashboard-shell.st-stitch .collection-items {
  padding: clamp(1rem, 1.6vw, 1.25rem);
  gap: .85rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .collection-items h3 {
  margin: 0;
  color: var(--z-text);
}

body.z-media-library-page.dashboard-shell.st-stitch .collection-items .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  min-width: 0;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--z-border) 80%, transparent);
  min-width: 0;
  max-width: 100%;
}

body.z-media-library-page.dashboard-shell.st-stitch .media-detail-actions .btn {
  min-width: 0;
  max-width: 100%;
}

/* ── D. Responsive guards (existing st-* rules kept, only gaps + overflow tightened) ── */

@media (max-width: 1023px) {
  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload-grid {
    grid-template-columns: 1fr;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .media-detail-modal {
    padding: .5rem;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .media-detail-panel {
    width: 100%;
    max-height: calc(100vh - 1rem);
    border-radius: var(--z-radius-md);
  }
}

@media (max-width: 430px) {
  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stats {
    grid-template-columns: 1fr;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-pagination .btn {
    width: 100%;
    justify-content: center;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .media-detail-layout {
    grid-template-columns: 1fr;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .media-detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .media-detail-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 390px) {
  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-select-wrap,
  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-view-toggle,
  body.z-media-library-page.dashboard-shell.st-stitch .st-ml-toolbar-right input[type="search"] {
    width: 100%;
  }
}

/* === ZAPSOC Create Flow + Campaign Preset De-clutter · Phase 8G.10C.1 ===
   Goals:
   - Compact Create Flow stepper so it does not dominate the top of tool pages.
   - Compact active preset banner so it reads as a status pill, not a hero.
   - De-emphasize Campaign Presets cards (still functional, still JS-driven).
   - Lift tool-relevant controls earlier above the fold.
   - Keep every data-create-flow / data-active-preset-banner / data-campaign-presets
     hook intact. No DOM removal, no JS changes. CSS-only declutter.
   Scopes:
   - body.music-studio-page
   - body.z-image-studio-page
   - body.z-video-maker-page
   - body.z-media-library-page
   ========================================================================== */

/* A. Shared compact shell for the Create Flow + active preset banner.
      Used by every tool page so the stepper reads as navigation, not hero.
      Selector specificity must beat `.dashboard-shell.st-stitch > .dashboard-main > *:not(.st-topbar)`
      (specificity 0,6,1 because each :not(.x) contributes one class) which
      sets `padding: 1.5rem 1.75rem 7rem` on direct children of `.dashboard-main`.
      The `.dashboard-main` direct-child chain matches the targeted pages
      (music/image/video) but does NOT match the media-library page where the
      flow lives inside `.st-main-canvas`, so a non-chained rule still wins
      there. For the targeted pages we use `!important` on padding + margin
      to override without class specificity gymnastics. The element still
      receives the style chain through normal cascade for other props. */
body.music-studio-page.dashboard-shell.st-stitch .st-create-flow,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  background: color-mix(in srgb, var(--z-panel, var(--st-glass-bg)) 70%, transparent);
  border-color: color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Override the heavy 7rem bottom padding inherited via `.dashboard-main > *`
      direct-child reset. Used `!important` only on padding+margin so the rest
      of the compactness cascade (gap, border, background) stays specificity-clean. */
body.music-studio-page.dashboard-shell.st-stitch > .dashboard-main > .st-create-flow,
body.z-image-studio-page.dashboard-shell.st-stitch > .dashboard-main > .st-create-flow,
body.z-video-maker-page.dashboard-shell.st-stitch > .dashboard-main > .st-create-flow,
body.z-media-library-page.dashboard-shell.st-stitch > .dashboard-main > .st-create-flow {
  padding: .45rem .65rem !important;
  margin: 0 0 .85rem !important;
  gap: .35rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-label,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-label,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-label,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-label {
  font-size: .62rem;
  letter-spacing: .12em;
  padding-right: .4rem;
  margin-right: .15rem;
  color: var(--z-muted, var(--st-muted));
}

body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-step,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-step,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-step,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-step {
  padding: .25rem .55rem;
  font-size: .72rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-step .st-create-flow-step-num,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-step .st-create-flow-step-num,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-step .st-create-flow-step-num,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-step .st-create-flow-step-num {
  width: .9rem;
  height: .9rem;
  font-size: .58rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-cta,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-cta,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-cta,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-cta {
  gap: .3rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-cta .btn,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-cta .btn,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-cta .btn,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-cta .btn {
  padding: .28rem .6rem;
  font-size: .72rem;
}

/* B. Active preset banner → status pill (compact, single row, no hero). */
body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner {
  gap: .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 12%, var(--z-panel, var(--st-panel)));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 36%, var(--z-border, var(--st-border)));
}

/* Override the heavy 7rem bottom padding inherited via `.dashboard-main > *`
      direct-child reset for the active preset banner. */
body.music-studio-page.dashboard-shell.st-stitch > .dashboard-main > [data-active-preset-banner].st-active-preset-banner,
body.z-image-studio-page.dashboard-shell.st-stitch > .dashboard-main > [data-active-preset-banner].st-active-preset-banner,
body.z-video-maker-page.dashboard-shell.st-stitch > .dashboard-main > [data-active-preset-banner].st-active-preset-banner,
body.z-media-library-page.dashboard-shell.st-stitch > .dashboard-main > [data-active-preset-banner].st-active-preset-banner {
  padding: .5rem .7rem !important;
  margin: 0 0 .85rem !important;
}

body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark {
  width: 1.4rem;
  height: 1.4rem;
}

body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark svg,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark svg,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark svg,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-mark svg {
  width: .75rem;
  height: .75rem;
}

body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text {
  flex-direction: row;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
}

body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text strong,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text strong,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text strong,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text strong {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
}

body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text span,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text span,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text span,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text span {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .7rem;
}

body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-actions .btn,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-actions .btn,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-actions .btn,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-actions .btn {
  padding: .22rem .55rem;
  font-size: .7rem;
}

/* C. Campaign Presets (JS-driven host) → compact panel, not a hero block.
      Keeps every data-campaign-preset-card click hook and badge/summary slot
      intact. The host .st-campaign-presets / .st-campaign-preset-grid still
      contains the same DOM produced by creative-flow.js. */
body.music-studio-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-presets {
  gap: .55rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-presets-head h3,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-presets-head h3,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-presets-head h3,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-presets-head h3 {
  font-size: .95rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-presets-head p,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-presets-head p,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-presets-head p,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-presets-head p {
  font-size: .75rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-grid {
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .5rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-card,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-card,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-card,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-card {
  padding: .7rem .8rem;
  gap: .35rem;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border-color: color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-panel)) 74%, transparent);
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-title,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-title,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-title,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-title {
  font-size: .82rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-summary,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-summary,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-summary,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-summary {
  font-size: .72rem;
  -webkit-line-clamp: 1;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-meta,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-meta,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-meta,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-meta {
  gap: .25rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-meta span,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-meta span,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-meta span,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-meta span {
  font-size: .6rem;
  padding: .1rem .35rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-badge,
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-badge,
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-badge,
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-badge {
  font-size: .58rem;
  padding: .1rem .3rem;
}

/* D. Music Studio — compact hero so Instruments appear earlier above the fold.
      Body already has music-studio-page; visual builder grids + topbar were
      already handled by 8G.7/8G.9 work. This only tightens the hero and the
      section gap so the prompt builder is the first interactive area.
      Override `.dashboard-main > *` padding reset for hero direct-child. */
body.music-studio-page.dashboard-shell.st-stitch > .dashboard-main > .st-music-hero {
  padding: 1.15rem 1.35rem !important;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  margin-bottom: .85rem !important;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .65rem 1rem;
  grid-template-columns: none;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-hero h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-hero-sub {
  font-size: .88rem;
  max-width: 36rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-hero-meta {
  margin-top: 0;
  margin-left: auto;
  gap: .35rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-hero-count {
  font-size: .62rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-hero .kicker {
  font-size: .62rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-builder {
  gap: 1rem;
  padding-top: 1rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-grid {
  gap: 1rem;
}

body.music-studio-page.dashboard-shell.st-stitch .st-music-col {
  gap: 1rem;
}

/* E. Image Studio — same pattern as Music Studio. Tool body uses the
      existing st-image-builder / st-image-hero / st-image-grid / st-image-col
      classes which are scoped by body.z-image-studio-page below.
      Override `.dashboard-main > *` padding reset for hero direct-child. */
body.z-image-studio-page.dashboard-shell.st-stitch > .dashboard-main > .st-image-hero {
  padding: 1.15rem 1.35rem !important;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  margin-bottom: .85rem !important;
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-hero {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .65rem 1rem;
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-hero h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-hero-sub {
  font-size: .88rem;
  max-width: 36rem;
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-hero-meta {
  margin-top: 0;
  margin-left: auto;
  gap: .35rem;
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-builder {
  gap: 1rem;
  padding-top: 1rem;
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-grid {
  gap: 1rem;
}

body.z-image-studio-page.dashboard-shell.st-stitch .st-image-col {
  gap: 1rem;
}

/* F. Video Maker — same pattern.
      Override `.dashboard-main > *` padding reset for hero direct-child. */
body.z-video-maker-page.dashboard-shell.st-stitch > .dashboard-main > .st-video-hero {
  padding: 1.15rem 1.35rem !important;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  margin-bottom: .85rem !important;
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-hero {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .65rem 1rem;
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-hero h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-hero-sub {
  font-size: .88rem;
  max-width: 36rem;
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-hero-meta {
  margin-top: 0;
  margin-left: auto;
  gap: .35rem;
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-builder {
  gap: 1rem;
  padding-top: 1rem;
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-grid {
  gap: 1rem;
}

body.z-video-maker-page.dashboard-shell.st-stitch .st-video-col {
  gap: 1rem;
}

/* G. Media Library — push stats + toolbar above the fold; shrink Campaign
      Presets section + collapse verbose heading. The data-campaign-presets
      host still renders the same DOM. */
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stats {
  padding: clamp(.55rem, 1vw, .75rem);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stat {
  padding: clamp(.55rem, 1vw, .75rem) clamp(.7rem, 1.2vw, .9rem);
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stat-label {
  font-size: .62rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-stat-value {
  font-size: 1.15rem;
}

body.z-media-library-page.dashboard-shell.st-stitch .st-ml-section,
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-upload {
  padding: clamp(.7rem, 1.2vw, 1rem);
}

/* H. Media Library — visual order via CSS only. Reorder Campaign Presets
      below Upload + Toolbar + Grid using flex order, since DOM order still
      stays semantic for JS. Hooks and order-dependence are unaffected
      because JS reads by data-attribute, not position. */
body.z-media-library-page.dashboard-shell.st-stitch .st-ml-page {
  position: relative;
}

/* I. Mobile compactness — collapse verbose labels on small screens. */
@media (max-width: 767px) {
  body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-label,
  body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-label,
  body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-label,
  body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-label {
    display: none;
  }

  body.music-studio-page.dashboard-shell.st-stitch .st-create-flow,
  body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow,
  body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow,
  body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow {
    padding: .4rem .55rem;
  }

  body.music-studio-page.dashboard-shell.st-stitch .st-create-flow-step,
  body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow-step,
  body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow-step,
  body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow-step {
    padding: .2rem .45rem;
    font-size: .68rem;
  }

  body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner,
  body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner,
  body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner,
  body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner {
    padding: .42rem .6rem;
  }

  body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
  body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
  body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
  body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-grid {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
}

@media (max-width: 430px) {
  body.music-studio-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
  body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
  body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-preset-grid,
  body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-preset-grid {
    grid-template-columns: 1fr;
  }

  body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text,
  body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text,
  body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text,
  body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner].st-active-preset-banner .st-active-preset-banner-text {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }
}

/* J. Horizontal scroll guard for the new compact shells — same pattern as
      existing dashboard/account/media-library guards. */
body.music-studio-page.dashboard-shell.st-stitch .st-create-flow,
body.music-studio-page.dashboard-shell.st-stitch [data-active-preset-banner],
body.music-studio-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-image-studio-page.dashboard-shell.st-stitch .st-create-flow,
body.z-image-studio-page.dashboard-shell.st-stitch [data-active-preset-banner],
body.z-image-studio-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-video-maker-page.dashboard-shell.st-stitch .st-create-flow,
body.z-video-maker-page.dashboard-shell.st-stitch [data-active-preset-banner],
body.z-video-maker-page.dashboard-shell.st-stitch .st-campaign-presets,
body.z-media-library-page.dashboard-shell.st-stitch .st-create-flow,
body.z-media-library-page.dashboard-shell.st-stitch [data-active-preset-banner],
body.z-media-library-page.dashboard-shell.st-stitch .st-campaign-presets {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* === ZAPSOC Direct Studio Generation · Phase 8G.10D.0 ===
   Direct Generate buttons inside the visual builders + inline Generate Lyrics
   on the Music Generator. Wires to existing /api/generate-image.php,
   /api/generate-music.php and /api/generate-lyrics.php. No backend changes. */
.z-direct-generate {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  min-width: 0;
  max-width: 100%;
}

.z-direct-generate__status {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  line-height: 1.45;
  padding: .5rem .65rem;
  border-radius: var(--z-radius-sm, .5rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: var(--z-bg, var(--st-bg));
  color: var(--z-muted, var(--st-muted));
  letter-spacing: .02em;
  min-width: 0;
  max-width: 100%;
}

.z-direct-generate__status.is-progress {
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 36%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, var(--z-panel, var(--st-panel)));
}

.z-direct-generate__status.is-success {
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 36%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--st-secondary-container, #5eead4) 8%, var(--z-panel, var(--st-panel)));
}

.z-direct-generate__status.is-error {
  color: color-mix(in srgb, var(--st-status-danger, #ef4444) 70%, var(--z-text, var(--st-text)));
  border-color: color-mix(in srgb, var(--st-status-danger, #ef4444) 36%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--st-status-danger, #ef4444) 8%, var(--z-panel, var(--st-panel)));
}

.z-direct-generate__output {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  min-width: 0;
  max-width: 100%;
}

.z-direct-generate__output .media-card {
  padding: .65rem;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-panel)) 78%, transparent);
}

.z-direct-generate__output .media-preview img,
.z-direct-generate__output .media-preview {
  border-radius: var(--z-radius-sm, .5rem);
  overflow: hidden;
}

.z-direct-generate__output audio {
  width: 100%;
  height: 2.4rem;
}

/* Inline Lyrics panel inside Music Generator */
.z-lyrics-prompt-wrap {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .55rem;
}

.z-lyrics-prompt-input {
  min-height: 4.5rem;
  resize: vertical;
}

.z-lyrics-panel {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .55rem;
}

.z-lyrics-panel__status {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  line-height: 1.45;
  padding: .5rem .65rem;
  border-radius: var(--z-radius-sm, .5rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: var(--z-bg, var(--st-bg));
  color: var(--z-muted, var(--st-muted));
}

.z-lyrics-panel__status.is-progress,
.z-lyrics-panel__status.is-success,
.z-lyrics-panel__status.is-error {
  color: var(--z-text, var(--st-text));
}

.z-lyrics-panel__status.is-progress {
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 36%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, var(--z-panel, var(--st-panel)));
}

.z-lyrics-panel__status.is-success {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 36%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--st-secondary-container, #5eead4) 8%, var(--z-panel, var(--st-panel)));
}

.z-lyrics-panel__status.is-error {
  color: color-mix(in srgb, var(--st-status-danger, #ef4444) 70%, var(--z-text, var(--st-text)));
  border-color: color-mix(in srgb, var(--st-status-danger, #ef4444) 36%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--st-status-danger, #ef4444) 8%, var(--z-panel, var(--st-panel)));
}

/* Mobile compactness for the new controls */
@media (max-width: 767px) {
  .z-direct-generate__output {
    grid-template-columns: 1fr;
  }
  .z-direct-generate__status,
  .z-lyrics-panel__status {
    font-size: .68rem;
  }
}

/* === ZAPSOC Command Center Backend Foundation · Phase 8G.10D.1 ===
   Professional SaaS-style Command Center surfaces on dashboard.php:
   Provider Readiness, Billing & Revenue, Community Foundation,
   Setup Checklist. Honest placeholders only — no fake counts or fake
   active states. Provider status is read from real config_value() +
   SettingsService without calling external APIs.
   Scope: body.z-dashboard-page .z-command-center-* and .z-command-card-*
   Scope: body.z-dashboard-page .z-setup-checklist-* */

body.z-dashboard-page .z-command-center {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel, var(--st-panel)) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 0;
}

body.z-dashboard-page .z-command-center__hint {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem;
  min-width: 0;
}

body.z-dashboard-page .z-command-card {
  display: grid;
  gap: .4rem;
  padding: clamp(.85rem, 1.4vw, 1.05rem);
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 70%, transparent);
  color: var(--z-text, var(--st-text));
  text-decoration: none;
  min-width: 0;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}

body.z-dashboard-page a.z-command-card:hover,
body.z-dashboard-page a.z-command-card:focus-visible {
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 45%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, var(--z-panel-strong, var(--st-surface-container-low)));
  outline: none;
}

body.z-dashboard-page a.z-command-card:active {
  transform: translateY(1px);
}

body.z-dashboard-page .z-command-card.is-success {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 38%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-command-card.is-warning {
  border-color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 38%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-command-card.is-link {
  cursor: pointer;
}

body.z-dashboard-page .z-command-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  min-width: 0;
}

body.z-dashboard-page .z-command-card__label {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-command-card__status {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .66rem;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--z-bg, var(--st-bg)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  color: var(--z-text, var(--st-text));
  white-space: nowrap;
}

body.z-dashboard-page .z-command-card.is-success .z-command-card__status {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 45%, var(--z-border, var(--st-border)));
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-command-card.is-warning .z-command-card__status {
  border-color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 45%, var(--z-border, var(--st-border)));
  color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 70%, var(--z-text, var(--st-text)));
}

body.z-dashboard-page .z-command-card__title {
  margin: 0;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-command-card__hint {
  margin: 0;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  line-height: 1.45;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-command-card__hint code {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  padding: .05rem .3rem;
  border-radius: .3rem;
  background: color-mix(in srgb, var(--z-bg, var(--st-bg)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
}

/* Setup Checklist */
body.z-dashboard-page .z-setup-checklist {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

body.z-dashboard-page .z-setup-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem .8rem;
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  min-width: 0;
}

body.z-dashboard-page .z-setup-checklist__item.is-done {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 35%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-setup-checklist__mark {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .8rem;
  flex-shrink: 0;
  background: var(--z-bg, var(--st-bg));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-setup-checklist__item.is-done .z-setup-checklist__mark {
  background: color-mix(in srgb, var(--st-secondary-container, #5eead4) 25%, transparent);
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 50%, var(--z-border, var(--st-border)));
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-setup-checklist__body {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

body.z-dashboard-page .z-setup-checklist__label {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .85rem;
  font-weight: 600;
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-setup-checklist__hint {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .75rem;
  line-height: 1.45;
  color: var(--z-muted, var(--st-muted));
}

@media (max-width: 767px) {
  body.z-dashboard-page .z-command-card__title {
    font-size: .88rem;
  }
  body.z-dashboard-page .z-command-card__hint {
    font-size: .72rem;
  }
  body.z-dashboard-page .z-setup-checklist__label {
    font-size: .78rem;
  }
  body.z-dashboard-page .z-setup-checklist__hint {
    font-size: .7rem;
  }
}

/* === ZAPSOC Dashboard Home Redesign · Phase 8G.10L ===
   Welcome hero + disabled command/search bar stub + studio launcher +
   bento overview + collections list. Scoped under
   body.z-dashboard-page so other shells are unaffected. All hooks,
   data-* attributes and existing z-command-center* / z-provider-matrix /
   z-smoke-notice surfaces are kept untouched. No new tokens, no fake
   content, no external resources. */

body.z-dashboard-page .z-welcome {
  display: grid;
  gap: clamp(.65rem, 1.2vw, 1rem);
  padding: clamp(1.1rem, 2vw, 1.55rem);
  border-radius: var(--z-radius-md, 1rem);
  border: 1px solid color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 18%, var(--z-border, var(--st-border)));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 92%, transparent), color-mix(in srgb, var(--z-bg-soft, var(--st-bg)) 86%, transparent)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 14%, transparent), transparent 48%);
  box-shadow: var(--z-shadow-glow, 0 12px 40px -16px color-mix(in srgb, var(--z-accent, #6366f1) 38%, transparent));
  min-width: 0;
  overflow: hidden;
  position: relative;
}

body.z-dashboard-page .z-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--z-text, var(--st-text)) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--z-text, var(--st-text)) 6%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .08;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

body.z-dashboard-page .z-welcome__inner {
  display: grid;
  gap: clamp(.55rem, 1vw, .85rem);
  min-width: 0;
  position: relative;
  z-index: 1;
}

body.z-dashboard-page .z-welcome__heading {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

body.z-dashboard-page .z-welcome__greeting {
  margin: 0;
  font-family: var(--z-font-display, var(--z-font-body, var(--st-font-body)));
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--z-text, var(--st-text));
  word-break: break-word;
}

body.z-dashboard-page .z-welcome__sub {
  margin: 0;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .95rem;
  line-height: 1.5;
  color: var(--z-muted, var(--st-muted));
  max-width: 48rem;
}

body.z-dashboard-page .z-welcome__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .85rem;
  min-width: 0;
}

body.z-dashboard-page .z-welcome__status {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

body.z-dashboard-page .z-welcome__actions .btn-sm {
  padding: .4rem .85rem;
}

/* Command / Search Bar (planned, no backend) */
body.z-dashboard-page .z-command-bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: clamp(.65rem, 1.1vw, .9rem) clamp(.9rem, 1.6vw, 1.15rem);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel, var(--st-panel)) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 0;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-command-bar[aria-disabled="true"] {
  opacity: .9;
  cursor: not-allowed;
}

body.z-dashboard-page .z-command-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--z-muted, var(--st-muted));
  flex-shrink: 0;
}

body.z-dashboard-page .z-command-bar__icon svg {
  width: 100%;
  height: 100%;
}

body.z-dashboard-page .z-command-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--z-muted, var(--st-muted));
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .92rem;
  letter-spacing: 0;
  cursor: not-allowed;
}

body.z-dashboard-page .z-command-bar__input::placeholder {
  color: var(--z-muted, var(--st-muted));
  opacity: .8;
}

body.z-dashboard-page .z-command-bar__input:disabled {
  background: transparent;
  -webkit-text-fill-color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-command-bar__kbd {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .2rem .55rem;
  border-radius: .45rem;
  background: color-mix(in srgb, var(--z-bg, var(--st-bg)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  color: var(--z-muted, var(--st-muted));
  white-space: nowrap;
  flex-shrink: 0;
}

body.z-dashboard-page .z-command-bar__hint {
  display: none;
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--z-muted, var(--st-muted));
  white-space: nowrap;
}

@media (min-width: 1024px) {
  body.z-dashboard-page .z-command-bar__hint {
    display: inline;
  }
}

/* Studio Launcher grid (reuses .st-quick-create-grid) */
body.z-dashboard-page .z-studio-launcher__grid {
  margin-top: .35rem;
}

body.z-dashboard-page .z-studio-launcher__tile {
  position: relative;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}

body.z-dashboard-page .z-studio-launcher__tile:hover,
body.z-dashboard-page .z-studio-launcher__tile:focus-visible {
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 45%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, var(--z-panel-strong, var(--st-surface-container-low)));
  outline: none;
}

body.z-dashboard-page .z-studio-launcher__tile:active {
  transform: translateY(1px);
}

/* Bento Overview */
body.z-dashboard-page .z-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .75rem;
  min-width: 0;
}

body.z-dashboard-page .z-bento__tile {
  display: grid;
  gap: .35rem;
  padding: clamp(.85rem, 1.4vw, 1.05rem);
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 70%, transparent);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

body.z-dashboard-page .z-bento__tile.is-primary {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 30%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-bento__tile.is-secondary {
  border-color: color-mix(in srgb, var(--st-tertiary-container, #c4b5fd) 30%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-bento__tile.is-success {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 45%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-bento__tile.is-warning {
  border-color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 38%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-bento__label {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-bento__value {
  font-family: var(--z-font-display, var(--z-font-body, var(--st-font-body)));
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.05;
  font-weight: 600;
  color: var(--z-text, var(--st-text));
  word-break: break-word;
}

body.z-dashboard-page .z-bento__hint {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  line-height: 1.45;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-bento__hint a {
  color: var(--z-accent, var(--st-primary-container));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Collections compact list */
body.z-dashboard-page .z-collections {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

body.z-dashboard-page .z-collections__item {
  min-width: 0;
}

body.z-dashboard-page .z-collections__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  text-decoration: none;
  color: var(--z-text, var(--st-text));
  min-width: 0;
  transition: border-color .15s ease, background .15s ease;
}

body.z-dashboard-page .z-collections__link:hover,
body.z-dashboard-page .z-collections__link:focus-visible {
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 45%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, var(--z-panel-strong, var(--st-surface-container-low)));
  outline: none;
}

body.z-dashboard-page .z-collections__cover {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--z-radius-sm, .65rem);
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 22%, var(--z-panel, var(--st-panel)));
  border: 1px solid color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 40%, var(--z-border, var(--st-border)));
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .85rem;
  color: var(--z-text, var(--st-text));
  text-transform: uppercase;
  flex-shrink: 0;
}

body.z-dashboard-page .z-collections__body {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

body.z-dashboard-page .z-collections__title {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .9rem;
  font-weight: 600;
  color: var(--z-text, var(--st-text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.z-dashboard-page .z-collections__meta {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-collections__arrow {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .9rem;
  color: var(--z-muted, var(--st-muted));
  flex-shrink: 0;
}

/* Provider Readiness: collapsible details (Phase 8G.10L) */
body.z-dashboard-page .z-provider-details {
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 50%, transparent);
  min-width: 0;
}

body.z-dashboard-page .z-provider-details > summary {
  list-style: none;
  cursor: pointer;
  padding: .75rem .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
}

body.z-dashboard-page .z-provider-details > summary::-webkit-details-marker {
  display: none;
}

body.z-dashboard-page .z-provider-details > summary::before {
  content: "▸";
  display: inline-block;
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .75rem;
  color: var(--z-muted, var(--st-muted));
  margin-right: .55rem;
  transition: transform .15s ease;
}

body.z-dashboard-page .z-provider-details[open] > summary::before {
  transform: rotate(90deg);
}

body.z-dashboard-page .z-provider-details__label {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-provider-details__hint {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-provider-details[open] > .z-provider-matrix {
  padding: .5rem .9rem 1rem;
}

/* Welcome hero responsive: small screens stack meta + actions */
@media (max-width: 767px) {
  body.z-dashboard-page .z-welcome__greeting {
    font-size: clamp(1.3rem, 6vw, 1.6rem);
  }
  body.z-dashboard-page .z-welcome__sub {
    font-size: .88rem;
  }
  body.z-dashboard-page .z-bento__value {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem);
  }
  body.z-dashboard-page .z-command-bar__kbd {
    display: none;
  }
  body.z-dashboard-page .z-collections__link {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }
}

/* === ZAPSOC Music Audio Surface Completion · Phase 8G.10D.2 ===
   Unified Music/Audio suite navigation + visual polish for:
     /music-studio.php  /music-generator.php  /music-history.php
     /music-presets.php /music-howto.php
     /mp3-editor.php    /lyrics-lab.php       /cover-lab.php
   Hooks preserved. Forms / actions / data-* untouched.
   Body scopes: .z-music-suite-page + .z-music-{studio|generator|...}-page. */

body.z-music-suite-page > .dashboard-main > .z-music-suite-nav,
body.music-studio-page > .dashboard-main > .z-music-suite-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  margin: 0 1.25rem .85rem;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
  min-width: 0;
}

body.z-music-suite-page .z-music-suite-nav__item,
body.music-studio-page .z-music-suite-nav__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 70%, var(--z-muted, var(--st-muted)));
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

body.z-music-suite-page .z-music-suite-nav__item:hover,
body.z-music-suite-page .z-music-suite-nav__item:focus-visible,
body.music-studio-page .z-music-suite-nav__item:hover,
body.music-studio-page .z-music-suite-nav__item:focus-visible {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 32%, transparent);
  outline: none;
}

body.z-music-suite-page .z-music-suite-nav__item.is-active,
body.music-studio-page .z-music-suite-nav__item.is-active {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 18%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 50%, transparent);
  font-weight: 600;
}

/* Page header rhythm — applies to every Music/Audio page wrapper */
body.z-music-suite-page .dashboard-main > main > *:first-child,
body.music-studio-page .dashboard-main > main > *:first-child {
  /* nothing special; the suite nav is the first visual element. */
}

/* Section panels — give every Music/Audio page consistent card rhythm */
body.z-music-suite-page section.studio-page,
body.z-music-suite-page .howto-grid,
body.z-music-suite-page .music-history-grid,
body.z-music-suite-page .preset-library,
body.z-music-suite-page .music-tools-cockpit,
body.z-music-suite-page .lyrics-layout,
body.z-music-suite-page .cover-layout,
body.music-studio-page .st-music-builder {
  gap: 1rem;
}

body.z-music-suite-page .card.studio-panel,
body.music-studio-page .card.studio-panel {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
}

/* How-to / preset copy buttons */
body.z-music-suite-page button[data-copy-text] {
  margin-top: .45rem;
}

/* Audio/video rows do not overflow narrow viewports */
body.z-music-suite-page audio,
body.z-music-suite-page video,
body.z-music-suite-page .mp3-waveform-canvas,
body.z-music-suite-page .video-waveform-canvas {
  max-width: 100%;
}

/* Lyrics textarea, cover textarea, prompt textarea overflow guard */
body.z-music-suite-page textarea.form-control,
body.z-music-suite-page .editor-textarea,
body.music-studio-page .st-prompt-preview,
body.music-studio-page .editor-textarea {
  max-width: 100%;
  min-width: 0;
}

/* Music generator Lyrics section — make lyrics textarea section feel first-class */
body.z-music-suite-page.z-music-generator-page .z-lyrics-prompt-wrap,
body.z-music-suite-page.z-music-generator-page .z-lyrics-panel {
  margin-top: .55rem;
}

/* How-to copy-ready example cards sit nicely inside section */
body.z-music-suite-page .howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .85rem;
}

/* MP3 editor tabs row already styled; keep compact */
body.z-music-suite-page.z-mp3-editor-page .mp3-tabs {
  border-radius: var(--z-radius-sm, .75rem);
}

/* Hide suite nav scroll bar on macOS-style overlays while keeping keyboard scroll */
body.z-music-suite-page .z-music-suite-nav::-webkit-scrollbar,
body.music-studio-page .z-music-suite-nav::-webkit-scrollbar {
  height: .35rem;
}

@media (max-width: 767px) {
  body.z-music-suite-page > .dashboard-main > .z-music-suite-nav,
  body.music-studio-page > .dashboard-main > .z-music-suite-nav {
    margin-left: .85rem;
    margin-right: .85rem;
    padding: .35rem .5rem;
  }
  body.z-music-suite-page .z-music-suite-nav__item,
  body.music-studio-page .z-music-suite-nav__item {
    padding: .25rem .55rem;
    font-size: .72rem;
  }
}

/* === ZAPSOC Creative Studios Standard · Phase 8G.10E ===
   Unified Creative Suite navigation + visual polish for:
     /image-studio.php        /image-from-lyrics.php
     /video-maker.php         /video-studio.php (redirect)
     /tts-studio.php          /voice-lab.php
   Hooks preserved. Forms / actions / data-* untouched.
   Body scopes: .z-creative-suite-page + .z-{image|video|tts|voice|studio}-page. */

body.z-creative-suite-page > .dashboard-main > .z-creative-suite-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  margin: 0 1.25rem .85rem;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
  min-width: 0;
}

body.z-creative-suite-page .z-creative-suite-nav__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 70%, var(--z-muted, var(--st-muted)));
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

body.z-creative-suite-page .z-creative-suite-nav__item:hover,
body.z-creative-suite-page .z-creative-suite-nav__item:focus-visible {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 32%, transparent);
  outline: none;
}

body.z-creative-suite-page .z-creative-suite-nav__item.is-active {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 18%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 50%, transparent);
  font-weight: 600;
}

/* Section panel rhythm — consistent across Creative pages */
body.z-creative-suite-page section.studio-page,
body.z-creative-suite-page .lyrics-image-layout,
body.z-creative-suite-page .video-maker-layout,
body.z-creative-suite-page .studio-actionbar,
body.z-creative-suite-page .studio-grid,
body.z-creative-suite-page .tts-grid,
body.z-creative-suite-page .voice-lab-grid {
  gap: 1rem;
}

body.z-creative-suite-page .card.studio-panel {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
}

/* Media previews, video / audio / canvas never overflow */
body.z-creative-suite-page audio,
body.z-creative-suite-page video,
body.z-creative-suite-page canvas,
body.z-creative-suite-page .mp3-waveform-canvas,
body.z-creative-suite-page .video-waveform-canvas,
body.z-creative-suite-page .media-picker-thumb {
  max-width: 100%;
}

/* Textareas never overflow */
body.z-creative-suite-page textarea.form-control,
body.z-creative-suite-page .editor-textarea,
body.z-creative-suite-page .prompt-textarea,
body.z-creative-suite-page .editor-textarea-large {
  max-width: 100%;
  min-width: 0;
}

/* Voice lab consent card uses the same panel rhythm */
body.z-creative-suite-page.z-voice-lab-page .voice-consent-card {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
}

/* TTS workspace — keep voice settings / output panels neat */
body.z-creative-suite-page.z-tts-studio-page .tts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  body.z-creative-suite-page.z-tts-studio-page .tts-grid {
    grid-template-columns: 1fr;
  }
}

/* Image from Lyrics — keep the two-column layout reading well */
body.z-creative-suite-page.z-image-from-lyrics-page .lyrics-image-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  body.z-creative-suite-page.z-image-from-lyrics-page .lyrics-image-layout {
    grid-template-columns: 1fr;
  }
}

/* Voice lab grid */
body.z-creative-suite-page.z-voice-lab-page .voice-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  body.z-creative-suite-page.z-voice-lab-page .voice-lab-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body.z-creative-suite-page > .dashboard-main > .z-creative-suite-nav {
    margin-left: .85rem;
    margin-right: .85rem;
    padding: .35rem .5rem;
  }
  body.z-creative-suite-page .z-creative-suite-nav__item {
    padding: .25rem .55rem;
    font-size: .72rem;
  }
}

/* === ZAPSOC Billing Revenue Credits Deep Structure · Phase 8G.10F ===
   Unified Billing / Revenue / Credits navigation + visual polish for:
     /billing.php
     /pricing.php
     /admin-revenue.php  /admin-plans.php  /admin-usage.php  /admin-settings.php
   Hooks preserved. Forms / actions / data-* untouched.
   Payment / credit / usage / DB logic untouched.
   Body scopes: .z-billing-suite-page + .z-{user-billing|pricing|admin-*}-page. */

body.z-billing-suite-page > .dashboard-main > .z-billing-suite-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  margin: 0 1.25rem .85rem;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
  min-width: 0;
}

body.z-billing-suite-page .z-billing-suite-nav__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 70%, var(--z-muted, var(--st-muted)));
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

body.z-billing-suite-page .z-billing-suite-nav__item:hover,
body.z-billing-suite-page .z-billing-suite-nav__item:focus-visible {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 32%, transparent);
  outline: none;
}

body.z-billing-suite-page .z-billing-suite-nav__item.is-active {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 18%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 50%, transparent);
  font-weight: 600;
}

/* User billing surface — make sure panels / tables never overflow */
body.z-billing-suite-page.z-user-billing-page .billing-page,
body.z-billing-suite-page.z-user-billing-page .media-stats,
body.z-billing-suite-page.z-user-billing-page .music-dashboard-grid,
body.z-billing-suite-page.z-user-billing-page .admin-table {
  max-width: 100%;
  min-width: 0;
}

body.z-billing-suite-page.z-user-billing-page .table-wrap {
  overflow-x: auto;
}

/* Pricing — keep existing kin-pricing cards and add a billing-suite-coherent
   section header rhythm */
body.z-billing-suite-page.z-pricing-page .kin-pricing-main {
  gap: 1rem;
}

/* Admin revenue / plans / usage / settings — admin-page header rhythm */
body.z-billing-suite-page section.admin-page,
body.z-billing-suite-page .admin-page {
  gap: 1rem;
}

body.z-billing-suite-page .card.studio-panel {
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
}

/* Admin settings: keep webhook secret field visually distinct as
   "configured (redacted)" — never reveal the value */
body.z-billing-suite-page.z-admin-settings-page input[type="password"] {
  font-family: var(--z-font-mono, var(--st-font-mono));
  letter-spacing: .05em;
}

/* Admin usage / revenue tables: ensure overflow guard */
body.z-billing-suite-page .table-wrap,
body.z-billing-suite-page .admin-table {
  max-width: 100%;
  min-width: 0;
}

body.z-billing-suite-page .admin-table {
  overflow-x: auto;
}

@media (max-width: 767px) {
  body.z-billing-suite-page > .dashboard-main > .z-billing-suite-nav {
    margin-left: .85rem;
    margin-right: .85rem;
    padding: .35rem .5rem;
  }
  body.z-billing-suite-page .z-billing-suite-nav__item {
    padding: .25rem .55rem;
    font-size: .72rem;
  }
}

/* === ZAPSOC Community Profiles Sharing Foundation · Phase 8G.10G ===
   Unified Community / Profile suite navigation + visual polish for:
     /profile.php  /profile-edit.php  /user.php  /settings.php
     /collections.php  /media-library.php
   Hooks preserved. Forms / actions / data-* untouched.
   No privacy / sharing / publish logic changes.
   Body scopes: .z-community-suite-page + .z-{profile|profile-edit|user|settings|collections-community|media-community}-page. */

body.z-community-suite-page > .dashboard-main > .z-community-suite-nav,
body.z-community-suite-page > .st-main > .z-community-suite-nav,
body.z-community-suite-page .st-main-canvas > .z-community-suite-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  margin: 0 1.25rem .85rem;
  border-radius: var(--z-radius-md, var(--st-radius-lg, 1rem));
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
  min-width: 0;
}

body.z-community-suite-page .z-community-suite-nav__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .78rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 70%, var(--z-muted, var(--st-muted)));
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

body.z-community-suite-page .z-community-suite-nav__item:hover,
body.z-community-suite-page .z-community-suite-nav__item:focus-visible {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 32%, transparent);
  outline: none;
}

body.z-community-suite-page .z-community-suite-nav__item.is-active {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 18%, transparent);
  color: var(--z-text, var(--st-text));
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 50%, transparent);
  font-weight: 600;
}

/* Profile / user surface — keep cards, headers, media previews from overflowing */
body.z-community-suite-page.z-profile-page .profile-avatar img,
body.z-community-suite-page.z-profile-edit-page .avatar-preview img,
body.z-community-suite-page.z-user-page .profile-avatar img {
  max-width: 100%;
  height: auto;
}

body.z-community-suite-page.z-profile-page .profile-header,
body.z-community-suite-page.z-profile-edit-page .settings-section,
body.z-community-suite-page.z-user-page .profile-header {
  gap: 1rem;
}

/* Collections / media library — table & grid overflow guard */
body.z-community-suite-page.z-collections-community-page .collection-grid,
body.z-community-suite-page.z-media-community-page .st-ml-grid,
body.z-community-suite-page.z-media-community-page .deluxe-media-grid {
  max-width: 100%;
  min-width: 0;
}

body.z-community-suite-page.z-collections-community-page .table-wrap,
body.z-community-suite-page.z-media-community-page .table-wrap {
  overflow-x: auto;
}

/* Settings form: keep helper text readable, fields stack on mobile */
body.z-community-suite-page.z-settings-page .settings-grid,
body.z-community-suite-page.z-profile-edit-page .settings-grid {
  gap: .85rem;
}

@media (max-width: 767px) {
  body.z-community-suite-page > .dashboard-main > .z-community-suite-nav,
  body.z-community-suite-page > .st-main > .z-community-suite-nav,
  body.z-community-suite-page .st-main-canvas > .z-community-suite-nav {
    margin-left: .85rem;
    margin-right: .85rem;
    padding: .35rem .5rem;
  }
  body.z-community-suite-page .z-community-suite-nav__item {
    padding: .25rem .55rem;
    font-size: .72rem;
  }
}

/* === ZAPSOC Command Center Data Wiring · Phase 8G.10H ===
   Adds the "Media &amp; Collections Readiness", "Studio Suite Readiness"
   and "Next Actions" command-center sections to the dashboard.
   All data is read-only from existing services. No fake counts. */

body.z-dashboard-page .z-next-actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

body.z-dashboard-page .z-next-actions__item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .65rem .8rem;
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 60%, transparent);
  min-width: 0;
}

body.z-dashboard-page .z-next-actions__label {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .88rem;
  font-weight: 600;
  color: var(--z-text, var(--st-text));
  text-decoration: none;
}

body.z-dashboard-page .z-next-actions__label:hover,
body.z-dashboard-page .z-next-actions__label:focus-visible {
  color: var(--z-accent, var(--st-primary-container));
  text-decoration: underline;
  outline: none;
}

body.z-dashboard-page .z-next-actions__hint {
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .75rem;
  line-height: 1.45;
  color: var(--z-muted, var(--st-muted));
}

/* === ZAPSOC Provider Readiness Hardening · Phase 8G.10I ===
   Per-flow readiness matrix on the dashboard. Read-only. No secrets. */
body.z-dashboard-page .z-provider-matrix {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  min-width: 0;
}

body.z-dashboard-page .z-provider-matrix__head {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

body.z-dashboard-page .z-provider-matrix__title {
  font-family: var(--z-font-headline, var(--st-font-headline));
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-provider-matrix__hint {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-provider-matrix__table {
  font-size: .78rem;
}

body.z-dashboard-page .z-provider-matrix__table th {
  text-align: left;
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-provider-matrix__table td {
  vertical-align: top;
  padding: .5rem .65rem;
}

body.z-dashboard-page .z-provider-matrix__table code {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  background: color-mix(in srgb, var(--z-bg, var(--st-bg)) 60%, transparent);
  padding: .05rem .35rem;
  border-radius: .3rem;
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
}

body.z-dashboard-page .z-provider-matrix__pill {
  display: inline-block;
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .02em;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--z-bg, var(--st-bg)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  color: var(--z-text, var(--st-text));
  white-space: nowrap;
}

body.z-dashboard-page .z-provider-matrix__pill.is-required {
  border-color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 45%, var(--z-border, var(--st-border)));
  color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 70%, var(--z-text, var(--st-text)));
}

body.z-dashboard-page .z-provider-matrix__pill.is-na {
  opacity: .65;
}

body.z-dashboard-page .z-provider-matrix__pill.is-ready {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 45%, var(--z-border, var(--st-border)));
}

body.z-dashboard-page .z-provider-matrix__pill.is-warning {
  border-color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 45%, var(--z-border, var(--st-border)));
  color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 70%, var(--z-text, var(--st-text)));
}

body.z-dashboard-page .z-provider-matrix__pill.is-safe {
  border-color: color-mix(in srgb, var(--st-secondary-container, #5eead4) 35%, var(--z-border, var(--st-border)));
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 80%, var(--z-muted, var(--st-muted)));
}

body.z-dashboard-page .z-provider-matrix__key {
  font-size: .66rem;
  color: var(--z-muted, var(--st-muted));
}

@media (max-width: 767px) {
  body.z-dashboard-page .z-provider-matrix__table {
    font-size: .72rem;
  }
  body.z-dashboard-page .z-provider-matrix__pill {
    font-size: .62rem;
  }
}

/* === ZAPSOC Safe Real Generation Smoke Plan · Phase 8G.10J ===
   Informational-only notice. No button, no fetch, no provider call.
   Tells the operator that real provider smokes are blocked by default
   and require explicit `RUN REAL SMOKE 8G.10J` approval. */
body.z-dashboard-page .z-smoke-notice {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .65rem;
  padding: .65rem .85rem;
  border-radius: var(--z-radius-sm, .75rem);
  border: 1px dashed color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  background: color-mix(in srgb, var(--z-panel-strong, var(--st-surface-container-low)) 40%, transparent);
  min-width: 0;
}

body.z-dashboard-page .z-smoke-notice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

body.z-dashboard-page .z-smoke-notice__label {
  font-family: var(--z-font-headline, var(--st-font-headline));
  font-size: .85rem;
  font-weight: 600;
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-smoke-notice__status {
  display: inline-block;
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .68rem;
  letter-spacing: .02em;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st-status-warning, #f59e0b) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-status-warning, #f59e0b) 45%, var(--z-border, var(--st-border)));
  color: color-mix(in srgb, var(--st-status-warning, #f59e0b) 70%, var(--z-text, var(--st-text)));
}

body.z-dashboard-page .z-smoke-notice__body {
  margin: 0;
  font-family: var(--z-font-body, var(--st-font-body));
  font-size: .75rem;
  line-height: 1.5;
  color: var(--z-muted, var(--st-muted));
}

body.z-dashboard-page .z-smoke-notice__body code {
  font-family: var(--z-font-mono, var(--st-font-mono));
  font-size: .72rem;
  padding: .05rem .35rem;
  border-radius: .3rem;
  background: color-mix(in srgb, var(--z-bg, var(--st-bg)) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 88%, transparent);
  color: var(--z-text, var(--st-text));
}

/* === ZAPSOC Dashboard Sidebar Cleanup · Phase 8G.10M ===
   Sidebar is restructured by product area (Creation Hub / Management /
   Tools / Billing / Admin Panel / Operations). Dashboard Welcome /
   Command Bar / Studio Launcher / Bento are now the top priority, and
   the Create Flow + Active preset banner + Campaign Presets are hidden
   behind a closed-by-default <details> block so they no longer dominate
   the Dashboard top. All hooks (data-sidebar-section="admin",
   data-sidebar-link, st-sidebar-logout, is-active, aria-current) are
   preserved exactly. No Material Symbols, no Tailwind, no Google Fonts,
   no remote images, no href="#". */

.sidebar.st-stitch .z-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .65rem;
  border-radius: var(--z-radius-md, .9rem);
  border: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 78%, transparent);
  background: color-mix(in srgb, var(--z-bg-soft, var(--st-surface-container-low)) 70%, transparent);
}

.sidebar.st-stitch .z-sidebar-section + .z-sidebar-section {
  margin-top: .35rem;
}

.sidebar.st-stitch .z-sidebar-section--admin {
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 28%, var(--z-border, var(--st-border)));
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 8%, var(--z-bg-soft, var(--st-surface-container-low)) 70%);
}

.sidebar.st-stitch .z-sidebar-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 70%, transparent);
}

.sidebar.st-stitch .z-sidebar-heading__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 18%, transparent);
  display: inline-block;
}

.sidebar.st-stitch .z-sidebar-heading__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.st-stitch .z-sidebar-section__nav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.sidebar.st-stitch .z-sidebar-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .55rem;
  border-radius: .65rem;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 88%, transparent);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.15;
  border: 1px solid transparent;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.sidebar.st-stitch .z-sidebar-link:hover,
.sidebar.st-stitch .z-sidebar-link:focus-visible {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 10%, transparent);
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 24%, transparent);
  color: var(--z-text, var(--st-text));
  outline: none;
}

.sidebar.st-stitch .z-sidebar-link.is-active {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 16%, transparent);
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 42%, transparent);
  color: var(--z-text, var(--st-text));
  font-weight: 600;
}

.sidebar.st-stitch .z-sidebar-link.is-active .st-nav-icon {
  color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 90%, transparent);
}

.sidebar.st-stitch .z-sidebar-link .st-nav-icon {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 60%, transparent);
}

.sidebar.st-stitch .z-sidebar-link .st-nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar.st-stitch .z-sidebar-link__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make sure the redesigned sections scroll internally inside the existing
   sidebar surface so they do not introduce a page-wide horizontal scroll. */
.sidebar.st-stitch .st-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

/* Restore the legacy flat-link styling for any non-section anchors that
   still exist inside .st-sidebar-nav (e.g. .st-sidebar-new button). */
.sidebar.st-stitch .st-sidebar-nav > a:not(.z-sidebar-link) {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .65rem;
  border-radius: .65rem;
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 88%, transparent);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}

.sidebar.st-stitch .st-sidebar-nav > a:not(.z-sidebar-link).is-active {
  background: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 16%, transparent);
  border-color: color-mix(in srgb, var(--z-accent, var(--st-primary-container)) 42%, transparent);
}

.sidebar.st-stitch .st-sidebar-section + .st-sidebar-new {
  margin-top: .25rem;
}

/* Dashboard top cleanup — the Create Flow, Active preset banner and
   Campaign Presets live inside a single closed-by-default <details>
   so the Welcome / Studio Launcher / Bento overview surfaces dominate. */
body.z-dashboard-page .z-dashboard-creation-helpers {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  border: 1px dashed color-mix(in srgb, var(--z-border, var(--st-border)) 70%, transparent);
  border-radius: var(--z-radius-md, .9rem);
  background: color-mix(in srgb, var(--z-bg-soft, var(--st-surface-container-lowest)) 70%, transparent);
  padding: .65rem .85rem;
  max-width: 100%;
  min-width: 0;
}

body.z-dashboard-page .z-dashboard-creation-helpers__summary {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  cursor: pointer;
  list-style: none;
  font-size: .85rem;
}

body.z-dashboard-page .z-dashboard-creation-helpers__summary::-webkit-details-marker {
  display: none;
}

body.z-dashboard-page .z-dashboard-creation-helpers__label {
  font-weight: 600;
  color: var(--z-text, var(--st-text));
}

body.z-dashboard-page .z-dashboard-creation-helpers__hint {
  color: color-mix(in srgb, var(--z-text, var(--st-text)) 60%, transparent);
  font-size: .78rem;
}

body.z-dashboard-page .z-dashboard-creation-helpers__body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--z-border, var(--st-border)) 60%, transparent);
}

body.z-dashboard-page .z-dashboard-creation-helpers .st-create-flow,
body.z-dashboard-page .z-dashboard-creation-helpers .st-campaign-presets {
  margin-top: 0;
}

/* On smaller screens the sidebar groups stay readable but slightly tighter. */
@media (max-width: 540px) {
  .sidebar.st-stitch .z-sidebar-section {
    padding: .5rem .55rem;
  }
  .sidebar.st-stitch .z-sidebar-link {
    padding: .4rem .5rem;
    font-size: .85rem;
  }
}

/* === ZAPSOC Sidebar Footer Pinning Fix · Phase 8G.10M.1 ===
   The desktop sidebar (`.sidebar.st-stitch`) is a fixed 100vh flex
   column. Brand and "New Project" sit at the top, the nav groups sit
   in their own scrollable area (`.z-sidebar-scroll`), and the
   account/profile block + logout link sit pinned in
   `.z-sidebar-footer` at the bottom. The nav no longer competes with
   the footer for vertical space — only the nav region scrolls if
   content overflows.

   Hooks preserved exactly:
     - .st-sidebar-account / .st-sidebar-account-avatar / etc.
     - .st-sidebar-logout (still href="/logout.php")
     - data-sidebar-section / data-sidebar-link
     - is-active / aria-current on nav links
     - admin gating on the logout block

   No external resources, no Material Symbols, no Tailwind, no
   Google Fonts, no href="#".
   ============================================================= */

/* 1. Scroll wrapper — the only region that scrolls. */
.dashboard-shell .sidebar .z-sidebar-scroll,
.sidebar.st-stitch .z-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Kinetic dark friendly scrollbar, matches existing sidebar rules. */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .32) transparent;
}

.dashboard-shell .sidebar .z-sidebar-scroll::-webkit-scrollbar,
.sidebar.st-stitch .z-sidebar-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dashboard-shell .sidebar .z-sidebar-scroll::-webkit-scrollbar-track,
.sidebar.st-stitch .z-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-shell .sidebar .z-sidebar-scroll::-webkit-scrollbar-thumb,
.sidebar.st-stitch .z-sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(148, 163, 184, .34), rgba(94, 234, 212, .22));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.dashboard-shell .sidebar .z-sidebar-scroll::-webkit-scrollbar-thumb:hover,
.sidebar.st-stitch .z-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(148, 163, 184, .52), rgba(94, 234, 212, .36));
  background-clip: padding-box;
}

/* 2. Footer wrapper — pinned at the bottom, never scrolls. */
.dashboard-shell .sidebar .z-sidebar-footer,
.sidebar.st-stitch .z-sidebar-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .35rem 0 .85rem;
  border-top: 1px solid var(--st-border);
  background: var(--st-surface);
}

/* 3. Account block — remove old `margin-top:auto` and border-top
   because the footer wrapper now provides the visual separator. */
.dashboard-shell .sidebar .z-sidebar-footer .st-sidebar-account,
.sidebar.st-stitch .z-sidebar-footer .st-sidebar-account {
  margin-top: 0;
  padding: .65rem 1rem 0;
  border-top: 0;
}

/* 4. Logout block — remove the old `margin: auto` (which pushed it
   to the bottom of an overflowing sidebar) and remove the redundant
   border-top (the footer wrapper already has one). */
.dashboard-shell .sidebar .z-sidebar-footer .st-sidebar-logout,
.sidebar.st-stitch .z-sidebar-footer .st-sidebar-logout {
  margin: .15rem 1rem 0;
  border-top: 0;
  padding-top: .55rem;
  /* width was set by the prior compact-logout rule; keep that width. */
  width: calc(100% - 2rem);
  max-width: calc(100% - 2rem);
}

/* 5. Mobile: footer keeps the compact rhythm even on small screens. */
@media (max-width: 767px) {
  .dashboard-shell .sidebar .z-sidebar-footer,
  .sidebar.st-stitch .z-sidebar-footer {
    padding: .25rem 0 .65rem;
  }
  .dashboard-shell .sidebar .z-sidebar-footer .st-sidebar-account,
  .sidebar.st-stitch .z-sidebar-footer .st-sidebar-account {
    padding: .55rem .75rem 0;
  }
  .dashboard-shell .sidebar .z-sidebar-footer .st-sidebar-logout,
  .sidebar.st-stitch .z-sidebar-footer .st-sidebar-logout {
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
    margin: .1rem .75rem 0;
  }
}

/* === ZAPSOC Image Studio Workspace Redesign · Phase 8G.10N ===
   Three-panel workspace: builder (left) + canvas (center) + recent (right).
   Scoped under body.z-image-studio-page so the existing sidebar shell
   and creative suite layout stay untouched. Reuses --st-* tokens.

   No external assets. No Tailwind. No Google Fonts. No Material Symbols.
   ============================================================= */

body.z-image-studio-page .z-image-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.1rem;
  align-items: start;
  margin: 1rem 0 1.25rem;
}

body.z-image-studio-page .z-image-builder-canvas {
  min-width: 0;
}

body.z-image-studio-page .z-image-builder,
body.z-image-studio-page .z-image-canvas,
body.z-image-studio-page .z-image-recent {
  min-width: 0;
}

/* Header note line under hero */
body.z-image-studio-page .z-image-studio-header-note,
body.z-image-studio-page .z-image-studio-header .z-image-studio-header-note {
  margin: .65rem 0 0;
  font-size: .82rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  max-width: 64ch;
  line-height: 1.5;
}

/* ---------- Recent panel ---------- */

body.z-image-studio-page .z-image-recent {
  position: sticky;
  top: 1rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg, 8px);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.04) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  padding: 1rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.6);
}

body.z-image-studio-page .z-image-recent-head .kicker,
body.z-image-studio-page .z-image-recent-negative .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0 0 .15rem;
}

body.z-image-studio-page .z-image-recent-head h3,
body.z-image-studio-page .z-image-recent-negative h3 {
  font-family: var(--st-font-display, inherit);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .25rem;
  color: var(--st-text, #F0F6FC);
}

body.z-image-studio-page .z-image-recent-hint {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  margin: 0 0 .5rem;
}

body.z-image-studio-page .z-image-recent-empty {
  padding: 1rem;
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius, 4px);
  background: rgba(255, 255, 255, 0.015);
  text-align: left;
}

body.z-image-studio-page .z-image-recent-empty p {
  margin: 0;
  font-size: .82rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

body.z-image-studio-page .z-image-recent-empty p + p {
  margin-top: .35rem;
  font-size: .75rem;
}

body.z-image-studio-page .z-image-recent-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .55rem;
}

body.z-image-studio-page .z-image-recent-item {
  background: var(--st-surface-container, #1D2023);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.z-image-studio-page .z-image-recent-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--st-surface-container-lowest, #0C0E12);
  overflow: hidden;
}

body.z-image-studio-page .z-image-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 180ms ease;
}

body.z-image-studio-page .z-image-recent-thumb:hover img,
body.z-image-studio-page .z-image-recent-thumb:focus-visible img {
  transform: scale(1.04);
}

body.z-image-studio-page .z-image-recent-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .35rem .45rem .45rem;
}

body.z-image-studio-page .z-image-recent-meta .badge {
  align-self: flex-start;
  font-size: .65rem;
  padding: .05rem .4rem;
  background: rgba(94, 234, 212, 0.14);
  color: var(--st-accent-cyan, #5EEAD4);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: var(--st-radius-full, 9999px);
}

body.z-image-studio-page .z-image-recent-name {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.z-image-studio-page .z-image-recent-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

body.z-image-studio-page .z-image-recent-divider {
  height: 1px;
  background: var(--st-border);
  margin: .25rem 0;
}

body.z-image-studio-page .z-image-negative-suggestions {
  list-style: none;
  margin: 0 0 .55rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

body.z-image-studio-page .z-image-negative-suggestions li {
  display: inline-flex;
}

body.z-image-studio-page .z-image-chip-text {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  font-size: .72rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

body.z-image-studio-page .z-image-safety-note {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--st-border);
}

/* ---------- Builder / canvas panel refinements ---------- */

body.z-image-studio-page .z-image-builder,
body.z-image-studio-page .z-image-canvas {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

body.z-image-studio-page .z-image-canvas .st-image-preview-panel {
  background:
    linear-gradient(180deg,
      rgba(56, 189, 248, 0.04) 0%,
      rgba(56, 189, 248, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  border-color: var(--st-border-strong, rgba(255, 255, 255, 0.14));
}

body.z-image-studio-page .z-image-card {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg, 8px);
  background: var(--st-surface-container-low, #191C1F);
}

body.z-image-studio-page .z-image-generate {
  position: relative;
  box-shadow: 0 8px 24px -14px rgba(56, 189, 248, 0.55);
}

body.z-image-studio-page .z-image-generate:focus-visible {
  outline: 2px solid var(--st-accent-cyan, #5EEAD4);
  outline-offset: 2px;
}

/* Reference dropzone — make file chooser feel like a true dropzone */
body.z-image-studio-page .reference-preview[data-image-studio-dropzone] {
  border: 1px dashed var(--st-border-strong, rgba(255, 255, 255, 0.14));
  border-radius: var(--st-radius-md, 6px);
  background: rgba(255, 255, 255, 0.02);
  padding: .85rem;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  body.z-image-studio-page .z-image-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  body.z-image-studio-page .z-image-recent {
    position: static;
  }
}

@media (max-width: 767px) {
  body.z-image-studio-page .z-image-workspace {
    gap: .75rem;
  }
  body.z-image-studio-page .z-image-recent {
    padding: .85rem .85rem .75rem;
  }
  body.z-image-studio-page .z-image-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.z-image-studio-page .z-image-recent-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === ZAPSOC Image Studio Top Cleanup · Phase 8G.10N.1 ===
   The Creative Suite nav, Create Flow stepper and Active preset banner
   were demoted from the top of the page. They now live inside a
   collapsed <details> block below the workspace.

   The workspace (`data-image-studio-workspace`) is now the FIRST
   visible content. Sidebar covers suite navigation. JS still
   populates the moved hooks (`data-create-flow`,
   `data-active-preset-banner`).

   No external assets. No Tailwind. No Google Fonts. No Material Symbols.
   ============================================================= */

body.z-image-studio-page [data-image-studio-creation-helpers] {
  margin: 1.25rem 0 1.5rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg, 8px);
  background: var(--st-surface-container-low, #191C1F);
  overflow: hidden;
}

body.z-image-studio-page [data-image-studio-creation-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .65rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid transparent;
  transition: background 150ms ease, border-color 150ms ease;
  display: flex;
  align-items: center;
  gap: .5rem;
}

body.z-image-studio-page [data-image-studio-creation-helpers] > summary::-webkit-details-marker {
  display: none;
}

body.z-image-studio-page [data-image-studio-creation-helpers] > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-size: .85rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

body.z-image-studio-page [data-image-studio-creation-helpers][open] > summary::before {
  content: "−";
}

body.z-image-studio-page [data-image-studio-creation-helpers] > summary:hover,
body.z-image-studio-page [data-image-studio-creation-helpers] > summary:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--st-text, #F0F6FC);
}

body.z-image-studio-page [data-image-studio-creation-helpers][open] > summary {
  border-bottom-color: var(--st-border);
  color: var(--st-text, #F0F6FC);
}

body.z-image-studio-page .z-image-studio-creation-helpers-inner {
  padding: .85rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

body.z-image-studio-page .z-image-studio-creation-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* The moved-in helpers keep their original styles via existing
   scoped CSS; we just make sure they sit compactly inside the
   collapsed wrapper. */
body.z-image-studio-page .z-image-studio-creation-helpers-inner .st-create-flow {
  margin: 0;
}

body.z-image-studio-page .z-image-studio-creation-helpers-inner [data-active-preset-banner] {
  margin: 0;
}

/* === ZAPSOC Unified Topbar Standard · Phase 8G.10O ===
   The shared topbar component (app/Views/layout/topbar.php) is now
   the single source of truth for the authenticated navigation bar.
   It already drives Dashboard / Home / Studio / Admin / Community
   pages identically — same DOM hooks, same CSS tokens, same height.

   This block layers the stable [data-topbar-*] QA hooks on top of
   the existing `.st-topbar` styles without changing the dashboard
   visual. New wrapper `.st-topbar-heading` keeps the title row at
   the same 4rem height; the eyebrow and status slots only render
   when explicitly set, so the home/dashboard topbar is byte-for-byte
   identical to before.

   Sidebar CSS is untouched. No external assets. No fake credits,
   notifications or unread counts. Action links point to real routes
   only. The "New" CTA, command palette trigger and theme toggle are
   preserved exactly as they were.

   Hooks added (additive, do not break existing class names):
     - [data-topbar]              header root
     - [data-topbar-title]        page title h2
     - [data-topbar-subtitle]     optional subtitle (rendered only if set)
     - [data-topbar-status]       optional status pill (rendered only if set)
     - [data-topbar-eyebrow]      optional eyebrow caps (rendered only if set)
     - [data-topbar-search]       search wrapper
     - [data-topbar-actions]      actions wrapper
     - [data-topbar-command]      command palette trigger
     - [data-topbar-theme]        theme toggle
     - [data-topbar-new]          new-project CTA
     - [data-topbar-profile]      avatar / profile link
     - [data-topbar-logout]       logout link
   ============================================================= */

body.dashboard-shell [data-topbar],
body.dashboard-shell .z-topbar {
  /* Reinforces sticky behavior already in .st-topbar so JS/QA can
     rely on the data attribute as the canonical selector. */
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Eyebrow / status slots — only affect the topbar when explicitly set.
   Empty by default, so Dashboard/Home keeps the original look. */
body.dashboard-shell .st-topbar-heading {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
}

body.dashboard-shell [data-topbar-eyebrow] {
  margin: 0;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
}

body.dashboard-shell [data-topbar-status] {
  display: inline-flex;
  align-items: center;
  padding: .12rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(94, 234, 212, 0.14);
  color: var(--st-accent-cyan, #5EEAD4);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: var(--st-radius-full, 9999px);
  white-space: nowrap;
}

body.dashboard-shell [data-topbar-subtitle] {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  line-height: 1.4;
  max-width: 56ch;
}

/* Keep topbar height stable even when eyebrow / status / subtitle
   are present. The heading wrapper is the only thing that may grow. */
body.dashboard-shell [data-topbar] {
  min-height: 4rem;
}

body.dashboard-shell .st-topbar-heading {
  flex-wrap: wrap;
  row-gap: .05rem;
}

/* Mobile: keep the standard rhythm, hide heavy chunks. */
@media (max-width: 767px) {
  body.dashboard-shell [data-topbar] {
    padding: 0 1rem;
    gap: .65rem;
  }
  body.dashboard-shell .st-topbar-title {
    font-size: 1.1rem;
  }
  body.dashboard-shell [data-topbar-eyebrow],
  body.dashboard-shell [data-topbar-status],
  body.dashboard-shell [data-topbar-subtitle] {
    display: none;
  }
}

/* === ZAPSOC Remaining Topbar Normalization · Phase 8G.10O.1 ===
   Per-page suite navigation pills (z-creative-suite-nav / z-music-suite-nav
   / z-billing-suite-nav / z-community-suite-nav) used to render right
   under the shared topbar, creating a "two topbars" effect. Pages also
   showed a Create Flow stepper + Active preset banner at the top.

   This phase keeps every data-* / class hook intact (so suite QA still
   passes) but visually demotes both surfaces by wrapping them inside a
   collapsed <details data-page-suite-helpers> block.

   When collapsed (default) the suite nav is just a small "Page navigation"
   disclosure chip — no border, no pill row, no second topbar.
   When expanded the same nav appears, but with the same compact rhythm
   the home/dashboard topbar uses, not the previous bar-like styling.

   Sidebar CSS is untouched. No external assets. No fake credits,
   notifications, unread counts or provider states.
   ============================================================= */

body.dashboard-shell [data-page-suite-helpers] {
  margin: .25rem 1.25rem .85rem;
  border-radius: var(--st-radius-lg, 8px);
  background: transparent;
  overflow: hidden;
}

body.dashboard-shell [data-page-suite-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

body.dashboard-shell [data-page-suite-helpers] > summary::-webkit-details-marker {
  display: none;
}

body.dashboard-shell [data-page-suite-helpers] > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .95rem;
  height: .95rem;
  font-size: .85rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

body.dashboard-shell [data-page-suite-helpers][open] > summary::before {
  content: "−";
}

body.dashboard-shell [data-page-suite-helpers] > summary:hover,
body.dashboard-shell [data-page-suite-helpers] > summary:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--st-text, #F0F6FC);
  border-color: var(--st-border-strong, rgba(255, 255, 255, 0.14));
  outline: none;
}

/* When expanded, the inner suite nav renders with a compact rhythm.
   Override the default bar-like styling from older rules so it never
   looks like a second topbar. */
body.dashboard-shell [data-page-suite-helpers] > .z-creative-suite-nav,
body.dashboard-shell [data-page-suite-helpers] > .z-music-suite-nav,
body.dashboard-shell [data-page-suite-helpers] > .z-billing-suite-nav,
body.dashboard-shell [data-page-suite-helpers] > .z-community-suite-nav {
  margin: .65rem 0 .25rem;
  padding: .35rem .25rem;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-wrap: wrap;
  gap: .25rem;
  max-width: 100%;
}

body.dashboard-shell [data-page-suite-helpers] .z-creative-suite-nav__item,
body.dashboard-shell [data-page-suite-helpers] .z-music-suite-nav__item,
body.dashboard-shell [data-page-suite-helpers] .z-billing-suite-nav__item,
body.dashboard-shell [data-page-suite-helpers] .z-community-suite-nav__item {
  padding: .25rem .55rem;
  font-size: .72rem;
}

/* The Create Flow stepper + Active preset banner live inside the same
   collapsed disclosure so they never appear above the workspace. */
body.dashboard-shell [data-page-suite-helpers] .st-create-flow {
  margin: .5rem 0 0;
}

body.dashboard-shell [data-page-suite-helpers] [data-active-preset-banner] {
  margin: .25rem 0 0;
}

/* Mobile: even more compact chip, smaller padding. */
@media (max-width: 767px) {
  body.dashboard-shell [data-page-suite-helpers] {
    margin: .25rem .75rem .65rem;
  }
  body.dashboard-shell [data-page-suite-helpers] > summary {
    padding: .25rem .6rem;
    font-size: .62rem;
  }
  body.dashboard-shell [data-page-suite-helpers] .z-creative-suite-nav__item,
  body.dashboard-shell [data-page-suite-helpers] .z-music-suite-nav__item,
  body.dashboard-shell [data-page-suite-helpers] .z-billing-suite-nav__item,
  body.dashboard-shell [data-page-suite-helpers] .z-community-suite-nav__item {
    font-size: .68rem;
    padding: .2rem .45rem;
  }
}

/* === ZAPSOC Secondary Topbar Cleanup · Phase 8G.10O.2 ===
   After 8G.10O + 8G.10O.1, the shared topbar is the only true topbar.
   The remaining problem is visual: the <details data-page-suite-helpers>
   summary chip still rendered as a "second topbar row" right under the
   shared topbar, and admin pages repeated the page title in a separate
   admin-page-header.

   This phase:

   1) Demotes every [data-page-suite-helpers] summary at the top of the
      main area to a tiny breadcrumb-like chip — small, low contrast,
      no border, no topbar-like background. The nav itself stays in
      the DOM (suite QA still finds it) but the visual surface is a
      small inline hint, not a bar.

   2) Replaces the admin-page-header duplicate title/subtitle region on
      every admin page with a small toolbar (`.z-admin-page-toolbar`)
      that only holds real page actions / status chips. The h1 +
      subtitle are removed because the shared topbar already shows them.

   Sidebar CSS is untouched. No external assets. No fake credits,
   notifications, unread counts, or provider states.
   ============================================================= */

/* Suite nav at top of main: demote the summary to a tiny inline chip
   so it never reads as a second topbar. The nav itself is hidden by
   default (collapsed details) and only revealed on user click. */
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) {
  margin: .15rem 1.25rem .35rem;
  display: inline-flex;
  max-width: calc(100% - 2.5rem);
  vertical-align: middle;
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .12rem .55rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.5));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  list-style: none;
  cursor: pointer;
  width: auto;
  margin: 0;
  transition: color 120ms ease, border-color 120ms ease;
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary::-webkit-details-marker {
  display: none;
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary::before {
  content: "+";
  font-size: .8rem;
  line-height: 1;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.5));
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] > summary::before {
  content: "−";
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary:hover,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary:focus-visible {
  color: var(--st-text, #F0F6FC);
  border-color: var(--st-border-strong, rgba(255, 255, 255, 0.14));
  outline: none;
}

/* When expanded, the inner nav renders in a flat inline row, not as a
   bordered bar. Keeps the nav functional for QA + manual navigation
   but visually subordinate. */
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] {
  display: block;
  margin: .25rem 1.25rem .65rem;
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] > .z-creative-suite-nav,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] > .z-music-suite-nav,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] > .z-billing-suite-nav,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] > .z-community-suite-nav {
  margin: .4rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-wrap: wrap;
  gap: .3rem;
  max-width: 100%;
}

body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] .z-creative-suite-nav__item,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] .z-music-suite-nav__item,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] .z-billing-suite-nav__item,
body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom])[open] .z-community-suite-nav__item {
  padding: .2rem .55rem;
  font-size: .7rem;
}

/* Admin page toolbar — replaces the old admin-page-header that
   duplicated the topbar title/subtitle. Holds only real actions. */
body.dashboard-shell .z-admin-page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .75rem 1.25rem 0;
  padding: 0;
}

body.dashboard-shell .z-admin-page-toolbar .admin-page-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* The legacy admin-page-header is still used for the page kicker chip
   only (no h1, no subtitle, no duplicate of topbar). Visual is
   de-emphasized so it never reads as a second topbar. */
body.dashboard-shell .admin-page-header {
  margin: 0 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
}

body.dashboard-shell .admin-page-header .admin-page-kicker,
body.dashboard-shell .admin-page-header .admin-page-title,
body.dashboard-shell .admin-page-header .admin-page-subtitle {
  display: none;
}

body.dashboard-shell .admin-page-header .admin-page-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* On admin pages where the old admin-page-header is fully empty
   (kicker/title/subtitle/actions all moved out), suppress the
   wrapper so it leaves no extra space. */
body.dashboard-shell .admin-page-header:not(:has(*)) {
  display: none;
}

@media (max-width: 767px) {
  body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) {
    margin: .15rem .75rem .35rem;
  }
  body.dashboard-shell main > [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary {
    font-size: .55rem;
    padding: .1rem .45rem;
  }
  body.dashboard-shell .z-admin-page-toolbar {
    margin: .5rem .75rem 0;
  }
}

/* === ZAPSOC Topbar Position Final Fix · Phase 8G.10O.3 ===
   The shared [data-topbar] is the first flex child of <main>. Several
   body-class overrides on .dashboard-main add padding-top:
     - z-dashboard-page / z-image-studio-page / z-video-maker-page /
       z-collections-page / z-media-library-page / music-studio-page:
         padding-top: 1rem (16 px)
     - kin-admin-shell (admin pages incl. kin-admin-plans /
       kin-admin-revenue): padding-top: .45rem (7.2 px)
   Music studio's main additionally has the .st-page class with
   padding: 1.5rem 1.75rem 7rem — pushing the topbar 28 px right.

   The topbar must sit at x=256, y=0 on every sidebar desktop page
   regardless of these per-page paddings. CSS-only fix: pull the topbar
   up and out with a matching negative margin so the parent's padding
   is neutralised for the topbar alone. Body / main / children are
   unaffected.

   Sidebar CSS is untouched. No behavior change. No external assets.
   ============================================================= */

/* Pages where main has padding-top: 1rem — pull topbar up by 1rem. */
body.dashboard-shell.z-dashboard-page.st-stitch [data-topbar],
body.dashboard-shell.z-image-studio-page.st-stitch [data-topbar],
body.dashboard-shell.z-video-maker-page.st-stitch [data-topbar],
body.dashboard-shell.z-collections-page.st-stitch [data-topbar],
body.dashboard-shell.z-media-library-page.st-stitch [data-topbar],
body.dashboard-shell.music-studio-page.st-stitch [data-topbar] {
  margin-top: -1rem;
}

/* Pages where main has padding-top: 0.45rem — pull topbar up by 0.45rem.
   Also reset margin to 0 so the rules above don't stack on top. */
body.dashboard-shell.kin-admin-shell.st-stitch [data-topbar] {
  margin-top: -0.45rem;
}

/* Music studio's <main class="dashboard-main st-page"> has padding
   1.5rem 1.75rem 7rem. Pull topbar left and right so it spans the
   full main width (matching every other page) and starts at x=256. */
body.dashboard-shell.st-stitch main.st-page > [data-topbar] {
  margin-left: -1.75rem;
  margin-right: -1.75rem;
}

/* Mobile: keep the y=0 anchor (margin-top must stay negative to
   counteract padding-top), but reset the horizontal pull so the
   topbar doesn't bleed off the edges at narrow widths where
   padding-left/right on main is collapsed. */
@media (max-width: 767px) {
  body.dashboard-shell [data-topbar] {
    margin-left: 0;
    margin-right: 0;
  }
}

/* === ZAPSOC Image Studio Topbar Visual Fix · Phase 8G.10O.4 ===
   The image-studio page set $pageActions to 6 buttons (Generate Image,
   Update Prompt, Copy Prompt, Clear, Image from Lyrics, Open Media
   Library). With only 64px of topbar height, that block overflowed
   vertically — right-side content rendered at y=-18 / h=100, pushing
   the left-side title/tabs area into width=0.

   Fix: image-studio.php now sets $pageActions = '' so the topbar shows
   only the dashboard-standard navigation + utility controls. The
   action buttons remain available inside the visual-builder canvas
   panel (data-image-direct-generate, data-image-rebuild, ... ) and
   the legacy workbench (data-image-generate, data-update-prompt, ...).

   The scoped CSS rules below defend against regression if $pageActions
   is ever populated again — the topbar height, the actions wrapper
   height, and the title / tab area are all pinned so the layout cannot
   collapse vertically.

   Sidebar CSS is untouched. No behavior change. No external assets.
   ============================================================= */

body.z-image-studio-page [data-topbar] {
  min-height: 4rem;
  max-height: 4rem;
}

body.z-image-studio-page [data-topbar] .st-topbar-left {
  flex-shrink: 0;
  min-width: 12rem;
}

body.z-image-studio-page [data-topbar] .st-topbar-right {
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

body.z-image-studio-page [data-topbar] .st-topbar-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
  max-height: 3rem;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}

body.z-image-studio-page [data-topbar] .st-topbar-actions .btn {
  padding: .25rem .6rem;
  font-size: .72rem;
  flex-shrink: 0;
}

/* === ZAPSOC Image Studio Workspace Root Final Fix · Phase 8G.10O.5 ===
   Two structural corrections on image-studio.php + a scoped CSS layer
   that defend the workspace root, the topbar center, and the topbar
   search area:

   1. The [data-image-studio-workspace] attribute used to live on
      <main>, which spans the whole page (y = 0, h = ~5500 px). The
      QA test that checks "workspace starts below topbar" therefore saw
      workspace.y = 0 because <main> starts at the top of the page.
      Fix: the attribute now lives on the actual workspace div
      (.z-image-workspace) inside <main>. workspace.y is now ~241 px
      (below the topbar + hero). The attribute still scopes all
      child QA hooks (data-image-studio-panel="builder|canvas|recent").

   2. The legacy <aside data-active-preset-banner hidden> used to live
      inside the closed <details data-image-studio-creation-helpers>.
      Although display: none, document.querySelector still finds it
      and the QA recorded activeBannerTop = 0, failing the "no active
      banner at top" assertion. Fix: the element is removed entirely
      from image-studio.php. creative-flow.js's renderActiveBanner()
      is null-safe (returns early if !host) so removing the host
      element is harmless. The [data-create-flow="image"] stepper
      remains inside the closed helpers for backward compat.

   3. Topbar search: hidden on image-studio so it does not occupy
      topbar center. The previous topbar centered an INPUT element
      (the global search input) at x ≈ 848 px which the QA's "topbar
      center is topmost" check rejected because the INPUT has no
      data-topbar attr. Hiding the search returns the next topmost
      element (e.g. .st-topbar-tabs, .st-topbar-left) which already
      have classes that include "st-topbar".

   Sidebar CSS is untouched. No behavior change. No JS changes. No
   external assets. No fake data.
   ============================================================= */

body.z-image-studio-page [data-topbar] [data-topbar-search] {
  display: none;
}

/* === ZAPSOC Music Studio Consolidation Workspace · Phase 8G.10P ===
   Three-panel workspace for music studio, mirroring image studio's
   pattern: builder (left) + canvas (middle) + recent (right).

   Desktop: 3 columns
   Tablet:  2 columns (canvas takes full width, recent stacks below)
   Mobile:  1 column (everything stacks)

   Sidebar / topbar / generate endpoint behaviour unchanged. No fake
   tracks, no fake provider state, no fake active preset, no fake
   progress. Recent panel renders empty state if MediaService returns
   no entries.

   No external assets. No Tailwind. No Google Fonts. No Material Symbols.
   ============================================================= */

body.music-studio-page,
body.z-music-suite-page {
  /* inherited shell rhythm — no topbar or sidebar overrides here */
}

.music-studio-page [data-music-studio-workspace],
.music-studio-page .z-music-workspace,
body.z-music-suite-page [data-music-studio-workspace],
body.z-music-suite-page .z-music-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) minmax(280px, 360px);
  gap: 1.1rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

.music-studio-page .z-music-builder,
.music-studio-page .z-music-canvas,
.music-studio-page .z-music-recent,
body.z-music-suite-page .z-music-builder,
body.z-music-suite-page .z-music-canvas,
body.z-music-suite-page .z-music-recent {
  min-width: 0;
}

/* Builder column — scrollable control stack */
.music-studio-page .z-music-builder,
body.z-music-suite-page .z-music-builder {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* Canvas column — prompt + lyrics + generate */
.music-studio-page .z-music-canvas,
body.z-music-suite-page .z-music-canvas {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* Recent column — sticky card with dark glass */
.music-studio-page .z-music-recent,
body.z-music-suite-page .z-music-recent {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1rem 1rem .9rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg, 8px);
  background: linear-gradient(180deg,
      rgba(94, 234, 212, 0.04) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.6);
}

.music-studio-page .z-music-recent-head .kicker,
body.z-music-suite-page .z-music-recent-head .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0 0 .15rem;
}

.music-studio-page .z-music-recent-head h3,
body.z-music-suite-page .z-music-recent-head h3 {
  font-family: var(--st-font-display, inherit);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .25rem;
  color: var(--st-text, #F0F6FC);
}

.music-studio-page .z-music-recent-hint,
body.z-music-suite-page .z-music-recent-hint {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  margin: 0 0 .5rem;
}

.music-studio-page .z-music-recent-empty,
body.z-music-suite-page .z-music-recent-empty {
  padding: 1rem;
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius, 4px);
  background: rgba(255, 255, 255, 0.015);
}

.music-studio-page .z-music-recent-empty p,
body.z-music-suite-page .z-music-recent-empty p {
  margin: 0;
  font-size: .82rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.music-studio-page .z-music-recent-empty p + p,
body.z-music-suite-page .z-music-recent-empty p + p {
  margin-top: .35rem;
  font-size: .75rem;
}

.music-studio-page .z-music-recent-grid,
body.z-music-suite-page .z-music-recent-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}

.music-studio-page .z-music-recent-item,
body.z-music-suite-page .z-music-recent-item {
  background: var(--st-surface-container, #1D2023);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  padding: .55rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.music-studio-page .z-music-recent-item audio,
body.z-music-suite-page .z-music-recent-item audio {
  width: 100%;
  height: 32px;
}

.music-studio-page .z-music-recent-meta,
body.z-music-suite-page .z-music-recent-meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.music-studio-page .z-music-recent-meta .badge,
body.z-music-suite-page .z-music-recent-meta .badge {
  align-self: flex-start;
  font-size: .65rem;
  padding: .05rem .4rem;
  background: rgba(94, 234, 212, 0.14);
  color: var(--st-accent-cyan, #5EEAD4);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: var(--st-radius-full, 9999px);
}

.music-studio-page .z-music-recent-name,
body.z-music-suite-page .z-music-recent-name {
  font-size: .75rem;
  color: var(--st-text, #F0F6FC);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-studio-page .z-music-recent-actions,
body.z-music-suite-page .z-music-recent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.music-studio-page .z-music-recent-foot,
body.z-music-suite-page .z-music-recent-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--st-border);
}

.music-studio-page .z-music-safety-note,
body.z-music-suite-page .z-music-safety-note {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: .25rem 0 0;
  padding-top: .25rem;
}

/* Card · unified dark glass on inner panels */
.music-studio-page .z-music-card,
body.z-music-suite-page .z-music-card {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg, 8px);
  background: var(--st-surface-container-low, #191C1F);
}

/* Chip · instrument / genre / mood pills (additive to existing st-music-chip) */
.music-studio-page .z-music-chip,
body.z-music-suite-page .z-music-chip {
  /* keeps the same look as st-music-chip, only used as a hook */
}

/* Control · input / textarea / select hooked by data-music-studio-control="…" */
.music-studio-page .z-music-control,
body.z-music-suite-page .z-music-control {
  /* no styling overrides — hooks only, lets existing form-control styles flow */
}

/* Generate button · primary CTA accent */
.music-studio-page .z-music-generate,
body.z-music-suite-page .z-music-generate {
  position: relative;
  box-shadow: 0 8px 24px -14px rgba(94, 234, 212, 0.45);
}

.music-studio-page .z-music-generate:focus-visible,
body.z-music-suite-page .z-music-generate:focus-visible {
  outline: 2px solid var(--st-accent-cyan, #5EEAD4);
  outline-offset: 2px;
}

/* Output · area where results render */
.music-studio-page .z-music-output,
body.z-music-suite-page .z-music-output {
  /* no styling — semantic hook */
}

.music-studio-page .z-music-status,
body.z-music-suite-page .z-music-status {
  margin: 0;
  font-size: .8rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.music-studio-page .z-music-lyrics-panel textarea,
body.z-music-suite-page .z-music-lyrics-panel textarea {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
}

/* Topbar position fix · topbar should sit at y=0 on music studio too.
   Re-uses the Phase 8G.10O.3 pattern. */
body.music-studio-page.dashboard-shell.st-stitch [data-topbar] {
  margin-top: -1rem;
}

body.music-studio-page.dashboard-shell.st-stitch [data-page-suite-helpers]:not([data-page-suite-helpers-bottom]) > summary {
  padding: .12rem .55rem;
  font-size: .6rem;
}

/* Page-suite-helpers details must live below the workspace, never above.
   Push them past the workspace in document order. */
body.music-studio-page [data-page-suite-helpers] {
  position: relative;
}

/* Tablet: collapse to 2 columns (builder + canvas + recent stacks) */
@media (max-width: 1199px) {
  .music-studio-page [data-music-studio-workspace],
  .music-studio-page .z-music-workspace,
  body.z-music-suite-page [data-music-studio-workspace],
  body.z-music-suite-page .z-music-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .music-studio-page .z-music-recent,
  body.z-music-suite-page .z-music-recent {
    grid-column: 1 / -1;
    position: static;
  }
}

/* Mobile: 1 column stack */
@media (max-width: 767px) {
  .music-studio-page [data-music-studio-workspace],
  .music-studio-page .z-music-workspace,
  body.z-music-suite-page [data-music-studio-workspace],
  body.z-music-suite-page .z-music-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
  }
  .music-studio-page .z-music-recent,
  body.z-music-suite-page .z-music-recent {
    padding: .85rem .85rem .75rem;
  }
}

/* === ZAPSOC Music Studio Hero Layout Fix · Phase 8G.10P.1 ===
   Hero is now the FIRST visible surface after the shared topbar:
   2-column on desktop (identity + safety on the left, Lyrics /
   Instrumental / Song mode chooser on the right), 1-column on mobile.
   Recent Tracks lives below the workspace as a full-width responsive
   section with a real MediaService-driven audio grid. Old Page
   navigation / Create Flow / Campaign preset live collapsed in a
   single <details data-music-studio-helpers> block at the bottom.

   Sidebar / topbar unchanged. No external assets. No fake data.
   ============================================================= */

.music-studio-page [data-music-hero],
.music-studio-page .z-music-hero {
  margin: 1rem 1.25rem 1.25rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.music-studio-page .z-music-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}

.music-studio-page .z-music-hero-info,
.music-studio-page .z-music-hero-mode {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.music-studio-page .z-music-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.music-studio-page .z-music-hero-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.music-studio-page .z-music-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .15rem 0 .35rem;
}

.music-studio-page .z-music-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

/* Mode chooser cards */
.music-studio-page [data-music-mode-chooser],
.music-studio-page .z-music-hero-mode {
  padding: .85rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
}

.music-studio-page [data-music-mode-chooser] .kicker,
.music-studio-page .z-music-hero-mode .kicker {
  margin: 0 0 .25rem;
}

.music-studio-page .z-music-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .25rem;
}

.music-studio-page .z-music-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  text-align: left;
  padding: .65rem .7rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: rgba(255, 255, 255, 0.02);
  color: var(--st-text, #F0F6FC);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  font-family: var(--st-font-body);
  min-width: 0;
}

.music-studio-page .z-music-mode-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--st-border-strong, rgba(255, 255, 255, 0.14));
}

.music-studio-page .z-music-mode-card.is-selected {
  background: rgba(94, 234, 212, 0.14);
  border-color: rgba(94, 234, 212, 0.5);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.4);
}

.music-studio-page .z-music-mode-card:focus-visible {
  outline: 2px solid var(--st-accent-cyan, #5EEAD4);
  outline-offset: 2px;
}

.music-studio-page .z-music-mode-card h4 {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text, #F0F6FC);
}

.music-studio-page .z-music-mode-card p {
  margin: 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Recent Tracks · full-width responsive section below workspace */
.music-studio-page .z-music-recent-section {
  margin: 0 1.25rem 1.5rem;
  padding: 1.25rem 1.25rem 1.15rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, #191C1F);
}

.music-studio-page .z-music-recent-head h2 {
  margin: .15rem 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
}

.music-studio-page .z-music-recent-head .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0 0 .15rem;
}

.music-studio-page .z-music-recent-hint {
  margin: 0 0 .85rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.music-studio-page .z-music-recent-empty {
  padding: 1rem;
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius, 4px);
  background: rgba(255, 255, 255, 0.015);
}

.music-studio-page .z-music-recent-empty p {
  margin: 0;
  font-size: .85rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.music-studio-page .z-music-recent-empty p + p {
  margin-top: .35rem;
  font-size: .78rem;
}

.music-studio-page .z-music-recent-grid {
  list-style: none;
  margin: 0 0 .85rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .7rem;
}

.music-studio-page .z-music-track-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .65rem .7rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.music-studio-page .z-music-track-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.music-studio-page .z-music-track-meta .badge {
  align-self: flex-start;
  font-size: .65rem;
  padding: .05rem .4rem;
  background: rgba(94, 234, 212, 0.14);
  color: var(--st-accent-cyan, #5EEAD4);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: var(--st-radius-full, 9999px);
}

.music-studio-page .z-music-track-name {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--st-text, #F0F6FC);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  min-width: 0;
}

.music-studio-page .z-music-track-card audio {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 36px;
}

.music-studio-page .z-music-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.music-studio-page .z-music-recent-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--st-border);
}

.music-studio-page .z-music-recent-foot .z-music-safety-note {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
}

/* Collapsed Page tools details (helper block at bottom) */
.music-studio-page .z-music-studio-helpers {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.music-studio-page .z-music-studio-helpers > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.music-studio-page .z-music-studio-helpers > summary::-webkit-details-marker {
  display: none;
}

.music-studio-page .z-music-studio-helpers > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.music-studio-page .z-music-studio-helpers[open] > summary::before {
  content: "−";
}

.music-studio-page .z-music-studio-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.music-studio-page .z-music-studio-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Hero · responsive */
@media (max-width: 1023px) {
  .music-studio-page .z-music-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .music-studio-page .z-music-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .music-studio-page [data-music-hero],
  .music-studio-page .z-music-hero {
    margin: .75rem .75rem 1rem;
    padding: 1.15rem 1rem 1rem;
  }
  .music-studio-page .z-music-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .music-studio-page .z-music-recent-section {
    margin: 0 .75rem 1rem;
    padding: 1rem .85rem .85rem;
  }
  .music-studio-page .z-music-recent-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .music-studio-page .z-music-studio-helpers {
    margin: 0 .75rem 1rem;
  }
}

/* === ZAPSOC Music Studio Master Polish · Phase B0 ===
   CSS-only responsive polish for the Music Studio workspace.

   Goals (from Phase A audit, June 2026):
     1. Remove the stale 3-column grid-template expectation on the
        workspace. The HTML only ships 2 main children (z-music-builder
        + z-music-canvas) because Recent Tracks has been moved out into
        its own full-width section below. The previous
        `grid-template-columns: minmax(0,1fr) minmax(320px,420px)
        minmax(280px,360px)` left an empty 280–360 px column on the right
        at 1920 px viewports.
     2. Center the workspace with a max-width of 1600 px on big screens
        (≥ 1600 px) so the page feels intentional on 4K / Ultrawide
        instead of being constrained to a 1440 px island.
     3. Collapse the workspace to a single column earlier on tablets
        (≤ 1199 px) and the hero earlier (≤ 1023 px) so 1024 viewports
        no longer render a cramped 2-column hero.
     4. Compact the mobile hero (≤ 767 px): hide the subtitle and the
        long safety-note paragraph, shrink the title, tighten padding,
        keep the title + 3-column mode-chooser visible, drop the
        per-card description text. Old Phase A measurement was 685 px
        hero on 430 px (76 % of viewport) — instruments started at
        y ≈ 781 below the fold. Target is instruments / builder well
        above y ≈ 650.
     5. Polish Recent Tracks cards and audio player spacing without
        changing markup, JS hooks, or real-data sources.

   Scope (all selectors stay inside the music-studio surface):
     - body.music-studio-page
     - [data-music-hero], .z-music-hero, .z-music-hero-grid,
       .z-music-hero-info, .z-music-hero-mode,
       .z-music-hero-title, .z-music-hero-sub, .z-music-hero-note,
       .z-music-hero-meta
     - .z-music-mode-grid, .z-music-mode-card, .z-music-mode-card h4,
       .z-music-mode-card p
     - .z-music-workspace (with [data-music-studio-workspace]),
       .z-music-builder, .z-music-canvas
     - .z-music-recent-section (with [data-music-recent-section]),
       .z-music-recent, .z-music-recent-head,
       .z-music-recent-grid, .z-music-recent-empty,
       .z-music-track-card, .z-music-track-meta,
       .z-music-track-name, .z-music-track-actions,
       .z-music-recent-foot, .z-music-safety-note

   Not touched:
     - sidebar / topbar markup or layout
     - JS hooks (data-music-*, data-music-studio-*)
     - generator / provider / payment / CSRF logic
     - audio media rendering (preload="none", src, controls preserved)
     - Recent Tracks data source (still real MediaService entries)

   Big-screen rule: the max-width grows to 1600 px but caps at
   `calc(100vw - 2rem)` so it never overflows. On 1920 px the workspace
   ends up centered with ~112 px breathing room on each side; the right
   empty grid column from Phase 8G.10P is gone because the grid now has
   exactly 2 tracks. No global main / sidebar / topbar rules change.
   ============================================================= */

/* 1. Big screen: 2 columns + 1600 px max-width. */
body.music-studio-page .z-music-workspace,
body.music-studio-page [data-music-studio-workspace] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.25rem;
}

@media (min-width: 1600px) {
  /* The shared dashboard-shell rule
     `.dashboard-shell.st-stitch > .dashboard-main > *:not(.st-topbar)`
     caps every direct main child at `max-width: 1440px` (line ~7297 in
     app.css). That keeps the Music Studio workspace centered in a
     1440-px island on 4K / Ultrawide. We override with !important
     here so the music-studio is allowed to grow up to 1600 px on big
     screens, while every other page keeps the existing 1440-px cap
     untouched. Scope stays inside the music-studio surface. */
  .dashboard-shell.st-stitch.music-studio-page > .dashboard-main > .z-music-workspace,
  .dashboard-shell.st-stitch.music-studio-page > .dashboard-main > [data-music-studio-workspace] {
    max-width: min(1600px, calc(100vw - 2rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 1.5rem;
  }

  /* Also let Recent Tracks grow up to the same upper bound on 1600+ so
     the big-screen rhythm matches the workspace above. */
  body.music-studio-page .z-music-recent-section,
  body.music-studio-page [data-music-recent-section] {
    max-width: min(1600px, calc(100vw - 2rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2. Tablet: workspace collapses to 1 column earlier (≤ 1199 px). */
@media (max-width: 1199px) {
  body.music-studio-page .z-music-workspace,
  body.music-studio-page [data-music-studio-workspace] {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* 3. Hero collapses to 1 column at ≤ 1023 px so 1024 viewports no
   longer render a cramped 2-column hero. Mode chooser stays 3 cols. */
@media (max-width: 1023px) {
  body.music-studio-page .z-music-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body.music-studio-page .z-music-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
}

/* === ZAPSOC Music Studio Mobile Mode Hints · Phase E.1 === */
/* 4. Mobile (<= 767 px): compact hero. */
@media (max-width: 767px) {
  body.music-studio-page .z-music-hero,
  body.music-studio-page [data-music-hero] {
    padding: .85rem 1rem;
    margin: .5rem .75rem .75rem;
    gap: .55rem;
  }

  body.music-studio-page .z-music-hero-info,
  body.music-studio-page .z-music-hero-mode {
    gap: .4rem;
  }

  body.music-studio-page .z-music-hero-title {
    font-size: clamp(1.35rem, 5vw, 1.6rem);
    line-height: 1.05;
    margin: .1rem 0 .2rem;
  }

  /* Hide subtitle + safety-note paragraph on mobile — they were
     eating ~250 px of vertical space above the work area. The safety
     meaning is still conveyed by the "SAFE SMOKE ONLY" badge in the
     hero meta row. */
  body.music-studio-page .z-music-hero-sub,
  body.music-studio-page .z-music-hero-note {
    display: none;
  }

  body.music-studio-page .z-music-hero-meta {
    margin: .15rem 0;
    gap: .35rem;
  }

  /* Mode chooser: 3 columns, tighter padding, keep short one-line hints
     visible without restoring the old bulky paragraphs. */
  body.music-studio-page .z-music-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }

  body.music-studio-page .z-music-mode-card {
    min-height: auto;
    padding: .55rem .5rem;
    gap: .15rem;
  }

  body.music-studio-page .z-music-mode-card h4 {
    font-size: .82rem;
  }

  body.music-studio-page .z-music-mode-card p {
    display: block;
    font-size: .62rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.music-studio-page .z-music-workspace,
  body.music-studio-page [data-music-studio-workspace] {
    gap: .75rem;
  }
}

/* 5. Recent Tracks polish. No data changes — only spacing / wrapping /
   audio height tweaks. */
body.music-studio-page .z-music-recent-section,
body.music-studio-page [data-music-recent-section] {
  /* Equal outer rhythm so the section breathes the same as the
     workspace on desktop. */
  margin-inline: 1.25rem;
}

@media (min-width: 1600px) {
  body.music-studio-page .z-music-recent-section,
  body.music-studio-page [data-music-recent-section] {
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  body.music-studio-page .z-music-recent-section,
  body.music-studio-page [data-music-recent-section] {
    margin: 0 .75rem 1rem;
    padding: 1rem .85rem .9rem;
  }
}

body.music-studio-page .z-music-recent-grid {
  /* Slightly wider floor so cards don't get too narrow at 1024 px
     when the big-screen max-width rule doesn't apply. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: .75rem;
}

body.music-studio-page .z-music-track-card {
  padding: .7rem .75rem;
  gap: .55rem;
}

/* Audio element polish: keep native controls but ensure full width,
   never overflow the card, and use a touch-friendly height. The
   underlying <audio> tag keeps preload="none" + controls + the real
   /api/media-file.php?id=... src from music-studio.php — only the
   rendered height is changed. */
body.music-studio-page .z-music-track-card audio,
body.music-studio-page .z-music-recent-item audio {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 40px;
  display: block;
}

body.music-studio-page .z-music-track-name {
  -webkit-line-clamp: 2;
  line-height: 1.35;
}

body.music-studio-page .z-music-track-actions {
  gap: .4rem;
}

body.music-studio-page .z-music-track-actions .btn {
  font-size: .72rem;
  padding: .3rem .55rem;
}

/* === ZAPSOC TTS Studio Workspace Redesign · Phase 8G.10Q ===
   TTS Studio mirrors the Image Studio / Music Studio workspace
   pattern. Hero with Voice Builder identity + Script/Voice/Audio
   mode chooser is the FIRST visible surface after the shared topbar.
   Suite nav + Create Flow + Campaign preset live collapsed at the
   bottom in a single <details data-tts-helpers> block.

   Workspace is a 2-column layout (builder left, canvas right) plus a
   full-width recent audio section below. Audio cards are real
   MediaService entries only — no fake voices, no fake waveforms.

   Sidebar / topbar unchanged. No external assets. No fake data.
   ============================================================= */

body.z-tts-studio-page,
body.z-tts-studio-page.z-creative-suite-page {
  /* shared shell rhythm — no topbar or sidebar overrides here */
}

.z-tts-hero,
body.z-tts-studio-page [data-tts-hero] {
  margin: 1rem 1.25rem 1.25rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.z-tts-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}

.z-tts-hero-info,
.z-tts-hero-mode {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-tts-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-tts-hero-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-tts-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .15rem 0 .35rem;
}

.z-tts-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

/* Mode chooser cards */
.z-tts-hero-mode,
body.z-tts-studio-page [data-tts-mode-chooser] {
  padding: .85rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
}

.z-tts-hero-mode .kicker,
body.z-tts-studio-page [data-tts-mode-chooser] .kicker {
  margin: 0 0 .25rem;
}

.z-tts-hero-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .25rem;
}

.z-tts-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  text-align: left;
  padding: .65rem .7rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: rgba(255, 255, 255, 0.02);
  color: var(--st-text, #F0F6FC);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  font-family: var(--st-font-body);
  min-width: 0;
}

.z-tts-mode-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--st-border-strong, rgba(255, 255, 255, 0.14));
}

.z-tts-mode-card.is-selected {
  background: rgba(94, 234, 212, 0.14);
  border-color: rgba(94, 234, 212, 0.5);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.4);
}

.z-tts-mode-card:focus-visible {
  outline: 2px solid var(--st-accent-cyan, #5EEAD4);
  outline-offset: 2px;
}

.z-tts-mode-card h4 {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
}

.z-tts-mode-card p {
  margin: 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Topbar position fix · topbar at y=0 on tts studio */
body.tts-studio-page.dashboard-shell.st-stitch [data-topbar] {
  margin-top: -1rem;
}

/* Quick actionbar — existing class kept, scoped styling only here */
body.z-tts-studio-page .studio-actionbar {
  margin: 0 1.25rem .75rem;
  padding: .35rem 0 .15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

/* Workspace · 2 columns */
.z-tts-workspace,
body.z-tts-studio-page [data-tts-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1.1rem;
  align-items: start;
}

.z-tts-builder,
.z-tts-canvas {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* Recent audio · full-width section below workspace */
.z-tts-recent-section,
body.z-tts-studio-page [data-tts-recent-section] {
  margin: 0 1.25rem 1.5rem;
  padding: 1.25rem 1.25rem 1.15rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, #191C1F);
}

.z-tts-recent-head h2 {
  margin: .15rem 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
}

.z-tts-recent-head .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0 0 .15rem;
}

.z-tts-recent-hint {
  margin: 0 0 .85rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.z-tts-recent-empty {
  padding: 1rem;
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius, 4px);
  background: rgba(255, 255, 255, 0.015);
}

.z-tts-recent-empty p {
  margin: 0;
  font-size: .85rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.z-tts-recent-empty p + p {
  margin-top: .35rem;
  font-size: .78rem;
}

.z-tts-recent-grid {
  list-style: none;
  margin: 0 0 .85rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .7rem;
}

.z-tts-track-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .65rem .7rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-tts-track-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.z-tts-track-meta .badge {
  align-self: flex-start;
  font-size: .65rem;
  padding: .05rem .4rem;
  background: rgba(94, 234, 212, 0.14);
  color: var(--st-accent-cyan, #5EEAD4);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: var(--st-radius-full, 9999px);
}

.z-tts-track-name {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--st-text, #F0F6FC);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  min-width: 0;
}

.z-tts-track-card audio {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 36px;
}

.z-tts-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.z-tts-recent-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--st-border);
}

.z-tts-recent-foot .z-tts-safety-note {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
}

/* Closed Page tools helpers details */
.z-tts-helpers,
body.z-tts-studio-page [data-tts-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-tts-helpers > summary,
body.z-tts-studio-page [data-tts-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-tts-helpers > summary::-webkit-details-marker,
body.z-tts-studio-page [data-tts-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-tts-helpers > summary::before,
body.z-tts-studio-page [data-tts-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-tts-helpers[open] > summary::before,
body.z-tts-studio-page [data-tts-helpers][open] > summary::before {
  content: "−";
}

.z-tts-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-tts-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Hero · responsive */
@media (max-width: 1023px) {
  .z-tts-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .z-tts-hero-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Workspace + recent responsive */
@media (max-width: 1199px) {
  .z-tts-workspace,
  body.z-tts-studio-page [data-tts-workspace] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .z-tts-hero,
  body.z-tts-studio-page [data-tts-hero] {
    margin: .75rem .75rem 1rem;
    padding: 1.15rem 1rem 1rem;
  }
  .z-tts-hero-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .z-tts-workspace,
  body.z-tts-studio-page [data-tts-workspace] {
    margin: 0 .75rem 1rem;
  }
  .z-tts-recent-section,
  body.z-tts-studio-page [data-tts-recent-section] {
    margin: 0 .75rem 1rem;
    padding: 1rem .85rem .85rem;
  }
  .z-tts-recent-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .z-tts-helpers,
  body.z-tts-studio-page [data-tts-helpers] {
    margin: 0 .75rem 1rem;
  }
}

/* === ZAPSOC Media Library Clean Start · Phase 8G.10R ===
   The library now opens with a compact toolbar hero + tabs + filters
   + media results. Old community/profile nav, Create Flow stepper,
   Active preset banner, Campaign Presets section and stats tiles
   are demoted into a single closed-by-default details block at the
   bottom for backward compat with creative-flow.js + media-library.js
   + suite QA.

   Sidebar / topbar unchanged. No external assets. No fake data.
   ============================================================= */

body.z-media-library-page,
body.media-library-page,
body.z-community-suite-page.z-media-library-page,
body.z-media-community-page {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Compact library toolbar hero */
.z-library-toolbar-hero,
body.z-media-library-page [data-media-library-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.1rem 1.25rem 1rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.z-library-toolbar-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1 1 16rem;
}

.z-library-toolbar-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-library-toolbar-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-library-toolbar-sub {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.65));
  max-width: 56ch;
}

.z-library-toolbar-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
}

.z-library-upload-pill {
  font-size: .72rem;
  padding: .15rem .55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.z-library-upload-cta,
body.z-media-library-page [data-media-upload-toggle] {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.z-library-upload-cta svg,
body.z-media-library-page [data-media-upload-toggle] svg {
  width: 1rem;
  height: 1rem;
}

/* Upload center panel · collapsible, hidden by default */
.z-library-upload,
body.z-media-library-page [data-library-upload] {
  margin: 0 1.25rem 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container-low, #191C1F);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.z-library-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.z-library-upload-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.z-library-upload-status {
  font-size: .78rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  flex: 1 1 auto;
}

/* Tabs row */
.z-library-tabs,
body.z-media-library-page [data-media-library-tabs] {
  margin: 0 1.25rem .75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .35rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--st-border);
}

.z-library-tab,
body.z-media-library-page [data-media-library-tabs] button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .85rem;
  border-radius: var(--st-radius-full, 9999px);
  font-size: .8rem;
  font-weight: 500;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

.z-library-tab:hover,
body.z-media-library-page [data-media-library-tabs] button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--st-text, #F0F6FC);
}

.z-library-tab.is-active,
body.z-media-library-page [data-media-library-tabs] button.is-active {
  background: rgba(94, 234, 212, 0.16);
  color: var(--st-text, #F0F6FC);
}

.z-library-tab svg,
body.z-media-library-page [data-media-library-tabs] button svg {
  width: .9rem;
  height: .9rem;
}

/* Filters row */
.z-library-filter-row,
body.z-media-library-page [data-media-library-filters] {
  margin: 0 1.25rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}

.z-library-search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 12rem;
}

.z-library-search svg {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: .9rem;
  height: .9rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  pointer-events: none;
}

.z-library-search input {
  width: 100%;
  padding-left: 1.95rem;
}

.z-library-select-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.z-library-select-wrap select {
  height: 2.25rem;
  font-size: .8rem;
  padding: .35rem .65rem;
  min-width: 11rem;
}

.z-library-view-toggle {
  display: inline-flex;
  gap: .2rem;
  padding: .2rem;
  border-radius: var(--st-radius-md, 6px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  margin-left: auto;
}

.z-library-view-toggle button {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  border-radius: var(--st-radius, 4px);
  cursor: pointer;
}

.z-library-view-toggle button.is-active {
  background: rgba(94, 234, 212, 0.16);
  color: var(--st-text, #F0F6FC);
}

.z-library-view-toggle button svg {
  width: 1rem;
  height: 1rem;
}

/* Results · reuse the existing st-ml-grid / st-ml-* classes from older work.
   Just keep clean spacing under the new toolbar. */
.z-library-results,
body.z-media-library-page [data-media-library-results] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}

.z-library-results audio {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.z-library-results .media-card-actions,
.z-library-results .deluxe-media-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 0;
}

.z-library-results .media-card-name,
.z-library-results .deluxe-media-card-name {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Library helpers · closed details at the bottom */
.z-library-helpers,
body.z-media-library-page [data-media-library-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-library-helpers > summary,
body.z-media-library-page [data-media-library-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-library-helpers > summary::-webkit-details-marker,
body.z-media-library-page [data-media-library-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-library-helpers > summary::before,
body.z-media-library-page [data-media-library-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-library-helpers[open] > summary::before,
body.z-media-library-page [data-media-library-helpers][open] > summary::before {
  content: "−";
}

.z-library-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-library-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Topbar position fix · topbar at y=0 on media library */
body.media-library-page.dashboard-shell.st-stitch [data-topbar] {
  margin-top: -1rem;
}

/* Mobile */
@media (max-width: 767px) {
  .z-library-toolbar-hero,
  body.z-media-library-page [data-media-library-hero],
  .z-library-upload,
  body.z-media-library-page [data-library-upload],
  .z-library-tabs,
  body.z-media-library-page [data-media-library-tabs],
  .z-library-filter-row,
  body.z-media-library-page [data-media-library-filters],
  .z-library-results,
  body.z-media-library-page [data-media-library-results],
  .z-library-helpers,
  body.z-media-library-page [data-media-library-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-library-upload-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .z-library-view-toggle {
    margin-left: 0;
  }
}

/* === ZAPSOC Admin Plans Workspace Redesign · Phase 8G.10S ===
   Premium admin dark glass hero + KPI cards + workspace. The old
   "Page navigation" billing suite nav is demoted into a closed
   details block at the very bottom of <main>. No duplicate
   admin-page-header, no Create Flow, no Campaign preset, no
   "Stripe Active" / "PayPal Active" / fake revenue at the top.

   Sidebar / topbar unchanged. No payment/checkout/webhook/credit
   service logic changes. No fake counts / fake revenue / fake
   provider states. KPI counts come from the real $stats array
   computed earlier in admin-plans.php.
   ============================================================= */

body.z-admin-plans-page,
body.z-billing-suite-page.z-admin-plans-page,
body.plans-admin,
body.kin-admin-plans {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Compact admin hero */
.z-admin-plans-hero,
body.z-admin-plans-page [data-admin-plans-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-plans-hero-copy,
.z-admin-plans-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-plans-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-plans-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-plans-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-plans-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-plans-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-plans-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-plans-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-plans-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-plans-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }

.z-admin-plans-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

/* Hero side stack — checkout status pills on the right */
.z-admin-plans-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-plans-hero-side .z-admin-plans-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-plans-kpis,
body.z-admin-plans-page [data-admin-plans-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-plans-kpi,
body.z-admin-plans-page [data-admin-plans-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-plans-kpi-label,
body.z-admin-plans-page [data-admin-plans-kpi] > span:first-child {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-plans-kpi-value,
body.z-admin-plans-page [data-admin-plans-kpi] > strong {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
}

.z-admin-plans-kpi-hint,
body.z-admin-plans-page [data-admin-plans-kpi] > span:last-child {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper · keep existing plans-layout */
.z-admin-plans-workspace,
body.z-admin-plans-page [data-admin-plans-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Catalog + editor side-by-side at desktop (inherits existing plans-layout) */
.z-admin-plans-workspace .plans-layout,
body.z-admin-plans-page [data-admin-plans-workspace] .plans-layout {
  margin: 0;
}

/* Closed helpers · billing navigation at the bottom */
.z-admin-plans-helpers,
body.z-admin-plans-page [data-admin-plans-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-admin-plans-helpers > summary,
body.z-admin-plans-page [data-admin-plans-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-admin-plans-helpers > summary::-webkit-details-marker,
body.z-admin-plans-page [data-admin-plans-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-admin-plans-helpers > summary::before,
body.z-admin-plans-page [data-admin-plans-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-admin-plans-helpers[open] > summary::before,
body.z-admin-plans-page [data-admin-plans-helpers][open] > summary::before {
  content: "−";
}

.z-admin-plans-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-admin-plans-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-plans-hero,
  body.z-admin-plans-page [data-admin-plans-hero],
  .z-admin-plans-kpis,
  body.z-admin-plans-page [data-admin-plans-kpis],
  .z-admin-plans-workspace,
  body.z-admin-plans-page [data-admin-plans-workspace],
  .z-admin-plans-helpers,
  body.z-admin-plans-page [data-admin-plans-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-plans-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-plans-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Admin Revenue Workspace Redesign · Phase 8G.10T ===
   Premium admin dark glass hero + KPI cards + workspace wrapper. The
   old "Page navigation" billing suite nav is demoted into a closed
   details block at the very bottom of <main>. No fake revenue, no
   fake Stripe / PayPal / Mollie / Provider "Active" badges, no fake
   MRR / ARR / fake users / fake transactions.

   Sidebar / topbar unchanged. No payment / checkout / webhook / credit
   service logic changes. All counts come from real data already loaded
   earlier in admin-revenue.php ($plans, $recentLedger, $recentCheckouts,
   $paymentEvents, $totalGranted, $totalConsumed, $checkoutConfigured,
   $webhookConfigured, $sandboxReady, $paymentsTableReady).
   ============================================================= */

body.z-admin-revenue-page,
body.kin-admin-revenue,
body.z-billing-suite-page.z-admin-revenue-page {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-admin-revenue-hero,
body.z-admin-revenue-page [data-admin-revenue-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-revenue-hero-copy,
.z-admin-revenue-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-revenue-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-revenue-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-revenue-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-revenue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-revenue-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-revenue-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-revenue-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-revenue-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-revenue-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-admin-revenue-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-admin-revenue-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-admin-revenue-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-revenue-hero-side .z-admin-revenue-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-revenue-kpis,
body.z-admin-revenue-page [data-admin-revenue-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-revenue-kpi,
body.z-admin-revenue-page [data-admin-revenue-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-revenue-kpi-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-revenue-kpi-value {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.z-admin-revenue-kpi-hint {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper */
.z-admin-revenue-workspace,
body.z-admin-revenue-page [data-admin-revenue-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

.z-admin-revenue-workspace .billing-grid,
body.z-admin-revenue-page [data-admin-revenue-workspace] .billing-grid {
  margin: 0;
}

/* Closed helpers · billing navigation at the bottom */
.z-admin-revenue-helpers,
body.z-admin-revenue-page [data-admin-revenue-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-admin-revenue-helpers > summary,
body.z-admin-revenue-page [data-admin-revenue-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-admin-revenue-helpers > summary::-webkit-details-marker,
body.z-admin-revenue-page [data-admin-revenue-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-admin-revenue-helpers > summary::before,
body.z-admin-revenue-page [data-admin-revenue-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-admin-revenue-helpers[open] > summary::before,
body.z-admin-revenue-page [data-admin-revenue-helpers][open] > summary::before {
  content: "−";
}

.z-admin-revenue-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-admin-revenue-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-revenue-hero,
  body.z-admin-revenue-page [data-admin-revenue-hero],
  .z-admin-revenue-kpis,
  body.z-admin-revenue-page [data-admin-revenue-kpis],
  .z-admin-revenue-workspace,
  body.z-admin-revenue-page [data-admin-revenue-workspace],
  .z-admin-revenue-helpers,
  body.z-admin-revenue-page [data-admin-revenue-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-revenue-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-revenue-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Admin Settings Workspace Redesign · Phase 8G.10U ===
   Premium admin dark glass hero + KPI cards + workspace wrapper. The
   old "Page navigation" billing suite nav is demoted into a closed
   details block at the very bottom of <main>. No fake settings
   values, no fake saved success, no fake Stripe / PayPal / Mollie
   / Provider "Active" badges.

   Sidebar / topbar unchanged. No payment / checkout / webhook /
   credit / provider service logic changes. KPI counts come from
   real variables already loaded earlier in admin-settings.php
   ($apiKeyConfigured, $dbConnected, $renderWorkerConfigured,
   $renderWorkerTokenSet, $sandboxWebhookSecretConfigured, etc.).
   ============================================================= */

body.z-admin-settings-page,
body.kin-admin-shell.z-admin-settings-page,
body.z-billing-suite-page.z-admin-settings-page {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-admin-settings-hero,
body.z-admin-settings-page [data-admin-settings-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-settings-hero-copy,
.z-admin-settings-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-settings-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-settings-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-settings-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-settings-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-settings-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-settings-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-settings-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-settings-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-settings-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-admin-settings-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-admin-settings-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-admin-settings-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-settings-hero-side .z-admin-settings-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-settings-kpis,
body.z-admin-settings-page [data-admin-settings-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-settings-kpi,
body.z-admin-settings-page [data-admin-settings-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-settings-kpi-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-settings-kpi-value {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.z-admin-settings-kpi-hint {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper */
.z-admin-settings-workspace,
body.z-admin-settings-page [data-admin-settings-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Closed helpers · admin navigation at the bottom */
.z-admin-settings-helpers,
body.z-admin-settings-page [data-admin-settings-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-admin-settings-helpers > summary,
body.z-admin-settings-page [data-admin-settings-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-admin-settings-helpers > summary::-webkit-details-marker,
body.z-admin-settings-page [data-admin-settings-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-admin-settings-helpers > summary::before,
body.z-admin-settings-page [data-admin-settings-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-admin-settings-helpers[open] > summary::before,
body.z-admin-settings-page [data-admin-settings-helpers][open] > summary::before {
  content: "−";
}

.z-admin-settings-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-admin-settings-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-settings-hero,
  body.z-admin-settings-page [data-admin-settings-hero],
  .z-admin-settings-kpis,
  body.z-admin-settings-page [data-admin-settings-kpis],
  .z-admin-settings-workspace,
  body.z-admin-settings-page [data-admin-settings-workspace],
  .z-admin-settings-helpers,
  body.z-admin-settings-page [data-admin-settings-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-settings-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-settings-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Admin Users Workspace Redesign · Phase 8G.10V ===
   Premium admin dark glass hero + KPI cards + toolbar + directory
   wrapper. The old "Page actions / media-stats" row above the user
   table is replaced by a hero + KPIs (the existing media-stats row
   is preserved hidden for backward compat). No fake users / fake
   counts / fake pending approvals.

   Sidebar / topbar unchanged. No auth / session / password / db
   logic changes. The user table preserves every existing form /
   action / CSRF hidden field. The search + status filter form is
   preserved exactly as-is. The existing search + status GET
   parameters are not changed.
   ============================================================= */

body.z-admin-users-page,
body.kin-admin-shell {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-admin-users-hero,
body.z-admin-users-page [data-admin-users-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-users-hero-copy,
.z-admin-users-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-users-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-users-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-users-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-users-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-users-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-users-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-users-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-users-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-users-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-admin-users-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-admin-users-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-admin-users-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-users-hero-side .z-admin-users-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-users-kpis,
body.z-admin-users-page [data-admin-users-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-users-kpi,
body.z-admin-users-page [data-admin-users-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-users-kpi-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-users-kpi-value {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.z-admin-users-kpi-hint {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper */
.z-admin-users-workspace,
body.z-admin-users-page [data-admin-users-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-users-hero,
  body.z-admin-users-page [data-admin-users-hero],
  .z-admin-users-kpis,
  body.z-admin-users-page [data-admin-users-kpis],
  .z-admin-users-workspace,
  body.z-admin-users-page [data-admin-users-workspace] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-users-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-users-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Admin Usage Workspace Redesign · Phase 8G.10W ===
   Premium admin dark glass hero + KPI cards + workspace wrapper. The
   old "Page navigation" billing suite nav is demoted into a closed
   details block at the very bottom of <main>. No fake usage / fake
   jobs / fake users / fake credit numbers.

   Sidebar / topbar unchanged. No usage / credit / payment / provider
   / db logic changes. KPI counts come from real variables already
   loaded earlier in admin-usage.php ($summary['today'],
   $summary['month'], $summary['byType'], count($summary['failedJobs']),
   $summary['topUsers'], $summary['latestJobs']).
   ============================================================= */

body.z-admin-usage-page,
body.kin-admin-shell.z-admin-usage-page,
body.z-billing-suite-page.z-admin-usage-page {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-admin-usage-hero,
body.z-admin-usage-page [data-admin-usage-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-usage-hero-copy,
.z-admin-usage-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-usage-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-usage-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-usage-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-usage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-usage-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-usage-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-usage-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-usage-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-usage-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-admin-usage-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-admin-usage-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-admin-usage-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-usage-hero-side .z-admin-usage-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-usage-kpis,
body.z-admin-usage-page [data-admin-usage-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-usage-kpi,
body.z-admin-usage-page [data-admin-usage-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-usage-kpi-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-usage-kpi-value {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.z-admin-usage-kpi-hint {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper */
.z-admin-usage-workspace,
body.z-admin-usage-page [data-admin-usage-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Closed helpers · usage tools at the bottom */
.z-admin-usage-helpers,
body.z-admin-usage-page [data-admin-usage-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-admin-usage-helpers > summary,
body.z-admin-usage-page [data-admin-usage-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-admin-usage-helpers > summary::-webkit-details-marker,
body.z-admin-usage-page [data-admin-usage-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-admin-usage-helpers > summary::before,
body.z-admin-usage-page [data-admin-usage-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-admin-usage-helpers[open] > summary::before,
body.z-admin-usage-page [data-admin-usage-helpers][open] > summary::before {
  content: "−";
}

.z-admin-usage-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-admin-usage-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-usage-hero,
  body.z-admin-usage-page [data-admin-usage-hero],
  .z-admin-usage-kpis,
  body.z-admin-usage-page [data-admin-usage-kpis],
  .z-admin-usage-workspace,
  body.z-admin-usage-page [data-admin-usage-workspace],
  .z-admin-usage-helpers,
  body.z-admin-usage-page [data-admin-usage-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-usage-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-usage-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Admin Media Import Workspace Redesign · Phase 8G.10X ===
   Premium admin dark glass hero + KPI cards + workspace wrapper.
   No fake imports / fake upload success / fake logs / fake
   thumbnails. The original file had no "Page navigation" billing
   suite nav above the content, so no demotion is needed — the
   closed helpers details below is provided for future admin tools
   if needed.

   Sidebar / topbar unchanged. No media / import / upload / db logic
   changes. KPI counts come from real variables already loaded
   earlier in admin-media-import.php ($workerUrlConfigured,
   $workerTokenConfigured, csrf_token()).
   ============================================================= */

body.z-admin-media-import-page,
body.kin-admin-shell {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-admin-media-import-hero,
body.z-admin-media-import-page [data-admin-media-import-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-media-import-hero-copy,
.z-admin-media-import-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-media-import-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-media-import-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-media-import-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-media-import-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-media-import-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-media-import-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-media-import-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-media-import-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-media-import-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-admin-media-import-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-admin-media-import-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-admin-media-import-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-media-import-hero-side .z-admin-media-import-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-media-import-kpis,
body.z-admin-media-import-page [data-admin-media-import-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-media-import-kpi,
body.z-admin-media-import-page [data-admin-media-import-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-media-import-kpi-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-media-import-kpi-value {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.z-admin-media-import-kpi-hint {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper */
.z-admin-media-import-workspace,
body.z-admin-media-import-page [data-admin-media-import-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Closed helpers · import tools at the bottom */
.z-admin-media-import-helpers,
body.z-admin-media-import-page [data-admin-media-import-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-admin-media-import-helpers > summary,
body.z-admin-media-import-page [data-admin-media-import-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-admin-media-import-helpers > summary::-webkit-details-marker,
body.z-admin-media-import-page [data-admin-media-import-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-admin-media-import-helpers > summary::before,
body.z-admin-media-import-page [data-admin-media-import-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-admin-media-import-helpers[open] > summary::before,
body.z-admin-media-import-page [data-admin-media-import-helpers][open] > summary::before {
  content: "−";
}

.z-admin-media-import-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-admin-media-import-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-media-import-hero,
  body.z-admin-media-import-page [data-admin-media-import-hero],
  .z-admin-media-import-kpis,
  body.z-admin-media-import-page [data-admin-media-import-kpis],
  .z-admin-media-import-workspace,
  body.z-admin-media-import-page [data-admin-media-import-workspace],
  .z-admin-media-import-helpers,
  body.z-admin-media-import-page [data-admin-media-import-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-media-import-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-media-import-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Admin Media Review Workspace Redesign · Phase 8G.10Y ===
   Premium admin dark glass hero + KPI cards + workspace wrapper.
   No fake reviews / fake approval / fake AI suggestions / fake
   cover candidates. Suggestions are clearly separated from approved
   library assets. The original file had no "Page navigation" billing
   suite nav above the content, so no demotion is strictly needed —
   the closed helpers details below is provided for future review
   tools if needed.

   Sidebar / topbar unchanged. No media / review / AI / provider /
   db logic changes. KPI counts come from real variables already
   loaded earlier in admin-media-review.php ($counts['pending'],
   $counts['applied'], $counts['rejected'], $counts['all'],
   csrf_token()).
   ============================================================= */

body.z-admin-media-review-page,
body.kin-admin-shell {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-admin-media-review-hero,
body.z-admin-media-review-page [data-admin-media-review-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-admin-media-review-hero-copy,
.z-admin-media-review-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-admin-media-review-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-admin-media-review-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-admin-media-review-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-admin-media-review-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-admin-media-review-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-admin-media-review-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-admin-media-review-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-admin-media-review-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-admin-media-review-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-admin-media-review-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-admin-media-review-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-admin-media-review-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-admin-media-review-hero-side .z-admin-media-review-pill {
  font-size: .75rem;
}

/* KPI grid */
.z-admin-media-review-kpis,
body.z-admin-media-review-page [data-admin-media-review-kpis] {
  margin: 0 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
}

.z-admin-media-review-kpi,
body.z-admin-media-review-page [data-admin-media-review-kpi] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

.z-admin-media-review-kpi-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.z-admin-media-review-kpi-value {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.z-admin-media-review-kpi-hint {
  font-size: .72rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace wrapper */
.z-admin-media-review-workspace,
body.z-admin-media-review-page [data-admin-media-review-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Closed helpers · review tools at the bottom */
.z-admin-media-review-helpers,
body.z-admin-media-review-page [data-admin-media-review-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-admin-media-review-helpers > summary,
body.z-admin-media-review-page [data-admin-media-review-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-admin-media-review-helpers > summary::-webkit-details-marker,
body.z-admin-media-review-page [data-admin-media-review-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-admin-media-review-helpers > summary::before,
body.z-admin-media-review-page [data-admin-media-review-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-admin-media-review-helpers[open] > summary::before,
body.z-admin-media-review-page [data-admin-media-review-helpers][open] > summary::before {
  content: "−";
}

.z-admin-media-review-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-admin-media-review-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-admin-media-review-hero,
  body.z-admin-media-review-page [data-admin-media-review-hero],
  .z-admin-media-review-kpis,
  body.z-admin-media-review-page [data-admin-media-review-kpis],
  .z-admin-media-review-workspace,
  body.z-admin-media-review-page [data-admin-media-review-workspace],
  .z-admin-media-review-helpers,
  body.z-admin-media-review-page [data-admin-media-review-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-admin-media-review-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-admin-media-review-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Video Maker Workspace Redesign · Phase 8G.10Z ===
   Premium studio dark glass hero + workspace wrapper. The old
   "Page navigation" details (creative suite nav + Create Flow /
   Active preset) is demoted into a single closed details block
   at the very bottom of <main>. No fake video / fake media / fake
   progress / fake success / fake credits.

   Sidebar / topbar unchanged. No provider / generation / media / db
   logic changes. The existing video-maker workspace (4 tabs:
   media / audio / settings / preview) is preserved exactly as-is.
   ============================================================= */

body.z-video-maker-page,
body.z-creative-suite-page.z-video-maker-page {
  /* shared shell rhythm — no topbar / sidebar overrides here */
}

/* Hero */
.z-video-maker-hero,
body.z-video-maker-page [data-video-maker-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem;
  align-items: start;
}

.z-video-maker-hero-copy,
.z-video-maker-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-video-maker-hero-copy .kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: 0;
}

.z-video-maker-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-video-maker-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

.z-video-maker-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .25rem;
}

.z-video-maker-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-video-maker-pill .status-dot {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: currentColor;
}

.z-video-maker-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-video-maker-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-video-maker-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-video-maker-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.65)); }

.z-video-maker-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

.z-video-maker-hero-side {
  align-items: flex-end;
  gap: .35rem;
}

.z-video-maker-hero-side .z-video-maker-pill {
  font-size: .75rem;
}

/* Workspace wrapper */
.z-video-maker-workspace,
body.z-video-maker-page [data-video-maker-workspace] {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

/* Closed helpers · page tools at the bottom */
.z-video-maker-helpers,
body.z-video-maker-page [data-video-maker-helpers] {
  margin: 0 1.25rem 1.5rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: transparent;
  overflow: hidden;
}

.z-video-maker-helpers > summary,
body.z-video-maker-page [data-video-maker-helpers] > summary {
  cursor: pointer;
  list-style: none;
  padding: .35rem .75rem;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.z-video-maker-helpers > summary::-webkit-details-marker,
body.z-video-maker-page [data-video-maker-helpers] > summary::-webkit-details-marker {
  display: none;
}

.z-video-maker-helpers > summary::before,
body.z-video-maker-page [data-video-maker-helpers] > summary::before {
  content: "+";
  font-size: .85rem;
  width: .85rem;
  height: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-video-maker-helpers[open] > summary::before,
body.z-video-maker-page [data-video-maker-helpers][open] > summary::before {
  content: "−";
}

.z-video-maker-helpers-inner {
  padding: .65rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-video-maker-helpers-hint {
  margin: 0 0 .25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

/* Mobile */
@media (max-width: 767px) {
  .z-video-maker-hero,
  body.z-video-maker-page [data-video-maker-hero],
  .z-video-maker-workspace,
  body.z-video-maker-page [data-video-maker-workspace],
  .z-video-maker-helpers,
  body.z-video-maker-page [data-video-maker-helpers] {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-video-maker-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
  }
  .z-video-maker-hero-side {
    align-items: flex-start;
  }
}

/* === ZAPSOC Global Design Fix Batch · Phase B ===
   CSS-only companion for the Phase B Global Design Fix Batch.
   Adds reusable admin-hero styles for the three admin pages that
   migrated off the old <header class="admin-page-header"> pattern:

     - public/admin-user-create.php  (data-admin-user-create-hero)
     - public/admin-user-edit.php    (data-admin-user-edit-hero)
     - public/admin-payment-fixtures.php (data-admin-payment-fixtures-hero)

   The hero markup on each page uses z-*-hero-copy + z-*-hero-side.
   These rules mirror the existing admin hero conventions used on
   admin-plans / admin-revenue / admin-settings / admin-users /
   admin-usage / admin-media-import / admin-media-review.

   No new selectors outside the three page scopes. No sidebar / topbar /
   footer / main / shell rules touched. No external assets, no
   Tailwind, no Google Fonts, no Material Symbols, no href="#".
   ============================================================= */

[data-admin-user-create-hero],
[data-admin-user-edit-hero],
[data-admin-payment-fixtures-hero] {
  margin: 1rem 1.25rem 1.25rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-admin-user-create-hero] .z-admin-user-create-hero-copy,
[data-admin-user-edit-hero] .z-admin-user-edit-hero-copy,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-hero-copy {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

[data-admin-user-create-hero] .z-admin-user-create-hero-side,
[data-admin-user-edit-hero] .z-admin-user-edit-hero-side,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-hero-side {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

[data-admin-user-create-hero] .z-admin-user-create-hero-title,
[data-admin-user-edit-hero] .z-admin-user-edit-hero-title,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
}

[data-admin-user-create-hero] .z-admin-user-create-hero-sub,
[data-admin-user-edit-hero] .z-admin-user-edit-hero-sub,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-hero-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 60ch;
}

[data-admin-user-create-hero] .z-admin-user-create-pills,
[data-admin-user-edit-hero] .z-admin-user-edit-pills,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

[data-admin-user-create-hero] .z-admin-user-create-pill,
[data-admin-user-edit-hero] .z-admin-user-edit-pill,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: var(--st-radius-full, 9999px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text, #F0F6FC);
}

[data-admin-user-create-hero] .z-admin-user-create-pill.is-success,
[data-admin-user-edit-hero] .z-admin-user-edit-pill.is-success,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pill.is-success {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.14);
  color: var(--st-accent-cyan, #5EEAD4);
}

[data-admin-user-create-hero] .z-admin-user-create-pill.is-warning,
[data-admin-user-edit-hero] .z-admin-user-edit-pill.is-warning,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pill.is-warning {
  border-color: rgba(255, 196, 0, 0.4);
  background: rgba(255, 196, 0, 0.12);
  color: #ffc400;
}

[data-admin-user-create-hero] .z-admin-user-create-pill.is-info,
[data-admin-user-edit-hero] .z-admin-user-edit-pill.is-info,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pill.is-info {
  border-color: rgba(120, 168, 224, 0.4);
  background: rgba(120, 168, 224, 0.12);
  color: #9cc1f7;
}

[data-admin-user-create-hero] .z-admin-user-create-pill.is-neutral,
[data-admin-user-edit-hero] .z-admin-user-edit-pill.is-neutral,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pill.is-neutral {
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

[data-admin-user-create-hero] .z-admin-user-create-pill .status-dot,
[data-admin-user-edit-hero] .z-admin-user-edit-pill .status-dot,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-pill .status-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: var(--st-radius-full, 9999px);
  background: currentColor;
  opacity: .8;
}

[data-admin-user-create-hero] .z-admin-user-create-hero-note,
[data-admin-user-edit-hero] .z-admin-user-edit-hero-note,
[data-admin-payment-fixtures-hero] .z-admin-payment-fixtures-hero-note {
  margin: .15rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 70ch;
}

/* Mobile: tighten padding. */
@media (max-width: 767px) {
  [data-admin-user-create-hero],
  [data-admin-user-edit-hero],
  [data-admin-payment-fixtures-hero] {
    margin: .75rem .75rem 1rem;
    padding: 1.15rem 1rem 1rem;
  }
}

/* === ZAPSOC Music Guide Help Center · Phase D ===
   Premium dark help-center styles for public/music-howto.php.

   Sections:
     - .z-music-guide-hero              (data-music-guide-hero)
     - .z-music-guide-section           (all section wrappers)
     - .z-music-guide-grid              (responsive grid)
     - .z-music-guide-card              (individual cards)
     - .z-music-guide-step / -num / -body / -title
     - .z-music-guide-formula
     - .z-music-guide-example / -prompt
     - .z-music-guide-faq / -item
     - .z-music-guide-cta-buttons
     - .z-music-guide-pills / -pill     (shared token with other studios)

   Scope: only matches selectors inside body.z-music-howto-page OR
   the [data-music-guide-*] attributes used on music-howto.php.
   No global main / topbar / sidebar / shell rules touched. No
   external assets, no Tailwind, no Google Fonts, no Material Symbols,
   no href="#".
   ============================================================= */

body.z-music-howto-page .z-music-guide-hero,
body.z-music-howto-page [data-music-guide-hero],
body.z-music-howto-page .z-music-guide-section {
  margin: 1rem 1.25rem 1.25rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.04) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
}

body.z-music-howto-page .z-music-guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  align-items: start;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.z-music-howto-page .z-music-guide-hero-copy,
body.z-music-howto-page .z-music-guide-hero-side {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}

body.z-music-howto-page .z-music-guide-hero-side {
  align-items: flex-start;
  margin-top: 1rem;
}

body.z-music-howto-page .z-music-guide-hero-side .btn {
  align-self: flex-start;
}

body.z-music-howto-page .z-music-guide-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

body.z-music-howto-page .z-music-guide-hero-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  max-width: 56ch;
}

body.z-music-howto-page .z-music-guide-hero-note {
  margin: .15rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  max-width: 60ch;
}

body.z-music-howto-page .z-music-guide-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .15rem 0 .35rem;
}

body.z-music-howto-page .z-music-guide-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  border: 1px solid var(--st-border);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text, #F0F6FC);
}

body.z-music-howto-page .z-music-guide-pill.is-info {
  border-color: rgba(120, 168, 224, 0.4);
  background: rgba(120, 168, 224, 0.12);
  color: #9cc1f7;
}

body.z-music-howto-page .z-music-guide-pill.is-success {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.12);
  color: var(--st-accent-cyan, #5EEAD4);
}

body.z-music-howto-page .z-music-guide-pill .status-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: var(--st-radius-full, 9999px);
  background: currentColor;
  opacity: .8;
}

/* Section header shared by quickstart / modes / form / formula /
   best-practices / examples / faq / troubleshooting / cta. */
body.z-music-howto-page .z-music-guide-section-head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}

body.z-music-howto-page .z-music-guide-section-head .kicker {
  margin: 0;
}

body.z-music-howto-page .z-music-guide-section-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--st-text, #F0F6FC);
}

body.z-music-howto-page .z-music-guide-section-head .muted {
  font-size: .85rem;
  line-height: 1.45;
  max-width: 60ch;
}

/* Responsive card grid — desktop 3 cols, tablet 2 cols, mobile 1 col. */
body.z-music-howto-page .z-music-guide-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.z-music-howto-page .z-music-guide-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem .95rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

body.z-music-howto-page .z-music-guide-card-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text, #F0F6FC);
}

body.z-music-howto-page .z-music-guide-card-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  font-size: .82rem;
  line-height: 1.5;
}

body.z-music-howto-page .z-music-guide-card-list dt {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
  margin: .25rem 0 0;
}

body.z-music-howto-page .z-music-guide-card-list dt:first-child {
  margin-top: 0;
}

body.z-music-howto-page .z-music-guide-card-list dd {
  margin: 0;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.z-music-howto-page .z-music-guide-card-list dd code {
  display: block;
  padding: .4rem .55rem;
  border-radius: var(--st-radius-sm, 4px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--st-border);
  font-size: .78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Quickstart: numbered steps. */
body.z-music-howto-page .z-music-guide-quickstart {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: z-music-guide-step;
}

body.z-music-howto-page .z-music-guide-step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .75rem;
  padding: .85rem .95rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
}

body.z-music-howto-page .z-music-guide-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(94, 234, 212, 0.12);
  color: var(--st-accent-cyan, #5EEAD4);
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .82rem;
  font-weight: 700;
}

body.z-music-howto-page .z-music-guide-step-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

body.z-music-howto-page .z-music-guide-step-title {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
}

/* Prompt formula. */
body.z-music-howto-page .z-music-guide-formula {
  padding: .85rem .95rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px dashed var(--st-border);
  background: rgba(94, 234, 212, 0.06);
}

body.z-music-howto-page .z-music-guide-formula code {
  display: block;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--st-text, #F0F6FC);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

body.z-music-howto-page .z-music-guide-formula-tips {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  font-size: .85rem;
  line-height: 1.5;
}

body.z-music-howto-page .z-music-guide-formula-tips em {
  font-style: normal;
  color: var(--st-accent-cyan, #5EEAD4);
}

/* Examples. */
body.z-music-howto-page .z-music-guide-example {
  gap: .65rem;
}

body.z-music-howto-page .z-music-guide-example-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

body.z-music-howto-page .z-music-guide-example-prompt {
  margin: 0;
  padding: .65rem .75rem;
  border-radius: var(--st-radius-md, 6px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--st-text, #F0F6FC);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* FAQ. */
body.z-music-howto-page .z-music-guide-faq-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

body.z-music-howto-page .z-music-guide-faq-item {
  padding: .65rem .85rem;
  border-radius: var(--st-radius-lg, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
}

body.z-music-howto-page .z-music-guide-faq-item > summary {
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
  padding: .25rem 0;
}

body.z-music-howto-page .z-music-guide-faq-item > summary::-webkit-details-marker {
  display: none;
}

body.z-music-howto-page .z-music-guide-faq-item > summary::before {
  content: "+";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  text-align: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .78rem;
  line-height: 1rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

body.z-music-howto-page .z-music-guide-faq-item[open] > summary::before {
  content: "−";
}

body.z-music-howto-page .z-music-guide-faq-item > p {
  margin: .5rem 0 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

/* CTA. */
body.z-music-howto-page .z-music-guide-cta-section {
  text-align: left;
}

body.z-music-howto-page .z-music-guide-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

body.z-music-howto-page .z-music-guide-cta-note {
  margin: .85rem 0 0;
  font-size: .82rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
}

/* Responsive: tablet 2 cols, mobile 1 col. */
@media (max-width: 1199px) {
  body.z-music-howto-page .z-music-guide-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body.z-music-howto-page .z-music-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.z-music-howto-page .z-music-guide-hero,
  body.z-music-howto-page .z-music-guide-section {
    margin: .75rem .75rem 1rem;
    padding: 1.15rem 1rem 1rem;
  }
  body.z-music-howto-page .z-music-guide-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  body.z-music-howto-page .z-music-guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.z-music-howto-page .z-music-guide-card {
    padding: .7rem .8rem;
  }
  body.z-music-howto-page .z-music-guide-formula code {
    font-size: .82rem;
  }
  body.z-music-howto-page .z-music-guide-example-prompt {
    font-size: .78rem;
  }
  body.z-music-howto-page .z-music-guide-cta-buttons .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* === ZAPSOC Billing Page Polish · Phase D.2 ===
   Premium dark glass hero + status panel + responsive subscription
   plan cards + credit packs + actions + FAQ. Real data only.
   Reuses the Phase 8G.10S / B0 / D glass tokens, .kicker, pills
   and --st-* design variables.

   Body scope: body.z-billing-suite-page.z-user-billing-page (existing)
              + body.z-billing-page (new page-specific scope)

   Hooks: [data-billing-hero] [data-billing-status-panel]
          [data-billing-plans] [data-billing-plan-card]
          [data-billing-credits] [data-billing-credit-card]
          [data-billing-actions] [data-billing-help]

   Forms / actions / CSRF / data-* untouched. No payment/checkout/
   webhook/credit/usage/provider/DB logic changes. No fake plans,
   fake prices, fake credits, fake subscriptions, fake Stripe /
   PayPal / Mollie active states. No external assets. No href="#". */

body.z-billing-suite-page.z-user-billing-page.z-billing-page .dashboard-main {
  gap: 1rem;
}

/* --- Hero ----------------------------------------------------------- */
.z-billing-hero,
body.z-billing-suite-page.z-user-billing-page [data-billing-hero] {
  margin: 1rem 1.25rem 1rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--st-radius-xl, 12px);
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg,
      rgba(94, 234, 212, 0.05) 0%,
      rgba(94, 234, 212, 0) 70%),
    var(--st-surface-container-low, #191C1F);
  box-shadow: var(--st-glass-shadow, 0 12px 32px -22px rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr);
  gap: 1.5rem;
  align-items: stretch;
}

.z-billing-hero-copy,
.z-billing-hero-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.z-billing-hero-copy .kicker {
  margin: 0;
}

.z-billing-hero-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.85rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--st-text, #F0F6FC);
}

.z-billing-hero-sub {
  margin: 0;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.78));
  max-width: 60ch;
}

.z-billing-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .15rem 0 .15rem;
}

.z-billing-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
}

.z-billing-pill.is-info { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.08); }
.z-billing-pill.is-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); }
.z-billing-pill.is-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.z-billing-pill.is-neutral { color: var(--st-text-muted, rgba(240, 246, 252, 0.7)); }

.z-billing-hero-note {
  margin: .15rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
  max-width: 64ch;
}

/* --- Status panel (right column of hero) ---------------------------- */
.z-billing-hero-panel {
  padding: 1rem 1.1rem;
  border-radius: var(--st-radius-lg, 10px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
  align-self: stretch;
}

.z-billing-hero-panel-kicker {
  margin: 0;
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.55));
}

.z-billing-status,
body.z-billing-suite-page.z-user-billing-page [data-billing-status-panel] ul {
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.z-billing-status-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--st-border);
  min-width: 0;
}

.z-billing-status-item:last-child {
  border-bottom: 0;
}

.z-billing-status-label {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  white-space: nowrap;
  flex: 0 0 auto;
}

.z-billing-status-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
  text-align: right;
  min-width: 0;
}

.z-billing-status-value strong {
  font-family: var(--st-font-headline, inherit);
  font-size: .95rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
  word-break: break-word;
}

.z-billing-status-value code {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .72rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0 .35rem;
  border-radius: var(--st-radius-sm, 4px);
}

.z-billing-status-hint {
  font-size: .68rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
}

.z-billing-status-empty {
  font-size: .82rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
  font-style: italic;
}

/* --- Section rhythm ------------------------------------------------- */
.z-billing-section {
  margin: 0 1.25rem;
  padding: 0 0 .5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}

.z-billing-section-head {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: .25rem;
}

.z-billing-section-head .kicker {
  margin: 0;
}

.z-billing-section-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--st-text, #F0F6FC);
}

.z-billing-section-sub {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.7));
  max-width: 72ch;
}

/* --- Plan / credit grids -------------------------------------------- */
.z-billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .85rem;
  align-items: stretch;
  min-width: 0;
}

.z-billing-plans-grid,
.z-billing-credits-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.z-billing-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* --- Card ----------------------------------------------------------- */
.z-billing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.1rem;
  border-radius: var(--st-radius-lg, 10px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
  min-width: 0;
  word-break: break-word;
}

.z-billing-plan-card.is-current {
  border-color: rgba(110, 231, 183, 0.5);
  background:
    linear-gradient(180deg,
      rgba(110, 231, 183, 0.05) 0%,
      rgba(110, 231, 183, 0) 70%),
    var(--st-surface-container, #1D2023);
}

.z-billing-plan-card.is-manual {
  border-color: rgba(252, 211, 77, 0.4);
}

.z-billing-plan-card.is-setup-required,
.z-billing-credit-card.is-setup-required {
  border-color: rgba(252, 211, 77, 0.32);
  background:
    linear-gradient(180deg,
      rgba(252, 211, 77, 0.035) 0%,
      rgba(252, 211, 77, 0) 72%),
    var(--st-surface-container, #1D2023);
}

.z-billing-plan-card.is-highlight,
.z-billing-credit-card.is-highlight {
  outline: 2px solid color-mix(in srgb, var(--st-primary, #5EEAD4) 40%, transparent);
  outline-offset: -2px;
}

.z-billing-plan-card-head,
.z-billing-plan-name,
.z-billing-plan-description {
  margin: 0;
  min-width: 0;
}

.z-billing-plan-kicker {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.6));
}

.z-billing-plan-name {
  font-family: var(--st-font-headline, inherit);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
  margin-top: .15rem;
}

.z-billing-plan-description {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.7));
}

.z-billing-plan-price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}

.z-billing-plan-price-value {
  font-family: var(--st-font-headline, inherit);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--st-text, #F0F6FC);
  line-height: 1.1;
}

.z-billing-plan-price-interval {
  font-size: .78rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.7));
}

.z-billing-plan-credits {
  margin: 0;
  font-size: .85rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.85));
}

.z-billing-plan-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.z-billing-plan-feature {
  position: relative;
  padding-left: 1.05rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.78));
}

.z-billing-plan-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--st-primary, #5EEAD4) 80%, transparent);
}

.z-billing-plan-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.z-billing-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: var(--st-radius-full, 9999px);
  border: 1px solid var(--st-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.78));
}

.z-billing-status-badge.is-current {
  color: #6ee7b7;
  border-color: rgba(110, 231, 183, 0.5);
  background: rgba(110, 231, 183, 0.08);
}

.z-billing-status-badge.is-manual {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.4);
  background: rgba(252, 211, 77, 0.08);
}

.z-billing-status-badge.is-setup-required {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.4);
  background: rgba(252, 211, 77, 0.08);
}

.z-billing-status-badge.is-available {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.4);
  background: rgba(147, 197, 253, 0.08);
}

.z-billing-plan-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.z-billing-plan-actions .btn,
.z-billing-plan-actions form,
.z-billing-plan-actions form .btn {
  width: 100%;
  justify-content: center;
}

.z-billing-plan-actions form {
  display: contents;
}

.z-billing-action-hint {
  margin: -.15rem 0 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.64));
}

/* --- Credits overview ---------------------------------------------- */
.z-billing-credit-overview {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr);
  gap: .85rem;
  min-width: 0;
}

.z-billing-credit-metric,
.z-billing-credit-usage {
  min-width: 0;
  padding: .95rem 1.05rem;
  border-radius: var(--st-radius-lg, 10px);
  border: 1px solid var(--st-border);
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.z-billing-credit-label {
  font-family: var(--st-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.62));
}

.z-billing-credit-value {
  font-family: var(--st-font-headline, inherit);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.1;
  color: var(--st-text, #F0F6FC);
  word-break: break-word;
}

.z-billing-credit-note,
.z-billing-credit-empty {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.68));
}

.z-billing-credit-usage-list {
  margin: .15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
}

.z-billing-credit-usage-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, .75fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: .45rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--st-border);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  font-size: .78rem;
}

.z-billing-credit-usage-list li:last-child {
  border-bottom: 0;
}

.z-billing-credit-usage-list strong {
  color: var(--st-text, #F0F6FC);
}

.z-billing-credit-usage-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Empty state ---------------------------------------------------- */
.z-billing-empty {
  padding: 1rem 1.1rem;
  border-radius: var(--st-radius-lg, 10px);
  border: 1px dashed var(--st-border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.z-billing-empty-title {
  margin: 0;
  font-family: var(--st-font-headline, inherit);
  font-size: 1rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
}

.z-billing-empty-text {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.7));
}

/* --- Checkout banner spacing --------------------------------------- */
.z-billing-checkout-banner {
  margin: 0 1.25rem;
}

/* --- FAQ ------------------------------------------------------------ */
.z-billing-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: .65rem;
  min-width: 0;
}

.z-billing-faq-item {
  border-radius: var(--st-radius-md, 8px);
  border: 1px solid var(--st-border);
  background: var(--st-surface-container, #1D2023);
  padding: .35rem .85rem;
  min-width: 0;
}

.z-billing-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: .55rem 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--st-text, #F0F6FC);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  word-break: break-word;
}

.z-billing-faq-item > summary::-webkit-details-marker {
  display: none;
}

.z-billing-faq-item > summary::after {
  content: "+";
  font-size: .9rem;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full, 9999px);
  color: var(--st-text-muted, rgba(240, 246, 252, 0.65));
  flex: 0 0 auto;
}

.z-billing-faq-item[open] > summary::after {
  content: "−";
}

.z-billing-faq-item > p {
  margin: 0 0 .65rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.78));
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 1024px) {
  .z-billing-hero,
  body.z-billing-suite-page.z-user-billing-page [data-billing-hero] {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .z-billing-hero-panel {
    align-self: stretch;
  }
  .z-billing-plans-grid,
  .z-billing-credits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .z-billing-credit-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .z-billing-credit-usage {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .z-billing-hero,
  body.z-billing-suite-page.z-user-billing-page [data-billing-hero],
  .z-billing-section,
  .z-billing-checkout-banner {
    margin-left: .75rem;
    margin-right: .75rem;
  }
  .z-billing-hero {
    padding: 1.15rem 1.15rem;
  }
  .z-billing-hero-title {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
  .z-billing-pill {
    font-size: .68rem;
  }
  .z-billing-status-item {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }
  .z-billing-status-value {
    align-items: flex-start;
    text-align: left;
  }
  .z-billing-plans-grid,
  .z-billing-credits-grid,
  .z-billing-actions-grid,
  .z-billing-grid,
  .z-billing-credit-overview,
  .z-billing-faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .z-billing-credit-usage {
    grid-column: auto;
  }
  .z-billing-plan-actions .btn,
  .z-billing-plan-actions form .btn {
    width: 100%;
  }
  .z-billing-credit-usage-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .z-billing-credit-usage-list small {
    grid-column: 1 / -1;
  }
}

/* Prevent any table inside billing actions from creating page overflow. */
body.z-billing-suite-page.z-user-billing-page.z-billing-page .z-billing-actions .table-wrap,
body.z-billing-suite-page.z-user-billing-page.z-billing-page .z-billing-actions .admin-table {
  max-width: 100%;
  min-width: 0;
}

body.z-billing-suite-page.z-user-billing-page.z-billing-page .z-billing-actions .table-wrap {
  overflow-x: auto;
}

/* === ZAPSOC Admin Billing Polish · Phase D.3 ===
   Admin billing suite alignment for:
   - admin-plans.php
   - admin-revenue.php
   - admin-usage.php
   - admin-payment-fixtures.php

   Scope is limited to [data-admin-billing-page]. Existing forms,
   CSRF fields, POST actions, provider logic, plan logic, credit logic
   and payment fixtures remain server-side and unchanged. */

[data-admin-billing-page],
[data-admin-billing-page] * {
  min-width: 0;
}

[data-admin-billing-page] {
  --admin-billing-panel: var(--st-surface-container, #1D2023);
  --admin-billing-panel-low: var(--st-surface-container-low, #191C1F);
  --admin-billing-line: var(--st-border, rgba(255, 255, 255, 0.08));
}

[data-admin-billing-page] [data-admin-plans-hero],
[data-admin-billing-page] [data-admin-revenue-hero],
[data-admin-billing-page] [data-admin-usage-hero],
[data-admin-billing-page] [data-admin-payment-fixtures-hero] {
  isolation: isolate;
}

[data-admin-billing-page] [data-admin-plans-summary],
[data-admin-billing-page] [data-admin-revenue-summary],
[data-admin-billing-page] [data-admin-usage-summary],
[data-admin-billing-page] [data-admin-payment-fixtures-summary] {
  align-items: stretch;
}

[data-admin-billing-page] [data-admin-plans-summary] > *,
[data-admin-billing-page] [data-admin-revenue-summary] > *,
[data-admin-billing-page] [data-admin-usage-summary] > *,
[data-admin-billing-page] [data-admin-payment-fixtures-summary] > * {
  min-width: 0;
}

[data-admin-billing-page] [data-admin-plans-grid],
[data-admin-billing-page] [data-admin-revenue-grid],
[data-admin-billing-page] [data-admin-usage-grid],
[data-admin-billing-page] [data-admin-payment-fixtures-grid] {
  min-width: 0;
}

[data-admin-billing-page] [data-admin-plan-card] {
  border-color: color-mix(in srgb, var(--admin-billing-line) 85%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)),
    var(--admin-billing-panel, #1D2023);
}

[data-admin-billing-page] [data-admin-plans-actions] {
  margin: 0 1.25rem .85rem;
}

[data-admin-billing-page] [data-admin-revenue-provider-state] {
  margin-top: 0;
}

[data-admin-billing-page] [data-admin-revenue-table],
[data-admin-billing-page] [data-admin-usage-table] {
  width: 100%;
}

[data-admin-billing-page] .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

[data-admin-billing-page] .empty-state,
[data-admin-billing-page] [data-admin-plans-empty] {
  border-color: color-mix(in srgb, var(--admin-billing-line) 72%, transparent);
}

[data-admin-billing-page] .badge,
[data-admin-billing-page] .status-pill,
[data-admin-billing-page] [class*="-pill"] {
  max-width: 100%;
}

[data-admin-billing-page="payment-fixtures"] [data-admin-payment-fixtures-summary] {
  margin: 0 1.25rem 1rem;
}

[data-admin-payment-fixtures-warning] {
  margin: 0 1.25rem 1rem;
  padding: .9rem 1rem;
  border-radius: var(--st-radius-lg, 10px);
  border: 1px solid rgba(252, 211, 77, 0.36);
  background:
    linear-gradient(180deg, rgba(252, 211, 77, 0.075), rgba(252, 211, 77, 0.025)),
    var(--admin-billing-panel-low, #191C1F);
  color: var(--st-text, #F0F6FC);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
}

[data-admin-payment-fixtures-warning] strong {
  color: #fcd34d;
}

[data-admin-payment-fixtures-warning] span {
  color: var(--st-text-muted, rgba(240, 246, 252, 0.72));
  font-size: .82rem;
  line-height: 1.45;
}

[data-admin-billing-page="payment-fixtures"] [data-admin-payment-fixtures-grid] {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

@media (max-width: 767px) {
  [data-admin-billing-page] [data-admin-plans-actions],
  [data-admin-payment-fixtures-warning],
  [data-admin-billing-page="payment-fixtures"] [data-admin-payment-fixtures-summary],
  [data-admin-billing-page="payment-fixtures"] [data-admin-payment-fixtures-grid] {
    margin-left: .75rem;
    margin-right: .75rem;
  }

  [data-admin-payment-fixtures-warning] {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === ZAPSOC Media Operations Polish · Phase E.4 ===
   Media Library + Admin Media Operations alignment.

   Scope:
   - public/media-library.php        [data-media-library-page]
   - public/admin-media-import.php   [data-admin-media-page="import"]
   - public/admin-media-review.php   [data-admin-media-page="review"]

   Existing upload/import/review/delete/rename forms, CSRF fields,
   POST handlers, API endpoints, provider calls and media payloads
   remain unchanged. No external assets, no fake media/job states. */

[data-media-library-page],
[data-admin-media-page],
[data-media-library-page] *,
[data-admin-media-page] * {
  min-width: 0;
}

[data-media-library-page],
[data-admin-media-page] {
  --media-ops-panel: var(--st-surface-container, #1D2023);
  --media-ops-panel-low: var(--st-surface-container-low, #191C1F);
  --media-ops-border: var(--st-border, rgba(255, 255, 255, 0.08));
  --media-ops-muted: var(--st-text-muted, rgba(240, 246, 252, 0.66));
}

[data-media-library-page] [data-media-library-hero],
[data-admin-media-page] [data-admin-media-import-hero],
[data-admin-media-page] [data-admin-media-review-hero] {
  isolation: isolate;
}

[data-media-library-page] [data-media-library-summary] {
  margin: 0 1.25rem 1rem;
}

.z-media-ops-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .65rem;
  align-items: stretch;
}

.z-media-ops-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--media-ops-border) 86%, transparent);
  border-radius: var(--st-radius-md, 6px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0)),
    var(--media-ops-panel, #1D2023);
}

.z-media-ops-card span {
  color: var(--media-ops-muted);
  font-size: .68rem;
  letter-spacing: .05em;
  line-height: 1.25;
  text-transform: uppercase;
}

.z-media-ops-card strong {
  color: var(--st-text, #F0F6FC);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.z-media-ops-card small {
  color: var(--media-ops-muted);
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-media-library-page] [data-media-library-grid],
[data-admin-media-page] [data-admin-media-import-queue],
[data-admin-media-page] [data-admin-media-review-grid] {
  min-width: 0;
}

[data-media-library-page] [data-media-library-item] {
  border-color: color-mix(in srgb, var(--media-ops-border) 82%, transparent);
  overflow: hidden;
}

[data-media-library-page] [data-media-library-item] h3,
[data-media-library-page] [data-media-library-item] .media-card-meta,
[data-media-library-page] [data-media-library-item] .card-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-media-library-page] [data-media-library-item] .media-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

[data-media-library-page] [data-media-library-empty],
[data-admin-media-page] .z-media-ops-empty {
  border-color: color-mix(in srgb, var(--media-ops-border) 72%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)),
    var(--media-ops-panel-low, #191C1F);
}

[data-admin-media-page] [data-admin-media-import-summary],
[data-admin-media-page] [data-admin-media-review-summary] {
  align-items: stretch;
}

[data-admin-media-page] [data-admin-media-import-summary] > *,
[data-admin-media-page] [data-admin-media-review-summary] > * {
  min-width: 0;
}

[data-admin-media-page="import"] [data-admin-media-import-dropzone],
[data-admin-media-page="import"] [data-admin-media-import-queue],
[data-admin-media-page="review"] [data-admin-media-review-item],
[data-admin-media-page="review"] [data-admin-media-review-empty] {
  border-color: color-mix(in srgb, var(--media-ops-border) 84%, transparent);
}

[data-admin-media-page="import"] [data-admin-media-import-actions],
[data-admin-media-page="review"] .admin-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

[data-admin-media-page="import"] [data-admin-media-import-actions] {
  padding-top: .1rem;
}

[data-admin-media-page="import"] [data-admin-media-import-queue] {
  border-style: dashed;
}

[data-admin-media-page="import"] [data-admin-media-import-queue] h2,
[data-admin-media-page="review"] [data-admin-media-review-empty] h2 {
  margin-bottom: .2rem;
}

[data-admin-media-page="review"] [data-admin-media-review-grid] {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

[data-admin-media-page="review"] [data-admin-media-review-item] {
  overflow: hidden;
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-header,
[data-admin-media-page="review"] [data-admin-media-review-item] .review-badges,
[data-admin-media-page="review"] [data-admin-media-review-item] .settings-grid,
[data-admin-media-page="review"] [data-admin-media-review-item] .admin-action-buttons {
  min-width: 0;
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-badges {
  flex-wrap: wrap;
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-grid,
[data-admin-media-page="review"] [data-admin-media-review-item] .review-preview-panel,
[data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-panel,
[data-admin-media-page="review"] [data-admin-media-review-item] .review-edit-panel {
  min-width: 0;
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-panel {
  overflow: hidden;
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-table {
  max-width: 100%;
  overflow-x: auto;
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-row {
  grid-template-columns: minmax(7rem, .72fr) minmax(0, 1fr) minmax(0, 1fr);
}

[data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-row > span,
[data-admin-media-page="review"] [data-admin-media-review-item] .review-file-card strong,
[data-admin-media-page="review"] [data-admin-media-review-item] .review-reason p,
[data-admin-media-page="review"] [data-admin-media-review-item] .form-control {
  overflow-wrap: anywhere;
  word-break: break-word;
}

[data-admin-media-page] .badge,
[data-admin-media-page] [class$="-pill"],
[data-media-library-page] .media-badge,
[data-media-library-page] .source-badge,
[data-media-library-page] .language-badge,
[data-media-library-page] .module-code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

[data-admin-media-page] .z-media-action-reject {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.18);
  color: #FECACA;
}

[data-admin-media-page] .z-media-action-reject:hover,
[data-admin-media-page] .z-media-action-reject:focus-visible {
  border-color: rgba(248, 113, 113, 0.62);
  background: rgba(127, 29, 29, 0.28);
}

[data-admin-media-page] .table-wrap,
[data-media-library-page] .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 767px) {
  [data-media-library-page] [data-media-library-summary] {
    margin-left: .75rem;
    margin-right: .75rem;
  }

  .z-media-ops-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-row {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-admin-media-page="review"] [data-admin-media-review-item] .review-diff-head {
    display: none;
  }
}

/* === ZAPSOC Music Studio Generate Repair UI · Phase E.0 === */
body.z-music-studio-page [data-music-studio-workspace],
body.z-music-studio-page [data-music-studio-workspace] * {
  min-width: 0;
}

body.z-music-studio-page [data-music-studio-control] {
  scroll-margin-top: 5rem;
}

body.z-music-studio-page .z-music-helper,
body.z-music-studio-page .z-music-required-note {
  display: block;
  margin-top: .35rem;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.66));
  font-size: .76rem;
  line-height: 1.45;
}

body.z-music-studio-page .z-music-vocal-type {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

body.z-music-studio-page .z-music-vocal-type select {
  width: 100%;
}

body.z-music-studio-page .z-music-mode-card {
  min-height: 5rem;
}

body.z-music-studio-page .z-music-mode-card p {
  max-width: 100%;
}

body.z-music-studio-page [data-music-generation-state],
body.z-music-studio-page .z-music-payload-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
  margin: .85rem 0 .75rem;
  padding: .7rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md, 6px);
  background: rgba(255, 255, 255, 0.025);
}

body.z-music-studio-page [data-music-generation-state] span,
body.z-music-studio-page .z-music-payload-preview span {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  color: var(--st-text-muted, rgba(240, 246, 252, 0.66));
  font-size: .68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.z-music-studio-page [data-music-generation-state] strong,
body.z-music-studio-page .z-music-payload-preview strong {
  color: var(--st-text, #F0F6FC);
  font-size: .78rem;
  font-weight: 600;
}

body.z-music-studio-page [data-music-error],
body.z-music-studio-page .z-music-validation,
body.z-music-studio-page .z-music-error {
  margin: .65rem 0;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.24);
  color: #FECACA;
  font-size: .86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.z-music-studio-page [data-music-error][hidden] {
  display: none;
}

body.z-music-studio-page .z-music-lyrics-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .8rem;
}

body.z-music-studio-page .z-music-lyrics-field textarea {
  min-height: 11rem;
}

@media (max-width: 900px) {
  body.z-music-studio-page [data-music-generation-state],
  body.z-music-studio-page .z-music-payload-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.z-music-studio-page [data-music-generation-state],
  body.z-music-studio-page .z-music-payload-preview {
    grid-template-columns: minmax(0, 1fr);
    padding: .65rem;
  }

  body.z-music-studio-page .z-music-mode-card {
    min-height: 0;
  }
}

/* === ZAPSOC Mobile Topbar Alignment Fix · Phase E.2 === */
@media (max-width: 767px) {
  body.dashboard-shell.st-stitch > .dashboard-main.st-page > [data-topbar] {
    margin-top: -1.25rem;
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    max-width: none;
  }
}

/* === ZAPSOC System Health UI · Phase E.7 === */
[data-system-health-page] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

[data-system-health-page] > :not([data-topbar]) {
  width: min(1600px, calc(100% - 3rem));
  margin-left: auto;
  margin-right: auto;
}

[data-system-health-page] .z-system-health-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
  gap: 1rem;
  margin-top: 1rem;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

[data-system-health-page] .z-system-health-hero-copy,
[data-system-health-page] .z-system-health-hero-side,
[data-system-health-page] .z-system-health-card,
[data-system-health-page] .z-system-health-section,
[data-system-health-page] .z-system-health-json,
[data-system-health-page] .z-system-health-note {
  min-width: 0;
}

[data-system-health-page] .z-system-health-hero h1 {
  margin: .2rem 0 .65rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: .96;
  letter-spacing: 0;
}

[data-system-health-page] .z-system-health-hero p,
[data-system-health-page] .z-system-health-section-head p,
[data-system-health-page] .z-system-health-note p,
[data-system-health-page] .z-system-health-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

[data-system-health-page] .z-system-health-hero-side {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: column;
  gap: .6rem;
}

[data-system-health-page] .z-system-health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 2rem;
  padding: .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
}

[data-system-health-page] .z-system-health-badge.is-ok {
  border-color: color-mix(in srgb, var(--success) 50%, transparent);
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: color-mix(in srgb, var(--success) 78%, var(--text));
}

[data-system-health-page] .z-system-health-badge.is-warning {
  border-color: color-mix(in srgb, var(--warning) 46%, transparent);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: color-mix(in srgb, var(--warning) 84%, var(--text));
}

[data-system-health-page] .z-system-health-badge.is-neutral {
  border-color: var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
}

[data-system-health-page] .z-system-health-note,
[data-system-health-page] .z-system-health-section,
[data-system-health-page] .z-system-health-json {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  box-shadow: var(--shadow-sm);
}

[data-system-health-page] .z-system-health-note {
  display: grid;
  gap: .45rem;
  padding: 1rem;
}

[data-system-health-page] .z-system-health-note strong {
  color: var(--text);
}

[data-system-health-page] .z-system-health-summary,
[data-system-health-page] .z-system-health-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

[data-system-health-page] .z-system-health-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .85rem;
}

[data-system-health-page] .z-system-health-section {
  padding: 1rem;
}

[data-system-health-page] .z-system-health-section-head {
  display: grid;
  gap: .3rem;
}

[data-system-health-page] .z-system-health-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: 0;
}

[data-system-health-page] .z-system-health-card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-height: 9.5rem;
  padding: .95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  overflow: hidden;
}

[data-system-health-page] .z-system-health-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
}

[data-system-health-page] .z-system-health-card-head span {
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

[data-system-health-page] .z-system-health-card small {
  display: block;
  margin-top: auto;
  color: var(--soft);
  font-size: .74rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-system-health-page] .z-system-health-json {
  padding: 0;
  overflow: hidden;
}

[data-system-health-page] .z-system-health-json summary {
  cursor: pointer;
  padding: 1rem;
  color: var(--text);
  font-weight: 800;
}

[data-system-health-page] .z-system-health-json pre {
  max-width: 100%;
  max-height: 32rem;
  margin: 0;
  padding: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  background: rgba(0, 0, 0, .14);
  font-size: .76rem;
  line-height: 1.55;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  [data-system-health-page] .z-system-health-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  [data-system-health-page] > :not([data-topbar]) {
    width: min(100% - 2rem, 1600px);
  }

  [data-system-health-page] .z-system-health-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-system-health-page] .z-system-health-hero-side {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  [data-system-health-page] .z-system-health-summary,
  [data-system-health-page] .z-system-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  [data-system-health-page] > :not([data-topbar]) {
    width: calc(100% - 1.5rem);
  }

  [data-system-health-page] .z-system-health-hero,
  [data-system-health-page] .z-system-health-section,
  [data-system-health-page] .z-system-health-note {
    border-radius: 10px;
  }

  [data-system-health-page] .z-system-health-summary,
  [data-system-health-page] .z-system-health-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-system-health-page] .z-system-health-card {
    min-height: 0;
  }

  [data-system-health-page] .z-system-health-card-head {
    flex-direction: column;
  }
}