/* ============================================================
   IPTunnel Admin — Page-level styles (per-page widget internals)
   Loaded after components.css. Restyles JS-generated widget markup
   whose class names are renderer contracts (activity-*, coin-stat-*,
   au-*, app-version-*, analytics-empty-state, uptime-*, admob-*).
   ============================================================ */

/* ---------- dashboard: attention strip ---------- */
.attn-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-hover);
  margin-bottom: 8px;
}
.attn-row:last-child { margin-bottom: 0; }
.attn-icon { flex: none; display: grid; place-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); }
.attn-icon .icon { width: 16px; height: 16px; }
.attn-row.is-danger { background: var(--danger-surface); border-color: var(--danger-border); }
.attn-row.is-danger .attn-icon { color: var(--danger); background: rgba(255, 92, 92, 0.1); }
.attn-row.is-warning { background: var(--warning-surface); border-color: var(--warning-border); }
.attn-row.is-warning .attn-icon { color: var(--warning); background: rgba(212, 167, 44, 0.1); }
.attn-row.is-info { background: var(--info-surface); border-color: var(--info-border); }
.attn-row.is-info .attn-icon { color: var(--info); background: rgba(88, 166, 255, 0.1); }
.attn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--text-sm); color: var(--text); }
.attn-body strong { font-weight: 600; }
.attn-sub { font-size: var(--text-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.attn-quiet { display: flex; align-items: center; gap: 10px; padding: 6px 2px; color: var(--success); font-size: var(--text-sm); }
.attn-quiet .icon { width: 17px; height: 17px; }

/* kpi sub-labels injected by JS (.stat-sub contract) */
.ui-kpi .stat-sub { font-size: 11px; color: var(--text-3); font-weight: 400; }

/* ---------- dashboard: activity feed (renderer contract) ---------- */
.activity-feed { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-bottom: 1px solid var(--border);
}
.activity-row:last-child { border-bottom: none; }
.activity-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.activity-label { font-size: var(--text-sm); color: var(--text); }
.activity-device {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-right { display: flex; align-items: center; gap: 10px; flex: none; }
.activity-coins { font: 600 var(--text-sm) var(--font-ui); font-variant-numeric: tabular-nums; }
.activity-pos { color: var(--success); }
.activity-neg { color: var(--danger); }
.activity-time { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }

/* ---------- dashboard: coin economy (renderer contract) ---------- */
.coin-summary { display: flex; flex-direction: column; }
.coin-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
}
.coin-stat-row:last-child { border-bottom: none; }
.coin-stat-label { color: var(--text-2); }
.coin-stat-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- dashboard: active users (renderer contract) ---------- */
.au-row { padding: 7px 2px; border-bottom: 1px solid var(--border); }
.au-row:last-child { border-bottom: none; }
.au-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.au-label { font-size: var(--text-sm); color: var(--text-2); }
.au-value { font-size: var(--text-sm); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.au-sub { font-size: var(--text-xs); color: var(--text-3); margin-left: 8px; font-weight: 400; }
.au-bar-track { height: 5px; border-radius: 3px; background: var(--surface-hover); overflow: hidden; }
.au-bar-fill { height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease); }
.active-users-freshness { font-size: var(--text-xs); color: var(--text-3); margin-top: 8px; }

/* ---------- dashboard: app versions (renderer contract) ---------- */
.app-version-list { display: flex; flex-direction: column; gap: 9px; }
.app-version-name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); }
.app-version-name-unknown { color: var(--text-3); }
.app-version-stats { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin: 3px 0 4px; font-variant-numeric: tabular-nums; }
.app-version-track { height: 6px; border-radius: 3px; background: var(--surface-hover); overflow: hidden; }
.app-version-fill { height: 100%; background: var(--purple); border-radius: 3px; }
.app-version-fill-unknown { background: var(--text-3); }

/* ---------- shared widget empty state (renderer contract) ---------- */
.analytics-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--text-3); font-size: var(--text-sm);
}
.analytics-empty-state .icon { width: 22px; height: 22px; opacity: 0.7; }

/* ---------- dashboard: uptime grid + admob heatmap (renderer contracts, restyled) ---------- */
/* Servers take ~1/3, protocol endpoints fill the rest (user request, 2026-08-29). */
.uptime-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.uptime-pane { min-width: 0; padding-right: 28px; }
.uptime-pane-protos { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--border); }
.uptime-pane-label {
  font: 600 10px var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.uptime-server-row, .uptime-proto-row { margin-bottom: 12px; }
.uptime-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.uptime-name { font-size: var(--text-sm); color: var(--text); font-weight: 500; }
.uptime-summary { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.uptime-cells { display: flex; gap: 2px; width: 100%; min-width: 0; }
.uptime-square { width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--surface-hover); }
.uptime-cells .uptime-square { flex: 1 1 0; min-width: 3px; max-width: 12px; }
.uptime-pane-servers .uptime-cells .uptime-square { min-width: 2px; }
.uptime-square.is-great, .uptime-square.is-good { background: var(--success); }
.uptime-square.is-ok { background: rgba(63, 185, 80, 0.55); }
.uptime-square.is-degraded { background: var(--warning); }
.uptime-square.is-down { background: var(--danger); }
.uptime-square.is-unknown { background: var(--surface-hover); color: var(--text-secondary, #888); text-align: center; font-size: 12px; line-height: 12px; }
.uptime-section-divider { border-top: 1px solid var(--border); margin: 14px 0 12px; }
.uptime-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.uptime-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
@media (max-width: 900px) {
  .uptime-split { grid-template-columns: 1fr; }
  .uptime-pane { padding-right: 0; }
  .uptime-pane-protos { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--border); }
}

/* admob */
.admob-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--sp-4); }
.admob-kpi-card { background: var(--surface); padding: 10px 12px; }
.admob-kpi-card-is-primary { background: var(--surface-raised); }
.admob-kpi-label { font-size: 11px; color: var(--text-3); }
.admob-kpi-value { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.heatmap-grid { display: grid; gap: 3px; }
.heatmap-cell { width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--surface-hover); }
.heatmap-cell.level-1 { background: #4e2b5c; }
.heatmap-cell.level-2 { background: #75408b; }
.heatmap-cell.level-3 { background: #a34dc0; }
.heatmap-cell.level-4 { background: #cf74eb; }
.heatmap-header-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.heatmap-note { font-size: 11px; color: var(--text-3); }
.admob-stat { display: flex; flex-direction: column; gap: 1px; }
.admob-val { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.admob-lbl { font-size: 11px; color: var(--text-3); }

/* geo map container height inside new cards */
#dashboardGeoMap { min-height: 260px; }
#dashboardGeoMap .leaflet-container { height: 260px; border-radius: var(--r-sm); }

/* ---------- users page ---------- */
.bk-details-summary { cursor: pointer; list-style: none; }
.bk-details-summary::-webkit-details-marker { display: none; }
.bk-details-summary .ui-card-title::after {
  content: ""; margin-left: auto;
}
.bk-details[open] .bk-details-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bk-details > .ui-card-body { border-top: 1px solid var(--border); }
#firebaseMiniStatus .bk-status-text { font-size: var(--text-xs); }

/* ---------- support page ---------- */
.sup-conversation { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; padding-right: 2px; }
.sup-msg { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 10px 12px; }
.sup-msg.is-admin { background: var(--info-surface); border-color: var(--info-border); }
.sup-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sup-msg-time { font-size: var(--text-xs); color: var(--text-3); }
.sup-msg-body { font-size: var(--text-sm); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* support detail grid on narrow screens */
@media (max-width: 1100px) {
  #supportTicketDetailPanel.ui-grid-side { grid-template-columns: 1fr; }
}

/* ---------- sheets (server/tweak editors): form internals ---------- */
.ui-sheet .modal-form-section {
  border: 0; border-top: 1px solid var(--border); border-radius: 0;
  padding: 18px 0 20px; margin-bottom: 0;
  background: transparent;
}
.ui-sheet .modal-form-section:first-of-type { border-top: 0; padding-top: 4px; }
.ui-sheet .modal-form-section:last-child { margin-bottom: 0; }
.ui-sheet .modal-form-section h6 {
  display: flex; align-items: center; gap: 8px;
  font: 600 10.5px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 var(--sp-3);
}
.ui-sheet .sheet-sec-icon { color: var(--text-3); }
.ui-sheet .form-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.ui-sheet .form-control,
.ui-sheet .form-select {
  width: 100%; min-height: var(--h-ctrl); padding: 6px 10px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font: 400 var(--text-sm)/1.3 var(--font-ui);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ui-sheet .form-select {
  appearance: none;
  padding-right: 34px;
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.ui-sheet .form-select option { background: var(--surface-raised); color: var(--text); }
.ui-sheet .form-control::placeholder { color: var(--text-3); }
.ui-sheet .form-control:focus,
.ui-sheet .form-select:focus {
  outline: none; border-color: var(--brand-bright); box-shadow: 0 0 0 3px var(--brand-surface);
  background-color: var(--canvas);
}
.ui-sheet .form-check { display: flex; align-items: center; gap: 9px; }
.ui-sheet .form-check-input {
  appearance: none; width: 16px; height: 16px; flex: none; margin: 0;
  border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--canvas);
  display: grid; place-content: center; cursor: pointer;
}
.ui-sheet .form-check-input:checked { background: var(--brand); border-color: var(--brand); }
.ui-sheet .form-check-input:checked::after {
  content: ""; width: 9px; height: 9px; background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.ui-sheet .form-check-label { font-size: var(--text-sm); color: var(--text); }
.ui-sheet .text-secondary, .ui-sheet small.text-secondary { font-size: var(--text-xs); color: var(--text-3); }
.ui-sheet .modal-flag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ui-sheet .modal-flag-list .form-check { margin: 0; }
.ui-sheet textarea.form-control { min-height: 70px; resize: vertical; }

/* flag preview (renderer contract) */
.flag-preview { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text); }
.flag-preview .flag-emoji { font-size: 16px; line-height: 1; }

/* sparkline cell */
.sparkline-svg { vertical-align: middle; opacity: 0.9; }

/* ---------- publish page ---------- */
.pub-state-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pub-state-changes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-state-counts { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.pub-state-counts .ui-status { font-size: var(--text-sm); color: var(--text-2); }
.pub-state-counts strong { color: var(--text); font-weight: 600; }
.pub-confirm-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.sched-publish-box { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-hover); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sched-countdown { font: 600 var(--text-sm) var(--font-mono); color: var(--warning); }

/* ---------- config history ---------- */
.hist-diffbar { margin-bottom: 14px; }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.hist-row:last-child { border-bottom: none; }
.hist-row.is-latest { padding-left: 10px; border-left: 2px solid var(--brand); }
.hist-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-name { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.hist-meta { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.hist-diff-head { margin-bottom: 12px; }

.diff-section { margin-bottom: 14px; }
.diff-section-title { font: 600 var(--text-xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: 0 0 6px; }
.diff-row { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 4px; margin-bottom: 2px; }
.diff-added { background: var(--success-surface); color: var(--success); }
.diff-removed { background: var(--danger-surface); color: var(--danger); }
.diff-same, .diff-unchanged { font-size: var(--text-xs); color: var(--text-3); }

/* ---------- config validator ---------- */
.val-server-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--surface-hover); }
.val-server-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.val-server-name { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.val-server-host { font-size: 11px; color: var(--text-3); }
.val-checks { display: flex; gap: 6px; flex-wrap: wrap; }
.val-chip { font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); }
.val-chip-ok { background: var(--success-surface); border-color: var(--success-border); color: var(--success); }
.val-chip-fail { background: var(--danger-surface); border-color: var(--danger-border); color: var(--danger); }

/* json preview (publish + import preview) */
.json-editor {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px; overflow: auto; max-height: 480px; white-space: pre; color: var(--text-2);
}
.json-editor .diff-added { padding: 0 2px; }

/* ---------- leaderboard ---------- */
.lb-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--text-2); }
.lb-meta strong { color: var(--text); }
.ui-table tbody tr.is-reward { background: var(--warning-surface); }

/* ---------- broadcast log (renderer contract) ---------- */
#broadcastLogList { display: flex; flex-direction: column; gap: 10px; }
.bcast-log-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-hover);
}
.bcast-log-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bcast-log-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.bcast-log-body { font-size: var(--text-sm); color: var(--text-2); overflow-wrap: anywhere; }
.bcast-log-data { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.bcast-log-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.bcast-log-target { font-size: 11px; color: var(--text-3); text-align: right; max-width: 220px; }
.bcast-log-time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bcast-log-actions { display: flex; gap: 6px; }

@media (max-width: 700px) {
  .bcast-log-row { flex-direction: column; }
  .bcast-log-right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ---------- Leaflet dark (self-hosted, no legacy overrides) ---------- */
.leaflet-container { background: var(--canvas); font-family: var(--font-ui); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-overlay);
}
.leaflet-popup-content { font-size: var(--text-sm); margin: 10px 12px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-3); }
.leaflet-control-attribution {
  background: rgba(14, 16, 19, 0.85) !important; color: var(--text-3) !important; font-size: 10px;
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-bar a {
  background: var(--surface-raised); color: var(--text-2); border-bottom: 1px solid var(--border);
}

/* ============================================================
   Phase 11 — command dashboard and shared page workspaces
   ============================================================ */
.page {
  min-width: 0;
  /* frequent action (nav switches): opacity only, no movement */
  animation: page-fade 140ms var(--ease) both;
}
@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.page > .ui-card,
.page > details.ui-card,
.page > .ui-tablewrap {
  margin-top: 12px;
}

.dashboard-signal-deck {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--band-bg);
}
.dashboard-attention {
  min-height: 54px;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.dashboard-attention-label {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-right: 1px solid var(--border);
  color: var(--text-3);
  font: 600 9.5px var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.dashboard-attention-label .icon { width: 15px; height: 15px; color: var(--success); }
.dashboard-attention #dashboardAttention { padding: 8px 14px; }
.dashboard-attention .attn-quiet { padding: 2px 0; }
.dashboard-attention .attn-row {
  padding-block: 7px;
  margin: 0;
  border: 0;
  background: transparent;
}
.dashboard-signal-deck .ui-kpis { border-top: 0; }

.dashboard-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
  align-items: start;
  margin-top: 24px;
}
.dashboard-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dashboard-audience-grid {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(340px, 1.28fr);
  gap: 12px;
}
.dashboard-live-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  min-width: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.dashboard-rail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font: 600 9px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dashboard-live-rail .ui-card:last-child { border-bottom: 0; }

.au-bar-fill,
.app-version-fill { background: var(--success); }
.app-version-fill-unknown { background: var(--text-3); }
.heatmap-cell.level-1 { background: #173128; }
.heatmap-cell.level-2 { background: #24543f; }
.heatmap-cell.level-3 { background: #3a8a68; }
.heatmap-cell.level-4 { background: var(--success); }
.uptime-square { border-radius: 2px; }

/* Make operational pages read as workspaces instead of nested card stacks. */
#usersPage > .ui-tablewrap,
#supportPage > .ui-tablewrap,
#redeemPage > .ui-tablewrap,
#leaderboardPage > .ui-tablewrap,
#serversPage > .ui-tablewrap,
#tweaksPage > .ui-tablewrap,
#activityPage > .ui-tablewrap {
  margin-top: 10px;
}
.bk-details,
#supportPage > .ui-card,
#publishPage > .ui-card,
#configHistoryPage > .ui-card {
  border-radius: 4px;
}
.hist-row { padding-block: 14px; }
.bcast-log-row { border-radius: 4px; background: var(--surface-hover); }
.sup-msg { border-radius: 4px; }

@media (max-width: 1180px) {
  .dashboard-workbench { grid-template-columns: minmax(0,1fr) 290px; gap: 18px; }
  .dashboard-audience-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .dashboard-workbench { grid-template-columns: 1fr; }
  .dashboard-live-rail { position: static; }
}
@media (max-width: 620px) {
  .dashboard-attention { grid-template-columns: 1fr; }
  .dashboard-attention-label {
    min-height: 36px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .dashboard-audience-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
}

/* ============================================================
   Phase 12 — open ledgers and editorial section rhythm
   ============================================================ */
.page > .ui-card,
.page > details.ui-card,
.page > .ui-tablewrap { margin-top: 0; }

.dashboard-signal-deck {
  margin: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.dashboard-attention {
  min-height: 52px;
  border-bottom-color: var(--border);
}
.dashboard-attention-label {
  border-right-color: var(--border);
  color: var(--text-3);
}
.dashboard-attention-label .icon { color: var(--success); }
.dashboard-attention #dashboardAttention { color: var(--text-2); }
.dashboard-signal-deck .ui-kpis { color: var(--text); }
.dashboard-signal-deck .ui-kpi { min-height: 92px; border-right-color: var(--border); }
.dashboard-signal-deck .ui-kpi-value { color: var(--text); }
.dashboard-signal-deck .ui-kpi.is-danger .ui-kpi-value { color: var(--danger); }
.dashboard-signal-deck .ui-kpi.is-warning .ui-kpi-value { color: var(--warning); }
.dashboard-signal-deck .ui-kpi.is-brand .ui-kpi-value { color: var(--accent); }

.dashboard-workspace { display: block; }
.dashboard-section {
  padding: clamp(30px,3.4vw,46px) 0;
  border-top: 1px solid var(--border-strong);
}
.dashboard-section:first-child { border-top: 0; }
.dashboard-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.dashboard-section-index {
  display: block;
  margin-bottom: 8px;
  color: var(--success);
  font: 600 9px/1.2 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dashboard-section-head h2 {
  max-width: 760px;
  font: 700 clamp(24px,3vw,40px)/1.05 var(--font-display);
  letter-spacing: -.04em;
}
.dashboard-section-body { min-width: 0; }
.dashboard-reliability .dashboard-section-body { min-height: 190px; }
.dashboard-audience-band {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  padding-block: 0;
}
.dashboard-pane { min-width: 0; padding: clamp(28px,3vw,44px) 34px clamp(28px,3vw,44px) 0; }
.dashboard-pane + .dashboard-pane { padding-left: 34px; padding-right: 0; border-left: 1px solid var(--border); }
.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
}
.dashboard-analytics-pane { min-width: 0; padding-right: 34px; }
.dashboard-analytics-pane + .dashboard-analytics-pane { padding-left: 34px; padding-right: 0; border-left: 1px solid var(--border); }
.dashboard-analytics-pane h3 {
  margin-bottom: 18px;
  color: var(--text-3);
  font: 600 10px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dashboard-operations-ledger { padding-bottom: 0; }
.dashboard-ledger-row {
  display: grid;
  grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr);
  gap: 32px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.dashboard-ledger-label { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 11px; align-items: start; }
.dashboard-ledger-label .icon { color: var(--success); }
.dashboard-ledger-label strong, .dashboard-ledger-label small { display: block; }
.dashboard-ledger-label strong { font-size: 13px; }
.dashboard-ledger-label small { margin-top: 3px; color: var(--text-3); font-size: 11px; }

.heatmap-cell.level-1 { background: #cce9dc; }
.heatmap-cell.level-2 { background: #8fd4b9; }
.heatmap-cell.level-3 { background: #4ca985; }
.heatmap-cell.level-4 { background: #187a5c; }
.uptime-square { border-color: rgba(23,26,31,.12); }

/* Management pages use one continuous data surface. */
#usersPage > .ui-status,
#supportPage > .ui-status,
#serversPage > .ui-status,
#tweaksPage > .ui-status {
  margin: 18px 0 0;
}
.bk-details,
#supportPage > .ui-card,
#publishPage > .ui-card,
#configHistoryPage > .ui-card {
  border-radius: 0;
}
.bcast-log-row,
.hist-row {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}
.sup-msg { border-radius: 14px 14px 14px 3px; }
.leader-row,
.redeem-row,
.server-row,
.tweak-row { border-radius: 0; }

/* Legacy card markup is visually normalized into open page sections. */
.page .ui-card:not(.is-dialog) {
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page .ui-card:not(.is-dialog) > .ui-card-head,
.page details.ui-card > .ui-card-head {
  min-height: 0;
  padding: 22px 0 14px;
  border: 0;
  background: transparent;
}
.page .ui-card:not(.is-dialog) > .ui-card-body { padding: 0 0 28px; }
.page .ui-card-foot { padding-inline: 0; border-radius: 0; background: transparent; }
.page .ui-grid-2 {
  gap: 0;
  border-top: 1px solid var(--border-strong);
}
.page .ui-grid-2 > .ui-card { border-top: 0; padding-right: 28px; }
.page .ui-grid-2 > .ui-card + .ui-card {
  padding-right: 0;
  padding-left: 28px;
}

/* A ticket conversation is one real interaction context, so bind it once. */
#supportPage > section.ui-card {
  margin-top: 30px;
  padding: 0 24px;
  border: 1px solid var(--border);
  background: var(--card-bg);
}
#supportPage > section.ui-card > .ui-card-head { border-bottom: 1px solid var(--border); }

.leaflet-container { border-radius: 0 !important; }
.leaflet-control-attribution { background: var(--scrim) !important; color: var(--text-3) !important; }
.leaflet-control-attribution a { color: var(--success) !important; }
.leaflet-bar a { background: var(--surface-raised); color: var(--text-2); border-bottom-color: var(--border); }

@media (max-width: 1180px) {
  .dashboard-analytics-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 920px) {
  .dashboard-audience-band, .dashboard-analytics-grid { grid-template-columns: 1fr; }
  .dashboard-pane, .dashboard-analytics-pane { padding-inline: 0; }
  .dashboard-pane + .dashboard-pane, .dashboard-analytics-pane + .dashboard-analytics-pane {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .page .ui-grid-2 { grid-template-columns: 1fr; }
  .page .ui-grid-2 > .ui-card { padding-inline: 0; }
  .page .ui-grid-2 > .ui-card + .ui-card { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .dashboard-signal-deck { margin-top: 14px; }
  .dashboard-attention-label { border-bottom-color: var(--border); }
  .dashboard-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .dashboard-ledger-row { grid-template-columns: 1fr; gap: 16px; }
}

/* hover styles apply only to hover-capable pointers (no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .ui-sheet .form-control:hover,
  .ui-sheet .form-select:hover { border-color: var(--input-hover-border); }
  .ui-table tbody tr.is-reward:hover { background: rgba(212, 167, 44, 0.18); }
  .leaflet-bar a:hover { background: var(--surface-hover); color: var(--text); }
}

/* ---------- settings: consistent setting rows (check/hint pairs) ---------- */
.sec-grid { align-items: start; gap: 0; }
#settingsSecuritySection .sec-grid { border-top: 0; }
.sec-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding-right: 34px; }
.sec-col + .sec-col { padding-left: 34px; padding-right: 0; }
.ui-setting { display: flex; flex-direction: column; gap: 5px; }
.ui-setting .ui-hint { margin: 0; }
.ui-setting .ui-banner { margin-top: 6px; }
.ui-setting .ui-field { gap: 5px; }