body[data-dashboard-density="compact"] {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --rail-width: 212px;
  font-size: 13px;
}

body[data-dashboard-density="compact"] .topbar { min-height: 62px; padding: 10px 16px; }
body[data-dashboard-density="compact"] .workspace { padding: 16px; }
body[data-dashboard-density="compact"] .panel,
body[data-dashboard-density="compact"] .command-primary { padding: 14px; }
body[data-dashboard-density="compact"] .nav-item { min-height: 36px; padding: 7px 9px; }
body[data-dashboard-density="compact"] .metric { padding: 10px; }

body[data-dashboard-density="wallboard"] {
  --rail-width: 268px;
  font-size: 16px;
}

body[data-dashboard-density="wallboard"] .topbar { min-height: 86px; }
body[data-dashboard-density="wallboard"] .workspace { padding: 28px; }
body[data-dashboard-density="wallboard"] .metric-value { font-size: 34px; }
body[data-dashboard-density="wallboard"] .row-title { font-size: 17px; }

body[data-dashboard-theme="command-light"] {
  --bg: #eef3f8;
  --surface: #ffffff;
  --surface-subtle: #f4f7fb;
  --accent: #1f6f8b;
  --accent-soft: rgba(31, 111, 139, 0.12);
  --accent-strong: #17566c;
  --border: #d5dee8;
}

body[data-dashboard-theme="command-dark"] {
  --bg: #111820;
  --surface: #18232d;
  --surface-subtle: #121b24;
  --surface-raised: #1f2d39;
  --border: #304251;
  --text: #f4f8fb;
  --text-muted: #afbdc9;
  --accent: #4fb3c8;
  --accent-soft: rgba(79, 179, 200, 0.16);
  --accent-strong: #8ad8e8;
}

body[data-dashboard-theme="wallboard-dark"] {
  --bg: #090d12;
  --surface: #101820;
  --surface-subtle: #0c1218;
  --surface-raised: #16212b;
  --border: #273847;
  --text: #f6fbff;
  --text-muted: #a7bac8;
  --accent: #43d1a8;
  --accent-soft: rgba(67, 209, 168, 0.17);
  --accent-strong: #85e6ca;
}

body[data-dashboard-theme="loss-dark"] {
  --bg: #120f12;
  --surface: #1f181d;
  --surface-subtle: #171216;
  --surface-raised: #2a2027;
  --border: #44333d;
  --text: #fff7fb;
  --text-muted: #c4aeb9;
  --accent: #ff8a5c;
  --accent-soft: rgba(255, 138, 92, 0.17);
  --accent-strong: #ffb28d;
}

body[data-dashboard-theme="camera-dark"] {
  --bg: #0b1117;
  --surface: #121b23;
  --surface-subtle: #0e151d;
  --surface-raised: #18242f;
  --border: #283844;
  --text: #f3f8fc;
  --text-muted: #a8b8c5;
  --accent: #42b7ff;
  --accent-soft: rgba(66, 183, 255, 0.16);
  --accent-strong: #87d3ff;
}

body[data-dashboard-theme="visitor-light"] {
  --bg: #f1f5f3;
  --surface: #ffffff;
  --surface-subtle: #f6f8f4;
  --border: #d9e3dc;
  --accent: #437f5d;
  --accent-soft: rgba(67, 127, 93, 0.14);
  --accent-strong: #2f6045;
}

body[data-dashboard-theme="staff-light"] {
  --bg: #f5f3f8;
  --surface: #ffffff;
  --surface-subtle: #f8f6fb;
  --border: #e0d9e7;
  --accent: #7860a8;
  --accent-soft: rgba(120, 96, 168, 0.14);
  --accent-strong: #604b8b;
}

body[data-dashboard-theme="aiops-dark"] {
  --bg: #0e1118;
  --surface: #171b25;
  --surface-subtle: #11151d;
  --surface-raised: #202636;
  --border: #31394d;
  --text: #f4f6fb;
  --text-muted: #abb3c4;
  --accent: #93b6ff;
  --accent-soft: rgba(147, 182, 255, 0.16);
  --accent-strong: #c0d2ff;
}

body[data-dashboard-theme="compact-light"] {
  --bg: #f6f7f8;
  --surface: #ffffff;
  --surface-subtle: #f2f4f6;
  --border: #d9dee5;
  --accent: #425e78;
  --accent-soft: rgba(66, 94, 120, 0.13);
  --accent-strong: #2f465c;
}

body[data-dashboard-preset="store-wallboard"] .rail,
body[data-dashboard-preset="store-wallboard"] .topbar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

body[data-dashboard-preset="store-wallboard"] .command-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
}

body[data-dashboard-preset="store-wallboard"] .topbar .search-box,
body[data-dashboard-preset="store-wallboard"] .topbar .window-select {
  display: none;
}

body[data-dashboard-preset="camera-ops"] .camera-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

body[data-dashboard-preset="camera-ops"] #workspace-cameras .workspace-grid.wide-left {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.45fr);
}

body[data-dashboard-preset="loss-prevention"] #workspace-loss .workspace-grid,
body[data-dashboard-preset="aiops-admin"] #workspace-aiops .workspace-grid {
  grid-template-columns: 1fr;
}

body[data-dashboard-preset="compact-ops"] .workspace-grid.two-col,
body[data-dashboard-preset="compact-ops"] .workspace-grid.wide-left {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

body[data-dashboard-preset="visitor-journey"] .app-shell,
body[data-dashboard-preset="staff-coaching"] .app-shell {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

body[data-dashboard-preset="visitor-journey"] .rail,
body[data-dashboard-preset="staff-coaching"] .rail {
  position: sticky;
  z-index: 20;
  height: auto;
  top: 0;
  flex-direction: row;
  align-items: center;
  padding: 10px 18px;
  border-right: 0;
  border-bottom: 1px solid var(--border);
}

body[data-dashboard-preset="visitor-journey"] .rail-nav,
body[data-dashboard-preset="staff-coaching"] .rail-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-dashboard-preset="visitor-journey"] .rail-footer,
body[data-dashboard-preset="staff-coaching"] .rail-footer {
  display: none;
}

body[data-dashboard-preset="visitor-journey"] .nav-item,
body[data-dashboard-preset="staff-coaching"] .nav-item {
  width: auto;
  grid-template-columns: 18px auto auto;
}

.appearance-summary {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

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

.appearance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: 112px;
  padding: 12px;
  text-align: left;
}

.appearance-card:hover,
.appearance-card.active {
  border-color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.appearance-card.active {
  background: var(--accent-soft);
}

.appearance-card-title {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}

.appearance-card-desc {
  color: var(--text-muted);
  display: block;
  font-size: 12px;
}

.appearance-controls {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.appearance-control-group {
  display: grid;
  gap: 6px;
}

.appearance-control-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  body[data-dashboard-preset="visitor-journey"] .rail,
  body[data-dashboard-preset="staff-coaching"] .rail {
    display: none;
  }
}