:root {
  color-scheme: light;
  --ink: #1f2520;
  --muted: #6a736c;
  --paper: #f6f4ef;
  --panel: #fffdf8;
  --soft: #f0ebe2;
  --line: #ddd4c7;
  --brand: #2d6b57;
  --brand-dark: #174536;
  --green: #2d6b57;
  --accent: #bf6a34;
  --warning: #986900;
  --danger: #9a341e;
  --shadow: 0 8px 24px rgba(61, 48, 34, 0.08);
  --tech-bg: #070d18;
  --tech-panel: rgba(10, 28, 51, 0.82);
  --tech-line: rgba(77, 218, 255, 0.34);
  --tech-cyan: #28d8ff;
  --tech-mint: #4ff2c2;
  --tech-blue: #1d6fff;
}

/* Image workspace refresh: scoped to the image module so video/ops keep their own surfaces. */
#legacyWorkbench.image-lab-mode {
  --image-bg: #06111f;
  --image-panel: rgba(9, 23, 43, 0.88);
  --image-panel-strong: rgba(12, 31, 58, 0.94);
  --image-card: rgba(246, 250, 255, 0.96);
  --image-card-soft: rgba(235, 242, 252, 0.92);
  --image-line: rgba(125, 176, 232, 0.28);
  --image-line-bright: rgba(80, 169, 255, 0.58);
  --image-blue: #4da3ff;
  --image-blue-strong: #2e7df0;
  --image-cyan: #7dd6ff;
  --image-ink: #0d1726;
  --image-muted: #687789;
  --image-amber: #ffb84d;
  --image-red: #dc5145;
  width: min(1580px, calc(100vw - 24px));
  gap: 16px;
}

body:has(#legacyWorkbench.image-lab-mode:not([hidden])) {
  background:
    linear-gradient(rgba(80, 146, 218, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 146, 218, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(29, 86, 157, 0.26), transparent 34%),
    linear-gradient(135deg, #071323 0%, #091a2f 48%, #07101c 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  color: #eaf4ff;
}

#legacyWorkbench.image-lab-mode .workbench-topbar,
#legacyWorkbench.image-lab-mode .side-nav,
#legacyWorkbench.image-lab-mode .composer,
#legacyWorkbench.image-lab-mode .tasks,
#legacyWorkbench.image-lab-mode .metric-card {
  border-color: var(--image-line);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

#legacyWorkbench.image-lab-mode .workbench-topbar {
  background: linear-gradient(90deg, rgba(10, 24, 44, 0.96), rgba(11, 42, 76, 0.82));
}

#legacyWorkbench.image-lab-mode .side-nav {
  background: linear-gradient(180deg, rgba(7, 18, 34, 0.98), rgba(7, 23, 42, 0.94));
  scrollbar-color: rgba(125, 214, 255, 0.62) rgba(255, 255, 255, 0.06);
}

#legacyWorkbench.image-lab-mode .side-brand h2,
#legacyWorkbench.image-lab-mode .nav-title,
#legacyWorkbench.image-lab-mode .section-head h2 {
  color: #f4f8ff;
}

#legacyWorkbench.image-lab-mode .eyebrow,
#legacyWorkbench.image-lab-mode .zone-title,
#legacyWorkbench.image-lab-mode .template-status strong {
  color: var(--image-cyan);
}

#legacyWorkbench.image-lab-mode .side-copy,
#legacyWorkbench.image-lab-mode .nav-desc,
#legacyWorkbench.image-lab-mode .side-nav label,
#legacyWorkbench.image-lab-mode .side-nav .subnav-label,
#legacyWorkbench.image-lab-mode .section-note {
  color: rgba(228, 241, 255, 0.68);
}

#legacyWorkbench.image-lab-mode .nav-groups {
  gap: 12px;
}

#legacyWorkbench.image-lab-mode .nav-item {
  border-color: rgba(125, 214, 255, 0.28);
  background: rgba(10, 31, 58, 0.72);
  color: #eff7ff;
}

#legacyWorkbench.image-lab-mode .nav-item.active {
  border-color: var(--image-line-bright);
  background: rgba(45, 115, 196, 0.26);
}

#legacyWorkbench.image-lab-mode .admin-panel,
#legacyWorkbench.image-lab-mode.admin-mode .admin-panel {
  border-color: rgba(125, 176, 232, 0.34);
  background: rgba(10, 31, 58, 0.52);
  color: #edf6ff;
}

#legacyWorkbench.image-lab-mode .admin-panel summary,
#legacyWorkbench.image-lab-mode .admin-panel .hint,
#legacyWorkbench.image-lab-mode .admin-status {
  color: rgba(228, 241, 255, 0.72);
}

#legacyWorkbench.image-lab-mode .admin-mode #queueTitle::after,
#legacyWorkbench.image-lab-mode.admin-mode #queueTitle::after {
  border-color: rgba(255, 184, 77, 0.45);
  background: rgba(255, 184, 77, 0.16);
  color: #8a5a0a;
}

#legacyWorkbench.image-lab-mode .subnav-items {
  gap: 10px;
  padding: 0 0 10px;
}

#legacyWorkbench.image-lab-mode .image-subnav-group {
  border: 1px solid rgba(125, 214, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  gap: 7px;
  padding: 9px;
}

#legacyWorkbench.image-lab-mode .image-subnav-group-title {
  color: rgba(177, 211, 246, 0.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 2px;
}

#legacyWorkbench.image-lab-mode .subnav-item {
  border-color: rgba(125, 214, 255, 0.24);
  background: rgba(4, 15, 29, 0.78);
  color: #dceeff;
}

#legacyWorkbench.image-lab-mode .subnav-item.active {
  border-color: rgba(125, 214, 255, 0.74);
  background: linear-gradient(90deg, rgba(46, 125, 240, 0.32), rgba(54, 189, 255, 0.14));
  color: #ffffff;
}

#legacyWorkbench.image-lab-mode .workspace {
  display: grid;
  gap: 16px;
}

#legacyWorkbench.image-lab-mode .hero {
  border: 1px solid rgba(125, 214, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(10, 31, 58, 0.9), rgba(10, 50, 86, 0.56));
  margin-bottom: 0;
  padding: 18px;
}

#legacyWorkbench.image-lab-mode .hero h1 {
  color: #ffffff;
  font-size: 34px;
}

#legacyWorkbench.image-lab-mode .hero .subhead {
  color: rgba(229, 242, 255, 0.72);
  font-size: 14px;
}

#legacyWorkbench.image-lab-mode .image-dashboard {
  gap: 10px;
  margin-bottom: 0;
}

#legacyWorkbench.image-lab-mode .metric-card {
  background: rgba(244, 248, 253, 0.96);
  border-radius: 8px;
}

#legacyWorkbench.image-lab-mode .metric-card.primary {
  background: linear-gradient(135deg, rgba(228, 239, 255, 0.98), rgba(250, 253, 255, 0.94));
  border-color: rgba(125, 214, 255, 0.42);
}

#legacyWorkbench.image-lab-mode .metric-card span,
#legacyWorkbench.image-lab-mode .metric-card small,
#legacyWorkbench.image-lab-mode .subhead,
#legacyWorkbench.image-lab-mode .meta,
#legacyWorkbench.image-lab-mode .hint {
  color: var(--image-muted);
}

#legacyWorkbench.image-lab-mode .metric-card strong {
  color: #0b1f37;
}

#legacyWorkbench.image-lab-mode .composer,
#legacyWorkbench.image-lab-mode .tasks {
  background: rgba(247, 250, 255, 0.97);
  border-color: rgba(146, 181, 220, 0.42);
}

#legacyWorkbench.image-lab-mode label {
  color: #152640;
}

#legacyWorkbench.image-lab-mode input,
#legacyWorkbench.image-lab-mode select,
#legacyWorkbench.image-lab-mode textarea {
  border-color: rgba(133, 157, 188, 0.48);
  background: #ffffff;
  color: var(--image-ink);
}

#legacyWorkbench.image-lab-mode input:focus,
#legacyWorkbench.image-lab-mode select:focus,
#legacyWorkbench.image-lab-mode textarea:focus {
  border-color: var(--image-blue);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
}

#legacyWorkbench.image-lab-mode button {
  background: var(--image-blue-strong);
  color: #ffffff;
}

#legacyWorkbench.image-lab-mode button.ghost,
#legacyWorkbench.image-lab-mode .ghost,
#legacyWorkbench.image-lab-mode .output-actions a {
  border-color: rgba(77, 126, 188, 0.34);
  background: #ffffff;
  color: #174878;
}

#legacyWorkbench.image-lab-mode .filter-chip.active {
  border-color: rgba(77, 163, 255, 0.46);
  background: rgba(77, 163, 255, 0.12);
  color: #174878;
}

#legacyWorkbench.image-lab-mode .material-action {
  background: var(--image-blue-strong);
  border-color: var(--image-blue-strong);
}

#legacyWorkbench.image-lab-mode .material-action.secondary,
#legacyWorkbench.image-lab-mode .material-generated,
#legacyWorkbench.image-lab-mode .upload-count {
  border-color: rgba(77, 126, 188, 0.34);
  background: #ffffff;
  color: #174878;
}

#legacyWorkbench.image-lab-mode .upload-zone,
#legacyWorkbench.image-lab-mode .template-status,
#legacyWorkbench.image-lab-mode .binding-preview {
  border-color: rgba(146, 181, 220, 0.42);
  background: rgba(241, 246, 253, 0.92);
}

#legacyWorkbench.image-lab-mode .upload-preview:empty,
#legacyWorkbench.image-lab-mode .binding-preview:empty {
  min-height: 0;
  padding: 0;
}

#legacyWorkbench.image-lab-mode .preview-card img,
#legacyWorkbench.image-lab-mode .input-ref img,
#legacyWorkbench.image-lab-mode .output img {
  border-color: rgba(115, 145, 182, 0.34);
  background: #ffffff;
}

#legacyWorkbench.image-lab-mode .task {
  border-color: rgba(146, 181, 220, 0.42);
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(22, 46, 80, 0.08);
}

#legacyWorkbench.image-lab-mode .task.collapsed {
  padding-bottom: 12px;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-body {
  display: none;
}

#legacyWorkbench.image-lab-mode .task.archived {
  background: #eef3fa;
}

#legacyWorkbench.image-lab-mode .task-title {
  color: #071a30;
}

#legacyWorkbench.image-lab-mode .status {
  background: #e8edf4;
  color: #1d3b60;
}

#legacyWorkbench.image-lab-mode .status.success {
  background: #e7f0ff;
  color: #1859a6;
}

#legacyWorkbench.image-lab-mode .status.failed {
  background: #fde8e4;
  color: var(--image-red);
}

#legacyWorkbench.image-lab-mode .status.running,
#legacyWorkbench.image-lab-mode .status.queued,
#legacyWorkbench.image-lab-mode .status.planning,
#legacyWorkbench.image-lab-mode .status.generating_shots,
#legacyWorkbench.image-lab-mode .status.review_script,
#legacyWorkbench.image-lab-mode .status.review_shots,
#legacyWorkbench.image-lab-mode .status.submitted,
#legacyWorkbench.image-lab-mode .status.submitting,
#legacyWorkbench.image-lab-mode .status.composing,
#legacyWorkbench.image-lab-mode .status.partial {
  background: #fff2d8;
  color: #9b5d00;
}

#legacyWorkbench.image-lab-mode .review-strip span,
#legacyWorkbench.image-lab-mode .inputs,
#legacyWorkbench.image-lab-mode .task-actions {
  border-color: rgba(146, 181, 220, 0.42);
}

#legacyWorkbench.image-lab-mode .review-strip span {
  background: #f3f7fd;
  color: #29425f;
}

#legacyWorkbench.image-lab-mode .empty {
  border-color: rgba(146, 181, 220, 0.54);
  color: #698098;
}

#legacyWorkbench.image-lab-mode .errors div {
  color: var(--image-red);
}

@media (max-width: 960px) {
  #legacyWorkbench.image-lab-mode {
    width: min(100vw - 16px, 720px);
  }

  #legacyWorkbench.image-lab-mode .hero h1 {
    font-size: 28px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  background: #f5f3ec;
}

body:has(.portal-screen:not([hidden])),
body:has(.login-screen:not([hidden])),
body:has(#legacyWorkbench:not([hidden])) {
  background:
    linear-gradient(90deg, rgba(40, 216, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40, 216, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(29, 111, 255, 0.2), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(79, 242, 194, 0.14), transparent 28%),
    #070d18;
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

.login-screen,
.portal-screen {
  min-height: 100vh;
  color: #e8fbff;
}

.login-screen {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 28px;
}

.login-screen[hidden],
.portal-screen[hidden],
#legacyWorkbench[hidden] {
  display: none;
}

.login-orbit {
  position: absolute;
  inset: 10% auto auto 7%;
  width: min(44vw, 540px);
  aspect-ratio: 1;
  border: 1px solid rgba(40, 216, 255, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 48%, rgba(40, 216, 255, 0.09) 49%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(29, 111, 255, 0.18), transparent 66%);
}

.login-orbit::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed rgba(79, 242, 194, 0.26);
  border-radius: 50%;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  border: 1px solid var(--tech-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(8, 23, 42, 0.92), rgba(11, 38, 64, 0.82));
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.38), inset 0 0 34px rgba(40, 216, 255, 0.08);
  padding: 34px;
}

.login-card h1 {
  color: #ffffff;
  font-size: 34px;
}

.login-copy,
.login-hint {
  color: rgba(232, 251, 255, 0.72);
  line-height: 1.7;
}

.login-card label {
  color: #b8f3ff;
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.login-card input,
.login-card select,
.command-box textarea {
  border: 1px solid rgba(77, 218, 255, 0.38);
  border-radius: 8px;
  background: rgba(2, 12, 24, 0.72);
  color: #f4feff;
}

.login-card button,
.command-box button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--tech-blue), var(--tech-cyan));
  color: #00131f;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  margin-top: 18px;
  padding: 13px 16px;
}

.portal-screen {
  padding: 18px;
}

.portal-topbar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--tech-line);
  border-radius: 8px;
  background: rgba(5, 16, 31, 0.82);
  box-shadow: inset 0 0 28px rgba(40, 216, 255, 0.08);
  padding: 14px 16px;
}

.portal-topbar strong {
  color: #ffffff;
  font-size: 18px;
}

.portal-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.portal-tab,
.portal-user button,
.back-home-button {
  border: 1px solid rgba(77, 218, 255, 0.32);
  border-radius: 8px;
  background: rgba(9, 35, 61, 0.72);
  color: #d9fbff;
  cursor: pointer;
  font-weight: 800;
  padding: 10px 13px;
  white-space: nowrap;
}

.portal-tab.active {
  background: linear-gradient(90deg, rgba(29, 111, 255, 0.78), rgba(40, 216, 255, 0.28));
  border-color: rgba(40, 216, 255, 0.72);
  color: #ffffff;
}

.portal-tab.admin-only[hidden] {
  display: none !important;
}

.portal-user {
  align-items: center;
  display: flex;
  gap: 10px;
}

.portal-user-hidden {
  display: flex;
}

.portal-user-hidden span {
  display: none;
}

.portal-user span {
  color: rgba(232, 251, 255, 0.82);
  font-size: 13px;
  font-weight: 800;
}

.portal-layout {
  display: grid;
  gap: 16px;
  margin: 16px auto 0;
  max-width: 1500px;
}

.ai-command-panel,
.portal-panel {
  border: 1px solid var(--tech-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(10, 28, 51, 0.92), rgba(8, 22, 42, 0.78)),
    radial-gradient(circle at 80% 20%, rgba(40, 216, 255, 0.12), transparent 32%);
  box-shadow: inset 0 0 40px rgba(40, 216, 255, 0.07);
}

.ai-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 24px;
  align-items: end;
  min-height: 280px;
  padding: 30px;
}

.ai-command-panel-minimal {
  display: block;
  margin: 18px auto 0;
  max-width: 1040px;
  min-height: 0;
  padding: 22px;
  width: 100%;
}

.ai-command-panel-minimal .command-box {
  background: rgba(0, 9, 19, 0.58);
  border-color: rgba(77, 218, 255, 0.34);
  box-shadow: inset 0 0 30px rgba(40, 216, 255, 0.06);
}

.ai-command-panel-minimal textarea {
  min-height: 220px;
}

.command-copy h1 {
  color: #ffffff;
  font-size: 46px;
}

.command-copy p:last-child,
.portal-panel p {
  color: rgba(232, 251, 255, 0.72);
  line-height: 1.7;
}

.command-box {
  border: 1px solid rgba(77, 218, 255, 0.24);
  border-radius: 8px;
  background: rgba(0, 9, 19, 0.42);
  padding: 14px;
}

.command-box textarea {
  min-height: 132px;
  resize: vertical;
  width: 100%;
}

.portal-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-card {
  border: 1px solid rgba(77, 218, 255, 0.28);
  border-radius: 8px;
  background: rgba(9, 31, 58, 0.72);
  color: #e8fbff;
  cursor: pointer;
  min-height: 138px;
  padding: 18px;
  text-align: left;
}

.portal-card.hot {
  border-color: rgba(79, 242, 194, 0.52);
  background: linear-gradient(135deg, rgba(14, 70, 86, 0.78), rgba(8, 27, 50, 0.72));
}

.portal-card span,
.module-entry span,
.command-result span {
  color: rgba(184, 243, 255, 0.72);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.portal-card strong {
  color: #ffffff;
  display: block;
  font-size: 19px;
  margin-top: 9px;
}

.portal-card small {
  color: rgba(232, 251, 255, 0.62);
  display: block;
  line-height: 1.6;
  margin-top: 12px;
}

.portal-panel {
  padding: 22px;
}

.home-task-panel {
  margin: 0 auto;
  max-width: 1040px;
}

.home-task-head {
  align-items: flex-end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.home-task-head h2 {
  color: #ffffff;
}

.home-task-head p {
  color: rgba(184, 243, 255, 0.72);
  margin: 0;
}

.home-task-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.home-task-list.compact {
  margin-top: 10px;
}

.home-task-row {
  align-items: center;
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 18, 35, 0.62);
  display: grid;
  gap: 12px;
  grid-template-columns: 110px minmax(0, 1fr) 100px;
  padding: 12px 14px;
}

.home-task-row strong {
  color: #ffffff;
}

.home-task-row small {
  color: rgba(184, 243, 255, 0.76);
  text-align: right;
}

.home-task-status {
  border: 1px solid rgba(77, 218, 255, 0.34);
  border-radius: 999px;
  color: #b8f3ff;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  text-align: center;
}

.home-task-status.status-blocked {
  border-color: rgba(255, 185, 80, 0.62);
  color: #ffd89a;
}

.home-task-status.status-doing {
  border-color: rgba(40, 216, 255, 0.68);
  color: #ffffff;
}

.home-task-empty,
.ops-empty-canvas {
  border: 1px dashed rgba(77, 218, 255, 0.28);
  border-radius: 8px;
  background: rgba(4, 18, 35, 0.46);
  color: rgba(184, 243, 255, 0.72);
  padding: 18px;
}

.home-task-empty strong,
.ops-empty-canvas h3 {
  color: #ffffff;
}

.home-task-empty span {
  display: block;
  line-height: 1.7;
  margin-top: 8px;
}

.ops-workspace-shell {
  display: grid;
  gap: 18px;
}

.ops-workspace-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.ops-ai-panel,
.ops-signal-panel,
.ops-work-card,
.ops-workspace-bottom > section {
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 18, 35, 0.58);
  box-shadow: inset 0 0 28px rgba(40, 216, 255, 0.04);
}

.ops-ai-panel {
  display: grid;
  gap: 10px;
  min-height: 136px;
  padding: 18px;
}

.ops-ai-panel strong,
.ops-work-card strong,
.ops-signal-panel strong,
.ops-workspace-bottom h3 {
  color: #ffffff;
}

.ops-ai-panel span,
.ops-work-card small,
.ops-signal-panel span,
.ops-empty-canvas p {
  color: rgba(184, 243, 255, 0.72);
  line-height: 1.7;
}

.ops-signal-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ops-signal-panel article {
  border-bottom: 1px solid rgba(77, 218, 255, 0.14);
  display: grid;
  gap: 5px;
  padding: 8px 0;
}

.ops-signal-panel article:last-child {
  border-bottom: 0;
}

.ops-work-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-work-card {
  color: inherit;
  cursor: pointer;
  min-height: 150px;
  padding: 16px;
  text-align: left;
}

.ops-work-card:hover {
  border-color: rgba(40, 216, 255, 0.62);
  background: rgba(8, 31, 58, 0.74);
}

.ops-work-card span {
  color: #8fdfff;
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.ops-work-card strong {
  display: block;
  font-size: 18px;
  margin-top: 8px;
}

.ops-work-card small {
  display: block;
  margin-top: 10px;
}

.ops-workspace-bottom {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
}

.ops-workspace-bottom > section {
  padding: 16px;
}


.xhs-workspace-shell {
  display: grid;
  gap: 18px;
}

.xhs-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.xhs-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.xhs-form label.wide {
  grid-column: span 2;
}

.xhs-form label.full {
  grid-column: 1 / -1;
}

.xhs-checkline {
  align-items: center;
  border: 1px solid rgba(255, 91, 120, 0.24);
  border-radius: 8px;
  background: rgba(255, 91, 120, 0.08);
  display: flex !important;
  flex-direction: row;
  gap: 9px;
  min-height: 44px;
}

.xhs-checkline input {
  accent-color: #ff5b78;
  width: auto;
}

.xhs-side-panel,
.xhs-brief-grid {
  display: grid;
  gap: 12px;
}

.xhs-progress-panel,
.xhs-note-preview,
.xhs-task-panel {
  border: 1px solid rgba(255, 91, 120, 0.24);
  border-radius: 8px;
  background: rgba(18, 18, 28, 0.72);
  box-shadow: inset 0 0 24px rgba(255, 91, 120, 0.04);
  padding: 16px;
}

.xhs-progress-panel span,
.xhs-task-head h3,
.xhs-note-preview h3 {
  color: #ffffff;
}

.xhs-progress-panel > span {
  color: rgba(255, 205, 213, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.xhs-progress-panel strong {
  color: #ffffff;
  display: block;
  font-size: 34px;
  margin: 6px 0;
}

.xhs-progress-panel small,
.xhs-brief-grid p {
  color: rgba(232, 251, 255, 0.68);
  line-height: 1.65;
}

.xhs-progress {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  height: 8px;
  margin: 10px 0;
  overflow: hidden;
}

.xhs-progress i {
  background: linear-gradient(90deg, #ff5b78, #ffbd5c);
  display: block;
  height: 100%;
}

.xhs-task-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.xhs-task-head button {
  border: 1px solid rgba(255, 91, 120, 0.26);
  border-radius: 8px;
  background: rgba(255, 91, 120, 0.08);
  color: rgba(255, 236, 240, 0.9);
  cursor: pointer;
  font-weight: 800;
  padding: 9px 10px;
}

.xhs-title-list,
.xhs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.xhs-title-list strong,
.xhs-tags b {
  border: 1px solid rgba(255, 91, 120, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  padding: 8px 10px;
}

.xhs-brief-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.xhs-brief-grid article {
  border: 1px solid rgba(77, 218, 255, 0.16);
  border-radius: 8px;
  background: rgba(5, 18, 35, 0.56);
  padding: 12px;
}

.xhs-brief-grid span {
  color: rgba(255, 205, 213, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.xhs-task-table .module-table-head,
.xhs-task-table .module-table-row {
  grid-template-columns: 1.45fr 0.75fr 90px 154px;
}

.portal-breadcrumb {
  align-items: center;
  color: rgba(184, 243, 255, 0.72);
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.portal-breadcrumb button {
  border: 0;
  background: transparent;
  color: var(--tech-cyan);
  cursor: pointer;
  font-weight: 900;
  padding: 0;
}

.portal-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.portal-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.portal-panel-actions .primary {
  border-color: rgba(79, 242, 194, 0.52);
  background: rgba(79, 242, 194, 0.14);
}

.portal-panel h2 {
  color: #ffffff;
}

.module-entry-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.module-flow {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.flow-step {
  align-items: center;
  border: 1px solid rgba(77, 218, 255, 0.2);
  border-radius: 8px;
  background: rgba(3, 14, 28, 0.52);
  display: flex;
  gap: 10px;
  padding: 12px;
}

.flow-step span {
  align-items: center;
  background: rgba(40, 216, 255, 0.14);
  border: 1px solid rgba(40, 216, 255, 0.46);
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.flow-step strong {
  color: #e8fbff;
  font-size: 13px;
}

.module-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.module-kpis div {
  border: 1px solid rgba(79, 242, 194, 0.24);
  border-radius: 8px;
  background: rgba(79, 242, 194, 0.07);
  padding: 14px;
}

.module-kpis span {
  color: rgba(184, 243, 255, 0.72);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.module-kpis strong {
  color: #ffffff;
  display: block;
  font-size: 28px;
  margin-top: 8px;
}

.module-entry,
.command-result {
  border: 1px solid rgba(77, 218, 255, 0.24);
  border-radius: 8px;
  background: rgba(5, 18, 35, 0.66);
  padding: 14px;
}

.module-entry strong,
.command-result strong {
  color: #ffffff;
  display: block;
  margin-bottom: 6px;
}

.module-entry button {
  border: 1px solid rgba(77, 218, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 251, 255, 0.46);
  font-weight: 800;
  margin-top: 12px;
  padding: 8px 10px;
}

.module-table {
  border: 1px solid rgba(77, 218, 255, 0.2);
  border-radius: 8px;
  margin-top: 14px;
  overflow: hidden;
}

.module-table-head,
.module-table-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1.5fr 0.7fr;
  padding: 12px 14px;
}

.module-table-head {
  background: rgba(40, 216, 255, 0.09);
  color: rgba(184, 243, 255, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.module-table-row {
  border-top: 1px solid rgba(77, 218, 255, 0.14);
  color: rgba(232, 251, 255, 0.76);
}

.module-table-row strong {
  color: #ffffff;
}

.module-form {
  border: 1px solid rgba(77, 218, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 180px;
  margin-top: 18px;
  padding: 14px;
  background: rgba(5, 20, 38, 0.42);
}

.module-form.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.module-form label {
  color: rgba(184, 243, 255, 0.78);
  display: grid;
  gap: 7px;
  font-size: 13px;
}

.module-form input,
.module-form select,
.module-form textarea {
  border: 1px solid rgba(77, 218, 255, 0.28);
  border-radius: 8px;
  background: rgba(4, 17, 31, 0.74);
  color: #ffffff;
  font: inherit;
  min-width: 0;
  padding: 10px 12px;
}

.module-form textarea {
  grid-column: 1 / -1;
  resize: vertical;
}

.module-form button {
  align-self: end;
  border: 1px solid rgba(79, 242, 194, 0.52);
  border-radius: 8px;
  background: rgba(79, 242, 194, 0.16);
  color: #ffffff;
  padding: 11px 14px;
}

.ops-task-table .module-table-head,
.ops-task-table .module-table-row,
.user-table .module-table-head,
.user-table .module-table-row {
  grid-template-columns: 1.4fr 1fr 100px 180px;
}

.codex-task-table .module-table-head,
.codex-task-table .module-table-row {
  grid-template-columns: 1.45fr 1fr 130px 190px;
}

.module-table-row small {
  color: rgba(232, 251, 255, 0.55);
  display: block;
  margin-top: 4px;
}

.module-table-row.empty {
  color: rgba(232, 251, 255, 0.58);
}

.module-table-row.active {
  background: rgba(79, 242, 194, 0.08);
}

.data-command-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  margin-top: 18px;
}

.data-command-main,
.data-command-side {
  display: grid;
  gap: 14px;
}

.data-command-side section,
.data-diagnosis-panel {
  border: 1px solid rgba(77, 218, 255, 0.2);
  border-radius: 8px;
  background: rgba(5, 18, 35, 0.58);
  padding: 14px;
}

.data-command-side h3,
.data-insight-grid h3 {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 10px;
}

.data-analysis-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.data-analysis-form textarea {
  min-height: 84px;
}

.data-kpis {
  margin-top: 0;
}

.data-kpis small {
  color: rgba(232, 251, 255, 0.58);
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 6px;
}

.data-insight-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.data-insight-list,
.data-report-catalog {
  display: grid;
  gap: 8px;
}

.data-insight-list article,
.data-report-catalog article {
  border: 1px solid rgba(77, 218, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 14, 28, 0.54);
  padding: 12px;
}

.data-insight-list strong,
.data-report-catalog strong {
  color: #ffffff;
  display: block;
}

.data-insight-list span,
.data-report-catalog span,
.data-report-catalog small {
  color: rgba(232, 251, 255, 0.64);
  display: block;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 5px;
}

.data-report-table {
  margin-top: 0;
}

.data-report-table .module-table-head,
.data-report-table .module-table-row {
  grid-template-columns: 1.25fr 1fr 0.72fr 112px;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.row-actions button {
  border: 1px solid rgba(77, 218, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 251, 255, 0.86);
  font-size: 12px;
  padding: 7px 9px;
}

.admin-user-panel {
  border-top: 1px solid rgba(77, 218, 255, 0.16);
  margin-top: 24px;
  padding-top: 20px;
}

.ai-route-result {
  border: 1px solid rgba(79, 242, 194, 0.34);
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(10, 58, 74, 0.58), rgba(5, 20, 38, 0.72));
}

.ai-route-result h3 {
  color: #ffffff;
  margin: 6px 0 8px;
}

.ai-route-result div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ai-route-result strong {
  color: rgba(184, 243, 255, 0.86);
  width: 100%;
}

.ai-route-result span {
  border: 1px solid rgba(77, 218, 255, 0.18);
  border-radius: 8px;
  color: rgba(232, 251, 255, 0.86);
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.06);
}

.ai-config-panel {
  border-top-color: rgba(79, 242, 194, 0.22);
}

.codex-task-panel {
  border-top-color: rgba(77, 218, 255, 0.22);
}

.codex-console-shell {
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(5, 21, 42, 0.86), rgba(8, 35, 64, 0.62));
  box-shadow: 0 18px 48px rgba(0, 10, 30, 0.28);
  margin-bottom: 20px;
  padding: 22px;
}

.codex-console-head {
  margin-bottom: 16px;
}

.codex-console-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.codex-console-card {
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 18, 34, 0.72);
  color: rgba(232, 251, 255, 0.86);
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
}

.codex-console-card strong {
  color: #ffffff;
  font-size: 17px;
}

.codex-console-card small {
  color: rgba(198, 231, 244, 0.74);
  line-height: 1.7;
}

.codex-console-card.warning {
  border-color: rgba(255, 184, 77, 0.35);
  background: linear-gradient(135deg, rgba(79, 48, 10, 0.35), rgba(4, 18, 34, 0.74));
}

@media (max-width: 960px) {
  .codex-console-grid {
    grid-template-columns: 1fr;
  }
}

.codex-task-form {
  grid-template-columns: minmax(220px, 1fr) 170px 110px auto;
}

.ai-config-form {
  grid-template-columns: 140px 1.4fr 1fr 1.1fr 100px auto;
}

.command-result {
  border-color: rgba(79, 242, 194, 0.42);
  margin-bottom: 14px;
}

.ai-command-result {
  display: grid;
  gap: 12px;
}

.ai-route-badges,
.ai-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-route-badges span {
  border: 1px solid rgba(77, 218, 255, 0.26);
  border-radius: 999px;
  background: rgba(40, 216, 255, 0.08);
  color: #b8f3ff;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
}

.ai-command-list {
  border-top: 1px solid rgba(77, 218, 255, 0.18);
  padding-top: 10px;
}

.ai-command-list b {
  color: #ffffff;
  display: block;
  margin-bottom: 6px;
}

.ai-command-list ul {
  color: rgba(232, 251, 255, 0.78);
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.ai-command-actions button {
  border: 1px solid rgba(77, 218, 255, 0.32);
  border-radius: 8px;
  background: rgba(9, 35, 61, 0.72);
  color: #d9fbff;
  cursor: pointer;
  font-weight: 900;
  padding: 9px 12px;
}

.ai-command-actions .primary {
  border-color: rgba(79, 242, 194, 0.52);
  background: rgba(79, 242, 194, 0.14);
}

.back-home-button {
  margin-top: 14px;
  width: 100%;
}

.app-shell {
  width: min(1500px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 20px 0 44px;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 18px;
}

.app-shell:has(.workbench-topbar) {
  grid-template-rows: auto 1fr;
}

.workbench-topbar {
  grid-column: 1 / -1;
  align-items: center;
  border: 1px solid rgba(77, 218, 255, 0.28);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(6, 18, 34, 0.92), rgba(10, 42, 70, 0.76));
  color: #e8fbff;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.workbench-topbar span {
  color: rgba(184, 243, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.workbench-topbar strong {
  color: #ffffff;
  display: block;
  font-size: 18px;
  margin-top: 3px;
}

.workbench-topbar nav {
  display: flex;
  gap: 8px;
}

.workbench-topbar button {
  border: 1px solid rgba(77, 218, 255, 0.3);
  border-radius: 8px;
  background: rgba(9, 35, 61, 0.72);
  color: #d9fbff;
  cursor: pointer;
  font-weight: 800;
  padding: 9px 12px;
}

.workbench-topbar button.active {
  background: rgba(40, 216, 255, 0.18);
  border-color: rgba(40, 216, 255, 0.65);
  color: #ffffff;
}

.side-nav,
.composer,
.tasks {
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.side-nav {
  background: linear-gradient(180deg, rgba(10, 28, 51, 0.94), rgba(9, 25, 45, 0.88));
  color: #e8fbff;
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

.side-brand h2,
h1,
h2 {
  margin: 0;
  line-height: 1.16;
  letter-spacing: 0;
}

.side-copy {
  margin: 10px 0 0;
  color: rgba(232, 251, 255, 0.68);
  font-size: 13px;
  line-height: 1.65;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.operator-panel,
.filter-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(77, 218, 255, 0.18);
}

.side-nav label,
.side-nav .subnav-label {
  color: rgba(232, 251, 255, 0.78);
}

.side-nav input,
.side-nav select {
  border-color: rgba(77, 218, 255, 0.28);
  background: rgba(2, 12, 24, 0.42);
  color: #ffffff;
}

.operator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-panel {
  border: 1px solid #d5e0d9;
  border-radius: 8px;
  background: #f4faf6;
  padding: 10px 12px;
}

.admin-panel summary {
  color: var(--brand-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.admin-panel label {
  margin-top: 10px;
}

.admin-panel .hint {
  margin: 2px 0 0;
}

.admin-mode .admin-panel {
  border-color: rgba(45, 107, 87, 0.55);
  background: #e8f2ed;
}

.admin-mode .metric-card.primary {
  border-color: rgba(191, 106, 52, 0.45);
  background: #fff5e8;
}

.admin-mode #queueTitle::after {
  content: " 管理员";
  display: inline-block;
  margin-left: 8px;
  border: 1px solid #e4c48b;
  border-radius: 999px;
  background: #fff3c8;
  color: #7a5314;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
}

.nav-groups {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.nav-item {
  width: 100%;
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 8px;
  background: rgba(9, 35, 61, 0.58);
  color: #e8fbff;
  text-align: left;
  padding: 12px 13px;
}

.nav-item.active {
  border-color: rgba(79, 242, 194, 0.46);
  background: rgba(79, 242, 194, 0.12);
}

.subnav-items {
  display: grid;
  gap: 7px;
  padding: 0 0 6px 12px;
}

.subnav-items[hidden],
.filter-panel[hidden],
.composer[hidden],
.tasks[hidden],
.conditional-field[hidden] {
  display: none;
}

.subnav-item {
  border: 1px solid rgba(77, 218, 255, 0.22);
  border-radius: 8px;
  background: rgba(2, 12, 24, 0.32);
  color: #d9fbff;
  font-size: 13px;
  padding: 9px 12px;
  text-align: left;
}

.subnav-item.active {
  background: rgba(40, 216, 255, 0.14);
  border-color: rgba(40, 216, 255, 0.48);
}

.nav-title {
  display: block;
  font-size: 16px;
  font-weight: 900;
}

.nav-desc {
  display: block;
  margin-top: 4px;
  color: rgba(232, 251, 255, 0.62);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.subnav-label {
  margin: 0;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 900;
}

.workspace {
  min-width: 0;
}

.hero {
  margin-bottom: 16px;
}

h1 {
  max-width: 820px;
  font-size: 44px;
}

h2 {
  font-size: 24px;
}

.subhead {
  max-width: 980px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.image-dashboard {
  display: grid;
  grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.image-dashboard[hidden] {
  display: none;
}

.ops-console {
  display: grid;
  gap: 16px;
}

.ops-console[hidden],
.ops-panel[hidden] {
  display: none;
}

.ops-hero,
.ops-panel,
.ops-filters {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
}

.ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 16px;
  align-items: stretch;
  padding: 20px;
}

.ops-hero h2 {
  font-size: 32px;
}

.ops-lead {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.ops-stage-card {
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  background: #f5faf7;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.ops-stage-card span,
.ops-card span,
.ops-tool span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ops-stage-card strong {
  color: var(--brand-dark);
  font-size: 18px;
  line-height: 1.45;
}

.ops-stage-card small {
  color: var(--muted);
  line-height: 1.6;
}

.ops-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.ops-panel {
  padding: 18px;
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ops-card,
.ops-tool,
.ops-timeline > div {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.ops-card {
  display: grid;
  gap: 8px;
  min-height: 146px;
}

.ops-card.accent {
  background: #f3f8f5;
  border-color: rgba(45, 107, 87, 0.32);
}

.ops-card strong,
.ops-tool strong,
.ops-timeline strong {
  color: var(--brand-dark);
  font-size: 17px;
}

.ops-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.ops-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-tool {
  display: grid;
  gap: 8px;
  min-height: 112px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ops-tool span {
  line-height: 1.6;
}

.ops-tool.active {
  border-color: rgba(45, 107, 87, 0.42);
  background: #e8f2ed;
}

.ops-tool-panel {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.ops-tool-panel[hidden] {
  display: none;
}

.ops-form {
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  background: #fffaf2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px;
}

.ops-summary-grid {
  margin-bottom: 14px;
}

.ops-records {
  display: grid;
  gap: 10px;
}

.ops-record {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
}

.ops-record.selected {
  border-color: rgba(45, 107, 87, 0.5);
  background: #f2f8f4;
}

.ops-record strong {
  color: var(--brand-dark);
}

.ops-record p {
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0;
}

.ops-record small {
  color: #6d756f;
  line-height: 1.5;
}

.ops-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.ops-empty {
  border: 1px dashed #cfd9d3;
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--muted);
  padding: 16px;
}

.ops-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ops-checkline {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.ops-checkline input {
  margin-top: 3px;
  width: auto;
}

.ops-checkline span {
  color: #39423c;
  line-height: 1.55;
}

.ops-output {
  display: grid;
  gap: 10px;
}

.ops-brain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr);
  gap: 14px;
  align-items: start;
}

.ops-brain-form {
  margin-bottom: 0;
}

.ops-brain-side {
  display: grid;
  gap: 12px;
}

.ops-trend-report {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 16px;
  padding: 16px;
}

.ops-trend-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.ops-trend-head h2 {
  margin-bottom: 6px;
}

.ops-trend-head p,
.ops-trend-head span {
  color: var(--muted);
  line-height: 1.65;
}

.ops-warning {
  border: 1px solid #ead2a4;
  border-radius: 8px;
  background: #fff8e6;
  color: #71510f;
  font-weight: 700;
  line-height: 1.6;
  padding: 10px 12px;
}

.ops-opportunity-grid,
.ops-brain-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ops-opportunity-card,
.ops-signal-list article,
.ops-task-list article {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fbfdfb;
  padding: 13px;
}

.ops-opportunity-card {
  display: grid;
  gap: 9px;
  position: relative;
}

.ops-opportunity-card > span,
.ops-signal-list span,
.ops-task-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.ops-opportunity-card strong,
.ops-brain-columns h3,
.ops-signal-list strong,
.ops-task-list strong {
  color: var(--brand-dark);
}

.ops-opportunity-card p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  padding-right: 48px;
}

.ops-score {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8f2ed;
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.ops-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ops-tags b {
  border: 1px solid #cddfd6;
  border-radius: 999px;
  background: #fff;
  color: #174d40;
  font-size: 12px;
  padding: 5px 8px;
}

.ops-opportunity-card ol {
  margin: 0;
  padding-left: 20px;
}

.ops-opportunity-card li {
  color: #39423c;
  line-height: 1.6;
}

.ops-brain-columns section {
  display: grid;
  gap: 10px;
}

.ops-signal-list,
.ops-task-list,
.ops-source-list {
  display: grid;
  gap: 8px;
}

.ops-signal-list article,
.ops-task-list article {
  display: grid;
  gap: 6px;
}

.ops-source-list {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.ops-source-list strong {
  color: var(--brand-dark);
}

.ops-source-list a,
.ops-source-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ops-result-card,
.ops-alert-rule {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.ops-result-card strong,
.ops-alert-rule strong {
  color: var(--brand-dark);
}

.ops-result-card ol {
  margin: 10px 0 0;
  padding-left: 22px;
}

.ops-result-card li {
  line-height: 1.7;
  margin: 4px 0;
}

.ops-result-card p {
  color: var(--muted);
  line-height: 1.65;
  margin: 10px 0 0;
}

.ops-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ops-kpis span {
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  background: #fffaf2;
  color: var(--muted);
  padding: 10px;
}

.ops-kpis b {
  color: var(--brand-dark);
}

.ops-alert-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ops-alert-rule {
  display: grid;
  gap: 8px;
}

.ops-alert-rule span {
  color: var(--muted);
  line-height: 1.6;
}

.ops-timeline > div.active {
  border-color: rgba(45, 107, 87, 0.45);
  background: #e8f2ed;
}

.ops-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-timeline > div {
  display: grid;
  gap: 8px;
  min-height: 110px;
}

.ops-timeline span {
  color: var(--muted);
  line-height: 1.6;
}

.ops-knowledge-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ops-knowledge-list span {
  border: 1px solid #d9ded9;
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 800;
  padding: 12px;
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 6px 18px rgba(61, 48, 34, 0.06);
  color: var(--ink);
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 13px 14px;
  text-align: left;
}

.metric-card.primary {
  background: #eaf4ef;
  border-color: rgba(45, 107, 87, 0.35);
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.metric-card strong {
  color: var(--brand-dark);
  font-size: 24px;
  line-height: 1.1;
}

.metric-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.filter-chip {
  border-radius: 8px;
}

.filter-chip.active {
  background: #fff6d8;
  border-color: #dbc37d;
}

.composer {
  padding: 18px;
}

.video-notice {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
}

.video-notice[hidden] {
  display: none;
}

.video-notice p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 7px 0 0;
}

.record-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.section-head.compact {
  align-items: flex-start;
}

form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: #384139;
  font-size: 13px;
  font-weight: 900;
}

.wide {
  grid-column: 1 / -1;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.checkline input {
  width: auto;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d5ccbf;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  outline: none;
  padding: 11px 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

textarea {
  resize: vertical;
  line-height: 1.65;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(45, 107, 87, 0.14);
}

input.readonly {
  background: #f4f0e8;
  color: #4d574f;
}

.hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.template-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f2ea;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
}

.template-status strong {
  color: var(--brand-dark);
  margin-right: 8px;
}

.template-status span {
  display: block;
  margin-top: 5px;
  line-height: 1.5;
}

.upload-zone {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.zone-title {
  margin: 0 0 4px;
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 900;
}

.upload-preview,
.inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}

.preview-card,
.input-ref {
  position: relative;
  display: grid;
  gap: 7px;
  margin: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.preview-card img,
.preview-card video,
.input-ref img,
.input-ref video {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  object-fit: cover;
}

.preview-card video,
.input-ref video {
  background: #101510;
}

.preview-card figcaption {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-file {
  position: absolute;
  top: 7px;
  right: 7px;
  border: 1px solid rgba(23, 69, 54, 0.20);
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-dark);
  font-size: 12px;
  padding: 5px 8px;
}

.binding-preview {
  border: 1px solid #cddfd6;
  border-radius: 8px;
  background: #eff7f3;
  padding: 14px;
}

.binding-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.binding-grid div {
  border: 1px solid #cddfd6;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.binding-grid strong,
.binding-grid span {
  display: block;
}

.binding-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.actions,
.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actions {
  grid-column: 1 / -1;
}

button {
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 11px 17px;
  transition: filter 140ms ease, transform 140ms ease;
}

button.small {
  font-size: 13px;
  padding: 9px 12px;
}

button:hover {
  filter: brightness(1.04);
}

button:disabled {
  cursor: wait;
  filter: grayscale(0.5);
  opacity: 0.7;
}

.ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-dark);
}

.tasks {
  margin-top: 18px;
  padding: 18px;
}

.task-list {
  display: grid;
  gap: 14px;
}

.empty {
  border: 1px dashed #cfc3b5;
  border-radius: 8px;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.task {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.task.archived {
  background: #f5f1e9;
}

.task-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.task-title {
  font-size: 17px;
  font-weight: 900;
}

.meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.status {
  border-radius: 999px;
  background: #eee7dc;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 900;
  padding: 7px 12px;
  white-space: nowrap;
}

.status.success {
  background: #e0efdc;
  color: #376238;
}

.status.failed {
  background: #f5ded7;
  color: var(--danger);
}

.status.running,
.status.queued,
.status.planning,
.status.generating_shots,
.status.review_script,
.status.review_shots,
.status.submitted,
.status.submitting,
.status.composing,
.status.partial {
  background: #fff0c5;
  color: var(--warning);
}

.task-actions {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  margin-bottom: 12px;
}

.review-strip {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}

.review-strip span {
  border: 1px solid #d9e2dc;
  border-radius: 8px;
  background: #f5faf7;
  color: #385345;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  padding: 8px 10px;
}

.material-plan {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.material-classification {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.classification-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.classification-card {
  border: 1px solid #d9e2dc;
  border-radius: 8px;
  background: #f8fbf9;
  padding: 10px;
}

.classification-card.high {
  border-color: #edc5bb;
  background: #fff8f5;
}

.classification-card.medium {
  border-color: #e3d3a6;
  background: #fffaf0;
}

.classification-title {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.classification-title strong {
  color: var(--brand-dark);
  font-size: 13px;
}

.classification-title span {
  border-radius: 999px;
  background: #e8efe9;
  color: #36513f;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
  white-space: nowrap;
}

.classification-card p,
.classification-card small,
.classification-card em {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
}

.classification-card p,
.classification-card small {
  color: var(--muted);
}

.classification-card em {
  color: var(--danger);
  font-style: normal;
  font-weight: 800;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.material-card {
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #f7faf8;
  padding: 11px;
}

.material-card.missing {
  border-color: #edc5bb;
  background: #fff8f5;
}

.material-card.needs_confirmation {
  border-color: #e3d3a6;
  background: #fffaf0;
}

.material-title {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.material-title span {
  border-radius: 999px;
  background: #e8efe9;
  color: #36513f;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
  white-space: nowrap;
}

.material-card.missing .material-title span {
  background: #f4ded8;
  color: var(--danger);
}

.material-card.needs_confirmation .material-title span {
  background: #fff0c5;
  color: var(--warning);
}

.material-card p,
.material-card small,
.material-card em {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
}

.material-card em {
  color: var(--danger);
  font-style: normal;
  font-weight: 800;
}

.material-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.material-action,
.material-generated {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  text-decoration: none;
}

.material-action {
  background: var(--green);
  border: 1px solid var(--green);
  color: white;
  cursor: pointer;
}

.material-action.secondary {
  background: #f7fbf8;
  border-color: #9dbbae;
  color: #174d40;
}

.material-action.danger {
  background: #fff7f2;
  border-color: #d7b7aa;
  color: var(--danger);
}

.material-action:disabled {
  cursor: wait;
  opacity: 0.65;
}

.material-generated {
  border: 1px solid #bed1c8;
  color: #0d4d3d;
  margin-top: 8px;
}

.hidden-material-input {
  display: none;
}

.shot-upload {
  margin-top: 8px;
}

.upload-count {
  border: 1px solid #bed1c8;
  border-radius: 8px;
  color: #174d40;
  font-size: 12px;
  font-weight: 900;
  grid-column: 1 / -1;
  padding: 7px 9px;
}

.outputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.inputs {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.output {
  display: grid;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}

.output .meta {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.output-actions {
  display: flex;
  gap: 8px;
}

.output-actions a {
  align-items: center;
  border: 1px solid #bed1c8;
  border-radius: 8px;
  color: #0d4d3d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  text-decoration: none;
}

.output-actions a:hover {
  background: #e7f3ee;
}

.output-delete-shot {
  border: 1px solid #d7b7aa;
  border-radius: 8px;
  background: #fff7f2;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 32px;
  padding: 6px 10px;
}

.output-delete-shot:disabled {
  cursor: wait;
  opacity: 0.65;
}

.output img,
.output video,
.media-placeholder {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.output img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.video-output video {
  aspect-ratio: 9 / 16;
  max-height: 420px;
  object-fit: contain;
}

.output video {
  background: #101510;
}

.media-placeholder {
  align-items: center;
  background: linear-gradient(180deg, #f6faf7, #edf4ef);
  color: #174d40;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 900;
  gap: 6px;
  justify-content: center;
  min-height: 120px;
  padding: 14px;
  text-align: center;
}

.video-placeholder {
  aspect-ratio: 9 / 16;
  max-height: 420px;
}

.media-icon {
  align-items: center;
  background: #dfece5;
  border-radius: 999px;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.media-placeholder small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.broken-media {
  align-items: center;
  aspect-ratio: 1 / 1;
  border: 1px dashed #d7b7aa;
  border-radius: 8px;
  background: #fff7f2;
  color: var(--danger);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.5;
  padding: 12px;
  text-align: center;
}

.task-link {
  color: var(--brand-dark);
  font-weight: 800;
}

.script-block {
  border-top: 1px dashed var(--line);
  color: var(--muted);
  margin-top: 12px;
  padding-top: 12px;
}

.script-block strong {
  color: var(--brand-dark);
}

.script-block p {
  margin: 8px 0 0;
  line-height: 1.75;
}

.script-editor-panel {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.script-editor {
  min-height: 132px;
  resize: vertical;
}

.script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.script-segment-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.script-segment {
  align-items: flex-start;
  border: 1px solid #d9e2dc;
  border-radius: 8px;
  background: #f8fbf9;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.script-segment-main strong {
  color: var(--brand-dark);
  font-size: 13px;
}

.script-segment-main p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 5px 0 0;
}

.script-segment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.storyboard {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.storyboard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.storyboard-head strong {
  color: var(--brand-dark);
}

.storyboard-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.shot-card {
  border: 1px solid #d9e2dc;
  border-radius: 8px;
  background: #f8fbf9;
  padding: 11px;
}

.shot-card-head {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.shot-title {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}

.shot-delete {
  border: 1px solid #d7b7aa;
  border-radius: 8px;
  background: #fff7f2;
  color: var(--danger);
  font-size: 12px;
  min-height: 30px;
  padding: 5px 8px;
}

.shot-card p,
.shot-card small,
.shot-card em {
  display: block;
  margin: 6px 0 0;
  line-height: 1.55;
}

.shot-card p {
  color: var(--ink);
  font-size: 13px;
}

.shot-card small {
  color: var(--muted);
  font-size: 12px;
}

.shot-card em {
  color: var(--danger);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.shot-status {
  border-radius: 8px;
  background: #fff0c5;
  color: var(--warning);
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 4px;
  padding: 5px 8px;
}

.shot-status.success {
  background: #e0efdc;
  color: #376238;
}

.shot-status.failed {
  background: #f5ded7;
  color: var(--danger);
}

.shot-status a {
  color: inherit;
}

.quality-panel {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.quality-checks {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quality-checks span {
  border: 1px solid #cddfd6;
  border-radius: 8px;
  background: #f4faf6;
  color: #174d40;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  padding: 8px 10px;
}

.errors {
  margin-top: 12px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .portal-topbar,
  .ai-command-panel {
    grid-template-columns: 1fr;
  }

  .portal-grid,
  .module-entry-grid,
  .module-flow,
  .module-kpis,
  .data-command-grid,
  .data-analysis-form,
  .data-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-command-grid,
  .data-analysis-form,
  .data-insight-grid {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: static;
  }

  .nav-groups {
    grid-template-columns: 1fr;
  }

  .image-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-hero,
  .ops-filters,
  .ops-grid,
  .ops-brain-layout,
  .ops-opportunity-grid,
  .ops-brain-columns,
  .ops-tool-grid,
  .ops-timeline,
  .ops-knowledge-list,
  .ops-form,
  .ops-kpis,
  .ops-alert-rules,
  .ops-workspace-layout,
  .ops-work-card-grid,
  .ops-workspace-bottom {
    grid-template-columns: 1fr;
  }

  .ops-checklist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .app-shell {
    width: min(100vw - 20px, 1500px);
  }

  .portal-screen {
    padding: 10px;
  }

  .portal-grid,
  .module-entry-grid,
  .module-flow,
  .module-kpis,
  .module-table-head,
  .module-table-row,
  .home-task-row {
    grid-template-columns: 1fr;
  }

  .home-task-row small {
    text-align: left;
  }

  .xhs-form label.wide,
  .xhs-form label.full {
    grid-column: 1 / -1;
  }

  .workbench-topbar,
  .portal-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbench-topbar nav,
  .portal-panel-actions {
    justify-content: flex-start;
  }

  .ai-command-panel {
    min-height: auto;
    padding: 18px;
  }

  .command-copy h1 {
    font-size: 34px;
  }

  form,
  .binding-grid,
  .image-dashboard,
  .review-strip,
  .script-segment,
  .ops-record {
    grid-template-columns: 1fr;
  }

  .ops-record-actions {
    justify-content: flex-start;
  }

  .section-head,
  .task-top,
  .ops-trend-head {
    align-items: flex-start;
    flex-direction: column;
  }

  h1 {
    font-size: 34px;
  }
}

/* video workspace independent screen v1 */
.video-workspace-screen[hidden] {
  display: none !important;
}

body:has(.video-workspace-screen:not([hidden])) {
  background:
    linear-gradient(rgba(73, 135, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 135, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 78% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
    linear-gradient(135deg, #061326 0%, #071b34 52%, #050d1a 100%);
  background-size: 88px 88px, 88px 88px, auto, auto;
  color: #eaf4ff;
}

.video-workspace-screen {
  min-height: 100vh;
  padding: 18px;
}

.video-workspace-shell {
  width: min(1620px, calc(100vw - 24px));
  margin: 0 auto 42px;
}

.video-workspace-topbar,
.video-workbench,
.video-workspace-side,
.video-side-panel,
.video-stage-card {
  background: rgba(8, 25, 48, 0.82);
  border: 1px solid rgba(125, 189, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.video-workspace-topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 14px 18px;
}

.video-workspace-brand {
  align-items: center;
  display: flex;
  gap: 12px;
}

.video-workspace-brand strong {
  display: block;
  font-size: 22px;
  color: #ffffff;
}

.video-workspace-brand span:last-child {
  color: #9fd7ff;
  display: block;
  font-size: 13px;
}

.video-workspace-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(125, 221, 255, 0.72);
  background: linear-gradient(135deg, rgba(42, 118, 255, 0.9), rgba(35, 211, 255, 0.75));
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.36);
}

.video-workspace-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.video-workspace-screen button {
  border-radius: 8px;
}

.video-workspace-page {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.video-workbench {
  padding: 16px;
}

.video-workspace-side {
  display: none;
}

.video-step-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.video-step-progress button {
  align-items: center;
  background: rgba(5, 19, 38, 0.72);
  border: 1px solid rgba(125, 189, 255, 0.18);
  color: #cfe8ff;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-height: 46px;
  padding: 8px 10px;
}

.video-step-progress button span {
  align-items: center;
  border: 1px solid rgba(120, 206, 255, 0.52);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  height: 24px;
  justify-content: center;
  min-width: 24px;
}

.video-step-progress button.active,
.video-entry-card.active {
  background: linear-gradient(135deg, rgba(42, 118, 255, 0.48), rgba(31, 184, 255, 0.24));
  border-color: rgba(120, 206, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 26px rgba(22, 104, 255, 0.22);
  color: #ffffff;
}

.video-stage-card {
  min-height: 560px;
  padding: 18px;
}

.video-stage-head {
  align-items: flex-start;
  border-bottom: 1px solid rgba(125, 189, 255, 0.2);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.video-stage-head h2 {
  color: #ffffff;
  font-size: 30px;
  margin: 4px 0 8px;
}

.video-stage-head span {
  color: #9fd7ff;
}

.video-logic-strip {
  align-items: stretch;
  background: rgba(2, 15, 32, 0.58);
  border: 1px solid rgba(125, 189, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  margin-bottom: 16px;
  padding: 12px;
}

.video-logic-strip span,
.video-logic-flow span,
.video-module-plan small,
.video-drawer-gates small,
.video-route-plan small {
  color: #9fd7ff;
  font-size: 12px;
}

.video-logic-strip strong {
  color: #ffffff;
  display: block;
  line-height: 1.6;
  margin-top: 4px;
}

.video-logic-tags {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.video-logic-tags em,
.shot-route-badge {
  background: rgba(94, 194, 255, 0.1);
  border: 1px solid rgba(94, 194, 255, 0.28);
  border-radius: 999px;
  color: #d7f1ff;
  font-style: normal;
  padding: 5px 9px;
}

.video-stage-badge {
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 999px;
  color: #fbbf24;
  padding: 7px 12px;
  white-space: nowrap;
}

.video-entry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.video-entry-card {
  background: rgba(5, 19, 38, 0.76);
  border: 1px solid rgba(125, 189, 255, 0.18);
  color: #dcecff;
  min-height: 188px;
  padding: 16px;
  text-align: left;
}

.video-entry-card span,
.video-entry-card em {
  color: #9fd7ff;
  display: block;
  font-style: normal;
  font-size: 12px;
}

.video-entry-card strong {
  color: #ffffff;
  display: block;
  font-size: 22px;
  margin: 18px 0 10px;
}

.video-entry-card small {
  color: #c3daf2;
  display: block;
  line-height: 1.7;
  min-height: 72px;
}

.video-workspace-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.video-workspace-form label {
  color: #cfe8ff;
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.video-workspace-form .wide,
.video-form-actions {
  grid-column: 1 / -1;
}

.video-workspace-form input,
.video-workspace-form textarea {
  background: rgba(2, 11, 24, 0.9);
  border: 1px solid rgba(125, 189, 255, 0.28);
  border-radius: 8px;
  color: #f4fbff;
  padding: 12px 13px;
}

.video-file-field {
  border: 1px dashed rgba(125, 189, 255, 0.32);
  border-radius: 8px;
  padding: 12px;
}

.video-file-field span:empty {
  display: none;
}

.video-file-field span {
  background: rgba(94, 194, 255, 0.08);
  border: 1px solid rgba(94, 194, 255, 0.22);
  border-radius: 8px;
  color: #d7f1ff;
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px 10px;
}

.video-file-field span strong {
  color: #ffffff;
  font-size: 12px;
}

.video-file-field span em {
  color: #9fd7ff;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.video-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.video-stage-empty {
  align-items: center;
  border: 1px dashed rgba(125, 189, 255, 0.26);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  justify-items: center;
  min-height: 360px;
  padding: 24px;
  text-align: center;
}

.video-stage-empty strong {
  color: #ffffff;
  font-size: 24px;
}

.video-stage-empty p {
  color: #b8d8f5;
  max-width: 620px;
}

.video-logic-flow,
.video-module-plan {
  display: grid;
  gap: 8px;
  width: min(820px, 100%);
}

.video-logic-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  text-align: left;
}

.video-logic-flow span {
  background: rgba(5, 19, 38, 0.78);
  border: 1px solid rgba(125, 189, 255, 0.18);
  border-radius: 8px;
  line-height: 1.5;
  padding: 9px;
}

.video-logic-flow span.active {
  border-color: rgba(245, 158, 11, 0.6);
  color: #fff4d6;
}

.video-module-plan {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}

.video-module-plan div {
  background: rgba(2, 15, 32, 0.56);
  border: 1px solid rgba(125, 189, 255, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.video-module-plan strong {
  color: #ffffff;
}

.video-footer-actions {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 14px;
}

.video-footer-actions span {
  color: #9fd7ff;
}

.video-side-panel {
  padding: 14px;
}

.video-workspace-summary-bar {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.video-task-panel {
  background: rgba(8, 25, 48, 0.82);
  border: 1px solid rgba(125, 189, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  padding: 14px;
}

.video-task-panel-toggle {
  align-items: center;
  background: rgba(2, 15, 32, 0.62);
  border: 1px solid rgba(125, 189, 255, 0.2);
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.video-task-panel-toggle span {
  display: grid;
  gap: 3px;
}

.video-task-panel-toggle em,
.video-task-panel-toggle small {
  color: #9fd7ff;
  font-size: 12px;
  font-style: normal;
}

.video-task-panel-toggle strong {
  color: #ffffff;
  font-size: 18px;
}

.video-task-panel-toggle::after {
  color: #9fd7ff;
  content: "收起";
  font-size: 13px;
}

.video-task-panel.collapsed .video-task-panel-toggle::after {
  content: "展开";
}

.video-task-panel-body {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
}

.video-history-panel {
  background: rgba(8, 25, 48, 0.82);
  border: 1px solid rgba(125, 189, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.video-task-drawer {
  max-height: min(72vh, 760px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(94, 194, 255, 0.54) rgba(3, 15, 32, 0.65);
  scrollbar-width: thin;
}

.video-task-drawer::-webkit-scrollbar {
  width: 8px;
}

.video-task-drawer::-webkit-scrollbar-thumb {
  background: rgba(94, 194, 255, 0.54);
  border-radius: 999px;
}

.video-task-drawer::-webkit-scrollbar-track {
  background: rgba(3, 15, 32, 0.65);
}

.video-side-panel h3 {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 12px;
}

.video-summary-item,
.video-drawer-task {
  background: rgba(2, 15, 32, 0.52);
  border: 1px solid rgba(125, 189, 255, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
  padding: 11px;
}

.video-drawer-list {
  display: grid;
  gap: 9px;
}

.video-drawer-task {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin-bottom: 0;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
  width: 100%;
}

.video-drawer-task:hover,
.video-drawer-task:focus-visible,
.video-drawer-task.active {
  background: rgba(6, 26, 54, 0.78);
  border-color: rgba(94, 194, 255, 0.62);
  outline: none;
}

.video-drawer-task.active {
  box-shadow: inset 3px 0 0 #5ec2ff;
}

.video-summary-item span,
.video-drawer-task span,
.video-drawer-task small,
.video-drawer-task em {
  color: #9fd7ff;
}

.video-summary-item strong,
.video-drawer-task strong {
  color: #ffffff;
}

.video-drawer-task em {
  font-size: 12px;
  font-style: normal;
}

.video-active-panel {
  background: rgba(8, 25, 48, 0.82);
  border: 1px solid rgba(125, 189, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.video-active-head {
  align-items: flex-end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.video-active-head h3 {
  color: #ffffff;
  font-size: 18px;
  margin: 2px 0 0;
}

.video-active-head span {
  color: #9fd7ff;
  font-size: 12px;
}

.video-active-task-list {
  display: grid;
  gap: 12px;
}

.video-active-task {
  border: 1px solid rgba(125, 189, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
}

.video-active-task.active {
  border-color: rgba(94, 194, 255, 0.58);
  box-shadow: inset 3px 0 0 #5ec2ff;
}

.video-active-task > .task {
  border: 0;
  margin: 0;
}

.video-active-task-list .empty,
.video-task-drawer .empty {
  border: 1px dashed rgba(125, 189, 255, 0.24);
  border-radius: 8px;
  color: #9fd7ff;
  padding: 18px;
  text-align: center;
}

.video-drawer-detail {
  background: rgba(1, 10, 24, 0.72);
  border: 1px solid rgba(125, 189, 255, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin: 0 0 3px;
  padding: 12px;
}

.video-drawer-detail-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.video-drawer-detail-head > div {
  display: grid;
  gap: 4px;
}

.video-drawer-detail-head span,
.video-drawer-detail-grid dt {
  color: #9fd7ff;
  font-size: 12px;
}

.video-drawer-detail-head strong,
.video-drawer-detail-grid dd {
  color: #ffffff;
}

.video-drawer-detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin: 0;
}

.video-drawer-detail-grid div {
  border-top: 1px solid rgba(125, 189, 255, 0.12);
  display: grid;
  gap: 3px;
  padding-top: 8px;
}

.video-drawer-detail-grid dd,
.video-drawer-detail-grid dt {
  margin: 0;
}

.video-drawer-error {
  background: rgba(180, 82, 32, 0.16);
  border: 1px solid rgba(255, 188, 120, 0.28);
  border-radius: 8px;
  color: #ffd2a1;
  font-size: 12px;
  line-height: 1.6;
  padding: 9px 10px;
}

.video-drawer-history,
.video-drawer-error-list {
  display: grid;
  gap: 8px;
}

.video-drawer-history > strong,
.video-drawer-error-list > strong {
  color: #ffffff;
  font-size: 13px;
}

.video-drawer-history-item {
  background: rgba(2, 15, 32, 0.55);
  border: 1px solid rgba(125, 189, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 9px;
}

.video-drawer-history-item div:first-child {
  display: grid;
  gap: 3px;
}

.video-drawer-history-title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.video-drawer-history-item small {
  color: #9fd7ff;
  font-size: 12px;
  line-height: 1.5;
}

.video-drawer-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.video-drawer-history-actions a {
  background: rgba(94, 194, 255, 0.12);
  border: 1px solid rgba(94, 194, 255, 0.28);
  border-radius: 7px;
  color: #d7f1ff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  text-decoration: none;
}

.video-drawer-error-list span,
.video-route-warning {
  background: rgba(180, 82, 32, 0.13);
  border: 1px solid rgba(255, 188, 120, 0.24);
  border-radius: 8px;
  color: #ffd2a1;
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 9px;
}

.video-route-warning {
  margin-top: 12px;
}

.video-drawer-note {
  background: rgba(94, 194, 255, 0.09);
  border: 1px solid rgba(94, 194, 255, 0.26);
  border-radius: 8px;
  color: #d7f1ff;
  font-size: 12px;
  line-height: 1.6;
  padding: 9px 10px;
}

.video-drawer-gates,
.video-route-plan {
  display: grid;
  gap: 7px;
}

.video-drawer-gates span,
.video-route-plan span {
  background: rgba(2, 15, 32, 0.5);
  border: 1px solid rgba(125, 189, 255, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 8px;
}

.video-drawer-gates span.warn {
  border-color: rgba(245, 158, 11, 0.45);
}

.video-drawer-gates span.blocked {
  border-color: rgba(248, 113, 113, 0.52);
}

.video-drawer-gates strong,
.video-route-plan strong,
.video-route-plan b {
  color: #ffffff;
}

.video-drawer-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1100px) {
  .video-workspace-page,
  .video-workspace-form,
  .video-workspace-summary-bar,
  .video-task-panel-body {
    grid-template-columns: 1fr;
  }

  .video-logic-strip,
  .video-logic-flow,
  .video-module-plan {
    grid-template-columns: 1fr;
  }

  .video-workspace-side {
    position: static;
  }

  .video-step-progress,
  .video-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .video-workspace-screen {
    padding: 10px;
  }

  .video-workspace-topbar,
  .video-stage-head,
  .video-active-head,
  .video-footer-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-step-progress,
  .video-entry-grid {
    grid-template-columns: 1fr;
  }
}

/* image workspace final override v2 */
body:has(#legacyWorkbench.image-lab-mode:not([hidden])) {
  background:
    linear-gradient(rgba(73, 135, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 135, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 16% 8%, rgba(56, 189, 248, 0.18), transparent 34%),
    linear-gradient(135deg, #061326 0%, #091f3a 48%, #071827 100%) !important;
  background-size: 88px 88px, 88px 88px, auto, auto !important;
  color: #eaf4ff !important;
}

#legacyWorkbench.image-lab-mode {
  width: min(1580px, calc(100vw - 24px)) !important;
  margin: 16px auto 40px !important;
  color: #eaf4ff !important;
}

#legacyWorkbench.image-lab-mode .workbench-topbar,
#legacyWorkbench.image-lab-mode .hero,
#legacyWorkbench.image-lab-mode .side-nav {
  background: rgba(8, 25, 48, 0.82) !important;
  border: 1px solid rgba(125, 189, 255, 0.22) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px) !important;
}

#legacyWorkbench.image-lab-mode .workspace {
  display: grid !important;
  grid-template-columns: 286px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#legacyWorkbench.image-lab-mode .side-nav {
  max-height: calc(100vh - 132px) !important;
  overflow: auto !important;
  padding: 14px !important;
}

#legacyWorkbench.image-lab-mode .nav-section,
#legacyWorkbench.image-lab-mode .image-subnav-group {
  background: rgba(2, 15, 32, 0.5) !important;
  border: 1px solid rgba(125, 189, 255, 0.16) !important;
  border-radius: 12px !important;
  margin: 10px 0 !important;
  padding: 10px !important;
}

#legacyWorkbench.image-lab-mode .nav-section-title,
#legacyWorkbench.image-lab-mode .image-subnav-title {
  color: #9fd7ff !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

#legacyWorkbench.image-lab-mode .nav-item,
#legacyWorkbench.image-lab-mode .subnav-item {
  background: rgba(5, 19, 38, 0.72) !important;
  border: 1px solid rgba(125, 189, 255, 0.18) !important;
  color: #dcecff !important;
  border-radius: 9px !important;
}

#legacyWorkbench.image-lab-mode .nav-item.active,
#legacyWorkbench.image-lab-mode .subnav-item.active {
  background: linear-gradient(135deg, rgba(42, 118, 255, 0.42), rgba(31, 184, 255, 0.22)) !important;
  border-color: rgba(120, 206, 255, 0.72) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 26px rgba(22, 104, 255, 0.22) !important;
}

#legacyWorkbench.image-lab-mode .composer,
#legacyWorkbench.image-lab-mode .tasks,
#legacyWorkbench.image-lab-mode .metric-card {
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(235, 243, 255, 0.94)) !important;
  border: 1px solid rgba(162, 196, 232, 0.7) !important;
  border-radius: 10px !important;
  color: #08203c !important;
  box-shadow: 0 18px 44px rgba(2, 10, 28, 0.22) !important;
}

#legacyWorkbench.image-lab-mode .composer input,
#legacyWorkbench.image-lab-mode .composer select,
#legacyWorkbench.image-lab-mode .composer textarea {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(111, 154, 204, 0.55) !important;
  color: #0b1b32 !important;
}

#legacyWorkbench.image-lab-mode .upload-preview:empty,
#legacyWorkbench.image-lab-mode .image-dropzone:empty {
  background: rgba(239, 246, 255, 0.72) !important;
  border: 1px dashed rgba(93, 151, 214, 0.52) !important;
  min-height: 132px !important;
}

#legacyWorkbench.image-lab-mode .task {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(169, 194, 224, 0.72) !important;
  border-radius: 10px !important;
  color: #09213f !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-body {
  display: none !important;
}

#legacyWorkbench.image-lab-mode .task-toggle {
  cursor: pointer !important;
}

#legacyWorkbench.image-lab-mode .badge,
#legacyWorkbench.image-lab-mode .pill,
#legacyWorkbench.image-lab-mode .status-pill {
  background: rgba(225, 240, 255, 0.95) !important;
  border-color: rgba(123, 174, 232, 0.6) !important;
  color: #0b4d8f !important;
}

#legacyWorkbench.image-lab-mode button,
#legacyWorkbench.image-lab-mode .button {
  border-radius: 9px !important;
}

/* image workspace compact layout v2 */
#legacyWorkbench.image-lab-mode {
  width: min(1760px, calc(100vw - 24px)) !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 16px !important;
}

#legacyWorkbench.image-lab-mode .side-brand {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

#legacyWorkbench.image-lab-mode .side-brand h2,
#legacyWorkbench.image-lab-mode .side-copy,
#legacyWorkbench.image-lab-mode #imageEntryButton,
#legacyWorkbench.image-lab-mode #videoEntryButton,
#legacyWorkbench.image-lab-mode #videoSubnav,
#legacyWorkbench.image-lab-mode #imageFilterPanel,
#legacyWorkbench.image-lab-mode .hero,
#legacyWorkbench.image-lab-mode .image-dashboard {
  display: none !important;
}

#legacyWorkbench.image-lab-mode .side-nav {
  max-height: calc(100vh - 128px) !important;
  padding: 14px !important;
}

#legacyWorkbench.image-lab-mode .operator-panel {
  margin-bottom: 12px !important;
}

#legacyWorkbench.image-lab-mode .admin-panel {
  margin-bottom: 12px !important;
  padding: 10px !important;
}

#legacyWorkbench.image-lab-mode .subnav-items {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}

#legacyWorkbench.image-lab-mode .image-subnav-group {
  padding: 10px !important;
  margin: 0 0 10px !important;
}

#legacyWorkbench.image-lab-mode .workspace {
  grid-template-columns: minmax(760px, 1fr) 380px !important;
  align-items: start !important;
}

#legacyWorkbench.image-lab-mode #imageComposer {
  grid-column: 1 !important;
  min-height: calc(100vh - 128px) !important;
}

#legacyWorkbench.image-lab-mode #imageTasks {
  grid-column: 2 !important;
  margin-top: 0 !important;
  max-height: calc(100vh - 128px) !important;
  overflow: auto !important;
  padding: 16px !important;
}

#legacyWorkbench.image-lab-mode #imageComposer .section-head {
  align-items: center !important;
  margin-bottom: 14px !important;
}

#legacyWorkbench.image-lab-mode #imageComposer .section-head h2 {
  color: #0b1f37 !important;
  font-size: 28px !important;
}

#legacyWorkbench.image-lab-mode #imageComposer .section-head .eyebrow {
  color: #3ca9ff !important;
}

#legacyWorkbench.image-lab-mode #taskForm {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#legacyWorkbench.image-lab-mode #taskForm label.wide,
#legacyWorkbench.image-lab-mode #taskForm .wide {
  grid-column: 1 / -1 !important;
}

#legacyWorkbench.image-lab-mode #taskForm .upload-zone.wide {
  min-height: 190px !important;
}

#legacyWorkbench.image-lab-mode .upload-preview {
  min-height: 118px !important;
}

#legacyWorkbench.image-lab-mode #imageTasks .section-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#legacyWorkbench.image-lab-mode #imageTasks .section-head h2 {
  color: #0b1f37 !important;
  font-size: 22px !important;
}

#legacyWorkbench.image-lab-mode #imageTasks .section-note {
  display: none !important;
}

#legacyWorkbench.image-lab-mode .record-tools {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#legacyWorkbench.image-lab-mode .record-tools button {
  min-height: 36px !important;
  padding: 8px 10px !important;
}

#legacyWorkbench.image-lab-mode .task-list {
  gap: 10px !important;
}

#legacyWorkbench.image-lab-mode .task {
  padding: 12px !important;
  border-radius: 10px !important;
}

#legacyWorkbench.image-lab-mode .task-top {
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

#legacyWorkbench.image-lab-mode .task-title {
  align-items: baseline !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

#legacyWorkbench.image-lab-mode .task-code {
  color: #061c36 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

#legacyWorkbench.image-lab-mode .task-demand {
  color: #1e5b9f !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#legacyWorkbench.image-lab-mode .task .meta {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#legacyWorkbench.image-lab-mode .task-actions {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding-top: 8px !important;
}

#legacyWorkbench.image-lab-mode .task-actions button {
  min-height: 34px !important;
  padding: 7px 10px !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-top {
  margin: 0 !important;
  min-width: 0 !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-title {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-demand,
#legacyWorkbench.image-lab-mode .task.collapsed .meta,
#legacyWorkbench.image-lab-mode .task.collapsed .task-body,
#legacyWorkbench.image-lab-mode .task.collapsed .task-actions button:not([data-action="toggle"]) {
  display: none !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .status {
  justify-self: end !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-actions {
  border: 0 !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#legacyWorkbench.image-lab-mode .task.collapsed .task-actions button[data-action="toggle"] {
  width: 100% !important;
}

@media (max-width: 1280px) {
  #legacyWorkbench.image-lab-mode .workspace {
    grid-template-columns: 1fr !important;
  }

  #legacyWorkbench.image-lab-mode #imageComposer,
  #legacyWorkbench.image-lab-mode #imageTasks {
    grid-column: 1 !important;
    max-height: none !important;
  }
}

/* image workspace records-first layout v3 */
#legacyWorkbench.image-lab-mode {
  width: min(1760px, calc(100vw - 20px)) !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 16px !important;
}

#legacyWorkbench.image-lab-mode .workspace {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 16px !important;
}

#legacyWorkbench.image-lab-mode #imageComposer,
#legacyWorkbench.image-lab-mode #imageTasks {
  grid-column: 1 !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#legacyWorkbench.image-lab-mode #imageComposer {
  padding: 16px !important;
}

#legacyWorkbench.image-lab-mode #imageComposer .section-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  margin-bottom: 12px !important;
}

#legacyWorkbench.image-lab-mode #imageComposer .section-head h2 {
  font-size: 24px !important;
}

#legacyWorkbench.image-lab-mode #taskForm {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
}

#legacyWorkbench.image-lab-mode #taskForm label {
  gap: 6px !important;
}

#legacyWorkbench.image-lab-mode #taskForm label.wide,
#legacyWorkbench.image-lab-mode #taskForm .wide {
  grid-column: 1 / -1 !important;
}

#legacyWorkbench.image-lab-mode #taskForm textarea {
  min-height: 68px !important;
}

#legacyWorkbench.image-lab-mode #taskForm .upload-zone.wide {
  min-height: 118px !important;
  padding: 12px 14px !important;
}

#legacyWorkbench.image-lab-mode .upload-preview {
  min-height: 88px !important;
}

#legacyWorkbench.image-lab-mode #imageTasks {
  padding: 18px !important;
}

#legacyWorkbench.image-lab-mode #imageTasks .section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 14px !important;
}

#legacyWorkbench.image-lab-mode #imageTasks .section-head h2 {
  font-size: 24px !important;
}

#legacyWorkbench.image-lab-mode .record-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#legacyWorkbench.image-lab-mode .task-list {
  display: grid !important;
  gap: 14px !important;
}

#legacyWorkbench.image-lab-mode .task {
  border-radius: 14px !important;
  padding: 16px !important;
}

#legacyWorkbench.image-lab-mode .task-body {
  display: grid !important;
  gap: 14px !important;
}

#legacyWorkbench.image-lab-mode .outputs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

#legacyWorkbench.image-lab-mode .outputs:has(.output:only-child) {
  grid-template-columns: minmax(280px, 560px) !important;
}

#legacyWorkbench.image-lab-mode .output {
  align-content: start !important;
  border-radius: 14px !important;
  padding: 12px !important;
}

#legacyWorkbench.image-lab-mode .output img {
  aspect-ratio: 4 / 5 !important;
  background: #f7fbff !important;
  border-radius: 10px !important;
  max-height: none !important;
  object-fit: contain !important;
  width: 100% !important;
}

#legacyWorkbench.image-lab-mode .output-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#legacyWorkbench.image-lab-mode .output-continue-panel {
  border-top: 1px dashed rgba(118, 168, 222, 0.55) !important;
  display: grid !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

#legacyWorkbench.image-lab-mode .output-continue-head {
  align-items: baseline !important;
  color: #123154 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#legacyWorkbench.image-lab-mode .output-continue-head span {
  color: #537192 !important;
  font-size: 12px !important;
}

#legacyWorkbench.image-lab-mode .flow-direction-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap: 8px !important;
}

#legacyWorkbench.image-lab-mode .flow-direction-button {
  align-items: start !important;
  background: rgba(240, 247, 255, 0.98) !important;
  border: 1px solid rgba(119, 172, 232, 0.62) !important;
  color: #0b3767 !important;
  display: grid !important;
  gap: 2px !important;
  justify-items: start !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  text-align: left !important;
}

#legacyWorkbench.image-lab-mode .flow-direction-button span {
  color: #526f8d !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

@media (max-width: 1180px) {
  #legacyWorkbench.image-lab-mode {
    grid-template-columns: 1fr !important;
  }

  #legacyWorkbench.image-lab-mode #taskForm {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


.task-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px dashed rgba(82, 150, 230, 0.55);
  border-radius: 12px;
  background: rgba(239, 247, 255, 0.92);
  color: #123154;
  font-size: 13px;
  font-weight: 800;
}

.task-load-more .ghost {
  min-width: 132px;
}


.record-tools .active {
  background: #2b7df0;
  border-color: rgba(43, 125, 240, 0.72);
  color: #ffffff;
}

#filterDateRange:disabled,
#filterOperator:disabled {
  opacity: 0.64;
  cursor: not-allowed;
}


/* image archive entry and persistent pager */
#legacyWorkbench.image-lab-mode.archive-record-mode #imageFilterPanel {
  display: grid !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 12px !important;
}

#legacyWorkbench.image-lab-mode.archive-record-mode #imageFilterPanel .subnav-label {
  color: #7fd7ff !important;
}

#openArchiveButton.active {
  background: #2b7df0 !important;
  border-color: rgba(43, 125, 240, 0.72) !important;
  color: #ffffff !important;
}

.image-record-pager {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-bottom: 10px;
  background: rgba(245, 249, 255, 0.96);
  backdrop-filter: blur(8px);
}

#legacyWorkbench.image-lab-mode #imageRecordPager .task-load-more {
  margin-top: 0 !important;
}

.task-load-more.is-complete {
  border-style: solid;
  opacity: 0.82;
}

.task-load-more .pager-complete {
  min-width: 112px;
  text-align: center;
  color: #2f5d91;
}