:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e1ea;
  --line-strong: #bdc9d7;
  --primary: #2563eb;
  --primary-soft: #eaf1ff;
  --teal: #0f766e;
  --teal-soft: #e8f5f2;
  --amber: #a16207;
  --amber-soft: #fff6df;
  --rose: #b42318;
  --rose-soft: #fff1ef;
  --violet: #6d28d9;
  --violet-soft: #f1ecff;
  --shadow: 0 12px 28px rgba(23, 32, 51, 0.07);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  min-width: 0;
}

button {
  color: inherit;
}

a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: 26px;
  line-height: 1.18;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.25;
}

h3 {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.25;
}

p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

h1,
h2,
h3,
p,
strong,
small,
label,
a,
button,
span {
  overflow-wrap: anywhere;
}

.app-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
  padding: 20px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  background: var(--teal-soft);
  color: #075e54;
  font-weight: 950;
}

.brand strong,
.brand small {
  display: block;
}

.brand small,
small {
  color: var(--muted);
}

.nav {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font-weight: 850;
  text-align: left;
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  color: #667085;
}

.nav-btn:hover {
  background: #eef2f7;
}

.nav-btn.active {
  border-color: #c7d7ff;
  background: var(--primary-soft);
  color: #1d4ed8;
}

.main {
  min-width: 0;
  padding: 24px;
}

.topbar,
.project-strip,
.view,
.notice {
  width: 100%;
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
}

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

.topbar > div,
.panel-head > div,
.package-main,
.flow-main {
  min-width: 0;
}

.icon-btn,
.btn,
.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 850;
}

.icon-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.btn {
  min-height: 40px;
  padding: 9px 13px;
}

.mini-btn {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.btn svg,
.icon-btn svg,
.mini-btn svg {
  width: 17px;
  height: 17px;
}

.btn.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.btn.full {
  width: 100%;
}

.btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.notice {
  margin-bottom: 14px;
  border: 1px solid #bcd3f8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #eff6ff;
  color: #1e4977;
}

.notice.error {
  border-color: #f1b9b0;
  background: var(--rose-soft);
  color: #8a251d;
}

.hidden,
.view {
  display: none;
}

.view.active {
  display: block;
}

.dashboard-grid,
.two-col {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.two-col.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.panel,
.package-card,
.package-row,
.flow-row,
.section-list,
.suggestion,
.metric-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  min-width: 0;
  padding: 16px;
  margin-bottom: 14px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-head.split {
  justify-content: space-between;
}

.project-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.project-strip span,
.project-strip strong,
.project-strip small {
  display: block;
}

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

.project-strip strong {
  margin-top: 3px;
  line-height: 1.25;
}

.project-strip small {
  margin-top: 4px;
  color: var(--muted);
}

.replication-flow-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 1480px;
  margin: 0 auto 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.replication-flow-panel span,
.replication-flow-panel strong {
  display: block;
}

.replication-flow-panel > div:first-child > span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.replication-flow-panel strong {
  line-height: 1.35;
}

.replication-flow-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.replication-flow-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: #475467;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.replication-flow-steps svg {
  width: 15px;
  height: 15px;
  color: var(--teal);
}

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

.api-status-strip {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.api-status-strip span {
  border: 1px solid #b9d6d0;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--teal-soft);
  color: var(--teal);
  white-space: nowrap;
}

.task-form {
  display: grid;
  gap: 10px;
}

.compact-form {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

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

label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

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

.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: #475467;
  cursor: pointer;
  font-weight: 850;
}

.mode-btn svg {
  width: 16px;
  height: 16px;
}

.mode-btn.active {
  border-color: #c7d7ff;
  background: var(--primary-soft);
  color: #1d4ed8;
}

.mode-panel {
  display: none;
}

.mode-panel.active {
  display: grid;
  gap: 8px;
}

.input-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.auto-run-form-box {
  display: grid;
  gap: 8px;
  border: 1px solid #c7d7ff;
  border-radius: 8px;
  padding: 10px;
  background: var(--primary-soft);
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}

select {
  text-overflow: ellipsis;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #8ab0f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2);
}

.drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.drawer summary::-webkit-details-marker {
  display: none;
}

.drawer svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

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

.kpi,
.pipe-step {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: var(--surface-2);
}

.kpi svg,
.pipe-step svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.kpi span,
.pipe-step span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1;
}

.account-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.monitor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr);
  gap: 12px;
  margin-top: 12px;
}

.monitor-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}

.monitor-head,
.shop-progress-row,
.account-monitor-row,
.video-rank-row,
.alert-row {
  display: grid;
  gap: 10px;
  align-items: center;
}

.monitor-head {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 10px;
}

.monitor-head small,
.shop-progress-row small,
.account-monitor-row small,
.video-rank-row small,
.alert-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.shop-progress-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .35fr);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.shop-progress-row:first-child,
.account-monitor-row:first-child,
.video-rank-row:first-child,
.alert-row:first-child {
  border-top: 0;
}

.progress-cell {
  display: grid;
  gap: 6px;
}

.progress-cell span {
  justify-self: end;
  font-size: 12px;
  font-weight: 950;
  color: var(--teal);
}

.mini-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e7eef8;
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.account-monitor-row {
  grid-template-columns: minmax(240px, 1fr) minmax(120px, auto) minmax(80px, auto) minmax(80px, auto) minmax(140px, auto) minmax(104px, auto);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.account-monitor-row .mini-btn {
  justify-self: end;
  white-space: nowrap;
}

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

.account-monitor-row > span,
.video-rank-row > strong {
  font-weight: 900;
}

.account-monitor-row.behind {
  color: #7a2e0e;
}

.compact-monitor {
  grid-template-columns: 1fr;
}

.compact-alerts {
  margin-top: 10px;
}

.account-link-row .mini-btn {
  justify-self: end;
  white-space: nowrap;
}

.video-rank-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.video-rank-row > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf8f5;
  color: var(--teal);
  font-weight: 950;
  font-size: 12px;
}

.alert-row {
  grid-template-columns: 20px minmax(0, 1fr);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.alert-row svg {
  width: 18px;
  height: 18px;
  color: #b54708;
}

.alert-row.risk svg {
  color: #b42318;
}

.data-readiness-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d9e8f5;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.data-readiness-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.readiness-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.readiness-pills span {
  border-radius: 999px;
  padding: 5px 9px;
  background: #eaf3ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 950;
}

.data-readiness-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: #344054;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

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

.pipe-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.pipe-step span {
  margin-top: 0;
}

.pipe-step strong {
  font-size: 15px;
}

.pipe-step.active {
  border-color: #b9d6d0;
  background: var(--teal-soft);
}

.workflow-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.task-search-row {
  position: relative;
  margin-bottom: 12px;
}

.task-search-row svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: translateY(-50%);
}

.task-search-row input {
  padding-left: 34px;
}

.workflow-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: var(--surface);
}

.replication-task-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.replication-task-card.just-created {
  border-color: #8ab0f8;
  background: #f7fbff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.task-card-main,
.task-card-actions {
  min-width: 0;
}

.task-title-row,
.task-meta-row,
.task-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.task-title-row {
  justify-content: space-between;
}

.task-card-main strong,
.task-card-main small,
.task-card-main p {
  display: block;
}

.task-card-main small {
  margin-top: 5px;
  color: var(--muted);
}

.task-card-main p {
  margin-top: 7px;
  color: #344054;
  font-size: 13px;
}

.task-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: #344054;
  font-size: 12px;
  font-weight: 850;
}

.task-source-row span,
.task-source-row a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
}

.task-source-row svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.task-reference-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  padding: 9px 10px;
  margin-top: 10px;
  background: #f7fbfa;
}

.task-reference-box.needs-reference {
  border-color: #ead18c;
  background: var(--amber-soft);
}

.task-reference-box strong,
.task-reference-box small {
  display: block;
}

.task-reference-box small {
  margin-top: 3px;
}

.task-reference-box > span {
  color: var(--amber);
  font-size: 12px;
  font-weight: 850;
}

.task-analysis-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #ead18c;
  border-radius: 8px;
  padding: 9px 10px;
  margin-top: 8px;
  background: var(--amber-soft);
}

.task-analysis-box.done {
  border-color: #b9d6d0;
  background: var(--teal-soft);
}

.task-analysis-box strong,
.task-analysis-box small {
  display: block;
}

.task-analysis-box small {
  margin-top: 3px;
}

.analysis-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  min-width: 210px;
}

.analysis-actions small {
  max-width: 260px;
  text-align: right;
}

.analysis-actions > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.auto-workflow-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  background: #fbfcfe;
}

.auto-workflow-box.running {
  border-color: #b8c8f7;
  background: var(--primary-soft);
}

.auto-workflow-box.waiting {
  border-color: #ead18c;
  background: var(--amber-soft);
}

.auto-workflow-box.completed {
  border-color: #b9d6d0;
  background: var(--teal-soft);
}

.auto-workflow-box.blocked {
  border-color: #f0b8b1;
  background: var(--rose-soft);
}

.auto-workflow-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.auto-workflow-head > div {
  min-width: 0;
}

.auto-workflow-head > span {
  font-size: 13px;
  font-weight: 950;
  color: var(--ink);
}

.auto-progress {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.1);
}

.auto-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.25s ease;
}

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

.auto-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.auto-timeline span.done {
  border-color: #b9d6d0;
  color: var(--teal);
  background: #f7fbfa;
}

.auto-timeline span.active {
  border-color: #b8c8f7;
  color: #1d4ed8;
  background: #f8fbff;
}

.auto-timeline svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.auto-timeline .active svg {
  animation: spin 1.15s linear infinite;
}

.workflow-log {
  display: grid;
  gap: 4px;
  margin-top: 9px;
}

.workflow-log small {
  color: #475467;
  overflow-wrap: anywhere;
}

.issue-panel {
  display: grid;
  gap: 8px;
  border: 1px solid #ead18c;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  background: var(--amber-soft);
}

.issue-panel.compact {
  padding: 9px;
}

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

.issue-panel-head strong,
.issue-panel-head small {
  display: block;
}

.issue-panel-head small {
  color: #6f4700;
  font-size: 12px;
}

.issue-list {
  display: grid;
  gap: 7px;
}

.issue-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.issue-row.blocker,
.issue-row.error {
  border-color: #f0b8b1;
  background: #fff7f6;
}

.issue-row svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--amber);
}

.issue-row.blocker svg,
.issue-row.error svg {
  color: var(--rose);
}

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

.issue-row small {
  margin-top: 3px;
  color: #475467;
  overflow-wrap: anywhere;
}

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.task-step-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.task-step-row span {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: var(--surface-2);
  color: #475467;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: normal;
  word-break: keep-all;
}

.task-step-row span.done {
  border-color: #b9d6d0;
  background: var(--teal-soft);
  color: var(--teal);
}

.task-step-row svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.task-step-row small {
  grid-column: 2;
  margin-top: 2px;
  color: inherit;
  font-weight: 750;
  overflow-wrap: anywhere;
  word-break: normal;
}

.task-meta-row {
  margin-top: 9px;
}

.task-meta-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.task-card-actions {
  align-content: flex-start;
  justify-content: flex-end;
}

.mini-btn.primary-mini {
  border-color: #b9d6d0;
  background: var(--teal-soft);
  color: var(--teal);
}

.mini-btn.danger {
  border-color: #f1b9b0;
  background: var(--rose-soft);
  color: var(--rose);
}

.focus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--teal-soft);
}

.focus-banner strong,
.focus-banner small {
  display: block;
}

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

.focus-banner small {
  margin-top: 4px;
  color: var(--teal);
}

.material-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  gap: 14px;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  padding: 16px;
  background: #f7fbfa;
}

.material-hero-main {
  min-width: 0;
}

.material-hero-main > span {
  display: block;
  margin-bottom: 7px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
}

.material-hero-main h2 {
  max-width: 980px;
  margin-bottom: 7px;
  font-size: 22px;
  line-height: 1.22;
}

.material-reference-line {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  align-items: center;
  margin-top: 12px;
}

.material-reference-line a,
.material-reference-line span,
.material-reference-line strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.material-reference-line svg {
  width: 15px;
  height: 15px;
}

.material-reference-line span {
  color: var(--amber);
  font-size: 13px;
  font-weight: 850;
}

.material-reference-line strong {
  border: 1px solid #c7d7ff;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--primary-soft);
  color: #1d4ed8;
  font-size: 12px;
}

.analysis-message {
  margin-top: 10px;
  border: 1px solid #ead18c;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--amber-soft);
  color: #6f4700;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.material-next-actions {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 190px;
}

.material-next-actions .btn {
  justify-content: flex-start;
}

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

.material-metrics span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.material-metrics strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.material-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.material-steps > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: var(--surface-2);
}

.material-steps svg {
  width: 17px;
  height: 17px;
  color: #98a2b3;
}

.material-steps strong,
.material-steps small {
  display: block;
}

.material-steps small {
  grid-column: 2;
  color: var(--muted);
  font-weight: 750;
}

.material-steps > div.done {
  border-color: #b9d6d0;
  background: var(--teal-soft);
}

.material-steps > div.done svg,
.material-steps > div.done strong,
.material-steps > div.done small {
  color: var(--teal);
}

.scene-queue,
.scene-detail-section,
.generation-tools {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.scene-queue-list {
  display: grid;
  gap: 8px;
}

.scene-queue-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(120px, auto) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2);
}

.scene-queue-row.done {
  border-color: #b9d6d0;
  background: #f7fbfa;
}

.scene-mini-badge {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
}

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

.scene-queue-row small {
  margin-top: 4px;
  color: var(--muted);
}

.scene-next-label {
  justify-self: start;
  border: 1px solid #c7d7ff;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--primary-soft);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.scene-detail-section {
  display: grid;
  gap: 10px;
}

.generation-tools {
  background: var(--surface-2);
}

.generation-tools summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 950;
}

.generation-tools summary::-webkit-details-marker {
  display: none;
}

.generation-tools summary svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.generation-tools[open] {
  display: grid;
  gap: 12px;
}

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

.flow-row.pulse {
  animation: flowPulse 1.4s ease-out;
}

@keyframes flowPulse {
  0% {
    border-color: var(--primary);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.28);
  }

  100% {
    border-color: var(--line);
    box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
  }
}

.workflow-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.workflow-top strong,
.workflow-top small,
.workflow-item > small {
  display: block;
}

.workflow-top small,
.workflow-item > small {
  margin-top: 4px;
  color: var(--muted);
}

.workflow-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workflow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}

.workflow-steps span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef2f7;
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.workflow-steps span.done {
  border-color: #b9d6d0;
  background: var(--teal-soft);
  color: var(--teal);
}

.package-cards,
.package-list,
.flow-list {
  display: grid;
  gap: 12px;
}

.package-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  box-shadow: none;
  background: var(--surface-2);
}

.phone-thumb,
.scene-badge {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(37, 99, 235, 0.08));
}

.phone-thumb {
  width: 64px;
  aspect-ratio: 9 / 16;
}

.phone-thumb svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}

.phone-thumb span {
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
}

.package-card strong,
.package-row strong,
.flow-row strong,
.suggestion strong {
  display: block;
  line-height: 1.28;
}

.package-card small,
.package-row small,
.flow-row small,
.suggestion small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.stage-chips,
.file-actions,
.flow-actions,
.output-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.stage-chip,
.status-pill,
.soft-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.stage-chip.ready,
.stage-chip.generated,
.stage-chip.imported,
.stage-chip.passed,
.stage-chip.scheduled,
.stage-chip.published,
.status-pill.completed,
.status-pill.ready,
.status-pill.generated,
.status-pill.imported,
.status-pill.passed,
.status-pill.resolved,
.status-pill.scheduled,
.status-pill.published,
.status-pill.active,
.status-pill.synced,
.status-pill.final_ready {
  background: var(--teal-soft);
  color: var(--teal);
}

.stage-chip.needs_fix,
.stage-chip.blocked,
.stage-chip.held,
.status-pill.failed,
.status-pill.needs_fix,
.status-pill.needs_human,
.status-pill.blocked,
.status-pill.held,
.status-pill.risk,
.status-pill.missing {
  background: var(--rose-soft);
  color: var(--rose);
}

.stage-chip.drafting,
.stage-chip.generating,
.stage-chip.recording,
.stage-chip.editing,
.stage-chip.ready_for_qa,
.status-pill.queued,
.status-pill.in_progress,
.status-pill.generating,
.status-pill.approved,
.status-pill.running,
.status-pill.waiting,
.status-pill.auto_retrying,
.status-pill.quality_review,
.status-pill.open,
.status-pill.idle,
.status-pill.ready_for_qa,
.status-pill.warming {
  background: var(--amber-soft);
  color: var(--amber);
}

.flow-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #ead18c;
  border-radius: 8px;
  padding: 12px;
  background: var(--amber-soft);
  color: #6f4700;
}

.flow-note svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.flow-note strong {
  display: block;
  margin-bottom: 4px;
}

.flow-note p {
  color: #6f4700;
  font-size: 13px;
}

.bridge-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #b9d6d0;
  border-radius: 8px;
  padding: 14px;
  background: #f7fbfa;
}

.api-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #c7d7ff;
  border-radius: 8px;
  padding: 13px;
  background: var(--primary-soft);
}

.bridge-head,
.bridge-run {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bridge-head strong,
.bridge-run strong,
.command-box span {
  display: block;
  margin-bottom: 4px;
  font-weight: 900;
}

.bridge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 12px;
}

.command-box,
.bridge-run {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: var(--surface);
}

.command-box code {
  display: block;
  max-height: 88px;
  overflow: auto;
  border-radius: 8px;
  padding: 9px;
  background: #101828;
  color: #f2f4f7;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.command-box .mini-btn {
  margin-top: 8px;
}

.bridge-form {
  display: grid;
  gap: 8px;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

.check-row input {
  width: 16px;
  min-height: 16px;
}

.tts-task-box {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--surface-2);
}

.tts-task-box > div {
  display: grid;
  gap: 4px;
}

.bridge-runs {
  display: grid;
  gap: 8px;
}

.api-meta,
.api-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.api-meta span {
  border: 1px solid #c7d7ff;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 850;
}

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

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

.section-list {
  padding: 12px;
  box-shadow: none;
  background: var(--surface-2);
}

.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.list-row:first-child {
  border-top: 0;
}

.flow-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  box-shadow: none;
  background: var(--surface-2);
}

.scene-badge {
  width: 58px;
  height: 96px;
}

.scene-badge span,
.scene-badge small {
  display: block;
  color: var(--teal);
  font-weight: 950;
}

.scene-badge small {
  font-size: 11px;
}

.flow-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.flow-main p {
  margin-top: 8px;
  color: #344054;
  font-size: 13px;
}

.inline-select {
  display: flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
}

.inline-select select {
  min-height: 30px;
  width: auto;
  min-width: 116px;
  padding: 4px 8px;
  font-size: 12px;
}

.output-row {
  flex-wrap: nowrap;
}

.output-row input {
  min-width: 180px;
}

.image-task-box,
.grok-task-box,
.real-asset-box {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px;
}

.image-task-box {
  border: 1px solid #b9d6d0;
  background: #f7fbfa;
}

.grok-task-box {
  border: 1px solid #c7d7ff;
  background: #f7faff;
}

.real-asset-box {
  border: 1px solid #ead18c;
  background: var(--amber-soft);
}

.image-task-box > div:first-child,
.grok-task-box > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.image-task-box strong,
.grok-task-box strong,
.real-asset-box strong {
  margin: 0;
}

.real-asset-box small {
  color: #6f4700;
  line-height: 1.4;
}

.image-task-box a,
.grok-task-box a {
  font-size: 12px;
}

.image-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 132px 104px auto auto;
  gap: 7px;
  align-items: center;
}

.image-controls textarea {
  min-height: 38px;
  resize: vertical;
}

.image-controls select {
  min-height: 34px;
}

.grok-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 96px auto auto;
  gap: 7px;
  align-items: center;
}

.grok-controls select {
  min-height: 34px;
}

.error-text {
  color: var(--rose) !important;
}

.package-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(420px, 1.1fr) minmax(320px, 0.8fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  box-shadow: none;
  background: var(--surface-2);
}

.package-main h3 {
  margin-bottom: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.package-main p {
  margin-bottom: 4px;
}

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

.status-field {
  gap: 5px;
}

.status-field span {
  color: var(--muted);
  font-size: 12px;
}

.status-field select {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

.package-actions {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.workbench-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.workbench-card + .workbench-card {
  margin-top: 12px;
}

.workbench-head {
  display: flex;
  min-width: 0;
  max-width: 100%;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 14px;
}

.workbench-head > * {
  min-width: 0;
}

.workbench-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.workbench-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  background: #fbfcfd;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef2f7;
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.step-badge svg {
  width: 13px;
  height: 13px;
}

.step-badge.done {
  border-color: #b9d6d0;
  background: var(--teal-soft);
  color: var(--teal);
}

.workbench-body {
  display: grid;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.42fr);
  gap: 14px;
  padding: 14px;
}

.workbench-primary,
.workbench-side,
.mini-section {
  min-width: 0;
}

.workbench-primary,
.workbench-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.mini-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}

.mini-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.mini-section-head strong {
  font-size: 14px;
}

.mini-section-head small {
  color: var(--muted);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

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

.scene-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.scene-line:first-child {
  border-top: 0;
  padding-top: 0;
}

.scene-meta strong,
.scene-meta small,
.asset-path {
  display: block;
}

.scene-meta small,
.asset-path {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.scene-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
}

.scene-actions,
.asset-import-line,
.quick-schedule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

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

.asset-import-line {
  grid-template-columns: minmax(0, 1fr) auto;
}

.quick-schedule {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  margin-top: 10px;
}

.asset-path {
  grid-column: 1 / -1;
  border-radius: 8px;
  padding: 6px 8px;
  background: #eef2f7;
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
}

.missing-box {
  border: 1px solid #f1b9b0;
  border-radius: 8px;
  padding: 9px;
  margin-bottom: 10px;
  background: var(--rose-soft);
  color: var(--rose);
  font-size: 12px;
  font-weight: 850;
}

.rough-preview {
  display: grid;
  gap: 8px;
}

.rough-preview video {
  width: min(100%, 240px);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101828;
}

.quality-panel {
  display: grid;
  gap: 10px;
}

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

.quality-head strong,
.quality-head small {
  display: block;
}

.quality-head small {
  margin-top: 3px;
  color: var(--muted);
}

.quality-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef2f7;
  color: #344054;
  font-size: 12px;
  font-weight: 950;
}

.quality-panel.passed .quality-head > span {
  background: var(--teal-soft);
  color: var(--teal);
}

.quality-panel.needs_fix .quality-head > span,
.quality-panel.blocked .quality-head > span {
  background: var(--rose-soft);
  color: var(--rose);
}

.quality-check-list {
  display: grid;
  gap: 7px;
}

.quality-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
}

.quality-check svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--muted);
}

.quality-check.passed {
  border-color: #b9d6d0;
  background: #f7fbfa;
}

.quality-check.passed svg {
  color: var(--teal);
}

.quality-check.failed {
  border-color: #ead18c;
  background: var(--amber-soft);
}

.quality-check.failed.error,
.quality-check.failed.blocker {
  border-color: #f0b8b1;
  background: #fff7f6;
}

.quality-check.failed.error svg,
.quality-check.failed.blocker svg {
  color: var(--rose);
}

.quality-check strong,
.quality-check small {
  display: block;
}

.quality-check small {
  margin-top: 3px;
  color: #475467;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

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

.date-control-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.date-control-bar label {
  min-width: 136px;
}

.metrics-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.matrix-status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid #d4e6e2;
  border-radius: 8px;
  padding: 13px 14px;
  background: #f3faf8;
}

.matrix-status-strip.waiting {
  border-color: #f1d6a8;
  background: #fffaf0;
}

.matrix-status-strip strong,
.matrix-status-strip small {
  display: block;
}

.matrix-status-strip small {
  margin-top: 4px;
  color: #475467;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.45;
}

.matrix-status-strip > span {
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--surface);
  color: #344054;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.matrix-kpis .kpi {
  background: var(--surface);
}

.matrix-ops-dashboard {
  display: grid;
  gap: 14px;
}

.ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr);
  gap: 14px;
}

.ops-hero-copy,
.ops-source-card,
.ops-panel {
  min-width: 0;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.ops-hero-copy {
  overflow: hidden;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, .34), transparent 36%),
    linear-gradient(145deg, #172033 0%, #1f2a21 100%);
  color: #fff;
}

.ops-hero-top,
.source-title,
.ops-panel-head,
.account-profile-main,
.account-profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ops-hero-top {
  align-items: flex-start;
  margin-bottom: 16px;
}

.ops-hero-top span,
.ops-hero-top strong,
.source-title > span,
.account-profile-main > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.ops-hero-top span {
  background: rgba(255, 255, 255, .13);
  color: #d5fff7;
}

.ops-hero-top span svg {
  width: 14px;
  height: 14px;
}

.ops-hero-top strong {
  background: rgba(255, 255, 255, .92);
  color: #1f2937;
}

.ops-hero-copy h2 {
  margin-bottom: 6px;
  color: #fff;
  font-size: 34px;
  line-height: 1.06;
}

.ops-hero-copy p {
  color: #dfe8e6;
  font-size: 14px;
  font-weight: 760;
}

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

.ops-metric-grid div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255, 255, 255, .09);
}

.ops-metric-card {
  position: relative;
  overflow: hidden;
}

.ops-metric-grid span,
.ops-metric-grid strong,
.ops-metric-grid small,
.source-title strong,
.source-title small,
.ops-panel-head strong,
.ops-panel-head small {
  display: block;
}

.ops-metric-grid span {
  color: #c7d8d4;
  font-size: 12px;
  font-weight: 900;
}

.ops-metric-grid strong {
  margin-top: 8px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.ops-metric-grid small {
  margin-top: 7px;
  color: #dce4e1;
  font-size: 12px;
  font-weight: 780;
}

.metric-spark {
  display: block;
  position: relative;
  height: 6px;
  overflow: hidden;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.metric-spark::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--metric-fill, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #0e9384, #47cd89);
}

.ops-source-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 15px;
  background: var(--surface);
}

.source-title small,
.ops-panel-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 830;
}

.source-title > span.ok,
.account-profile-card.ok .account-profile-main > span {
  background: var(--teal-soft);
  color: var(--teal);
}

.source-title > span.warning,
.account-profile-card.warning .account-profile-main > span {
  background: var(--amber-soft);
  color: var(--amber);
}

.account-profile-card.danger .account-profile-main > span {
  background: var(--rose-soft);
  color: var(--rose);
}

.source-steps {
  display: grid;
  gap: 8px;
}

.source-steps div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-radius: 8px;
  padding: 10px;
  background: #f5f8fb;
}

.source-steps svg {
  width: 16px;
  height: 16px;
}

.source-steps .done svg {
  color: var(--teal);
}

.source-steps .waiting svg {
  color: var(--amber);
}

.source-steps span {
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.source-steps strong {
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.ops-source-card p {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: #475467;
  font-size: 12px;
  font-weight: 780;
}

.source-reasons {
  display: grid;
  gap: 6px;
}

.source-reasons span {
  border-radius: 8px;
  padding: 8px;
  background: #fffaf0;
  color: #7a4b08;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.4;
}

.ops-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
}

.ops-panel {
  padding: 14px;
  background: var(--surface);
}

.ops-panel-head {
  margin-bottom: 12px;
}

.shop-stack,
.issue-list {
  display: grid;
  gap: 10px;
}

.shop-stack-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  border-radius: 8px;
  padding: 12px;
  background: #f5f8fb;
}

.shop-stack-row > * {
  position: relative;
  z-index: 1;
}

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

.shop-stack-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.shop-stack-row span {
  align-self: center;
  font-size: 15px;
  font-weight: 950;
}

.shop-stack-row i {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  border-radius: 999px;
  background: #0f766e;
}

.issue-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfd;
}

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

.issue-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 790;
  line-height: 1.35;
}

.issue-row > span {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.issue-row.danger > span {
  background: var(--rose-soft);
  color: var(--rose);
}

.rank-grid {
  margin-top: 0;
}

.matrix-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .72fr);
  gap: 14px;
  margin-bottom: 14px;
}

.command-copy,
.command-health {
  min-width: 0;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.command-copy {
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(14, 116, 144, .18), transparent 34%),
    linear-gradient(160deg, #151a23 0%, #243124 100%);
  color: #fff;
}

.command-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.command-eyebrow span,
.command-eyebrow strong,
.command-health .health-head span {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 950;
}

.command-eyebrow span {
  background: rgba(255, 255, 255, .12);
  color: #d7fffa;
}

.command-eyebrow strong {
  background: rgba(255, 255, 255, .92);
  color: #1f2937;
}

.command-copy h2 {
  margin-bottom: 6px;
  color: #fff;
  font-size: 32px;
  line-height: 1.08;
}

.command-copy p {
  color: #d9e7e3;
  font-weight: 760;
}

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

.command-metric-grid div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255, 255, 255, .09);
}

.command-metric-grid span,
.command-metric-grid strong,
.command-metric-grid small {
  display: block;
}

.command-metric-grid span {
  color: #bfdbd6;
  font-size: 12px;
  font-weight: 900;
}

.command-metric-grid strong {
  margin-top: 8px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.command-metric-grid small {
  margin-top: 7px;
  color: #d5dedc;
  font-size: 12px;
  font-weight: 780;
}

.command-health {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
}

.health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.health-head strong {
  font-size: 16px;
}

.command-health .health-head span {
  background: var(--amber-soft);
  color: var(--amber);
}

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

.health-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  padding: 10px;
  background: #f6f8fb;
}

.health-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.health-list strong {
  font-weight: 950;
}

.command-health p {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: #475467;
  font-size: 12px;
  font-weight: 780;
}

.metric-delta {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.metric-delta.up {
  color: #027a48;
}

.metric-delta.down {
  color: #b42318;
}

.metrics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
  gap: 12px;
}

.matrix-board {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(230px, .7fr));
  align-items: start;
  gap: 12px;
  margin-top: 12px;
}

.matrix-board .chart-box:first-child {
  grid-row: span 2;
}

.chart-box {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}

.chart-box:first-child {
  grid-row: span 2;
}

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

.chart-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.line-chart {
  width: 100%;
  height: auto;
  min-height: 220px;
}

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

.chart-summary-card {
  min-width: 0;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.chart-summary-card span,
.chart-summary-card strong {
  display: block;
}

.chart-summary-card span {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.chart-summary-card strong {
  margin-top: 5px;
  color: #111827;
  font-size: 20px;
  line-height: 1;
}

.chart-summary-card i {
  display: block;
  position: relative;
  height: 6px;
  overflow: hidden;
  margin-top: 9px;
  border-radius: 999px;
  background: #e7eef8;
}

.chart-summary-card i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--metric-fill, 0%);
  border-radius: inherit;
  background: #0e9384;
}

.chart-summary-card.engagement i::after {
  background: #2563eb;
}

.chart-summary-card.posts i::after {
  background: #f79009;
}

.line-chart line {
  stroke: #d6e1ee;
  stroke-width: 1;
}

.line-chart path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.line-chart rect {
  opacity: .22;
}

.line-chart circle {
  stroke: #fff;
  stroke-width: 3;
}

.line-chart text {
  fill: #667085;
  font-size: 12px;
  font-weight: 800;
}

.line-chart .views-line {
  stroke: #0e9384;
}

.line-chart .views-point,
.line-chart .views-bar {
  fill: #0e9384;
}

.line-chart .engagement-line {
  stroke: #2563eb;
}

.line-chart .engagement-point,
.line-chart .engagement-bar {
  fill: #2563eb;
}

.line-chart .chart-value-label {
  fill: #111827;
  font-size: 14px;
  font-weight: 950;
}

.line-chart .chart-axis-label,
.line-chart .chart-date-label {
  fill: #667085;
  font-size: 12px;
  font-weight: 900;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.chart-legend span {
  width: 18px;
  height: 4px;
  border-radius: 999px;
}

.chart-legend .views {
  background: #0e9384;
}

.chart-legend .engagement {
  background: #2563eb;
}

.bar-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, .9fr) minmax(100px, 1fr) minmax(70px, auto);
  gap: 10px;
  align-items: center;
}

.bar-row span {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-row div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eef8;
}

.bar-row i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: #0e9384;
}

.bar-row i.empty {
  min-width: 0;
}

.bar-row strong {
  justify-self: end;
  font-size: 12px;
  font-weight: 950;
}

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

.matrix-board-command .chart-box:first-child {
  grid-row: auto;
}

.matrix-board-command .bar-row {
  grid-template-columns: minmax(82px, .85fr) minmax(58px, 1fr) minmax(54px, auto);
  gap: 8px;
}

.matrix-board-command .bar-row strong {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-board {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}

.account-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

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

.account-board-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.account-board-head > span {
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.account-platform-list {
  display: grid;
  gap: 12px;
}

.platform-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.platform-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  background: #fbfcfd;
}

.platform-section-head strong,
.platform-section-head small {
  display: block;
}

.platform-section-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.platform-section-head > span {
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.account-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.account-list-table {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.account-list-row {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(360px, 1.15fr) minmax(170px, auto);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.account-list-row.warning {
  border-color: #ead6ae;
  background: #fffdf7;
}

.account-list-row.danger {
  border-color: #efc0b8;
  background: #fff8f7;
}

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

.account-identity {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

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

.account-identity strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.account-identity > span {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.account-list-row.warning .account-identity > span {
  background: var(--amber-soft);
  color: var(--amber);
}

.account-list-row.danger .account-identity > span {
  background: var(--rose-soft);
  color: var(--rose);
}

.account-list-metrics,
.account-list-inventory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.account-list-inventory {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-list-metrics div,
.account-list-inventory div {
  min-width: 0;
  border-radius: 8px;
  padding: 9px;
  background: #f5f8fb;
}

.account-list-metrics strong,
.account-list-metrics small,
.account-list-inventory strong,
.account-list-inventory small {
  display: block;
}

.account-list-metrics strong,
.account-list-inventory strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-list-metrics small,
.account-list-inventory small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.account-video-block {
  min-width: 0;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfd;
}

.account-video-block-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

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

.account-video-block-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  text-align: right;
}

.account-video-list {
  display: grid;
  gap: 7px;
}

.account-video-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(58px, auto));
  gap: 8px;
  align-items: center;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: var(--ink);
}

.account-video-row:hover {
  background: #f3faf8;
}

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

.account-video-row > div strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-video-row > div small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.account-video-row > span {
  min-width: 0;
  text-align: right;
}

.account-video-row > span strong {
  font-size: 12px;
  font-weight: 950;
}

.account-video-row > span small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.account-list-foot {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-end;
}

.account-profile-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.account-profile-card.warning {
  border-color: #ead6ae;
  background: #fffdf7;
}

.account-profile-card.danger {
  border-color: #efc0b8;
  background: #fff8f7;
}

.account-profile-main {
  align-items: flex-start;
}

.account-profile-main > div {
  min-width: 0;
  flex: 1;
}

.account-profile-main strong,
.account-profile-main small,
.account-profile-foot small {
  display: block;
}

.account-profile-main strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-main small,
.account-profile-foot small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.account-profile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.account-profile-metrics div {
  min-width: 0;
  border-radius: 8px;
  padding: 9px;
  background: #f5f8fb;
}

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

.account-profile-metrics strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-metrics small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.account-profile-foot {
  align-items: flex-end;
}

.account-profile-foot small {
  margin: 0;
}

.account-table {
  display: grid;
  min-width: 0;
  overflow-x: auto;
}

.account-table-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(74px, .45fr) minmax(74px, .45fr) minmax(74px, .45fr) minmax(74px, .45fr) minmax(64px, .38fr) minmax(190px, .9fr) minmax(88px, auto);
  gap: 12px;
  align-items: center;
  min-width: 980px;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f5;
}

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

.account-table-row.head {
  min-height: 38px;
  background: #f6f8fb;
  color: #667085;
  font-size: 12px;
  font-weight: 950;
}

.account-table-row > span {
  min-width: 0;
  color: #182230;
  font-size: 13px;
  font-weight: 900;
}

.account-table-row > span small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
}

.account-cell-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.account-cell-main > div {
  min-width: 0;
}

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

.account-cell-main strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-cell-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.account-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-inline {
  display: block;
  color: #344054;
  font-size: 12px;
  font-weight: 950;
}

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

.account-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.account-card.pending-data {
  border-color: #ead6ae;
}

.account-card-top,
.account-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

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

.account-card-top small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.account-card-top > span,
.account-card-actions > span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.account-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.account-card-metrics div {
  min-width: 0;
  border-radius: 8px;
  padding: 8px;
  background: #f4f7fb;
}

.account-card-metrics span,
.account-card-metrics small {
  display: block;
}

.account-card-metrics span {
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-metrics small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.account-card-actions {
  align-items: center;
}

.inline-note {
  margin-top: 12px;
  border: 1px solid #d9e8f5;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.metric-note {
  display: grid;
  gap: 10px;
  color: #344054;
  line-height: 1.5;
}

.metric-note p {
  margin: 0;
  font-size: 13px;
  font-weight: 760;
}

.utility-drawer {
  margin-top: 12px;
}

.utility-drawer summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) 24px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.utility-drawer summary::-webkit-details-marker {
  display: none;
}

.utility-drawer summary span {
  font-size: 16px;
  font-weight: 950;
}

.utility-drawer summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.utility-drawer summary svg {
  width: 18px;
  height: 18px;
  justify-self: end;
  transition: transform .18s ease;
}

.utility-drawer[open] summary svg {
  transform: rotate(180deg);
}

.utility-grid {
  margin-top: 14px;
}

.sub-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-2);
}

.suggestion,
.metric-row {
  padding: 12px;
  box-shadow: none;
  background: var(--surface-2);
}

.suggestion + .suggestion,
.metric-row + .metric-row {
  margin-top: 10px;
}

.suggestion p {
  margin-top: 8px;
  color: #344054;
  font-size: 13px;
}

.metric-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(6, minmax(76px, auto));
  gap: 12px;
  align-items: center;
}

.metric-row span {
  font-weight: 850;
}

.snapshot-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 4px 7px;
  margin-top: 6px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.snapshot-status.final {
  background: #e6f4f1;
  color: #0f766e;
}

.snapshot-status.manual {
  background: #fff3df;
  color: #b54708;
}

.snapshot-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d9e8f5;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.snapshot-empty-state strong,
.snapshot-empty-state small {
  display: block;
}

.snapshot-empty-state small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.snapshot-empty-state > span {
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

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

.snapshot-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(76px, auto));
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: var(--surface-2);
}

.snapshot-record.needs-review {
  border-color: #ead6ae;
  background: #fffdf7;
}

.snapshot-record strong,
.snapshot-record small {
  display: block;
}

.snapshot-record > div strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snapshot-record > div small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 790;
}

.snapshot-record > span {
  min-width: 0;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  text-align: right;
}

.snapshot-record > span strong {
  font-size: 13px;
  font-weight: 950;
}

.snapshot-record > span small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.account-screen {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto 14px;
}

.account-screen > .panel-head {
  align-items: center;
  margin-bottom: 14px;
}

.account-screen .ops-hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .7fr);
}

.account-screen .ops-hero-copy {
  border-color: #ccd6e2;
  background:
    linear-gradient(135deg, rgba(14, 147, 132, .1), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: var(--ink);
}

.account-screen .ops-hero-top span {
  background: #e6f4f1;
  color: #0f766e;
}

.account-screen .ops-hero-top strong {
  background: #eef2f7;
  color: #344054;
}

.account-screen .ops-hero-copy h2 {
  color: #111827;
  font-size: 32px;
}

.account-screen .ops-hero-copy p {
  color: #475467;
}

.account-screen .ops-metric-grid div {
  border-color: #e1e8f0;
  background: #fff;
}

.account-screen .ops-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-screen .ops-metric-grid span {
  color: #667085;
}

.account-screen .ops-metric-grid strong {
  color: #101828;
}

.account-screen .ops-metric-grid small {
  color: #667085;
}

.account-screen .metric-spark {
  background: #e7eef8;
}

.data-update-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.dashboard-note {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.dashboard-note strong,
.dashboard-note small {
  display: block;
}

.dashboard-note small {
  margin-top: 4px;
  color: #475467;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
}

.order-broadcast-board {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  margin-top: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.order-broadcast-board.source-failed {
  border-color: #efc0b8;
}

.order-broadcast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(14, 147, 132, .08), transparent 34%),
    #fbfcfd;
}

.order-broadcast-head span,
.order-broadcast-head strong,
.order-broadcast-head small {
  display: block;
}

.order-broadcast-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  background: #e6f4f1;
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
}

.order-broadcast-head span svg {
  width: 14px;
  height: 14px;
}

.order-broadcast-head strong {
  margin-top: 8px;
  color: #101828;
  font-size: 20px;
  line-height: 1.1;
}

.order-broadcast-head small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.order-broadcast-head em {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.order-broadcast-head em.ok {
  background: var(--teal-soft);
  color: var(--teal);
}

.order-broadcast-head em.waiting {
  background: var(--amber-soft);
  color: var(--amber);
}

.order-broadcast-head em.danger {
  background: var(--rose-soft);
  color: var(--rose);
}

.order-broadcast-grid {
  display: grid;
  grid-template-columns: minmax(240px, .74fr) minmax(360px, 1.05fr) minmax(280px, .8fr);
  gap: 12px;
  padding: 12px;
}

.order-today-panel,
.order-feed-panel,
.order-shop-panel {
  min-width: 0;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.order-today-panel {
  display: grid;
  align-content: space-between;
  gap: 12px;
  background:
    linear-gradient(160deg, rgba(15, 118, 110, .12), rgba(37, 99, 235, .07)),
    #f8fafc;
}

.order-today-number span,
.order-today-number strong,
.order-today-panel p,
.order-feed-head strong,
.order-feed-head small {
  display: block;
}

.order-today-number span {
  color: #475467;
  font-size: 12px;
  font-weight: 900;
}

.order-today-number strong {
  margin-top: 7px;
  color: #101828;
  font-size: 34px;
  line-height: 1;
}

.order-today-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.order-today-metrics span {
  min-width: 0;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.order-today-metrics b,
.order-today-metrics small {
  display: block;
}

.order-today-metrics b {
  overflow: hidden;
  color: #101828;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-today-metrics small {
  margin-top: 3px;
  color: #667085;
  font-size: 11px;
  font-weight: 850;
}

.order-today-panel p {
  margin: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 790;
  line-height: 1.45;
}

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

.order-feed-head strong {
  color: #101828;
  font-size: 15px;
  font-weight: 950;
}

.order-feed-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 840;
}

.order-feed-list,
.order-shop-list {
  display: grid;
  gap: 8px;
}

.order-feed-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.order-feed-item strong,
.order-feed-item small,
.order-feed-item b {
  display: block;
}

.order-feed-item strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-feed-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.order-feed-item > span {
  text-align: right;
}

.order-feed-item b {
  color: #101828;
  font-size: 13px;
  font-weight: 950;
}

.order-shop-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(52px, auto) minmax(72px, auto);
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

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

.order-shop-row strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-shop-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.order-shop-row span,
.order-shop-row b {
  justify-self: end;
  color: #101828;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.data-board-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr) minmax(300px, .75fr);
  margin-top: 0;
}

.data-board-grid .chart-box:first-child {
  grid-column: span 2;
  grid-row: auto;
}

.today-video-board {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

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

.today-video-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(16, 24, 40, .05);
}

.today-video-card:hover {
  border-color: #b7dcd6;
  transform: translateY(-1px);
}

.today-video-cover {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background:
    linear-gradient(160deg, rgba(14, 147, 132, .18), rgba(37, 99, 235, .12)),
    #eef4f7;
}

.today-video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.today-video-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(16, 24, 40, .62));
  pointer-events: none;
}

.today-video-cover > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  border-radius: 999px;
  padding: 5px 7px;
  background: rgba(17, 24, 39, .74);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.video-cover-fallback {
  display: none;
  place-content: center;
  gap: 8px;
  height: 100%;
  padding: 14px;
  text-align: center;
}

.cover-missing .video-cover-fallback {
  display: grid;
}

.video-cover-fallback svg {
  width: 34px;
  height: 34px;
  justify-self: center;
  border-radius: 50%;
  padding: 8px;
  background: #fff;
  color: #0f766e;
}

.video-cover-fallback strong,
.video-cover-fallback small {
  display: block;
}

.video-cover-fallback strong {
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-cover-fallback small {
  display: -webkit-box;
  overflow: hidden;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.today-video-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.today-video-body > strong {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.today-video-body > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-video-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.today-video-stats span {
  min-width: 0;
  border-radius: 8px;
  padding: 7px 6px;
  background: #f2f6fb;
}

.today-video-stats b,
.today-video-stats small {
  display: block;
}

.today-video-stats b {
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-video-stats small {
  margin-top: 2px;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
}

.video-rank-list {
  display: grid;
  gap: 8px;
}

.video-rank-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  color: var(--ink);
}

.video-rank-item:hover {
  background: #f4faf8;
}

.video-rank-item > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #e6f4f1;
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
}

.video-rank-item strong,
.video-rank-item small {
  display: block;
}

.video-rank-item strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-rank-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.video-rank-item b {
  justify-self: end;
  color: #111827;
  font-size: 13px;
}

.snapshot-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  background: #fbfcfd;
}

.daily-record-panel {
  margin-top: 14px;
}

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: var(--surface);
}

.empty.slim {
  padding: 10px;
}

dialog {
  width: min(960px, calc(100vw - 36px));
  max-height: min(820px, calc(100vh - 36px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

pre {
  max-height: 700px;
  margin: 0;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1280px) {
  .two-col,
  .package-row,
  .workbench-body {
    grid-template-columns: 1fr;
  }

  .scene-line {
    grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
  }

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

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

	  .material-hero,
	  .scene-queue-row,
	  .replication-flow-panel,
	  .monitor-grid,
	  .metrics-grid,
	  .matrix-board,
	  .matrix-command-center,
	  .ops-hero,
	  .ops-overview-grid,
	  .order-broadcast-grid,
		  .account-list-row {
		    grid-template-columns: 1fr;
		  }

		  .data-board-grid .chart-box:first-child {
		    grid-column: auto;
		  }

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

  .material-next-actions {
    min-width: 0;
  }

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

@media (max-width: 1120px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

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

  .sidebar {
    max-width: 100vw;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-btn {
    width: auto;
    min-width: max-content;
  }

  .kpi-grid,
  .pipeline,
  .replication-flow-steps,
  .learn-grid,
  .two-col.compact,
  .bridge-grid,
  .material-steps,
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

	  .ops-metric-grid,
	  .account-profile-grid {
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	  }

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

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

@media (max-width: 680px) {
  .main,
  .sidebar {
    padding: 16px;
  }

  .app-shell,
  .main,
  .view,
  .panel,
  .task-form {
    min-width: 0;
    max-width: 100%;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .project-strip,
  .context-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar p {
    font-size: 14px;
  }

  .form-row,
  .input-mode,
  .dashboard-grid,
  .two-col,
  .kpi-grid,
  .pipeline,
  .replication-flow-steps,
  .learn-grid,
  .bridge-grid,
  .status-editor,
  .two-col.compact,
  .material-metrics,
  .material-steps,
	  .tool-grid,
	  .account-kpis,
	  .metrics-kpis,
	  .command-metric-grid,
	  .ops-metric-grid,
	  .matrix-board-command,
	  .matrix-status-strip,
	  .shop-progress-row,
	  .account-monitor-row,
	  .account-link-row,
	  .bar-row,
	  .metric-row,
	  .account-profile-grid,
	  .account-profile-metrics,
	  .account-list-metrics,
	  .account-list-inventory,
	  .account-video-row,
	  .order-today-metrics,
	  .order-feed-item,
	  .order-shop-row,
	  .snapshot-record-grid,
	  .snapshot-record,
	  .account-card-grid,
	  .account-card-metrics {
	    grid-template-columns: 1fr;
	  }

	  .snapshot-empty-state {
	    align-items: stretch;
	    flex-direction: column;
	  }

	  .snapshot-record > span {
	    text-align: left;
	  }

	  .account-monitor-row .mini-btn,
	  .account-link-row .mini-btn {
	    justify-self: start;
	  }

	  .date-control-bar {
	    justify-content: stretch;
	  }

	  .date-control-bar label,
	  .date-control-bar .btn {
	    width: 100%;
	  }

	  .matrix-status-strip > span,
	  .account-board-head > span,
	  .account-card-top > span,
	  .account-card-actions > span,
	  .platform-section-head > span {
	    justify-self: start;
	    white-space: normal;
	  }

	  .account-board-head,
	  .platform-section-head,
	  .ops-hero-top,
	  .source-title,
	  .ops-panel-head,
	  .account-profile-main,
	  .account-profile-foot,
	  .account-video-block-head,
	  .account-card-top,
	  .account-card-actions,
	  .order-broadcast-head,
	  .order-feed-head {
	    align-items: stretch;
	    flex-direction: column;
	  }

	  .account-identity {
	    grid-template-columns: 36px minmax(0, 1fr);
	  }

	  .account-identity > span {
	    grid-column: 1 / -1;
	    justify-self: start;
	  }

	  .account-video-block-head small,
	  .account-video-row > span,
	  .order-feed-item > span,
	  .order-shop-row span,
	  .order-shop-row b {
	    text-align: left;
	    justify-self: start;
	  }

	  .utility-drawer summary {
	    grid-template-columns: minmax(0, 1fr) 24px;
	  }

	  .utility-drawer summary small {
	    grid-column: 1 / -1;
	    grid-row: 2;
	    text-align: left;
	  }

	  .account-table {
	    overflow-x: visible;
	  }

	  .account-table-row {
	    grid-template-columns: 1fr;
	    min-width: 0;
	    gap: 8px;
	    align-items: stretch;
	    padding: 12px;
	  }

	  .account-table-row.head {
	    display: none;
	  }

	  .account-table-row > span {
	    display: flex;
	    justify-content: space-between;
	    gap: 12px;
	    border-radius: 8px;
	    padding: 8px 10px;
	    background: #f6f8fb;
	  }

	  .account-table-row > span::before {
	    content: attr(data-label);
	    color: var(--muted);
	    font-size: 12px;
	    font-weight: 900;
	  }

	  .account-table-row > span small {
	    text-align: right;
	  }

  .package-card,
  .flow-row,
  .replication-task-card,
  .material-hero,
  .scene-queue-row,
  .workbench-head,
  .scene-line,
  .scene-actions,
  .asset-import-line,
  .quick-schedule {
    grid-template-columns: 1fr;
  }

  .workbench-card,
  .mini-section,
  .scene-line {
    max-width: 100%;
    overflow: hidden;
  }

  .package-main h3 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }

  .package-main p,
  .package-main small,
  .mini-section-head small,
  .scene-meta small {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .workbench-head {
    display: grid;
  }

  .workbench-head-actions,
  .task-card-actions,
  .focus-banner,
  .material-reference-line,
  .task-reference-box,
  .task-analysis-box,
  .issue-panel-head,
  .bridge-run,
  .workflow-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .task-step-row {
    grid-template-columns: 1fr;
  }

  .analysis-actions {
    align-items: stretch;
    min-width: 0;
  }

  .analysis-actions small {
    max-width: none;
    text-align: left;
  }

  .analysis-actions > div {
    justify-content: flex-start;
  }

  .bridge-run-actions {
    justify-content: flex-start;
  }

  .focus-actions {
    justify-content: flex-start;
  }

  .workbench-head-actions .mini-btn,
  .task-card-actions .mini-btn,
  .focus-actions .mini-btn,
  .issue-actions .mini-btn,
  .material-next-actions .btn,
  .scene-queue-row .mini-btn,
  .scene-actions .mini-btn,
  .asset-import-line .mini-btn,
  .quick-schedule .mini-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .workbench-steps {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .step-badge {
    flex: 0 0 auto;
  }

  .compact-status {
    grid-template-columns: 1fr;
  }

  .phone-thumb,
  .scene-badge {
    width: 78px;
  }

  .metric-row {
    grid-template-columns: 1fr 1fr;
  }

  .output-row {
    flex-wrap: wrap;
  }

  .image-controls,
  .grok-controls {
    grid-template-columns: 1fr;
  }

  .btn.full {
    flex-wrap: wrap;
    min-width: 0;
    white-space: normal;
    line-height: 1.3;
  }
}