/* Oliver Studios operator frontend — shared design tokens + components.
   Warm monochrome, editorial/minimal, no framework. One file, all 3 pages. */

:root {
  /* Color */
  --bone: #FBFBFA;
  --surface: #FFFFFF;
  --border: #EAEAEA;
  --ink: #2F3437;
  --ink-muted: #787774;
  --accent: #111111;
  --accent-hover: #333333;

  --pale-red: #FDEBEC;      --pale-red-text: #9F2F2D;
  --pale-blue: #E1F3FE;     --pale-blue-text: #1F6C9F;
  --pale-green: #EDF3EC;    --pale-green-text: #346538;
  --pale-yellow: #FBF3DB;   --pale-yellow-text: #956400;

  /* Type */
  --font-sans: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-serif: 'Iowan Old Style', 'Palatino', 'Georgia', serif;
  --font-mono: 'SF Mono', 'Menlo', monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 20px;
  --text-xl: 28px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --radius: 8px;
  --radius-sm: 4px;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-serif); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
p { margin: 0; }
a { color: inherit; }

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* ── Nav tabs ─────────────────────────────────────────────────────────── */

.nav-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.nav-tabs .brand { font-family: var(--font-serif); font-size: var(--text-lg); letter-spacing: -0.02em; }
.nav-tabs .tabs { display: flex; gap: var(--space-2); }
.nav-tabs .tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink-muted);
}
.nav-tabs .tab:hover { background: var(--bone); color: var(--ink); }
.nav-tabs .tab.active { background: var(--ink); color: var(--surface); }
.sub-tabs .tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.sub-tabs .tab:hover { background: var(--bone); color: var(--ink); }
.sub-tabs .tab.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.nav-tabs .field-inline {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bone);
  font-size: var(--text-sm);
  color: var(--ink);
  max-width: 180px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
.card-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); }
.card-meta { font-size: var(--text-xs); color: var(--ink-muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, transform 100ms ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--surface); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: var(--bone); }
.btn-danger { background: var(--pale-red); color: var(--pale-red-text); border-color: var(--pale-red); }
.btn-danger:hover { background: #F9DBDC; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Badges ───────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.badge-blue { background: var(--pale-blue); color: var(--pale-blue-text); }
.badge-green { background: var(--pale-green); color: var(--pale-green-text); }
.badge-yellow { background: var(--pale-yellow); color: var(--pale-yellow-text); }
.badge-red { background: var(--pale-red); color: var(--pale-red-text); }

/* ── Form inputs ──────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-muted); }
.field textarea { resize: vertical; min-height: 72px; }

/* ── Video preview ────────────────────────────────────────────────────── */

.video-frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 420px;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.video-frame video { width: 100%; height: 100%; object-fit: contain; }
.video-frame.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  background: var(--pale-yellow);
  color: var(--pale-yellow-text);
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
}
.toast {
  background: var(--ink);
  color: var(--surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.toast.error { background: var(--pale-red-text); }

/* ── Misc ─────────────────────────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--ink-muted); font-size: var(--text-sm); }
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--ink-muted); }
.summary-strip { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); }
.summary-tile { flex: 1; }
.summary-tile .num { font-family: var(--font-serif); font-size: var(--text-xl); }
.summary-tile .label { font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.token-drawer { display: none; padding: var(--space-3); background: var(--bone); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: var(--space-2); }
.token-drawer.open { display: block; }
.token-drawer input { width: 220px; }