/* Unified workspace navigation: views stay crisp and always return to storyboard. */
body, button, input, textarea, select {
  font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Compact top-bar actions use the shared Chongqing night-workbench VI. */
.topbar-tools { gap: 5px !important; align-items: center !important; }
.topbar-tools > a.btn, .auth-card .btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 9px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  line-height: 20px !important;
  box-shadow: none !important;
}
.topbar-tools > a.btn.ghost, .auth-card .btn.ghost {
  background: #1b2a39 !important;
  border-color: #49647e !important;
  color: #dceeff !important;
}
.topbar-tools > a.btn.ghost:hover, .auth-card .btn.ghost:hover {
  background: #24445d !important;
  border-color: #69c5ff !important;
}
.auth-card.signed { gap: 5px !important; }
.auth-user-trigger {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  min-height: 30px !important; padding: 3px 8px !important;
  border: 1px solid #49647e !important; border-radius: 5px !important;
  background: #162534 !important; color: #f2f8ff !important; cursor: pointer;
  font: inherit !important; text-align: left !important;
}
.auth-user-trigger:hover { background: #203d55 !important; border-color: #69c5ff !important; }
.auth-user-trigger .tiny { color: #8fa9bf !important; font-size: 10px !important; line-height: 1 !important; }
.auth-user-trigger strong { color: #fff !important; font-size: 12px !important; line-height: 1 !important; }
.auth-member-level {
  padding: 2px 6px !important; border: 1px solid #347a79 !important;
  border-radius: 4px !important; background: #173b3d !important;
  color: #8de0d2 !important; font-size: 10px !important; line-height: 1.2 !important;
}
@media (max-width: 760px) {
  .topbar-tools > a.btn, .auth-card .btn, .auth-user-trigger { min-height: 32px !important; height: 32px !important; }
  .auth-user-trigger { flex: 1 1 auto !important; justify-content: center !important; }
}

/* A view is a focused surface, never a blurred backdrop. */
.main.settings-modal-open::before,
.main.script-copy-modal-open::before,
.main.batch-toolbar-modal-open::before {
  background: rgba(5, 9, 15, .18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.main.settings-modal-open > :not(.global-settings-page):not(.settings-modal-backdrop),
.main.script-copy-modal-open > :not(.script-copy-panel):not(.script-copy-modal-backdrop),
.main.batch-toolbar-modal-open > :not(.batch-toolbar-modal):not(.batch-toolbar-modal-backdrop) {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  user-select: auto !important;
}
.custom-model-backdrop, .reference-library-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.main.settings-modal-open > .settings-modal-backdrop,
.main.script-copy-modal-open > .script-copy-modal-backdrop,
.main.batch-toolbar-modal-open > .batch-toolbar-modal-backdrop {
  background: transparent !important;
}

/* Make the six first-level actions one consistent, compact navigation rail. */
.workspace-nav-item {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  min-height: 40px !important;
  border-radius: 6px !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}
.workspace-nav-item:hover { background: #172d40 !important; }
.workspace-nav-item.active {
  background: #16415d !important;
  border-left-color: #54b8ff !important;
  color: #fff !important;
}

/* Video surface: deeper frame, stronger contrast and clearer control rhythm. */
.video-pane.shot-panel {
  background: #121e2a !important;
  border: 1px solid #49647e !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.video-pane .panel-heading {
  background: #1b2b3b !important;
  border-bottom: 1px solid #3a526a !important;
}
.video-pane .preview-box {
  aspect-ratio: 16 / 9 !important;
  min-height: 220px !important;
  border: 1px solid #5b7893 !important;
  border-radius: 6px !important;
  background: #071019 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.22) !important;
}
.video-pane .preview-box video { background: #071019 !important; object-fit: contain !important; }
.video-controls { gap: 8px !important; margin-top: 10px !important; }
.video-controls .duration select {
  height: 36px !important; min-width: 76px !important; width: 76px !important;
  border-radius: 6px !important; background: #1a2a39 !important; border-color: #49647e !important;
}
.video-controls .generate-btn {
  min-height: 36px !important; border-radius: 6px !important;
  background: #2a8ac7 !important; border-color: #69c5ff !important;
  box-shadow: 0 5px 14px rgba(42,138,199,.25) !important;
}
.video-controls .video-secondary-btn {
  min-height: 36px !important; border-radius: 6px !important;
  background: #213447 !important; border-color: #4b647b !important;
}
.video-pane .bar { height: 6px !important; background: #203446 !important; }
.video-pane .bar i { background: linear-gradient(90deg,#54b8ff,#79d8c1) !important; }
@media (max-width: 760px) {
  .video-pane .preview-box { min-height: 180px !important; }
}

/* Shared detail-page close control. Reserve the top-right corner so it never
   overlaps headings, labels, or form fields. */
.main.settings-open > .global-settings-page > .settings-detail-back { display: none !important; }
.main.settings-open > .global-settings-page,
.generation-queue-page { position: relative !important; }
/* The script detail panel is positioned by workspace-nav.js. Keeping it in
   normal flow pushes the panel below the storyboard, especially on mobile. */
.main.script-copy-modal-open > .script-copy-panel { position: absolute !important; }
.main.settings-open > .global-settings-page { padding-top: 72px !important; }
.generation-queue-page { padding-top: 72px !important; }
.main.script-copy-modal-open > .script-copy-panel { padding-top: 72px !important; }
.main.settings-open > .global-settings-page > .settings-modal-close,
.main.script-copy-modal-open > .script-copy-panel > .script-copy-modal-close,
.generation-queue-page .generation-queue-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 30 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #52647b !important;
  border-radius: 7px !important;
  background: #202b39 !important;
  color: #f7f9fc !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.main.settings-open > .global-settings-page > .settings-modal-close:hover,
.main.script-copy-modal-open > .script-copy-panel > .script-copy-modal-close:hover,
.generation-queue-page .generation-queue-close:hover {
  border-color: #8fa3bb !important;
  background: #2b394a !important;
}
@media (max-width: 760px) {
  body .main.script-copy-modal-open > .script-copy-panel { position: fixed !important; }
  .main.settings-open > .global-settings-page > .settings-modal-close,
  .main.script-copy-modal-open > .script-copy-panel > .script-copy-modal-close,
  .generation-queue-page .generation-queue-close { top: 12px !important; right: 12px !important; }
}