:root {
  --midnight: #1F2A3A;
  --midnight-deep: #121C29;
  --ivory: #FBF9F3;
  --slate: #5B6B7F;
  --slate-deep: #435466;
  --gold: #C9A96B;
  --gold-deep: #AA813F;
  --stone: #D9D6CE;
  --ink: #1F2A3A;
  --muted: #687589;
  --paper: #FBF9F3;
  --card: #FFFEFA;
  --line: #D9D6CE;
  --sage: #5B6B7F;
  --sage-dark: #1F2A3A;
  --soft: #F1EEE7;
  --red: #A44A3F;
  --shadow: 0 18px 48px rgba(31, 42, 58, .14);
  --display: Georgia, "Times New Roman", serif;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(201,169,107,.10), transparent 26rem),
    var(--ivory);
  color: var(--midnight);
}

.topbar {
  height: 88px;
  padding: 0 max(28px, 5vw);
  color: var(--ivory);
  border-bottom: 1px solid rgba(217,214,206,.18);
  background: rgba(18, 28, 41, .96);
  box-shadow: 0 8px 30px rgba(18,28,41,.18);
}

.brand { gap: 14px; font-family: var(--display); font-size: 25px; font-weight: 500; letter-spacing: -.025em; }
.brand-mark {
  width: 52px;
  height: 58px;
  padding: 4px;
  border: 1px solid rgba(201,169,107,.68);
  border-radius: 9px 9px 5px 5px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(31,42,58,.05);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.topbar .brand-mark { position: relative; padding: 0; overflow: hidden; }
.topbar .brand-mark img { position: absolute; left: 50%; top: 50%; width: 124%; height: 124%; max-width: none; transform: translate(-50%, -50%); object-position: center; }
.brand-word { position: relative; display: flex; align-items: flex-end; gap: 0; padding-bottom: 15px; line-height: .95; }
.brand-keryx, .brand-studio { display: block; flex: 0 0 auto; text-transform: none; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.brand-keryx { width: 62px; height: 30px; color: var(--ivory); background-color: #FBF9F3; mask-image: url('/static/keryx-wordmark-mask.png'); -webkit-mask-image: url('/static/keryx-wordmark-mask.png'); }
.brand-keryx { position: relative; z-index: 2; }
.brand-studio { position: relative; z-index: 1; width: 65px; height: 21px; margin-left: -2px; color: #A8B2C0; background-color: #A8B2C0; mask-image: url('/static/keryx-studio-mask.png'); -webkit-mask-image: url('/static/keryx-studio-mask.png'); }
.brand small {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  color: var(--gold);
  font: 700 8px/1.2 var(--sans);
  letter-spacing: .24em;
  margin-top: 7px;
}
.topbar-actions { gap: 18px; }
.local-pill {
  color: var(--ivory);
  border-color: rgba(201,169,107,.48);
  background: rgba(91,107,127,.25);
  letter-spacing: .04em;
}
.local-pill span { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,107,.14); }
.logout-button { color: var(--ivory); border-left: 1px solid rgba(217,214,206,.25); border-radius: 0; padding-left: 18px; }
.logout-button:hover { color: var(--gold); }

main { max-width: 1260px; padding-top: 0; }
.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 76px max(32px, calc((100vw - 1196px) / 2)) 82px;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .72fr);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
  color: var(--ivory);
  background:
    radial-gradient(circle at 78% 25%, rgba(91,107,127,.30), transparent 28rem),
    linear-gradient(118deg, var(--midnight-deep), var(--midnight) 58%, #263548);
  border-bottom: 1px solid rgba(201,169,107,.45);
}
.hero .eyebrow { color: var(--stone); }
.hero h1 {
  max-width: 800px;
  font-family: var(--display);
  font-size: clamp(50px, 6.3vw, 82px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-shadow: 0 3px 20px rgba(0,0,0,.18);
}
.hero h1 em { color: var(--gold); font-weight: 400; }
.lede { color: #E4E3DE; font-family: var(--sans); font-size: 18px; max-width: 700px; }
.hero-actions { gap: 14px; padding-bottom: 0; }
.hero-actions button { min-height: 54px; letter-spacing: .025em; }

.eyebrow { color: var(--slate); letter-spacing: .24em; }
#home-view > .section-heading { margin-top: 42px; }
.section-heading h2, .dialog-heading h2, .transcript-toolbar h2, .next-panel h2 {
  color: var(--midnight);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.025em;
}
.section-heading > div > .eyebrow::after,
.dialog-heading > div > .eyebrow::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--gold);
}

button, input, select, textarea { font-family: var(--sans); }
.primary {
  color: var(--ivory);
  border-color: var(--gold-deep);
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  box-shadow: 0 8px 20px rgba(170,129,63,.18);
}
.primary:hover { background: linear-gradient(135deg, #936E34, #BA9553); }
.secondary {
  color: var(--midnight);
  border-color: var(--slate);
  background: rgba(251,249,243,.72);
}
.secondary:hover { color: var(--ivory); background: var(--slate); }
.hero .secondary { color: var(--ivory); border-color: rgba(251,249,243,.75); background: transparent; }
.hero .secondary:hover { color: var(--midnight); background: var(--ivory); }
.text-button, .back-button { color: var(--slate-deep); }
.text-button:hover, .back-button:hover { color: var(--gold-deep); }

.project-year > summary {
  color: var(--midnight);
  border-color: var(--stone);
  font-family: var(--display);
  font-weight: 400;
}
.project-year > summary::marker { color: var(--gold); }
.project-year > summary small { color: var(--slate); }
.project-grid { gap: 20px; }
.project-card {
  min-height: 178px;
  color: var(--ivory);
  border: 1px solid rgba(251,249,243,.13);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), transparent 42%),
    linear-gradient(135deg, var(--slate-deep), var(--slate));
  box-shadow: 0 10px 25px rgba(31,42,58,.10);
}
.project-card:hover { border-color: var(--gold); box-shadow: 0 18px 38px rgba(31,42,58,.20); }
.project-card h3 { color: var(--ivory); font-family: var(--display); font-size: 23px; font-weight: 400; }
.project-card .eyebrow, .project-card .meta { color: #DCE0E5; }
.project-card .stage { background: rgba(18,28,41,.36); }
.project-card .stage i { border-right-color: rgba(251,249,243,.28); }
.archived-card { color: var(--midnight); background: #ECE9E1; border-color: #C9C4B8; }
.archived-card h3 { color: var(--midnight); }
.archived-card .eyebrow, .archived-card .meta { color: var(--muted); }
.empty-card { border-radius: 12px; background: rgba(255,254,250,.76); }

.project-header { padding-top: 28px; }
.project-header h1 { font-family: var(--display); font-weight: 400; color: var(--midnight); }
.project-subtitle { color: var(--slate); }
.project-name-row::after { content: ""; width: 54px; height: 2px; background: var(--gold); }
.actions button { border-color: var(--stone); background: #FFFEFA; color: var(--midnight); }
.actions button:hover { border-color: var(--gold); }
.actions button.accent { border-color: var(--gold-deep); background: var(--midnight); }

.workflow { gap: 14px; }
.workflow div {
  border-color: var(--stone);
  border-radius: 10px;
  background: #FFFEFA;
  box-shadow: 0 6px 20px rgba(31,42,58,.045);
}
.workflow strong { font-family: var(--display); color: var(--midnight); font-weight: 400; }
.workspace-tabs { border-color: var(--stone); }
.workspace-tabs button { color: var(--slate); letter-spacing: .025em; }
.workspace-tabs button:hover { color: var(--midnight); }
.workspace-tabs button.active { color: var(--midnight); box-shadow: inset 0 -3px var(--gold); }

.preview-panel, .next-panel, .transcript-sheet, .clip-row, .settings-cards button, .output-card {
  border-color: var(--stone);
  background: #FFFEFA;
  box-shadow: 0 8px 26px rgba(31,42,58,.055);
}
.preview-panel, .next-panel, .transcript-sheet { border-radius: 12px; }
.source-video, .output-card video { background: var(--midnight-deep); }
.privacy-note { border-color: var(--stone); }
.transcript-segment { border-color: #E9E5DC; }
.transcript-segment:hover { background: #F3EFE5; }
.transcript-segment time, .transcript-time, .transcript-timing-button { color: var(--gold-deep); }
.clip-number { color: var(--gold-deep); }
.clip-row blockquote { color: var(--slate-deep); border-color: var(--gold); }
.clip-actions button { color: var(--midnight); border-color: var(--stone); background: var(--ivory); }
.clip-actions button:hover { border-color: var(--gold); }
.clip-actions button.primary { border-color: var(--gold-deep); background: var(--midnight); }
.badges span { background: #EEEAE0; }
.badges .effect-badge { color: var(--midnight); background: rgba(201,169,107,.24); }
.settings-cards span { color: var(--gold-deep); }
.settings-cards button:hover { border-color: var(--gold); }
.output-card a { color: var(--slate-deep); }

dialog {
  color: var(--midnight);
  border: 1px solid rgba(201,169,107,.48);
  border-radius: 12px;
  background: var(--ivory);
  box-shadow: 0 35px 110px rgba(18,28,41,.48);
}
dialog::backdrop { background: rgba(18,28,41,.80); }
.dialog-heading { background: var(--ivory); border-color: var(--stone); }
.icon-button { color: var(--slate); }
.icon-button:hover { color: var(--gold-deep); }
label { color: var(--slate-deep); letter-spacing: .015em; }
input, select, textarea {
  color: var(--midnight);
  border-color: #C8C5BC;
  background: #FFFEFA;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(201,169,107,.23); border-color: var(--gold-deep); }
.tabs, .editor-section, .effect-field-grid { border-color: var(--stone); }
.tab.active { color: var(--midnight); border-color: var(--gold); }
.toggle, .collection-row { background: #F0EDE5; border-color: var(--stone); }
.tooltip-help { color: var(--slate); border-color: var(--slate); background: var(--ivory); }
.tooltip-help:hover, .tooltip-help:focus-visible { color: var(--ivory); border-color: var(--gold-deep); background: var(--midnight); }
.advanced-editor summary, .effect-row summary { color: var(--slate-deep); }
.connection-card, .account-row, .destination, .broadcast-platform { border-color: var(--stone); }
.connection-card h3 { font-family: var(--display); font-weight: 400; }
.audio-picker-button { color: var(--midnight); border-color: var(--slate); background: var(--ivory); }
.audio-picker-button:hover { background: #EEEAE0; }
.audio-preview-controls { background: #F0EDE5; }
.audio-preview-controls button { color: var(--midnight); }
.audio-preview-controls button:hover { background: rgba(201,169,107,.24); }
.pause-review-section .collapse-section, .quote-field-heading #preview-clip-quote, .effect-card-actions .collapse-effect { color: var(--slate-deep); }
.pause-review-section .collapse-section:hover, .quote-field-heading #preview-clip-quote:hover { background: rgba(201,169,107,.20); }

.jobs-panel {
  color: var(--ivory);
  border: 1px solid rgba(201,169,107,.38);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--midnight), var(--midnight-deep));
  box-shadow: 0 20px 60px rgba(18,28,41,.35);
}
.jobs-panel > .section-heading { background: transparent; }
.jobs-panel h2 { color: var(--ivory); }
.jobs-panel .eyebrow { color: var(--gold); }
.job { border-color: rgba(217,214,206,.20); }
.job p, .job-controls small { color: #BFC7D1; }
.job-controls button { border-color: rgba(201,169,107,.45); background: rgba(91,107,127,.38); }
.job-controls button:hover { background: var(--slate); }
.jobs-toggle { border-color: rgba(201,169,107,.55); }
.job-progress { background: rgba(91,107,127,.48); }
.output-card.job-target { outline-color: var(--gold); box-shadow: 0 0 0 6px rgba(201,169,107,.24); }

.danger-button { border-color: #84362E; background: #A44A3F; }
.danger-text { color: #963D33 !important; border-color: #C99189 !important; }
#clip-render.secondary {
  color: var(--ivory);
  border-color: var(--gold-deep);
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  box-shadow: 0 8px 20px rgba(170,129,63,.18);
}
#clip-render.secondary:hover { color: var(--ivory); border-color: #936E34; background: linear-gradient(135deg, #936E34, #BA9553); }
#project-view.clip-scroll-active > .back-button { align-self: flex-start; flex: none; }

@media (max-width: 760px) {
  .topbar { height: 76px; }
  .brand-mark { width: 42px; height: 48px; }
  .brand { font-size: 21px; }
  .brand-keryx { width: 54px; height: 26px; }
  .brand-studio { width: 56px; height: 18px; }
  .brand small, .local-pill { display: none; }
  .logout-button { padding-left: 10px; border-left: 0; }
  .hero { padding: 54px 20px 58px; gap: 30px; }
  .hero h1 { font-size: 50px; }
  #home-view > .section-heading { margin-top: 30px; }
  .project-header h1 { font-size: 39px; }
}

/* Sign-in and first-run setup */
body:has(.auth-shell) {
  color: var(--ivory);
  background:
    radial-gradient(circle at 18% 24%, rgba(91,107,127,.30), transparent 30rem),
    linear-gradient(125deg, var(--midnight-deep), var(--midnight) 62%, #2A394C);
}
.auth-shell { position: relative; }
.auth-shell::before {
  content: "SAME MESSAGE. A WIDER REACH.";
  position: absolute;
  left: clamp(35px,7vw,100px);
  bottom: 34px;
  color: var(--gold);
  font: 700 9px/1 var(--sans);
  letter-spacing: .30em;
}
.auth-intro .brand-mark { width: 96px; height: 104px; padding: 6px; margin-bottom: 28px; }
.auth-intro .eyebrow { color: var(--gold); }
.auth-intro h1 { color: var(--ivory); font-family: var(--display); font-weight: 400; }
.auth-intro h1 em { color: var(--gold); font-weight: 400; }
.auth-intro > p:last-child { color: #D6D9DD; font-family: var(--sans); font-size: 17px; }
.auth-card {
  color: var(--midnight);
  border: 1px solid rgba(201,169,107,.50);
  border-radius: 12px;
  background: var(--ivory);
  box-shadow: 0 28px 90px rgba(0,0,0,.32);
}
.auth-card h2 { color: var(--midnight); font-family: var(--display); font-weight: 400; }
.auth-card .eyebrow { color: var(--gold-deep); }
.auth-card input { color: var(--midnight); border-color: #C8C5BC; background: #FFFEFA; }
.auth-card input:focus { outline-color: rgba(201,169,107,.28); border-color: var(--gold-deep); }
.auth-card button { border-color: var(--gold-deep); background: linear-gradient(135deg, var(--gold-deep), var(--gold)); }
.auth-card button:hover { background: linear-gradient(135deg, #936E34, #BA9553); }
.auth-card .local-note { border-color: var(--stone); }

@media (max-width: 850px) {
  .auth-shell::before { display: none; }
  .auth-intro .brand-mark { width: 66px; height: 72px; margin-bottom: 16px; }
}