/* Savorads responsive production grid
 * A layout-only visual layer: controls, IDs, data attributes and application logic stay unchanged.
 * Desktop 12 columns / tablet 8 columns / compact 4 columns — 18px gutter throughout.
 */
:root {
  --font: "PingFang SC", "苹方", "Microsoft YaHei", "微软雅黑", sans-serif;
  --grid-margin: 36px;
  --grid-gutter: 18px;
  --tool-radius: 9px;
  --tool-radius-sm: 7px;
  --tool-blue: #155eef;
  --tool-blue-hover: #004eea;
  --tool-blue-soft: rgba(21, 94, 239, 0.10);
  --tool-focus: rgba(21, 94, 239, 0.24);
  --tool-line: #e1e5ec;
  --tool-line-strong: #cbd2de;
  --tool-ink: #17191f;
  --tool-muted: #667085;
  --tool-panel: #ffffff;
  --tool-canvas: #f7f8fa;
  --tool-row: #fbfcfe;
  --tool-row-alt: #f6f8fb;
  --tool-dark: #101114;
  --tool-dark-panel: #17191f;
  --tool-dark-row: #1d2027;
  --tool-dark-line: #30343d;
}

body.theme-light,
body.theme-light #app {
  background: #ffffff;
  color: var(--tool-ink);
}

body.theme-dark,
body.theme-dark #app {
  background: var(--tool-dark);
  color: #f5f7fa;
}

body,
body.theme-light,
body.theme-dark {
  background-image: none;
}

/* 首页沿用既有的项目入口与最近项目层级，只统一为当前的网格视觉。 */
.splash {
  padding: 24px var(--grid-margin);
  background: var(--tool-canvas);
  background-image: none;
}

.home-shell {
  width: min(1368px, 100%);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--grid-gutter);
}

.home-hero,
.activity-panel {
  background: var(--tool-panel);
  border: 1px solid var(--tool-line);
  border-radius: var(--tool-radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
}

/* Decorative colour blocks stay behind the existing homepage content. */
.home-hero::before,
.home-hero::after,
.activity-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-hero::before {
  z-index: 0;
  top: -54px;
  right: -48px;
  width: 188px;
  height: 188px;
  background: #155eef;
  opacity: 0.11;
}

.home-hero::after {
  z-index: 0;
  right: 38px;
  bottom: -32px;
  width: 76px;
  height: 76px;
  background: #fdb022;
  opacity: 0.17;
}

.activity-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.activity-panel::before {
  z-index: 0;
  top: 0;
  left: 0;
  width: 104px;
  height: 5px;
  background: #155eef;
}

.home-hero > *,
.activity-panel > * { position: relative; z-index: 1; }

.splash-brand {
  color: var(--tool-ink);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  font-family: var(--font);
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.12;
}

.splash-desc { color: var(--tool-muted); }

.activity-panel { padding: 20px; }
.activity-head strong { color: var(--tool-ink); font-size: 18px; }
.activity-sub,
.home-primary-meta,
.splash-note { color: var(--tool-muted); }
.activity-list { scrollbar-color: #98a2b3 transparent; }
.activity-list::-webkit-scrollbar-track { background: transparent; }
.activity-list::-webkit-scrollbar-thumb { background: #c5cad3; border-radius: 4px; }
.activity-list::-webkit-scrollbar-thumb:hover { background: #98a2b3; }
.activity-item.project-card {
  border-color: var(--tool-line);
  background: var(--tool-row);
  border-radius: var(--tool-radius-sm);
}
.activity-item.project-card:hover {
  border-color: var(--tool-blue);
  background: #f5f8ff;
}
.project-card-main:hover { background: transparent; }
.activity-empty { background: transparent; color: var(--tool-muted); }

body.theme-dark .splash { background: var(--tool-dark); }
body.theme-dark .home-hero,
body.theme-dark .activity-panel { background: var(--tool-dark-panel); border-color: var(--tool-dark-line); }
body.theme-dark .home-hero::before { opacity: 0.23; }
body.theme-dark .home-hero::after { opacity: 0.22; }
body.theme-dark .splash-brand,
body.theme-dark .activity-head strong { color: #f5f7fa; }
body.theme-dark .splash-desc,
body.theme-dark .activity-sub,
body.theme-dark .home-primary-meta,
body.theme-dark .splash-note,
body.theme-dark .activity-empty { color: #aeb5c2; }
body.theme-dark .activity-item.project-card { background: var(--tool-dark-row); border-color: var(--tool-dark-line); }
body.theme-dark .activity-item.project-card:hover { background: #202633; border-color: #528bff; }

/* App shell: the outer alignment always comes from the same responsive grid. */
.topbar {
  min-height: 64px;
  height: auto;
  padding: 8px var(--grid-margin);
  gap: var(--grid-gutter);
  background: var(--tool-panel);
  border-bottom: 1px solid var(--tool-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-dark .topbar {
  background: var(--tool-dark);
  border-color: var(--tool-dark-line);
}

.topbar-left,
.topbar-right,
.toolbar-left,
.toolbar-right {
  gap: 8px;
}

.brand {
  width: 30px;
  height: 30px;
  border-radius: var(--tool-radius-sm);
  background: var(--tool-blue);
  box-shadow: none;
  font-size: 10px;
}

.back-btn {
  border-color: transparent;
  background: transparent;
  border-radius: var(--tool-radius-sm);
}

.project-title {
  max-width: 260px;
  border-radius: var(--tool-radius-sm);
  font-size: 15px;
  font-weight: 720;
}

.project-title:hover,
.project-title:focus {
  background: var(--tool-row-alt);
}

.file-badge {
  padding: 4px 8px;
  border-radius: 5px;
  border-color: var(--tool-line);
  background: transparent;
  color: var(--tool-muted);
}

.file-badge.saved,
.file-badge.dirty {
  background: transparent;
  border-color: transparent;
}

.file-badge.saved { color: #067647; }
.file-badge.dirty { color: #b54708; }

.steps {
  height: 100%;
  gap: 24px;
  color: var(--tool-muted);
  font-size: 14px;
}

.step {
  height: 48px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  color: var(--tool-muted);
  background: transparent;
  font-weight: 580;
}

.step:hover {
  border-color: transparent;
  background: transparent;
  color: var(--tool-ink);
}

.step.active {
  border: 0;
  border-bottom: 2px solid var(--tool-blue);
  background: transparent;
  color: var(--tool-blue);
  font-weight: 750;
}

.step.active::after,
.step-sep { display: none; }

body.theme-dark .step { color: #aeb5c2; }
body.theme-dark .step:hover { color: #ffffff; }
body.theme-dark .step.active { color: #8ab4ff; border-color: #8ab4ff; }

/* Unified controls: square, quiet, and legible at production density. */
.btn,
.icon-btn,
.btn-icon {
  min-height: 34px;
  border-radius: var(--tool-radius-sm);
  box-shadow: none;
}

.btn {
  padding: 7px 12px;
  border-color: var(--tool-line);
  background: var(--tool-panel);
  color: var(--tool-ink);
  font-weight: 600;
}

.btn:hover,
.btn.outline:hover,
.btn.ghost:hover {
  border-color: var(--tool-line-strong);
  background: var(--tool-row-alt);
  color: var(--tool-ink);
}

.btn.ghost,
.btn.outline {
  border-color: transparent;
  background: transparent;
  color: #475467;
}

.btn.primary,
.btn.accent {
  background: var(--tool-blue);
  border-color: var(--tool-blue);
  color: #ffffff;
  box-shadow: none;
}

.btn.primary:hover,
.btn.accent:hover {
  background: var(--tool-blue-hover);
  border-color: var(--tool-blue-hover);
  filter: none;
}

.btn.accent.split {
  border-left-color: rgba(255, 255, 255, 0.38);
  margin-left: -8px;
}

#btnAddShot.btn.accent { padding-right: 12px; }

.icon-btn {
  width: 34px;
  height: 34px;
  border-color: var(--tool-line);
  background: var(--tool-panel);
  color: var(--tool-ink);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.step:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--tool-focus);
  outline-offset: 1px;
}

body.theme-dark .btn,
body.theme-dark .icon-btn,
body.theme-dark .btn-icon {
  border-color: var(--tool-dark-line);
  background: var(--tool-dark-panel);
  color: #f5f7fa;
}

body.theme-dark .btn.ghost,
body.theme-dark .btn.outline { background: transparent; color: #c7cdd8; }
body.theme-dark .btn:hover,
body.theme-dark .btn.outline:hover,
body.theme-dark .btn.ghost:hover { background: var(--tool-dark-row); color: #ffffff; }
body.theme-dark .btn.primary,
body.theme-dark .btn.accent { background: #2970ff; border-color: #2970ff; color: #ffffff; }

/* Toolbar and table are intentionally open bands rather than floating glass cards. */
.toolbar,
.storyboard-toolbar {
  min-height: 62px;
  padding: 12px var(--grid-margin);
  gap: var(--grid-gutter);
  background: var(--tool-panel);
  border-bottom: 1px solid var(--tool-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-dark .toolbar,
body.theme-dark .storyboard-toolbar {
  background: var(--tool-dark);
  border-color: var(--tool-dark-line);
}

.page-title { font-size: 19px; font-weight: 760; letter-spacing: -0.02em; }
.shot-count { color: var(--tool-muted); }
.dirty-dot { color: #f79009; }

.dropdown {
  border-radius: var(--tool-radius);
  border-color: var(--tool-line);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.13);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dropdown button:hover { background: #f2f4f7; }
body.theme-dark .dropdown { background: #20232b; border-color: var(--tool-dark-line); box-shadow: 0 18px 34px rgba(0,0,0,.32); }
body.theme-dark .dropdown button:hover { background: #2b303a; }

.table-wrap {
  padding: 18px var(--grid-margin) 48px;
  background: var(--tool-canvas);
}

.shot-table {
  border: 1px solid var(--tool-line);
  border-radius: var(--tool-radius);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.shot-table thead th {
  background: #f8fafc;
  color: #475467;
  padding: 11px 14px 11px 10px;
  border-bottom-color: var(--tool-line);
  border-right: 1px solid var(--tool-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shot-table tbody td {
  background: #ffffff;
  border-bottom-color: var(--tool-line);
  border-right: 1px solid var(--tool-line);
  padding: 9px 10px;
}

.shot-table tbody tr:nth-child(even) td { background: var(--tool-row); }
.shot-table tbody tr:hover td { background: #f4f7ff; }
.shot-table tbody tr.selected td { background: #eff4ff; box-shadow: inset 0 1px 0 var(--tool-blue), inset 0 -1px 0 var(--tool-blue); }
.shot-table tbody tr.selected td:first-child { box-shadow: inset 1px 0 0 var(--tool-blue), inset 0 1px 0 var(--tool-blue), inset 0 -1px 0 var(--tool-blue); }
.shot-table tbody tr.selected td:last-child { box-shadow: inset -1px 0 0 var(--tool-blue), inset 0 1px 0 var(--tool-blue), inset 0 -1px 0 var(--tool-blue); }

body.theme-dark .table-wrap { background: #121419; }
body.theme-dark .shot-table { background: var(--tool-dark-panel); border-color: var(--tool-dark-line); box-shadow: none; }
body.theme-dark .shot-table thead th { background: #1a1d24; color: #c7cdd8; border-color: var(--tool-dark-line); }
body.theme-dark .shot-table tbody td { background: var(--tool-dark-panel); border-color: var(--tool-dark-line); }
body.theme-dark .shot-table tbody tr:nth-child(even) td { background: #1b1e25; }
body.theme-dark .shot-table tbody tr:hover td { background: #232833; }
body.theme-dark .shot-table tbody tr.selected td { background: rgba(41,112,255,.16); }

/* Storyboard, schedule and call-sheet use the same canvas/panel grammar. */
.storyboard-view,
body.theme-light .storyboard-view { background: var(--tool-canvas); }
body.theme-dark .storyboard-view { background: #121419; }
.storyboard-stage { padding: 18px var(--grid-margin); }
.storyboard-status { background: var(--tool-panel); color: var(--tool-muted); border-color: var(--tool-line); padding-inline: var(--grid-margin); }
.storyboard-status b { color: var(--tool-ink); }
body.theme-dark .storyboard-status { background: var(--tool-dark); border-color: var(--tool-dark-line); color: #aeb5c2; }
body.theme-dark .storyboard-status b { color: #f5f7fa; }

.shooting-plan-wrapper {
  gap: var(--grid-gutter);
  padding: 18px var(--grid-margin);
  background: var(--tool-canvas);
}

.shot-pool-panel,
.scene-groups-panel,
.scene-group,
.callsheet-editor-card,
.cs-side-summary,
.cs-subsection,
.cs-scene-plan,
.timeline-item {
  background: var(--tool-panel);
  border-color: var(--tool-line);
  border-radius: var(--tool-radius);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.panel-header,
.scene-group-header,
.scene-group-stats { border-color: var(--tool-line); background: transparent; }
.panel-header .count { background: var(--tool-blue); border-radius: 5px; }
.shot-card,
.scene-shot-card-full { background: #ffffff; border-color: var(--tool-line); border-radius: var(--tool-radius-sm); box-shadow: none; }
.shot-card:hover,
.scene-shot-card-full:hover { border-color: #98a2b3; background: #f8faff; box-shadow: 0 3px 10px rgba(16,24,40,.08); }
.scene-group-drop-zone { background: #fbfcfe; border-color: #cbd5e1; border-radius: var(--tool-radius-sm); }
.scene-group-drop-zone.drag-over,
.scene-group.drag-target { background: #eff4ff; border-color: var(--tool-blue); }
.scene-groups-container { gap: var(--grid-gutter); scrollbar-color: #98a2b3 transparent; }

.callsheet-wizard { padding: 18px var(--grid-margin) 36px; background: var(--tool-canvas); }
.callsheet-pro-shell { width: min(100%, 1368px); gap: var(--grid-gutter); }
.callsheet-editor-card { padding: 22px; }
.cs-kicker { color: var(--tool-blue); }
.cs-preset-bar { background: #f5f8ff; border-color: #dbe7ff; border-radius: var(--tool-radius-sm); }
.cs-chip { border-radius: 5px; background: #ffffff; border-color: var(--tool-line); color: #475467; }
.cs-chip.accent { background: #eff4ff; border-color: #b2ccff; color: #175cd3; }

body.theme-dark .shooting-plan-wrapper,
body.theme-dark .callsheet-wizard { background: #121419; }
body.theme-dark .shot-pool-panel,
body.theme-dark .scene-groups-panel,
body.theme-dark .scene-group,
body.theme-dark .callsheet-editor-card,
body.theme-dark .cs-side-summary,
body.theme-dark .cs-subsection,
body.theme-dark .cs-scene-plan,
body.theme-dark .timeline-item { background: var(--tool-dark-panel); border-color: var(--tool-dark-line); box-shadow: none; }
body.theme-dark .panel-header,
body.theme-dark .scene-group-header,
body.theme-dark .scene-group-stats { border-color: var(--tool-dark-line); }
body.theme-dark .shot-card,
body.theme-dark .scene-shot-card-full { background: #1b1e25; border-color: var(--tool-dark-line); }
body.theme-dark .shot-card:hover,
body.theme-dark .scene-shot-card-full:hover { background: #242936; border-color: #4c5568; }
body.theme-dark .scene-group-drop-zone { background: #14171d; border-color: #414754; }
body.theme-dark .cs-preset-bar { background: rgba(41,112,255,.12); border-color: rgba(132,173,255,.3); }
body.theme-dark .cs-chip { background: #1c2028; border-color: #3c4350; color: #d0d5dd; }

/* Breakpoints: 12-column desktop → 8-column tablet → 4-column compact. */
@media (max-width: 1279px) {
  :root { --grid-margin: 24px; }
  .steps { gap: 17px; }
  .topbar { padding-inline: var(--grid-margin); }
  .callsheet-pro-shell { grid-template-columns: minmax(0, 1fr) 220px; }
  .scene-group { flex-basis: clamp(310px, 50vw, 410px); width: clamp(310px, 50vw, 410px); }
}

@media (max-width: 959px) {
  :root { --grid-margin: 18px; }
  .steps { display: flex; }
  .topbar { position: static; align-items: flex-start; }
  .topbar-left { flex: 1 1 100%; }
  .topbar-right { margin-left: auto; }
  .steps { order: 3; width: 100%; overflow-x: auto; gap: 20px; }
  .step { flex: 0 0 auto; }
  .toolbar { position: static; align-items: flex-start; }
  .toolbar-left,
  .toolbar-right { flex-wrap: wrap; }
  .toolbar-right { justify-content: flex-start; }
  .shooting-plan-wrapper { height: auto; min-height: calc(100vh - 180px); flex-direction: column; overflow: visible; }
  .shot-pool-panel { width: 100%; min-width: 0; max-height: 260px; }
  .scene-groups-panel { min-height: 540px; }
  .callsheet-pro-shell { grid-template-columns: 1fr; }
  .cs-side-summary { position: static; }
}

@media (max-width: 860px) {
  .home-shell { grid-template-columns: 1fr; }
  .activity-panel { min-height: 280px; max-height: none; }
}

@media (max-width: 639px) {
  :root { --grid-margin: 12px; --grid-gutter: 12px; }
  .topbar { padding-block: 8px; }
  .brand,
  .file-badge,
  .back-btn { display: none; }
  .project-title { max-width: calc(100vw - 24px); padding-left: 0; }
  .topbar-right { width: 100%; margin-left: 0; overflow-x: auto; }
  .topbar-right .btn { flex: 0 0 auto; }
  .toolbar { padding-block: 10px; }
  .page-title { font-size: 18px; }
  .table-wrap,
  .storyboard-stage,
  .shooting-plan-wrapper,
  .callsheet-wizard { padding-inline: var(--grid-margin); }
  .storyboard-status { padding-inline: var(--grid-margin); }
  .scene-groups-panel { min-height: 480px; }
  .scene-group { flex-basis: calc(100vw - 24px); width: calc(100vw - 24px); }
  .callsheet-editor-card { padding: 14px; }
  .splash { padding-block: 16px; }
  .home-hero,
  .activity-panel { padding: 18px; }
}