:root,
[data-theme="dark"] {
  --yellow: #FFE500;
  --black: #000000;
  --green: #3ECF8E;
  --red: #FF5C5C;
  --accent: #FFE500;
  --bg: #0A0A0A;
  --surface: #000000;
  --card: #141414;
  --card2: #1C1C1C;
  --border: #2A2A2A;
  --text: #FFFFFF;
  --text-muted: #9A9A9A;
  --text-soft: #E0E0E0;
  --row-border: #1E1E1E;
  --row-hover: #181818;
  --row-ytd: #191919;
  --highlight-bg: #1a1a10;
  --warn-bg: #3a2a10;
  --warn-border: #5a4a20;
  --success-bg: #0d2018;
  --shadow: rgba(0, 0, 0, 0.35);
  --chart-label: #9A9A9A;
  --chart-grid: #2A2A2A;
  --chart-line-muted: #FFFFFF;
  --kanban-column-body: #111111;
  --kanban-drag-over: #1a1a10;
  --toast-warning-bg: #3a3200;
  --cat-income-bg: #1a2a1a;
  --cat-income-border: #2a4a2a;
  --cat-internal-bg: #1a1a1a;
  --cat-internal-border: #3a3a3a;
  --cat-uncat-bg: #2a2a10;
  --cat-uncat-border: #4a4a20;
  --sticky-shadow: rgba(0, 0, 0, 0.35);
  --touch-target: 44px;
  --ft: 'Manrope', sans-serif;
  --fb: 'Quicksand', sans-serif;
  --theme-transition: 150ms;
  --white: var(--text);
  --grey: var(--text-soft);
  --muted: var(--text-muted);
}

[data-theme="light"] {
  --green: #2E7D32;
  --red: #E53935;
  --bg: #F2F0EF;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card2: #F5F3F2;
  --border: #D8D4D0;
  --text: #2F2F2F;
  --text-muted: #6B6B6B;
  --text-soft: #4A4A4A;
  --row-border: #E8E4E0;
  --row-hover: #EDEAE7;
  --row-ytd: #F0EDEA;
  --highlight-bg: #FFF9D6;
  --warn-bg: #FFF8E1;
  --warn-border: #E6CF00;
  --success-bg: #E8F5E9;
  --shadow: rgba(47, 47, 47, 0.12);
  --chart-label: #6B6B6B;
  --chart-grid: #D8D4D0;
  --chart-line-muted: #2F2F2F;
  --kanban-column-body: #F5F3F2;
  --kanban-drag-over: #FFF9D6;
  --toast-warning-bg: #FFF8E1;
  --cat-income-bg: #E8F5E9;
  --cat-income-border: #A5D6A7;
  --cat-internal-bg: #F0EDEA;
  --cat-internal-border: #D8D4D0;
  --cat-uncat-bg: #FFF8E1;
  --cat-uncat-border: #E6CF00;
  --sticky-shadow: rgba(47, 47, 47, 0.12);
}

html[data-theme-switching] *,
html[data-theme-switching] *::before,
html[data-theme-switching] *::after {
  transition: none !important;
}

/* Print: force light surfaces so P&L tables stay legible / ink-friendly. */
@media print {
  :root,
  html,
  html[data-theme="dark"],
  html[data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --card: #ffffff;
    --card2: #f5f5f5;
    --border: #cccccc;
    --text: #111111;
    --text-muted: #555555;
    --text-soft: #333333;
    --row-border: #dddddd;
    --row-hover: #ffffff;
    --chart-label: #555555;
    --chart-grid: #cccccc;
    --chart-line-muted: #111111;
    color-scheme: light;
  }
  body {
    background: #fff !important;
    color: #111 !important;
  }
  .app-header,
  .nav-tabs,
  .tip-banner-mount,
  [data-theme-toggle],
  .toast-host {
    display: none !important;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-size: 14px;
  min-height: 100vh;
  transition: background-color var(--theme-transition) ease, color var(--theme-transition) ease;
}

h1, h2, h3, h4 { font-family: var(--ft); }

/* App shell sticky header only — never style bare `header{}` (leaks into landing). */
.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 50;
  transition: background-color var(--theme-transition) ease, border-color var(--theme-transition) ease;
}

.logo {
  width: 42px;
  height: 42px;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--ft);
  font-weight: 800;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
}

.app-header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.app-header h1 span { color: var(--yellow); }
.app-header .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.hspace { flex: 1; }

.btn {
  font-family: var(--ft);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  background: var(--yellow);
  color: var(--black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--yellow); color: var(--yellow); opacity: 1; }

nav.app-nav,
nav {
  display: flex;
  gap: 4px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  align-items: stretch;
  transition: background-color var(--theme-transition) ease, border-color var(--theme-transition) ease;
}

nav a,
nav .nav-more > summary {
  font-family: var(--ft);
  font-weight: 700;
  font-size: 13px;
  background: none;
  border: none;
  color: var(--muted);
  padding: 14px 18px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  cursor: pointer;
}
nav a.active,
nav .nav-more > summary.active { color: var(--text); border-bottom-color: var(--yellow); }
nav a:hover,
nav .nav-more > summary:hover { color: var(--text); }

/* Transactions tab + uncategorized badge as siblings (badge is its own link). */
nav .nav-item {
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  min-height: var(--touch-target);
  flex-shrink: 0;
}
nav .nav-item > a[data-nav-tab] {
  border-bottom: none;
  padding-right: 6px;
}
nav .nav-item.active {
  border-bottom-color: var(--yellow);
}
nav .nav-item.active > a[data-nav-tab] {
  color: var(--text);
}
nav .nav-item.nav-locked {
  opacity: .45;
}
nav .nav-item.nav-locked:hover {
  opacity: .7;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-right: 12px;
  padding: 0 5px;
  font-size: 10px;
  font-family: var(--ft);
  font-weight: 700;
  line-height: 1;
  color: var(--bg);
  background: var(--yellow);
  border-radius: 9px;
  vertical-align: middle;
  text-decoration: none;
  border-bottom: none !important;
}
.nav-badge:hover {
  opacity: .9;
  color: var(--bg);
}

/* FR3.3.4 — secondary tabs (Prompts/Review/CdM/Ideas) in More on narrow viewports;
   desktop flattens via display:contents so the full row remains. */
nav .nav-more {
  position: relative;
  flex-shrink: 0;
}
nav .nav-more > summary {
  list-style: none;
}
nav .nav-more > summary::-webkit-details-marker { display: none; }
nav .nav-more-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 160px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px var(--shadow);
}
nav .nav-more-panel a {
  border-bottom: none;
  padding: 12px 16px;
  min-height: var(--touch-target);
}
nav .nav-more-panel a.active {
  color: var(--text);
  background: var(--highlight-bg);
}

@media (min-width: 960px) {
  nav .nav-more {
    display: contents;
  }
  nav .nav-more > summary {
    display: none;
  }
  nav .nav-more-panel {
    display: contents;
    position: static;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  nav .nav-more-panel a {
    padding: 14px 18px;
    border-bottom: 2px solid transparent;
  }
  nav .nav-more-panel a.active {
    background: transparent;
    border-bottom-color: var(--yellow);
  }
}

main { padding: 24px 28px; max-width: 1500px; margin: 0 auto; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.pill b { color: var(--yellow); font-family: var(--ft); }

.placeholder-box {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.placeholder-box h2 {
  color: var(--text);
  font-size: 18px;
  margin-bottom: 8px;
}
.placeholder-box .fr-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: var(--card2);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--yellow);
  font-family: var(--ft);
}

.user-menu { position: relative; }
.user-menu summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--ft);
  font-weight: 700;
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  min-width: 180px;
  z-index: 100;
}
.user-menu .dropdown a,
.user-menu .dropdown span {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--grey);
  text-decoration: none;
  font-size: 13px;
  min-height: var(--touch-target);
}
.user-menu .dropdown a:hover { color: var(--yellow); }
.user-menu .dropdown .logout-form { margin: 0; }
.user-menu .dropdown .logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  color: var(--grey);
  background: none;
  border: none;
  font-family: var(--fb);
  font-size: 13px;
  cursor: pointer;
  min-height: var(--touch-target);
}
.user-menu .dropdown .logout-btn:hover { color: var(--yellow); }
.user-menu .theme-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.user-menu .theme-menu-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--ft);
}
.user-menu .theme-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  font-family: var(--fb);
  font-size: 13px;
  cursor: pointer;
}
.user-menu .theme-menu-toggle:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 10px 12px;
}
.theme-toggle-icon {
  font-size: 16px;
  line-height: 1;
}

/* Language switcher — public + app header */
.lang-switch {
  position: relative;
}
.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card2);
  color: var(--text);
  font-family: var(--fb);
  font-size: 13px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover,
.lang-switch[open] > summary {
  border-color: var(--yellow);
  color: var(--yellow);
}
.lang-switch > summary:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
.lang-switch-current,
.lang-switch-option-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.lang-flag {
  display: block;
  width: 22px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.lang-switch-chevron {
  font-size: 10px;
  line-height: 1;
  opacity: .75;
  transition: transform .15s ease;
}
.lang-switch[open] .lang-switch-chevron { transform: rotate(180deg); }
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.lang-switch-form {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lang-switch-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--touch-target);
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--fb);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.lang-switch-option:hover,
.lang-switch-option:focus-visible {
  background: var(--card2);
  outline: none;
}
.lang-switch-option.is-active {
  background: var(--card2);
  color: var(--yellow);
}
.lang-switch-option-label { flex: 1; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.badge-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--ft);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--warn-bg);
  color: var(--yellow);
  border: 1px solid var(--warn-border);
  vertical-align: middle;
}

.txn-panel { display: flex; flex-direction: column; gap: 16px; }
.txn-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.txn-search { min-width: 200px; flex: 1; }
.txn-hint { font-size: 12px; }
.txn-date-label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.txn-date { width: 140px; }
.txn-counter-pill {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 229, 0, .12);
  border: 1px solid rgba(255, 229, 0, .35);
  font-family: var(--ft);
  font-size: 13px;
  font-weight: 700;
}
.txn-counter-hint {
  font-size: 11px;
  max-width: 160px;
  line-height: 1.25;
}
.txn-category-filter { position: relative; }
.txn-category-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow);
}
.txn-category-list { display: flex; flex-direction: column; gap: 6px; }
.txn-cat-check { font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: var(--touch-target); padding: 4px 0; }
.txn-list-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.sticky-col { position: sticky; left: 0; z-index: 1; background: var(--card); }
thead .sticky-col { z-index: 2; background: var(--card2); }
tr:hover td.sticky-col,
tr:hover .sticky-col { background: var(--row-hover); }
.ytd-row td.sticky-col,
.ytd-row .sticky-col { background: var(--row-ytd); }
.sticky-col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  transform: translateX(100%);
  background: linear-gradient(to right, var(--sticky-shadow), transparent);
  pointer-events: none;
}
.txn-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--card); }
.txn-table thead .sticky-col { z-index: 2; background: var(--card2); }
.txn-table tr:hover td.sticky-col { background: var(--row-hover); }
.txn-table .sticky-col::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 8px; transform: translateX(100%); background: linear-gradient(to right, var(--sticky-shadow), transparent); pointer-events: none; }
.txn-table td b { font-family: var(--ft); }
.txn-table .num { text-align: right; font-family: var(--ft); white-space: nowrap; }
.txn-table .pos { color: var(--green); }
.txn-table .neg { color: var(--red); }
.txn-table .err { color: var(--red); }
.txn-table .txn-desc { max-width: 280px; word-break: break-word; }
.txn-type-badge { font-size: 10px; letter-spacing: 0.4px; margin-left: 4px; vertical-align: middle; }
.txn-table .txn-account { font-size: 12px; max-width: 140px; }
.txn-file-ref {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.txn-cat-cell { min-width: 180px; }
.txn-cat-pill {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card2);
  max-width: 200px;
}
.txn-cat-pill.income { border-color: var(--cat-income-border); background: var(--cat-income-bg); }
.txn-cat-pill.expense { border-color: var(--border); background: var(--card2); }
.txn-cat-pill.internal { border-color: var(--cat-internal-border); background: var(--cat-internal-bg); opacity: 0.85; }
.txn-cat-pill.uncategorized { border-color: var(--cat-uncat-border); background: var(--cat-uncat-bg); }
.txn-cat-select {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--grey);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23888' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}
.txn-cat-pill.income .txn-cat-select { color: var(--green); }
.txn-cat-pill.expense .txn-cat-select { color: var(--grey); }
.txn-cat-pill.internal .txn-cat-select { color: var(--muted); }
.txn-cat-pill.uncategorized .txn-cat-select { color: var(--yellow); }
.txn-rule-check { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; margin-top: 4px; }
.txn-sort {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-family: var(--ft);
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.txn-sort.active { color: var(--accent); }
.txn-pagination { display: flex; align-items: center; gap: 12px; justify-content: center; }

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: 420px;
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--ft);
  font-weight: 700;
  padding: 12px 14px;
  font-size: 13px;
  border: 1px solid var(--border);
  animation: toast-in .2s ease;
}
.toast-item.toast-error { background: var(--red); color: var(--white); }
.toast-item.toast-warning { background: var(--toast-warning-bg); color: var(--yellow); border-color: var(--yellow); }
.toast-item.toast-info { background: var(--card2); color: var(--text); }
.toast-item.toast-success { background: var(--yellow); color: var(--black); }
.toast-icon { font-weight: 800; flex-shrink: 0; line-height: 1.3; }
.toast-body { flex: 1; line-height: 1.4; }
.toast-body a { color: inherit; text-decoration: underline; }
.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  padding: 0;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast-close:hover { opacity: 1; }
.toast-dismiss { opacity: 0; transform: translateX(12px); transition: all .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* FR12 — proactive tips banner */
.tip-banner-mount {
  padding: 0 var(--pad, 16px);
  margin: 0 auto;
  max-width: var(--maxw, 1400px);
}
.tip-banner-mount[hidden] { display: none !important; }
.tip-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--border));
  background: color-mix(in srgb, var(--yellow) 8%, var(--card));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--yellow) 20%, transparent);
  animation: tip-banner-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tip-banner-accent {
  width: 4px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--yellow);
  flex-shrink: 0;
}
.tip-banner-body { flex: 1; min-width: 0; }
.tip-banner-title {
  margin: 0 0 4px;
  font-family: var(--ft);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.tip-banner-content {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.tip-banner-content p { margin: 0 0 6px; }
.tip-banner-content p:last-child { margin-bottom: 0; }
.tip-banner-content ul { margin: 0 0 6px 1.1rem; padding: 0; }
.tip-banner-content a { color: var(--yellow); text-decoration: underline; }
.tip-banner-content code {
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--card2);
}
.tip-banner-dismiss {
  flex-shrink: 0;
  min-width: var(--touch-target, 44px);
  min-height: var(--touch-target, 44px);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}
.tip-banner-dismiss:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
}
@keyframes tip-banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* legacy single toast id — kept for backward compat */
#toast {
  display: none !important;
}

.pill-stale { border-color: var(--red); color: var(--red); }
.pill-stale b { color: var(--red); }
.fx-source {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-left: 4px;
}
.fx-stale { color: var(--red); font-weight: 700; }

.btn.loading { opacity: .65; cursor: wait; }
.btn.loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.user-menu .dropdown .muted {
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}

.dropzone{border:2px dashed var(--border);padding:48px;text-align:center;color:var(--muted);cursor:pointer;transition:all .2s;background:var(--card)}
.dropzone.over{border-color:var(--yellow);color:var(--yellow);background:var(--highlight-bg)}
.dropzone b{color:var(--text);font-family:var(--ft)}
.dropzone-hint{font-size:12px}
.upload-progress{margin-top:16px;text-align:left}
.upload-progress-bar{height:6px;background:var(--yellow);width:0;transition:width .2s;margin-bottom:6px}
.files-toolbar{display:flex;align-items:center;gap:10px;margin:16px 0}
.source-type-select{background:var(--card2);border:1px solid var(--border);color:var(--text);padding:8px 10px;font-family:var(--fb);min-height:var(--touch-target)}
.filelist{margin-top:8px;display:flex;flex-direction:column;gap:10px}
.fileitem{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);padding:14px 18px}
.fileitem-body{flex:1;min-width:0}
.fileitem .fname{font-weight:600;word-break:break-word}
.fileitem .fmeta{color:var(--muted);font-size:12px;margin-top:2px}
.fileitem-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.file-source-label{cursor:pointer;border-bottom:1px dashed var(--border);color:var(--text)}
.file-source-label:hover{color:var(--yellow);border-color:var(--yellow)}
.files-dialog{border:none;padding:0;background:transparent;max-width:min(720px,calc(100vw - 32px));width:100%}
.files-dialog::backdrop{background:rgba(0,0,0,.55)}
.files-dialog-inner{background:var(--card);border:1px solid var(--border);padding:20px}
.files-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.files-dialog-header h3{margin:0;font-family:var(--ft);font-size:18px}
.files-dialog-sub{font-size:13px;margin:0 0 12px}
.files-dialog-table-wrap{overflow-x:auto;max-height:50vh;-webkit-overflow-scrolling:touch}
.files-duplicates-table{width:100%;border-collapse:collapse;font-size:13px}
.files-duplicates-table th,.files-duplicates-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}
.files-duplicates-table th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
.ficon{width:36px;height:36px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-weight:800;font-size:10px;color:var(--yellow);flex-shrink:0}
.btn.small{padding:8px 14px;font-size:12px;min-height:var(--touch-target)}
.btn.danger{border-color:var(--red);color:var(--red)}
.muted{color:var(--muted)}
.err-text{color:var(--red)}

.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 12px;
}
.login-lang {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: flex-end;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.login-box {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}
.login-box h1 { margin-bottom: 24px; font-size: 22px; }
.login-box label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.login-box input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  margin-bottom: 16px;
  font-family: var(--fb);
}
.login-box .error { color: var(--red); font-size: 13px; margin-bottom: 12px; }
.login-box .login-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin-bottom: 20px; }
.login-box .login-links { margin-top: 20px; font-size: 13px; }
/* Dark theme: yellow accent links on dark card. */
.login-box .login-links a { color: var(--yellow); text-decoration: none; }
.login-box .login-links a:hover { text-decoration: underline; }
/* Light theme: yellow-on-white is unreadable — use near-black. */
[data-theme="light"] .login-box .login-links a { color: var(--text); }
[data-theme="light"] .login-box .login-links a:hover { color: var(--text-soft); }

/* Ideas board (FR14) */
.ideas-main { max-width: 960px; }
.card-panel {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 24px;
}
.ideas-submit h2,
.ideas-board h2 { font-size: 18px; margin-bottom: 16px; }
.ideas-submit label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 6px;
}
.ideas-submit input,
.ideas-submit textarea,
.ideas-sort select {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--fb);
}
.ideas-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.ideas-hint { font-size: 12px; margin-top: 12px; }
.ideas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ideas-sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.ideas-sort select { width: auto; min-width: 140px; }
.ideas-list { display: flex; flex-direction: column; gap: 16px; }
.idea-card-top { display: flex; gap: 16px; }
.vote-btn {
  flex-shrink: 0;
  width: 64px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-family: var(--ft);
  transition: border-color .15s, color .15s;
}
.vote-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.vote-btn.voted { border-color: var(--yellow); background: var(--highlight-bg); color: var(--yellow); }
.vote-btn.readonly { cursor: default; }
.vote-count { font-size: 20px; font-weight: 800; line-height: 1; }
.vote-label { font-size: 10px; margin-top: 4px; text-transform: uppercase; }
.idea-body { flex: 1; min-width: 0; }
.idea-body h3 { font-size: 16px; margin-bottom: 8px; }
.idea-description { color: var(--grey); line-height: 1.55; margin-bottom: 8px; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.status-badge {
  font-family: var(--ft);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.status-open { color: var(--green); border-color: var(--green); }
.status-under-review { color: var(--yellow); border-color: var(--yellow); }
.status-planned { color: #6eb5ff; border-color: #6eb5ff; }
.status-shipped { color: var(--green); background: var(--success-bg); }
.status-declined { color: var(--red); border-color: var(--red); }
.pending-badge {
  font-size: 11px;
  color: var(--muted);
  border: 1px dashed var(--border);
  padding: 3px 8px;
}
.developed-badge {
  font-size: 11px;
  color: var(--green);
  background: var(--success-bg);
  border: 1px solid var(--green);
  padding: 3px 8px;
  font-family: var(--ft);
  font-weight: 700;
  text-transform: uppercase;
}
.idea-attachment { font-size: 13px; margin-bottom: 8px; }
.idea-attachment a { color: var(--yellow); }
.category-tag {
  font-size: 11px;
  color: var(--yellow);
  background: var(--highlight-bg);
  padding: 3px 8px;
}
.idea-admin-comment {
  font-size: 13px;
  color: var(--grey);
  background: var(--card2);
  border-left: 3px solid var(--yellow);
  padding: 8px 12px;
  margin-bottom: 8px;
}
.idea-author { font-size: 12px; }
.idea-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.hidden { display: none !important; }

.card, .chartbox, .settings-section, .tablewrap, .pill, .fileitem, .card-panel, .kanban-column, .pipeline-card, .login-box, .txn-list-wrap {
  transition: background-color var(--theme-transition) ease, border-color var(--theme-transition) ease, color var(--theme-transition) ease;
}

@media (max-width: 768px) {
  main { padding: 16px; }
  .app-header {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .app-header .sub { font-size: 11px; }
  .app-header .pill { display: none; }
  .app-header .btn.ghost { padding: 8px 12px; font-size: 12px; }
  .app-header .btn:not(.ghost) { padding: 8px 12px; font-size: 12px; }
  nav { padding: 0 12px; -webkit-overflow-scrolling: touch; }
  nav a,
  nav .nav-more > summary { padding: 12px 14px; font-size: 12px; }
  .hspace { flex-basis: 100%; height: 0; order: 3; }
  .user-menu { order: 4; margin-left: auto; }
  .app-header .lang-switch { order: 2; }
  .app-header .theme-toggle { order: 3; }
  .logo { width: 36px; height: 36px; font-size: 22px; }
  .app-header h1 { font-size: 17px; }
}

/* CRM & Pipeline (FR11) */
.crm-panel, .pipeline-panel { display: flex; flex-direction: column; gap: 16px; }
.crm-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.crm-toolbar-left, .crm-toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crm-input, .crm-select, .crm-modal textarea {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--fb);
  font-size: 13px;
  min-height: var(--touch-target);
}
.crm-input-sm { width: 90px; }
.crm-select { min-width: 140px; }
.view-toggle .btn.active { border-color: var(--yellow); color: var(--yellow); }

.kanban-board {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px;
  min-height: 480px; align-items: flex-start; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.kanban-column {
  flex: 0 0 280px; background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column; max-height: 72vh; border-radius: 2px;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.kanban-column-header {
  padding: 12px 14px 10px; font-family: var(--ft); font-size: 13px;
  border-top: 3px solid var(--stage-color, var(--yellow));
  cursor: grab; background: var(--card);
}
.kanban-column-header.dragging { opacity: .6; cursor: grabbing; }
.kanban-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kanban-stage-name {
  font-weight: 700; line-height: 1.3; flex: 1;
  border-radius: 2px; padding: 1px 4px; margin: -1px -4px;
}
.kanban-stage-menu { position: relative; flex-shrink: 0; }
.kanban-stage-menu-btn {
  width: var(--touch-target); height: var(--touch-target); border: none; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kanban-stage-menu-btn:hover { color: var(--yellow); }
.kanban-stage-menu-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 20; min-width: 140px;
  background: var(--card2); border: 1px solid var(--border); box-shadow: 0 4px 12px var(--shadow);
  display: flex; flex-direction: column; padding: 4px 0;
}
.kanban-stage-menu-dropdown[hidden] { display: none !important; }
.kanban-stage-menu-dropdown button {
  background: transparent; border: none; color: var(--text); text-align: left;
  padding: 8px 12px; font-size: 13px; cursor: pointer; font-family: var(--fb);
  min-height: var(--touch-target);
}
.kanban-stage-menu-dropdown button:hover { background: var(--card); color: var(--yellow); }
.kanban-stage-menu-dropdown button.danger { color: var(--red); }
.kanban-stage-menu-dropdown button.danger:hover { background: rgba(255, 92, 92, .1); color: var(--red); }
.kanban-column.drag-over-stage { outline: 2px dashed var(--yellow); outline-offset: -2px; }
.kanban-stage-rename-input {
  flex: 1; min-width: 0; font: inherit; font-weight: 700; font-size: 13px;
  font-family: var(--ft); line-height: 1.3; color: inherit; background: var(--card2);
  border: 1px solid var(--yellow); padding: 1px 4px; border-radius: 2px; outline: none;
}
.kanban-add-btn {
  width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--border); background: var(--card2);
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.kanban-add-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.kanban-progress-track {
  height: 3px; background: var(--border); margin: 8px 0 6px; border-radius: 2px; overflow: hidden;
}
.kanban-progress-fill { height: 100%; background: var(--stage-color, var(--yellow)); opacity: .7; transition: width .2s; }
.kanban-header-value { font-size: 12px; color: var(--muted); text-align: right; font-family: var(--ft); }
.kanban-column-body { padding: 8px 10px 10px; overflow-y: auto; flex: 1; min-height: 100px; background: var(--kanban-column-body); }
.kanban-column-body.drag-over { background: var(--kanban-drag-over); outline: 1px dashed var(--yellow); }
.kanban-card {
  background: #fff; color: #1a1a1a; border: 1px solid #e0e0e0; padding: 10px 12px;
  margin-bottom: 8px; cursor: grab; transition: box-shadow .15s, opacity .15s; border-radius: 2px;
}
.kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.kanban-card.dragging { opacity: .5; }
.kanban-card-title { font-weight: 600; font-size: 13px; line-height: 1.35; color: #1a1a1a; margin-bottom: 4px; }
.kanban-card-value { font-size: 12px; color: #555; margin-bottom: 8px; }
.kanban-card-person { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kanban-avatar {
  width: 22px; height: 22px; background: #FF8C42; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kanban-card-name { font-size: 12px; color: #333; }
.kanban-card-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kanban-card-meta .tag-pill, .kanban-card-meta .days-pill {
  font-size: 10px; padding: 2px 6px; background: #f5f5f5; border: 1px solid #e0e0e0; color: #666;
}
.kanban-card-meta .days-pill { color: #888; }
.source-badge {
  margin-left: auto; width: 18px; height: 18px; background: #4A90D9; color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.kanban-add-column {
  flex: 0 0 200px; background: transparent; border: 1px dashed var(--border);
  min-height: 120px; display: flex; align-items: flex-start; justify-content: center; padding-top: 24px;
}
.kanban-add-stage-btn {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px;
  font-family: var(--fb); padding: 12px;
}
.kanban-add-stage-btn .plus { font-size: 28px; line-height: 1; color: var(--yellow); }
.kanban-add-stage-btn:hover { color: var(--text); }
.tag-pill, .days-pill {
  font-size: 10px; padding: 2px 6px; background: var(--card); border: 1px solid var(--border);
  color: var(--muted);
}
.days-pill { color: var(--yellow); border-color: var(--cat-uncat-border); }
.kanban-empty { font-size: 12px; padding: 8px 0; }

.crm-list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crm-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); }
.crm-table th, .crm-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.crm-table th { font-family: var(--ft); color: var(--muted); font-size: 11px; text-transform: uppercase; }
.crm-list-row { cursor: pointer; }
.crm-list-row:hover { background: var(--card2); }

.crm-modal {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 24px; max-width: 480px; width: 95%;
}
.crm-modal::backdrop { background: rgba(0,0,0,.7); }
.crm-modal label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.crm-modal .crm-input, .crm-modal .crm-select, .crm-modal textarea { width: 100%; margin-top: 4px; }
.crm-modal h3 { margin-bottom: 16px; font-size: 18px; }
.crm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.crm-import-steps { margin: 0 0 16px 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.crm-import-steps li { margin-bottom: 6px; }
.crm-import-template { margin-bottom: 16px; }
.crm-import-dropzone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 28px 16px; text-align: center;
  cursor: pointer; background: var(--card2); transition: border-color .15s, background .15s;
}
.crm-import-dropzone:hover, .crm-import-dropzone:focus-visible, .crm-import-dropzone.drag-over {
  border-color: var(--yellow); background: rgba(255, 229, 0, .05); outline: none;
}
.crm-import-dropzone.has-file { border-style: solid; border-color: var(--yellow); }
.crm-import-dropzone-label { margin: 0; font-size: 13px; color: var(--muted); }
.crm-import-filename { margin: 8px 0 0; font-size: 12px; }
.crm-import-errors {
  margin-top: 12px; padding: 10px 12px; font-size: 12px; color: var(--red);
  background: rgba(255, 92, 92, .08); border: 1px solid rgba(255, 92, 92, .3);
  white-space: pre-wrap;
}
.crm-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; font-size: 13px; }
.timeline { max-height: 240px; overflow-y: auto; margin: 12px 0; }
.timeline-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.timeline-type { font-family: var(--ft); font-size: 11px; color: var(--yellow); text-transform: uppercase; }
.note-add { display: flex; gap: 8px; margin-top: 12px; }
.note-add .crm-input { flex: 1; }

.pipeline-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-start; }
.pipeline-header h2 { font-size: 20px; }
.pipeline-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pipeline-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pipeline-card {
  background: var(--card); border: 1px solid var(--border); padding: 18px;
  border-left: 4px solid var(--phase-color, var(--yellow));
}
.pipeline-card.status-green { border-left-color: var(--green); }
.pipeline-card.status-yellow { border-left-color: #E6C200; }
.pipeline-card.status-red { border-left-color: var(--red); }
.pipeline-card.status-grey { border-left-color: var(--muted); }
.pipeline-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.phase-num {
  width: 28px; height: 28px; background: var(--card2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ft); font-weight: 800; font-size: 12px; color: var(--yellow);
}
.pipeline-day-cycle { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.pipeline-metrics { display: flex; flex-direction: column; gap: 8px; }
.metric-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.metric-row span { flex: 1; color: var(--muted); }
.metric-row b { font-family: var(--ft); min-width: 48px; text-align: right; }
.pipeline-extra { margin-top: 12px; font-size: 11px; }
.pipeline-post-metrics { font-size: 12px; padding: 8px 12px; background: var(--card2); border: 1px solid var(--border); }

@media (max-width: 768px) {
  .crm-detail-grid { grid-template-columns: 1fr; }
  .kanban-board {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }
  .kanban-column { flex: 0 0 min(85vw, 280px); }
  .kanban-add-column { flex: 0 0 min(50vw, 200px); }
  .settings-month-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-form-grid { grid-template-columns: 1fr; }
  .chartgrid { grid-template-columns: 1fr; }
}

/* Settings tab (FR8) */
.settings-panel { display: flex; flex-direction: column; gap: 28px; }
.settings-storage-note {
  padding: 12px 16px; background: var(--card2); border: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.settings-section {
  background: var(--card); border: 1px solid var(--border); padding: 20px 22px;
}
.settings-section h2 { font-size: 16px; margin-bottom: 10px; }
.settings-section.settings-danger { border-color: rgba(255, 92, 92, .35); }
.settings-note { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.settings-input-sm { width: 100px; }
.settings-month-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px;
}
.settings-month-cell { display: flex; flex-direction: column; gap: 4px; }
.settings-month-label { font-size: 12px; color: var(--muted); font-family: var(--ft); font-weight: 700; }
.settings-month-input-row { display: flex; gap: 6px; align-items: center; }
.settings-month-input { width: 100%; }
.settings-copy-btn { padding: 6px 8px; min-width: var(--touch-target); min-height: var(--touch-target); }
.settings-actions { margin-top: 14px; }
.settings-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}
.settings-file-btn { cursor: pointer; margin: 0; }
.settings-reset-note { margin-top: 8px; }
.badge-carry, .badge-manual {
  display: inline-block; margin-left: 4px; padding: 1px 5px; font-size: 9px;
  font-family: var(--ft); font-weight: 700; text-transform: uppercase; vertical-align: middle;
}
.badge-carry { background: var(--success-bg); color: var(--green); border: 1px solid var(--green); }
.badge-manual { background: var(--highlight-bg); color: var(--yellow); border: 1px solid var(--warn-border); }
.settings-form-grid {
  display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; align-items: center; margin-top: 12px;
}
.settings-span-2 { grid-column: 1 / -1; }
.settings-check-label { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--text); font-size: 13px; }
.settings-rules-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
.settings-test-row { display: flex; gap: 8px; flex: 1; min-width: 200px; }
.settings-test-row .crm-input { flex: 1; }
.settings-test-results {
  margin: 8px 0 12px; padding: 12px; background: var(--card2); border: 1px solid var(--border); font-size: 13px;
}
.settings-test-results ul { margin: 8px 0 0 18px; color: var(--muted); }
.settings-rules-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settings-rules-table .settings-priority-input { width: 72px; }
.settings-rule-actions { white-space: nowrap; }
.settings-subheading { font-size: 14px; margin: 20px 0 10px; color: var(--muted); font-family: var(--ft); }
.settings-readonly { font-family: var(--ft); font-weight: 700; margin: 0; padding: 8px 0; }
.settings-fx-table { font-size: 13px; }
.settings-fx-table td, .settings-fx-table th { white-space: nowrap; }
.webhook-delivery-log { font-size: 13px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.webhook-log-row { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.webhook-log-status { font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.webhook-log-delivered { color: var(--green); }
.webhook-log-failed { color: var(--red); }
.webhook-log-skipped { color: var(--muted); }
.webhook-log-summary { color: var(--text); }
.webhook-log-meta { font-size: 12px; }

/* Dashboard (FR4) */
.controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.controls label{color:var(--muted);font-size:12px;font-weight:600}
.controls select{background:var(--card2);border:1px solid var(--border);color:var(--text);font-family:var(--fb);padding:8px 12px;font-size:13px;outline:none}
.controls select:focus{border-color:var(--yellow)}
.dash-toggle{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.dash-empty{background:var(--card);border:1px solid var(--border);padding:32px;text-align:center;margin-bottom:20px}
.dash-empty p{color:var(--muted);margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:24px}
.card{background:var(--card);border:1px solid var(--border);padding:20px;text-decoration:none;color:inherit;display:block}
.card .lbl{font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.card .val{font-family:var(--ft);font-weight:800;font-size:28px;margin-top:8px;letter-spacing:-0.5px}
.card .val.pos{color:var(--green)} .card .val.neg{color:var(--red)} .card .val.yellow{color:var(--yellow)}
.card .sub{color:var(--muted);font-size:12px;margin-top:6px}
.card.hl{border-top:3px solid var(--yellow)}
.card-delta{margin-left:8px;font-size:10px;font-weight:700}
.tax-tag{color:var(--yellow);font-weight:600}
.sec{font-family:var(--ft);font-size:16px;font-weight:800;margin:24px 0 12px;text-transform:uppercase;letter-spacing:.5px}
.sec span{color:var(--yellow)}
.chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;margin-bottom:24px}
.chartbox{background:var(--card);border:1px solid var(--border);padding:16px}
.chartbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
.chartbox h3{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin:0;color:var(--grey)}
.chartbox h3 em{color:var(--muted);font-style:normal;font-weight:500;font-size:11px;text-transform:none}
.chartbox .cwrap{position:relative;height:220px}
.chart-dl{gap:4px;min-width:auto;padding:6px 10px;font-weight:700}
.chart-dl-icon{font-size:14px;line-height:1;font-weight:800}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);-webkit-overflow-scrolling:touch}
.tablewrap table{border-collapse:collapse;width:100%;font-size:13px}
.tablewrap th{font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--card2)}
.tablewrap td{padding:8px 12px;border-bottom:1px solid var(--row-border);white-space:nowrap}
.tablewrap tr:hover td{background:var(--row-hover)}
.tablewrap td.num,.tablewrap th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap .pos{color:var(--green)} .tablewrap .neg{color:var(--red)} .tablewrap .yellow{color:var(--yellow)}
.tablewrap .ytd-row td{background:var(--row-ytd);border-top:2px solid var(--yellow)}
.tablewrap .sticky-col{position:sticky;left:0;z-index:1;background:var(--card)}
.tablewrap thead .sticky-col{z-index:2;background:var(--card2)}
.tablewrap tr:hover td.sticky-col{background:var(--row-hover)}
.tablewrap .ytd-row td.sticky-col{background:var(--row-ytd)}
.tablewrap .sticky-col::after{content:"";position:absolute;top:0;right:0;bottom:0;width:8px;transform:translateX(100%);background:linear-gradient(to right,var(--sticky-shadow),transparent);pointer-events:none}

/* KPIs (FR5) */
.kpis-heading{margin-top:0}
.kpis-hint{font-size:11px;text-transform:none;font-weight:500}
.kpis-scroll{max-height:75vh;overflow:auto;-webkit-overflow-scrolling:touch}
.kpitable td,.kpitable th{padding:10px 12px;font-size:12px}
.kpitable td{vertical-align:middle}
.kpitable .kname{font-weight:600;color:var(--text);white-space:normal;min-width:200px}
.kpitable .obj{color:var(--muted);font-size:11px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:3px;margin-top:5px}
.kpitable .res{font-family:var(--ft);font-weight:800;font-size:14px;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.kpitable .res.met,.kpitable .res.miss{display:inline-block;padding:2px 7px;border-radius:4px}
.kpitable .met{color:var(--green);background:var(--success-bg)}
.kpitable .miss{color:var(--red);background:rgba(255,92,92,.1)}
.kpitable input{width:76px;padding:3px 6px;font-size:12px;text-align:right;font-variant-numeric:tabular-nums;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-muted);transition:border-color .12s ease,background .12s ease}
.kpitable input:hover{border-color:var(--border);background:var(--card2)}
.kpitable input:focus{border-color:var(--yellow);background:var(--card2);color:var(--text);outline:none}
.kpitable input[type=number]{appearance:textfield;-moz-appearance:textfield}
.kpitable input::-webkit-outer-spin-button,.kpitable input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kpitable input.kpi-reason-input{width:100px;text-align:left}
.kpitable .annual{background:var(--row-ytd);border-left:2px solid var(--yellow)}
.kpitable .annual.res{font-size:14px}
.kpitable thead th{position:sticky;top:0;z-index:2;background:var(--card2)}
.kpi-sticky-col{position:sticky;left:0;z-index:3;background:var(--card)}
.kpi-sticky-col2{position:sticky;left:36px;z-index:3;background:var(--card);min-width:200px}
.kpitable thead .kpi-sticky-col,.kpitable thead .kpi-sticky-col2{z-index:4;background:var(--card2)}
.kpitable .kpi-sticky-col2::after{content:"";position:absolute;top:0;right:0;bottom:0;width:8px;transform:translateX(100%);background:linear-gradient(to right,var(--sticky-shadow),transparent);pointer-events:none}
.kpitable tr:hover .kpi-sticky-col,.kpitable tr:hover .kpi-sticky-col2{background:var(--row-hover)}

/* FR3.3 — charts reflow below 768px handled in @media (max-width: 768px) above */

.txn-bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--highlight-bg); border: 1px solid var(--warn-border);
}
.txn-check-col { width: 36px; text-align: center; }
.txn-date-col { min-width: 110px; }
.kpis-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; align-items: center; }
/* JS toggles these panels via the hidden attribute; explicit display rules
   above would otherwise win over the UA's [hidden] { display: none }. */
.kpis-toolbar[hidden],
.kpi-wizard-banner[hidden],
.kpi-proyeccion-gate[hidden],
.kpi-margin-bar-card[hidden],
.kpi-suggested[hidden],
.kpi-empty[hidden],
.kpi-loading[hidden],
.kpi-suggest-row[hidden],
.kpi-proyeccion-summary[hidden],
.kpis-scroll[hidden],
.chartgrid[hidden] { display: none !important; }
.settings-debt-chart-wrap { margin: 16px 0; height: 140px; }
.settings-mcp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.settings-mcp-reveal { margin: 12px 0; padding: 12px; background: var(--card2); border: 1px solid var(--border); }
.settings-mcp-key { display: block; word-break: break-all; margin-top: 8px; }
.settings-mcp-keys { list-style: none; padding: 0; margin: 12px 0 0; }
.settings-mcp-keys li { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.files-timeline-group { margin-bottom: 20px; }
.files-timeline-month {
  font-family: var(--ft); font-size: 13px; color: var(--yellow); margin: 0 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.idea-release-note a { color: var(--yellow); font-weight: 600; }

/* ============ Onboarding — wizard + getting-started checklist ============ */

.onb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: onb-fade-in .25s ease;
}
@keyframes onb-fade-in { from { opacity: 0; } to { opacity: 1; } }

body.onb-open { overflow: hidden; }

.onb-card {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--yellow);
  box-shadow: 0 24px 64px var(--shadow);
  padding: 32px 36px 36px;
  animation: onb-rise .35s cubic-bezier(.2, .8, .3, 1);
}
@keyframes onb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.onb-busy .onb-card { opacity: .6; pointer-events: none; }

.onb-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.onb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background .2s, transform .2s;
}
.onb-dot.active { background: var(--yellow); transform: scale(1.35); }
.onb-dot.past { background: var(--yellow); opacity: .45; }

.onb-step { animation: onb-step-in .28s ease; }
@keyframes onb-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.onb-center { text-align: center; }

.onb-logo {
  width: 56px; height: 56px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--black);
  font-family: var(--ft); font-weight: 800; font-size: 28px;
}

.onb-card h2 { font-family: var(--ft); font-size: 22px; margin: 0 0 8px; color: var(--text); }
.onb-sub { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }

.onb-perks { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; display: inline-block; }
.onb-perks li { padding: 6px 0; color: var(--text-soft); font-size: 14px; }

.onb-primary { width: 100%; font-size: 14px; }
.onb-skip {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-family: var(--fb);
  min-height: var(--touch-target);
}
.onb-skip:hover { color: var(--text); text-decoration: underline; }

.onb-label { display: block; font-family: var(--ft); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 6px; }
.onb-input {
  width: 100%; padding: 12px 14px; font-size: 14px; font-family: var(--fb);
  background: var(--card2); color: var(--text);
  border: 1px solid var(--border); min-height: var(--touch-target);
}
.onb-input:focus { outline: none; border-color: var(--yellow); }
.onb-tax-row { display: flex; align-items: center; gap: 8px; }
.onb-tax { max-width: 120px; }
.onb-tax-pct { color: var(--text-muted); font-size: 14px; }
.onb-hint { color: var(--text-muted); font-size: 12px; margin: 6px 0 0; }

.onb-fx-row { display: flex; gap: 10px; margin-bottom: 4px; }
.onb-fx {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 10px 14px; border: 1px solid var(--border); background: var(--card2);
  font-family: var(--ft); font-size: 13px; font-weight: 700; color: var(--text-soft);
  min-height: var(--touch-target);
}
.onb-fx:has(input:checked) { border-color: var(--yellow); color: var(--text); background: var(--highlight-bg); }
.onb-fx input { accent-color: var(--yellow); }

.onb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.onb-nav .onb-primary { width: auto; flex: 1; }
.onb-nav .onb-skip { width: auto; margin: 0; }
.onb-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-family: var(--fb);
  min-height: var(--touch-target); padding: 0 6px;
}
.onb-back:hover { color: var(--text); }

.onb-choices { display: grid; gap: 12px; }
.onb-choice {
  display: block; text-align: left; cursor: pointer;
  padding: 18px; background: var(--card2);
  border: 1px solid var(--border);
  transition: border-color .15s, transform .15s;
}
.onb-choice:hover { border-color: var(--yellow); transform: translateY(-2px); }
.onb-choice.selected { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.onb-choice-icon { font-size: 22px; display: block; margin-bottom: 8px; }
.onb-choice-title { display: flex; align-items: center; gap: 8px; font-family: var(--ft); font-weight: 700; font-size: 15px; color: var(--text); }
.onb-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--yellow); color: var(--black); padding: 2px 7px;
}
.onb-choice-sub { display: block; margin-top: 6px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.onb-check { width: 72px; height: 72px; margin: 0 auto 18px; }
.onb-check svg { width: 100%; height: 100%; }
.onb-check circle {
  stroke: var(--yellow); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: onb-draw .5s ease forwards;
}
.onb-check path {
  stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: onb-draw .35s ease .45s forwards;
}
@keyframes onb-draw { to { stroke-dashoffset: 0; } }

/* Checklist card on the dashboard */
.onb-checklist {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  padding: 18px 22px 20px;
  margin-bottom: 22px;
}
.onb-checklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.onb-checklist-head h3 { font-family: var(--ft); font-size: 15px; margin: 0 0 2px; color: var(--text); }
.onb-checklist-count { color: var(--text-muted); font-size: 12px; }
.onb-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 20px; line-height: 1;
  min-width: var(--touch-target); min-height: var(--touch-target);
}
.onb-dismiss:hover { color: var(--text); }

.onb-progress { height: 4px; background: var(--border); margin: 10px 0 14px; overflow: hidden; }
.onb-progress-bar { height: 100%; background: var(--yellow); transition: width .4s cubic-bezier(.2, .8, .3, 1); }

.onb-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.onb-steps li {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto auto;
  align-items: center; column-gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--row-border);
}
.onb-steps li:last-child { border-bottom: none; }
.onb-step-mark {
  grid-row: 1 / span 3;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--black);
}
.onb-steps li.done .onb-step-mark { background: var(--green); border-color: var(--green); }
.onb-steps li.locked .onb-step-mark {
  background: transparent; border-color: var(--border); font-size: 10px; opacity: .75;
}
.onb-step-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.onb-step-label { font-family: var(--ft); font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
a.onb-step-label:hover { color: var(--yellow); }
.onb-steps li.done .onb-step-label { color: var(--text-muted); text-decoration: line-through; }
.onb-steps li.locked {
  opacity: .55;
  cursor: not-allowed;
}
.onb-steps li.locked .onb-step-locked-label {
  color: var(--text-muted);
  pointer-events: none;
}
.onb-steps li.locked .onb-step-desc { color: var(--text-muted); font-style: italic; }
.onb-step-desc { grid-column: 2; color: var(--text-muted); font-size: 12px; }
.onb-step-ack {
  grid-column: 2;
  margin-top: 4px;
  align-self: start;
  width: fit-content;
  background: none; border: 1px solid var(--border);
  color: var(--text-soft); font-size: 12px; font-family: var(--ft); font-weight: 600;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  min-height: var(--touch-target);
}
.onb-step-ack:hover { border-color: var(--yellow); color: var(--text); }
.onb-step-tip { margin-left: 2px; }
.onb-steps .dash-tip-pop { width: 240px; left: auto; right: 0; }

.onb-demo-note {
  margin-top: 14px; padding: 10px 12px;
  background: var(--highlight-bg); border: 1px solid var(--warn-border);
  color: var(--text-soft); font-size: 13px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.onb-demo-clear {
  background: none; border: none; cursor: pointer;
  color: var(--yellow); font-weight: 700; font-size: 13px; font-family: var(--ft);
  text-decoration: underline; min-height: var(--touch-target);
}
.onb-goal-extra {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--row-border);
  font-size: 13px; color: var(--text-soft);
}
.onb-goal-extra strong { display: block; margin-bottom: 6px; font-family: var(--ft); color: var(--text); }
.onb-goal-extra ul { margin: 0; padding-left: 18px; }
.onb-goal-extra a { color: var(--yellow); }

@media (max-width: 560px) {
  .onb-card { padding: 24px 20px 26px; }
  .onb-fx-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-overlay, .onb-card, .onb-step, .onb-check circle, .onb-check path { animation: none; }
  .onb-check circle, .onb-check path { stroke-dashoffset: 0; }
}

/* §20 Business Intelligence — dashboard widgets */
.dash-review-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--highlight-bg); border: 1px solid var(--warn-border);
  border-radius: 10px; font-size: 14px;
}
.dash-fiscal-banner {
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px;
}
.dash-fiscal-title { font-weight: 700; margin-bottom: 8px; }
.dash-fiscal-list { margin: 0; padding-left: 18px; }
.dash-fiscal-item { margin: 4px 0; color: var(--text-soft); }
.dash-fiscal-item--urgent { color: var(--warn, #c9a227); font-weight: 600; }
.dash-fiscal-model { font-weight: 700; color: var(--text); }
.dash-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 20px 24px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.dash-runway-gauge { text-align: center; min-width: 120px; }
.dash-runway-value { font-size: 2.5rem; font-weight: 800; font-family: var(--ft); line-height: 1; }
.dash-runway-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.dash-runway-band {
  display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.dash-runway-meta { font-size: 13px; color: var(--text-soft); line-height: 1.6; }
.dash-milestones { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-milestone {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.dash-milestone.reached { background: var(--green-dim); border-color: var(--green); color: var(--green); }

/* §19 Insight-first dashboard */
.dash-insights { margin-bottom: 18px; }
.dash-insight-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.dash-insight-chip {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 180px; max-width: 280px; flex: 1;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; color: inherit; font-size: 13px;
  transition: border-color 120ms, background 120ms;
}
.dash-insight-chip:hover { border-color: var(--yellow); background: var(--highlight-bg); }
.dash-insight-chip strong { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.dash-insight-chip span { color: var(--text-soft); line-height: 1.35; }
.dash-insight-chip.tone-critical { border-color: var(--red); background: rgba(255,92,92,.08); }
.dash-insight-chip.tone-warn { border-color: var(--warn-border); }
.dash-insight-chip.tone-good { border-color: var(--green); }
.dash-insight-chip.tone-info { border-color: var(--border); }

.dash-health {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: 18px 22px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.dash-health-profit .lbl { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.dash-health-profit .val { font-size: 2rem; font-weight: 800; font-family: var(--ft); line-height: 1.1; margin-top: 4px; }
.dash-health-profit .sub { font-size: 13px; color: var(--text-soft); margin-top: 4px; }
.dash-health-status { display: flex; align-items: flex-start; gap: 12px; }
.dash-health-light {
  width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
  background: var(--text-muted); box-shadow: 0 0 0 4px rgba(154,154,154,.15);
}
.dash-health-status[data-status="green"] .dash-health-light { background: var(--green); box-shadow: 0 0 0 4px rgba(62,207,142,.2); }
.dash-health-status[data-status="yellow"] .dash-health-light { background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,229,0,.2); }
.dash-health-status[data-status="red"] .dash-health-light { background: var(--red); box-shadow: 0 0 0 4px rgba(255,92,92,.2); }
.dash-health-verdict { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }

.dash-suggest {
  margin-bottom: 16px; padding: 14px 16px;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--surface);
}
.dash-suggest-list { margin: 10px 0; padding-left: 18px; font-size: 13px; color: var(--text-soft); }
.dash-suggest-list li { margin-bottom: 6px; }
.dash-suggest-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.dash-hero-chart-wrap { margin-bottom: 16px; }
.dash-hero-chart .cwrap { height: 280px; }
.dash-hero-metric-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-hero-metric-toggles .btn.active {
  background: var(--yellow); color: #111; border-color: var(--yellow);
}

.dash-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.dash-tip-btn {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 700; cursor: help; line-height: 1; padding: 0;
}
.dash-tip-pop {
  display: none; position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
  width: 260px; padding: 10px 12px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 12px; color: var(--text-soft);
  text-transform: none; letter-spacing: normal; font-weight: 500;
}
.dash-tip-pop strong { display: block; color: var(--text); margin-bottom: 4px; }
.dash-tip-body { display: block; margin-bottom: 6px; }
.dash-tip-healthy { display: block; color: var(--yellow); }
.dash-tip:hover .dash-tip-pop,
.dash-tip:focus-within .dash-tip-pop,
.dash-tip.open .dash-tip-pop { display: block; }
.dash-card .lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

@media (max-width: 720px) {
  .dash-health { grid-template-columns: 1fr; }
}

.dash-alerts { margin-bottom: 20px; }
.dash-alerts-title { font-size: 14px; margin: 12px 0 10px; }
.dash-alerts-title:first-child { margin-top: 0; }
.dash-verdict-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); margin-bottom: 12px;
}
.dash-verdict-chip.severity-critical { border-color: var(--red); color: var(--red); background: rgba(255,92,92,.1); }
.dash-verdict-chip.severity-warning { border-color: var(--warn-border); color: var(--warn); }
.dash-verdict-chip.severity-info { border-color: var(--yellow); color: var(--yellow); }
.dash-verdict-meta { font-weight: 500; opacity: .8; font-size: 12px; }
.dash-alert-chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dash-alert-chip {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); font-size: 13px;
}
.dash-alert-chip.severity-critical,
.dash-alert-chip.verdict-toxic { border-color: var(--red); background: rgba(255,92,92,.08); }
.dash-alert-chip.severity-warning { border-color: var(--warn-border); }
.dash-alert-chip p { margin: 6px 0 0; color: var(--text-soft); }
.dash-alert-chip em { display: block; margin-top: 8px; font-size: 12px; color: var(--yellow); }
.dash-insights, .dash-signal-panel {
  margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--text-soft);
}
.dash-insights li, .dash-signal-panel li { margin-bottom: 6px; }
.dash-signal-panel .dash-signal { color: var(--text); }
.dash-sensitivity { margin-top: 10px; font-size: 13px; color: var(--text-soft); }
.dash-crm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  margin-bottom: 8px;
}
.dash-crm-stat {
  padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
}
.dash-crm-stat .lbl { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.dash-crm-stat .val { font-size: 1.1rem; font-weight: 700; font-family: var(--ft); }

/* FR20.6 Expanded visual analytics */
.dash-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dash-donut-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 12px;
  align-items: center;
}
.dash-donut-wrap { height: 160px; }
.dash-top5 {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.45;
}
.dash-top5 li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.dash-top5-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dash-top5-name { flex: 1 1 100px; color: var(--text); }
.dash-lob-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-lob-table th,
.dash-lob-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.dash-lob-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-lob-action {
  font-size: 11px;
  color: var(--yellow);
  white-space: nowrap;
}
tr.lob-potenciar .dash-lob-action { color: var(--green); }
tr.lob-eliminar .dash-lob-action { color: var(--red); }
.dash-yoy-pill { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-proyeccion-box .cwrap { height: 220px; }
@media (max-width: 720px) {
  .dash-donut-row { grid-template-columns: 1fr; }
}

.prompts-panel .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.prompts-note { margin-bottom: 16px; }
.prompts-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 420px; }
.prompts-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.prompt-item {
  text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-family: inherit;
}
.prompt-item.active { border-color: var(--yellow); background: var(--highlight-bg); }
.prompt-item .code { font-weight: 800; color: var(--yellow); margin-right: 6px; }
.prompt-item .tags { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.prompts-detail { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.prompt-rendered {
  white-space: pre-wrap; font-size: 12px; padding: 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border); max-height: 320px; overflow: auto;
}
.prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prompt-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.prompt-chat-note { font-size: 12px; margin-top: 8px; }
.prompt-fav-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.prompt-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--yellow); color: #111;
}
.prompts-monthly { margin-bottom: 12px; }

/* FR22.2 Analytics chatbot */
.chat-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(720px, calc(100vw - 24px));
  width: 100%;
  max-height: min(88vh, 820px);
}
.chat-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.chat-dialog-inner {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: min(88vh, 820px);
  overflow: hidden;
}
.chat-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.chat-dialog-header h3 { margin: 0; font-size: 17px; }
.chat-budget { padding: 0 16px; margin: 8px 0 0; font-size: 12px; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  max-height: 48vh;
}
.chat-msg { max-width: 92%; }
.chat-msg-user { align-self: flex-end; }
.chat-msg-assistant { align-self: flex-start; }
.chat-msg-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 700;
}
.chat-msg-body {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card, var(--surface));
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.chat-msg-user .chat-msg-body {
  background: var(--highlight-bg);
  border-color: var(--yellow);
}
.chat-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 8px;
}
.chat-chip {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.chat-chip:hover { border-color: var(--yellow); }
.chat-playbook-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.chat-compose {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.chat-compose textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--card, var(--surface));
  color: var(--text);
  font: inherit;
}
.chat-consent-dialog { max-width: min(480px, calc(100vw - 24px)); }
.chat-consent-dialog form { padding: 20px; background: var(--card); border: 1px solid var(--border); }

.review-panel .controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.review-blocks { display: grid; gap: 16px; }
.review-block {
  padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.review-block h3 { margin: 0 0 10px; font-size: 15px; }
.review-pre {
  font-size: 11px; max-height: 200px; overflow: auto; padding: 10px;
  background: var(--bg); border-radius: 8px; border: 1px solid var(--border);
}
.review-decision-row, .review-action-row {
  display: grid; gap: 8px; margin-bottom: 10px;
  grid-template-columns: 1fr auto;
}
.review-action-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
.review-block textarea, .review-block input, .review-block select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-family: inherit;
}

.review-divider { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.liq-check-blocks { display: grid; gap: 14px; margin: 16px 0; }
.liq-check-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px;
}
.liq-check-tog { display: flex; gap: 6px; flex-shrink: 0; }
.liq-check-tog .btn.active { background: var(--yellow); color: #111; border-color: var(--yellow); }

.settings-debt-inv-table-wrap { overflow-x: auto; margin: 12px 0; }
.settings-debt-inv-table-wrap .crm-input { min-width: 72px; }
.settings-debt-inv-actions { flex-wrap: wrap; gap: 8px; }
.settings-debt-summary { margin-bottom: 10px; font-size: 13px; }

.liq-plan-steps {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.liq-plan-step {
  font-size: 12px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.liq-plan-step.active { border-color: var(--yellow); color: var(--yellow); background: rgba(255,229,0,.08); }
.liq-plan-step.done { border-color: var(--green); color: var(--green); }
.liq-plan-panel label { display: block; margin: 10px 0 4px; font-size: 13px; }
.liq-plan-panel .crm-input, .liq-plan-panel textarea {
  width: 100%; margin-bottom: 6px;
}
.liq-plan-routes { display: grid; gap: 8px; margin-bottom: 12px; }
.liq-plan-debt-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }

@media (max-width: 900px) {
  .dash-hero { grid-template-columns: 1fr; text-align: left; }
  .prompts-layout { grid-template-columns: 1fr; }
  .review-action-row { grid-template-columns: 1fr; }
  .liq-check-item { flex-direction: column; }
}

/* ===== §24.2 KPI guided onboarding ===== */

/* Intro header block (FR24.2.1) */
.kpi-intro {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.kpi-intro-lead { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.kpi-intro-body { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }

/* Group section header rows (FR24.2.2) */
.kpitable .kpi-group-row td {
  padding: 14px 12px 5px;
  background: var(--card2);
  border-bottom: 2px solid var(--border);
}
.kpitable .kpi-group-row td.kpi-sticky-col,
.kpitable .kpi-group-row td.kpi-sticky-col2 { background: var(--card2); }
.kpitable .kpi-group-row:hover td { background: var(--card2); }
.kpitable .kpi-group-label {
  font-family: var(--ft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}

/* KPI description tooltips (FR24.2.3) */
.kpi-name-wrap { display: inline-flex; align-items: center; gap: 6px; }
.kpi-info {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card2);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kpi-info:hover, .kpi-info:focus-visible { border-color: var(--yellow); color: var(--text); }
.kpi-info:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.kpi-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 30;
  width: 300px;
  padding: 10px 12px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--yellow);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  cursor: default;
}
.kpi-tip-def { display: block; margin-bottom: 8px; }
.kpi-tip-meta { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.kpi-tip-meta strong { color: var(--text); font-weight: 700; }
.kpi-tip-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-tip-badge.auto { border-color: var(--yellow); color: var(--yellow); }
.kpi-info:hover .kpi-tip,
.kpi-info:focus-visible .kpi-tip,
.kpi-info.open .kpi-tip { display: block; }
.kpi-info { width: auto; min-width: 16px; height: auto; padding: 1px 5px; border-radius: 3px; font-size: 9px; letter-spacing: .02em; }
.kpi-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  color: var(--yellow);
  opacity: .85;
}

/* Margin development bar (FR20.1.6) */
.kpi-margin-bar-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.kpi-margin-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.kpi-margin-bar-head strong { font-family: var(--ft); font-size: 13px; }
.kpi-margin-bar-sub { font-size: 11px; color: var(--text-muted); }
.kpi-margin-stack {
  display: flex;
  width: 100%;
  height: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card2);
}
.kpi-margin-seg { height: 100%; min-width: 0; transition: width .35s ease; }
.kpi-margin-seg.seg-gastos { background: #5c6b7a; }
.kpi-margin-seg.seg-tax { background: #c45c26; }
.kpi-margin-seg.seg-margen { background: var(--yellow); }
.kpi-margin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.kpi-margin-leg { display: inline-flex; align-items: center; gap: 6px; }
.kpi-margin-leg i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--border);
}
.kpi-margin-leg.seg-gastos i { background: #5c6b7a; }
.kpi-margin-leg.seg-tax i { background: #c45c26; }
.kpi-margin-leg.seg-margen i { background: var(--yellow); }

/* Regla Infinity gate */
.kpi-proyeccion-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--card2);
  border: 1px dashed var(--border);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.kpi-proyeccion-gate.enabled {
  border-style: solid;
  border-color: var(--yellow);
  background: var(--highlight-bg);
}
.kpi-proyeccion-gate-text { display: flex; flex-direction: column; gap: 2px; max-width: 640px; }
.kpi-proyeccion-gate-text strong { font-family: var(--ft); font-size: 13px; }
.kpi-proyeccion-gate-text span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.kpi-gate-q {
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin: 0 0 10px;
}
.kpi-gate-q legend { font-size: 12px; font-weight: 700; padding: 0 4px; }
.kpi-gate-q label { margin-right: 14px; font-size: 13px; }
.kpi-proyeccion-summary { margin-top: 18px; }
.kpi-proyeccion-summary-title {
  font-family: var(--ft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 8px;
}
.kpi-ebitda-pct { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.kpi-ebitda-band {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.kpi-ebitda-band.band-weak { color: #ff5c5c; border-color: #ff5c5c; }
.kpi-ebitda-band.band-caution { color: #e6a23c; border-color: #e6a23c; }
.kpi-ebitda-band.band-healthy { color: #3d9a5f; border-color: #3d9a5f; }
.kpi-ebitda-band.band-scalable { color: var(--yellow); border-color: var(--yellow); }

/* Current month column highlight (FR24.2.2) */
.kpitable th.kpi-current { color: var(--yellow); border-bottom: 2px solid var(--yellow); }
.kpitable td.kpi-current,
.kpitable thead th.kpi-current { background: var(--highlight-bg); }

/* Objectives wizard banner + button (FR24.2.4) */
.kpi-wizard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--highlight-bg);
  border: 1px solid var(--yellow);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.kpi-wizard-banner-text { display: flex; flex-direction: column; gap: 2px; }
.kpi-wizard-banner-text strong { font-family: var(--ft); font-size: 13px; color: var(--text); }
.kpi-wizard-banner-text span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.kpi-wizard-banner-btn { flex: 0 0 auto; }

/* Wizard modal steps (reuses .onb-* modal shell) */
.kpi-wiz-progress {
  margin: 0 0 8px;
  font-family: var(--ft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.kpi-wiz-desc { margin-bottom: 14px; }
.kpi-wiz-actual {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin-bottom: 4px;
}
.kpi-wiz-actual-label { font-size: 12px; color: var(--text-muted); }
.kpi-wiz-actual-value { font-family: var(--ft); font-size: 18px; font-weight: 800; color: var(--text); }
.kpi-wiz-input { max-width: 200px; }
.kpi-wiz-exit { display: block; margin: 14px auto 0; }

/* Empty state (FR24.2.5) */
.kpi-loading {
  text-align: center;
  padding: 28px 16px 32px;
  color: var(--text-muted);
  font-size: 13px;
}
.kpis-panel--loading .kpis-toolbar,
.kpis-panel--loading .kpi-suggest-row,
.kpis-panel--loading #kpi-tablewrap,
.kpis-panel--loading .kpi-wizard-banner,
.kpis-panel--loading .kpi-empty,
.kpis-panel--loading .kpi-margin-bar-card,
.kpis-panel--loading .kpi-proyeccion-gate,
.kpis-panel--loading .kpi-proyeccion-summary,
.kpis-panel--loading .kpi-suggested,
.kpis-panel--loading .kpi-proyeccion-gate.enabled {
  display: none !important;
}
.kpi-empty {
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--border);
  padding: 40px 24px;
}
.kpi-empty-icon { font-size: 34px; margin-bottom: 10px; }
.kpi-empty h3 { font-family: var(--ft); font-size: 17px; margin: 0 0 8px; color: var(--text); }
.kpi-empty p { max-width: 460px; margin: 0 auto 16px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.kpi-empty-actions { margin-bottom: 14px; }
.kpi-empty-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 0 !important; }

/* ===== §23 Gamified financial literacy (FR23) ===== */
.lit-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  padding: 18px 22px 22px;
  margin-bottom: 22px;
}
.lit-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.lit-panel-head h2 {
  font-family: var(--ft); font-size: 15px; margin: 0; color: var(--text);
}
.lit-panel-head h2 span { color: var(--text-muted); font-weight: 500; font-size: 13px; }
.lit-collapse {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-family: var(--ft);
  min-height: var(--touch-target); text-decoration: underline;
}
.lit-collapse:hover { color: var(--yellow); }

.lit-level-hero { margin-bottom: 16px; }
.lit-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 4px;
}
.lit-level-hero h3 { font-family: var(--ft); font-size: 18px; margin: 0 0 4px; }
.lit-pct { font-size: 13px; color: var(--text-muted); }
.lit-progress {
  height: 6px; background: var(--border); margin: 10px 0 6px; overflow: hidden; border-radius: 3px;
}
.lit-progress-bar {
  height: 100%; background: var(--yellow);
  transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
.lit-overall { font-size: 12px; color: var(--text-muted); margin: 0; }

.lit-levels { display: grid; gap: 8px; margin-bottom: 18px; }
.lit-level {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 0;
}
.lit-level.complete { border-color: var(--green); }
.lit-level summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer; font-family: var(--ft); font-weight: 600;
  list-style: none; min-height: var(--touch-target);
}
.lit-level summary::-webkit-details-marker { display: none; }
.lit-level-pct { color: var(--text-muted); font-size: 13px; font-weight: 500; }

.lit-items { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 4px; }
.lit-items li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--row-border); font-size: 13px;
}
.lit-item-mark {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border);
}
.lit-yes .lit-item-mark { background: var(--green); border-color: var(--green); }
.lit-prog .lit-item-mark { background: var(--yellow); border-color: var(--yellow); }
.lit-auto { font-style: normal; font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.lit-item-select {
  font-size: 12px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px;
  min-height: 36px;
}
.lit-items li.locked { opacity: .55; }
.lit-items li.locked .lit-item-mark {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; background: transparent;
}
.lit-item-locked-hint {
  font-size: 11px; color: var(--text-muted); font-style: italic; max-width: 160px;
  text-align: right; line-height: 1.3;
}
.lit-item-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lit-item-tip { margin-left: 2px; }
.lit-items .dash-tip-pop { width: 240px; left: auto; right: 0; }

.lit-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 18px 0 10px;
}
.lit-section-head h3 { font-family: var(--ft); font-size: 14px; margin: 0; }
.lit-streak { font-size: 13px; color: var(--text-muted); }
.lit-streak.active { color: var(--text); }
.lit-ritual { color: var(--yellow); font-weight: 600; }

.lit-badges {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
}
.lit-badge {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border: 1px dashed var(--border); border-radius: 8px;
  opacity: .45; text-align: center; font-size: 11px; color: var(--text-muted);
}
.lit-badge.earned { opacity: 1; border-style: solid; border-color: var(--yellow); color: var(--text); }
.lit-badge.new { animation: lit-pulse 1.2s ease 2; }
.lit-badge-icon { font-size: 22px; line-height: 1; }
@keyframes lit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 229, 0, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 229, 0, .25); }
}

.lit-goal-box {
  margin: 14px 0; padding: 12px 14px; background: var(--highlight-bg);
  border: 1px solid var(--warn-border); border-radius: 8px;
}
.lit-goal-box h4 { margin: 0 0 8px; font-family: var(--ft); font-size: 13px; }
.lit-goal-box ul { margin: 0; padding-left: 18px; }
.lit-goal-box a { color: var(--yellow); }

.lit-lesson, .lit-quiz {
  border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 10px;
  background: var(--surface);
}
.lit-lesson.recommended { border-color: var(--yellow); }
.lit-lesson.done, .lit-quiz.done { opacity: .85; }
.lit-lesson h4 { margin: 0 0 8px; font-family: var(--ft); font-size: 14px; }
.lit-rec {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--black);
  background: var(--yellow); padding: 2px 6px; border-radius: 4px;
}
.lit-lesson-prompt, .lit-quiz p { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0 0 10px; }
.lit-options { display: flex; flex-wrap: wrap; gap: 8px; }
.lit-opt {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 12.5px;
  font-family: var(--ft); min-height: var(--touch-target); text-align: left;
}
.lit-opt:hover { border-color: var(--yellow); }
.lit-lesson-feedback, .lit-quiz-feedback {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.45;
}
.lit-lesson-feedback.ok, .lit-quiz-feedback.ok {
  background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--text);
}
.lit-lesson-feedback.bad, .lit-quiz-feedback.bad {
  background: color-mix(in srgb, var(--red, #e85) 18%, transparent); color: var(--text);
}
.lit-demo-tag { font-size: 11px; color: var(--text-muted); }

.lit-celebrate {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  animation: lit-fade .25s ease;
}
.lit-celebrate-card {
  background: var(--card); border: 1px solid var(--yellow); border-radius: 14px;
  padding: 32px 28px; max-width: 360px; text-align: center;
  animation: lit-pop .35s cubic-bezier(.2, .8, .3, 1);
}
.lit-celebrate-burst { font-size: 48px; margin-bottom: 8px; }
.lit-celebrate-card h2 { font-family: var(--ft); margin: 0 0 8px; }
.lit-celebrate-card p { color: var(--text-muted); margin: 0 0 18px; }
.lit-celebrate-ok { min-width: 140px; }
@keyframes lit-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lit-pop {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lit-progress-bar, .lit-badge.new, .lit-celebrate, .lit-celebrate-card { animation: none; }
}

/* FR19 insight chips + health header + hero chart */
.dash-insights { margin: 1rem 0 1.25rem; }
.dash-insight-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-insight-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.75rem; border-radius: 8px; font-size: 0.88rem;
  text-decoration: none; color: var(--text); border: 1px solid var(--border);
  background: var(--surface);
}
.dash-insight-chip:hover { border-color: var(--yellow); }
.dash-insight-chip.tone-critical { border-color: #FF5C5C; background: rgba(255,92,92,0.08); }
.dash-insight-chip.tone-warn { border-color: #F5A524; background: rgba(245,165,36,0.08); }
.dash-insight-chip.tone-good { border-color: #3ECF8E; background: rgba(62,207,142,0.08); }
.dash-health {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center;
  margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
}
.dash-health-profit .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dash-health-profit .val { font-size: 1.6rem; font-weight: 800; }
.dash-health-status { display: flex; gap: 0.75rem; align-items: flex-start; }
.dash-health-light {
  width: 14px; height: 14px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0;
  background: var(--muted);
}
.dash-health-status[data-status="green"] .dash-health-light { background: #3ECF8E; }
.dash-health-status[data-status="yellow"],
.dash-health-status[data-status="amber"] .dash-health-light { background: #F5A524; }
.dash-health-status[data-status="red"] .dash-health-light { background: #FF5C5C; }
.dash-health-verdict { margin: 0; line-height: 1.4; }
.dash-hero-chart-wrap { margin-bottom: 1rem; }
.dash-hero-chart .cwrap { height: 280px; }
.dash-hero-metric-toggles { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dash-hero-metric-toggles .btn.active { background: var(--yellow); color: #111; }
.kpi-tip-quiz {
  display: inline-block; margin-top: 0.5rem; font-size: 0.8rem;
  color: var(--yellow); text-decoration: underline;
}
.kpi-suggested {
  margin: 0.75rem 0 1rem; padding: 0.75rem 1rem; border-radius: 8px;
  border: 1px dashed var(--border); font-size: 0.9rem;
}
.lit-quiz-focus {
  outline: 2px solid var(--yellow); outline-offset: 4px;
  transition: outline 0.2s ease;
}
@media (max-width: 720px) {
  .dash-health { grid-template-columns: 1fr; }
}