/* Chongqing VI: a quiet, premium dark workbench for the storyboard app. */
:root {
  --cq-bg: #0b1017;
  --cq-top: #0e151e;
  --cq-panel: #131c27;
  --cq-panel-2: #182331;
  --cq-panel-3: #1d2a39;
  --cq-line: #2a3a4b;
  --cq-line-soft: #20303e;
  --cq-text: #f4f7fb;
  --cq-muted: #8fa1b4;
  --cq-blue: #54b8ff;
  --cq-blue-soft: #173c59;
  --cq-orange: #ff9867;
  --cq-green: #80d58c;
}

html, body, .app { background: var(--cq-bg) !important; color: var(--cq-text) !important; }
body { font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif !important; font-size: 13px !important; }

/* Auth is a product entry state, so it gets a calm, centered workspace instead of a generic card. */
.app > .topbar { min-height: 68px !important; padding: 12px 28px !important; background: var(--cq-top) !important; border-bottom: 1px solid var(--cq-line-soft) !important; box-shadow: none !important; }
.app > .topbar .brand-mini { gap: 11px !important; color: var(--cq-text) !important; font-size: 16px !important; font-weight: 800 !important; }
.app > .topbar .site-logo { width: 36px !important; height: 36px !important; border-radius: 9px !important; border: 1px solid #38516a !important; box-shadow: 0 7px 18px rgba(0,0,0,.28) !important; }
.guest { max-width: 520px !important; margin: 12vh auto !important; padding: 34px 36px !important; background: var(--cq-panel) !important; border: 1px solid var(--cq-line) !important; border-radius: 12px !important; box-shadow: 0 24px 70px rgba(0,0,0,.28) !important; }
.guest h1 { margin-bottom: 7px !important; font-size: 24px !important; letter-spacing: -.02em; }
.guest p { margin-top: 0 !important; color: var(--cq-muted) !important; }
.auth-card { gap: 8px !important; }
.auth-card input, .auth-card select { height: 36px !important; min-width: 108px !important; background: #101821 !important; border: 1px solid #34485d !important; border-radius: 7px !important; color: var(--cq-text) !important; }
.auth-card .btn { min-height: 36px !important; border-radius: 7px !important; }

/* Workbench shell */
.topbar { min-height: 64px !important; padding: 10px 22px !important; background: var(--cq-top) !important; border-bottom: 1px solid var(--cq-line-soft) !important; box-shadow: none !important; }
.topbar .brand-mini { gap: 10px !important; color: var(--cq-text) !important; font-size: 15px !important; font-weight: 800 !important; }
.topbar .site-logo { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.topbar-tools { gap: 6px !important; }
.topbar-tools > .btn, .auth-card .btn { min-height: 32px !important; padding: 7px 11px !important; border-radius: 6px !important; font-size: 11px !important; }
.topbar-project-management { background: #141e29 !important; border: 1px solid var(--cq-line) !important; border-radius: 7px !important; }
/* Keep the project selector on the same baseline as the title-bar actions. */
.topbar-project-actions { align-items: center !important; gap: 8px !important; min-height: 34px !important; height: 34px !important; }
.topbar-project-actions > .topbar-project-select { flex: 0 1 190px !important; width: 190px !important; min-width: 150px !important; max-width: 240px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 28px 0 10px !important; line-height: 32px !important; box-sizing: border-box !important; }
.topbar-project-actions > .topbar-side-actions { align-items: center !important; height: 34px !important; margin: 0 !important; }
.topbar-project-actions > .topbar-side-actions .btn { height: 32px !important; min-height: 32px !important; margin: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; }
.topbar-project-actions > .autosave-control { align-items: center !important; height: 34px !important; margin: 0 !important; }
.topbar-project-actions > .autosave-time, .topbar-project-actions > .hint { align-self: center !important; margin: 0 !important; line-height: 1 !important; }

.layout { grid-template-columns: minmax(238px, var(--sidebar-width, 286px)) 8px minmax(0, 1fr) !important; min-height: calc(100vh - 64px) !important; background: var(--cq-bg) !important; }
.sidebar { top: 64px !important; height: calc(100vh - 64px) !important; background: #0e151e !important; border-right: 1px solid var(--cq-line-soft) !important; }
.layout-resizer { width: 8px !important; background: #0c131b !important; }
.layout-resizer::after { left: 3px !important; width: 2px !important; background: #2d4053 !important; }
.layout-resizer:hover::after, .layout-resizer:focus-visible::after { background: var(--cq-blue) !important; }
.workspace-nav { padding: 16px 12px !important; background: transparent !important; border-bottom: 1px solid var(--cq-line-soft) !important; }
.workspace-nav-label { margin: 0 11px 9px !important; color: #70869b !important; font-size: 10px !important; letter-spacing: .14em !important; font-weight: 800 !important; }
.workspace-nav-item, .workspace-nav-item:hover, .workspace-nav-item.active { min-height: 37px !important; margin: 2px 0 !important; padding: 8px 11px !important; border-radius: 5px !important; border-left: 2px solid transparent !important; background: transparent !important; color: #c3d0dd !important; font-size: 12px !important; font-weight: 600 !important; }
.workspace-nav-item:hover { background: #172331 !important; color: #fff !important; }
.workspace-nav-item.active { background: #16334b !important; border-left-color: var(--cq-blue) !important; color: #fff !important; }
.sidebar > .side-section:not(.project-management) { margin: 0 !important; padding: 15px 17px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--cq-line-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
.sidebar .section-title { color: #e5edf5 !important; font-size: 12px !important; }
.hint, .autosave, .autosave-time, .shot-meta, .slot-name, .file-name, .slot-alias { color: var(--cq-muted) !important; }
.project-management .project-row input, .project-management .project-select, .project-select, .api-row input { background: #101821 !important; border-color: #354b61 !important; color: var(--cq-text) !important; border-radius: 6px !important; }
.project-management .side-actions { gap: 5px !important; }
.project-management .side-actions .btn { min-height: 32px !important; padding: 6px 5px !important; border-radius: 6px !important; font-size: 11px !important; }

/* Cards stay dense and rectangular, with a cool blue edge that echoes Chongqing night signage. */
.main { padding: 23px 28px 46px !important; background: var(--cq-bg) !important; }
.main-head { margin-bottom: 15px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--cq-line-soft) !important; }
.main-head h1 { font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.02em; }
.main-head p { color: var(--cq-muted) !important; }
.top-tools { gap: 6px !important; }
.settings { gap: 7px !important; margin-bottom: 15px !important; }
.setting-card { min-height: 59px !important; padding: 10px 12px !important; background: var(--cq-panel) !important; border: 1px solid var(--cq-line) !important; border-radius: 7px !important; box-shadow: none !important; }
.setting-card span { color: var(--cq-muted) !important; font-size: 10px !important; }
.setting-card strong { color: #fff !important; font-size: 18px !important; }
.setting-card:nth-child(2) strong { color: var(--cq-green) !important; }
.setting-card:nth-child(3) strong { color: var(--cq-blue) !important; }
.shot-list { gap: 12px !important; }
.shot {
  background: var(--cq-panel) !important;
  border: 1px solid #4a6d89 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(84,184,255,.12), 0 12px 28px rgba(0,0,0,.22) !important;
}
.shot:hover {
  border-color: #6b9fc4 !important;
  box-shadow: 0 0 0 1px rgba(84,184,255,.24), 0 14px 32px rgba(0,0,0,.28) !important;
}
.shot.active-shot {
  border-color: var(--cq-blue) !important;
  box-shadow: 0 0 0 2px rgba(84,184,255,.24), 0 14px 34px rgba(0,0,0,.28) !important;
}
.shot-head { min-height: 48px !important; padding: 8px 12px !important; background: var(--cq-panel-2) !important; border-bottom: 1px solid var(--cq-line) !important; }
.shot-heading .shot-title { color: #f6f9fc !important; font-size: 14px !important; }
.shot-body { padding: 10px !important; background: var(--cq-panel) !important; }
.shot-panel { background: #17222e !important; border: 1px solid var(--cq-line) !important; border-radius: 6px !important; }
.panel-content { padding: 11px !important; }
.script-pane textarea { min-height: 164px !important; padding: 11px !important; background: #0f1720 !important; border: 1px solid #395069 !important; border-radius: 6px !important; color: var(--cq-text) !important; font-size: 13px !important; line-height: 1.6 !important; }
.script-pane textarea:focus { border-color: var(--cq-blue) !important; box-shadow: 0 0 0 3px rgba(84,184,255,.14) !important; }
.video-pane.shot-panel { background: #141f2b !important; border-color: #395069 !important; }
.video-pane .preview-box { border-color: #425b73 !important; border-radius: 6px !important; background: #091118 !important; }

.btn { min-height: 34px !important; padding: 8px 12px !important; background: var(--cq-panel-3) !important; border: 1px solid #3a5066 !important; border-radius: 6px !important; color: #eff5fa !important; box-shadow: none !important; }
.btn:hover { background: #25384a !important; border-color: #5b7892 !important; transform: translateY(-1px); }
.btn.primary { background: #247cb5 !important; border-color: #56b9f7 !important; color: #fff !important; box-shadow: 0 5px 16px rgba(36,124,181,.25) !important; }
.btn.primary:hover { background: #3096d3 !important; border-color: #8bd3ff !important; }
.btn.purple { background: #294e61 !important; border-color: #58b7b0 !important; color: #d7fffa !important; }
.btn.danger { background: #3a2028 !important; border-color: #7a4a56 !important; color: #ffadb7 !important; }
.status { background: #101923 !important; border: 1px solid var(--cq-line) !important; border-radius: 6px !important; color: var(--cq-muted) !important; }
.status.ok { background: #15271f !important; border-color: #326147 !important; color: #9be7a0 !important; }
.status.error { background: #2d1a22 !important; border-color: #713947 !important; color: #ffadb7 !important; }

.asset-area .media-slot-row .tile { background: #0f1720 !important; border-color: #3b5269 !important; border-radius: 6px !important; }
.asset-library-inline .project-select { background: #16334b !important; border-color: #3e8cbe !important; color: #dff4ff !important; }
.toast { background: #f1f5f8 !important; color: #111b25 !important; border-radius: 6px !important; }

@media (max-width: 760px) {
  .topbar { padding: 10px 14px !important; }
  .layout { display: block !important; }
  .sidebar { position: static !important; height: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--cq-line-soft) !important; }
  .main { padding: 16px 12px 32px !important; }
  .guest { margin: 40px 14px !important; padding: 26px 20px !important; }
  .topbar-project-actions { gap: 6px !important; }
  .topbar-project-actions > .topbar-project-select { flex-basis: 164px !important; width: 164px !important; min-width: 140px !important; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }