/* 驾驶舱主题：统一视觉，不改变各看板 DOM 和业务脚本。 */
:root {
  color-scheme: dark;
  --color-primary: #a77a63;
  --color-primary-strong: #bd9278;
  --color-primary-soft: rgba(167, 122, 99, 0.14);
  --color-accent: #c6a06b;
  --color-accent-soft: rgba(198, 160, 107, 0.13);
  --color-success: #72ae9d;
  --color-success-soft: rgba(114, 174, 157, 0.12);
  --color-danger: #c7838c;
  --color-danger-soft: rgba(199, 131, 140, 0.12);
  --color-warning: #c5a86c;
  --color-warning-soft: rgba(197, 168, 108, 0.12);
  --color-background: #0b0d10;
  --color-surface: #15181c;
  --color-surface-subtle: #1a1e23;
  --color-foreground: #e9eaec;
  --color-muted: #a4a8ae;
  --color-border: #2a2f35;
  --color-grid: rgba(164, 168, 174, 0.16);
  --bg: #0b0d10;
  --surface: #15181c;
  --surface-soft: #1a1e23;
  --surface-muted: #22272d;
  --ink: #e9eaec;
  --muted: #a4a8ae;
  --line: #2a2f35;
  --line-strong: #3a4149;
  --nav: #101216;
  --nav-active: rgba(167, 122, 99, 0.14);
  --primary: #a77a63;
  --primary-soft: rgba(167, 122, 99, 0.14);
  --self: #72ae9d;
  --self-soft: rgba(114, 174, 157, 0.12);
  --creator: #c6a06b;
  --creator-soft: rgba(198, 160, 107, 0.13);
  --blue: #7f9fbd;
  --blue-soft: rgba(127, 159, 189, 0.12);
  --danger: #c7838c;
  --danger-soft: rgba(199, 131, 140, 0.12);
  --success: #72ae9d;
  --shadow: none;
  --shadow-card: none;
  --shadow-float: 0 12px 30px rgba(0, 0, 0, 0.20);
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 8px;
}

html,
body {
  color: var(--color-foreground, var(--ink));
  background: var(--bg);
}

.cockpit-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 80;
  display: flex;
  max-width: calc(100vw - 24px);
  align-items: center;
  gap: 4px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(16, 18, 22, 0.92);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.cockpit-nav strong,
.cockpit-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cockpit-nav strong {
  padding: 0 14px 0 10px;
  color: #eef3f8;
  font-size: 13px;
}

.cockpit-nav a {
  display: inline-flex;
  min-width: 64px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #99a8ba;
  font-weight: 700;
  text-decoration: none;
}

.cockpit-nav a:hover,
.cockpit-nav a.active {
  color: var(--ink);
  background: var(--primary-soft);
}

.sidebar {
  color: #d8e1ec;
  background: #080d13;
  box-shadow: none;
}

.brand-mark,
.nav-index {
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 112, 67, 0.14);
  box-shadow: none;
}

.brand-block,
.sidebar-note,
.sidebar-status,
.sidebar-actions {
  border-color: rgba(148, 163, 184, 0.18);
}

.brand-block span,
.brand-kicker,
.sidebar-note small,
.sidebar-status small,
.nav-button small {
  color: #91a1b3;
}

.sidebar-note,
.sidebar-action,
.sidebar-actions button {
  color: #d8e1ec;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.18);
}

.skip-link {
  color: #eef3f8;
  background: #111923;
  border: 1px solid rgba(255, 112, 67, 0.38);
}

.nav-button {
  border-radius: 8px;
  color: #9aa8b8;
}

.nav-button:hover,
.nav-button.active {
  color: #fff;
  border-color: rgba(255, 112, 67, 0.32);
  background: rgba(255, 112, 67, 0.12);
}

.main-content {
  padding-top: 112px;
  background: transparent;
}

.topbar {
  min-height: 230px;
  align-items: flex-end;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.topbar h1 {
  color: #eef3f8;
  font-size: clamp(42px, 5vw, 82px);
  line-height: 0.98;
  letter-spacing: 0;
}

.eyebrow,
.section-kicker {
  color: #ff7043;
}

.page-description,
.topbar-meta span,
.panel-header small,
.insight-line,
.filter-chip,
.data-table th,
.data-table td,
.breadcrumb-label,
.breadcrumb-separator,
.dimension-context,
.attention-list,
.card-meta-grid,
.metric-delta,
.mode-caption {
  color: #99a8ba;
}

.topbar-meta,
.filter-panel,
.kpi-card,
.panel,
.model-summary,
.model-details div,
.channel-summary-card,
.channel-total,
.channel-total-hero,
.channel-insight-card,
.channel-insight-card.highlight,
.table-scroll,
.multi-select summary,
.select-popover,
.breadcrumb,
.range-navigator,
.context-chip,
.quadrant-label,
.creator-lock-dialog,
.secondary-button,
.operation-metric,
.operation-metric:first-child,
.password-gate,
.anchor-overview-card,
.dimension-card,
.dimension-panel,
.attention-card,
.rank-card,
.product-card,
.efficiency-card,
.model-card,
.store-card,
.room-line-card,
.anchor-detail-drawer,
.anchor-level-card,
.anchor-efficiency-card,
.anchor-rank-row,
.anchor-rank-card,
.anchor-rank-main,
.metric-group-card {
  border-color: #26313d;
  background: #0e141b;
  box-shadow: none;
}

.topbar-meta div {
  background: transparent;
}

.topbar-meta div:first-child,
.topbar-meta div:last-child {
  background: rgba(14, 20, 27, 0.9);
}

.topbar-meta div + div,
.data-table th,
.data-table td,
.section-heading,
.panel-header,
.dimension-row,
.rank-row,
.summary-row {
  border-color: rgba(148, 163, 184, 0.18);
}

.filter-heading h2,
.panel-header h2,
.section-heading h2,
.topbar-meta strong,
.kpi-card > strong,
.kpi-card .kpi-meta,
.model-details strong,
.channel-summary-card strong,
.dimension-card strong,
.rank-card strong,
.product-card strong,
.efficiency-card strong,
.metric-group-card strong {
  color: #eef3f8;
}

.kpi-card {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.025), rgba(148, 163, 184, 0)),
    #0e141b;
}

.kpi-card::after {
  opacity: 0.45;
}

.kpi-card > span,
.kpi-meta,
.channel-summary-card span,
.model-details span {
  color: #aab6c5;
}

.kpi-card > strong {
  color: #f4f7fb;
  font-weight: 850;
  text-shadow: 0 0 24px rgba(238, 243, 248, 0.08);
}

.panel,
.filter-panel,
.topbar-meta,
.dimension-panel,
.operation-metric:first-child,
.password-gate,
.anchor-overview-card,
.channel-total-hero {
  background:
    linear-gradient(135deg, rgba(255, 112, 67, 0.1), rgba(17, 25, 35, 0.96)),
    #0e141b;
}

.date-presets,
.field-control input,
.field-control select,
.active-filters .filter-chip,
.mini-progress,
.chart-wrap,
.canvas-wrap,
.channel-rate-panel,
.channel-insight-panel,
.channel-insight-card,
.channel-total,
.channel-total-hero,
.quadrant-chart,
.data-table th,
.select-list label,
.dimension-list,
.score-bar,
.progress-track,
.room-line-card[open] summary,
.room-sort-tabs,
.creator-sort-tabs,
.room-detail-button,
.creator-unlock-button,
.creator-actions button,
.next-button,
.status-tag,
.filter-chip.demo {
  border-color: #26313d;
  background: #111923;
}

.operation-metric-group,
.operation-metric,
.password-gate,
.anchor-overview-card {
  border-color: #26313d;
  background: #111923;
  box-shadow: none;
}

.operation-metric-group::before {
  background: #ff7043;
}

.sensitive-mask {
  color: #eef3f8;
  background: #111923;
  border-color: #26313d;
}

.date-presets button,
.field-control > span,
.multi-select summary > span {
  color: #99a8ba;
}

.date-presets button.active,
.reset-button,
.breadcrumb button:hover,
.breadcrumb button.active,
.level-back-button,
.count-badge,
.secondary-button {
  color: #eef3f8;
  background: rgba(255, 112, 67, 0.13);
  border-color: rgba(255, 112, 67, 0.32);
}

.field-control input,
.field-control select,
.multi-select summary strong,
.select-list label,
.data-table th button,
.breadcrumb button,
.range-navigator,
.context-chip,
.room-detail-button,
.creator-unlock-button,
.creator-actions button,
.room-sort-tabs button.active,
.creator-sort-tabs button.active,
.room-line-card summary strong,
.store-card-title strong,
.anchor-level-card strong,
.anchor-efficiency-card b,
.anchor-detail-drawer summary,
.channel-name strong,
.channel-sales-row > span,
.channel-total strong,
.channel-total-hero strong,
.channel-insight-card strong,
.channel-rate-row > strong,
.rate-bars b,
.conversion-label strong,
.conversion-value strong,
.operation-metric strong,
.password-gate h3,
.password-gate label,
.anchor-overview-card strong,
.anchor-overview-card b,
.secondary-button,
.status-tag,
.filter-chip.demo {
  color: #eef3f8;
}

.metric-delta.positive,
.positive {
  color: #5eead4 !important;
}

.metric-delta.negative,
.negative {
  color: #fb7185 !important;
}

.channel-total span,
.channel-total small,
.channel-total-hero span,
.channel-insight-card span,
.channel-insight-card small,
.channel-name small,
.rate-panel-heading small,
.rate-bars span,
.conversion-label small,
.conversion-value small,
.quadrant-label {
  color: #aab6c5;
}

.operation-metric span,
.operation-metric small,
.password-gate p,
.password-gate > small,
.password-gate input,
.anchor-overview-card span,
.anchor-overview-card small {
  color: #aab6c5;
}

.operation-metric:first-child strong,
.anchor-overview-card strong {
  color: #f4f7fb;
}

.operation-metric-group:nth-child(1),
.operation-metric-group:nth-child(2),
.operation-metric-group:nth-child(3) {
  --group-color: #ff7043;
  --group-soft: rgba(255, 112, 67, 0.12);
  --group-border: rgba(255, 112, 67, 0.3);
}

.password-gate input {
  background: #0e141b;
  border-color: #26313d;
}

.password-gate button {
  color: #05080c;
  background: #ff8a5c;
  border-color: #ff8a5c;
  font-weight: 850;
}

.mode-stat.self,
.mode-stat.self strong {
  color: #5eead4;
}

.mode-stat.creator,
.mode-stat.creator strong {
  color: #fbbf24;
}

.next-button {
  color: #05080c !important;
  background: #ff8a5c !important;
  border-color: #ff8a5c !important;
  font-weight: 850;
}

.conversion-number {
  color: #05080c;
  background: #ff8a5c;
}

.bubble {
  color: #eef3f8;
  background: #111923 !important;
  border-color: rgba(255, 112, 67, 0.42);
  text-shadow: none;
}

.room-sort-tabs button,
.creator-sort-tabs button {
  color: #aab6c5;
}

.room-sort-tabs button.active,
.creator-sort-tabs button.active,
.room-detail-button,
.creator-unlock-button,
.creator-actions button {
  color: #ff8a5c;
  background: rgba(255, 112, 67, 0.13);
  border-color: rgba(255, 112, 67, 0.34);
  box-shadow: none;
}

.status-tag.success {
  color: #5eead4;
  background: rgba(56, 211, 159, 0.13);
}

.status-tag.warning {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
}

.operation-table thead tr:first-child th:nth-child(4),
.operation-table thead tr:nth-child(2) th:nth-child(n + 4):nth-child(-n + 6),
.operation-table thead tr:nth-child(2) th:nth-child(n + 4):nth-child(-n + 9) {
  color: #7dd3fc !important;
}

.operation-table thead tr:first-child th:nth-child(7),
.operation-table thead tr:nth-child(2) th:nth-child(n + 7):nth-child(-n + 12) {
  color: #5eead4 !important;
}

.operation-table thead tr:first-child th:nth-child(13),
.operation-table thead tr:nth-child(2) th:nth-child(n + 10),
.operation-table thead tr:nth-child(2) th:nth-child(n + 13) {
  color: #fbbf24 !important;
}

.operation-table th {
  color: #cbd5e1 !important;
}

.operation-metric-group .section-kicker {
  color: #ff8a5c !important;
}

.anchor-rank-card,
.anchor-rank-main {
  background: #111923 !important;
  border-color: #26313d;
}

.anchor-rank-main strong,
.anchor-person strong {
  color: #eef3f8;
}

.anchor-rank-main small,
.anchor-rank-main span:not(.rank-number),
.anchor-person small {
  color: #aab6c5;
}

.rank-number {
  color: #ff8a5c;
  background: rgba(255, 112, 67, 0.13);
}

.bar-value {
  color: #eef3f8;
}

.channel-total-hero div:first-child strong {
  color: #ff8a5c;
}

.channel-insight-card.highlight,
.channel-insight-card {
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.022), rgba(148, 163, 184, 0)),
    #111923;
  border-color: #26313d;
}

.room-line-card summary small,
.anchor-level-card span,
.anchor-efficiency-card small,
.store-card-footer span,
.store-card-footer b {
  color: #aab6c5;
}

.room-line-card summary b {
  color: #ff8a5c;
  background: rgba(255, 112, 67, 0.13);
  border-color: rgba(255, 112, 67, 0.34);
}

.room-line-card[open] summary b {
  color: #eef3f8;
  background: rgba(148, 163, 184, 0.12);
}

.select-popover {
  box-shadow: var(--shadow-float);
}

.kpi-card.primary {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 112, 67, 0.28), rgba(255, 112, 67, 0.16));
  border-color: rgba(255, 112, 67, 0.48);
}

.kpi-card.primary > span,
.kpi-card.primary .kpi-meta,
.kpi-card.primary .mode-caption {
  color: #ffd5c5;
}

.line-chart text,
.line-chart .axis-label,
.bar-chart text {
  fill: #99a8ba;
}

.line-chart .grid-line {
  stroke: rgba(148, 163, 184, 0.18);
}

.chart-point {
  fill: #0e141b;
  stroke: #ff7043;
}

.toast {
  color: #eef3f8;
  background: #111923;
  border: 1px solid #26313d;
}

button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline-color: rgba(255, 112, 67, 0.42);
}

@media (max-width: 760px) {
  .cockpit-nav {
    top: 8px;
  }

  .cockpit-nav strong {
    display: none;
  }

  .main-content {
    padding-top: 86px;
  }

  .topbar {
    min-height: 160px;
  }

  .topbar h1 {
    font-size: 46px;
  }
}