body[data-dashboard-density="compact"] {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --rail-width: fit-content(16rem);
  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="compact"] .settings-status-grid .settings-status-card { padding: 12px 14px; }

body[data-dashboard-density="wallboard"] {
  --rail-width: fit-content(20rem);
  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: #f7f4f1;
  --surface: #ffffff;
  --surface-subtle: #faf7f4;
  --accent: #C74A22;
  --accent-soft: rgba(199, 74, 34, 0.12);
  --accent-strong: #9E3A1A;
  --border: #e4ddd6;
}

body[data-dashboard-theme="command-dark"] {
  --bg: #111820;
  --surface: #18232d;
  --surface-subtle: #121b24;
  --surface-raised: #1f2d39;
  --border: #304251;
  --text: #f4f8fb;
  --text-muted: #afbdc9;
  --accent: #C74A22;
  --accent-soft: rgba(224, 122, 85, 0.16);
  --accent-strong: #F0A888;
}

body[data-dashboard-theme="wallboard-dark"] {
  --bg: #090d12;
  --surface: #101820;
  --surface-subtle: #0c1218;
  --surface-raised: #16212b;
  --border: #273847;
  --text: #f6fbff;
  --text-muted: #a7bac8;
  --accent: #C74A22;
  --accent-soft: rgba(199, 74, 34, 0.2);
  --accent-strong: #F0A888;
}

body[data-dashboard-theme="loss-dark"] {
  --bg: #120f12;
  --surface: #1f181d;
  --surface-subtle: #171216;
  --surface-raised: #2a2027;
  --border: #44333d;
  --text: #fff7fb;
  --text-muted: #c4aeb9;
  --accent: #C74A22;
  --accent-soft: rgba(199, 74, 34, 0.2);
  --accent-strong: #F0A888;
}

body[data-dashboard-preset="store-wallboard"] .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body[data-dashboard-preset="store-wallboard"] .rail,
body[data-dashboard-preset="store-wallboard"] .topbar,
body[data-dashboard-preset="store-wallboard"] .mobile-nav {
  display: none;
}

body[data-dashboard-preset="store-wallboard"] .workspace {
  padding: clamp(24px, 3vw, 52px);
}

body[data-dashboard-preset="store-wallboard"] .command-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, 0.6fr);
  gap: clamp(24px, 3vw, 48px);
}

body[data-dashboard-preset="store-wallboard"] .metric {
  min-height: 150px;
  display: grid;
  align-content: center;
}

body[data-dashboard-preset="store-wallboard"] .metric-value {
  font-size: clamp(42px, 5vw, 76px);
}

body[data-dashboard-preset="store-wallboard"] .row,
body[data-dashboard-preset="store-wallboard"] .panel {
  min-height: 72px;
}

body[data-dashboard-preset="store-wallboard"] .text-button,
body[data-dashboard-preset="store-wallboard"] .row-actions,
body[data-dashboard-preset="store-wallboard"] .segmented {
  display: none;
}

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

.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="store-wallboard"] .command-grid {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-preset="store-wallboard"] .workspace {
    padding: 18px;
  }

  body[data-dashboard-preset="store-wallboard"] .metric {
    min-height: 110px;
  }

  body[data-dashboard-preset="store-wallboard"] .metric-value {
    font-size: clamp(36px, 10vw, 54px);
  }
}