/* Seelaz Control V2
   Spatial operations canvas inspired by product dashboards, not admin templates. */
:root {
  --v2-canvas: #eef1ef;
  --v2-surface: rgba(255, 255, 255, 0.9);
  --v2-surface-solid: #faf6ee;
  --v2-ink: #17201c;
  --v2-muted: #6E675C;
  --v2-line: rgba(23, 32, 28, 0.08);
  --v2-copper: #b15a2f;
  --v2-copper-soft: #fff0e9;
  --v2-copper-panel: #faf6ee;
  --v2-green: #657956;
  --v2-green-soft: #e9f6f0;
  --v2-amber: #a66a08;
  --v2-amber-soft: #fff6dc;
  --v2-red: #b42318;
  --v2-red-soft: #fff0ee;
  --v2-info: #3c6fa6;
  --v2-info-soft: #eef4fb;
  --v2-shadow: 0 24px 70px rgba(39, 54, 47, 0.09), 0 3px 14px rgba(39, 54, 47, 0.04);
  --v2-shadow-small: 0 14px 36px rgba(39, 54, 47, 0.08), 0 2px 8px rgba(39, 54, 47, 0.035);
}

html[data-theme="dark"] {
  --v2-canvas: #111613;
  --v2-surface: rgba(28, 35, 31, 0.9);
  --v2-surface-solid: #1b221e;
  --v2-ink: #f3f6f4;
  --v2-muted: #a2aca6;
  --v2-line: rgba(255, 255, 255, 0.08);
  --v2-copper: #e3764e;
  --v2-copper-soft: #38241d;
  --v2-copper-panel: #1b221e;
  --v2-green: #6ed2ad;
  --v2-green-soft: #193129;
  --v2-amber: #efc25e;
  --v2-amber-soft: #342a14;
  --v2-red: #ff9b92;
  --v2-red-soft: #3a1b18;
  --v2-info: #9bc1eb;
  --v2-info-soft: #19293a;
  --v2-shadow: 0 28px 74px rgba(0, 0, 0, 0.3);
  --v2-shadow-small: 0 16px 40px rgba(0, 0, 0, 0.24);
}

body {
  background: var(--v2-canvas);
}

.app-shell {
  grid-template-columns: 82px minmax(0, 1fr);
}

.sidebar {
  z-index: 20;
  gap: 9px;
  padding: 16px 11px;
  border: 0;
  background: color-mix(in srgb, var(--v2-canvas) 84%, transparent);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.brand {
  justify-content: center;
  min-height: 52px;
  padding: 0 0 8px;
  border: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: var(--v2-surface-solid);
  color: var(--v2-copper);
  box-shadow: var(--v2-shadow-small);
}

.brand > div:last-child,
.sidebar-search input,
.nav-list a > span:last-child,
.nav-section-label,
.side-note strong,
.side-note .label {
  display: none;
}

.sidebar-search {
  display: grid;
  width: 46px;
  min-height: 42px;
  margin: 0 auto 2px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--v2-muted);
}

.nav-list {
  gap: 5px;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-list a {
  display: grid;
  width: 46px;
  min-height: 42px;
  margin: 0 auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--v2-muted);
  box-shadow: none;
  transform: none;
}

.nav-list a:hover {
  border: 0;
  background: color-mix(in srgb, var(--v2-surface-solid) 58%, transparent);
  color: var(--v2-ink);
  box-shadow: none;
  transform: none;
}

.nav-list a.active,
.nav-list a.active:hover {
  background: var(--v2-surface-solid);
  color: var(--v2-copper);
  box-shadow: var(--v2-shadow-small);
}

.nav-list a.active::after {
  content: "";
  position: absolute;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--v2-copper);
}

.nav-list a .nav-icon,
.nav-list a.active .nav-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: transparent;
  color: inherit;
  font-size: 18px;
}

.side-note {
  display: grid;
  width: 42px;
  min-height: 42px;
  margin: auto auto 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow-small);
}

.side-note::after {
  content: "";
  width: 9px;
  height: 9px;
  border: 4px solid color-mix(in srgb, var(--v2-green) 18%, transparent);
  border-radius: 50%;
  background: var(--v2-green);
}

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

.topbar {
  min-height: 92px;
  margin: 0 0 14px;
  padding: 18px 0 13px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.top-kicker {
  margin-bottom: 6px;
  color: var(--v2-muted);
  font-size: 11px;
  letter-spacing: 0;
}

.topbar h1 {
  color: var(--v2-ink);
  font-size: 24px;
  font-weight: 680;
}

.topbar p:not(.top-kicker) {
  margin-top: 5px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 540;
}

.top-live,
.theme-mode-control,
.top-actions .button.ghost {
  border: 0;
  background: color-mix(in srgb, var(--v2-surface-solid) 75%, transparent);
  box-shadow: var(--v2-shadow-small);
}

.top-actions .button.ghost > span:last-child,
.theme-mode-control button > span:last-child {
  display: none;
}

/* The language control is text-only (EN / ع) with no icon, so the rule above would hide its
   only label and leave an empty pill. Keep its text visible. */
#langModeControl button > span:last-child {
  display: inline;
}

.top-actions .button.ghost {
  width: 38px;
  min-height: 38px;
  padding: 0;
}

.theme-mode-control {
  padding: 3px;
  border-radius: 14px;
}

.theme-mode-control button {
  width: 34px;
  min-height: 32px;
  padding: 0;
}

.page {
  color: var(--v2-ink);
}

.top-kicker,
.eyebrow {
  color: var(--v2-copper);
}

.page :is(
  .panel,
  .metric-card,
  .entity-list-panel,
  .entity-editor-panel,
  .detail-section,
  .detail-grid > div,
  .integration-card,
  .inventory-card,
  .structured-row,
  .schedule-row,
  .ranking-row,
  .dispatch-card,
  .modifier-group-editor,
  .modifier-choice-row
) {
  border-color: transparent;
  background-color: var(--v2-surface-solid);
  background-image: none;
  box-shadow: var(--v2-shadow-small);
}

.page :is(.panel, .entity-list-panel, .entity-editor-panel) {
  border-radius: 26px;
}

.page .metric-card {
  --metric-tone: var(--v2-muted);
  --metric-wash: var(--v2-canvas);
  border: 0;
  border-radius: 22px;
}

.page .metric-card::before {
  display: none !important;
}

.page .metric-card::after {
  width: 6px;
  height: 6px;
  background: var(--metric-tone);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--metric-tone) 12%, transparent);
}

.page .metric-card > small {
  color: var(--v2-muted);
}

.page .metric-card > span {
  color: var(--metric-tone);
}

.page .metric-card > strong {
  color: var(--v2-ink);
}

.page .metric-card.metric-brand { --metric-tone: var(--v2-copper); --metric-wash: var(--v2-copper-soft); }
.page .metric-card.metric-success { --metric-tone: var(--v2-green); --metric-wash: var(--v2-green-soft); }
.page .metric-card.metric-warning { --metric-tone: var(--v2-amber); --metric-wash: var(--v2-amber-soft); }
.page .metric-card.metric-danger { --metric-tone: var(--v2-red); --metric-wash: var(--v2-red-soft); }
.page .metric-card.metric-info { --metric-tone: var(--v2-info); --metric-wash: var(--v2-info-soft); }
.page .metric-card.metric-neutral { --metric-tone: var(--v2-muted); --metric-wash: var(--v2-canvas); }

.page .metric-card:is(.metric-warning, .metric-danger) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metric-tone) 16%, transparent), var(--v2-shadow-small);
}

.chip-success,
.status-pill.success {
  border-color: color-mix(in srgb, var(--v2-green) 22%, transparent);
  background: var(--v2-green-soft);
  color: var(--v2-green);
}

.chip-warning,
.status-pill.warning {
  border-color: color-mix(in srgb, var(--v2-amber) 22%, transparent);
  background: var(--v2-amber-soft);
  color: var(--v2-amber);
}

.chip-danger,
.status-pill.danger {
  border-color: color-mix(in srgb, var(--v2-red) 22%, transparent) !important;
  background: var(--v2-red-soft);
  color: var(--v2-red) !important;
}

.chip-info,
.status-pill.info {
  border-color: color-mix(in srgb, var(--v2-info) 20%, transparent);
  background: var(--v2-info-soft);
  color: var(--v2-info);
}

.chip-neutral,
.status-pill.neutral {
  border-color: var(--v2-line);
  background: var(--v2-canvas);
  color: var(--v2-muted);
}

.entity-status-dot.online,
.entity-status-dot.available {
  background: var(--v2-green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--v2-green) 13%, transparent);
}

.entity-status-dot.busy {
  background: var(--v2-amber);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--v2-amber) 13%, transparent);
}

.entity-status-dot.offline,
.entity-status-dot.hidden {
  background: var(--v2-red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--v2-red) 11%, transparent);
}

.button.primary,
.button.primary:hover,
.button.primary:focus-visible {
  border: 1px solid color-mix(in srgb, var(--v2-copper) 18%, var(--v2-line));
  background: var(--v2-surface-solid);
  color: var(--v2-copper);
  box-shadow: var(--v2-shadow-small);
}

.button.primary:hover {
  border-color: color-mix(in srgb, var(--v2-copper) 34%, transparent);
  background: color-mix(in srgb, var(--v2-copper) 5%, var(--v2-surface-solid));
}

/* Overview spatial canvas */
.spatial-cockpit {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 34px;
  min-height: calc(100vh - 130px);
}

.cockpit-index {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: 18px 0 6px;
}

.cockpit-index-heading,
.cockpit-identity,
.spatial-card-head,
.cockpit-signal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cockpit-index-heading {
  justify-content: flex-start;
  padding: 0 6px;
}

.cockpit-index-heading small,
.spatial-card-head small,
.cockpit-signal-heading small,
.orders-flow-copy p {
  display: block;
  margin: 0 0 4px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cockpit-index-heading strong {
  display: block;
  font-size: 13px;
}

.cockpit-orbit {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--v2-line);
  border-radius: 50%;
}

.cockpit-orbit i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v2-green) 14%, transparent);
}

.cockpit-orbit i:nth-child(1) { top: 5px; left: 16px; }
.cockpit-orbit i:nth-child(2) { right: 4px; bottom: 7px; background: var(--v2-copper); }
.cockpit-orbit i:nth-child(3) { left: 5px; bottom: 8px; background: #eaba5c; }

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

.cockpit-branch-list .readiness-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  min-height: 66px;
  padding: 11px 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.cockpit-branch-list .readiness-row:hover {
  background: color-mix(in srgb, var(--v2-surface-solid) 62%, transparent);
}

.cockpit-branch-list .readiness-score {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--v2-green) var(--score), color-mix(in srgb, var(--v2-line) 70%, transparent) 0);
}

.cockpit-branch-list .readiness-warning .readiness-score {
  background: conic-gradient(var(--v2-amber) var(--score), color-mix(in srgb, var(--v2-line) 70%, transparent) 0);
}

.cockpit-branch-list .readiness-danger .readiness-score {
  background: conic-gradient(var(--v2-red) var(--score), color-mix(in srgb, var(--v2-line) 70%, transparent) 0);
}

.cockpit-branch-list .readiness-score::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v2-canvas);
}

.cockpit-branch-list .readiness-score strong {
  z-index: 1;
  font-size: 11px;
}

.cockpit-branch-list .readiness-score span,
.cockpit-branch-list .readiness-copy p,
.cockpit-branch-list .readiness-blockers,
.cockpit-branch-list .button {
  display: none;
}

.cockpit-branch-list .readiness-copy {
  min-width: 0;
}

.cockpit-branch-list .readiness-copy small {
  display: block;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cockpit-branch-list .readiness-copy strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cockpit-index-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: var(--v2-ink);
  font-size: 11px;
  font-weight: 760;
  text-decoration: none;
}

.cockpit-go-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: auto;
  padding: 17px;
  border-radius: 24px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow-small);
}

.cockpit-go-card > .ion {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 12px;
  background: var(--v2-copper-soft);
  color: var(--v2-copper);
}

.cockpit-go-card small,
.cockpit-go-card strong,
.cockpit-go-card p {
  display: block;
}

.cockpit-go-card small { color: var(--v2-muted); font-size: 11px; }
.cockpit-go-card strong { margin-top: 4px; font-size: 11px; line-height: 1.25; }
.cockpit-go-card p { margin: 6px 0 0; color: var(--v2-muted); font-size: 11px; line-height: 1.45; }

.cockpit-main {
  min-width: 0;
  padding: 4px 0 20px;
}

.cockpit-identity {
  min-height: 66px;
}

.cockpit-identity p {
  margin: 0 0 5px;
  color: var(--v2-muted);
  font-size: 11px;
}

.cockpit-identity h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 620;
}

.cockpit-identity-stats {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cockpit-identity-stats > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px;
}

.cockpit-identity-stats strong {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 18px;
  font-weight: 620;
}

.cockpit-identity-stats span {
  color: var(--v2-muted);
  font-size: 11px;
}

.cockpit-timeline {
  position: relative;
  min-height: 116px;
  margin: 10px 0 16px;
  padding: 20px 16px 0;
}

.timeline-hours,
.timeline-rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.timeline-hours span {
  color: var(--v2-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  text-align: center;
}

.timeline-rail {
  position: relative;
  align-items: center;
  margin-top: 24px;
}

.timeline-rail::before {
  content: "";
  position: absolute;
  right: 7%;
  left: 7%;
  height: 1px;
  background: var(--v2-line);
}

.timeline-rail i {
  z-index: 1;
  width: 8px;
  height: 8px;
  margin: auto;
  border: 2px solid var(--v2-canvas);
  border-radius: 50%;
  background: #c7ceca;
  box-shadow: 0 0 0 1px var(--v2-line);
}

.timeline-rail i.past { background: var(--v2-green); }
.timeline-rail i.now { width: 12px; height: 12px; background: var(--v2-copper); box-shadow: 0 0 0 6px color-mix(in srgb, var(--v2-copper) 12%, transparent); }

.timeline-float,
.orders-flow-float {
  position: absolute;
  top: 48px;
  left: 43%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  background: color-mix(in srgb, var(--v2-surface-solid) 72%, transparent);
  box-shadow: var(--v2-shadow-small);
  backdrop-filter: blur(18px) saturate(135%);
}

.timeline-float > .ion,
.orders-flow-float > .ion {
  color: var(--v2-copper);
}

.timeline-float small,
.timeline-float strong,
.orders-flow-float small,
.orders-flow-float strong {
  display: block;
}

.timeline-float small,
.orders-flow-float small { color: var(--v2-muted); font-size: 11px; }
.timeline-float strong,
.orders-flow-float strong { margin-top: 2px; font-size: 11px; }

.cockpit-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.75fr);
  grid-template-rows: minmax(250px, auto) minmax(190px, auto);
  gap: 16px;
}

.operations-pulse-card,
.cockpit-queue-card,
.cockpit-finance-card {
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: var(--v2-shadow);
}

.operations-pulse-card {
  --pulse-tone: var(--v2-green);
  grid-row: 1 / 3;
  /* Trimmed to the height the right-hand queue+finance stack actually needs, so the pulse no longer
     leaves a tall dead band between the score and the wave/footer (audit-23 DL4). */
  min-height: 452px;
  padding: 28px;
  border-radius: 32px;
  background: var(--v2-copper-panel);
  color: #15241c;
}

.operations-pulse-card[data-tone="warning"] { --pulse-tone: var(--v2-amber); }
.operations-pulse-card[data-tone="danger"] { --pulse-tone: var(--v2-red); }

.operations-pulse-card::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -125px;
  width: 310px;
  height: 310px;
  border: 46px solid color-mix(in srgb, var(--pulse-tone) 10%, transparent);
  border-radius: 50%;
}

.operations-pulse-card .pulse-card-head,
.operations-pulse-card .pulse-score-row,
.operations-pulse-card .pulse-wave,
.operations-pulse-card > a {
  position: relative;
  z-index: 1;
}

.operations-pulse-card .pulse-card-head p,
.operations-pulse-card .pulse-card-head span,
.operations-pulse-card .pulse-status-copy span {
  color: rgba(21, 36, 28, 0.63);
}

.operations-pulse-card .pulse-live {
  border-color: rgba(21, 36, 28, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: #174e3a;
}

.operations-pulse-card .pulse-score-row {
  display: block;
  margin-top: 30px;
}

.operations-pulse-card .pulse-score strong {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(82px, 8vw, 130px);
  font-weight: 440;
  line-height: 0.85;
  color: var(--pulse-tone);
}

.operations-pulse-card .pulse-score sup {
  font-size: 26px;
  color: var(--pulse-tone);
}

.operations-pulse-card .pulse-status-copy {
  max-width: 310px;
  margin-top: 18px;
}

.operations-pulse-card .pulse-status-copy strong {
  font-size: 21px;
  font-weight: 650;
}

.operations-pulse-card .pulse-wave {
  position: absolute;
  right: 28px;
  bottom: 78px;
  left: 28px;
  height: 88px;
  align-items: end;
}

.operations-pulse-card .pulse-wave i {
  min-height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pulse-tone) 62%, transparent);
}

.operations-pulse-card > a {
  position: absolute;
  bottom: 27px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--v2-copper);
  font-size: 11px;
  font-weight: 760;
  text-decoration: none;
}

.cockpit-queue-card,
.cockpit-finance-card {
  padding: 22px;
  border-radius: 28px;
  background: var(--v2-surface-solid);
}

.spatial-card-head h3,
.cockpit-signal-heading h3 {
  margin: 0;
  color: var(--v2-ink);
  font-size: 17px;
  font-weight: 620;
}

.cockpit-queue-card .count-pill {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: var(--v2-amber-soft);
  color: var(--v2-amber);
}

.cockpit-queue-card .ops-inbox-list {
  display: grid;
  gap: 0;
  max-height: 190px;
  margin-top: 10px;
  overflow: auto;
}

.cockpit-queue-card .ops-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cockpit-queue-card .ops-task:last-child { border-bottom: 0; }
.cockpit-queue-card .ops-task-main span { color: var(--v2-muted); font-size: 11px; }
.cockpit-queue-card .ops-task-main strong { margin-top: 3px; font-size: 11px; }
.cockpit-queue-card .ops-task-main p { display: none; }
.cockpit-queue-card .ops-task .button {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}
.cockpit-queue-card .ops-task .button > * { display: none; }
.cockpit-queue-card .ops-task .button::after { content: "\2192"; color: var(--v2-ink); font-size: 13px; }

.cockpit-finance-card .finance-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.cockpit-finance-card .finance-card {
  min-width: 0;
  padding: 10px;
  border: 0;
  border-radius: 15px;
  background: var(--v2-canvas);
  box-shadow: none;
}

.cockpit-finance-card .finance-card span,
.cockpit-finance-card .finance-card small { color: var(--v2-muted); font-size: 11px; }
.cockpit-finance-card .finance-card strong { display: block; margin: 4px 0 2px; overflow: hidden; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; text-overflow: ellipsis; }
.cockpit-finance-card .finance-check-list { display: none; }

.cockpit-signal-heading {
  margin: 34px 2px 13px;
}

.cockpit-signal-heading a {
  color: var(--v2-ink);
  font-size: 11px;
  font-weight: 740;
  text-decoration: none;
}

#overview .cockpit-signals {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

#overview .cockpit-signals .metric-card {
  grid-column: span 3;
  min-height: 126px;
  padding: 17px;
  border: 0;
  border-radius: 24px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow-small);
}

#overview .cockpit-signals .metric-card:nth-child(1),
#overview .cockpit-signals .metric-card:nth-child(5) { grid-column: span 4; }
#overview .cockpit-signals .metric-card:nth-child(2),
#overview .cockpit-signals .metric-card:nth-child(6) { grid-column: span 2; }

.cockpit-signals .metric-card span { color: var(--v2-muted); font-size: 11px; }
.cockpit-signals .metric-card strong { margin-top: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 30px; font-weight: 540; }
.cockpit-signals .metric-card small { color: var(--v2-muted); font-size: 11px; }
#overview .cockpit-signals .metric-card { background: var(--v2-surface-solid); }
.cockpit-signals .metric-card.metric-warning { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-amber) 20%, transparent), var(--v2-shadow-small); }
.cockpit-signals .metric-card.metric-danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-red) 20%, transparent), var(--v2-shadow-small); }

/* Orders live flow */
body[data-page="orders"] .topbar,
body[data-page="overview"] .topbar {
  margin-bottom: 4px;
}

.orders-flow-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(520px, 1.4fr);
  gap: 34px;
  min-height: 238px;
  margin-bottom: 24px;
  padding: 32px;
  overflow: hidden;
  border-radius: 34px;
  background: var(--v2-copper-panel);
  color: #17201c;
  box-shadow: var(--v2-shadow);
}

.orders-flow-copy {
  align-self: center;
}

.orders-flow-copy h2 {
  max-width: 280px;
  margin: 8px 0 11px;
  font-size: 30px;
  font-weight: 560;
  line-height: 1.03;
}

.orders-flow-copy h2 strong {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 54px;
  font-weight: 430;
}

.orders-flow-copy > span {
  display: block;
  max-width: 270px;
  color: rgba(23, 32, 28, 0.62);
  font-size: 11px;
  line-height: 1.5;
}

.orders-flow-track {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  align-items: center;
  gap: 5px;
}

.orders-flow-track > i {
  height: 1px;
  background: color-mix(in srgb, var(--v2-copper) 24%, transparent);
}

.flow-stage {
  display: flex;
  min-width: 0;
  min-height: 116px;
  padding: 15px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--v2-copper) 13%, transparent);
  border-radius: 22px;
  background: var(--v2-copper-soft);
  box-shadow: 0 14px 30px rgba(56, 72, 61, 0.08);
  backdrop-filter: blur(14px);
}

.flow-stage span,
.flow-stage small { color: rgba(23, 32, 28, 0.55); font-size: 11px; }
.flow-stage strong { color: var(--v2-copper); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 34px; font-weight: 480; }

.orders-flow-float {
  /* Anchored to the empty bottom-left, under the order-count copy, instead of bottom-right where it
     sat on top of the "On route" flow stage (audit-23 DL5). */
  top: auto;
  right: auto;
  bottom: 18px;
  left: 32px;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.58);
}

#orders > .operational-metrics {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr 1.15fr;
  gap: 12px;
  margin: 0 0 18px;
}

#orders > .operational-metrics .metric-card {
  min-height: 100px;
  padding: 16px 18px;
  border: 0;
  border-radius: 22px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow-small);
}

#orders > .operational-metrics .metric-card strong {
  margin-top: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 27px;
  font-weight: 520;
}

#orders .saved-view-tabs {
  width: max-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 4px;
  overflow-x: auto;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--v2-surface-solid) 75%, transparent);
  box-shadow: var(--v2-shadow-small);
}

#orders .saved-view-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
}

#orders .saved-view-tabs button.active {
  background: var(--v2-surface-solid);
  color: var(--v2-ink);
  box-shadow: 0 5px 16px rgba(39, 54, 47, 0.08);
}

#orders .workspace-toolbar {
  margin-bottom: 14px;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--v2-surface-solid) 72%, transparent);
  box-shadow: none;
}

#orders .workspace-search,
#orders .toolbar-select,
#orders .workspace-toolbar .button {
  border: 0;
  background: var(--v2-surface-solid);
  box-shadow: none;
}

#orders .orders-workspace-grid {
  display: grid;
  grid-template-columns: minmax(640px, 1.38fr) minmax(350px, 0.72fr);
  gap: 16px;
}

#orders .order-commerce-panel,
#orders .order-detail-drawer {
  border: 0;
  border-radius: 28px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow);
}

#orders .order-commerce-panel {
  padding: 22px;
}

#orders .order-commerce-wrap {
  max-height: 710px;
  border: 0;
  border-radius: 0;
}

#orders .order-commerce-table {
  background: transparent;
}

#orders .order-commerce-table thead {
  background: transparent;
}

#orders .order-commerce-table th {
  border-bottom-color: var(--v2-line);
  color: var(--v2-muted);
  font-size: 11px;
}

#orders .order-commerce-row td {
  padding: 16px 10px;
  border-bottom-color: var(--v2-line);
  background: transparent;
}

#orders .order-commerce-row:hover td,
#orders .order-commerce-row.selected td {
  background: color-mix(in srgb, var(--v2-canvas) 72%, transparent);
}

#orders .order-commerce-row.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--v2-copper);
}

#orders .order-detail-drawer {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

/* Analytics uses copper for data and reserves semantic color for status. */
#analytics.layout-grid {
  gap: 16px;
}

#analytics .panel {
  padding: 22px;
  border: 0;
  border-radius: 28px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow-small);
}

#analytics :is(#analyticsMetrics, #salesMetrics) {
  gap: 12px;
}

#analytics :is(#analyticsMetrics, #salesMetrics) .metric-card {
  min-height: 118px;
  padding: 17px 18px;
  background: var(--v2-surface-solid);
}

#analytics :is(#analyticsMetrics, #salesMetrics) .metric-card { background: var(--v2-surface-solid); }

#analytics .funnel-view {
  gap: 17px;
}

#analytics .funnel-step > div:first-child > span {
  background: var(--v2-copper-soft);
  color: var(--v2-copper);
}

#analytics .funnel-track {
  height: 10px;
  background: color-mix(in srgb, var(--v2-ink) 9%, transparent);
}

#analytics .funnel-track i {
  background: var(--v2-copper);
}

#analytics .funnel-step > b {
  color: var(--v2-copper);
}

#analytics .mix-visual > div {
  background: conic-gradient(
    var(--v2-copper) 0 var(--new-share),
    color-mix(in srgb, var(--v2-copper) 22%, var(--v2-surface-solid)) var(--new-share) 100%
  );
}

#analytics .mix-row {
  border-color: var(--v2-line);
  background: color-mix(in srgb, var(--v2-canvas) 58%, var(--v2-surface-solid));
}

#analytics .mix-row.warning-row {
  border-color: color-mix(in srgb, var(--v2-amber) 20%, transparent);
  background: color-mix(in srgb, var(--v2-amber) 8%, var(--v2-surface-solid));
}

#analytics .ranking-row {
  min-height: 70px;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--v2-canvas) 55%, var(--v2-surface-solid));
  box-shadow: none;
}

#analytics .ranking-number {
  background: var(--v2-copper-soft);
  color: var(--v2-copper);
}

#analytics .ranking-copy i {
  background: var(--v2-copper);
}

#analytics .bar-column i {
  border-radius: 7px 7px 2px 2px;
  background: var(--v2-copper);
}

#analytics .presence-total,
#analytics .presence-row.online {
  color: var(--v2-green);
}

#analytics .status-pill:not(.success):not(.warning):not(.danger) {
  color: var(--v2-copper);
}

/* Branch controls: brand for selection, semantic color for operational meaning. */
#branches .workspace-toolbar {
  border: 0;
  border-radius: 20px;
  background: var(--v2-surface-solid);
  box-shadow: var(--v2-shadow-small);
}

#branches .editor-hero {
  border: 0;
  border-radius: 22px;
  background: color-mix(in srgb, var(--v2-canvas) 45%, var(--v2-surface-solid));
  background-image: none;
  box-shadow: none;
}

#branches .editor-tabs {
  border: 0;
  border-radius: 16px;
  background: var(--v2-canvas);
}

#branches .editor-tab.active {
  background: var(--v2-surface-solid);
  color: var(--v2-copper);
  box-shadow: var(--v2-shadow-small);
}

#branches .service-mode-card {
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--v2-canvas);
  box-shadow: none;
}

#branches .service-mode-card.selected {
  border-color: color-mix(in srgb, var(--v2-copper) 24%, transparent);
  background: var(--v2-copper-soft);
  box-shadow: none;
}

#branches .service-mode-card.selected > .ion {
  color: var(--v2-copper);
}

#branches .schedule-list,
#branches .structured-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  background: var(--v2-surface-solid);
}

#branches :is(.schedule-row, .structured-row) {
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#branches :is(.schedule-row, .structured-row):last-child {
  border-bottom: 0;
}

#branches .schedule-row:has(input:checked) {
  box-shadow: inset 3px 0 0 var(--v2-green);
}

#branches .zone-editor-row {
  box-shadow: inset 3px 0 0 var(--v2-info);
}

#branches .integration-card {
  border: 0;
  border-radius: 18px;
  background: var(--v2-canvas);
  box-shadow: none;
}

#branches .integration-card > .ion {
  background: var(--v2-info-soft);
  color: var(--v2-info);
}

#branches .integration-card:has(.chip-success) > .ion {
  background: var(--v2-green-soft);
  color: var(--v2-green);
}

#branches .integration-card:has(.chip-warning) > .ion {
  background: var(--v2-amber-soft);
  color: var(--v2-amber);
}

#branches .integration-card:has(.chip-danger) > .ion {
  background: var(--v2-red-soft);
  color: var(--v2-red);
}

#branches .map-link {
  color: var(--v2-info);
}

#branches :is(.control-field input, .control-field textarea, .control-field select):focus {
  border-color: color-mix(in srgb, var(--v2-copper) 44%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-copper) 11%, transparent);
}

html[data-theme="dark"] .operations-pulse-card,
html[data-theme="dark"] .orders-flow-hero {
  color: #edf5ef;
  background: var(--v2-copper-panel);
}

html[data-theme="dark"] .operations-pulse-card .pulse-card-head p,
html[data-theme="dark"] .operations-pulse-card .pulse-card-head span,
html[data-theme="dark"] .operations-pulse-card .pulse-status-copy span,
html[data-theme="dark"] .orders-flow-copy > span,
html[data-theme="dark"] .flow-stage span,
html[data-theme="dark"] .flow-stage small {
  color: rgba(237, 245, 239, 0.62);
}

html[data-theme="dark"] .operations-pulse-card > a,
html[data-theme="dark"] .operations-pulse-card .pulse-live {
  color: #edf5ef;
}

html[data-theme="dark"] .flow-stage,
html[data-theme="dark"] .orders-flow-float {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.07);
}

/* V3 surface language: calm glass, semantic color, and copper as a signature. */
:root {
  --v3-glass: rgba(255, 255, 255, 0.72);
  --v3-glass-strong: rgba(255, 255, 255, 0.88);
  --v3-glass-line: rgba(255, 255, 255, 0.82);
  --v3-elevation: 0 22px 60px rgba(32, 47, 40, 0.08), 0 2px 10px rgba(32, 47, 40, 0.035);
  --v3-elevation-hover: 0 28px 70px rgba(32, 47, 40, 0.11), 0 4px 14px rgba(32, 47, 40, 0.045);
  --v3-radius: 24px;
}

html[data-theme="dark"] {
  --v3-glass: rgba(28, 35, 31, 0.7);
  --v3-glass-strong: rgba(28, 35, 31, 0.88);
  --v3-glass-line: rgba(255, 255, 255, 0.09);
  --v3-elevation: 0 24px 64px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.2);
  --v3-elevation-hover: 0 30px 76px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(0, 0, 0, 0.22);
}

body {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--v2-info-soft) 46%, var(--v2-canvas)) 0%, var(--v2-canvas) 42%, color-mix(in srgb, var(--v2-green-soft) 28%, var(--v2-canvas)) 100%);
  background-attachment: fixed;
}

.sidebar,
.topbar,
.theme-mode-control,
.page-smart-brief,
.workspace-toolbar,
.saved-view-tabs,
.campaign-view-tabs,
.communication-filters {
  border: 1px solid var(--v3-glass-line);
  background: var(--v3-glass);
  box-shadow: 0 12px 38px rgba(32, 47, 40, 0.055);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
}

.sidebar {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}

.topbar {
  top: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 20px;
}

:is(.panel, .metric-card, .module-card, .entity-list-panel, .entity-editor-panel, .order-commerce-panel, .order-detail-drawer, .campaign-preview, .communication-library, .communication-editor, .communication-intelligence, .communication-log-section, .message-template-section) {
  border: 1px solid var(--v3-glass-line);
  background: var(--v3-glass-strong);
  box-shadow: var(--v3-elevation);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  backdrop-filter: blur(22px) saturate(128%);
}

:is(.panel, .metric-card, .module-card, .entity-list-panel, .entity-editor-panel, .communication-library, .communication-editor, .communication-intelligence) {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

:is(.metric-card, .module-card, .communication-campaign-row):hover {
  transform: translateY(-2px);
  box-shadow: var(--v3-elevation-hover);
}

.metric-card::before {
  top: 0;
  right: 0;
  width: 100%;
  height: 48%;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 58%);
  opacity: 0.72;
  pointer-events: none;
}

.metric-card::after {
  width: 6px;
  height: 6px;
  background: var(--metric-tone);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--metric-tone) 10%, transparent);
}

/* Buttons stay neutral; brand appears in the label and selection marker. */
.button,
.icon-button {
  min-height: 38px;
  border-color: var(--v2-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--v3-glass-strong) 88%, transparent);
  color: var(--v2-ink);
  box-shadow: 0 7px 18px rgba(32, 47, 40, 0.055);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.button.primary,
.button.primary:hover,
.button.primary:focus-visible {
  border-color: color-mix(in srgb, var(--v2-copper) 18%, var(--v2-line));
  background: var(--v3-glass-strong);
  color: var(--v2-copper);
  box-shadow: 0 10px 24px rgba(32, 47, 40, 0.075);
}

.button.primary:hover {
  border-color: color-mix(in srgb, var(--v2-copper) 34%, transparent);
  background: color-mix(in srgb, var(--v2-copper) 5%, var(--v3-glass-strong));
}

/* Compact iOS-style switches: green is enabled, gray is disabled. */
.switch {
  width: 44px;
  height: 26px;
  flex: 0 0 44px;
}

.slider {
  border: 1px solid color-mix(in srgb, var(--v2-ink) 9%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--v2-muted) 20%, var(--v2-surface-solid));
  box-shadow: inset 0 1px 3px rgba(23, 32, 28, 0.08);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.slider::before {
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
  border: 0;
  border-radius: 50%;
  background: #fdfbf6;
  box-shadow: 0 3px 9px rgba(23, 32, 28, 0.22);
  transition: transform 230ms cubic-bezier(0.2, 0.9, 0.2, 1.15);
}

.switch input:checked + .slider {
  border-color: color-mix(in srgb, var(--v2-green) 42%, transparent);
  background: var(--v2-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v2-green) 9%, transparent);
}

.switch input:checked + .slider::before {
  transform: translateX(18px);
}

.switch input:focus-visible + .slider {
  outline: 3px solid color-mix(in srgb, var(--v2-info) 18%, transparent);
  outline-offset: 2px;
}

:is(input, textarea, select):focus,
#branches :is(.control-field input, .control-field textarea, .control-field select):focus {
  border-color: color-mix(in srgb, var(--v2-info) 48%, transparent);
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v2-info) 10%, transparent);
}

.theme-mode-control button.active,
.editor-tab.active,
.workspace-tab.active,
.saved-view-tabs button.active,
.campaign-view-tabs button.active,
.communication-filters button.active {
  position: relative;
  background: var(--v2-surface-solid);
  color: var(--v2-ink);
  box-shadow: 0 6px 18px rgba(32, 47, 40, 0.08);
}

:is(.theme-mode-control button.active, .editor-tab.active, .workspace-tab.active, .saved-view-tabs button.active, .campaign-view-tabs button.active, .communication-filters button.active)::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--v2-copper);
}

/* Smart brief appears on every workspace and explains the next action. */
.page-smart-brief {
  --smart-tone: var(--v2-info);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  margin-bottom: 18px;
  padding: 12px 14px;
  overflow: hidden;
  border-radius: 20px;
  animation: smartBriefIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page.layout-grid > .page-smart-brief {
  grid-column: 1 / -1;
}

.page-smart-brief.smart-success { --smart-tone: var(--v2-green); }
.page-smart-brief.smart-warning { --smart-tone: var(--v2-amber); }
.page-smart-brief.smart-danger { --smart-tone: var(--v2-red); }
.page-smart-brief.smart-neutral { --smart-tone: var(--v2-muted); }

.smart-brief-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--smart-tone) 11%, var(--v2-surface-solid));
  color: var(--smart-tone);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--smart-tone) 12%, transparent);
}

.smart-brief-copy { min-width: 0; }
.smart-brief-copy small { display: block; color: var(--smart-tone); font-size: 11px; font-weight: 780; text-transform: uppercase; }
.smart-brief-copy strong { display: block; margin-top: 3px; font-size: 12px; }
.smart-brief-copy p { margin: 3px 0 0; color: var(--v2-muted); font-size: 11px; line-height: 1.4; }
.page-smart-brief > a { display: inline-flex; align-items: center; gap: 7px; color: var(--v2-ink); font-size: 11px; font-weight: 750; text-decoration: none; }

/* Overview: semantic highlight replaces broad copper treatment. */
.operations-pulse-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--pulse-tone) 15%, var(--v2-surface-solid)) 0%, color-mix(in srgb, var(--pulse-tone) 5%, var(--v2-surface-solid)) 52%, var(--v3-glass-strong) 100%);
  box-shadow: var(--v3-elevation);
}

.operations-pulse-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.operations-pulse-card::after { display: none; }
.operations-pulse-card > a { color: var(--v2-ink); }
.timeline-rail i.now { background: var(--v2-info); box-shadow: 0 0 0 6px color-mix(in srgb, var(--v2-info) 12%, transparent); }

/* Orders use state colors rather than one copper flow. */
.orders-flow-hero {
  border: 1px solid var(--v3-glass-line);
  background: var(--v3-glass-strong);
  box-shadow: var(--v3-elevation);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  backdrop-filter: blur(22px) saturate(128%);
}

.orders-flow-track > i { background: var(--v2-line); }
.flow-stage { --flow-tone: var(--v2-info); border-color: color-mix(in srgb, var(--flow-tone) 15%, transparent); background: color-mix(in srgb, var(--flow-tone) 7%, var(--v3-glass-strong)); }
.flow-stage:nth-child(3) { --flow-tone: var(--v2-amber); }
.flow-stage:nth-child(5), .flow-stage:nth-child(7) { --flow-tone: var(--v2-green); }
.flow-stage strong { color: var(--flow-tone); }

/* Analytics reserves copper for revenue; charts use information and outcome colors. */
#analytics .funnel-step > div:first-child > span { background: var(--v2-info-soft); color: var(--v2-info); }
#analytics .funnel-track i { background: var(--v2-info); }
#analytics .funnel-step:last-child .funnel-track i { background: var(--v2-green); }
#analytics .funnel-step > b { color: var(--v2-info); }
#analytics .funnel-step:last-child > b { color: var(--v2-green); }
#analytics .mix-visual > div { background: conic-gradient(var(--v2-info) 0 var(--new-share), var(--v2-green) var(--new-share) 100%); }
#analytics .ranking-number { background: var(--v2-canvas); color: var(--v2-ink); }
#analytics .ranking-copy i, #analytics .bar-column i { background: var(--v2-info); }
#analytics .status-pill:not(.success):not(.warning):not(.danger):not(.info) { color: var(--v2-muted); }

/* Communication Studio */
.communication-page {
  display: grid;
  gap: 16px;
}

.communication-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 24px;
  min-height: 190px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--v3-glass-line);
  border-radius: 30px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--v2-info) 12%, var(--v3-glass-strong)) 0%, var(--v3-glass-strong) 52%, color-mix(in srgb, var(--v2-green) 10%, var(--v3-glass-strong)) 100%);
  box-shadow: var(--v3-elevation);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

.communication-hero::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0));
  pointer-events: none;
}

html[data-theme="dark"] .operations-pulse-card::before,
html[data-theme="dark"] .communication-hero::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
}

html[data-theme="dark"] .metric-card::before {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 58%);
  opacity: 0.5;
}

.communication-hero-copy,
.communication-health { position: relative; z-index: 1; }
.communication-hero-copy h2 { max-width: 650px; margin: 8px 0; font-size: clamp(26px, 3vw, 42px); font-weight: 560; line-height: 1.05; }
.communication-hero-copy > p:last-child { max-width: 620px; margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.55; }
.communication-health { display: grid; justify-items: end; gap: 3px; }
.communication-health strong { margin-top: 10px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 48px; font-weight: 450; color: var(--v2-info); }
.communication-health small { color: var(--v2-muted); font-size: 11px; }

.communication-metrics {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--v3-glass-line);
  border-radius: 22px;
  background: var(--v3-glass);
  box-shadow: var(--v3-elevation);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.communication-metrics > div { background: transparent; }

.communication-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 0.68fr) minmax(460px, 1.35fr) minmax(250px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.communication-library,
.communication-editor,
.communication-intelligence {
  min-width: 0;
  border-radius: 26px;
}

.communication-library,
.communication-intelligence { padding: 17px; }
.communication-editor { padding: 20px; }

.communication-library-head,
.communication-editor-head,
.intelligence-head,
.message-template-group-head,
.communication-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.communication-library-head h3,
.communication-editor-head h3,
.intelligence-head h3 { margin: 3px 0 0; font-size: 16px; }

.communication-filters {
  display: flex;
  gap: 3px;
  margin: 14px 0 10px;
  padding: 3px;
  border-radius: 13px;
  box-shadow: none;
}

.communication-filters button {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 720;
}

.communication-campaign-list { display: grid; gap: 5px; }
.communication-campaign-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 78px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  color: var(--v2-ink);
  text-align: left;
}

.communication-campaign-row.active {
  border-color: var(--v3-glass-line);
  background: var(--v2-surface-solid);
  box-shadow: 0 10px 26px rgba(32, 47, 40, 0.07);
}

.communication-channel-stack { position: relative; width: 34px; height: 36px; }
.communication-channel-stack i { position: absolute; display: grid; width: 23px; height: 23px; place-items: center; border: 2px solid var(--v2-surface-solid); border-radius: 8px; background: var(--v2-info-soft); color: var(--v2-info); font-style: normal; font-size: 12px; }
.communication-channel-stack i:nth-child(2) { top: 12px; left: 10px; background: var(--v2-green-soft); color: var(--v2-green); }
.communication-channel-stack i:nth-child(3) { top: 6px; left: 5px; background: var(--v2-amber-soft); color: var(--v2-amber); }
.communication-campaign-copy { min-width: 0; }
.communication-campaign-copy :is(strong, small, em) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.communication-campaign-copy strong { font-size: 11px; }
.communication-campaign-copy small { margin-top: 3px; color: var(--v2-muted); font-size: 11px; }
.communication-campaign-copy em { margin-top: 5px; color: var(--v2-muted); font-size: 11px; font-style: normal; }
.communication-campaign-row .status-pill { padding: 4px 6px; font-size: 11px; }

.communication-editor-actions { display: flex; gap: 7px; }
.communication-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.communication-form .field { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--v2-muted); font-size: 11px; font-weight: 760; text-transform: uppercase; }
.communication-form .field-wide { grid-column: 1 / -1; }
.communication-form :is(input, textarea, select) { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--v2-line); border-radius: 12px; background: color-mix(in srgb, var(--v2-surface-solid) 82%, transparent); color: var(--v2-ink); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.45; text-transform: none; }
.communication-form textarea { min-height: 96px; resize: vertical; }
.communication-form .field > small { color: var(--v2-muted); font-size: 11px; text-align: right; }

.communication-channel-picker { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0; padding: 0; border: 0; }
.communication-channel-picker legend { margin-bottom: 6px; color: var(--v2-muted); font-size: 11px; font-weight: 760; text-transform: uppercase; }
.communication-channel-picker label { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--v2-line); border-radius: 13px; background: color-mix(in srgb, var(--v2-surface-solid) 72%, transparent); }
.communication-channel-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.communication-channel-picker label:has(input:checked) { border-color: color-mix(in srgb, var(--v2-info) 22%, transparent); background: var(--v2-info-soft); color: var(--v2-info); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-info) 8%, transparent); }
.communication-channel-picker label:has(input:checked)::after { content: "\2713"; margin-left: auto; font-size: 11px; }
.communication-channel-picker .ion { font-size: 15px; }
.communication-channel-picker strong { font-size: 11px; }

.intelligence-head { justify-content: flex-start; }
.intelligence-head > .ion { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: var(--v2-green-soft); color: var(--v2-green); }
.communication-forecast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 17px 0; }
.communication-forecast > div { min-width: 0; padding: 10px 8px; border-radius: 13px; background: color-mix(in srgb, var(--v2-canvas) 62%, transparent); }
.communication-forecast span, .communication-forecast small { display: block; color: var(--v2-muted); font-size: 11px; }
.communication-forecast strong { display: block; margin: 5px 0 2px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 19px; font-weight: 520; }
.smart-recommendation { padding: 14px; border: 1px solid color-mix(in srgb, var(--v2-green) 13%, transparent); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--v2-green) 10%, var(--v2-surface-solid)), color-mix(in srgb, var(--v2-green) 3%, var(--v2-surface-solid))); }
.smart-recommendation span { color: var(--v2-green); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.smart-recommendation strong { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35; }
.smart-recommendation p { margin: 7px 0 0; color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
.communication-preview { margin-top: 16px; }
.communication-preview-label span, .communication-preview-label em { color: var(--v2-muted); font-size: 11px; font-style: normal; }
.notification-preview-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; margin-top: 8px; padding: 12px; border: 1px solid var(--v3-glass-line); border-radius: 17px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 12px 30px rgba(32, 47, 40, 0.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.preview-app-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--v2-surface-solid); color: var(--v2-copper); font-size: 11px; font-weight: 800; box-shadow: 0 5px 14px rgba(32, 47, 40, 0.09); }
.notification-preview-card strong { display: block; font-size: 11px; }
.notification-preview-card p { margin: 4px 0; color: var(--v2-muted); font-size: 11px; line-height: 1.4; }
.notification-preview-card small { color: var(--v2-muted); font-size: 11px; }

.communication-log-section,
.message-template-section { border-radius: 26px; }
.communication-log-section .notification-delivery-log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.message-template-section { margin-top: 0; }
.message-template-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 12px 14px; border-radius: 16px; background: var(--v2-info-soft); }
.message-template-toolbar > div span, .message-template-toolbar > div strong { display: block; }
.message-template-toolbar span { color: var(--v2-info); font-size: 11px; }
.message-template-toolbar strong { margin-top: 3px; font-size: 12px; }
.message-template-toolbar p { max-width: 650px; margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.5; }
.message-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.message-template-group { display: grid; gap: 10px; }
.message-template-group-head > div { display: flex; align-items: center; gap: 8px; }
.message-template-group-head h3 { margin: 0; font-size: 14px; }
.message-template-group-head > span { color: var(--v2-muted); font-size: 11px; }
.message-template-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.message-template-card { min-width: 0; padding: 12px; border: 1px solid var(--v2-line); border-radius: 17px; background: color-mix(in srgb, var(--v2-surface-solid) 66%, transparent); }
.message-template-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.message-template-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--v2-info-soft); color: var(--v2-info); }
.message-template-head small, .message-template-head strong { display: block; }
.message-template-head small { color: var(--v2-muted); font-size: 11px; }
.message-template-head strong { margin-top: 2px; font-size: 11px; }
.message-template-card textarea { width: 100%; min-height: 72px; margin-top: 10px; padding: 9px; border: 1px solid var(--v2-line); border-radius: 11px; background: color-mix(in srgb, var(--v2-surface-solid) 75%, transparent); color: var(--v2-ink); font: inherit; font-size: 11px; line-height: 1.45; resize: vertical; }
.template-variable-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.template-variable-row span { padding: 4px 6px; border-radius: 7px; background: var(--v2-canvas); color: var(--v2-muted); font-size: 11px; }

/* Meaningful motion: reveal hierarchy and updated state without distraction. */
.page.active {
  animation: pageReveal 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page.active > :is(.page-smart-brief, .communication-hero, .metrics-grid, .panel, .management-shell, .workspace-toolbar, .communication-workspace) {
  animation: cardReveal 440ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page.active > :is(.metrics-grid, .panel, .management-shell, .communication-workspace):nth-child(n + 3) { animation-delay: 60ms; }
.pulse-wave i { transform-origin: bottom; animation: signalRise 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pulse-live i, .top-live i, .entity-status-dot.online { animation: livePulse 2.2s ease-in-out infinite; }

@keyframes pageReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardReveal { from { opacity: 0; filter: saturate(0.82) brightness(1.03); } to { opacity: 1; filter: saturate(1) brightness(1); } }
@keyframes smartBriefIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes signalRise { from { transform: scaleY(0.15); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v2-green) 18%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--v2-green) 0%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Flatten nested surfaces and remove duplicate lines. */
:is(.entity-editor-panel, .order-detail-drawer, .panel) :is(.detail-section, .editor-section) {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is(.entity-editor-panel, .order-detail-drawer, .panel) :is(.detail-section, .editor-section):first-of-type {
  border-top: 0;
}

:is(.detail-grid, .customer-summary-grid, .customer-context-strip) > div {
  border-color: transparent;
  background: color-mix(in srgb, var(--v2-canvas) 58%, transparent);
  box-shadow: none;
}

:is(.editor-title-group, .editor-title-group > div, .detail-title-group, .order-detail-drawer header) {
  min-width: 0;
}

:is(.editor-title-group, .detail-title-group, .order-detail-drawer) :is(h2, h3, p, strong, em) {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 1280px) {
  .communication-workspace { grid-template-columns: 230px minmax(440px, 1fr); }
  .communication-intelligence { grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(240px, 1fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
  .communication-intelligence .communication-forecast { margin: 0; }
  .communication-intelligence .communication-preview { margin: 0; }
}

@media (max-width: 900px) {
  .communication-workspace { grid-template-columns: 1fr; }
  .communication-intelligence { grid-column: auto; display: block; }
  .communication-intelligence .communication-forecast { margin: 17px 0; }
  .communication-intelligence .communication-preview { margin-top: 16px; }
  .message-template-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topbar { top: 4px; border-radius: 16px; }
  .page-smart-brief { grid-template-columns: 34px minmax(0, 1fr); }
  .page-smart-brief > a { grid-column: 2; }
  .smart-brief-copy p { display: none; }
  .communication-hero { grid-template-columns: 1fr; min-height: 0; padding: 22px; }
  .communication-health { justify-items: start; }
  .communication-health strong { font-size: 38px; }
  .communication-form { grid-template-columns: 1fr; }
  .communication-form .field-wide, .communication-channel-picker { grid-column: auto; }
  .communication-channel-picker { grid-template-columns: 1fr; }
  .communication-log-section .notification-delivery-log, .message-template-cards { grid-template-columns: 1fr; }
  .message-template-toolbar { align-items: flex-start; flex-direction: column; }
}

.admin-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--brand-copper, #b15a2f) 10%, transparent), transparent 28%),
    linear-gradient(145deg, #f8faf9 0%, #eef4f1 100%);
}

.admin-auth[hidden] { display: none; }

.admin-auth-panel {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 28px 80px rgba(24, 35, 31, 0.14), inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(28px) saturate(135%);
}

.admin-auth-brand, .admin-auth-brand > span:last-child { display: flex; align-items: center; }
.admin-auth-brand { gap: 12px; }
.admin-auth-brand > span:last-child { align-items: flex-start; flex-direction: column; }
.admin-auth-brand small { color: #75807b; }
.admin-auth-copy { margin: 42px 0 28px; }
.admin-auth-copy h1 { margin: 5px 0 8px; font-size: 38px; letter-spacing: 0; }
.admin-auth-copy p:last-child, .admin-auth-note { color: #6f7974; }
.admin-login-form { display: grid; gap: 16px; }
.admin-login-form label { display: grid; gap: 7px; font-weight: 700; }
.admin-login-form input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid #d9e1dd;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: #17201c;
  font: inherit;
  outline: none;
}
.admin-login-form input:focus { border-color: #b15a2f; box-shadow: 0 0 0 4px rgba(201, 92, 46, 0.1); }
.admin-login-form .button { min-height: 52px; justify-content: center; margin-top: 4px; }
.admin-login-error { margin: 0; color: #b42318; font-size: 14px; }
.admin-auth-note { margin: 22px 0 0; font-size: 12px; line-height: 1.55; }
.admin-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.admin-identity-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #eff3f1; font-size: 12px; font-weight: 800; }
.admin-identity-copy { display: grid; }
.admin-identity-copy strong { font-size: 13px; }
.admin-identity-copy small { color: var(--muted, #74807a); font-size: 11px; }
[data-access-hidden="true"] { display: none !important; }

html[data-theme="dark"] .admin-auth { background: #111714; }
html[data-theme="dark"] .admin-auth-panel { border-color: rgba(255,255,255,.08); background: rgba(25, 33, 29, 0.88); }
html[data-theme="dark"] .admin-auth-copy h1, html[data-theme="dark"] .admin-auth-brand strong { color: #f6faf8; }
html[data-theme="dark"] .admin-login-form input { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.06); color: #faf6ee; }

@media (max-width: 760px) {
  .admin-auth { padding: 16px; }
  .admin-auth-panel { padding: 26px 22px; border-radius: 22px; }
  .admin-identity-copy, #adminLogoutButton span:last-child { display: none; }
}

@media (max-width: 1260px) {
  .main { padding-right: 22px; padding-left: 22px; }
  .spatial-cockpit { grid-template-columns: 184px minmax(0, 1fr); gap: 22px; }
  .cockpit-identity-stats { gap: 14px; }
  .cockpit-identity-stats > div { display: block; }
  .cockpit-identity-stats span { display: block; margin-top: 2px; }
  .orders-flow-hero { grid-template-columns: 220px minmax(480px, 1fr); gap: 20px; }
  .orders-flow-track { grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr; }
  #orders .orders-workspace-grid { grid-template-columns: minmax(570px, 1.2fr) minmax(330px, 0.8fr); }
}

@media (max-width: 1040px) {
  .spatial-cockpit { grid-template-columns: 1fr; }
  .cockpit-index { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0; }
  .cockpit-branch-list { display: flex; overflow: auto; }
  .cockpit-branch-list .readiness-row { min-width: 170px; }
  .cockpit-go-card { display: none; }
  .cockpit-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .operations-pulse-card { grid-column: 1 / 3; grid-row: auto; min-height: 390px; }
  #overview .cockpit-signals .metric-card { grid-column: span 4; }
  #overview .cockpit-signals .metric-card:nth-child(n) { grid-column: span 4; }
  .orders-flow-hero { grid-template-columns: 1fr; }
  .orders-flow-copy { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
  .orders-flow-copy h2 { margin: 0; }
  .orders-flow-copy > span { display: none; }
  #orders .orders-workspace-grid { grid-template-columns: 1fr; }
  #orders .order-detail-drawer { position: relative; top: 0; max-height: none; }
}

@media (max-width: 760px) {
  body { min-width: 0; }
  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 66px;
    padding: 9px 12px;
    flex-direction: row;
    overflow-x: auto;
    background: color-mix(in srgb, var(--v2-canvas) 80%, transparent);
    backdrop-filter: blur(18px);
  }
  .brand, .sidebar-search, .side-note { display: none; }
  .nav-list, .nav-group { display: flex; }
  .nav-list a { min-width: 44px; }
  .main { padding: 0 14px 30px; }
  .topbar { top: 0; bottom: auto; align-items: flex-start; flex-direction: row; }
  .topbar p:not(.top-kicker), .top-live { display: none; }
  .cockpit-identity { align-items: flex-start; flex-direction: column; }
  .cockpit-identity-stats { width: 100%; justify-content: space-between; }
  .cockpit-index { grid-template-columns: 1fr; }
  .cockpit-index-heading, .cockpit-index-link { display: none; }
  .cockpit-timeline { min-height: 92px; padding-right: 0; padding-left: 0; }
  .timeline-hours span:nth-child(even) { visibility: hidden; }
  .timeline-float { left: 32%; }
  .cockpit-bento { grid-template-columns: 1fr; }
  .operations-pulse-card { grid-column: auto; min-height: 350px; padding: 22px; }
  .operations-pulse-card .pulse-score strong { font-size: 76px; }
  #overview .cockpit-signals .metric-card:nth-child(n) { grid-column: span 6; }
  .orders-flow-hero { padding: 24px 18px 88px; border-radius: 28px; }
  .orders-flow-copy { display: block; }
  .orders-flow-copy h2 { margin-top: 8px; }
  .orders-flow-track { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .orders-flow-track > i { display: none; }
  .flow-stage { min-height: 92px; padding: 10px; border-radius: 17px; }
  .flow-stage strong { font-size: 26px; }
  #orders > .operational-metrics { grid-template-columns: 1fr 1fr; }
  #orders .orders-workspace-grid { display: block; }
  #orders .order-commerce-panel { overflow: hidden; }
}