/* Original GRVKN palette from the app theme; layout follows the existing Studio. */
:root {
  color-scheme: dark;
  --paper: #070908;
  --surface: #111512;
  --raised: #191e1a;
  --ink: #ffffff;
  --muted: #a7b0aa;
  --line: #303730;
  --control-line: #68745e;
  --accent: #b7ff3c;
  --green: var(--accent);
  --mint: var(--accent);
  --orange: var(--accent);
}

::selection { color: var(--paper); background: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: var(--accent); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; }
.sidebar { background: var(--paper); color: var(--ink); border-right: 1px solid var(--line); }
.brand { gap: 12px; padding: 0 5px; color: var(--ink); }
.brand-logo { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.brand strong { font-weight: 900; letter-spacing: .025em; }
.brand small { color: var(--accent); letter-spacing: .3em; }
.nav-kicker, .sidebar-promise, .workspace-person small,
.workspace-person > .icon { color: var(--muted); }
.nav-item { color: var(--muted); }
.nav-item:hover { background: var(--raised); color: var(--ink); }
.nav-item.active { background: #b7ff3c18; color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
.nav-dot, .status-dot { background: var(--accent); }
.nav-count { background: var(--raised); color: var(--ink); }
.orbit-mark { color: var(--accent); }
.sidebar-promise strong { color: var(--ink); font-weight: 700; }
.workspace-person { border-top-color: var(--line); }
.avatar { background: var(--raised); color: var(--accent); border-color: #424e39; }

.topbar { background: var(--surface); }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobile-brand { display: none; flex-shrink: 0; }
.mobile-brand img { display: block; }
.breadcrumb strong { color: var(--ink); }
.breadcrumb span { color: var(--muted); }
.prototype-tag { border-color: var(--line); background: var(--raised); color: var(--muted); }
.eyebrow { color: var(--accent); }
.page-title p:not(.eyebrow) { color: var(--muted); }
.button.primary { background: var(--accent); color: var(--paper); font-weight: 700; }
.button.primary:hover { background: #ccff7c; }
.button.secondary, .button.quiet { border-color: var(--control-line); background: var(--raised); color: var(--ink); }
.button.secondary:hover, .button.quiet:hover { background: #253023; border-color: var(--accent); }
.demo-notice { background: var(--surface); border-color: var(--line); }
.demo-notice .icon { color: var(--accent); }
.demo-notice p { color: var(--muted); }
.demo-notice strong { color: var(--ink); }

.editor-card { background: var(--surface); border-color: var(--line); box-shadow: 0 15px 45px #00000030; }
.stepper { border-bottom-color: var(--line); }
.step-button { color: var(--muted); }
.step-button:not(:last-child):after { background: var(--line); }
.step-number { border-color: var(--control-line); }
.step-button.active { color: var(--accent); }
.step-button.active .step-number { background: var(--accent); color: var(--paper); border-color: var(--accent); font-weight: 700; }
.step-button.complete .step-number { background: #b7ff3c18; color: var(--accent); border-color: var(--control-line); }
.pill { background: #b7ff3c14; color: var(--accent); }
.pill.premium { background: var(--accent); color: var(--paper); font-weight: 700; }
.pill.soft { background: var(--raised); color: var(--muted); }
.section-description, .optional, .field-help, .step-hint,
.below-editor, .storyboard-intro span, .scene-editor-head small,
.scene-editor-body .voice-label { color: var(--muted); }
.field > span, .field > label { color: #e0e5e1; }
input:not([type=checkbox]):not([type=range]):not([type=color]), select, textarea {
  background: var(--raised); border-color: var(--control-line); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
.input-with-icon > .icon { color: var(--muted); }
.company-source { background: var(--raised); border-color: var(--control-line); }
.source-icon { background: #b7ff3c14; color: var(--accent); }
.company-source p, .research-result p, .research-row { color: var(--muted); }
.research-result { background: var(--raised); border-color: var(--line); }
.checkline { color: var(--muted); }
.checkline strong { color: var(--ink); }
.editor-actions { border-top-color: var(--line); }

.preview-heading .status-dot { background: var(--accent); }
.phone { background: var(--paper); border-color: #414b3b; box-shadow: 0 18px 45px #00000060; }
.phone-camera { background: var(--paper); }
.play-button { background: var(--raised); color: var(--ink); border-color: var(--control-line); }
.preview-controls input { accent-color: var(--accent); }
.preview-controls > span, .preview-meta { color: var(--muted); }
.label-status { color: var(--accent); }
.label-status.off { color: var(--muted); }
.scene-thumb-art { background: linear-gradient(135deg, #1e2a18, #526140); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.scene-thumb:nth-child(2) .scene-thumb-art { background: linear-gradient(135deg, #516239, #182016); }
.scene-thumb:nth-child(3) .scene-thumb-art { background: linear-gradient(135deg, #29351f, #76874f); }
.scene-thumb:nth-child(4) .scene-thumb-art { background: linear-gradient(135deg, #3a4b29, #070908); }
.scene-thumb.active .scene-thumb-art { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.scene-thumb > span:last-child { color: var(--muted); }
.preview-empty { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
.preview-empty .icon { color: var(--accent); }
.preview-empty p { color: var(--muted); }

.goal-card { border-color: var(--control-line); background: var(--raised); color: var(--muted); }
.goal-card:hover { border-color: var(--accent); color: var(--ink); }
.goal-card.active { background: #b7ff3c14; border-color: var(--accent); color: var(--accent); }
.visual-upload { background: var(--raised); border-color: var(--control-line); }
.visual-upload .icon { color: var(--accent); }
.visual-upload p { color: var(--muted); }
.image-tile { border-color: var(--control-line); }
.image-tile button { background: var(--paper); }
.brand-row { color: var(--muted); }
.brand-row input[type=color] { background: var(--raised); border-color: var(--control-line); }
.scene-editor { border-color: var(--control-line); }
.scene-editor-head { background: var(--raised); }
.scene-editor-head > span:first-child { background: #b7ff3c18; color: var(--accent); }
.note { background: var(--raised); color: var(--muted); }
.review-box { border-color: var(--line); background: var(--raised); }
.review-row + .review-row { border-top-color: var(--line); }
.review-row span:first-child { color: var(--muted); }
.label-box { background: #b7ff3c0d; border-color: #52693c; }
.label-box > .icon { color: var(--accent); }
.label-box p { color: var(--muted); }
.progress-box { background: var(--raised); color: var(--ink); }
.progress-track { background: var(--line); }
.progress-track span { background: var(--accent); }
.dropzone { background: var(--raised); border-color: var(--control-line); }
.dropzone.dragging { background: #b7ff3c14; border-color: var(--accent); }
.dropzone > .icon { color: var(--accent); }
.dropzone p, .selected-file p { color: var(--muted); }
.selected-file { background: var(--raised); border-color: var(--line); }
.selected-file > .icon { color: var(--accent); }
.selected-file button { border-color: var(--control-line); background: var(--surface); color: var(--ink); }
.upload-toggle { border-color: var(--line); background: var(--raised); }
.upload-toggle .checkline { color: var(--ink); }
.upload-toggle p { color: var(--muted); }

.empty-projects, .project-card, .concept-card { background: var(--surface); border-color: var(--line); }
.empty-projects .icon { color: var(--accent); }
.empty-projects p, .project-content p, .project-actions button:last-child { color: var(--muted); }
.project-art { background: linear-gradient(130deg, #344728, #191e1a 65%); color: var(--ink); border-bottom: 1px solid var(--line); }
.project-art > span { color: var(--accent); }
.concept-hero { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.concept-hero h2 { color: var(--ink); }
.concept-hero .eyebrow { color: var(--accent); }
.concept-hero p { color: var(--muted); }
.concept-stamp { color: var(--accent); border-color: var(--accent); }
.concept-card > p, .concept-flow p, .phase-grid p { color: var(--muted); }
.concept-flow > div > span { background: #b7ff3c18; color: var(--accent); }
.architecture-list > div { border-color: var(--line); background: var(--raised); color: var(--muted); }
.architecture-list strong { color: var(--ink); }
.page-footer { border-top-color: var(--line); color: var(--muted); }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; }
.footer-brand img { display: block; }
.toast { background: var(--raised); border-color: var(--accent); color: var(--ink); box-shadow: 0 12px 32px #00000050; }
.noscript { background: var(--paper); color: var(--ink); }

@media (max-width: 980px) {
  .brand { padding: 0; }
  .brand-logo { width: 38px; height: 38px; }
}
@media (max-width: 500px) {
  .sidebar { background: var(--surface); border-right: 0; border-top: 1px solid var(--line); }
  .mobile-brand { display: block; }
  .topbar-left { gap: 8px; }
  .breadcrumb { gap: 6px; }
  .nav-item.active { box-shadow: inset 0 2px var(--accent); }
  .footer-brand { gap: 6px; }
}