:root {
  --bg: #f8f8f5;
  --surface: #ffffff;
  --surface-2: #f3f3ef;
  --surface-3: #eeeee9;
  --border: #e9e7df;
  --border-strong: #ddd9cf;
  --text: #101522;
  --text-soft: #596273;
  --text-mute: #a5adb8;
  --accent: #7c3aed;
  --accent-soft: #f4ecff;
  --accent-ink: #5b21b6;
  --orange: #b45309;
  --orange-soft: #fff7ed;
  --blue: #1d4ed8;
  --blue-soft: #eff6ff;
  --green: #047857;
  --green-soft: #ecfdf5;
  --rose: #be123c;
  --rose-soft: #fff1f2;
  --teal: #0f766e;
  --teal-soft: #f0fdfa;
  --amber: #a16207;
  --amber-soft: #fefce8;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --shadow-sm: 0 1px 1px rgba(17, 24, 39, 0.03), 0 10px 28px -26px rgba(17, 24, 39, 0.32);
  --shadow-md: 0 32px 84px -58px rgba(17, 24, 39, 0.42), 0 14px 34px -32px rgba(17, 24, 39, 0.22);
  --shadow-lg: 0 38px 120px -72px rgba(17, 24, 39, 0.5), 0 20px 44px -38px rgba(17, 24, 39, 0.25);
  --mono: "SF Mono", "JetBrains Mono", "Menlo", monospace;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-pill: 999px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-base);
  letter-spacing: 0;
}

body {
  margin: 0;
  min-width: 320px;
}

button,
textarea,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

.app-shell {
  min-height: 100vh;
}

.icon-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 4;
  width: 66px;
  background: var(--surface-3);
  border-right: 1px solid var(--border);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}

.rail-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--surface);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}

.rail-button {
  width: 54px;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
}

.rail-button span {
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  background: var(--surface);
  font-weight: 800;
  font-size: var(--fs-xs);
}

.rail-button small {
  font-size: var(--fs-xs);
}

.rail-button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.rail-button.active span {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.section-nav {
  position: fixed;
  inset: 0 auto 0 66px;
  z-index: 3;
  width: 210px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4);
  display: grid;
  align-content: start;
  gap: var(--sp-5);
}

.section-brand {
  display: grid;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.section-brand strong {
  font-size: var(--fs-lg);
}

.section-brand span,
.section-label,
.breadcrumb,
.eyebrow,
.metric-card span,
.metric-card small,
.fact-item span,
.agent-mini span,
.setup-panel span,
.setup-panel p,
.video-card small,
.video-card span,
.insight-row span,
.asset-card p,
.workflow-card p,
.workflow-card span,
.task-row span,
.task-row small,
.center-title p,
.hero-composer p {
  color: var(--text-soft);
}

.section-group {
  display: grid;
  gap: var(--sp-1);
}

.section-label,
.eyebrow {
  text-transform: uppercase;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0;
}

.section-nav-group-title {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 850;
  margin: var(--sp-3) var(--sp-3) var(--sp-1);
}

.subnav-item {
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  min-height: 36px;
  text-align: left;
  color: var(--text-soft);
  padding: 0 var(--sp-3);
}

.subnav-item.active,
.subnav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.main-view {
  margin-left: 276px;
  min-height: 100vh;
  padding: 0 var(--sp-5) 96px;
}

.main-view.no-section-nav {
  margin-left: 66px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
}

.top-actions,
.button-row,
.agent-picker,
.tool-row,
.compose-footer,
.composer-footer,
.mode-toggle,
.context-actions,
.filter-row,
.task-tabs,
.account-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pill-button,
.avatar-button,
.soft-button,
.primary-button,
.text-action,
.send-button {
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  min-height: 34px;
  padding: 0 var(--sp-3);
  font-weight: 750;
}

.primary-button,
.send-button {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.text-action {
  border-color: transparent;
  background: transparent;
  color: var(--accent-ink);
}

.avatar-button {
  width: 36px;
  padding: 0;
}

.page-stack {
  display: grid;
  gap: var(--sp-5);
  max-width: 1500px;
  margin: 0 auto;
}

.greeting-line {
  margin-top: var(--sp-4);
  color: var(--text-soft);
}

.hero-composer,
.create-composer,
.content-band,
.product-detail,
.account-strip,
.task-empty {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.hero-composer {
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  background: linear-gradient(135deg, var(--surface), var(--surface) 55%, var(--accent-soft));
}

.workspace-dashboard {
  gap: var(--sp-5);
}

.workspace-generation-entry {
  display: grid;
  gap: var(--sp-4);
}

.workspace-generation-entry.generation-studio {
  min-height: 0;
  margin: 0;
  background: transparent;
}

.workspace-generation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: end;
}

.workspace-generation-head h1 {
  margin: var(--sp-1) 0;
  font-size: 34px;
  line-height: 1.14;
  text-align: left;
}

.workspace-generation-head p {
  margin: 0;
  max-width: 760px;
  color: var(--text-soft);
  line-height: 1.6;
}

.workspace-generation-box {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.workspace-generation-box.generation-studio-shell {
  padding: var(--sp-4);
}

.workspace-generation-entry .generation-studio-head {
  justify-items: center;
}

.workspace-generation-entry .generation-studio-composer {
  max-width: none;
}

.workspace-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
  gap: var(--sp-4);
  align-items: stretch;
}

.workspace-weekly-data,
.workspace-daily-report,
.workspace-creation-todo,
.workspace-diagnosis-context {
  display: grid;
  gap: var(--sp-4);
}

.workspace-weekly-metrics,
.workspace-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.workspace-weekly-metrics p,
.workspace-report-metrics p {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workspace-weekly-metrics span,
.workspace-report-metrics span,
.workspace-todo-list span,
.workspace-diagnosis-list span {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.workspace-weekly-metrics strong,
.workspace-report-metrics strong {
  font-size: 24px;
  letter-spacing: 0;
}

.workspace-weekly-metrics small,
.workspace-report-metrics small {
  color: var(--text-mute);
}

.workspace-mini-chart {
  width: 100%;
  height: 220px;
  overflow: visible;
}

.workspace-mini-chart line {
  stroke: var(--border);
  stroke-width: 1;
}

.workspace-mini-chart polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-mini-chart circle {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 4;
}

.workspace-mini-chart text {
  fill: var(--text-soft);
  font-size: 13px;
  font-weight: 760;
}

.workspace-todo-list {
  display: grid;
  gap: var(--sp-2);
}

.workspace-todo-list button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 84px 76px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  color: var(--text);
  text-align: left;
}

.workspace-todo-list strong {
  color: var(--accent);
  font-size: 20px;
}

.workspace-todo-list small {
  color: var(--text-mute);
  line-height: 1.45;
}

.workspace-diagnosis-brief {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
  display: grid;
  gap: 6px;
}

.workspace-diagnosis-brief p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.workspace-diagnosis-list {
  display: grid;
  gap: var(--sp-2);
}

.workspace-diagnosis-list article {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  gap: 5px;
}

.workspace-diagnosis-list article strong {
  font-size: var(--fs-md);
}

.workspace-diagnosis-list article p {
  margin: 0;
  color: var(--text-mute);
  line-height: 1.45;
}

.workspace-hero-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.workspace-cockpit {
  display: grid;
  gap: var(--sp-4);
}

.workspace-cockpit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: var(--sp-5);
  align-items: start;
}

.workspace-cockpit-head h1 {
  margin: var(--sp-1) 0;
  font-size: 30px;
  line-height: 1.15;
}

.workspace-cockpit-head p {
  max-width: 760px;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.workspace-today-score {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface-2);
  display: grid;
  gap: 4px;
  min-width: 210px;
}

.workspace-today-score span,
.workspace-today-score small,
.workspace-cockpit-summary small {
  color: var(--text-soft);
}

.workspace-today-score strong {
  font-size: 30px;
  letter-spacing: 0;
}

.workspace-cockpit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.workspace-cockpit-summary > div {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: grid;
  gap: 3px;
}

.workspace-cockpit-summary span,
.workspace-module-card header span {
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-weight: 780;
}

.workspace-cockpit-summary strong {
  font-size: 22px;
}

.workspace-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.workspace-module-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
  border-top-width: 4px;
}

.workspace-module-card.blue {
  border-top-color: #2563eb;
}

.workspace-module-card.green {
  border-top-color: #059669;
}

.workspace-module-card.teal {
  border-top-color: #0f766e;
}

.workspace-module-card.amber {
  border-top-color: #d97706;
}

.workspace-module-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: start;
}

.workspace-module-card h2 {
  margin: 3px 0 0;
  font-size: 19px;
}

.workspace-module-link {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 8px 12px;
  color: var(--accent);
  font-weight: 820;
  white-space: nowrap;
}

.workspace-module-metrics {
  display: grid;
  gap: var(--sp-3);
}

.workspace-module-metrics p {
  display: grid;
  grid-template-columns: minmax(74px, 0.8fr) minmax(0, 1fr);
  gap: 3px var(--sp-2);
  margin: 0;
  align-items: baseline;
}

.workspace-module-metrics span {
  color: var(--text-soft);
}

.workspace-module-metrics strong {
  text-align: right;
  font-size: 18px;
  min-width: 0;
}

.workspace-module-metrics em {
  grid-column: 1 / -1;
  color: var(--text-mute);
  font-style: normal;
  font-size: var(--fs-xs);
}

.workspace-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.workspace-daily-focus,
.workspace-asset-health,
.workspace-data-strip,
.workspace-risk-list,
.workspace-tools-panel {
  display: grid;
  gap: var(--sp-4);
}

.workspace-focus-list {
  display: grid;
  gap: var(--sp-2);
}

.workspace-focus-list button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 92px 82px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  text-align: left;
  color: var(--text);
}

.workspace-focus-list span,
.workspace-asset-health span,
.workspace-data-strip span,
.workspace-risk-list span {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.workspace-focus-list strong {
  color: var(--accent);
}

.workspace-focus-list small {
  color: var(--text-mute);
}

.workspace-asset-health > div:last-child,
.workspace-data-strip > div:last-child {
  display: grid;
  gap: var(--sp-2);
}

.workspace-asset-health p,
.workspace-data-strip p {
  display: grid;
  grid-template-columns: 100px minmax(80px, auto) minmax(0, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  align-items: center;
}

.workspace-asset-health strong,
.workspace-data-strip strong {
  font-size: 20px;
}

.workspace-asset-health em,
.workspace-data-strip small {
  color: var(--text-mute);
  font-style: normal;
}

.workspace-risk-list article {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: grid;
  gap: 4px;
}

.workspace-risk-list article strong {
  font-size: var(--fs-md);
}

.workspace-risk-list article p {
  margin: 0;
  color: var(--text-mute);
  line-height: 1.5;
}

.workspace-tools-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.workspace-greeting {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  align-items: start;
}

.workspace-greeting h1 {
  margin: var(--sp-1) 0;
  font-size: 28px;
  line-height: 1.2;
}

.workspace-greeting p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  color: var(--text-soft);
}

.workspace-greeting p span {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.82);
  padding: 4px 10px;
}

.news-ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 520px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.news-ticker strong {
  color: var(--accent);
}

.workbench-agent-card {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.62);
}

.agent-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: start;
}

.agent-card-head strong {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
}

.agent-card-head small {
  color: var(--text-soft);
}

.workbench-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.workbench-quick-grid button {
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-weight: 780;
  text-align: left;
}

.workbench-quick-grid button.blue {
  background: #eff6ff;
  border-color: #dbeafe;
}

.workbench-quick-grid button.cyan {
  background: #ecfeff;
  border-color: #cffafe;
}

.workbench-quick-grid button.orange {
  background: #fff7ed;
  border-color: #fed7aa;
}

.workbench-quick-grid button.green {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.workbench-quick-grid button.amber {
  background: #fffbeb;
  border-color: #fde68a;
}

.workbench-quick-grid button.teal {
  background: #f0fdfa;
  border-color: #ccfbf1;
}

.workbench-quick-grid strong {
  color: var(--text-mute);
}

.workbench-agent-team {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  color: var(--text-mute);
  font-size: var(--fs-xs);
}

.workbench-agent-team > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.workbench-agent-team button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.88);
  min-height: 54px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.workbench-command {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.workbench-command textarea {
  min-height: 90px;
  border: 0;
  resize: vertical;
  outline: 0;
  line-height: 1.6;
  color: var(--text);
}

.command-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.command-tools button {
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-weight: 800;
}

.command-tools .send-button {
  margin-left: auto;
  background: var(--accent);
  color: var(--surface);
}

.workspace-section {
  display: grid;
  gap: var(--sp-4);
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.performance-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.performance-card.blue {
  background: #f3f7ff;
}

.performance-card.purple {
  background: #f8f5ff;
}

.performance-card.orange {
  background: #fff8f1;
  border-color: #fed7aa;
}

.performance-card h3 {
  margin: 0 0 var(--sp-2);
}

.performance-card p {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 150px;
  gap: var(--sp-2);
  margin: 0;
  align-items: center;
}

.performance-card span {
  color: var(--text-soft);
}

.performance-card strong {
  text-align: right;
}

.performance-card em {
  color: var(--green);
  font-style: normal;
  font-weight: 760;
}

.opportunity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
  gap: var(--sp-4);
  align-items: start;
}

.opportunity-list {
  display: grid;
  gap: var(--sp-3);
}

.opportunity-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.opportunity-row:last-child {
  border-bottom: 0;
}

.opportunity-row img {
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-2);
}

.opportunity-row p {
  margin: 3px 0;
  color: var(--text-soft);
  line-height: 1.45;
}

.opportunity-row small {
  color: var(--text-mute);
}

.hot-video-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.hot-video-tile {
  position: relative;
  overflow: hidden;
  min-height: 188px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--surface);
  padding: 0;
  text-align: left;
}

.hot-video-tile img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.hot-video-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 21, 34, 0.08), rgba(16, 21, 34, 0.7));
}

.hot-video-tile span,
.hot-video-tile strong,
.hot-video-tile small {
  position: absolute;
  z-index: 1;
}

.hot-video-tile span {
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: rgba(16, 21, 34, 0.72);
  font-size: var(--fs-xs);
  font-weight: 850;
}

.hot-video-tile strong {
  right: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(16, 21, 34, 0.62);
}

.hot-video-tile small {
  left: 8px;
  bottom: 8px;
}

.agent-line {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.agent-line h1,
.center-title h1 {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: 0;
}

.agent-line p {
  margin: var(--sp-1) 0 0;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.quick-grid button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 54px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: 0 var(--sp-4);
  font-weight: 720;
}

.agent-chip {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  min-height: 36px;
  background: var(--surface);
  color: var(--text);
  padding: 0 var(--sp-3) 0 var(--sp-1);
  font-weight: 720;
}

.agent-chip span,
.avatar-chip {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  display: inline-grid;
  place-items: center;
  margin-right: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.agent-chip.active {
  border-color: var(--text);
  box-shadow: var(--shadow-sm);
}

.agent-chip.blue span,
.avatar-chip.blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.agent-chip.rose span,
.avatar-chip.rose {
  background: var(--rose-soft);
  color: var(--rose);
}

.agent-chip.amber span,
.avatar-chip.amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.agent-chip.green span,
.avatar-chip.green {
  background: var(--green-soft);
  color: var(--green);
}

.agent-chip.teal span,
.avatar-chip.teal {
  background: var(--teal-soft);
  color: var(--teal);
}

.chat-composer {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  min-height: 128px;
  display: grid;
  overflow: hidden;
}

.chat-composer textarea,
.create-composer textarea {
  border: 0;
  resize: vertical;
  min-height: 92px;
  padding: var(--sp-4);
  color: var(--text);
}

.composer-footer {
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding: var(--sp-3);
}

.composer-footer button,
.context-actions button {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
}

.composer-footer .send-button {
  width: auto;
  min-width: 74px;
  height: 34px;
  border: 1px solid #101522;
  background: #101522;
  color: var(--surface);
  padding: 0 var(--sp-4);
}

.composer-footer span,
.context-actions span {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  color: var(--text-soft);
  background: var(--surface-2);
  font-size: var(--fs-xs);
}

.panel-grid {
  display: grid;
  gap: var(--sp-4);
}

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

.setup-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

.setup-panel h3,
.setup-panel p {
  margin: var(--sp-1) 0 0;
}

.content-band {
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

.content-band.accent {
  background: var(--green-soft);
  border-color: var(--green-soft);
}

.content-band.accent-soft {
  background: linear-gradient(135deg, var(--surface), var(--blue-soft));
}

.section-heading,
.kit-card header,
.strategy-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.section-heading h2,
.content-band h2 {
  margin: var(--sp-1) 0 0;
  letter-spacing: 0;
}

.run-summary {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 320px;
  gap: var(--sp-4);
  align-items: start;
}

.run-summary > img,
.product-detail > img,
.asset-card img,
.video-card img {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  object-fit: cover;
}

.run-summary > img {
  width: 180px;
  aspect-ratio: 4 / 5;
}

.fact-grid {
  display: grid;
  gap: var(--sp-2);
}

.fact-item {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: var(--sp-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-2);
}

.fact-item strong {
  font-weight: 650;
  line-height: 1.45;
}

.agent-card-list {
  display: grid;
  gap: var(--sp-2);
}

.agent-mini {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-1);
  background: var(--surface);
}

.agent-mini.blue {
  border-color: var(--blue-soft);
}

.agent-mini.rose {
  border-color: var(--rose-soft);
}

.agent-mini.amber {
  border-color: var(--amber-soft);
}

.agent-mini.green {
  border-color: var(--green-soft);
}

.agent-mini.teal {
  border-color: var(--teal-soft);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.metric-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  min-height: 116px;
  display: grid;
  gap: var(--sp-2);
}

.metric-card strong {
  font-size: var(--fs-xl);
}

.seller-analytics-page {
  gap: var(--sp-4);
}

.store-performance-overview {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 2.05fr);
  align-items: stretch;
  gap: var(--sp-4);
}

.store-gmv-hero,
.store-top-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.store-gmv-hero {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 176px;
  padding: var(--sp-5);
}

.store-gmv-hero span,
.store-top-card header span {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 820;
}

.store-gmv-hero strong {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: 0;
}

.store-gmv-hero small,
.store-top-card small {
  color: var(--text-soft);
  line-height: 1.45;
}

.store-top-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: var(--sp-3);
}

.store-top-section {
  display: grid;
  gap: var(--sp-3);
}

.store-top-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: var(--sp-4);
}

.store-top-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.store-top-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.store-top-title strong {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 820;
}

.store-top-title small {
  font-size: var(--fs-xs);
  font-weight: 760;
}

.store-top-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.store-top-link:hover {
  border-color: rgba(42, 111, 151, 0.36);
  background: #eef7fb;
  color: var(--blue);
}

.store-top-list {
  display: grid;
  gap: 8px;
}

.store-top-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(106px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.store-top-row > b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.store-top-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.store-top-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-top-row small {
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-top-sales {
  display: grid;
  justify-items: end;
  min-width: 54px;
  font-style: normal;
}

.store-top-metrics {
  grid-template-columns: repeat(2, minmax(44px, auto));
  gap: 10px;
  min-width: 106px;
}

.store-top-metrics span {
  display: grid;
  justify-items: end;
}

.store-top-sales strong {
  color: var(--blue);
  font-size: var(--fs-sm);
}

.store-top-sales small {
  font-size: 10px;
  line-height: 1.1;
}

.store-secondary-metrics-shell {
  display: grid;
  align-content: stretch;
  gap: var(--sp-3);
}

.store-overview-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
}

.store-country-lite {
  align-self: stretch;
}

.store-country-list {
  display: grid;
  gap: 8px;
}

.store-country-list article {
  display: grid;
  grid-template-columns: 48px 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.store-country-list span {
  color: var(--blue);
  font-weight: 850;
}

.store-country-list small {
  overflow: hidden;
  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.analytics-metric-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.analytics-selectable-metric {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 108px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.analytics-selectable-metric.active {
  border-color: rgba(13, 148, 136, 0.48);
  box-shadow: inset 4px 0 0 var(--teal), var(--shadow-sm);
}

.analytics-selectable-metric span {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 850;
}

.analytics-selectable-metric strong {
  font-size: var(--fs-xl);
  letter-spacing: 0;
}

.analytics-selectable-metric small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
}

.analytics-official-section,
.analytics-breakdown-panel,
.analytics-trend-panel {
  display: grid;
  gap: var(--sp-3);
}

.analytics-trend-panel {
  min-width: 0;
}

.analytics-trend-panel > .analytics-line-chart {
  min-height: 100%;
}

.analytics-trend-summary {
  display: none;
}

.analytics-breakdown-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.analytics-breakdown-list {
  display: grid;
  gap: var(--sp-2);
}

.analytics-breakdown-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.15fr) 110px 120px minmax(180px, 1fr) 88px;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.analytics-breakdown-row strong,
.analytics-breakdown-row small {
  display: block;
  min-width: 0;
}

.analytics-breakdown-row small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-breakdown-row b {
  white-space: nowrap;
}

.analytics-breakdown-row em {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 820;
  white-space: nowrap;
}

.analytics-breakdown-row i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 42, 0.06);
}

.analytics-breakdown-row i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.analytics-object-detail-link {
  justify-self: end;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--blue);
  min-height: 30px;
  padding: 0 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.analytics-object-detail-link:hover {
  border-color: rgba(42, 111, 151, 0.36);
  background: #eef7fb;
}

.analytics-product-funnel {
  display: grid;
}

.analytics-contribution-table .data-row {
  grid-template-columns: 150px 148px 150px 110px 110px 82px 100px 96px 150px 100px;
  min-width: 1196px;
}

.analytics-chart-grid {
  display: grid;
  gap: var(--sp-4);
}

.analytics-chart-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-chart-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.analytics-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.analytics-chart-head strong {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.analytics-line-chart svg {
  display: block;
  width: 100%;
  height: 200px;
}

.analytics-line-chart path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.analytics-line-chart .analytics-grid-line,
.analytics-line-chart .analytics-axis-line {
  stroke: var(--border);
  stroke-width: 1;
}

.analytics-line-chart .analytics-y-axis text {
  fill: var(--text-soft);
  font-size: 11px;
  font-weight: 720;
  text-anchor: end;
}

.analytics-line-chart polyline {
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.analytics-line-chart circle {
  fill: #ffffff;
  stroke: var(--blue);
  stroke-width: 3;
}

.analytics-axis-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  gap: 4px;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 720;
  white-space: nowrap;
  text-align: center;
}

.analytics-account-trend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.analytics-account-trend-grid .analytics-chart-card {
  min-height: 246px;
}

.analytics-account-trend-grid .analytics-line-chart svg {
  height: 132px;
}

.analytics-bars,
.analytics-funnel-steps {
  display: grid;
  gap: 10px;
}

.analytics-bar-chart {
  min-width: 0;
}

.analytics-bars article,
.analytics-funnel-steps article {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.35fr) minmax(70px, auto);
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.analytics-bars strong,
.analytics-bars small,
.analytics-funnel-steps strong,
.analytics-funnel-steps small {
  display: block;
}

.analytics-bars small,
.analytics-funnel-steps small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.analytics-bars span,
.analytics-funnel-steps span {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.analytics-bars i,
.analytics-funnel-steps i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.analytics-bars b,
.analytics-funnel-steps b {
  justify-self: end;
  color: var(--text);
  white-space: nowrap;
}

.analytics-funnel-steps i {
  background: linear-gradient(90deg, var(--amber), var(--blue));
}

.analytics-scatter-plot {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(90deg, transparent 49%, rgba(42, 111, 151, 0.08) 49% 50%, transparent 50%),
    linear-gradient(0deg, transparent 49%, rgba(42, 111, 151, 0.08) 49% 50%, transparent 50%),
    var(--surface-2);
}

.analytics-scatter-plot .axis {
  position: absolute;
  background: rgba(104, 113, 130, 0.22);
}

.analytics-scatter-plot .axis.x {
  left: 7%;
  right: 5%;
  bottom: 20px;
  height: 1px;
}

.analytics-scatter-plot .axis.y {
  left: 7%;
  top: 18px;
  bottom: 20px;
  width: 1px;
}

.analytics-scatter-plot i {
  position: absolute;
  display: inline-flex;
  max-width: 148px;
  transform: translate(-50%, 50%);
  border: 1px solid rgba(42, 111, 151, 0.26);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--blue);
  padding: 4px 7px;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 820;
  box-shadow: var(--shadow-sm);
}

.analytics-scatter-plot b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-action-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.analytics-action-list article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
}

.analytics-action-list span,
.analytics-action-list p {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.analytics-action-list p {
  margin: 0;
}

.analytics-action-list em {
  width: fit-content;
  border-radius: var(--r-pill);
  background: #fff4d8;
  color: #8b5a00;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 850;
}

.product-detail {
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  gap: var(--sp-4);
}

.product-detail > img {
  width: 180px;
  aspect-ratio: 4 / 5;
}

.product-facts {
  display: grid;
  gap: var(--sp-2);
}

.score-card {
  border-radius: var(--r-md);
  border: 1px solid var(--accent-soft);
  background: var(--accent-soft);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.score-card strong {
  font-size: var(--fs-2xl);
  color: var(--accent-ink);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

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

.video-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.video-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 0;
}

.video-card div {
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-1);
}

.insight-list {
  display: grid;
  gap: var(--sp-3);
}

.insight-row,
.rank-row {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
}

.insight-row {
  display: grid;
  gap: var(--sp-1);
}

.rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 110px;
  gap: var(--sp-3);
}

.rank-row > span {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 800;
}

.rank-row p {
  margin: var(--sp-1) 0 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.rank-row em {
  display: inline-block;
  margin-left: var(--sp-2);
  color: var(--green);
  font-style: normal;
  font-size: var(--fs-xs);
}

.center-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
}

.center-title.compact {
  padding-top: var(--sp-4);
}

.mode-word {
  border: 0;
  background: transparent;
  color: var(--rose);
  font-size: inherit;
  font-weight: 800;
}

.create-composer {
  max-width: 980px;
  width: 100%;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  box-shadow: var(--shadow-md);
}

.tool-row button,
.filter-row button,
.mode-toggle button,
.task-tabs button {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  min-height: 32px;
  padding: 0 var(--sp-3);
  color: var(--text-soft);
}

.tool-row button.active,
.filter-row button.active,
.mode-toggle button.active,
.task-tabs button.active {
  color: var(--text);
  border-color: var(--text);
  background: var(--surface-2);
}

.compose-area {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--sp-3);
  min-height: 142px;
}

.reference-slot {
  border: 1px dashed var(--orange);
  border-radius: var(--r-md);
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
}

.reference-slot button {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--surface);
  color: var(--orange);
}

.compose-footer {
  justify-content: space-between;
}

.subpage-header {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.subpage-header h1,
.flow-panel h1,
.script-hero h1 {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-2xl);
  line-height: 1.15;
}

.subpage-header p,
.flow-panel p,
.script-hero p,
.pattern-tile p,
.feature-card p,
.compact-agent-box p {
  color: var(--text-soft);
  line-height: 1.55;
  margin: var(--sp-2) 0 0;
}

.pattern-grid,
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.pattern-tile,
.feature-card,
.compact-agent-box,
.flow-panel,
.phone-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
}

.pattern-tile {
  min-height: 148px;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.pattern-tile span {
  width: fit-content;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.feature-card {
  min-height: 150px;
  background: linear-gradient(135deg, var(--surface), var(--rose-soft));
}

.compact-agent-box {
  display: grid;
  gap: var(--sp-3);
}

.compact-agent-box > div {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.flow-page {
  max-width: 1280px;
}

.flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
}

.flow-steps div {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-soft);
}

.flow-steps span {
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 800;
}

.flow-steps .active {
  color: var(--text);
}

.flow-steps .active span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.flow-shell {
  display: grid;
  grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.clone-preview {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: var(--sp-6);
}

.phone-card {
  width: min(340px, 100%);
  aspect-ratio: 9 / 16;
  display: grid;
  align-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.clone-frame {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.clone-frame img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--r-md);
}

.clone-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  text-align: center;
  font-size: var(--fs-xl);
}

.flow-panel {
  border: 0;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-6);
}

.upload-box {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  min-height: 170px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  text-align: center;
}

.upload-box span,
.platform-chips span,
.generation-console small,
.generation-console span {
  color: var(--text-soft);
}

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.divider-label::before,
.divider-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.source-input,
.script-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-2);
}

.source-input span,
.market-select {
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-soft);
}

.source-input input,
.script-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  color: var(--text);
}

.platform-chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.platform-chips span {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3);
}

.flow-next {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.clone-result {
  display: grid;
  gap: var(--sp-2);
}

.generation-console {
  display: grid;
  gap: var(--sp-3);
}

.generation-console article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  background: var(--surface);
}

.generation-console img {
  width: 82px;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.generation-console div {
  display: grid;
  align-content: center;
  gap: var(--sp-1);
}

.script-page {
  max-width: 1180px;
}

.script-hero {
  padding-top: var(--sp-6);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
}

.script-hero p span {
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.segmented {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: var(--sp-1);
  display: flex;
  gap: var(--sp-1);
}

.segmented button,
.market-select {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
}

.segmented button {
  border-radius: var(--r-pill);
  padding: 0 var(--sp-3);
}

.segmented .active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.script-search {
  width: min(720px, 100%);
  box-shadow: var(--shadow-sm);
}

.analysis-status {
  border: 1px solid var(--green-soft);
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  padding: var(--sp-2) var(--sp-3);
  font-weight: 750;
}

.script-preview {
  display: grid;
  gap: var(--sp-3);
}

.script-preview p {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--text-soft);
  line-height: 1.55;
  background: var(--surface);
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}

.strategy-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-3);
}

.strategy-card h3 {
  margin: 0;
  font-size: var(--fs-base);
}

.strategy-card .fact-item {
  grid-template-columns: 1fr;
  gap: var(--sp-1);
}

.strategy-card small,
.task-status span {
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.good {
  background: var(--green-soft);
  color: var(--green);
}

.work {
  background: var(--blue-soft);
  color: var(--blue);
}

.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.neutral {
  background: var(--surface-2);
  color: var(--text-soft);
}

.account-strip {
  padding: var(--sp-3) var(--sp-4);
  justify-content: space-between;
}

.account-strip span {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
}

.kit-list,
.asset-section,
.template-grid {
  display: grid;
  gap: var(--sp-3);
}

.kit-card,
.asset-card,
.workflow-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
}

.kit-card {
  display: grid;
  gap: var(--sp-2);
}

.kit-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.kit-card span {
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.asset-section {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.asset-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--sp-3);
}

.asset-card img {
  width: 110px;
  aspect-ratio: 1;
}

.asset-card p {
  margin: var(--sp-1) 0 0;
  line-height: 1.5;
}

.constraint-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.constraint-grid span {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  padding: var(--sp-2) var(--sp-3);
}

.chat-page {
  min-height: calc(100vh - 154px);
  display: grid;
  place-items: start center;
  padding-top: 120px;
}

.chat-center {
  width: min(780px, 100%);
  display: grid;
  gap: var(--sp-4);
  text-align: center;
}

.chat-center h1 {
  margin: 0;
  font-size: var(--fs-2xl);
}

.chat-center p {
  margin: 0;
  color: var(--text-soft);
}

.chat-center .chat-composer {
  text-align: left;
}

.agent-picker.large {
  justify-content: center;
}

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

.workflow-card {
  display: grid;
  gap: var(--sp-3);
}

.workflow-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workflow-card button {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  min-height: 30px;
  background: var(--surface);
  padding: 0 var(--sp-3);
}

.tasks-page {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  min-height: calc(100vh - 58px);
  margin: 0 calc(var(--sp-5) * -1);
  border-top: 1px solid var(--border);
}

.task-list-panel {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4);
  display: grid;
  align-content: start;
  gap: var(--sp-4);
}

.search-input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  min-height: 42px;
  padding: 0 var(--sp-3);
  background: var(--surface);
}

.task-list {
  display: grid;
  gap: var(--sp-3);
}

.task-row {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-3);
}

.task-row strong,
.task-row span,
.task-row small {
  display: block;
}

.task-status {
  display: grid;
  gap: var(--sp-2);
}

.progress {
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.task-detail {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}

.task-empty {
  width: min(620px, 100%);
  text-align: center;
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}

.bottom-command {
  position: fixed;
  left: calc(276px + 50%);
  bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 5;
  width: min(540px, calc(100vw - 330px));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.bottom-command span {
  flex: 1;
  color: var(--text-soft);
}

.bottom-command button {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--accent);
  color: var(--surface);
}

.notice-toast {
  position: fixed;
  right: var(--sp-5);
  bottom: 82px;
  z-index: 6;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--surface);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.notice-toast span {
  flex: 1;
  line-height: 1.45;
}

.notice-toast button {
  border: 1px solid color-mix(in srgb, var(--surface) 40%, transparent);
  background: transparent;
  color: var(--surface);
  border-radius: var(--r-pill);
  min-height: 30px;
  padding: 0 var(--sp-3);
}

/* v3 visual polish */
html {
  background:
    linear-gradient(180deg, #fbfbf8 0%, var(--bg) 46%, #f4f5f1 100%);
}

body {
  color: var(--text);
}

.icon-rail {
  width: 58px;
  background: #ededeb;
  border-right-color: #e3e1da;
  gap: 10px;
  padding: 12px 6px;
}

.rail-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-bottom: 22px;
  box-shadow: 0 12px 26px -18px rgba(16, 21, 34, 0.8);
}

.rail-button {
  width: 46px;
  min-height: 52px;
  border-radius: 8px;
  color: #636b79;
}

.rail-button span {
  width: 25px;
  height: 25px;
  border-color: #d9d7cf;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.rail-button.active {
  background: #ffffff;
  box-shadow: 0 14px 30px -24px rgba(16, 21, 34, 0.6);
}

.section-nav {
  left: 58px;
  width: 196px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  border-right-color: #ebe9e3;
  padding: 18px 14px;
}

.section-brand {
  gap: 6px;
  padding-bottom: 18px;
  border-bottom-color: #eceae2;
}

.section-brand strong {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.section-label {
  color: #6e7480;
}

.subnav-item {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  color: #4f5868;
}

.subnav-item.active,
.subnav-item:hover {
  background: #f3f3ef;
  color: #111827;
}

.main-view {
  margin-left: 254px;
  padding: 0 32px 110px;
}

.main-view.no-section-nav {
  margin-left: 58px;
}

.topbar {
  min-height: 62px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4a5260;
  font-size: 13px;
}

.breadcrumb-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 850;
  padding: 0;
  cursor: pointer;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  text-decoration: underline;
}

.pill-button,
.avatar-button,
.soft-button,
.primary-button,
.text-action,
.send-button {
  min-height: 36px;
  border-color: #dedbd2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.primary-button,
.send-button {
  background: #101522;
  border-color: #101522;
  box-shadow: 0 14px 30px -24px rgba(16, 21, 34, 0.75);
}

.text-action {
  box-shadow: none;
  color: #6c3fd7;
}

.page-stack {
  gap: 28px;
  max-width: 1360px;
}

.center-title {
  padding-top: 34px;
  gap: 12px;
}

.center-title h1 {
  font-size: 28px;
  font-weight: 780;
  letter-spacing: -0.01em;
}

.mode-word {
  color: #d75e71;
}

.hero-composer,
.create-composer,
.content-band,
.product-detail,
.account-strip,
.task-empty,
.subpage-header,
.pattern-tile,
.feature-card,
.compact-agent-box,
.phone-card,
.metric-card,
.setup-panel,
.strategy-card,
.kit-card,
.asset-card,
.workflow-card,
.insight-row,
.rank-row {
  border-color: rgba(222, 219, 210, 0.82);
  box-shadow: var(--shadow-sm);
}

.hero-composer {
  padding: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82)),
    linear-gradient(135deg, rgba(244, 236, 255, 0.82), rgba(236, 253, 245, 0.42));
  box-shadow: var(--shadow-md);
}

.quick-grid button {
  min-height: 58px;
  border-color: rgba(222, 219, 210, 0.82);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.agent-chip {
  border-color: #e5e2da;
  background: rgba(255, 255, 255, 0.72);
}

.agent-chip.active {
  border-color: #b9b4aa;
  background: #ffffff;
  box-shadow: 0 12px 24px -22px rgba(16, 21, 34, 0.7);
}

.create-composer {
  max-width: 1040px;
  margin-bottom: 18px;
  padding: 18px;
  border-color: rgba(229, 226, 218, 0.72);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-lg);
}

.tool-row {
  gap: 9px;
}

.tool-row button,
.filter-row button,
.mode-toggle button,
.task-tabs button {
  min-height: 34px;
  border-color: #e3e0d7;
  background: #ffffff;
  color: #596273;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.tool-row button.active,
.filter-row button.active,
.mode-toggle button.active,
.task-tabs button.active {
  background: #101522;
  color: var(--surface);
  border-color: #101522;
}

.compose-area {
  min-height: 160px;
}

.reference-slot {
  border-color: rgba(180, 83, 9, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(255, 255, 255, 0.7));
}

.chat-composer,
.create-composer textarea {
  border-color: #e4e1d8;
  background: rgba(255, 255, 255, 0.82);
}

.create-composer textarea,
.chat-composer textarea {
  font-size: 15px;
  line-height: 1.55;
}

.compose-footer,
.composer-footer {
  border-top-color: #ece9e1;
}

.content-band {
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.section-heading h2,
.content-band h2 {
  letter-spacing: -0.01em;
}

.video-grid {
  gap: 14px;
}

.hot-video-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.video-card {
  border: 0;
  background: transparent;
  overflow: visible;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.video-card:hover .video-poster {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -34px rgba(16, 21, 34, 0.9);
}

.video-poster {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 9 / 16;
  background: #f0f0ed;
  box-shadow: 0 18px 42px -34px rgba(16, 21, 34, 0.8);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 21, 34, 0.02) 28%, rgba(16, 21, 34, 0.52) 100%);
  pointer-events: none;
}

.video-poster img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transform: scale(1.04);
}

.video-badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(16, 21, 34, 0.48);
  color: var(--surface);
  font-size: 11px;
  font-weight: 760;
  backdrop-filter: blur(10px);
}

.play-dot {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  color: transparent;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}

.play-dot::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 11px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ffffff;
}

.video-overlay {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--surface);
  font-weight: 780;
}

.video-overlay small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}

.video-meta {
  padding: 9px 2px 0;
  display: grid;
  gap: 3px;
}

.video-meta strong {
  font-weight: 760;
}

.video-meta span {
  font-size: 12px;
  color: #687182;
}

.template-analysis-workbench {
  display: grid;
  gap: 28px;
}

.template-analysis-workbench.reference-analysis-workbench {
  min-height: calc(100vh - 62px);
  margin: -18px;
  padding: 42px min(8vw, 92px) 56px;
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
}

.template-analysis-input {
  display: grid;
  gap: 18px;
}

.analysis-hero-panel {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.analysis-hero-panel h1 {
  margin: 0;
  text-align: center;
  color: var(--text);
  font-size: 34px;
  line-height: 1.18;
  font-weight: 900;
}

.analysis-composer-card {
  display: grid;
  gap: 20px;
  min-height: 166px;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.analysis-mode-row,
.analysis-action-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.analysis-mode-row span {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.analysis-mode-row button,
.analysis-tool-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  font-weight: 800;
  cursor: pointer;
}

.analysis-mode-row button {
  padding: 6px 12px;
  font-size: var(--fs-sm);
}

.analysis-mode-row button.active {
  border-color: color-mix(in srgb, var(--green) 32%, var(--border));
  background: var(--green-soft);
  color: var(--green);
}

.analysis-mode-row button:nth-of-type(2) {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
  background: var(--amber-soft);
  color: var(--amber);
}

.analysis-mode-row button:nth-of-type(3) {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
  background: var(--blue-soft);
  color: var(--blue);
}

.analysis-composer-card textarea {
  min-height: 54px;
  width: 100%;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.55;
}

.analysis-composer-card textarea::placeholder {
  color: var(--text-mute);
}

.analysis-action-row {
  justify-content: space-between;
}

.analysis-action-row .analysis-tool-button {
  padding: 8px 14px;
}

.analysis-send-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.analysis-tool-hint {
  color: var(--text-soft);
  text-align: center;
  font-size: var(--fs-sm);
}

.analysis-tool-hint button {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
}

.analysis-history {
  display: grid;
  gap: 16px;
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.analysis-history h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}

.analysis-history-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}

.analysis-history-item span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  grid-row: span 2;
}

.analysis-history-item strong {
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-history-item small,
.analysis-history p {
  margin: 0;
  color: var(--text-soft);
}

.analysis-history p {
  text-align: center;
}

.template-analysis-workbench.reference-analysis-workbench .content-band {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.template-analysis-workbench.reference-analysis-workbench .section-heading h2,
.template-analysis-workbench.reference-analysis-workbench .template-breakdown-panel h2 {
  color: var(--text);
}

.template-analysis-workbench.reference-analysis-workbench .section-heading p,
.template-analysis-workbench.reference-analysis-workbench .template-breakdown-panel p,
.template-analysis-workbench.reference-analysis-workbench .eyebrow {
  color: var(--text-soft);
}

.template-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.template-analysis-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.template-analysis-samples.full {
  width: 100%;
}

.template-analysis-samples.full .template-analysis-video-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.template-analysis-card {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 8px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px -32px rgba(16, 21, 34, 0.72);
}

.template-analysis-card.active {
  border-color: rgba(47, 108, 246, 0.48);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 18px 38px -30px rgba(47, 108, 246, 0.48);
}

.reference-analysis-workbench .template-analysis-card {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.reference-analysis-workbench .template-analysis-card.active {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border));
  background: var(--green-soft);
}

.reference-analysis-workbench .template-analysis-card small,
.reference-analysis-workbench .template-analysis-card span:not(.template-analysis-poster) {
  color: var(--text-soft);
}

.template-analysis-card strong {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-analysis-card small,
.template-analysis-card span:not(.template-analysis-poster) {
  color: var(--text-soft);
  line-height: 1.35;
}

.template-analysis-poster {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 9 / 16;
  background: #f0f0ed;
}

.template-analysis-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-analysis-poster em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: var(--r-pill);
  background: rgba(16, 21, 34, 0.58);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 800;
  padding: 3px 7px;
}

.template-breakdown-panel {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 16px;
}

.task-modal.template-breakdown-modal {
  width: min(980px, 100%);
  max-width: 980px;
}

.template-breakdown-modal .template-breakdown-panel {
  position: static;
  top: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.template-breakdown-modal .template-breakdown-panel > .section-heading {
  display: none;
}

.template-breakdown-modal .template-breakdown-hero {
  grid-template-columns: 220px minmax(0, 1fr);
}

.template-breakdown-modal .template-breakdown-hero img {
  width: 220px;
}

.template-breakdown-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.template-breakdown-hero img {
  width: 150px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-2);
}

.template-breakdown-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.rank-row {
  grid-template-columns: 30px minmax(0, 1fr) 96px;
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
}

.rank-row > span {
  background: #fff1f2;
  color: #d75e71;
}

.flow-shell {
  border-color: #ebe8e0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-lg);
}

.clone-preview {
  background:
    linear-gradient(180deg, #f5f5f1, #eeeeea);
}

.phone-card {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 56px -40px rgba(16, 21, 34, 0.72);
}

.flow-panel {
  background: #ffffff;
}

.upload-box {
  background: #fbfbf8;
  border-color: #ddd8cd;
}

.source-input,
.script-search,
.script-preview p {
  border-color: #ddd9cf;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.script-hero {
  padding-top: 42px;
}

.script-hero h1 {
  letter-spacing: -0.02em;
}

.feature-card {
  background: linear-gradient(180deg, #ffffff, #fffafa);
}

.content-band.accent-soft {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.62));
}

.generation-console article {
  border-color: #e7e4dc;
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
}

.bottom-command {
  left: calc(254px + 50%);
  width: min(560px, calc(100vw - 320px));
  border-color: rgba(221, 217, 207, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

@media (max-width: 1180px) {
  .main-view {
    padding-right: var(--sp-4);
  }

  .panel-grid.two,
  .product-detail,
  .run-summary,
  .tasks-page,
  .opportunity-layout,
  .flow-shell,
  .clone-remix-workbench,
  .store-performance-overview,
  .store-overview-grid {
    grid-template-columns: 1fr;
  }

  .clone-remix-workbench {
    height: auto;
  }

  .image-generation-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clone-side-panel {
    overflow-y: visible;
  }

  .clone-preview {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .metric-grid,
  .asset-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-top-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
  }

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

	  .workbench-quick-grid,
	  .performance-grid,
	  .analytics-chart-grid.two,
	  .analytics-action-list {
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	  }
	}

.object-page {
  max-width: 1480px;
  margin: 0 auto;
}

.object-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--sp-4);
  align-items: start;
}

.object-main {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.right-agent-panel {
  position: sticky;
  top: 78px;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
  box-shadow: var(--shadow-sm);
}

.agent-panel-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.agent-panel-head small {
  display: block;
  margin-top: 3px;
  color: var(--text-soft);
  line-height: 1.45;
}

.agent-suggestions {
  display: grid;
  gap: var(--sp-2);
}

.table-band,
.matrix-band {
  overflow: hidden;
}

.project-table,
.matrix-sheet {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.project-table-row,
.matrix-sheet-row {
  display: grid;
  align-items: stretch;
  gap: 0;
  min-width: 1040px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.project-table-row {
  grid-template-columns: 210px 150px 150px 82px 82px 150px 96px minmax(220px, 1fr);
}

.matrix-sheet-row {
  grid-template-columns: 150px 150px 150px 190px 190px 170px 92px;
}

.project-table-row:last-child,
.matrix-sheet-row:last-child {
  border-bottom: 0;
}

.project-table-row.head,
.matrix-sheet-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
}

button.project-table-row:hover,
.matrix-sheet-row:not(.head):hover {
  background: #fbfbf8;
}

.project-table-row > span,
.matrix-sheet-row > span {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--border);
  line-height: 1.45;
}

.project-table-row > span:last-child,
.matrix-sheet-row > span:last-child {
  border-right: 0;
}

.project-table-row small,
.project-table-row b,
.project-name small {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-weight: 500;
}

.project-name {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: center;
}

.project-name img {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  object-fit: cover;
  border: 1px solid var(--border);
}

.project-table-row em,
.matrix-sheet-row em {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--r-pill);
  padding: 3px 8px;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.project-kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.kanban-column {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-height: 420px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.kanban-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-soft);
}

.kanban-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.kanban-card span,
.kanban-card small {
  color: var(--text-soft);
  line-height: 1.45;
}

.focus-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue);
}

.focus-strip span {
  flex: 1;
  color: var(--text);
}

.evidence-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}

.evidence-grid > img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.right-agent-panel .compact-agent-box {
  margin-top: 0;
}

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

  .right-agent-panel {
    position: static;
  }

  .project-kanban {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .icon-rail {
    position: static;
    width: 100%;
    min-height: 64px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    overflow-x: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    gap: 4px;
    padding: 8px 6px;
  }

  .rail-logo {
    margin: 0;
  }

  .rail-button {
    width: 100%;
    min-height: 48px;
    padding: 5px 0;
  }

  .rail-button span {
    width: 24px;
    height: 24px;
  }

  .section-nav {
    position: static;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .section-group {
    display: flex;
    overflow-x: auto;
  }

  .subnav-item {
    min-width: max-content;
  }

  .main-view {
    margin-left: 0;
    padding: 0 var(--sp-4) 112px;
  }

  .main-view.no-section-nav {
    margin-left: 0;
  }

  .topbar,
  .section-heading,
  .setup-panel,
  .subpage-header,
  .kit-card header,
  .strategy-card header,
  .center-title,
  .compose-footer,
  .composer-footer,
  .flow-next {
    display: grid;
  }

  .quick-grid,
  .metric-grid,
  .store-top-grid,
  .video-grid,
  .video-grid.small,
	  .template-analysis-grid,
	  .template-analysis-video-grid,
	  .analytics-chart-grid.two,
	  .analytics-action-list,
	  .asset-section,
	  .template-grid,
  .matrix-grid,
  .compose-area,
  .pattern-grid,
  .feature-card-grid,
  .clone-video-compare,
  .clone-form-grid {
    grid-template-columns: 1fr;
  }

  .clone-preview-stage {
    padding: var(--sp-5);
  }

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

  .flow-steps {
    justify-content: start;
    overflow-x: auto;
    padding-bottom: var(--sp-2);
  }

  .asset-card {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .rank-row,
  .fact-item,
  .generation-console article,
  .template-breakdown-hero {
    grid-template-columns: 1fr;
  }

  .template-breakdown-panel {
    position: static;
  }

  .template-breakdown-hero img {
    width: 100%;
    max-height: 360px;
  }

  .source-input,
  .script-search,
  .notice-toast {
    display: grid;
  }

  .notice-toast {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 82px;
    width: auto;
  }

  .bottom-command {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-3);
    width: auto;
    transform: none;
  }

  .focus-strip {
    display: grid;
    align-items: start;
  }

  .evidence-grid {
    grid-template-columns: 1fr;
  }
}

/* v4 product IA demo */
.table-product small,
.account-row small,
.gap-card small,
.gap-card span,
.work-item span,
.pipeline-step span,
.timeline span,
.signal-card small,
.calendar-day span,
.calendar-day small,
.kit-card small {
  color: var(--text-soft);
}

.search-band {
  gap: 12px;
}

.source-input.wide {
  width: 100%;
}

.source-input.wide input {
  min-height: 38px;
}

.data-table {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
}

.data-row {
  display: grid;
  align-items: stretch;
  min-width: 980px;
  border-bottom: 1px solid var(--border);
}

.data-row:last-child {
  border-bottom: 0;
}

.data-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f4f5f1;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.data-row > span {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--border);
  line-height: 1.45;
}

.data-row > span:last-child {
  border-right: 0;
}

.data-row strong,
.data-row small,
.table-product strong,
.table-product small {
  display: block;
}

.data-row em,
.work-item em {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.mini-link {
  display: inline-block;
  max-width: 100%;
  color: var(--blue);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.account-table .data-row {
  grid-template-columns: 210px 92px 210px 132px 88px 76px 120px;
}

.product-table .data-row {
  grid-template-columns: 230px 128px 74px 86px 74px minmax(240px, 1fr) 118px;
}

.matrix-table .data-row {
  grid-template-columns: 148px 148px 150px 170px minmax(220px, 1fr) 146px 98px;
}

.analytics-account-table .data-row {
  grid-template-columns: 190px 92px 190px 84px 110px 110px 82px 82px 82px 100px 92px 82px 82px minmax(260px, 1fr) 100px;
  min-width: 1850px;
}

.analytics-product-content-table .data-row {
  grid-template-columns: 160px 92px 84px 110px 92px 110px 82px 82px 82px 100px 92px 112px 128px 120px 82px 82px 210px minmax(280px, 1fr) 100px;
  min-width: 2238px;
}

.analytics-handle-link {
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.analytics-handle-link:hover {
  text-decoration: underline;
}

.analysis-table .data-row {
  grid-template-columns: 230px 150px 220px 180px 180px minmax(260px, 1fr) 132px;
  min-width: 1370px;
}

.queue-table .data-row {
  grid-template-columns: 150px 220px 140px 80px 120px 120px 140px 150px 140px 140px 240px 160px 190px 150px 150px 120px 120px 80px 170px 120px 180px;
  min-width: 3220px;
}

.table-product {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.table-product img {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-2);
}

.account-list,
.work-list,
.timeline {
  display: grid;
  gap: var(--sp-3);
}

.account-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.15fr) minmax(64px, 0.55fr) minmax(120px, 1fr) minmax(58px, 0.45fr) minmax(86px, 0.65fr);
  align-items: center;
  gap: var(--sp-3);
  min-height: 58px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
}

.account-row strong,
.account-row small {
  display: block;
}

.account-row > * {
  min-width: 0;
}

.project-run-summary {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
}

.project-run-summary .compact-agent-box {
  grid-column: 1 / -1;
}

.project-run-summary .fact-item {
  grid-template-columns: 94px minmax(0, 1fr);
}

.project-run-summary .fact-item strong {
  overflow-wrap: anywhere;
}

.matrix-workbench,
.product-pool-workbench,
.generation-batch-workbench,
.generation-task-workbench,
.video-list-workbench,
.generation-entry,
.tk-create-workbench {
  display: grid;
  gap: var(--sp-4);
}

.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, #f8faf6);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.bulk-action-bar h2 {
  margin: 4px 0;
  font-size: var(--fs-xl);
}

.bulk-action-bar p {
  max-width: 760px;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.matrix-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--sp-4);
}

.matrix-main {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.full-width-main {
  grid-template-columns: 1fr;
}

.project-pool-table .data-row {
  grid-template-columns: 64px 220px 150px 150px 126px 190px 210px minmax(240px, 1fr) 90px 150px 142px 96px 164px 120px 132px;
  min-width: 2360px;
}

.asset-product-table .data-row {
  grid-template-columns: 260px 150px 150px 220px 210px minmax(260px, 1fr) minmax(320px, 1fr) 90px 142px 120px 120px 132px;
  min-width: 2220px;
}

.product-asset-table .data-row {
  grid-template-columns: minmax(260px, 1.2fr) 92px 116px 132px 150px minmax(280px, 1.35fr) 130px 148px 148px;
  min-width: 1460px;
}

.product-name-link {
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
}

.product-name-link:hover {
  color: var(--blue);
  text-decoration: underline;
}

.product-source-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.product-import-menu {
  position: relative;
}

.product-import-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--text);
  padding: 0 14px;
  font-size: var(--fs-sm);
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.product-import-menu summary::-webkit-details-marker {
  display: none;
}

.product-import-menu[open] summary {
  border-color: rgba(42, 111, 151, 0.28);
  color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42, 111, 151, 0.1);
}

.product-import-menu > div {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 4px;
  width: 156px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 6px;
  box-shadow: var(--shadow-md);
}

.product-import-menu button {
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.product-import-menu button:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.product-store-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 760;
}

.product-store-sync span {
  border-radius: var(--r-pill);
  background: #eef7fb;
  color: var(--blue);
  padding: 5px 9px;
  font-weight: 860;
}

.product-store-sync small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 760;
}

.product-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-image-card,
.white-image-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  text-align: left;
}

.product-image-card img,
.white-image-card img {
  width: 68px;
  height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.white-image-card {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.white-image-card:hover img {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42, 111, 151, 0.12);
}

.product-qr-box {
  display: inline-grid;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 760;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.product-qr-box:hover i,
.product-qr-box:focus-visible i {
  border-color: rgba(42, 111, 151, 0.22);
  box-shadow: 0 0 0 3px rgba(42, 111, 151, 0.14);
}

.product-qr-box i {
  display: block;
  width: 64px;
  height: 64px;
  border: 6px solid #ffffff;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #111 10px, transparent 10px 16px, #111 16px 22px, transparent 22px 28px, #111 28px 36px, transparent 36px 44px, #111 44px),
    linear-gradient(#111 8px, transparent 8px 14px, #111 14px 20px, transparent 20px 28px, #111 28px 34px, transparent 34px 42px, #111 42px);
  box-shadow: 0 0 0 1px var(--border);
}

.product-qr-box.compact i {
  width: 52px;
  height: 52px;
}

.product-qr-box.preview {
  cursor: default;
}

.product-qr-box.preview i {
  width: 168px;
  height: 168px;
  border-width: 10px;
  background-size: 168px 168px;
}

.product-detail-page {
  display: grid;
  gap: var(--sp-4);
}

.product-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
}

.product-detail-header h2 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.18;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--sp-4);
  align-items: start;
}

.product-detail-main,
.product-detail-side {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.detail-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.detail-section-title small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 720;
  text-align: right;
}

.product-media-gallery {
  gap: var(--sp-3);
}

.product-expanded-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.product-expanded-image-grid article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 10px;
}

.product-expanded-image-grid article.white-reference {
  background: #ffffff;
}

.product-expanded-image-grid img {
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.product-media-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-media-meta > div {
  min-width: 0;
}

.product-media-actions {
  flex: 0 0 auto;
}

.product-expanded-image-grid strong,
.product-expanded-image-grid small {
  display: block;
}

.product-expanded-image-grid small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  margin-top: 3px;
}

.product-expanded-image-grid .white-reference img {
  object-fit: contain;
}

.product-detail-qr-section .product-qr-box i {
  width: 92px;
  height: 92px;
}

.product-qr-preview-modal {
  max-width: 640px;
}

.product-qr-preview-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
}

.product-qr-preview-body p {
  color: var(--text-soft);
}

.selling-point-editor {
  min-height: 118px;
}

.asset-material-table .data-row {
  grid-template-columns: 150px 110px 260px 140px 240px 120px 110px 170px 120px 96px;
  min-width: 1716px;
}

.asset-account-table .data-row {
  grid-template-columns: 220px 220px minmax(190px, 0.8fr) minmax(260px, 1fr) 96px;
  min-width: 1060px;
}

.account-handle-link {
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
}

.account-handle-link:hover {
  color: var(--blue);
  text-decoration: underline;
}

.account-image-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.account-image-summary img {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.account-image-summary small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 720;
}

.account-tag-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.account-tag-summary span,
.account-tag-summary small {
  border-radius: var(--r-pill);
  background: var(--surface-2);
  padding: 4px 8px;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 820;
}

.task-modal.account-detail-modal {
  width: min(1080px, calc(100vw - 48px));
  max-width: none;
}

.account-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.account-image-manager {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.account-image-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-persona-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.account-persona-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 12px;
}

.account-persona-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.account-persona-media img {
  width: 156px;
  height: 156px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.account-persona-media strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-persona-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

.account-persona-tag-editor {
  min-width: 0;
}

.account-image-card {
  display: grid;
  gap: 4px;
  width: 112px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 8px;
}

.account-image-card img {
  width: 94px;
  height: 94px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.account-image-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-image-empty {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

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

.account-persona-add {
  border-color: rgba(42, 111, 151, 0.32);
  background: #eef7fb;
}

.account-upload-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
}

.account-upload-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.account-tag-editor {
  display: grid;
  gap: 10px;
}

.account-level-tag-editor {
  display: grid;
  max-width: 620px;
}

.account-tag-select {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.account-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.account-selected-tags button,
.account-tag-dropdown button {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 5px 9px;
  font-size: var(--fs-xs);
  font-weight: 760;
  cursor: pointer;
}

.account-selected-tags button.active,
.account-tag-dropdown button.active {
  border-color: rgba(42, 111, 151, 0.3);
  background: #eef7fb;
  color: var(--blue);
}

.account-tag-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.account-tag-search input {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
}

.account-tag-dropdown {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
  max-height: 172px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 8px;
}

.account-tag-dropdown.is-open {
  display: grid;
}

.account-tag-dropdown button {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.account-tag-create-row {
  display: flex;
  justify-content: flex-start;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 720;
}

.asset-scene-table .data-row {
  grid-template-columns: 220px minmax(360px, 1fr) 260px 96px;
  min-width: 936px;
}

.scene-image-summary {
  display: inline-flex;
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}

.scene-image-summary img {
  width: 96px;
  height: 60px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.scene-image-summary:hover img {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42, 111, 151, 0.12);
}

.task-modal.scene-detail-modal {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
}

.scene-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-5);
}

.field-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field-block span {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 820;
}

.scene-description-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scene-name-input,
.scene-description-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.scene-name-input {
  padding: 8px 10px;
  font-weight: 850;
}

.scene-description-input {
  min-height: 172px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}

.scene-image-manager {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.scene-image-card {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.scene-image-card img {
  width: 340px;
  height: 204px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  object-fit: cover;
}

.scene-image-card:hover img {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42, 111, 151, 0.12);
}

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

.scene-row-actions {
  flex-direction: column;
  align-items: flex-start;
}

.scene-upload-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
}

.scene-upload-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.scene-image-preview-modal {
  width: min(920px, calc(100vw - 48px));
  max-width: none;
}

.scene-image-preview-body {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #f7f5ef;
}

.scene-image-preview-body img {
  display: block;
  width: 100%;
  max-height: min(620px, calc(100vh - 190px));
  object-fit: contain;
}

.asset-template-table .data-row {
  grid-template-columns: 220px 140px 160px 140px 180px 200px 220px 190px 240px 150px 220px 130px 110px 240px 150px 96px;
  min-width: 2840px;
}

.script-library-table .data-row {
  grid-template-columns: 220px 132px 210px minmax(340px, 1.4fr) 130px 110px 150px 190px 96px 96px;
  min-width: 1680px;
}

.script-category-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.script-category-chip-list small,
.script-category-editor button,
.script-category-select summary {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 5px 9px;
  font-size: var(--fs-xs);
  font-weight: 760;
}

.script-score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  width: fit-content;
  border: 1px solid rgba(42, 111, 151, 0.24);
  border-radius: var(--r-pill);
  background: #eef7fb;
  color: var(--blue);
  padding: 5px 10px;
  font-weight: 900;
}

.script-score-badge b,
.script-score-badge small {
  display: inline;
}

.task-modal.script-detail-modal {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
}

.script-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-4);
}

.script-original-prompt,
.script-prompt-grid {
  grid-column: 1 / -1;
}

.script-category-editor {
  display: grid;
  gap: 8px;
  margin-bottom: var(--sp-3);
  min-width: 0;
}

.script-category-editor button {
  cursor: pointer;
  font: inherit;
}

.script-selected-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.script-category-editor button.active,
.script-category-select summary.active {
  border-color: var(--blue);
  background: #eef7fb;
  color: var(--blue);
}

.script-category-select {
  position: relative;
}

.script-category-select summary {
  display: inline-flex;
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

.script-category-select summary::-webkit-details-marker {
  display: none;
}

.script-category-dropdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 8px;
  margin-top: 8px;
}

.script-category-dropdown button {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.script-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.script-prompt-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
}

.script-prompt-grid p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.script-prompt-editor {
  width: 100%;
  min-width: 0;
  min-height: 118px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
}

.asset-canvas-table .data-row {
  grid-template-columns: 220px 140px 230px 190px 110px 260px 250px 260px 260px 220px 110px 96px;
  min-width: 2550px;
}

.video-task-table .data-row {
  grid-template-columns: 64px 170px 150px 220px 142px 190px 112px 130px 118px 126px 230px 130px 90px 110px 210px 220px 140px 118px 150px 170px 180px 116px 136px;
  min-width: 3420px;
}

.generation-task-table .data-row {
  grid-template-columns: 150px 150px minmax(230px, 1fr) minmax(230px, 1fr) 96px 112px 120px 132px;
  min-width: 1220px;
}

.video-object-table .data-row {
  grid-template-columns: 96px 124px 180px 146px 150px 142px minmax(240px, 1fr) 112px 112px 132px;
  min-width: 1420px;
}

.recent-task-table .data-row {
  grid-template-columns: 170px 150px minmax(260px, 1fr) 110px 110px 132px;
  min-width: 1000px;
}

.tk-product-table .data-row {
  grid-template-columns: 64px 210px 90px 180px minmax(260px, 1fr) 150px 112px;
  min-width: 1160px;
}

.draft-video-table .data-row {
  grid-template-columns: 96px 190px 154px minmax(260px, 1fr) 142px 142px 118px 110px 90px;
  min-width: 1340px;
}

.row-check {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--surface);
  font-weight: 850;
}

.row-check.active {
  border-color: var(--text);
  background: var(--text);
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.table-toolbar span,
.selected-summary span {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 760;
}

.coverage-grid {
  display: grid;
  grid-template-columns: 180px repeat(6, minmax(104px, 1fr));
  min-width: 920px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
}

.coverage-cell {
  min-height: 54px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding: 10px;
  text-align: left;
  line-height: 1.3;
}

.coverage-cell.head {
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.coverage-cell.product {
  font-weight: 800;
  background: #fbfbf8;
}

.coverage-cell.good {
  background: var(--green-soft);
  color: var(--green);
}

.coverage-cell.work {
  background: var(--blue-soft);
  color: var(--blue);
}

.coverage-cell.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.coverage-cell.neutral {
  background: var(--surface-2);
  color: var(--text-soft);
}

.matrix-agent-panel {
  position: sticky;
  top: 78px;
  display: grid;
  gap: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.selected-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.agent-command {
  display: grid;
  gap: var(--sp-2);
}

.agent-command textarea {
  min-height: 116px;
  resize: vertical;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  line-height: 1.5;
}

.generation-template-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}

.generation-prompt-box {
  display: grid;
  gap: var(--sp-4);
}

.generation-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 54px 44px 38px;
  align-content: start;
  margin-bottom: 72px;
  box-shadow: var(--shadow-md);
}

.generation-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248, 248, 245, 0.28), rgba(248, 248, 245, 0.84) 68%, rgba(248, 248, 245, 0.98)),
    linear-gradient(90deg, rgba(16, 21, 34, 0.18), rgba(255, 255, 255, 0.08), rgba(16, 21, 34, 0.16)),
    var(--generation-hero-bg);
  background-position: center;
  background-size: cover;
}

.generation-hero > * {
  position: relative;
  z-index: 1;
}

.generation-hero > :not(.generation-hero-media) {
  z-index: 2;
}

.generation-hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.media-shot {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.64);
  object-fit: cover;
  box-shadow: 0 26px 70px -46px rgba(16, 21, 34, 0.84);
  opacity: 0.46;
}

.media-shot-a {
  width: 132px;
  height: 236px;
  left: 54px;
  top: 78px;
  transform: rotate(-5deg);
}

.media-shot-b {
  width: 126px;
  height: 154px;
  right: 70px;
  top: 88px;
  transform: rotate(6deg);
}

.media-shot-c {
  width: 112px;
  height: 112px;
  left: 110px;
  bottom: 92px;
  border-radius: 28px;
  transform: rotate(4deg);
}

.generation-hero-head {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
}

.generation-hero-head h1 {
  margin: 0;
  color: var(--surface);
  font-size: 42px;
  line-height: 1.12;
  font-weight: 760;
  text-shadow: 0 16px 46px rgba(16, 21, 34, 0.52);
}

.generation-hero-head p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
  text-shadow: 0 12px 34px rgba(16, 21, 34, 0.48);
}

.launch-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: rgba(16, 21, 34, 0.46);
  color: var(--surface);
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.agent-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.agent-tabs button {
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-soft);
  min-height: 34px;
  padding: 0 18px;
  font-weight: 760;
}

.agent-tabs button.active {
  background: var(--text);
  color: var(--surface);
}

.generation-composer {
  max-width: 920px;
  width: 100%;
  margin: var(--sp-4) auto 0;
  border: 1px solid rgba(221, 217, 207, 0.86);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  box-shadow: 0 34px 100px -58px rgba(16, 21, 34, 0.72);
  backdrop-filter: blur(16px);
}

.generation-composer textarea {
  min-height: 104px;
  border: 0;
  background: transparent;
  padding: 2px 4px;
  color: var(--text);
  resize: vertical;
  line-height: 1.65;
  outline: 0;
}

.generation-composer textarea::placeholder {
  color: var(--text-mute);
}

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.model-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1;
}

.tool-pill,
.icon-tool {
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-soft);
  min-height: 34px;
  padding: 0 10px;
  font-weight: 760;
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tool-pill small {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 850;
}

.tool-pill strong {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 760;
}

.tool-pill:hover,
.icon-tool:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

.icon-tool,
.generation-composer .send-button {
  width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.generation-composer .send-button {
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--surface);
}

.quick-chip-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.quick-chip-row button {
  border: 1px solid rgba(221, 217, 207, 0.88);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text-soft);
  min-height: 34px;
  padding: 0 14px;
  box-shadow: var(--shadow-sm);
}

.quick-chip-row button:hover {
  color: var(--text);
  border-color: var(--text);
}

.generation-example-grid {
  max-width: 920px;
  width: 100%;
  margin: var(--sp-4) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.generation-example-card {
  min-height: 104px;
  border: 1px solid rgba(221, 217, 207, 0.82);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.generation-example-card img {
  grid-row: span 2;
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-2);
}

.generation-example-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.generation-example-card span,
.generation-example-card small {
  color: var(--text-soft);
  font-size: var(--fs-xs);
}

.generation-example-card strong,
.generation-example-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.generation-example-card button {
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
}

.generation-studio {
  min-height: calc(100vh - 62px);
  margin: -18px;
  background: var(--bg);
  color: var(--text);
}

.generation-studio-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 42px min(6vw, 80px) 64px;
  gap: 22px;
}

.generation-studio-head {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.generation-studio-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 34px;
  line-height: 1.18;
  font-weight: 900;
  text-align: center;
}

.creation-wizard {
  width: min(1120px, 100%);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

.creation-wizard-head,
.wizard-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.creation-wizard-head h2,
.wizard-panel h3 {
  margin: 4px 0;
}

.creation-wizard-head p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.wizard-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
}

.wizard-stepper button,
.wizard-stepper article {
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-soft);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  text-align: left;
}

.wizard-stepper span,
.wizard-stepper article span {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.wizard-stepper strong,
.wizard-stepper article strong {
  min-width: 0;
  font-size: var(--fs-sm);
}

.wizard-stepper article small {
  grid-column: 2;
  color: var(--text-soft);
  line-height: 1.4;
}

.wizard-stepper button.active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.wizard-stepper button.active span {
  background: var(--surface);
  color: var(--text);
}

.wizard-stepper button.done {
  background: var(--green-soft);
  color: var(--green);
}

.wizard-panel {
  display: grid;
  gap: var(--sp-4);
}

.wizard-type-grid,
.wizard-input-grid,
.wizard-mode-grid,
.wizard-config-grid,
.wizard-review-grid {
  display: grid;
  gap: var(--sp-3);
}

.wizard-type-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wizard-input-grid,
.wizard-mode-grid,
.wizard-config-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wizard-review-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wizard-type-grid button,
.wizard-type-grid article,
.wizard-input-grid button,
.wizard-mode-grid button {
  min-height: 128px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text);
  padding: var(--sp-3);
  display: grid;
  align-content: start;
  gap: 7px;
  text-align: left;
}

.wizard-type-grid button.active,
.wizard-type-grid article.active,
.wizard-input-grid button.active,
.wizard-mode-grid button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}

.wizard-type-grid small,
.wizard-type-grid article span,
.wizard-input-grid small,
.wizard-mode-grid span {
  color: var(--text-soft);
  line-height: 1.45;
}

.wizard-product-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.wizard-product-preview article {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
  display: grid;
  gap: 6px;
}

.wizard-product-preview article.selected {
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
}

.wizard-product-preview small,
.wizard-product-preview em {
  color: var(--text-soft);
  font-style: normal;
  line-height: 1.45;
}

.wizard-actions {
  justify-content: flex-end;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.wizard-result-card {
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border));
  border-radius: var(--r-md);
  background: var(--green-soft);
  color: var(--green);
  padding: var(--sp-4);
  display: grid;
  gap: 6px;
}

.wizard-result-card.inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  color: var(--text);
}

.wizard-result-card span,
.wizard-result-card small,
.wizard-result-card em {
  color: var(--text-soft);
  font-style: normal;
}

.creation-guide.compact {
  width: min(900px, 100%);
  padding: var(--sp-3);
  grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.6fr) auto;
  align-items: center;
  gap: var(--sp-3);
}

.creation-guide-copy {
  display: grid;
  gap: 4px;
}

.creation-guide-copy strong {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-base);
}

.creation-guide-copy small {
  display: block;
  color: var(--text-soft);
  line-height: 1.4;
}

.creation-guide-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.creation-guide-steps span {
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

.creation-guide-steps b {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  flex: 0 0 auto;
}

.creation-guide-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.creation-guide-actions .icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.generation-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 10px;
  background: var(--surface-2);
  padding: 4px;
}

.generation-mode-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.generation-mode-tabs button.active {
  background: var(--text);
  color: var(--surface);
}

.generation-studio-composer {
  max-width: 900px;
  margin: 0 auto;
  border-color: var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  padding: 14px;
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}

.generation-reference-toolbar,
.generation-studio-controls,
.generation-studio-body,
.generation-reference-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.generation-reference-toolbar {
  justify-content: space-between;
}

.generation-reference-actions {
  border-radius: var(--r-pill);
  background: var(--surface-2);
  padding: 4px;
}

.generation-reference-actions button,
.studio-expand,
.prompt-guide,
.studio-credit,
.generation-studio-controls .send-button {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  min-height: 30px;
  padding: 0 12px;
  font-weight: 800;
  cursor: pointer;
}

.generation-reference-actions button.active {
  background: var(--text);
  color: var(--surface);
}

.studio-expand {
  width: 32px;
  padding: 0;
}

.generation-studio-body {
  align-items: stretch;
  min-height: 74px;
}

.generation-studio-body.matrix-video-mode {
  display: block;
}

.generation-product-picker {
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--text);
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  text-align: left;
  cursor: pointer;
}

.generation-product-picker:hover {
  border-color: var(--text);
  box-shadow: var(--shadow-sm);
}

.generation-product-picker strong {
  font-size: var(--fs-md);
}

.generation-product-picker span {
  color: var(--text-soft);
  line-height: 1.45;
}

.generation-frame-drop {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  transform: rotate(-7deg);
  cursor: pointer;
}

.generation-frame-drop:nth-of-type(2) {
  transform: rotate(8deg);
}

.generation-frame-drop strong {
  font-size: 18px;
  line-height: 1;
}

.generation-frame-drop span {
  font-size: 11px;
  font-weight: 800;
}

.generation-studio-composer textarea {
  min-height: 76px;
  color: var(--text);
}

.generation-studio-composer textarea::placeholder {
  color: var(--text-mute);
}

.prompt-guide {
  align-self: center;
  white-space: nowrap;
}

.generation-studio-controls {
  flex-wrap: wrap;
}

.generation-studio .model-toolbar {
  flex: 1;
}

.generation-studio .tool-pill {
  background: var(--surface-2);
  color: var(--text-soft);
}

.generation-studio .tool-pill small,
.generation-studio .tool-pill strong {
  color: var(--text);
}

.studio-token-count {
  color: var(--text-soft);
  font-weight: 800;
}

.studio-credit {
  background: var(--green-soft);
  color: var(--green);
}

.generation-studio-controls .send-button {
  display: none;
}

.generated-video-link {
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-weight: 800;
  cursor: pointer;
}

.generation-studio .generation-example-grid {
  max-width: 1280px;
  margin: 0 auto;
  grid-template-columns: 1.7fr repeat(3, 1fr);
}

.generation-studio .generation-example-card {
  position: relative;
  min-height: 140px;
  overflow: hidden;
  border-color: var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 0;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(100px, 1fr) auto auto;
  box-shadow: none;
}

.generation-studio .generation-example-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.62));
  pointer-events: none;
}

.generation-studio .generation-example-card.featured {
  grid-row: span 2;
}

.generation-studio .generation-example-card img {
  width: 100%;
  height: 170px;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  filter: brightness(0.78);
}

.generation-studio .generation-example-card.featured img {
  height: 360px;
}

.generation-studio .generation-example-card div {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 58px;
  z-index: 1;
  padding: 0;
}

.generation-studio .generation-example-card strong {
  color: var(--surface);
  font-size: var(--fs-md);
}

.generation-studio .generation-example-card span,
.generation-studio .generation-example-card small {
  color: color-mix(in srgb, var(--surface) 78%, transparent);
}

.generation-studio .generation-example-card button {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  margin: 0;
  border-color: color-mix(in srgb, var(--surface) 64%, transparent);
  background: var(--surface);
  color: var(--text);
}

.generation-filter-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
}

.generation-filter {
  position: relative;
}

.generation-filter > button,
.generation-filter-row label {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-soft);
  min-height: 36px;
  padding: 0 14px;
  font-weight: 800;
}

.generation-filter > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.generation-filter > button strong {
  color: var(--text);
}

.generation-filter-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  min-width: 172px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.generation-filter:hover .generation-filter-menu,
.generation-filter:focus-within .generation-filter-menu {
  display: grid;
  gap: 4px;
}

.generation-filter-menu button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  padding: 0 10px;
  text-align: left;
  font-weight: 760;
  cursor: pointer;
}

.generation-filter-menu button.active,
.generation-filter-menu button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.generation-filter-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.generation-filter-row input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.generation-filter-more {
  margin-left: auto;
}

.generation-studio-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  max-width: 1520px;
  width: 100%;
  margin: -12px auto 0;
}

.generation-studio-gallery article {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  min-height: 0;
  border-radius: 8px;
  background: var(--surface-2);
}

.generation-studio-gallery img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  filter: brightness(0.9);
}

.generation-studio-gallery span {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.56);
  color: var(--surface);
  padding: 5px 8px;
  font-size: var(--fs-xs);
  font-weight: 850;
}

.generation-studio-gallery strong {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: var(--surface);
  font-weight: 900;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.8);
}

.image-generation-composer {
  max-width: 1000px;
  padding: 0;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.image-prompt-shell {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  gap: 16px;
  align-items: start;
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.image-reference-drop {
  width: 42px;
  height: 58px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.image-prompt-shell textarea {
  min-height: 72px;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  padding: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.image-prompt-shell textarea::placeholder {
  color: var(--text-mute);
}

.image-expand {
  border: 0;
  background: transparent;
  color: var(--text-soft);
}

.image-generation-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.image-control-pill,
.image-credit {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 850;
  cursor: pointer;
}

.image-control-pill.selected {
  border-color: var(--text);
  background: var(--surface);
}

.image-model-selector {
  position: relative;
}

.image-model-menu {
  position: absolute;
  z-index: 6;
  top: 44px;
  left: 0;
  width: 320px;
  display: none;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.image-model-selector:hover .image-model-menu,
.image-model-selector:focus-within .image-model-menu {
  display: grid;
}

.image-model-menu > span {
  color: var(--text-soft);
  font-size: 12px;
  padding: 0 6px 5px;
}

.image-model-menu button {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 52px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 34px 8px 10px;
  cursor: pointer;
}

.image-model-menu button.active {
  background: var(--accent-soft);
}

.image-model-menu small {
  color: var(--text-soft);
  font-size: 12px;
}

.image-model-menu b {
  position: absolute;
  right: 10px;
  top: 14px;
  color: var(--accent-ink);
}

.image-token-count {
  margin-left: auto;
  color: var(--text-soft);
  font-weight: 850;
}

.image-credit {
  background: var(--green-soft);
  color: var(--green);
}

.image-prompt-shell .send-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: #7c3aed;
  color: var(--surface);
  font-size: 18px;
}

.image-generation-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 8px;
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.image-gallery-card {
  position: relative;
  overflow: hidden;
  min-height: 184px;
  aspect-ratio: 1.12 / 1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.image-gallery-card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.72));
  pointer-events: none;
}

.image-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-gallery-card strong {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  padding: 5px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  text-shadow: none;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.scenario-card,
.match-mode-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  min-height: 218px;
  box-shadow: var(--shadow-sm);
}

.scenario-card.featured,
.match-mode-card.selected {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background: linear-gradient(180deg, #ffffff, var(--green-soft));
}

.scenario-card h3,
.match-mode-card h3 {
  margin: var(--sp-1) 0;
}

.scenario-card p,
.match-mode-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.scenario-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
}

.recent-task-list {
  display: grid;
  gap: var(--sp-4);
}

.create-stepper {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.create-stepper div {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-soft);
}

.create-stepper span {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 800;
}

.create-stepper .active {
  color: var(--text);
  font-weight: 760;
}

.create-stepper .active span {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.match-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.generation-template-card,
.task-create-card,
.inline-suggestion {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.generation-template-card {
  min-height: 284px;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.generation-template-card.featured {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background: linear-gradient(180deg, #ffffff, var(--green-soft));
}

.generation-template-card h3 {
  margin: 0;
}

.generation-template-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.generation-template-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
}

.create-task-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #ffffff, var(--blue-soft));
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

.create-task-panel h2 {
  margin: var(--sp-1) 0;
}

.create-task-panel p {
  color: var(--text-soft);
  margin: 0;
  line-height: 1.55;
}

.task-create-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.task-create-card {
  box-shadow: none;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.task-create-card p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.task-create-card span {
  color: var(--text-soft);
  line-height: 1.45;
}

.status-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.video-list-panel {
  gap: var(--sp-3);
}

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.list-toolbar strong {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-lg);
}

.list-toolbar small {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  line-height: 1.45;
}

.list-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  min-height: 28px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

.mode-badge.auto {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(45, 137, 92, 0.22);
}

.mode-badge.manual {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(180, 116, 35, 0.22);
}

.editable-cell {
  display: grid;
  gap: 6px;
  align-content: start;
}

.field-select,
.video-task-table select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--text);
  padding: 0 28px 0 10px;
  font: inherit;
}

.field-select:focus {
  border-color: var(--text);
  outline: 2px solid rgba(22, 24, 29, 0.08);
}

.inline-edit {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--accent);
  min-height: 24px;
  padding: 0;
  font-size: var(--fs-xs);
}

.production-lifecycle-page {
  display: grid;
  gap: var(--sp-4);
}

.production-flow-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.production-flow-tabs button {
  min-width: 0;
  min-height: 84px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  text-align: left;
}

.production-flow-tabs button span {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-soft);
  font-weight: 900;
  grid-row: 1 / span 2;
}

.production-flow-tabs button strong,
.production-flow-tabs button small {
  min-width: 0;
}

.production-flow-tabs button small {
  color: var(--text-soft);
  line-height: 1.35;
}

.production-flow-tabs button.active {
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
  box-shadow: var(--shadow-sm);
}

.production-flow-tabs button.active span {
  background: var(--text);
  color: #ffffff;
}

.compact-production-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.compact-production-flow button {
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px var(--sp-2);
  padding: 10px 12px;
  text-align: left;
}

.compact-production-flow button span {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-soft);
  font-weight: 900;
  grid-row: 1 / span 2;
}

.compact-production-flow button strong,
.compact-production-flow button small {
  display: block;
  min-width: 0;
}

.compact-production-flow button small {
  color: var(--text-soft);
  line-height: 1.25;
}

.compact-production-flow button.active {
  border-color: color-mix(in srgb, var(--text) 24%, var(--border));
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.compact-production-flow button.active span {
  background: var(--text);
  color: #ffffff;
}

.task-builder-panel,
.generation-list-panel,
.publish-list-panel {
  gap: var(--sp-4);
}

.task-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-4);
  align-items: start;
}

.task-builder-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.field-stack {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-4);
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
}

.field-stack > strong {
  font-size: var(--fs-base);
}

.field-stack p {
  margin: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
}

.field-stack p span {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.field-stack p b {
  min-width: 0;
  font-weight: 700;
  line-height: 1.45;
}

.field-stack .field-select {
  max-width: 100%;
}

.task-builder-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  position: sticky;
  top: 84px;
}

.task-builder-preview h3,
.task-builder-preview p {
  margin: 0;
}

.task-builder-preview p {
  color: var(--text-soft);
  line-height: 1.5;
}

.preview-product-list {
  display: grid;
  gap: var(--sp-2);
}

.preview-product-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
}

.preview-product-list strong,
.preview-product-list small {
  display: block;
}

.preview-product-list small {
  color: var(--text-soft);
  line-height: 1.4;
}

.task-builder-preview footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.generation-card-list {
  display: grid;
  gap: var(--sp-3);
}

.generation-task-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}

.generation-task-card.ready {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border));
  background: linear-gradient(180deg, #ffffff, var(--green-soft));
}

.generation-task-card header,
.generation-task-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.generation-task-card header strong,
.generation-task-card header small {
  display: block;
}

.generation-task-card header small,
.generation-task-body span {
  color: var(--text-soft);
}

.generation-task-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.generation-task-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
  gap: var(--sp-3);
}

.generation-task-body > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.generation-task-body strong,
.generation-task-body small {
  display: block;
  min-width: 0;
}

.generation-task-body small {
  color: var(--text-soft);
  line-height: 1.4;
}

.batch-overview-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.batch-overview-strip button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  text-align: left;
  color: var(--text);
  display: grid;
  gap: 6px;
}

.batch-overview-strip button span,
.batch-overview-strip button small,
.batch-overview-strip button em {
  color: var(--text-soft);
  font-style: normal;
  line-height: 1.4;
}

.batch-overview-strip button.active {
  border-color: var(--ink);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.batch-progress-workspace {
  gap: var(--sp-4);
}

.batch-control-console {
  min-width: 0;
  display: grid;
  gap: var(--sp-4);
}

.task-progress-header {
  display: grid;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.task-progress-title {
  display: grid;
  gap: 5px;
}

.task-progress-title h2,
.task-progress-title p {
  margin: 0;
}

.task-progress-title p {
  color: var(--text-soft);
}

.progress-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.progress-status-tab {
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 760;
}

.progress-status-tab strong {
  min-width: 22px;
  min-height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 2px 7px;
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-xs);
}

.progress-status-tab.active {
  border-color: var(--ink);
  color: var(--text);
}

.progress-status-tab.active strong {
  background: var(--surface-2);
  color: var(--text);
}

.batch-console-header {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--sp-4);
  align-items: start;
}

.current-batch-panel {
  box-shadow: var(--shadow-sm);
}

.batch-console-main,
.batch-console-side,
.batch-console-title {
  min-width: 0;
  display: grid;
  gap: var(--sp-3);
}

.batch-console-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.batch-console-kicker .eyebrow + .eyebrow {
  color: var(--text);
}

.batch-console-header h2,
.batch-console-header p {
  margin: 0;
}

.batch-console-header p {
  color: var(--text-soft);
}

.batch-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.batch-switcher > span {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.batch-switcher button {
  flex: 0 0 auto;
  min-width: 210px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--sp-2);
  align-items: center;
}

.batch-switcher button strong,
.batch-switcher button small,
.batch-switcher button em {
  min-width: 0;
  display: block;
}

.batch-switcher button small {
  grid-column: 1 / 2;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-switcher button em {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--text-soft);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 800;
}

.batch-switcher button.active {
  border-color: color-mix(in srgb, var(--text) 24%, var(--border));
  background: #ffffff;
}

.batch-switcher button.active em {
  background: var(--text);
  color: #ffffff;
}

.batch-next-action {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.batch-next-action span,
.batch-next-action small {
  color: var(--text-soft);
}

.batch-console-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.batch-console-actions .primary-button,
.batch-console-actions .soft-button {
  min-height: 32px;
  padding-inline: 12px;
}

.batch-console-header .status-overview-panel {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}

.batch-health-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.batch-health-strip span {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
  display: grid;
  gap: 4px;
}

.batch-health-strip b,
.batch-health-strip small {
  display: block;
}

.batch-health-strip small {
  color: var(--text-soft);
}

.status-overview-panel {
  display: grid;
  gap: var(--sp-2);
}

.section-heading.compact {
  margin-bottom: 0;
  align-items: center;
}

.status-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}

.progress-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.status-bucket-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 10px 12px;
  min-height: 108px;
  text-align: left;
  color: var(--text);
  display: grid;
  gap: 6px;
  align-content: start;
}

.status-bucket-card.active {
  border-color: var(--ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.status-bucket-card span,
.status-bucket-card small,
.status-bucket-card em {
  color: var(--text-soft);
  font-style: normal;
  line-height: 1.35;
}

.status-bucket-card strong {
  font-size: 28px;
  line-height: 1;
}

.progress-status-strip .status-bucket-card {
  min-height: 38px;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.progress-status-strip .status-bucket-card strong {
  font-size: var(--fs-base);
}

.progress-status-strip .status-bucket-card span {
  color: var(--text-soft);
  font-weight: 780;
}

.progress-workbench {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  display: grid;
  overflow: hidden;
}

.progress-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.progress-toolbar-left,
.progress-toolbar-right {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.progress-toolbar-left {
  flex: 1 1 auto;
}

.progress-toolbar-right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.progress-toolbar-right > span {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 780;
}

.progress-workbench-filters {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.progress-filter-chips {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.progress-filter-chip-wrap {
  position: relative;
  display: inline-flex;
}

.progress-filter-chip {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.progress-filter-chip.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 76%, #ffffff);
  color: var(--text);
}

.progress-filter-chip i {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-style: normal;
}

.progress-filter-menu {
  position: absolute;
  z-index: 12;
  left: 0;
  top: calc(100% + 8px);
  width: 240px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
}

.progress-filter-option {
  min-height: 34px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  text-align: left;
}

.progress-filter-option b {
  color: var(--accent);
  font-size: var(--fs-xs);
}

.progress-filter-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-filter-option.active,
.progress-filter-option:hover {
  background: color-mix(in srgb, var(--accent-soft) 68%, #ffffff);
}

.progress-search {
  min-width: min(280px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 8px 10px;
  display: inline-flex;
  flex: 1 1 300px;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  max-width: 420px;
}

.progress-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.queue-filter-bar strong,
.queue-filter-bar small {
  display: block;
}

.queue-filter-bar small {
  color: var(--text-soft);
  line-height: 1.45;
}

.progress-list-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.progress-list-actions .primary-button,
.progress-list-actions .soft-button {
  min-height: 32px;
  padding-inline: 12px;
}

.progress-task-table {
  width: 100%;
  display: grid;
  overflow-x: auto;
}

.progress-task-row {
  min-width: 1080px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(190px, 1.16fr) minmax(140px, 0.78fr) minmax(86px, 0.42fr) minmax(112px, 0.56fr) minmax(100px, 0.48fr) minmax(108px, 0.52fr) minmax(170px, 0.92fr) minmax(118px, 0.58fr);
  align-items: stretch;
}

.progress-task-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  letter-spacing: 0;
}

.progress-sort-button {
  width: 100%;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.progress-sort-button i {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-style: normal;
}

.progress-sort-button.active {
  color: var(--text);
}

.progress-task-row:not(.head):hover,
.progress-task-row.active {
  background: color-mix(in srgb, var(--surface-2) 72%, #ffffff);
}

.progress-task-row > span,
.progress-task-row > strong {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  display: grid;
  gap: 4px;
  align-content: center;
}

.progress-task-row > span:last-child,
.progress-task-row > strong:last-child {
  border-right: 0;
}

.progress-task-row b,
.progress-task-row small,
.progress-task-row i {
  min-width: 0;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-task-row small {
  color: var(--text-soft);
}

.progress-task-row i {
  width: fit-content;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 800;
}

.progress-product-cell {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.progress-product-link,
.progress-handle-link {
  min-width: 0;
  color: var(--text);
  font-weight: 850;
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-product-link:hover,
.progress-handle-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.progress-handle-link {
  display: block;
}

.progress-product-cell small {
  min-width: 0;
}

.progress-generated-video-cell {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.progress-video-thumb {
  width: 46px;
  height: 62px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-soft);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  text-align: center;
}

.progress-video-thumb small {
  padding: 4px;
  white-space: normal;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
}

.progress-video-thumb.ready {
  border-style: solid;
  background: #111827;
  cursor: pointer;
}

.progress-video-thumb.playing {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.1);
}

.progress-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-preview-play {
  position: absolute;
  inset: auto 6px 6px 6px;
  min-height: 20px;
  border-radius: var(--r-pill);
  background: rgba(17, 24, 39, 0.82);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 850;
}

.progress-row-action {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  display: grid;
  gap: 4px;
}

.progress-row-action b,
.progress-row-action small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-row-action b {
  font-weight: 860;
}

.progress-row-action small {
  color: var(--text-soft);
}

.video-preview-panel {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
}

.video-preview-player {
  min-height: 220px;
  border-radius: var(--r-md);
  background: #111827;
  color: #ffffff;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}

.video-preview-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-preview-player .video-preview-play {
  inset: auto auto 14px 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-width: 52px;
  min-height: 28px;
  font-size: var(--fs-xs);
}

.video-preview-meta {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.video-preview-meta strong,
.video-preview-meta small,
.video-preview-meta p {
  margin: 0;
  min-width: 0;
  line-height: 1.45;
}

.video-preview-meta small,
.video-preview-meta p {
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.empty-progress-row {
  min-width: 100%;
  padding: var(--sp-5);
  color: var(--text-soft);
  text-align: center;
}

.progress-view-toggle {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 3px;
}

.progress-view-toggle button {
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  padding: 8px 14px;
  font-weight: 700;
  color: var(--text-soft);
}

.progress-view-toggle button.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.batch-workspace-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.batch-kanban-board {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}

.kanban-column {
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-2);
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.kanban-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 6px;
}

.kanban-column header span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.kanban-column-body {
  display: grid;
  gap: var(--sp-2);
}

.kanban-video-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  text-align: left;
  color: var(--text);
  display: grid;
  gap: 6px;
}

.kanban-video-card.active {
  border-color: var(--ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.kanban-video-card span,
.kanban-video-card small,
.kanban-video-card em {
  color: var(--text-soft);
  font-style: normal;
  line-height: 1.4;
}

.kanban-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compact-quality {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.compact-quality.pass {
  color: var(--green);
  background: var(--green-soft);
}

.compact-quality.bad {
  color: var(--red);
  background: var(--red-soft);
}

.compact-quality.warning {
  color: var(--amber);
  background: var(--amber-soft);
}

.empty-column {
  margin: 0;
  padding: var(--sp-3);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--text-soft);
  background: #ffffff;
}

.video-task-detail-modal {
  width: min(960px, 100%);
}

.video-task-detail-modal footer {
  position: sticky;
  bottom: calc(var(--sp-5) * -1);
  z-index: 2;
  margin-inline: calc(var(--sp-5) * -1);
  margin-bottom: calc(var(--sp-5) * -1);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
}

.video-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.video-task-edit-form {
  display: grid;
  gap: var(--sp-3);
}

.drawer-section {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  display: grid;
  gap: 8px;
}

.drawer-section > strong {
  font-size: var(--fs-sm);
}

.drawer-section p {
  margin: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
}

.drawer-section p span {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.drawer-section p b {
  min-width: 0;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.drawer-section .field-select {
  width: 100%;
}

.editable-detail-section {
  align-content: start;
}

.editable-detail-control {
  display: grid;
  gap: 6px;
}

.detail-input,
.detail-select,
.detail-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  line-height: 1.35;
  padding: 8px 10px;
  outline: 0;
}

.detail-textarea {
  resize: vertical;
}

.detail-input:focus,
.detail-select:focus,
.detail-textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.08);
}

.batch-table-view {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: auto;
}

.batch-table-panel {
  min-width: 0;
  display: grid;
  gap: var(--sp-3);
}

.batch-table-row {
  min-width: 1120px;
  width: 100%;
  display: grid;
  grid-template-columns: 130px 260px 180px 180px 190px 210px 210px;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  text-align: left;
  color: var(--text);
}

.batch-table-row.head {
  background: var(--surface-2);
}

.batch-table-row span,
.batch-table-row b,
.batch-table-row small {
  display: block;
  min-width: 0;
}

.batch-table-row small {
  color: var(--text-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.publish-account-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}

.publish-account-strip button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  color: var(--text);
  text-align: left;
  display: grid;
  gap: 4px;
}

.publish-account-strip button.active {
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
  box-shadow: var(--shadow-sm);
}

.publish-account-strip small {
  color: var(--text-soft);
  line-height: 1.35;
}

.publish-check-table .data-row {
  grid-template-columns: 230px 210px 170px 132px 150px 180px 164px 220px;
  min-width: 1456px;
}

.publish-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.publish-status-tab {
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 760;
}

.publish-status-tab strong {
  min-width: 22px;
  min-height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 2px 7px;
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-xs);
}

.publish-status-tab.active {
  border-color: var(--ink);
  color: var(--text);
  box-shadow: none;
}

.publish-status-tab.active strong {
  background: var(--surface-2);
  color: var(--text);
}

.publish-workbench {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  display: grid;
  overflow: hidden;
}

.publish-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.publish-toolbar-left,
.publish-toolbar-right {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.publish-toolbar-left {
  flex: 1 1 100%;
}

.publish-toolbar-right {
  flex: 1 1 100%;
  justify-content: flex-end;
}

.publish-toolbar-right > span {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 780;
}

.publish-workbench-filters {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.publish-filter-chips {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.publish-filter-chip-wrap {
  position: relative;
  display: inline-flex;
}

.publish-filter-chip {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.publish-filter-chip.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 76%, #ffffff);
  color: var(--text);
}

.publish-filter-chip i {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-style: normal;
}

.publish-filter-menu {
  position: absolute;
  z-index: 12;
  left: 0;
  top: calc(100% + 8px);
  width: 240px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
}

.publish-filter-option {
  min-height: 34px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  text-align: left;
}

.publish-filter-option b {
  color: var(--accent);
  font-size: var(--fs-xs);
}

.publish-filter-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-filter-option.active,
.publish-filter-option:hover {
  background: color-mix(in srgb, var(--accent-soft) 68%, #ffffff);
}

.publish-search {
  min-width: min(280px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 8px 10px;
  display: inline-flex;
  flex: 1 1 300px;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  max-width: 420px;
}

.publish-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.publish-task-table {
  width: 100%;
  display: grid;
  overflow-x: auto;
}

.publish-task-row {
  min-width: 1080px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(140px, 0.72fr) minmax(150px, 0.76fr) minmax(160px, 0.78fr) minmax(150px, 0.72fr) minmax(160px, 0.76fr) minmax(90px, 0.48fr);
  align-items: stretch;
}

.publish-task-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  letter-spacing: 0;
}

.publish-task-row:not(.head):hover,
.publish-task-row.active {
  background: color-mix(in srgb, var(--surface-2) 72%, #ffffff);
}

.publish-task-row > span,
.publish-task-row > strong {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  display: grid;
  gap: 4px;
  align-content: center;
}

.publish-task-row > span:last-child,
.publish-task-row > strong:last-child {
  border-right: 0;
}

.publish-task-row b,
.publish-task-row small,
.publish-task-row i {
  min-width: 0;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-task-row small {
  color: var(--text-soft);
}

.publish-task-row i {
  width: fit-content;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 800;
}

.publish-schedule-cell {
  align-content: center;
}

.publish-schedule-control {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.publish-schedule-control small {
  color: var(--text-soft);
  font-weight: 760;
}

.publish-schedule-input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0 8px;
  font: inherit;
  font-size: var(--fs-xs);
}

.publish-schedule-save {
  min-height: 30px;
  justify-self: start;
  padding: 0 10px;
}

.publish-content-cell {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.publish-content-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.publish-video-thumb {
  width: 46px;
  height: 62px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #111827;
  color: var(--text-soft);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  text-align: center;
  cursor: pointer;
}

.publish-video-thumb.playing {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.1);
}

.publish-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publish-sort-button {
  width: 100%;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.publish-sort-button i {
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-style: normal;
}

.publish-sort-button.active {
  color: var(--text);
}

.publish-row-action {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  display: grid;
  gap: 4px;
}

.publish-row-action b,
.publish-row-action small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-inline-preview {
  min-width: 1080px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 70%, #ffffff);
  padding: var(--sp-3) var(--sp-4);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
}

.publish-inline-player {
  min-height: 238px;
  border-radius: var(--r-md);
  background: #111827;
  color: #ffffff;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}

.publish-inline-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publish-inline-player .video-preview-play {
  inset: auto auto 14px 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-width: 60px;
  min-height: 28px;
  font-size: var(--fs-xs);
}

.publish-inline-meta {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 8px;
}

.publish-inline-meta strong,
.publish-inline-meta small {
  margin: 0;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.publish-inline-meta small {
  color: var(--text-soft);
}

.publish-task-detail-modal {
  width: min(960px, 100%);
}

.publish-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.publish-preview-panel {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
}

.publish-preview-player {
  min-height: 220px;
  border-radius: var(--r-md);
  background: #111827;
  color: #ffffff;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}

.publish-preview-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publish-preview-player .video-preview-play {
  inset: auto auto 14px 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-width: 52px;
  min-height: 28px;
  font-size: var(--fs-xs);
}

.publish-preview-meta {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.publish-preview-meta strong,
.publish-preview-meta small,
.publish-preview-meta p {
  margin: 0;
  min-width: 0;
  line-height: 1.45;
}

.publish-preview-meta small,
.publish-preview-meta p {
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.empty-publish-row {
  min-width: 100%;
  padding: var(--sp-5);
  color: var(--text-soft);
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(22, 24, 29, 0.32);
  backdrop-filter: blur(8px);
}

.task-modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

.viral-video-modal {
  width: min(980px, 100%);
}

.video-task-detail-modal {
  width: min(960px, 100%);
}

.progress-video-preview-modal {
  width: min(880px, 100%);
}

.progress-video-preview-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}

.progress-video-preview-player {
  min-height: 460px;
  border-radius: var(--r-md);
  background: #111827;
  color: #ffffff;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}

.progress-video-preview-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.progress-video-preview-player .video-preview-play {
  inset: auto auto 18px 50%;
  bottom: 18px;
  transform: translateX(-50%);
  min-width: 68px;
  min-height: 30px;
  font-size: var(--fs-xs);
}

.progress-video-preview-meta {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.progress-video-preview-meta strong,
.progress-video-preview-meta p,
.progress-video-preview-meta small {
  margin: 0;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.progress-video-preview-meta small {
  color: var(--text-soft);
}

.viral-modal-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.viral-modal-poster {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 9 / 16;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.viral-modal-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viral-modal-details {
  display: grid;
  gap: var(--sp-4);
}

.viral-modal-actions {
  justify-content: flex-end;
}

.task-modal header,
.task-modal footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.task-modal h2 {
  margin: var(--sp-1) 0;
}

.task-modal p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.task-modal footer {
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.product-picker-list {
  display: grid;
  gap: var(--sp-2);
}

.product-picker-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
}

.product-picker-list article.selected {
  border-color: rgba(44, 103, 212, 0.32);
  background: var(--blue-soft);
}

.product-picker-list small {
  display: block;
  margin-top: 3px;
  color: var(--text-soft);
  line-height: 1.4;
}

.product-picker-list em {
  color: var(--text-soft);
  font-style: normal;
  font-size: var(--fs-xs);
}

.modal-mode-section {
  display: grid;
  gap: var(--sp-2);
}

.modal-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.modal-mode-options button {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  text-align: left;
  display: grid;
  gap: 4px;
}

.modal-mode-options button.active {
  border-color: rgba(22, 24, 29, 0.38);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.14);
}

.modal-mode-options small {
  color: var(--text-soft);
  line-height: 1.45;
}

.quality-badge {
  display: grid;
  gap: 3px;
  border-radius: var(--r-sm);
  padding: 6px 8px;
  line-height: 1.25;
}

.quality-badge strong {
  font-size: var(--fs-xs);
}

.quality-badge small {
  color: inherit;
  opacity: 0.82;
}

.quality-badge.pass {
  background: var(--success-soft);
  color: var(--success);
}

.quality-badge.warning {
  background: var(--amber-soft);
  color: var(--amber);
}

.quality-badge.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.video-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  min-height: 28px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 850;
  white-space: nowrap;
}

.video-status-badge i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.video-status-badge.not-started {
  background: var(--surface-2);
  color: var(--text-soft);
}

.video-status-badge.running {
  background: var(--blue-soft);
  color: var(--blue);
}

.video-status-badge.done {
  background: var(--green-soft);
  color: var(--green);
}

.status-filter-bar button {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  min-height: 32px;
  padding: 0 var(--sp-3);
  color: var(--text-soft);
}

.status-filter-bar button.active {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.publish-account-hub {
  min-height: 560px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.publish-account-sidebar {
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: var(--sp-4);
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.publish-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.soft-button.compact {
  min-height: 30px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
}

.publish-account-search {
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 var(--sp-3);
  color: var(--text-mute);
}

.publish-account-search input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  color: var(--text);
}

.publish-account-list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.publish-account-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: var(--sp-3);
  display: grid;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.publish-account-card.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
}

.publish-account-card small,
.publish-account-card span,
.publish-region-card small,
.publish-feature-grid small {
  color: var(--text-soft);
  line-height: 1.45;
}

.publish-account-card span {
  width: fit-content;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.publish-authorization-panel {
  padding: var(--sp-5);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--sp-3);
  background:
    radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--accent-soft) 76%, transparent), transparent 36%),
    linear-gradient(180deg, #ffffff, var(--bg));
}

.publish-reward-strip {
  width: min(100%, 860px);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border));
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--amber-soft), #fff);
  color: var(--amber);
  padding: var(--sp-3) var(--sp-4);
}

.publish-reward-strip span {
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 4px 10px;
  font-weight: 850;
}

.publish-hero-copy {
  max-width: 720px;
  text-align: center;
  display: grid;
  gap: var(--sp-2);
}

.publish-hero-copy h2 {
  margin: 0;
  font-size: var(--fs-2xl);
}

.publish-hero-copy p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
}

.publish-region-card {
  width: min(100%, 720px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 86%, var(--green-soft));
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}

.region-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.region-chip-row span {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  min-height: 24px;
  padding: 0 var(--sp-2);
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.publish-preview-frame {
  width: min(100%, 600px);
  aspect-ratio: 16 / 7.7;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #181c24;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.browser-dots {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--sp-3);
  background: #11151d;
}

.browser-dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: #ff6b6b;
}

.browser-dots i:nth-child(2) {
  background: #fbbf24;
}

.browser-dots i:nth-child(3) {
  background: #34d399;
}

.publish-video-preview {
  height: calc(100% - 28px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  color: var(--surface);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.45), transparent 34%),
    #161922;
}

.publish-video-preview span {
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xs);
}

.publish-feature-grid {
  width: min(100%, 600px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.publish-feature-grid article {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  min-height: 94px;
  box-shadow: var(--shadow-sm);
}

.publish-account-modal {
  max-width: 560px;
}

.publish-account-type-list {
  display: grid;
  gap: var(--sp-3);
}

.publish-account-type-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  min-height: 92px;
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  text-align: left;
}

.publish-account-type-card.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

.publish-account-type-card .type-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--surface);
  font-weight: 900;
}

.publish-account-type-card strong,
.publish-account-type-card em {
  grid-column: 2;
  display: block;
  font-style: normal;
}

.publish-account-type-card strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.publish-account-type-card strong small {
  border-radius: var(--r-pill);
  background: var(--amber-soft);
  color: var(--amber);
  padding: 2px 8px;
  font-size: var(--fs-xs);
}

.publish-account-type-card em {
  margin-top: -10px;
  color: var(--text-soft);
  line-height: 1.45;
}

.inline-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: linear-gradient(135deg, #ffffff, var(--amber-soft));
}

.inline-suggestion strong {
  display: block;
  margin-top: var(--sp-1);
  line-height: 1.55;
}

.product-handoff {
  background: linear-gradient(135deg, #ffffff, var(--green-soft));
}

.handoff-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.handoff-flow article,
.stage-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  min-height: 142px;
}

.handoff-flow article span {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--surface);
  font-weight: 850;
}

.handoff-flow article small,
.stage-card small,
.matrix-agent-panel small {
  color: var(--text-soft);
  line-height: 1.5;
}

.batch-stage-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
}

.stage-card span {
  width: fit-content;
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.stage-card.done span {
  background: var(--green-soft);
  color: var(--green);
}

.stage-card.work span {
  background: var(--blue-soft);
  color: var(--blue);
}

.stage-card.wait span {
  background: var(--surface-2);
  color: var(--text-soft);
}

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

.gap-card,
.signal-card,
.calendar-day {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.gap-card {
  display: grid;
  gap: 8px;
}

.work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 118px;
  gap: var(--sp-3);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.work-item strong,
.work-item span {
  display: block;
  line-height: 1.45;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.pipeline-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 118px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: var(--sp-3);
}

.pipeline-step::before {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

.pipeline-step.done::before,
.timeline article.done i {
  background: var(--green);
}

.pipeline-step.work::before,
.timeline article.work i {
  background: var(--blue);
}

.pipeline-step.wait::before,
.timeline article.wait i {
  background: var(--amber);
}

.timeline article {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.timeline i {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

.timeline strong,
.timeline span {
  display: block;
  line-height: 1.45;
}

.timeline article.bad i {
  background: var(--danger);
}

.signal-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.signal-card {
  display: grid;
  gap: 6px;
}

.signal-card strong {
  font-size: var(--fs-xl);
}

.detail-panel .detail-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 300px;
  gap: var(--sp-4);
  align-items: start;
}

.detail-grid > img {
  width: 180px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-2);
}

.clone-flow {
  min-height: 560px;
}

.clone-remix-workbench {
  height: calc(100vh - 96px);
  min-height: 720px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.clone-side-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  overflow-y: auto;
  padding: 20px 20px 28px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}

.clone-panel-title,
.clone-section-head,
.clone-stage-head,
.clone-stage-tags,
.clone-stage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clone-panel-title strong,
.clone-section-head span {
  font-size: 15px;
  font-weight: 850;
}

.clone-panel-title span,
.clone-section-head button,
.clone-stage-tags span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 750;
}

.clone-sidebar-section {
  display: grid;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.clone-sidebar-section p,
.clone-sidebar-section small,
.clone-preview-stage p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
  font-size: 12px;
}

.clone-link-field,
.clone-form-field {
  display: grid;
  gap: 7px;
}

.clone-link-field {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 8px;
}

.clone-link-field input,
.clone-form-field input,
.clone-form-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
}

.clone-link-field input {
  border: 0;
  padding: 6px 8px;
}

.clone-link-field button,
.clone-media-upload button {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-weight: 800;
}

.clone-media-upload {
  display: grid;
  gap: 10px;
}

.clone-media-upload > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.clone-media-upload button {
  min-height: 68px;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
}

.clone-manual-product {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.clone-manual-product summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.clone-manual-product summary::-webkit-details-marker {
  display: none;
}

.clone-manual-product summary::after {
  content: "展开";
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-soft);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 850;
}

.clone-manual-product[open] summary::after {
  content: "收起";
}

.clone-manual-product:not([open]) .clone-manual-body {
  display: none;
}

.clone-manual-product summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.clone-manual-product summary small {
  margin-left: auto;
  color: var(--text-soft);
}

.clone-manual-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.clone-form-field span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.clone-field-caption {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

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

.clone-sticky-action {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 16px;
  background: linear-gradient(180deg, rgba(243, 243, 239, 0), var(--surface-2) 42%);
}

.clone-sticky-action .primary-button {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  background: var(--text);
  color: var(--surface);
}

.clone-preview-stage {
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
  padding: 48px 48px 72px;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(4, 120, 87, 0.03)),
    var(--surface);
}

.clone-stage-head {
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.clone-stage-head h1 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}

.clone-stage-head .eyebrow {
  color: var(--accent);
}

.clone-stage-tags {
  justify-content: center;
  flex-wrap: wrap;
}

.clone-stage-tags span {
  border-color: #ded0fb;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.clone-video-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 280px));
  justify-content: center;
  align-items: start;
  gap: 32px;
}

.clone-preview-phone {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.clone-preview-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clone-phone-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.72);
  color: #fff;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.clone-floating-metric {
  position: absolute;
  right: 10px;
  top: 70px;
  display: grid;
  gap: 12px;
  text-align: center;
}

.clone-floating-metric span {
  min-width: 56px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.64);
  color: #fff;
  padding: 8px 7px;
  backdrop-filter: blur(8px);
}

.clone-floating-metric small {
  display: block;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
}

.clone-floating-metric b {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.clone-stage-actions {
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.clone-stage-actions .primary-button {
  background: var(--text);
  color: var(--surface);
}

.clone-stage-actions .soft-button {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.flow-steps.compact {
  justify-content: start;
  padding-top: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: var(--sp-3);
  overflow-x: auto;
}

.calendar-day {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 9px;
}

.template-grid .workflow-card h3,
.asset-card h3 {
  margin: 4px 0;
}

.workflow-card p {
  min-height: 48px;
}

.good {
  background: var(--green-soft);
  color: var(--green);
}

.work {
  background: var(--blue-soft);
  color: var(--blue);
}

.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.neutral {
  background: var(--surface-2);
  color: var(--text-soft);
}

@media (max-width: 1180px) {
  .detail-panel .detail-grid,
  .run-summary {
    grid-template-columns: 1fr;
  }

  .bulk-action-bar,
  .list-toolbar,
  .task-builder-grid,
  .matrix-layout,
  .batch-workspace-body {
    grid-template-columns: 1fr;
    display: grid;
  }

  .task-builder-preview {
    position: static;
  }

  .publish-account-strip,
  .generation-task-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .handoff-flow,
  .batch-stage-grid,
  .generation-template-grid,
  .task-create-grid,
  .generation-example-grid,
  .scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .match-mode-grid {
    grid-template-columns: 1fr;
  }

  .matrix-agent-panel {
    position: static;
  }

  .gap-grid,
  .signal-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-overview-strip {
    grid-template-columns: 1fr;
  }

  .batch-console-header,
  .status-overview-grid {
    grid-template-columns: 1fr;
  }

  .progress-toolbar {
    align-items: stretch;
  }

  .progress-toolbar-left,
  .progress-toolbar-right {
    justify-content: flex-start;
  }

  .progress-search {
    width: 100%;
  }

  .progress-search input {
    width: 100%;
  }

  .batch-console-actions {
    justify-content: flex-start;
  }

  .batch-health-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-row {
    grid-template-columns: 1fr 90px;
  }
}

@media (max-width: 820px) {
  .section-group .section-label {
    display: none;
  }

  .gap-grid,
  .signal-board,
  .workbench-quick-grid,
  .performance-grid,
  .production-flow-tabs,
  .compact-production-flow,
  .task-builder-main,
  .publish-account-strip,
  .generation-task-body,
  .handoff-flow,
  .batch-stage-grid,
  .generation-template-grid,
  .task-create-grid,
  .generation-example-grid,
  .scenario-grid,
  .match-mode-grid,
  .create-stepper {
    grid-template-columns: 1fr;
  }

  .generation-hero {
    min-height: 0;
    padding: var(--sp-5);
  }

  .batch-kanban-board {
    grid-template-columns: repeat(6, minmax(240px, 260px));
  }

  .video-task-detail-modal header,
  .video-task-detail-modal footer {
    align-items: stretch;
    flex-direction: column;
  }

  .video-task-detail-grid {
    grid-template-columns: 1fr;
  }

  .queue-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .batch-switcher {
    align-items: stretch;
    flex-direction: column;
  }

  .batch-switcher button {
    width: 100%;
    min-width: 0;
  }

  .batch-health-strip {
    grid-template-columns: 1fr;
  }

  .generation-hero-media {
    display: none;
  }

  .generation-hero-head h1 {
    font-size: 30px;
  }

  .generation-composer {
    border-radius: var(--r-md);
  }

  .composer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .model-toolbar {
    width: 100%;
  }

  .tool-pill,
  .icon-tool,
  .generation-composer .send-button {
    width: 100%;
    justify-content: center;
  }

  .work-item,
  .account-row,
  .detail-panel .detail-grid {
    grid-template-columns: 1fr;
  }

  .workspace-greeting,
  .agent-card-head,
  .opportunity-row,
  .performance-card p {
    grid-template-columns: 1fr;
    display: grid;
  }

  .news-ticker {
    max-width: none;
  }

  .hot-video-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-row {
    min-width: 760px;
  }

  .product-table .data-row,
  .account-table .data-row,
  .matrix-table .data-row {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }

  .analytics-account-table .data-row {
    grid-template-columns: repeat(15, minmax(120px, 1fr));
    min-width: 1800px;
  }

  .analytics-product-content-table .data-row {
    grid-template-columns: repeat(19, minmax(120px, 1fr));
    min-width: 2280px;
  }

  .queue-table .data-row {
    grid-template-columns: repeat(21, minmax(120px, 1fr));
    min-width: 2520px;
  }

  .product-asset-table .data-row {
    grid-template-columns: repeat(9, minmax(120px, 1fr));
    min-width: 1080px;
  }

  .asset-account-table .data-row {
    grid-template-columns: 180px 160px 180px 240px 96px;
    min-width: 856px;
  }

  .asset-scene-table .data-row {
    grid-template-columns: 180px 320px 220px 110px;
    min-width: 830px;
  }

  .script-library-table .data-row {
    grid-template-columns: repeat(10, minmax(130px, 1fr));
    min-width: 1300px;
  }

  .product-detail-header,
  .account-detail-grid,
  .scene-detail-grid,
  .product-detail-layout,
  .product-expanded-image-grid,
  .product-qr-preview-body,
  .script-detail-grid,
  .script-prompt-grid {
    grid-template-columns: 1fr;
  }

  .detail-section-title {
    justify-content: flex-start;
  }
}