:root {
  --ink: #172338;
  --muted: #748197;
  --green: #d8b34f;
  --line: #dfe5ed;
  --paper: #f3f5f8;
}
body { background: var(--paper); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
aside { background: #101a2a; border-color: #29364b; color: #f5f7fb; }
.brand { color: white; font-size: 15px; letter-spacing: .4px; }
.brand-icon { background: var(--green); color: #101a2a; border-radius: 10px; font-size: 11px; font-weight: 900; padding: 8px; }
.brand-name { font-weight: 850; }
.brand i { color: #d8b34f; font-size: 8px; letter-spacing: 2px; }
.workspace { border-color: #34435a; background: #172338; color: #f7f8fb; }
.workspace-icon, .profile > span { background: #d8b34f; color: #172338; }
.workspace small, .profile small, .sidebar-bottom p, nav button, .nav-label { color: #aab6c8; }
nav button.active { background: #24344d; color: #f4d77d; }
.draft-pill { color: #d8b34f; }
.profile { border-color: #34435a; }
main { background: var(--paper); }
header { background: #fff; border-color: var(--line); }
.private { color: #172338; border-color: #d8b34f; text-decoration: none; }
.eyebrow, .subheading > span, .tag { color: #8a6815; }
.card { border-color: var(--line); box-shadow: 0 5px 18px #1723380a; }
.tile { background: #f9f3df; color: #8a6815; }
.tile.mint { background: #edf1f6; color: #425875; }
.primary { background: #d8b34f; border-color: #c5a13f; color: #172338; }
.primary:hover { background: #e4c66e; }
.steps .selected { color: #172338; }
.steps .selected em { background: #d8b34f; border-color: #d8b34f; }
.combination-total { background: #f8f3e4; border-color: #eadfbf; color: #5a4b25; }
.styles button.chosen { border-color: #c5a13f; background: #fbf8ef; }
.badge { background: #f8f3e4; color: #725a18; }
.tip { background: #fff; border-color: var(--line); }
.tip > span, .tip a { color: #8a6815; }
.output-note > span { color: #8a6815; }
.script-row, .campaign-card { align-items: center; }
.campaign-list { display: grid; gap: 12px; margin: 14px 0 24px; }
.campaign-card { display: flex; gap: 12px; }
.campaign-card > div { flex: 1; min-width: 0; }
.campaign-card h3 { margin-bottom: 5px; }
.campaign-card p { font-size: 11px; margin: 4px 0; overflow-wrap: anywhere; }
.campaign-card .badge { white-space: nowrap; }
.campaign-empty { border: 1px dashed var(--line); border-radius: 10px; padding: 18px; color: var(--muted); }
.generation-method { max-width: 440px; }
.generation-notice { border-left: 3px solid #d8b34f; padding: 10px 12px; background: #fbf8ef; color: #60532d; font-size: 11px; line-height: 1.5; }
.caption-word { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; margin-right: .24em; }
.caption-word.visible { opacity: 1; transform: translateY(0); }
.caption-word.highlight { color: var(--green); }
.caption.minimal .caption-word.highlight { color: inherit; }
.caption.karaoke .caption-word.highlight { background: var(--green); color: #172338; border-radius: 3px; padding: 0 3px; }
#caption .caption-space { display: inline-block; width: .18em; }
@media (max-width: 620px) {
  aside { background: #101a2a; }
  .form-row { flex-wrap: wrap; }
  .form-row label { min-width: min(100%, 190px); }
  .brand { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .caption-word { transition: none; }
}