:root {
  --app-bg: #1e1f22;
  --panel-bg: #26272b;
  --panel-bg-2: #2f3035;
  --toolbar-bg: #202124;
  --border-color: #3a3b40;
  --text-main: #f1f1f1;
  --text-muted: #a8a8a8;
  --accent: #4da3ff;
  --accent-soft: rgba(77, 163, 255, 0.18);
  --danger: #ff5f57;
  --warning: #f4bf4f;
  --success: #63c174;
  --topbar-h: 44px;
  --filterbar-h: 46px;
  --sidenav-w: 176px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--app-bg);
  color: var(--text-main);
  font-size: 13px;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h);
  flex: none;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 8px;
  position: relative;
  z-index: 100;
  gap: 12px;
}
.topbar-left { justify-self: start; display: flex; gap: 8px; align-items: center; }
.topbar-center { justify-self: center; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.topbar-right { justify-self: end; display: flex; gap: 6px; align-items: center; }

.app-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-title .bi { color: var(--accent); }

.icon-btn {
  background: transparent;
  color: var(--text-main);
  border: 1px solid transparent;
  border-radius: 4px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.icon-btn:hover { background: var(--panel-bg-2); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.icon-btn.back-link { color: var(--text-muted); }
.icon-btn.back-link:hover { color: var(--text-main); }

.primary-btn {
  background: var(--accent);
  color: #0c1014;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0 12px;
  height: 30px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter 0.12s;
}
.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ghost-btn {
  background: var(--panel-bg-2);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 12px;
  height: 30px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ghost-btn:hover { border-color: var(--text-muted); }
.ghost-btn.danger { color: var(--danger); }
.primary-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.primary-btn.danger:hover { filter: brightness(1.08); }
.modal-text { margin: 0 0 4px; color: var(--text-main); font-size: 13px; line-height: 1.55; display: block; }

.toolbar-divider { width: 1px; height: 22px; background: var(--border-color); margin: 0 4px; flex: none; }

/* ---------- Filter bar ---------- */
.filterbar {
  min-height: var(--filterbar-h);
  flex: none;
  background: var(--app-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 12px;
  position: relative;
  z-index: 90;
}
.filterbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.filter-note { color: var(--text-muted); font-size: 11.5px; }
.filter-sep { color: var(--text-muted); }
.filter-custom { display: flex; align-items: center; gap: 6px; }

.seg-group {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  overflow: hidden;
  flex: none;
}
.seg-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0 10px;
  height: 28px;
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid var(--border-color);
  white-space: nowrap;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--text-main); background: var(--panel-bg-2); }
.seg-btn.is-active { background: var(--accent-soft); color: var(--accent); }
.seg-btn.seg-icon { padding: 0 9px; font-size: 13px; display: inline-flex; align-items: center; }
.seg-btn:disabled { opacity: .35; cursor: default; }
.seg-btn:disabled:hover { color: var(--text-muted); background: transparent; }

/* Cluster of chart controls inside a card header */
.ctl-cluster { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Monthly timeline pan/zoom control */
.tl-ctl .bi { pointer-events: none; }
.tl-now { height: 28px; padding: 0 9px; font-size: 11px; }

.form-control, select.form-control {
  background: var(--panel-bg-2);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  outline: none;
}
.form-control:focus { border-color: var(--accent); }
input[type="date"].form-control { color-scheme: dark; width: 132px; }

.chip-btn {
  background: var(--panel-bg-2);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 14px;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chip-btn:hover { border-color: var(--text-muted); }
.chip-btn.has-selection { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip-btn .bi-chevron-down { font-size: 10px; }

/* Multi-select dropdown */
.dd-wrap { position: relative; flex: none; }
.dd-panel {
  position: absolute;
  top: 32px; left: 0;
  min-width: 230px;
  max-height: 320px;
  overflow: auto;
  background: var(--toolbar-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  z-index: 200;
  padding: 6px;
}
.dd-search { width: 100%; margin-bottom: 6px; }
.dd-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
}
.dd-option:hover { background: var(--panel-bg-2); }
.dd-option input { accent-color: var(--accent); }
.dd-option .dd-sub { color: var(--text-muted); font-size: 10.5px; margin-left: auto; }
.dd-actions { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--border-color); margin-top: 6px; }
.dd-actions button {
  background: none; border: none; color: var(--accent);
  font-size: 11.5px; cursor: pointer; padding: 2px 4px;
}

/* ---------- Shell ---------- */
.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidenav {
  width: var(--sidenav-w);
  background: var(--toolbar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  gap: 2px;
  flex: none;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.nav-item .bi { font-size: 14px; width: 16px; text-align: center; }
.nav-item:hover { background: var(--panel-bg-2); color: var(--text-main); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); }
.nav-spacer { flex: 1; }

.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* ---------- Cards & grid ---------- */
.grid { display: grid; gap: 12px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-31 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .grid-2, .grid-31 { grid-template-columns: 1fr; } }
.mt { margin-top: 12px; }

.card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.card-title {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.card-sub { color: var(--text-muted); font-size: 11px; }
.card-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.card-actions .icon-btn { width: 26px; height: 26px; font-size: 13px; color: var(--text-muted); }
.card-actions .icon-btn:hover { color: var(--text-main); }
.card-actions .icon-btn.is-active { color: var(--accent); }

/* KPI tiles */
.kpi {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.kpi-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.2px; }
.kpi-value { font-size: 24px; font-weight: 600; line-height: 1.15; }
.kpi-row { display: flex; align-items: flex-end; gap: 8px; justify-content: space-between; }
.kpi-delta { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }
.kpi-delta.flat { color: var(--text-muted); }
.kpi-vs { color: var(--text-muted); font-size: 10.5px; }

/* Hero number */
.hero-value { font-size: 48px; font-weight: 650; line-height: 1.05; }
.hero-sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* ---------- Charts ---------- */
.chart-host { position: relative; }
.chart-svg { display: block; max-width: 100%; }
.chart-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 32px 0;
  text-align: center;
}
.chart-tip {
  position: absolute;
  background: #17181b;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11.5px;
  pointer-events: none;
  z-index: 50;
  min-width: 120px;
  max-width: 280px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.chart-tip-title { color: var(--text-muted); margin-bottom: 5px; font-size: 10.5px; }
.chart-tip-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; }
.chart-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.chart-tip-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-line { width: 14px; height: 3px; border-radius: 2px; }
.chart-legend-swatch { width: 9px; height: 9px; border-radius: 2px; }

.chart-heat-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
}
.chart-heat-grad { width: 120px; height: 8px; border-radius: 4px; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tbl th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  user-select: none;
}
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { color: var(--text-main); }
.tbl th .bi { font-size: 9px; margin-left: 3px; }
.tbl td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(58, 59, 64, 0.5);
  white-space: nowrap;
}
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tbl tr.clickable { cursor: pointer; }
.tbl .cell-main { font-weight: 500; }
.tbl .cell-sub { color: var(--text-muted); font-size: 10.5px; }
.tbl td.shrink { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }

.badge {
  display: inline-block;
  background: var(--panel-bg-2);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 6px;
  margin-right: 4px;
}
.badge.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.badge.warn { color: var(--warning); border-color: var(--warning); background: rgba(244, 191, 79, 0.12); }

/* ---------- Empty state ---------- */
.empty-state {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
}
.empty-state .bi { font-size: 44px; color: var(--accent); }
.empty-state h2 { font-size: 18px; margin: 14px 0 8px; }
.empty-state p { color: var(--text-muted); line-height: 1.5; }
.empty-drop {
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  padding: 34px 20px;
  margin-top: 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.empty-drop:hover, .empty-drop.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.empty-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }

/* ---------- Modal (book picker) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 13, 16, 0.66);
  backdrop-filter: blur(2px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  animation: modal-fade 0.12s ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  width: min(880px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-rise 0.14s ease-out;
}
@keyframes modal-rise { from { transform: translateY(8px); } to { transform: none; } }

.modal-card.modal-wide { width: min(1120px, 100%); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.modal-title .color-dot { width: 9px; height: 9px; }

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--toolbar-bg);
}
.modal-head .icon-btn { margin-left: auto; flex: none; color: var(--text-muted); }
.modal-head .icon-btn:hover { color: var(--text-main); }
.modal-title { font-size: 14px; font-weight: 600; }
.modal-sub { color: var(--text-muted); font-size: 11.5px; margin-top: 3px; }

.picker-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}
.picker-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
  display: flex;
  align-items: center;
}
.picker-search .bi {
  position: absolute;
  left: 9px;
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}
.picker-search input { width: 100%; padding-left: 28px; height: 30px; }
.picker-search input::-webkit-search-cancel-button { filter: invert(0.6); }
.picker-bar .ghost-btn { white-space: nowrap; }
.picker-bar .ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  min-height: 120px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.picker-list::-webkit-scrollbar { width: 8px; }
.picker-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}
.picker-row:hover { background: var(--panel-bg-2); }
.picker-row.is-selected { background: var(--accent-soft); border-color: rgba(77, 163, 255, 0.35); }
.picker-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.picker-row .color-dot { margin: 0; flex: none; }
.picker-main { flex: 1; min-width: 0; }
.picker-title {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-badges { display: flex; gap: 4px; flex: none; }
.picker-badges .badge { margin: 0; }
.picker-metrics { text-align: right; flex: none; min-width: 96px; }
.picker-units { font-size: 12px; }

.picker-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--toolbar-bg);
}
.picker-count { color: var(--text-muted); font-size: 12px; }
.picker-foot .ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 720px) {
  .picker-badges { display: none; }
  .picker-metrics { min-width: 72px; }
}

/* ---------- Drop overlay ---------- */
.drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 24, 0.82);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-overlay-inner {
  border: 2px dashed var(--accent);
  border-radius: 12px;
  padding: 48px 64px;
  text-align: center;
  color: var(--accent);
  font-size: 15px;
}
.drop-overlay-inner .bi { font-size: 40px; display: block; margin-bottom: 10px; }

/* ---------- Files view ---------- */
.file-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}
.file-card .bi-file-earmark-spreadsheet { font-size: 22px; color: var(--success); }
.file-info { flex: 1; min-width: 0; }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.file-sheets { margin-top: 5px; }
.file-actions { display: flex; gap: 6px; align-items: center; flex: none; }

.switch { position: relative; width: 32px; height: 18px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--panel-bg-2);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: background 0.15s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 2px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .slider { background: var(--accent-soft); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(14px); background: var(--accent); }

/* Settings */
.set-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.set-row label { min-width: 190px; color: var(--text-muted); font-size: 12px; }
.set-row label.switch { min-width: 32px; }
.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.rate-cell { display: flex; align-items: center; gap: 6px; }
.rate-cell span { font-size: 11px; color: var(--text-muted); width: 30px; }
.rate-cell input { width: 100%; }

/* Toast */
.toast-host {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: #17181b;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.18s ease-out;
}
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warning); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Pager */
.pager { display: flex; align-items: center; gap: 8px; margin-top: 10px; justify-content: flex-end; color: var(--text-muted); font-size: 12px; }

/* View header */
.view-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.view-title { font-size: 15px; font-weight: 600; margin-right: 4px; }
.view-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctl-label { color: var(--text-muted); font-size: 11px; }

/* ============================================================
   KDP BI premium layer
   ============================================================ */

:root {
  --accent-2: #8b7cf6;
  --accent-3: #27c49a;
  --surface-raised: #292a2f;
  --surface-soft: rgba(255, 255, 255, 0.025);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.16);
  --sidenav-w: 194px;
}

body {
  background:
    radial-gradient(circle at 62% -20%, rgba(77, 163, 255, .055), transparent 32%),
    var(--app-bg);
}

button, input, select { font-family: inherit; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), #6a77e8);
  box-shadow: 0 4px 12px rgba(77, 163, 255, .25), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-mark .bi { font-size: 14px; }
.app-title { gap: 7px; }
.app-title-sub { color: var(--text-muted); font-size: 10px; font-weight: 500; }
.topbar-right .compact { height: 28px; padding: 0 9px; }
.import-mode { width: 132px; height: 30px; }
.filter-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.filter-collapse { width: 26px; height: 26px; color: var(--text-muted); }
.filters-collapsed .filterbar > :not(.filterbar-right) { display: none !important; }
.filters-collapsed .filterbar { min-height: 32px; height: 32px; justify-content: flex-end; padding-top: 2px; padding-bottom: 2px; }

.sidenav {
  padding: 10px 7px 8px;
  gap: 2px;
}
.nav-section {
  padding: 13px 10px 5px;
  color: #73757d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.nav-section:first-child { padding-top: 4px; }
.nav-item { position: relative; min-height: 34px; }
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -7px;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(77, 163, 255, .45);
}
.nav-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 9px;
  text-align: center;
  color: var(--text-muted);
  background: var(--panel-bg-2);
  font-size: 9px;
}
.nav-alert-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(244, 191, 79, .12);
}

.content { padding: 18px 20px 36px; }
.card, .kpi {
  border-color: rgba(255,255,255,.075);
  box-shadow: var(--shadow-card);
}
.card { border-radius: 10px; }
.kpi {
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.022), transparent 55%), var(--panel-bg);
}
.kpi::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 4px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .72;
}
.kpi-value { font-size: 22px; letter-spacing: -.45px; }
.view-head { min-height: 42px; margin-bottom: 16px; }
.view-head > .view-controls:last-child, .report-toolbar { margin-left: auto; }
.view-title { font-size: 18px; letter-spacing: -.25px; }
.view-lead { color: var(--text-muted); font-size: 11.5px; margin-top: 3px; line-height: 1.45; }
.card-title { color: #c8c9cc; }
.primary-btn {
  color: #08111b;
  box-shadow: 0 4px 12px rgba(77, 163, 255, .18);
}
.ghost-btn.compact { height: 28px; padding: 0 9px; }
.ghost-btn.danger { color: var(--danger); }
.up { color: var(--success) !important; }
.down { color: var(--danger) !important; }

.period-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.period-card {
  min-width: 0;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(77,163,255,.045), transparent 60%), var(--panel-bg);
  color: var(--text-main);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  box-shadow: var(--shadow-card);
}
.period-card:hover:not(.is-disabled) { transform: translateY(-1px); border-color: rgba(77,163,255,.55); background-color: var(--surface-raised); }
.period-card.is-disabled { cursor: default; opacity: .62; }
.period-label { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .45px; }
.period-value { font-size: 24px; line-height: 1.15; letter-spacing: -.5px; }
.period-sub { color: #c3c4c8; font-size: 11px; }
.period-delta { margin-top: auto; font-size: 10.5px; }
.period-delta.up { color: var(--success); }
.period-delta.down { color: var(--danger); }
.period-delta.flat { color: var(--text-muted); }

.data-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  margin-bottom: 12px;
  border: 1px solid rgba(77, 163, 255, .18);
  border-radius: 8px;
  background: rgba(77, 163, 255, .055);
  color: #b9cce0;
  font-size: 11px;
  line-height: 1.45;
}
.data-notice .bi { color: var(--accent); margin-top: 1px; }

.forecast-card { min-height: 340px; }
.forecast-summary { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; }
.forecast-summary .hero-value { font-size: 38px; }
.mini-forecast { margin-top: 4px; }
.insight-stack { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.status-pill {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
}
.status-pill.ok { color: var(--success); background: rgba(99,193,116,.1); }
.status-pill.warn { color: var(--warning); background: rgba(244,191,79,.1); }
.alert-list { display: flex; flex-direction: column; gap: 5px; }
.alert-list.compact-list { max-height: 160px; overflow: auto; }
.alert-row {
  width: 100%;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.alert-row:hover { background: var(--panel-bg-2); }
.alert-row strong { display: block; font-size: 11.5px; font-weight: 600; }
.alert-row small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-icon {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: rgba(244,191,79,.1); color: var(--warning);
}
.alert-row.high .alert-icon { background: rgba(255,95,87,.1); color: var(--danger); }
.alert-row.positive .alert-icon { background: rgba(99,193,116,.1); color: var(--success); }
.mover-list { display: flex; flex-direction: column; gap: 3px; }
.mover-row {
  width: 100%; display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 7px 5px; border: 0; border-bottom: 1px solid rgba(255,255,255,.045);
  background: transparent; color: var(--text-main); cursor: pointer; font-size: 11.5px;
}
.mover-row:hover { color: var(--accent); }
.mover-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }

.empty-orbit {
  width: 76px; height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(77,163,255,.28); border-radius: 22px; color: var(--accent);
  background: radial-gradient(circle, rgba(77,163,255,.16), transparent 67%);
  box-shadow: 0 0 50px rgba(77,163,255,.09);
}
.empty-orbit .bi { font-size: 30px; }
.empty-drop small { display: block; margin-top: 6px; color: var(--text-muted); }
.empty-inline {
  min-height: 170px;
  width: 100%;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  color: var(--text-muted);
  text-align: center;
}
.empty-inline .bi { color: var(--accent); font-size: 27px; }
.empty-inline strong { color: var(--text-main); }
.empty-inline span { font-size: 11px; }

.report-library-head { align-items: flex-end; }
.report-search { width: min(280px, 45vw); }
.category-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: none;
  height: 27px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  color: var(--text-muted);
  background: transparent;
  font-size: 10.5px;
  cursor: pointer;
}
.category-tab:hover { color: var(--text-main); border-color: #5a5b61; }
.category-tab.is-active { color: var(--accent); border-color: rgba(77,163,255,.48); background: var(--accent-soft); }
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 10px;
}
.report-tile {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: 42px 1fr 16px;
  align-items: start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 65%), var(--panel-bg);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  box-shadow: var(--shadow-card);
}
.report-tile:hover { transform: translateY(-2px); border-color: rgba(77,163,255,.45); background-color: var(--surface-raised); }
.report-icon {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(77,163,255,.23); border-radius: 10px;
  background: linear-gradient(145deg, rgba(77,163,255,.16), rgba(139,124,246,.08));
  color: var(--accent); font-size: 17px; flex: none;
}
.report-icon.small { width: 34px; height: 34px; border-radius: 8px; font-size: 14px; }
.report-tile-copy { display: flex; flex-direction: column; min-width: 0; }
.report-kicker { color: var(--accent); font-size: 8.5px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; }
.report-tile strong { margin-top: 5px; font-size: 13px; }
.report-tile small { margin-top: 6px; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; }
.report-open { color: #666873; font-size: 11px; }
.report-tile:hover .report-open { color: var(--accent); }
.report-detail-head { flex-wrap: nowrap; align-items: center; }
.report-title-wrap { min-width: 0; }
.report-detail-head .view-title { margin-top: 2px; }
.report-toolbar { flex-wrap: nowrap; }
.analysis-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 43px;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: var(--panel-bg);
}
.analysis-bar > .primary-btn:last-child, .analysis-bar > .ghost-btn:last-child { margin-left: auto; }

.lifecycle-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.lifecycle-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 9px;
  color: var(--text-muted); background: var(--panel-bg);
}
.lifecycle-card strong { color: var(--text-main); font-size: 20px; }

.portfolio-table .cell-sub { display: block; margin: 2px 0 0 15px; }
.portfolio-table td { vertical-align: middle; }
.modal-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.group-grid, .goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 10px;
}
.group-card {
  display: flex; align-items: center; gap: 11px; min-height: 78px;
  padding: 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 10px;
  background: var(--panel-bg); box-shadow: var(--shadow-card);
}
.group-swatch { width: 10px; height: 38px; border-radius: 5px; }
.group-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.group-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-copy span { color: var(--text-muted); font-size: 10.5px; }
.group-actions { display: flex; gap: 2px; }

.goal-card {
  min-height: 160px; padding: 13px; border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px; background: var(--panel-bg); box-shadow: var(--shadow-card);
}
.goal-head { display: flex; align-items: flex-start; gap: 8px; }
.goal-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.goal-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-head span { color: var(--text-muted); font-size: 10px; }
.goal-values { display: flex; align-items: baseline; gap: 5px; margin: 16px 0 8px; }
.goal-values strong { font-size: 21px; }
.goal-values span { color: var(--text-muted); font-size: 11px; }
.progress-track { height: 6px; overflow: hidden; border-radius: 3px; background: #18191c; }
.progress-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.goal-foot { display: flex; justify-content: space-between; margin-top: 9px; color: var(--text-muted); font-size: 10px; }

.alert-settings { display: flex; flex-direction: column; gap: 4px; }
.threshold-row { display: grid; grid-template-columns: 1fr 74px 42px; align-items: center; gap: 7px; padding: 5px 0; }
.threshold-row > span { color: var(--text-muted); font-size: 11px; }
.threshold-row small { color: #777981; font-size: 9.5px; }
.threshold-row input { width: 74px; }

.modal-form-card { width: min(700px, 100%); }
.modal-context {
  margin-bottom: 14px; padding: 10px 11px; border-radius: 8px;
  background: var(--panel-bg-2); font-weight: 600;
}
.modal-context small { display: block; margin-top: 3px; color: var(--text-muted); font-weight: 400; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 10.5px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .form-control { width: 100%; }
.modal-delete-goal { margin-top: 18px; }

.saved-views-modal { width: min(720px, 100%); }
.saved-view-list { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.saved-view-row {
  display: flex; align-items: center; gap: 10px; padding: 9px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: var(--surface-soft);
}
.saved-view-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.saved-view-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.saved-view-copy span { color: var(--text-muted); font-size: 10px; }

.geo-card { overflow: hidden; }
.market-map {
  position: relative;
  height: 320px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 9px;
  background: radial-gradient(circle at 50% 42%, #22303f, #182028 78%);
}
.market-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  min-width: 18px; min-height: 18px; padding: 0; border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%; background: rgba(77,163,255,.75); color: #fff;
  box-shadow: 0 0 0 4px rgba(77,163,255,.12), 0 4px 12px rgba(0,0,0,.35);
  cursor: help;
}
.map-point span { font-size: 7px; font-weight: 800; pointer-events: none; }
.map-legend { display: flex; gap: 5px 13px; flex-wrap: wrap; margin-top: 8px; color: var(--text-muted); font-size: 10px; }

@media (max-width: 1180px) {
  .report-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .period-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .group-grid, .goal-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .app-title-sub, .topbar-center { display: none; }
}

@media (max-width: 820px) {
  :root { --sidenav-w: 58px; }
  .sidenav { padding-inline: 5px; }
  .nav-section, .nav-item > span:not(.nav-alert-dot) { display: none; }
  .nav-item { justify-content: center; padding: 8px; }
  .nav-item .bi { font-size: 16px; }
  .nav-item.is-active::before { left: -5px; }
  .desktop-only, .import-mode { display: none; }
  .content { padding: 14px 12px 28px; }
  .report-detail-head { flex-wrap: wrap; }
  .report-toolbar { width: 100%; margin-left: 45px; overflow-x: auto; }
}

@media (max-width: 620px) {
  .topbar { grid-template-columns: auto 1fr; }
  .topbar-center { display: none; }
  .topbar-right { gap: 3px; }
  .topbar-right .ghost-btn { padding: 0 7px; }
  .primary-btn { padding-inline: 9px; }
  .filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filterbar::-webkit-scrollbar { display: none; }
  .filterbar-right { position: sticky; right: 0; background: var(--app-bg); }
  .filter-note { display: none; }
  .period-grid, .report-grid, .group-grid, .goal-grid, .lifecycle-summary { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .analysis-bar { align-items: stretch; }
  .analysis-bar > .primary-btn:last-child, .analysis-bar > .ghost-btn:last-child { margin-left: 0; }
  .report-search { width: 100%; }
  .market-map { height: 240px; }
}

@media print {
  html, body { height: auto; overflow: visible; background: var(--app-bg) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .topbar, .filterbar, .sidenav, .toast-host, .modal-overlay, .report-toolbar, .analysis-bar, .card-actions { display: none !important; }
  .app-shell { display: block; height: auto; }
  .content { overflow: visible; padding: 0; }
  .card, .kpi, .report-tile { break-inside: avoid; box-shadow: none; }
}

/* ===== KDP Sales Cockpit — additions (daily monitor, coverage map, profit) ===== */
.badge.tiny { font-size: 10px; padding: 1px 6px; }
.file-months { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.coverage-map { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.coverage-year { display: flex; align-items: center; gap: 12px; }
.coverage-year-label { width: 46px; flex: 0 0 46px; font-weight: 600; color: var(--text-muted); font-size: 12px; }
.coverage-cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; flex: 1; min-width: 0; }
.cov-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 40px; border-radius: 7px; border: 1px solid var(--border-color);
  background: var(--panel-bg-2); padding: 3px 2px; overflow: hidden;
}
.cov-cell .cov-mon { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.cov-cell .cov-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cov-cell.cov-present { background: var(--accent-soft); border-color: var(--accent); }
.cov-cell.cov-present .cov-mon { color: var(--accent); }
.cov-cell.cov-gap { background: rgba(255, 95, 87, 0.10); border-color: rgba(255, 95, 87, 0.55); border-style: dashed; }
.cov-cell.cov-gap .cov-mon { color: var(--danger); }
.cov-cell.cov-out { opacity: .38; }
.coverage-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.cov-key { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--border-color); vertical-align: -2px; margin-left: 8px; }
.cov-key.cov-present { background: var(--accent-soft); border-color: var(--accent); }
.cov-key.cov-gap { background: rgba(255, 95, 87, 0.10); border-color: rgba(255, 95, 87, 0.55); }
.cov-key.cov-out { opacity: .38; }

.profit-ad-input { width: 92px; text-align: right; padding: 4px 8px; font-variant-numeric: tabular-nums; }
.tbl td.pos { color: var(--success); font-variant-numeric: tabular-nums; }
.tbl td.neg { color: var(--danger); font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 600; border-top: 2px solid var(--border-color); }

@media (max-width: 720px) {
  .coverage-year { flex-direction: column; align-items: stretch; gap: 4px; }
  .coverage-year-label { width: auto; }
  .cov-cell .cov-val { font-size: 11px; }
}

/* ===== Durable disk persistence ===== */
.persist-card .card-sub { margin-top: 6px; line-height: 1.5; }
.persist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.persist-auto { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.persist-auto .card-sub { margin-top: 0; }
.persist-dot { font-size: 11px; font-weight: 600; }
.persist-dot.ok { color: var(--success); }
.persist-dot.warn { color: var(--warning); }
.persist-dot.off { color: var(--text-muted); }