/* Finance tracker - thin layer over Bootstrap 5.3. No inline styles (CSP style-src 'self'). */
:root {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s0: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --muted: #898781;
  --pos: #006300; --neg: #b02a2a;
  --surface: #fcfcfb; --page: #f9f9f7;
}
[data-bs-theme="dark"] {
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s0: #898781;
  --grid: #2c2c2a; --axis: #383835; --muted: #898781;
  --pos: #3ccf3c; --neg: #f0807f;
  --surface: #1a1a19; --page: #0d0d0d;
}
body { background: var(--page); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.card { background: var(--surface); border-color: var(--bs-border-color-translucent); }
.navbar { background: var(--surface); border-bottom: 1px solid var(--bs-border-color-translucent); }
.navbar-brand { font-weight: 650; letter-spacing: -.01em; }
.nav-link.active { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.kpi-label { font-size: .8rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.75rem; font-weight: 650; line-height: 1.15; }
.kpi-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 320px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .45rem; background: var(--s0); }
.sw-1 { background: var(--s1); } .sw-2 { background: var(--s2); } .sw-3 { background: var(--s3); } .sw-4 { background: var(--s4); }
.sw-5 { background: var(--s5); } .sw-6 { background: var(--s6); } .sw-7 { background: var(--s7); } .sw-0 { background: var(--s0); }
.sw-line { width: 18px; height: 0; border-top: 2px solid var(--s1); border-radius: 0; background: none; vertical-align: middle; }
.sw-line.dashed { border-top: 2px dashed var(--s0); }
progress { width: 100%; height: 6px; border-radius: 3px; overflow: hidden; border: 0; background: var(--grid); accent-color: var(--s1); }
progress::-webkit-progress-bar { background: var(--grid); }
progress::-webkit-progress-value { background: var(--s1); }
progress::-moz-progress-bar { background: var(--s1); }
progress.over { accent-color: var(--neg); } progress.over::-webkit-progress-value { background: var(--neg); } progress.over::-moz-progress-bar { background: var(--neg); }
.tip { border-left: 4px solid var(--bs-border-color); padding: .6rem .9rem; background: var(--surface); border-radius: .375rem; }
.tip.warn { border-left-color: var(--s4); } .tip.good { border-left-color: var(--s3); } .tip.info { border-left-color: var(--s1); }
.tip h3 { font-size: .95rem; margin: 0 0 .15rem; font-weight: 600; }
.tip p { margin: 0; font-size: .9rem; color: var(--bs-secondary-color); }
.ai-box { white-space: pre-wrap; }
.table > :not(caption) > * > * { background: transparent; }
.table-hover > tbody > tr:hover > * { background: var(--bs-tertiary-bg); }

/* quick add */
.quick-wrap { max-width: 460px; margin: 0 auto; }
.quick-amount { font-size: 2.4rem; font-weight: 650; text-align: center; height: auto; padding: .5rem; font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: .5rem; }
.seg input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { flex: 1; text-align: center; padding: .55rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; cursor: pointer; font-weight: 600; }
.seg input:checked + label { background: var(--s1); border-color: var(--s1); color: #fff; }
.seg input:focus-visible + label, .chip input:focus-visible + span { outline: 2px solid var(--s1); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; }
.chip span { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; cursor: pointer; font-size: .92rem; }
.chip input:checked + span { background: var(--bs-body-color); color: var(--bs-body-bg); border-color: var(--bs-body-color); }
.hidden { display: none !important; }
.fab { position: fixed; right: 1rem; bottom: 1rem; width: 3.4rem; height: 3.4rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 1030; }
.login-wrap { max-width: 400px; margin: 8vh auto 0; }
.code-input { letter-spacing: .4em; font-size: 1.5rem; text-align: center; }
code.token { word-break: break-all; user-select: all; }
@media (max-width: 575px) { .kpi-value { font-size: 1.45rem; } .chart-box { height: 240px; } }
@media print { .navbar, .fab, .no-print { display: none !important; } }
.form-narrow { max-width: 640px; }