/* A quiet, spacious finance workspace. */
:root {
  --bg:#100c19; --panel:#1c1628; --panel-alt:#292136; --dim:#161120;
  --border:#393044; --text:#f6f0ff; --muted:#b4a7c7;
  --teal:#d9b9ff; --green:#d9b9ff; --emerald:#d9b9ff;
  --violet:#b7a4fa; --blue:#ba9ce5; --amber:#ebd2ac; --orange:#e6b09e;
  --radius-sm:12px; --radius-md:20px; --radius-lg:26px;
  --shadow:0 8px 32px rgba(0,0,0,.13);
}
body { background:radial-gradient(ellipse at 80% 0%,#342047 0,transparent 46%),var(--bg); line-height:1.5; }
button,input,select { transition:background .18s,border-color .18s,box-shadow .18s; }
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
button:disabled { cursor:wait; opacity:.55; }
.app-shell { max-width:1600px; padding:28px; gap:32px; grid-template-columns:220px minmax(0,1fr); }
.sidebar { top:28px; height:calc(100dvh - 56px); background:#161020; padding:28px 16px; box-shadow:none; }
.sidebar .brand { font-size:17px; letter-spacing:-.6px; }
.brand .dot,.sidebar .brand .dot { background:var(--teal); box-shadow:none; border-radius:5px; }
.sidebar-kicker { letter-spacing:.13em; font-size:10px; margin-top:14px; margin-bottom:32px; }
.tab-btn { min-height:50px; font-size:13px; border-radius:13px; }
.tab-btn.active { background:var(--teal); color:#28103d; box-shadow:none; }
.tab-btn:hover:not(.active) { background:var(--panel-alt); color:var(--text); }
.nav-icon { width:23px; font-size:21px; font-weight:400; }
.status-dot { background:var(--teal); box-shadow:none; width:6px; height:6px; }
.topbar { padding:12px 0 30px; min-height:108px; }
.page-heading h1 { font-size:clamp(26px,3vw,36px); font-weight:600; letter-spacing:-1.3px; }
.page-heading p { color:var(--muted); font-size:13px; }
.user-chip { border:0; background:var(--panel); padding:8px 13px 8px 8px; }
.user-chip > span { background:var(--violet); color:#252039; font-weight:600; }
.card { background:var(--panel); border:1px solid var(--border); box-shadow:none; }
.btn { border-radius:12px; min-height:44px; font-weight:600; padding:10px 17px; background:var(--panel-alt); }
.btn.primary { color:#28103d; background:var(--teal); border-color:var(--teal); box-shadow:none; }
.btn.primary:hover { background:#e9d6ff; }
.btn.danger { color:#f6b6b6; background:#382521; border-color:#604137; }
.icon-btn { border-radius:14px; }
.yearly-toolbar { background:transparent; border:0; padding:0; gap:20px; }
.yearly-toolbar h2 { font-size:18px; font-weight:500; }
.yearly-toolbar p { max-width:360px; font-size:12px; }
.yearly-search { min-width:180px; }
.yearly-search span { text-transform:none; letter-spacing:0; font-weight:500; }
.year-pills { flex-wrap:wrap; overflow:visible; gap:6px; margin:24px 0; }
.year-pill { border-color:transparent; background:var(--panel); min-height:40px; min-width:65px; font-size:12px; }
.year-pill.active { background:var(--panel-alt); border-color:var(--teal); color:var(--teal); }
.yearly-summary { gap:12px; background:transparent; border:0; overflow:visible; }
.yearly-summary > div { border-radius:20px; padding:24px; border:1px solid var(--border); background:var(--panel); }
.yearly-summary > div:nth-child(2) { background:var(--teal); color:#28103d; border-color:var(--teal); }
.yearly-summary > div:nth-child(2) span { color:#573767; }
.yearly-summary span { letter-spacing:.02em; text-transform:none; font-size:12px; font-weight:500; }
.yearly-summary strong { font-size:clamp(20px,2.2vw,29px); letter-spacing:-.8px; font-weight:600; }
.yearly-grid-card { margin-top:24px; background:transparent; border:0; overflow:visible; }
.yearly-months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.month-card { background:var(--panel); border:1px solid var(--border); border-radius:18px; min-width:0; overflow:hidden; }
.month-card[open] { border-color:#77569b; }
.month-card summary { display:flex; gap:12px; align-items:center; padding:19px; cursor:pointer; list-style:none; }
.month-card summary::-webkit-details-marker { display:none; }
.month-mark { width:36px; height:40px; display:grid; place-items:center; flex:none; color:var(--teal); background:#352447; border-radius:12px; font-size:12px; }
.month-name { display:flex; flex-direction:column; min-width:0; }
.month-name strong { font-weight:500; font-size:14px; }
.month-name small { font-size:11px; color:var(--muted); }
.month-total { margin-left:auto; font-size:13px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.month-chevron { color:var(--muted); }
.month-card[open] .month-chevron { transform:rotate(180deg); }
.month-entries { border-top:1px solid var(--border); padding:8px 18px; }
.month-entry { display:flex; gap:16px; justify-content:space-between; width:100%; padding:12px 0; background:none; border:0; border-bottom:1px solid #30273c; color:var(--text); text-align:left; font-size:12px; }
.month-entry:last-child { border-bottom:0; }
.month-entry span { overflow-wrap:anywhere; }
.month-entry strong { flex-shrink:0; font-weight:500; color:var(--teal); font-variant-numeric:tabular-nums; }
.month-entry:hover { color:var(--teal); }
.month-empty { color:var(--muted); font-size:12px; }
.yearly-hint { border:0; padding:14px 0; }
.smart-ledger { margin-top:32px; }
.smart-ledger-heading h2 { font-weight:500; letter-spacing:-.6px; }
.calculator-tabs { gap:10px; }
.calculator-tab { border-radius:18px; padding:16px 12px; grid-template-columns:36px 1fr; }
.calculator-tab > span { width:36px; height:36px; }
.calculator-tab.active { background:#342343; border-color:#9974c6; box-shadow:none; }
.calculator-tab strong { font-weight:500; font-size:13px; }
.calculator-toolbar { grid-template-columns:180px minmax(160px,1fr) auto; padding:22px; }
.calculator-total strong { color:var(--teal); font-weight:600; }
.plan-tab { border-radius:20px; padding:24px; }
.plan-tab.active { background:#352746; border-color:#9974c6; box-shadow:none; }
.plan-tab strong { letter-spacing:-.5px; font-weight:600; }
.plan-panel-heading { padding:24px; }
.plan-panel-heading h3 { font-weight:500; font-size:18px; }
.plan-row { padding:18px 24px; gap:16px; }
.plan-row strong { font-weight:500; }
.plan-row small { font-size:11px; }
.income-month-row { border-bottom:1px solid var(--border); padding:10px; }
.income-month-records .plan-row { background:var(--dim); border:0; border-radius:16px; padding:18px; }
.kpi-card { padding:24px; border-radius:22px; gap:14px; }
.kpi-label { text-transform:none; letter-spacing:0; font-weight:500; }
.kpi-value { font-size:clamp(22px,2.4vw,32px); font-weight:600; }
.kpi-card:first-child { background:var(--teal); color:#28103d; border-color:var(--teal); }
.kpi-card:first-child .kpi-value,.kpi-card:first-child .kpi-label,.kpi-card:first-child .kpi-sub { color:#28103d; }
.chart-panel { padding:24px; margin-top:20px; }
.chart-panel h3 { font-weight:500; }
.field label { color:var(--muted); font-weight:500; font-size:12px; text-transform:none; letter-spacing:0; }
.field input,.field select { background:var(--dim); border-color:var(--border); border-radius:12px; min-height:48px; }
.modal { border-radius:26px; background:#20182c; padding:28px; max-height:88dvh; overflow-y:auto; }
.modal h2 { font-weight:500; letter-spacing:-.8px; }
.modal-actions { flex-wrap:wrap; }
.auth-card { padding:36px; }
.tx-card { border-radius:18px; background:var(--panel); margin-bottom:10px; padding:18px; }
@media (max-width:1100px) and (min-width:861px) {
  .app-shell { padding:20px; gap:20px; grid-template-columns:180px minmax(0,1fr); }
  .yearly-toolbar { flex-direction:column; align-items:stretch; }
  .calculator-tabs { grid-template-columns:repeat(2,1fr); }
  .calculator-toolbar { grid-template-columns:1fr 1fr; }
  .calculator-total { grid-column:1/-1; border-left:0; padding:0; }
}
@media (max-width:860px) {
  .app-shell { display:block; padding:20px; }
  .workspace { padding-bottom:110px; }
  .sidebar { position:fixed; inset:auto 12px calc(10px + env(safe-area-inset-bottom)); z-index:50; width:calc(100% - 24px); height:auto; min-height:68px; padding:6px; background:rgba(27,18,39,.96); backdrop-filter:blur(20px); border:1px solid #514064; border-radius:22px; box-shadow:0 8px 28px #0006; }
  .sidebar .brand { display:none; }
  .tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; width:100%; margin:0; overflow:visible; }
  .tab-btn { min-width:0; width:100%; min-height:56px; padding:5px 2px; flex-direction:column; gap:2px; font-size:9px; text-align:center; line-height:1.2; border-radius:16px; }
  .nav-icon { display:block; font-size:20px; height:25px; }
  .topbar { padding:8px 0 28px; }
  .yearly-toolbar-actions { flex-wrap:wrap; }
  .yearly-search { flex:1; }
  .calculator-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calculator-toolbar { grid-template-columns:1fr 1fr; }
  .calculator-total { grid-column:1/-1; padding:14px 0 0; border-left:0; border-top:1px solid var(--border); }
  .fab { bottom:calc(98px + env(safe-area-inset-bottom)); right:22px; background:var(--teal); color:#28103d; box-shadow:0 4px 20px #0004; }
}
@media (max-width:640px) {
  .app-shell { padding:18px 14px; }
  .page-heading h1 { font-size:28px; }
  .page-heading p { font-size:11px; max-width:230px; }
  .user-chip { display:none; }
  .yearly-toolbar h2 { font-size:16px; }
  .yearly-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .yearly-search { grid-column:1/-1; }
  .yearly-toolbar-actions .btn { padding:10px; font-size:12px; }
  .year-pills { margin:20px 0; }
  .year-pill { flex:1; padding:0 8px; min-width:45px; }
  .yearly-summary { grid-template-columns:1fr 1fr; gap:10px; }
  .yearly-summary > div { flex-direction:column; align-items:flex-start; gap:8px; padding:18px; }
  .yearly-summary > div:nth-child(2) { grid-column:1/-1; grid-row:1; }
  .yearly-summary strong { text-align:left; max-width:100%; font-size:22px; }
  .yearly-summary > div:nth-child(2) strong { font-size:32px; }
  .yearly-summary span { font-size:11px; }
  .yearly-months { grid-template-columns:1fr; gap:10px; }
  .month-card summary { padding:17px; }
  .month-total { font-size:12px; }
  .smart-ledger-heading h2 { font-size:21px; }
  .smart-ledger-heading p { font-size:12px; }
  .section-actions { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
  .section-actions .btn { flex:1; padding:10px; font-size:12px; }
  .calculator-toolbar { padding:18px; }
  .calculator-tab small { font-size:10px; }
  .plan-tabs { gap:10px; }
  .plan-tab { padding:18px; min-width:0; }
  .plan-tab strong { font-size:20px; overflow-wrap:anywhere; }
  .plan-panel-heading { padding:20px; }
  .plan-row { padding:16px; grid-template-columns:70px minmax(0,1fr) auto; gap:8px; }
  .plan-row > strong { white-space:normal; overflow-wrap:anywhere; }
  .income-month-records { grid-template-columns:1fr; }
  .income-month-records .plan-row { padding:16px; }
  .kpi-grid { gap:10px; }
  .kpi-card { padding:18px; min-width:0; }
  .kpi-value { font-size:21px; overflow-wrap:anywhere; }
  .filters-panel { grid-template-columns:1fr; }
  .modal-backdrop { align-items:flex-end; padding:0; }
  .modal { width:100%; max-width:100%; max-height:90dvh; border-radius:26px 26px 0 0; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .modal-actions { position:sticky; bottom:0; background:#20182c; padding-top:12px; }
  .range-bar { flex-wrap:wrap; gap:6px; }
  .range-btn { font-size:11px; padding:0 12px; }
  .chart-panel { padding:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }
.nav-icon { color:currentColor; }
.nav-icon svg { width:21px; height:21px; display:block; }
.plan-tab > strong { font-size:24px; font-weight:600; letter-spacing:-.5px; }
body:not(:has(#view-transactions.active)) .fab { display:none; }
@media (max-width:640px) { .plan-tab > strong { font-size:19px; } }
.search-input { min-width:0; }
@media (max-width:640px) {
  .search-row { display:grid; grid-template-columns:1fr 1fr; }
  .search-input { grid-column:1/-1; width:100%; }
}

/* Paired lavender themes inspired by the two selected references. */
:root { --cyan:#bba0e3; --pink:#f0a5c5; color-scheme:dark; }
body { background:radial-gradient(ellipse at 82% -8%,#4b28604f,transparent 48%),var(--bg); }
.yearly-summary > div:nth-child(2),.kpi-card:first-child { background:linear-gradient(120deg,#dcc4fb,#bda3ed); border-color:transparent; }
.yearly-summary > div:nth-child(2) strong { font-weight:600; }
.sidebar { background:linear-gradient(180deg,#21142b,#130f1b); }
.plan-tab.active,.calculator-tab.active { background:linear-gradient(130deg,#382348,#281d37); }
.month-card[open] { box-shadow:0 6px 30px #9c5bdd0c; }
.card,.month-card { box-shadow:0 3px 15px #0000000a; }
.theme-toggle svg { width:21px;height:21px; }
.theme-moon { display:none; }
[data-theme="light"] .theme-moon { display:block; }
[data-theme="light"] .theme-sun { display:none; }
[data-theme="light"] {
  color-scheme:light;
  --bg:#f4f1f9; --panel:#ffffff; --panel-alt:#eee8f5; --dim:#f8f5fc;
  --border:#e3dcec; --text:#251b37; --muted:#6f637f;
  --teal:#7143a3; --violet:#7143a3; --blue:#74529a; --green:#33795b; --emerald:#33795b;
  --amber:#855a24; --orange:#9d503f; --cyan:#7143a3; --pink:#a64270;
}
[data-theme="light"] body { background:radial-gradient(ellipse at 85% -5%,#e8d9fb,transparent 50%),var(--bg); }
[data-theme="light"] .sidebar { background:var(--panel); }
[data-theme="light"] .tab-btn.active,[data-theme="light"] .btn.primary { background:#7143a3; color:#fff; border-color:#7143a3; }
[data-theme="light"] .btn.primary:hover { background:#5b3389; }
[data-theme="light"] .brand .dot { background:#7143a3; }
[data-theme="light"] .yearly-summary > div:nth-child(2),[data-theme="light"] .kpi-card:first-child { color:#2e164a; background:linear-gradient(120deg,#e4d6f6,#d1bdec); }
[data-theme="light"] .yearly-summary > div:nth-child(2) span,[data-theme="light"] .kpi-card:first-child .kpi-label,[data-theme="light"] .kpi-card:first-child .kpi-sub,[data-theme="light"] .kpi-card:first-child .kpi-value { color:#4d316b; }
[data-theme="light"] .year-pill.active { background:#ebe0f6; border-color:#bd9ddb; }
[data-theme="light"] .month-mark { background:#eee4f8;color:#7143a3; }
[data-theme="light"] .month-card[open] { border-color:#c3a4df; }
[data-theme="light"] .month-entry { border-color:var(--border); }
[data-theme="light"] .calculator-tab.active,[data-theme="light"] .plan-tab.active { background:linear-gradient(135deg,#efe5fa,#f8f4fd); border-color:#c5a8e0; }
[data-theme="light"] .income-month-records .plan-row { background:#f7f3fb; }
[data-theme="light"] .modal,[data-theme="light"] .modal-actions { background:var(--panel); }
[data-theme="light"] .privacy-eye { filter:brightness(0); }
[data-theme="light"] .btn.danger { color:#a3344a;background:#fff0f2;border-color:#edcbd2; }
[data-theme="light"] .tx-table th,[data-theme="light"] .type-toggle button { background:var(--panel-alt); }
[data-theme="light"] .range-btn.active { color:#fff; }
[data-theme="light"] .income-preview { background:var(--panel-alt); }
[data-theme="light"] .paid-value { color:#33795b; }
.preview-note { display:inline-flex; align-items:center; gap:7px; margin:0 0 18px; padding:6px 11px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:11px; }
@media(max-width:860px) { [data-theme="light"] .sidebar { background:rgba(255,255,255,.96); border-color:#dbceea;box-shadow:0 8px 25px #4632581a; } }

/* Read-only finance assistant */
.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; }
.yearly-view-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:20px; }
.yearly-view-controls p { margin:0; color:var(--muted); font-size:12px; }
.yearly-view-switch { display:flex; padding:4px; gap:4px; border:1px solid var(--border); border-radius:15px; background:var(--panel); }
.yearly-view-switch .btn { border:0; background:transparent; font-size:13px; }
.yearly-view-switch .btn.active { background:var(--teal); color:#28103d; }
[data-theme="light"] .yearly-view-switch .btn.active { color:white; }
#yearly-table-panel { border:1px solid var(--border); border-radius:20px; overflow:hidden; background:var(--panel); }
.yearly-table-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px; border-bottom:1px solid var(--border); }
.yearly-table-controls>span { font-size:12px; color:var(--muted); }
.yearly-table-controls>div { display:flex; gap:8px; }
.yearly-table-controls .btn { font-size:12px; padding:8px 12px; }
.yearly-table-controls button:disabled { cursor:default; }
#yearly-table-panel .yearly-grid-wrap { overflow-y:auto; overflow-x:hidden; }
#yearly-grid { width:100%; min-width:0; table-layout:fixed; }
#yearly-grid th, #yearly-grid td { min-width:0; white-space:normal; overflow-wrap:anywhere; padding:10px 6px; font-size:12px; }
#yearly-grid thead th, #yearly-grid .month-col, #yearly-grid tfoot th, #yearly-grid tfoot td { background:var(--panel-alt); }
#yearly-grid .month-col { width:72px; }
#yearly-grid tbody .month-col { white-space:nowrap; }
#yearly-grid .total-col { width:106px; background:var(--panel-alt); color:var(--text); }
#yearly-grid td.has-value { background:var(--panel); color:var(--teal); }
#yearly-grid td.zero { color:var(--muted); }
.yearly-cell-button { font:inherit; color:inherit; cursor:pointer; background:transparent; border:0; padding:8px 0; width:100%; text-align:right; text-decoration:underline dotted; text-underline-offset:4px; overflow-wrap:anywhere; }
.yearly-cell-button:hover { background:var(--panel-alt); }
@media(max-width:640px) {
  .yearly-view-controls { align-items:stretch; }
  .yearly-view-switch { width:100%; }
  .yearly-view-switch .btn { flex:1; }
  #yearly-grid .month-col { width:54px; }
  #yearly-grid .total-col { width:84px; }
  #yearly-grid th, #yearly-grid td { font-size:11px; padding:9px 5px; }
}
.ask-finances-btn { color:var(--teal); white-space:nowrap; }
.insights-modal { width:min(680px, 100%); max-width:680px; background:var(--panel); }
.insights-heading { position:sticky; top:-28px; background:var(--panel); z-index:1; padding:12px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.insights-heading h2 { margin:0; }
.insights-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.insights-suggestions .btn { font-size:12px; padding:10px 12px; white-space:normal; }
.insights-input { display:flex; gap:8px; margin-top:8px; }
.insights-input input { flex:1; min-width:0; color:var(--text); background:var(--panel-alt); border:1px solid var(--border); border-radius:12px; padding:12px; font:inherit; }
.insights-answer { background:var(--panel-alt); border:1px solid var(--border); border-radius:18px; padding:18px; margin-top:20px; }
.insights-answer p { white-space:pre-line; line-height:1.7; overflow-wrap:anywhere; }
.insights-answer h3 { margin-top:0; }
.insights-footnote { color:var(--muted); font-size:12px; line-height:1.6; margin-bottom:0; }
#insights-records { margin-top:12px; max-height:300px; overflow-y:auto; }
.insight-record { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.insight-record>div { min-width:0; }
.insight-record strong { overflow-wrap:anywhere; }
.insight-record>strong { text-align:right; }
.insight-record small { display:block; margin-top:5px; color:var(--muted); }
@media(max-width:600px) {
  .topbar { flex-wrap:wrap; gap:16px; }
  .topbar-actions { margin-left:auto; }
  .ask-finances-btn { font-size:12px; padding:10px; }
  .insights-input { flex-wrap:wrap; }
  .insights-input input { width:100%; flex-basis:100%; }
  .insights-input .btn { width:100%; }
  .insight-record { align-items:flex-start; font-size:13px; }
}