/* Fincasal: acabamento sobre a interface Aurum, sem substituir suas áreas. */
:root {
  --bg: #f4f1eb;
  --bg2: #eae5dc;
  --gold: #a4813b;
  --gold-l: #c2a466;
  --gold-d: #806128;
  --gold-bg: rgba(164, 129, 59, 0.09);
  --gold-glow: rgba(164, 129, 59, 0.15);
  --text: #27241e;
  --text2: #655f54;
  --muted: #81796c;
  --border: rgba(93, 77, 46, 0.13);
  --border2: rgba(93, 77, 46, 0.07);
  --glass: rgba(255, 254, 251, 0.94);
  --glass-bdr: rgba(144, 119, 72, 0.14);
  --surface: #fffefa;
  --shadow: 0 3px 16px rgba(75, 60, 32, 0.035);
  --shadow-lg: 0 10px 35px rgba(75, 60, 32, 0.065);
  --nav-bg: rgba(250, 248, 243, 0.97);
  --radius: 19px;
  --radius-sm: 13px;
}
[data-theme="dark"] {
  --bg: #11120f;
  --bg2: #191a16;
  --surface: #1b1d18;
  --glass: rgba(27, 29, 24, 0.96);
  --text: #ece7dc;
  --text2: #b7b0a1;
  --muted: #aaa393;
  --gold: #c8ac6d;
  --gold-l: #e0ca97;
  --gold-d: #a18852;
  --gold-bg: rgba(200, 172, 109, 0.09);
  --gold-glow: rgba(200, 172, 109, 0.12);
  --border: rgba(200, 172, 109, 0.15);
  --border2: rgba(200, 172, 109, 0.08);
  --glass-bdr: rgba(200, 172, 109, 0.13);
  --nav-bg: rgba(20, 22, 17, 0.98);
  --input-bg: #24261f;
  --toggle-bg: #2a2c24;
  --green: #86b395;
  --red: #d78f7f;
  --shadow: 0 4px 18px #00000014;
  --shadow-lg: 0 12px 32px #00000020;
}
html {
  scrollbar-gutter: stable;
}
body {
  background: var(--bg);
}
#app {
  max-width: 640px;
}
.orb {
  display: none;
}
.header {
  padding: 24px 24px 5px;
  min-height: 77px;
}
.logo {
  font-size: 31px;
  letter-spacing: -1px;
}
.logo em {
  font-weight: 400;
}
.hdr-right {
  gap: 10px;
}
.icon-btn {
  height: 38px;
  width: 38px;
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--surface);
  color: var(--text2);
  backdrop-filter: none;
}
.icon-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.month-bar {
  padding: 13px 24px 19px;
  gap: 8px;
}
.mth-btn {
  padding: 8px 14px;
  font-size: 11px;
  background: transparent;
  backdrop-filter: none;
  border-color: var(--border);
}
.mth-btn.active {
  background: var(--gold-bg);
  color: var(--gold-d);
  border-color: var(--gold);
  box-shadow: none;
}
[data-theme="dark"] .mth-btn.active {
  color: var(--gold-l);
}
.scroll {
  padding: 0 24px 115px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  min-height: 0;
}
.balance-card {
  padding: 26px;
  background: linear-gradient(120deg, var(--surface), var(--bg));
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
.balance-card::after {
  background: none;
  border: 1px solid var(--border);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: -90px;
  right: -70px;
  box-shadow: 0 0 0 24px var(--gold-bg);
  opacity: 0.55;
}
.bal-label {
  font-size: 10px;
  letter-spacing: 0.17em;
}
.bal-value {
  font-size: 48px;
  line-height: 1.18;
  margin-top: 10px;
}
.bal-sub {
  margin-top: 22px;
  padding-top: 19px;
}
.bal-item-label {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.bal-item-value {
  font-size: 15px;
}
.chart-card,
.mini-card,
.budget-card,
.goal-card,
.streak-card,
.w52-card,
.nh-card,
.ov-card,
.debt-card,
.inv-card {
  box-shadow: var(--shadow);
  backdrop-filter: none;
  border-color: var(--border);
  background: var(--surface);
}
.chart-card {
  padding: 21px 22px;
}
.chart-title,
.section-title {
  font-size: 20px;
}
.chart-sub {
  font-size: 11px;
}
.mini-card {
  padding: 20px;
}
.mini-icon {
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-value {
  font-size: 25px;
}
.mini-label {
  font-size: 10px;
  letter-spacing: 0.06em;
}
.overview-grid {
  gap: 12px;
}
.ov-card {
  padding: 21px;
}
.ov-icon {
  color: var(--gold);
  margin-bottom: 14px;
}
.ov-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
}
.ov-val {
  font-size: 25px;
}
.ov-sub {
  font-size: 11px;
}
.ov-card:hover {
  border-color: var(--gold);
}
.streak-card {
  padding: 22px;
}
.streak-title {
  font-size: 17px;
}
.tx-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.tx {
  padding: 16px;
}
.tx-icon {
  color: var(--gold);
  border-radius: 10px;
}
.tx-name {
  font-size: 13px;
  font-weight: 500;
}
.tx-cat,
.tx-date {
  font-size: 11px;
}
.tx-amt {
  font-size: 14px;
}
.empty-state {
  padding: 32px 18px;
}
.empty-icon {
  opacity: 0.65;
  color: var(--gold);
  display: flex;
  justify-content: center;
}
.empty-text {
  font-size: 12px;
}
.bottom-nav {
  max-width: 640px;
  padding: 10px 8px max(12px, env(safe-area-inset-bottom));
  border-color: var(--border);
  backdrop-filter: blur(16px);
  box-shadow: 0 -4px 24px #4b3c2005;
}
.nav-btn {
  padding: 7px 8px;
  min-width: 0;
  min-height: 54px;
  flex: 1;
  gap: 5px;
}
.nav-icon,
.nav-icon svg {
  width: 23px;
  height: 23px;
}
.nav-label {
  font-size: 9px;
  letter-spacing: 0.06em;
}
.nav-pip {
  display: none;
}
.nav-btn.active {
  background: var(--gold-bg);
  border-radius: 10px;
}
.fab-wrap {
  bottom: 88px;
  right: 24px;
}
.fab {
  width: 53px;
  height: 53px;
  background: linear-gradient(135deg, var(--gold-l), var(--gold-d));
  box-shadow: 0 5px 18px var(--gold-glow);
  border: 1px solid #ffffff25;
}
.fab-item-label {
  font-size: 12px;
}
.modal {
  max-width: 520px;
  border-color: var(--border);
}
.modal-scroll {
  padding: 22px 26px 32px;
}
.modal-title {
  font-size: 26px;
}
.btn-primary {
  background: linear-gradient(125deg, var(--gold), var(--gold-d));
  box-shadow: none;
  min-height: 45px;
}
.btn-secondary {
  min-height: 44px;
}
.input-group input,
.input-group select {
  border-radius: 10px;
  min-height: 44px;
}
.nh-card {
  background: linear-gradient(135deg, var(--surface), var(--gold-bg));
  padding: 28px;
}
.nh-quote {
  font-size: 22px;
  line-height: 1.6;
}
.w52-title {
  font-size: 22px;
}
.w52-sub {
  font-size: 12px;
}
.w52-week {
  min-height: 25px;
}
.profile-field-icon {
  color: var(--gold);
  display: grid;
  place-items: center;
}
.debt-icon,
.inv-icon,
.recur-icon,
.goal-emoji {
  color: var(--gold);
  border: 1px solid var(--border);
  background: var(--gold-bg) !important;
}
.debt-btn,
.inv-btn {
  min-height: 40px;
}
.dcat-btn,
.icat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
}
.sidebar {
  background: var(--surface);
  border-color: var(--border);
  width: min(380px, calc(100vw - 25px));
  left: calc(-1 * min(380px, calc(100vw - 25px)));
}
.sidebar.open {
  transform: translateX(100%);
}
.sidebar-title {
  font-size: 25px;
}
.sidebar-tab {
  min-height: 39px;
}
.sidebar-close {
  min-width: 36px;
  min-height: 36px;
}
.lux-icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.empty-icon .lux-icon {
  width: 34px;
  height: 34px;
}
.ov-icon .lux-icon {
  width: 25px;
  height: 25px;
}
.goal-emoji .lux-icon {
  width: 25px;
  height: 25px;
}
.dcat-btn .lux-icon,
.icat-btn .lux-icon,
.debt-btn .lux-icon,
.inv-btn .lux-icon {
  width: 16px;
  height: 16px;
}
.debt-btn.pay,
.inv-btn.buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.insight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.streak-badge {
  display: flex;
  align-items: center;
  gap: 5px;
}
.streak-badge .lux-icon {
  width: 14px;
  height: 14px;
}
.fab-item-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand-caption,
.desktop-caption {
  display: none;
}
.recent-panel {
  min-width: 0;
}
.recent-panel > .section-head {
  margin-top: 10px;
}
.recent-panel .tx-list {
  margin: 0;
}
.recent-panel .swipe-hint {
  margin-bottom: 0;
}
.profile-cover {
  background-color: var(--gold-bg);
}
button:focus-visible,
.icon-btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
button {
  touch-action: manipulation;
}
input,
select,
textarea {
  font-size: 16px !important;
}
img {
  max-width: 100%;
}
.page,
.grid2,
.overview-grid {
  min-width: 0;
}
@media (min-width: 700px) {
  .header {
    padding: 28px 32px 8px;
  }
  .scroll {
    padding: 0 32px 120px;
  }
  .month-bar {
    padding: 16px 32px 22px;
  }
  #app {
    border-inline: 1px solid var(--border);
  }
  .modal {
    border-radius: 20px;
    margin-bottom: 5vh;
  }
  .overlay {
    align-items: center;
  }
  .modal-handle {
    display: none;
  }
  .line-chart-wrap {
    height: 170px;
  }
  .line-chart {
    height: 170px;
  }
  .chart-card {
    padding: 24px;
  }
  .bal-value {
    font-size: 56px;
  }
}
@media (min-width: 1000px) {
  #app {
    max-width: 1600px;
    width: 100%;
    padding-left: 222px;
    border: 0;
  }
  .header {
    padding: 30px 40px 15px;
    min-height: 98px;
    border-bottom: 1px solid var(--border2);
  }
  .logo {
    font-size: 32px;
  }
  .brand-caption {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 9px;
    margin-top: 4px;
  }
  .desktop-caption {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-right: 12px;
  }
  .month-bar {
    padding: 22px 40px;
    gap: 10px;
  }
  .mth-btn {
    font-size: 12px;
    padding: 9px 18px;
  }
  .scroll {
    padding: 0 40px 100px;
  }
  .bottom-nav {
    position: absolute;
    inset: 0 auto 0 0;
    width: 222px;
    max-width: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 148px 20px 24px;
    background: var(--surface);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    gap: 8px;
  }
  .bottom-nav::before {
    content: "FINCASAL";
    position: absolute;
    top: 45px;
    left: 34px;
    font-family: "Playfair Display", serif;
    font-size: 21px;
    letter-spacing: 0.13em;
    color: var(--gold);
  }
  .bottom-nav::after {
    content: "Seu espaço. Sua essência.";
    position: absolute;
    bottom: 35px;
    left: 34px;
    right: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  .nav-btn {
    flex: 0;
    flex-direction: row;
    padding: 15px 16px;
    gap: 15px;
    justify-content: flex-start;
    border-radius: 10px;
    min-height: 53px;
  }
  .nav-label {
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0.01em;
  }
  .nav-icon,
  .nav-icon svg {
    width: 22px;
    height: 22px;
  }
  .nav-btn.active {
    box-shadow: inset 2px 0 var(--gold);
  }
  .nav-btn:hover {
    background: var(--gold-bg);
  }
  #pageDash.active {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  #pageDash > div {
    margin-bottom: 0;
  }
  #pageDash > .balance-card {
    grid-column: 1;
    grid-row: 1;
    padding: 30px;
    min-height: 224px;
  }
  #pageDash > .grid2 {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    margin: 0;
    gap: 14px;
  }
  #pageDash .mini-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 20px;
  }
  #pageDash .mini-icon {
    margin-bottom: 18px;
  }
  #pageDash .mini-value {
    font-size: 27px;
  }
  #pageDash > #budgetSection,
  #pageDash > #insightSection {
    grid-column: 1/-1;
  }
  #pageDash > #budgetSection[style*="none"],
  #pageDash > #insightSection:empty {
    display: none;
  }
  #pageDash > .chart-card {
    grid-column: 1;
    grid-row: auto;
    min-height: 249px;
  }
  #pageDash > .overview-grid {
    grid-column: 2;
    grid-row: auto;
    align-self: stretch;
    margin: 0;
    gap: 14px;
  }
  #pageDash .ov-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    min-width: 0;
  }
  #pageDash .ov-val {
    font-size: 24px;
  }
  #pageDash > .recent-panel {
    grid-column: 1;
    grid-row: auto;
  }
  #pageDash > .streak-card {
    grid-column: 2;
    grid-row: auto;
    margin: 0;
    padding: 22px;
  }
  #pageDash .recent-panel {
    grid-row: 5;
  }
  #pageDash .streak-card {
    grid-row: 5;
  }
  .line-chart-wrap,
  .line-chart {
    height: 160px;
  }
  .bal-sub {
    margin-top: 28px;
    padding-top: 22px;
  }
  .bal-value {
    font-size: 58px;
  }
  .fab-wrap {
    bottom: 30px;
    right: 40px;
  }
  .fab {
    width: 56px;
    height: 56px;
  }
  .debt-summary-row {
    gap: 18px;
    margin-bottom: 24px;
  }
  .debt-summary-card {
    padding: 25px;
  }
  .debt-summary-val {
    font-size: 32px;
  }
  #debtList,
  #invList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  #debtList > .empty-state,
  #invList > .empty-state {
    grid-column: 1/-1;
    padding: 65px 0;
  }
  #goalList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  #goalList > .empty-state {
    grid-column: 1/-1;
  }
  #pageGoals > .nh-card {
    padding: 32px 15%;
    text-align: center;
  }
  .nh-quote {
    font-size: 27px;
  }
  .w52-card {
    padding: 28px;
  }
  .w52-grid {
    gap: 8px;
  }
  .w52-week {
    min-height: 36px;
  }
  #pageStats.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  #pageStats > .chart-card {
    margin: 0;
  }
  #pageStats > .chart-card:first-child {
    grid-column: 1/-1;
  }
  #pageStats .hist-bars {
    height: 190px;
  }
  #pageSet {
    max-width: 780px;
    margin: 0 auto;
  }
  #pageProfile {
    max-width: 850px;
    margin: 0 auto;
  }
  .sidebar {
    width: 420px;
    left: -420px;
  }
  .sidebar-body {
    padding: 18px 22px;
  }
  .pwa-banner {
    max-width: 600px;
    left: auto;
    right: 40px;
    bottom: 95px;
  }
  .modal {
    max-width: 540px;
  }
  .modal-scroll {
    padding: 30px 32px;
  }
  .debt-card,
  .inv-card {
    margin-bottom: 0;
  }
}
@media (min-width: 1350px) {
  #app {
    padding-left: 246px;
  }
  .bottom-nav {
    width: 246px;
    padding-inline: 24px;
  }
  .bottom-nav::before,
  .bottom-nav::after {
    left: 40px;
  }
  .header {
    padding-inline: 48px;
  }
  .month-bar {
    padding-inline: 48px;
  }
  .scroll {
    padding-inline: 48px;
  }
  .bal-value {
    font-size: 64px;
  }
  #pageDash > .balance-card {
    min-height: 244px;
  }
  #pageDash .mini-value {
    font-size: 32px;
  }
  #pageDash .ov-val {
    font-size: 29px;
  }
  #pageDash > .chart-card {
    min-height: 270px;
  }
  .line-chart,
  .line-chart-wrap {
    height: 180px;
  }
  .fab-wrap {
    right: 48px;
  }
  .w52-grid {
    gap: 10px;
  }
}
@media (max-width: 380px) {
  .header {
    padding-inline: 17px;
  }
  .month-bar {
    padding-inline: 17px;
  }
  .scroll {
    padding-inline: 17px;
  }
  .bal-value {
    font-size: 43px;
  }
  .balance-card {
    padding: 22px 19px;
  }
  .nav-label {
    font-size: 8px;
    letter-spacing: 0;
  }
  .nav-icon,
  .nav-icon svg {
    width: 21px;
    height: 21px;
  }
  .bottom-nav {
    padding-inline: 4px;
  }
  .nav-btn {
    padding: 7px 4px;
  }
  .mini-card {
    padding: 16px;
  }
  .mini-value {
    font-size: 23px;
  }
  .debt-summary-val {
    font-size: 19px;
  }
  .debt-summary-card {
    padding: 14px 8px;
  }
  .overview-grid {
    gap: 10px;
  }
  .ov-card {
    padding: 17px;
  }
  .ov-val {
    font-size: 23px;
  }
  .w52-grid {
    gap: 3px;
  }
  .w52-week {
    min-height: 20px;
  }
  .w52-title {
    font-size: 19px;
  }
  .w52-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
  .fab-wrap {
    right: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .confetti-piece {
    display: none;
  }
}
@media (min-width: 1000px) {
  #pageDash > .balance-card {
    order: 1;
  }
  #pageDash > .grid2 {
    order: 2;
  }
  #pageDash > #budgetSection {
    order: 3;
  }
  #pageDash > #insightSection {
    order: 4;
  }
  #pageDash > .chart-card {
    order: 5;
  }
  #pageDash > .overview-grid {
    order: 6;
  }
  #pageDash > .recent-panel {
    order: 7;
    grid-row: auto;
  }
  #pageDash > .streak-card {
    order: 8;
    grid-row: auto;
  }
}
.field input,
.field select {
  border-radius: 10px;
  min-height: 44px;
}
.sidebar-tabs button {
  min-height: 36px;
}
.field label {
  line-height: 1.6;
}
html {
  scrollbar-gutter: auto;
}
.modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-title .lux-icon {
  width: 24px;
  height: 24px;
  color: var(--gold);
}
@media (min-width: 700px) and (max-width: 999px) {
  #app {
    max-width: 860px;
    width: calc(100% - 40px);
  }
  .bottom-nav {
    max-width: none;
    width: 100%;
  }
  .balance-card {
    padding: 32px;
  }
  .bal-value {
    font-size: 60px;
  }
  .grid2 .mini-card {
    padding: 23px;
  }
  .overview-grid .ov-card {
    padding: 25px;
  }
  .profile-cover {
    height: 210px;
  }
  .nh-card {
    padding: 32px;
  }
  .w52-grid {
    gap: 7px;
  }
  .w52-week {
    min-height: 32px;
  }
}
/* Identidade e atalhos da casa */
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand-mark{width:43px;height:43px;flex:none;color:#f3dfad;background:#40382c;border:1px solid #a98b51;border-radius:13px;padding:7px}
.brand-name{line-height:1.05}
.header .account-shortcut{width:auto;padding:0 13px;gap:7px;border-radius:10px;font:500 12px Outfit,sans-serif}
.header .account-shortcut .lux-icon{width:17px;height:17px}
:root{--bg:#eee7db;--bg2:#e7ddcc;--surface:#fffaf1;--glass:#fffaf1;--nav-bg:#f8f0e2;--gold:#88652f;--muted:#726655}
[data-theme=dark]{--bg:#1c1915;--bg2:#242018;--surface:#29241c;--glass:#29241c;--nav-bg:#221e17;--gold:#d2b477;--muted:#b8aa91}
body{background:radial-gradient(ellipse at 85% 0%,var(--gold-bg),transparent 55%),var(--bg)}
.balance-card,.streak-card,.profile-cover{background:linear-gradient(125deg,var(--surface),var(--bg2))}
.streak-title{font-size:20px}
.streak-card{border-top:2px solid var(--gold)}
.nav-icon,.mini-icon,.ov-icon{color:var(--gold)}
.nav-btn.active .nav-icon{color:var(--gold)}
@media(min-width:1000px){.bottom-nav::before{content:'FINANÇAS DA CASA';font:500 10px Outfit,sans-serif;letter-spacing:.18em;top:112px}}
@media(max-width:480px){.header .account-shortcut{padding:0;width:38px;justify-content:center}.account-shortcut span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.brand-mark{width:34px;height:34px}.brand-lockup{gap:8px}.logo{font-size:26px}}

.nav-shortcuts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.nav-shortcuts .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
@media (max-width: 999px) {
  .bottom-nav { flex-wrap: wrap; }
  .nav-shortcuts { flex: 0 0 100%; padding-top: 6px; gap: 16px; }
  .fab-wrap { bottom: calc(122px + env(safe-area-inset-bottom)); }
  .scroll { padding-bottom: calc(157px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .bottom-nav { padding-top: 105px; gap: 3px; overflow-y: auto; }
  .bottom-nav::before { top: 68px; }
  .bottom-nav::after { display: none; }
  .nav-btn { min-height: 44px; padding-block: 8px; }
}

/* Keep utility controls directly below the main navigation. */
.nav-shortcuts .icon-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
}
@media (min-width: 1000px) {
  #app { padding-left: 192px; }
  .bottom-nav {
    width: 192px;
    padding: 80px 14px 18px;
    gap: 4px;
    overflow-y: auto;
  }
  .bottom-nav::before { top: 40px; left: 24px; }
  .bottom-nav::after { display: none; }
  .nav-btn { min-height: 44px; padding: 9px 12px; gap: 10px; }
  .nav-shortcuts { margin-top: auto; flex-shrink: 0; gap: 7px; padding-top: 10px; }
}
@media (max-width: 999px) {
  .bottom-nav { padding-top: 5px; padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .nav-btn { min-height: 46px; padding-block: 4px; }
  .nav-shortcuts { margin-top: 5px; padding-top: 6px; }
}

.main-nav-links { display: contents; }

@media (max-width: 999px) {
  .main-nav-links {
    display: flex;
    flex: 0 0 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .main-nav-links .nav-btn { flex: 1 0 54px; }
}

.household-tool { max-width: 720px; }
.household-tool form { display: grid; gap: 12px; margin-top: 16px; }
.household-tool label:not([hidden]) { display: grid; gap: 5px; }
.household-tool input, .household-tool select {
  width: 100%;
  padding: 10px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.household-row p { margin: 8px 0; color: var(--text2); }

.market-divider {
  flex: none;
  border-top: 1px solid var(--border);
  margin: 5px 8px;
}
@media (max-width: 999px) {
  .market-divider {
    border-top: 0;
    border-left: 1px solid var(--border);
    align-self: stretch;
    margin: 7px 4px;
  }
}

@media (min-width: 1000px) {
  .bottom-nav {
    --main-menu-offset: clamp(0px, calc((100dvh - 750px) * 0.38), 76px);

    padding-top: calc(80px + var(--main-menu-offset));
  }
  .bottom-nav::before {
    top: 40px;
  }
  .market-divider {
    margin-bottom: 11px;
  }
  .market-shortcut:last-child {
    margin-bottom: 20px;
  }
}

.direct-market-section .sidebar-tabs { display: none; }
.sidebar-quote {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  color: var(--text2);
  font-size: 11px;
}
.sidebar-quote i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sidebar-quote.quote-available { color: var(--green); }
.sidebar-quote.quote-available i { animation: quote-pulse 2s ease-in-out infinite; }
@keyframes quote-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar-quote.quote-available i { animation: none; }
}
@media (min-width: 1000px) {
  .bottom-nav > .sidebar-quote { margin-top: auto; margin-bottom: 8px; }
  .bottom-nav > .sidebar-quote + .nav-shortcuts { margin-top: 0; }
}
@media (max-width: 999px) {
  .sidebar-quote { flex-basis: 100%; }

  #app:has(.sidebar-quote) .fab-wrap { bottom: calc(144px + env(safe-area-inset-bottom)); }
  #app:has(.sidebar-quote) .scroll { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
}
.upload-status { color: var(--muted); font-size: 11px; max-width: 140px; }
.upload-status:empty { display: none; }
.receipt-review { color: var(--text2); font-size: 13px; margin-bottom: 12px; }
@media (max-width: 999px) {
  .sidebar-quote { flex-basis: auto; }
  .nav-shortcuts:has(.sidebar-quote) { gap: 7px; }
}

#stocksBR .mkt-icon img { object-fit: contain; background: white; }
#stocksBR .mkt-icon img + span { display: none; }
.quote-down { color: var(--red); }

.brand-lockup {
  --brand-ink: #173e35;
  --brand-accent: #f2c982;
  color: var(--brand-ink);
}
[data-theme="dark"] .brand-lockup { --brand-ink: #eff4e9; }
.brand-lockup .brand-mark {
  color: #fbf7ee;
  background: #173e35;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  padding: 2px;
}
.brand-mark-accent { stroke: var(--brand-accent); }
.brand-lockup .brand-name {
  font-family: Outfit, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.045em;
}
.brand-lockup .brand-caption {
  font: 500 11px Outfit, system-ui, sans-serif;
  letter-spacing: .035em;
  text-transform: none;
  margin-top: 4px;
}

.sidebar-welcome { display: none; }
@media (min-width: 1000px) {
  .sidebar-welcome {
    display: block;
    padding: 0 10px 10px;
    flex: none;
    overflow-wrap: anywhere;
  }
  .sidebar-welcome strong {
    color: var(--text);
    font: 600 14px Outfit, system-ui, sans-serif;
  }
  .sidebar-welcome p {
    margin: 4px 0 0;
    color: var(--text2);
    font-size: 11px;
    line-height: 1.45;
  }
}

@media (min-width: 1000px) {
  .bottom-nav > .sidebar-welcome {
    padding: 0 10px 10px;
    margin-top: calc(-18px - var(--main-menu-offset, 0px));
    margin-bottom: var(--main-menu-offset, 0px);
  }
  .hdr-right .desktop-caption {
    max-width: 270px;
    text-align: right;
    line-height: 1.45;
  }
}

@media (min-width: 1000px) {
  .bottom-nav > .sidebar-welcome { margin-bottom: 6px; }
  .market-divider, .nav-shortcuts { border-top-color: var(--gold); }
}
.header, .bottom-nav {
  --brand-edge: linear-gradient(90deg, #173e35, #a68b54 64%, #f2c982);
}
.header {
  border-bottom: 1px solid transparent;
  border-image: var(--brand-edge) 1;
}
.bottom-nav > .nav-shortcuts {
  border-top: 1px solid transparent;
  border-image: var(--brand-edge) 1;
}
@media (min-width: 1000px) {
  .bottom-nav > .sidebar-quote { margin-top: 10px; transform: translateX(-8px); }
  .bottom-nav > .sidebar-quote + .nav-shortcuts { margin-top: auto; }
}

@media (min-width: 1000px) {
  .bottom-nav {
    --menu-accent: #285347;
    --menu-line: #b2ac95;
    --menu-selected: #e6ede5;
    background: var(--bg);
  }
  [data-theme="dark"] .bottom-nav {
    --menu-accent: #b7d1ba;
    --menu-line: #655f4d;
    --menu-selected: #26372e;
  }
  .bottom-nav::before {
    inset-inline: 14px;
    color: var(--menu-accent);
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--menu-line);
  }
  .bottom-nav .market-divider {
    margin-inline: 0;
    border-color: var(--menu-line);
  }
  .bottom-nav .nav-icon,
  .bottom-nav .nav-btn.active .nav-label,
  .bottom-nav .nav-shortcuts .icon-btn {
    color: var(--menu-accent);
  }
  .bottom-nav .nav-btn.active {
    background: var(--menu-selected);
    box-shadow: inset 2px 0 var(--menu-accent);
  }
  .bottom-nav > .nav-shortcuts {
    border-image: none;
    border-top-color: var(--menu-line);
  }
}

/* Typography and feedback shared by the dashboard and navigation. */
#app {
  --app-font: Outfit, system-ui, sans-serif;
  --muted: #625849;
  --text2: #514737;
  font-family: var(--app-font);
}
[data-theme="dark"] #app {
  --muted: #c3b79e;
  --text2: #ddd1bb;
}
#app :is(button, input, select, textarea, .logo, .section-title, .chart-title, .streak-title, .brand-caption, .sidebar-welcome strong) {
  font-family: var(--app-font);
}
#app .nav-label { color: var(--text2); font-weight: 500; }
#app .nav-btn.active .nav-label { color: var(--menu-accent, var(--gold)); font-weight: 600; }
#app .desktop-caption { color: var(--text2); }
@media (min-width: 1000px) {
  #app .bottom-nav::before { content: none; }
  #app .bottom-nav { padding-top: 37px; }
  #app .bottom-nav > .sidebar-welcome {
    margin: 0 0 8px;
    padding: 0 10px 11px;
    border-bottom: 1px solid var(--menu-line);
  }
}
.icon-tap :is(.nav-icon, svg) { animation: icon-tap .28s ease-out; }
.icon-tap .nav-icon svg { animation: none; }
@keyframes icon-tap {
  35% { transform: scale(.84); }
  75% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-tap :is(.nav-icon, svg) { animation: none; }
}

/* Carry the Fincasal palette through the dashboard and sidebar. */
#app {
  --dashboard-wash: #f7f4eb;
  --dashboard-tint: #edf0e7;
  --welcome-line: #a6ad98;
  background: linear-gradient(145deg, var(--dashboard-wash) 20%, var(--dashboard-tint));
}
[data-theme="dark"] #app {
  --dashboard-wash: #211e18;
  --dashboard-tint: #202b24;
  --welcome-line: #6e7e6f;
}
@media (min-width: 1000px) {
  #app .bottom-nav {
    background: linear-gradient(145deg, var(--dashboard-wash), var(--dashboard-tint));
  }
  #app .bottom-nav > .sidebar-welcome {
    margin: 0 0 8px;
    padding: 0 12px 11px;
    border-bottom-color: var(--welcome-line);
  }
  #app .bottom-nav :is(.market-divider, .nav-shortcuts) {
    border-top-color: var(--welcome-line);
  }
}

@media (min-width: 1000px) {
  #app { --desktop-header-height: 98px; }
  #app .header {
    box-sizing: border-box;
    height: var(--desktop-header-height);
    min-height: var(--desktop-header-height);
    border-image: linear-gradient(90deg, var(--welcome-line), transparent 50%) 1;
    border-bottom-color: transparent;
  }
  #app .bottom-nav { padding-top: 0; }
  #app .bottom-nav > .sidebar-welcome {
    box-sizing: border-box;
    height: var(--desktop-header-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 -14px 16px;
    padding: 15px 26px 0;
  }
}

/* Let desktop chrome span the viewport, with fluid content gutters. */
@media (min-width: 1000px) {
  #app {
    --desktop-gutter: clamp(24px, 2.5vw, 48px);
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  #app :is(.header, .month-bar, .scroll) {
    min-width: 0;
    padding-inline: var(--desktop-gutter);
  }
  #app .fab-wrap { right: var(--desktop-gutter); }
}

.header-progress {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.header-progress :is(summary, .header-streak) {
  display: grid;
  gap: 3px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text2);
  font-size: 10px;
}
.header-progress strong { color: var(--text); font-size: 12px; }
.household-rank { position: relative; }
.household-rank summary { cursor: pointer; }
.rank-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(270px, calc(100vw - 28px));
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
}
.rank-popover p { margin: 0 0 8px; line-height: 1.45; }
.rank-popover label, .rank-popover input { display: block; width: 100%; }
.rank-popover input { padding: 5px; margin-block: 4px; color: var(--text); background: var(--input-bg); border: 1px solid var(--border); }
.rank-popover button { color: var(--text); background: var(--gold-bg); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; cursor: pointer; }
.rank-popover a { color: inherit; }
#app .header:has(.header-progress) { z-index: 21; }
@media (max-width: 999px) {
  #app .header:has(.header-progress) { flex-wrap: wrap; height: auto; }
  #app .hdr-right:has(.header-progress) { flex-wrap: wrap; }
  .header-progress { flex-shrink: 1; }
}

.daily-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.daily-quote .desktop-caption {
  display: block;
  color: var(--text2);
  font: italic 500 clamp(15px, 1.25vw, 21px)/1.4 "Playfair Display", Georgia, serif;
  text-wrap: balance;
}
.daily-quote .desktop-caption::before { content: '“'; }
.daily-quote .desktop-caption::after { content: '”'; }
.couple-mascot { width: 46px; height: auto; flex: none; }
.header-progress button.header-streak {
  cursor: pointer;
  text-align: left;
}
.header-progress button.header-streak:hover { border-color: var(--gold); }
@media (min-width: 1000px) {
  #app .header-with-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1.3fr) minmax(max-content, 1fr);
    column-gap: 16px;
  }
  .header-with-quote .hdr-right { justify-self: end; }
}
@media (max-width: 999px) {
  .daily-quote { order: 3; flex-basis: 100%; padding-block: 4px; }
  .daily-quote .desktop-caption { font-size: 15px; }
  .couple-mascot { width: 37px; }
}

/* Warm text tones shared by all dashboard surfaces. */
#app {
  --text: #393b32;
  --text2: #505247;
  --muted: #616355;
  color: var(--text);
}
[data-theme="dark"] #app {
  --text: #e4ded0;
  --text2: #d5cebd;
  --muted: #c0b8a6;
}
#app .daily-quote .desktop-caption {
  display: block;
  min-width: 0;
  max-width: 34ch;
  overflow-wrap: anywhere;
}
#app .header-with-quote .hdr-right { min-width: 0; }
#app .header-progress :is(summary, .header-streak) {
  min-width: 0;
  color: var(--text2);
}
@media (min-width: 1000px) {
  #app .header-with-quote {
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.4fr) minmax(max-content, 1fr);
    padding-block: 14px;
  }
}
@media (max-width: 999px) {
  #app .header-with-quote .daily-quote { flex: 1 0 100%; }
}

/* The goals carousel uses its own dark surface in both themes. */
#nhCard {
  background: linear-gradient(125deg, #23443a, #35483a 62%, #53452e);
  border: 1px solid #a28b56;
}
#nhCard .nh-quote { color: #f4ebd7; }
#nhCard .nh-author { color: #e2cfab; }
#nhCard .nh-dot { background: #aaad92; }
#nhCard .nh-dot.active { background: #f2c982; }

/* A soft wash adds depth behind the dashboard values. */
#pageDash :is(.balance-card, .mini-card, .ov-card) {
  background-image:
    radial-gradient(ellipse at 96% 0%, var(--gold-bg) 0%, transparent 62%),
    linear-gradient(135deg, var(--surface), var(--dashboard-wash));
}
@media (min-width: 1000px) {
  #app .bottom-nav > .sidebar-quote {
    margin-top: calc(10px + clamp(8px, calc(100dvh - 760px), 2cm));
  }
}

.period-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--desktop-gutter, 17px) 0;
}
.period-summary strong, .period-summary small { display: block; }
.period-summary strong { font-size: clamp(15px, 1.4vw, 20px); }
.period-summary small { margin-top: 2px; color: var(--text2); font-size: 10px; }
.period-summary button, .month-replay button {
  color: var(--text);
  background: var(--gold-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.month-replay {
  width: min(440px, calc(100% - 24px));
  margin: auto;
  padding: 20px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
}
.month-replay::backdrop { background: #171611a0; }
.month-replay form { float: right; }
.month-replay h2 { margin: 0 40px 12px 0; font-size: 19px; }
.month-replay p { margin: 8px 0; color: var(--text2); }
.month-replay [data-action] { overflow-wrap: anywhere; }
.replay-controls { display: flex; justify-content: space-between; margin-top: 16px; }
.month-replay button:disabled { opacity: .55; cursor: default; }

/* Keep the desktop masthead and period controls compact. */
@media (min-width: 1000px) {
  #app {
    --desktop-header-height: 78px;
    --desktop-gutter: clamp(22px, 2vw, 36px);
    --masthead-line: color-mix(in srgb, var(--text) 14%, transparent);
  }
  #app .header {
    padding-block: 8px;
    border-image: none;
    border-bottom-color: var(--masthead-line);
  }
  #app .bottom-nav { border-right-color: var(--masthead-line); }
  #app .bottom-nav > .sidebar-welcome {
    padding-block: 0;
    margin-bottom: 9px;
    border-bottom-color: var(--masthead-line);
  }
  #app .daily-quote {
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
  }
  #app .daily-quote .desktop-caption {
    margin: 0;
    font-size: clamp(14px, 1.05vw, 19px);
  }
  #app .couple-mascot { width: 34px; }
  #app .period-summary { padding-top: 8px; }
  #app .month-bar { padding-block: 6px 10px; gap: 6px; }
  #app .mth-btn { padding: 5px 11px; }
  #app .header-progress :is(summary, .header-streak) {
    padding: 6px 9px;
    background: var(--gold-bg);
    border-color: transparent;
  }
  #pageGoals > #nhCard {
    margin-top: 0 !important;
    padding: 20px clamp(24px, 6vw, 96px);
    border: 0;
    border-radius: 12px;
  }
  #nhCard .nh-quote { margin-bottom: 8px; }
  #nhCard .nh-dots { margin-top: 10px; }
}

.sidebar-quote { flex-wrap: wrap; }
.sidebar-quote .quote-time {
  flex-basis: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}
.sidebar-quote .quote-time:empty { display: none; }

/* Shared surfaces and separators across the app. */
#app {
  --surface-edge: color-mix(in srgb, var(--text) 9%, transparent);
  --section-edge: color-mix(in srgb, var(--text) 12%, transparent);
  --radius: 20px;
  --radius-sm: 12px;
  --border: var(--surface-edge);
  --glass-bdr: var(--surface-edge);
}
#app :is(.header, .sidebar-welcome, .market-divider, .nav-shortcuts) {
  border-image: none;
  border-color: var(--section-edge);
}
#app .bottom-nav { border-color: var(--section-edge); }
#app :is(.balance-card, .mini-card, .ov-card, .chart-card, .budget-card, .goal-card, .debt-card, .inv-card, .streak-card, .w52-card, .tx-list, .panel) {
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius);
}
#app #nhCard { border: 1px solid var(--surface-edge); border-radius: var(--radius); }
#app :is(.mth-btn, .period-summary button, .header-progress summary, .header-streak, .rank-popover, .month-replay, .household-tool input, .household-tool select) {
  border-color: var(--surface-edge);
  border-radius: var(--radius-sm);
}
#app .mth-btn.active { border-color: var(--gold); }

#app .mth-btn.active {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
#app :is(button, summary, input, select, a):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Gradient edges for the Fincasal dashboard kit. */
#app {
  --kit-edge: linear-gradient(145deg, #50816b80, #c9a76732 58%, #d4b46d91);
  --kit-active: linear-gradient(120deg, #d9e8dc, #f4e5c6);
}
[data-theme="dark"] #app {
  --kit-edge: linear-gradient(145deg, #76a89082, #b1925933 58%, #d6b7768a);
  --kit-active: linear-gradient(120deg, #294c3e, #4d402a);
}
#app :is(.balance-card, .mini-card, .ov-card, .chart-card, .budget-card, .goal-card, .debt-card, .inv-card, .streak-card, .w52-card, .month-replay) {
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at top right, var(--gold-bg), transparent 65%),
    linear-gradient(145deg, var(--surface), var(--dashboard-wash)) padding-box,
    var(--kit-edge) border-box;
}
#app :is(.mth-btn.active, .nav-btn.active, .period-summary button) {
  border: 1px solid transparent;
  background: var(--kit-active) padding-box, var(--kit-edge) border-box;
  box-shadow: none;
}
#app .header {
  border-bottom-color: transparent;
  border-image: linear-gradient(90deg, #50816b80, #c9a76755, transparent 85%) 1;
}

/* Give each navigation topic a recognizable icon tile. */
#app .main-nav-links .nav-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  color: var(--menu-accent, var(--gold));
  background: color-mix(in srgb, currentColor 10%, transparent);
}
#app .main-nav-links .nav-icon svg { width: 17px; height: 17px; }
#app .main-nav-links .market-shortcut .nav-icon {
  color: var(--gold);
}
#app .main-nav-links .nav-btn.active .nav-icon {
  color: #f5ebd2;
  background: #285347;
}
@media (min-width: 1000px) {
  #app .main-nav-links .nav-btn {
    padding: 5px 9px;
    gap: 10px;
    text-align: left;
  }
}

.tx-remove {
  flex: none;
  width: 30px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 18px;
}
.tx-remove:hover { color: var(--red); background: var(--red-bg); }

.household-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }

#app { background: var(--dashboard-wash); }
#app .bottom-nav { background: var(--dashboard-wash); }
#app .header {
  border-image: none;
  border-bottom-color: var(--section-edge);
}
#app :is(.balance-card, .mini-card, .ov-card, .chart-card, .budget-card, .goal-card, .debt-card, .inv-card, .streak-card, .w52-card, .month-replay) {
  background: var(--surface);
  border-color: var(--surface-edge);
}
#app #nhCard { background: #23443a; }
#app :is(.mth-btn.active, .nav-btn.active, .period-summary button) {
  background: var(--menu-selected, var(--gold-bg));
  border-color: var(--surface-edge);
}
@media (min-width: 1000px) {
  #app .bottom-nav > .brand-lockup {
    flex: 0 0 var(--desktop-header-height);
    margin-inline: -14px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--section-edge);
  }
  #app .bottom-nav .brand-name { font-size: 23px; }
  #app .bottom-nav .brand-mark { width: 34px; height: 34px; }
  #app .bottom-nav > .sidebar-welcome {
    height: auto;
    margin: 0 0 8px;
    padding: 14px 8px 10px;
  }
  #app .header-with-quote .daily-quote { grid-column: 2; }
  #app .header-with-quote .hdr-right { grid-column: 3; }
}

@media (min-width: 1000px) {
  #app .bottom-nav > .brand-lockup {
    flex: none;
    margin: 14px 0 0;
    padding: 0;
    justify-content: center;
    border: 0;
  }
  #app .bottom-nav > .brand-lockup + .sidebar-quote { margin-top: 1cm; }
}

.sidebar-mascot {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 80px;
  margin: 6px auto;
}
.sidebar-mascot .couple-mascot { width: 80px; }
.sidebar-mascot .mascot-badge {
  position: absolute;
  top: 55%;
  left: 48%;
  width: 22px;
  height: 22px;
  padding: 1px;
  border-radius: 6px;
  background: #173e35;
  color: #fbf7ee;
  --brand-accent: #f2c982;
}
@media (max-width: 999px) {
  .sidebar-mascot { width: 48px; margin-block: 0; }
  .sidebar-mascot .couple-mascot { width: 48px; }
  .sidebar-mascot .mascot-badge { width: 15px; height: 15px; border-radius: 4px; }
}

/* Fincasal palette: teal accents on neutral, cool surfaces. */
#app {
  --dashboard-wash: #f2f6f5;
  --dashboard-tint: #e8f0ed;
  --bg: #f2f6f5;
  --bg2: #e8f0ed;
  --surface: #ffffff;
  --glass: #ffffff;
  --nav-bg: #f2f6f5;
  --input-bg: #eef3f1;
  --toggle-bg: #e5eeea;
  --text: #182d2a;
  --text2: #3c5550;
  --muted: #526b65;
  --gold: #126451;
  --gold-d: #115444;
  --gold-l: #a7d5c1;
  --gold-bg: #12645112;
  --gold-glow: #12645122;
  --green: #137052;
  --green-bg: #13705215;
  --red: #aa3c48;
  --red-bg: #aa3c4815;
  --blue: #345b92;
  --blue-bg: #345b9215;
  --section-edge: #ccdcd6;
  --surface-edge: #dce8e3;
  --border2: #e5eeea;
}
[data-theme="dark"] #app {
  --dashboard-wash: #111c1b;
  --dashboard-tint: #152523;
  --bg: #111c1b;
  --bg2: #172724;
  --surface: #1b2c29;
  --glass: #1b2c29;
  --nav-bg: #111c1b;
  --input-bg: #233732;
  --toggle-bg: #233732;
  --text: #e5f0eb;
  --text2: #bfd1cb;
  --muted: #a7beb6;
  --gold: #91d4b8;
  --gold-d: #337c62;
  --gold-l: #b8e7d3;
  --gold-bg: #91d4b81a;
  --gold-glow: #91d4b825;
  --green: #91d4b8;
  --green-bg: #91d4b81a;
  --red: #ff9fa7;
  --red-bg: #ff9fa71a;
  --blue: #a2c7ff;
  --blue-bg: #a2c7ff1a;
  --section-edge: #39524c;
  --surface-edge: #2c443e;
  --border2: #2c443e;
}
#app .bottom-nav {
  --menu-accent: var(--gold);
  --menu-selected: var(--gold-bg);
  --menu-line: var(--section-edge);
}
#app .brand-lockup { --brand-ink: var(--text); --brand-accent: #a7e3cb; }
#app .brand-mark,
#app .main-nav-links .nav-btn.active .nav-icon,
#app #nhCard { background: #17483c; }
#app .main-nav-links .nav-btn.active .nav-icon { color: #edf8f2; }
#app #nhCard .nh-quote { color: #edf8f2; }
#app #nhCard .nh-author { color: #bfdfd1; }
#app #nhCard .nh-dot { background: #75a896; }
#app #nhCard .nh-dot.active { background: #c0f2dc; }
#app .fab { background: var(--gold); color: var(--bg); }