/* ==========================================================================
   prePod — "Green Room" design system
   Misma estructura y tipografía que postPod; signal azul cobalto.
   ========================================================================== */

:root {
  /* Surfaces — cálidos oscuros (familia postPod) */
  --ink-deep:    #120e09;
  --ink:         #1a1511;
  --ink-raised:  #221c16;
  --ink-panel:   #1e1813;
  --ink-sunken:  #14100c;
  --ink-line:    #3a2f22;
  --ink-line-2:  #2a2219;
  --ink-hover:   #2e251b;

  /* Text */
  --paper:       #efe3d0;
  --paper-soft:  #c7b894;
  --paper-dim:   #8a7d65;
  --paper-faint: #5c5240;

  /* Signal — COBALTO / AZUL ELÉCTRICO */
  --signal:         #5a8bff;
  --signal-strong:  #7ba3ff;
  --signal-dim:     #3a5dab;
  --signal-hot:     #e85a4f;
  --signal-hot-dim: #7a2e28;
  --signal-cool:    #8db36a;
  --signal-cool-dim:#3d5128;
  --signal-amber:   #f4c770;
  --signal-cyan:    #6bb3c4;

  /* Geometry */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --glow-signal: 0 0 12px rgba(90, 139, 255, 0.5);
  --glow-hot:    0 0 10px rgba(232, 90, 79, 0.55);
  --shadow-console:
    inset 0 1px 0 rgba(90,139,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 1px 0 rgba(0,0,0,0.6),
    0 10px 30px -12px rgba(0,0,0,0.9);

  /* Typography */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-ui:      'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: var(--signal); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--signal); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--paper-dim); font-size: 12px; letter-spacing: 0.02em; }
.tiny { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); font-weight: 500; }
.spacer { flex: 1; }

/* ==========================================================================
   Form controls
   ========================================================================== */

button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--ink-raised);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  padding: 8px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 80ms var(--ease);
  position: relative;
  user-select: none;
}
button:hover { background: var(--ink-hover); border-color: var(--signal-dim); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

button.primary {
  background: var(--signal);
  color: var(--ink-deep);
  border-color: var(--signal);
  font-weight: 600;
}
button.primary:hover { background: var(--signal-strong); box-shadow: var(--glow-signal); }

button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--paper-soft);
}
button.ghost:hover { background: var(--ink-raised); color: var(--paper); }

button.danger { color: var(--signal-hot); border-color: transparent; background: transparent; }
button.danger:hover { background: rgba(232, 90, 79, 0.1); border-color: var(--signal-hot-dim); }

button.icon {
  padding: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
}

input[type=text], input[type=password], input[type=file], input[type=color], textarea, select {
  width: 100%;
  background: var(--ink-sunken);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(90,139,255,0.12);
}
textarea { resize: vertical; min-height: 80px; }
input[type=color] {
  width: 56px;
  height: 36px;
  padding: 4px;
  cursor: pointer;
}
label { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 6px; font-weight: 500; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.row { display: flex; gap: 10px; align-items: center; }
.row.right { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 8px; }

.card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-console);
}

.error {
  background: linear-gradient(180deg, rgba(232,90,79,0.14), rgba(232,90,79,0.06));
  color: #ffb8b0;
  border: 1px solid var(--signal-hot-dim);
  padding: 10px 14px;
  border-radius: var(--r-md);
  margin: 10px 0;
  font-size: 13px;
  font-family: var(--font-mono);
}
.error::before {
  content: "◆ ";
  color: var(--signal-hot);
}

.container { padding: 28px 32px; max-width: 1200px; margin: 0 auto; }

/* ==========================================================================
   App header
   ========================================================================== */

.app-header {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--ink-panel), var(--ink));
  border-bottom: 1px solid var(--ink-line);
  position: relative;
  z-index: 10;
  gap: 18px;
}
.app-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal-dim), transparent);
  opacity: 0.5;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
}
.brand .mark {
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
}
.brand .mark em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.brand .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding: 2px 6px;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
}

.stage-light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal);
  padding: 4px 10px;
  border: 1px solid var(--signal-dim);
  border-radius: var(--r-pill);
  background: var(--ink-sunken);
}
.stage-light .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--paper-soft);
}
.user-chip .name {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Login
   ========================================================================== */

.login-wrapper {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(90,139,255,0.07), transparent 55%),
    radial-gradient(900px 500px at 90% 100%, rgba(244,199,112,0.04), transparent 55%),
    var(--ink);
}

.login-card {
  width: 380px;
  max-width: 100%;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-console);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0.6;
}

.login-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
}
.login-card h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  font-weight: 400;
}
.login-card h2 em {
  color: var(--signal);
  font-style: italic;
}
.login-card .subtitle {
  font-size: 13px;
  color: var(--paper-dim);
  margin-bottom: 28px;
}
.login-card .form-row { margin-bottom: 14px; }
.login-card button[type=submit] {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 14px;
}
.login-card .footer-line {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--ink-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   Page head + podcast list
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 20px;
}
.page-head h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.page-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
}

.podcast-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.podcast-tile {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 220px;
  position: relative;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.podcast-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms var(--ease-out-back);
  z-index: 2;
}
.podcast-tile:hover { border-color: var(--ink-line); transform: translateY(-2px); }
.podcast-tile:hover::before { transform: scaleY(1); }

.podcast-tile .cover {
  height: 120px;
  background: linear-gradient(135deg, var(--signal-dim), var(--ink-raised));
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
}
.podcast-tile .logo-corner {
  position: absolute;
  left: 12px;
  bottom: -20px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--ink-sunken);
  border: 2px solid var(--ink-line);
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.podcast-tile .body {
  padding: 26px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.podcast-tile h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.podcast-tile .tagline {
  font-style: italic;
  color: var(--paper-soft);
  font-size: 13px;
}
.podcast-tile .slug {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-dim);
  letter-spacing: 0.05em;
}
.podcast-tile .bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-line);
}

.empty-state {
  background: var(--ink-raised);
  border: 1px dashed var(--ink-line);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  color: var(--paper-dim);
}
.empty-state .icon {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--signal);
  font-style: italic;
  line-height: 1;
  margin-bottom: 8px;
}

/* ==========================================================================
   Podcast editor (branding)
   ========================================================================== */

.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  height: calc(100vh - 54px);
  overflow: hidden;
}
.editor .main {
  overflow-y: auto;
  padding: 28px 36px;
}
.editor .side {
  background: var(--ink-panel);
  border-left: 1px solid var(--ink-line);
  overflow-y: auto;
  padding: 24px;
}

.section {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-console);
}
.section h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.section .section-head {
  margin-bottom: 16px;
}
.section .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 4px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.color-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-field input[type=color] { flex-shrink: 0; }
.color-field .hex {
  flex: 1;
  font-family: var(--font-mono);
  text-transform: lowercase;
}

.image-slot {
  position: relative;
  border: 1.5px dashed var(--ink-line);
  border-radius: var(--r-md);
  background: var(--ink-sunken);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.image-slot:hover { border-color: var(--signal-dim); background: var(--ink-raised); }
.image-slot .preview {
  width: 100%;
  max-height: 160px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100px;
}
.image-slot .preview.cover-aspect {
  aspect-ratio: 3 / 2;
  background-size: cover;
  border-radius: var(--r-sm);
}
.image-slot .preview.logo-aspect {
  width: 120px;
  height: 120px;
  background-size: contain;
}
.image-slot input[type=file] {
  width: 100%;
  font-size: 12px;
  color: var(--paper-soft);
  background: transparent;
  border: 0;
  padding: 0;
}
.image-slot input[type=file]::file-selector-button {
  background: var(--ink-raised);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 8px;
}
.image-slot .image-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* ==========================================================================
   Preview (live, uses branding variables)
   ========================================================================== */

.preview-wrap {
  position: sticky;
  top: 0;
}
.preview-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 10px;
}

.brand-preview {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(90,139,255,0.08),
    0 20px 50px -20px rgba(0,0,0,0.8);
  background: var(--brand-bg, var(--ink-raised));
  color: var(--brand-fg, var(--paper));
}
.brand-preview .hero {
  position: relative;
  padding: 32px 24px 28px;
  background:
    linear-gradient(135deg, var(--brand-secondary, var(--ink-raised)), var(--brand-primary, var(--signal))),
    var(--brand-cover, none);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.brand-preview .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
}
.brand-preview .hero-content {
  position: relative;
  z-index: 1;
}
.brand-preview .hero-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  margin-bottom: 14px;
  border: 2px solid rgba(255,255,255,0.5);
}
.brand-preview .hero-name {
  font-family: var(--brand-heading, var(--font-display));
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.brand-preview .hero-tagline {
  font-family: var(--brand-body, var(--font-ui));
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-style: italic;
}
.brand-preview .body {
  padding: 18px 22px 22px;
  background: var(--brand-secondary, var(--ink-raised));
  color: rgba(255,255,255,0.85);
}
.brand-preview .body .desc {
  font-family: var(--brand-body, var(--font-ui));
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.brand-preview .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--brand-accent, var(--signal));
  color: #111;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--brand-body, var(--font-ui));
}

.swatch-strip {
  display: flex;
  margin-top: 14px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--ink-line);
  height: 22px;
}
.swatch-strip .s {
  flex: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.5);
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 3, 0.72);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 500;
  animation: fade-in 150ms var(--ease);
}
.modal {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 28px 28px 22px;
  width: 440px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8), var(--shadow-console);
  animation: rise 180ms var(--ease-out-back);
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0.6;
}
.modal h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.modal .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 6px;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Scrollbars + utilities
   ========================================================================== */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-line);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--signal-dim); background-clip: padding-box; border: 2px solid transparent; }

.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--ink-line);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--ink-sunken);
  color: var(--paper-soft);
  letter-spacing: 0.06em;
}

.badge-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  color: var(--paper-dim);
  border-radius: var(--r-sm);
}

.save-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--signal);
  color: var(--ink-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--glow-signal);
  animation: rise 200ms var(--ease-out-back);
  z-index: 200;
  font-weight: 600;
}
.save-indicator.saving { background: var(--ink-raised); color: var(--signal); border: 1px solid var(--signal-dim); }

/* ==========================================================================
   Podcast view — mode tabs
   ========================================================================== */

.mode-tabs {
  display: inline-flex;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.mode-tabs button {
  background: transparent;
  color: var(--paper-dim);
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border: 0;
}
.mode-tabs button:hover { color: var(--paper); background: transparent; }
.mode-tabs button.active {
  background: var(--ink-raised);
  color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--ink-line);
}

.podcast-view-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 54px);
  overflow: hidden;
}
.podcast-view-wrap .page-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-panel);
}
.podcast-view-wrap .page-bar h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Kanban (episodes board)
   ========================================================================== */

.kanban {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 32px;
  display: flex;
  gap: 14px;
}

.kanban-col {
  flex: 1;
  min-width: 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.kanban-col.drag-over { border-color: var(--signal); background: rgba(90,139,255,0.06); }
.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-line);
  background: linear-gradient(180deg, var(--ink-raised), var(--ink-panel));
}
.kanban-col-head .name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 600;
}
.kanban-col-head .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--signal);
  padding: 1px 8px;
  border: 1px solid var(--signal-dim);
  border-radius: var(--r-pill);
}
.kanban-col-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-col .add-btn {
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: transparent;
  border: 1px dashed var(--ink-line);
  border-radius: var(--r-sm);
}
.kanban-col .add-btn:hover { color: var(--signal); border-color: var(--signal-dim); }

.ep-card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--r-sm);
  padding: 10px 12px 12px;
  cursor: grab;
  transition: border-color 120ms var(--ease), transform 120ms var(--ease), background 120ms var(--ease);
}
.ep-card:hover { border-color: var(--signal-dim); background: var(--ink-hover); }
.ep-card:active { cursor: grabbing; }
.ep-card.dragging { opacity: 0.4; }
.ep-card .ep-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--signal);
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 3px;
}
.ep-card .ep-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 6px;
}
.ep-card .ep-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-dim);
  letter-spacing: 0.04em;
  display: flex;
  gap: 10px;
}

/* Per-status accent dot + left border */
.kanban-col[data-status="idea"]       .kanban-col-head .dot { background: var(--paper-dim); }
.kanban-col[data-status="planning"]   .kanban-col-head .dot { background: var(--signal); }
.kanban-col[data-status="scripted"]   .kanban-col-head .dot { background: var(--signal-amber); }
.kanban-col[data-status="recorded"]   .kanban-col-head .dot { background: var(--signal-hot); }
.kanban-col[data-status="published"]  .kanban-col-head .dot { background: var(--signal-cool); }

/* ==========================================================================
   Episode detail
   ========================================================================== */

.episode-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  flex: 1;
  overflow: hidden;
}
.episode-detail .main {
  overflow-y: auto;
  padding: 24px 32px;
}
.episode-detail .side {
  background: var(--ink-panel);
  border-left: 1px solid var(--ink-line);
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Script editor */

.script-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.script-head .total {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--signal);
  padding: 4px 10px;
  background: rgba(90,139,255,0.08);
  border: 1px solid var(--signal-dim);
  border-radius: var(--r-pill);
}

.script-sections { display: flex; flex-direction: column; gap: 10px; }

.script-sec {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;
}
.script-sec:hover { border-color: var(--ink-line); }
.script-sec .sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.script-sec .pos-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--signal);
  background: rgba(90,139,255,0.08);
  border: 1px solid var(--signal-dim);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.script-sec .speaker-input {
  max-width: 180px;
  font-size: 12px;
  padding: 4px 8px;
}
.script-sec textarea {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  min-height: 62px;
}
.script-sec .notes-row {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.script-sec .notes-row input[type=text] {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  font-style: italic;
  color: var(--paper-soft);
}
.script-sec .dur-input {
  width: 90px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 8px;
}
.script-sec .sec-actions {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.script-sec .sec-actions button {
  padding: 4px 8px;
  font-size: 11px;
  min-width: 26px;
}

/* Ideas panel */

.ideas-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ideas-head .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.ideas-head .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--signal);
  padding: 2px 8px;
  border: 1px solid var(--signal-dim);
  border-radius: var(--r-pill);
}

.idea-form { display: flex; flex-direction: column; gap: 6px; }
.idea-form textarea {
  min-height: 60px;
  font-size: 13px;
}
.idea-form .idea-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.idea-form .counter {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-faint);
}

.idea-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.idea-card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 120ms var(--ease);
}
.idea-card:hover { border-color: var(--ink-line); }
.idea-card.accepted { border-color: var(--signal-cool-dim); }
.idea-card.rejected { opacity: 0.55; }
.idea-card .content { font-size: 13px; line-height: 1.5; }
.idea-card .row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.idea-card .author {
  font-family: var(--font-mono);
  color: var(--paper-dim);
  letter-spacing: 0.04em;
}
.idea-card .status-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.idea-card .status-pill.proposed { color: var(--paper-dim); border: 1px solid var(--ink-line); }
.idea-card .status-pill.accepted { color: var(--signal-cool); border: 1px solid var(--signal-cool-dim); background: rgba(141,179,106,0.1); }
.idea-card .status-pill.rejected { color: var(--signal-hot); border: 1px solid var(--signal-hot-dim); background: rgba(232,90,79,0.1); }

.idea-card .vote-btn {
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.idea-card .vote-btn.voted {
  background: var(--signal);
  color: var(--ink-deep);
  border-color: var(--signal);
}
.idea-card .idea-actions {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.idea-card .idea-actions button { padding: 3px 7px; font-size: 11px; }

.empty-pill {
  padding: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px dashed var(--ink-line);
  border-radius: var(--r-md);
}

/* Episode metadata grid */
.ep-meta-grid {
  display: grid;
  grid-template-columns: 1fr 160px 140px;
  gap: 12px;
  margin-bottom: 18px;
}
.ep-meta-grid input[type=date] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--ink-sunken);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  padding: 9px 12px;
  color-scheme: dark;
}

/* ==========================================================================
   Landing panel
   ========================================================================== */

.landing-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
}
.landing-wrap > .inner {
  max-width: 960px;
  margin: 0 auto;
}

.landing-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.tpl-chips { display: flex; gap: 4px; }
.tpl-chips button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  font-weight: 600;
}
.tpl-chips button.active {
  background: var(--signal);
  color: var(--ink-deep);
  border-color: var(--signal);
}

.landing-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-soft);
  padding: 6px 12px;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  flex: 1;
  overflow: hidden;
}
.landing-url .url-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.socials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.social-row { display: flex; align-items: center; gap: 10px; }
.social-row .plat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  min-width: 76px;
  font-weight: 600;
}
.social-row input { flex: 1; font-size: 12.5px; padding: 8px 10px; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  margin-bottom: 8px;
}
.toggle-row .label {
  flex: 1;
  font-size: 13px;
  color: var(--paper);
}
.toggle-row .hint { color: var(--paper-dim); font-size: 11px; margin-top: 2px; }
.toggle-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--signal); cursor: pointer; }

/* Team */

.team-list { display: flex; flex-direction: column; gap: 10px; }
.member-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 14px;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  align-items: center;
}
.member-card .avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-raised);
  border: 2px solid var(--ink-line);
  position: relative;
  cursor: pointer;
}
.member-card .avatar:hover { border-color: var(--signal-dim); }
.member-card .avatar .upload-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}
.member-card .avatar:hover .upload-hint { opacity: 1; }
.member-card .avatar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.member-card .fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.member-card .fields input[type=text] { font-size: 13px; padding: 5px 8px; }
.member-card .fields .name-input { font-family: var(--font-display); font-size: 17px; font-weight: 500; padding: 4px 8px; }

.member-card .actions { display: flex; flex-direction: column; gap: 4px; }

/* Episode links panel */

.links-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.link-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
}
.link-row .plat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
}
.link-row .url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-row a.url { color: var(--paper-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-line); }
.link-row a.url:hover { color: var(--signal); }

.link-add {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 8px;
  margin-top: 8px;
}
.link-add select, .link-add input[type=text] { font-size: 12.5px; padding: 7px 10px; }

/* ==========================================================================
   Integrations
   ========================================================================== */

button.settings-btn {
  padding: 6px 10px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--paper-soft);
}
button.settings-btn:hover { background: var(--ink-raised); color: var(--signal); border-color: var(--signal-dim); }

.sibling-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.sibling-card .name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  min-width: 80px;
  font-weight: 600;
}
.sibling-card .status-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.sibling-card .status-chip.ok    { background: rgba(141,179,106,0.14); color: var(--signal-cool); border: 1px solid var(--signal-cool-dim); }
.sibling-card .status-chip.err   { background: rgba(232,90,79,0.14);  color: var(--signal-hot);  border: 1px solid var(--signal-hot-dim); }
.sibling-card .status-chip.warn  { background: rgba(244,199,112,0.12); color: var(--signal-amber); border: 1px solid #6d5628; }
.sibling-card .status-chip.idle  { background: var(--ink-raised); color: var(--paper-dim); border: 1px solid var(--ink-line); }
.sibling-card input { flex: 1; font-family: var(--font-mono); font-size: 12px; padding: 7px 10px; }

.integration-panel {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.integration-panel .pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.integration-panel .pill.linked { background: rgba(141,179,106,0.14); color: var(--signal-cool); border: 1px solid var(--signal-cool-dim); }
.integration-panel .pill.unlinked { background: var(--ink-sunken); color: var(--paper-dim); border: 1px solid var(--ink-line); }
.integration-panel .pill.unreachable { background: rgba(244,199,112,0.12); color: var(--signal-amber); border: 1px solid #6d5628; }

.integration-panel .target-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-dim);
  letter-spacing: 0.08em;
}
.integration-panel a.target-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px dotted var(--signal-dim);
}