/* Self-hosted Manrope (variable, weights 400-800), so nothing render-blocks on
an external font CDN. Split by unicode-range like Google's own CSS — the
browser fetches only the subsets it needs. latin-ext carries ₽ (U+20BD). */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/manrope-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/manrope-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/manrope-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: light;
--sidebar: #20235f;
--sidebar-panel: #2d3079;
--sidebar-muted: #b9bae0;
--sidebar-border: rgba(255, 255, 255, 0.11);
--bg: #fbfaf7;
--panel: #ffffff;
--row: #f7f5ef;
--ink: #202124;
--ink-2: #45433e;
--muted: #6a6760;
--faint: #aaa69c;
--line: #e2ded3;
--line-soft: #ece8de;
--accent: #5a63ff;
--accent-soft: #eef0ff;
--accent-ink: #2f339c;
--pos: #2e7d52;
--pos-soft: #e7f3ec;
--green: #b9ec73;
--zero: #f1efe8;
--danger: #a43a31;
--danger-soft: #f6dfdc;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--control-h: 38px;
--radius: 10px;
--radius-sm: 8px;
/* Phone chrome: notch/home-indicator insets and the bottom tab bar. */
--sa-top: env(safe-area-inset-top, 0px);
--sa-bottom: env(safe-area-inset-bottom, 0px);
--tabbar-h: 56px;
}
* {
box-sizing: border-box;
/* the grey flash Android/Chrome paints on tap is the loudest "this is a website" tell */
-webkit-tap-highlight-color: transparent;
}
html {
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
}
/* Installed from the home screen there is no browser chrome to reveal, so
the page must not rubber-band past its fixed bars. In a browser tab the
native overscroll (and Android pull-to-refresh) stay as they are. */
html.standalone, html.standalone body { overscroll-behavior-y: none; }
/* Typography sits on , not : the phone overlays (offline bar,
install hint, progress bar) are appended outside the boosted and
still need to inherit it. */
html {
font: 13px/1.4 "Manrope", system-ui, -apple-system, Arial, sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
}
h1, h2, p { margin: 0; }
button, select, input {
height: var(--control-h);
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
color: var(--ink);
font: inherit;
padding: 0 var(--space-3);
}
button { cursor: pointer; }
.app-shell {
display: flex;
min-height: 100vh;
background: var(--bg);
}
.sidebar {
position: sticky;
top: 0;
width: 284px;
min-width: 284px;
height: 100vh;
padding: var(--space-4) var(--space-3);
background: var(--sidebar);
color: #fff;
overflow-y: auto;
}
.brand {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-2) var(--space-5);
}
.brand-mark {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 13px;
background: #fff;
color: var(--accent);
font-size: 22px;
font-weight: 800;
box-shadow: 0 1px 2px rgba(20, 20, 40, 0.18);
}
.brand h1 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand p, .sidebar-muted {
color: var(--sidebar-muted);
font-size: 11px;
}
.main-nav {
display: grid;
gap: var(--space-2);
margin-bottom: 28px;
}
.main-nav a {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 42px;
padding: 0 var(--space-4);
border-radius: var(--radius);
color: var(--sidebar-muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background .15s, color .15s;
}
.main-nav a:hover { color: #fff; background: var(--sidebar-panel); }
.main-nav a.active {
background: var(--accent);
color: #fff;
box-shadow: 0 6px 16px -6px rgba(90, 99, 255, 0.7);
}
.nav-ic {
width: 18px;
height: 18px;
flex: none;
border-radius: 5px;
position: relative;
background: currentColor;
opacity: 0.5;
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
}
.main-nav a.active .nav-ic { opacity: 1; }
.nav-ic--budget {
--ic: url('data:image/svg+xml;utf8,');
}
.nav-ic--import {
--ic: url('data:image/svg+xml;utf8,');
}
.nav-ic--accounts {
--ic: url('data:image/svg+xml;utf8,');
}
.tab-accounts, .fab, .sheet-backdrop, .sheet-handle { display: none; }
.sidebar-body { display: contents; }
.nav-ic--reports {
--ic: url('data:image/svg+xml;utf8,');
}
.networth {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: 16px;
padding: 12px 14px;
border-radius: var(--radius);
background: var(--sidebar-panel);
border: 1px solid var(--sidebar-border);
}
.networth-label { color: var(--sidebar-muted); font-size: 12px; white-space: nowrap; }
.networth-val { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.account-nav {
display: grid;
gap: var(--space-5);
padding: 0 var(--space-2);
}
.account-group-title {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
margin-bottom: var(--space-2);
padding: 0 var(--space-2);
color: var(--sidebar-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.account-group-title strong {
color: #fff;
font-size: 13px;
letter-spacing: 0;
white-space: nowrap;
}
.account-group ul {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.account-group li {
padding-left: var(--space-1);
font-size: 14px;
font-weight: 500;
color: #fff;
}
.account-group li a {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
min-height: 34px;
padding: 0 var(--space-2) 0 var(--space-3);
border-radius: var(--radius-sm);
color: #fff;
text-decoration: none;
transition: background .14s;
white-space: nowrap;
}
.acct-ic {
width: 24px;
height: 24px;
flex: none;
border-radius: 7px;
position: relative;
background: var(--sidebar-panel);
border: 1px solid var(--sidebar-border);
}
.acct-ic::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 11px;
height: 8px;
border-radius: 2px;
border: 1.5px solid var(--sidebar-muted);
}
.acct-ic--invest::after {
width: 0;
height: 0;
border: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid var(--sidebar-muted);
}
.acct-name { flex: 1; }
.account-group li a strong { font-size: 13.5px; font-weight: 600; }
.account-group li a:hover {
background: rgba(255, 255, 255, 0.10);
}
.account-group li a.active {
background: rgba(255, 255, 255, 0.18);
}
.sidebar-actions {
display: grid;
gap: var(--space-2);
margin-top: 28px;
padding: 0 var(--space-2);
}
.sidebar-actions button {
height: auto;
min-height: 44px;
border: 1px dashed var(--sidebar-border);
border-radius: var(--radius);
background: transparent;
color: var(--sidebar-muted);
font-weight: 700;
transition: color .15s, border-color .15s;
}
.sidebar-actions button:hover {
color: #fff;
border-color: var(--sidebar-muted);
}
.plan {
flex: 1;
min-width: 0;
background: var(--bg);
}
.plan-header {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(260px, 360px);
gap: var(--space-5);
align-items: center;
min-height: 108px;
padding: var(--space-5) 28px;
background: #fff;
}
.month-switcher {
display: grid;
grid-template-columns: 42px 190px 42px;
align-items: center;
gap: 6px;
width: max-content;
}
.month-label {
display: flex;
align-items: center;
justify-content: center;
width: 190px;
height: 42px;
font-size: 26px;
font-weight: 800;
text-align: center;
}
.circle-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1.5px solid var(--line);
border-radius: 50%;
padding: 0;
color: var(--accent);
background: #fff;
font-size: 24px;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.circle-button:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.assignment-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 78px;
padding: var(--space-4) var(--space-5);
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 1px 2px rgba(30, 30, 60, 0.03);
}
.assignment-card strong {
grid-column: 1;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
}
.assignment-card span {
grid-column: 1;
display: block;
margin-top: 4px;
color: var(--muted);
font-weight: 500;
}
.assignment-card b {
grid-column: 2;
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
font-size: 24px;
}
.toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 58px;
padding: var(--space-3) 28px;
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.toolbar > button {
border: 0;
background: transparent;
color: var(--accent);
font-weight: 750;
white-space: nowrap;
}
.toolbar > button:disabled {
color: #b8bdfc;
cursor: default;
}
.toolbar > button.primary-action,
.primary-action {
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
font-weight: 750;
}
.overview {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
padding: var(--space-4) 28px 0;
margin-bottom: 0;
}
.ov-tile {
padding: 14px 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 1px 2px rgba(30, 30, 60, 0.03);
}
.ov-tile--link {
display: block;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ov-tile--link .ov-label::after {
content: " ›";
}
.ov-tile--link:hover {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(30, 30, 60, 0.08);
}
.ov-label {
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.ov-val {
margin-top: 6px;
font-size: 21px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
}
.ov-val--neg { color: var(--danger); }
.ov-val--pos { color: var(--pos); }
.summary-head {
padding: var(--space-5) 28px var(--space-2);
}
.summary-head h2 {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
}
.summary-head p {
margin-top: 6px;
max-width: 640px;
color: var(--muted);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
.metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
padding: var(--space-4) 28px 0;
}
.metric-tile {
display: flex;
flex-direction: column;
padding: 14px 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 1px 2px rgba(30, 30, 60, 0.03);
}
.metric-label {
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.metric-val {
margin-top: 6px;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--accent-ink);
}
.metric-sub {
margin-top: auto;
padding-top: 6px;
color: var(--faint);
font-size: 11px;
font-weight: 600;
line-height: 1.3;
}
.metrics-note {
padding: var(--space-2) 28px 0;
color: var(--faint);
font-size: 11px;
font-weight: 600;
}
.group-essential-form {
margin-left: auto;
}
.group-essential-toggle {
height: 26px;
min-height: 0;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--muted);
font-size: 10px;
font-weight: 750;
}
.group-essential-toggle.is-on {
border-color: var(--pos);
background: var(--pos-soft);
color: var(--pos);
}
.budget-grid {
background: #fff;
}
.account-head {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 58px;
padding: var(--space-3) 28px;
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.account-head h2 {
font-size: 16px;
}
.account-head strong {
font-size: 18px;
}
.view-title {
display: grid;
gap: var(--space-1);
}
.back-link {
width: max-content;
color: var(--accent);
font-size: 11px;
font-weight: 750;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
height: 52px;
padding: 0 24px;
border-bottom: 1px solid var(--line-soft);
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
th:first-child, td:first-child {
text-align: left;
width: auto;
padding-left: 28px;
}
th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3),
th:nth-child(4), td:nth-child(4) {
width: 156px;
}
th {
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.group-row {
background: var(--row);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.group-row td {
border-top: 1px solid var(--line-soft);
}
.group-label {
display: flex;
align-items: center;
gap: var(--space-2);
}
.group-row.collapsed {
border-bottom: 1px solid var(--line);
}
.group-toggle {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
min-height: 20px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
color: var(--accent);
font-size: 13px;
font-weight: 850;
line-height: 1;
}
.category-row {
background: #fff;
font-size: 14.5px;
font-weight: 600;
transition: background .12s;
}
.category-row:hover {
background: color-mix(in oklab, var(--accent) 4%, #fff);
}
.category-row td:first-child {
padding-left: 28px;
}
.category-link {
display: inline-block;
padding-left: 28px;
color: inherit;
text-decoration: none;
}
.category-link:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.assigned-cell {
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-width: 112px;
}
.assigned-link {
height: auto;
min-height: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: right;
}
.assigned-link:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.available-pill {
display: inline-flex;
justify-content: center;
min-width: 66px;
border-radius: 999px;
padding: 4px 13px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
.available-pill.positive {
background: var(--pos-soft);
color: var(--pos);
}
.available-pill.neutral-text {
background: var(--zero);
color: var(--faint);
}
.available-pill.negative {
background: var(--danger-soft);
color: var(--danger);
}
.recent-panel {
margin: 24px 28px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.recent-panel h2 {
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.modal {
width: min(360px, calc(100vw - 32px));
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ink);
}
.wide-modal {
width: min(820px, calc(100vw - 32px));
}
.modal::backdrop {
background: rgba(20, 20, 30, 0.46);
}
.modal-card {
display: grid;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.modal-head h2 {
font-size: 16px;
}
.modal-head button {
min-height: 28px;
width: 28px;
padding: 0;
border: 0;
background: transparent;
font-size: 20px;
}
.modal-card label {
display: grid;
gap: var(--space-2);
color: var(--muted);
font-weight: 700;
}
.modal-note {
color: var(--muted);
font-weight: 700;
}
.modal-card input,
.modal-card select {
width: 100%;
}
.modal-card .checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--ink);
}
.modal-card .checkbox-label input {
width: auto;
min-height: 0;
}
.modal-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-1);
}
.modal-actions button {
min-width: 92px;
}
.modal-actions button[type="submit"] {
border-color: var(--accent);
background: var(--accent);
color: #fff;
font-weight: 750;
}
.category-editor {
display: grid;
gap: var(--space-4);
max-height: min(520px, 70vh);
overflow-y: auto;
}
.category-editor-groups {
display: grid;
gap: var(--space-4);
}
.category-order-actions {
display: flex;
justify-content: flex-end;
padding-top: var(--space-2);
border-top: 1px solid var(--line);
}
.category-order-actions button {
border-color: var(--accent);
background: var(--accent);
color: #fff;
font-weight: 750;
}
.category-order-actions button:disabled {
border-color: var(--line);
background: var(--zero);
color: var(--muted);
cursor: default;
}
.category-editor-group {
display: grid;
gap: var(--space-2);
}
.category-editor-group.dragging {
opacity: 0.55;
}
.category-editor-group-title {
display: flex;
align-items: center;
gap: var(--space-2);
}
.category-editor-group-title h3 {
margin: 0;
color: var(--muted);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}
.category-editor-group-list {
display: grid;
gap: var(--space-2);
}
.category-edit-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-2);
align-items: center;
padding: var(--space-2);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
}
.category-edit-row.dragging {
opacity: 0.55;
}
.drag-handle,
.group-drag-handle,
.group-drag-placeholder {
display: grid;
place-items: center;
width: 28px;
height: 34px;
color: var(--muted);
font-size: 16px;
font-weight: 850;
line-height: 1;
}
.drag-handle,
.group-drag-handle {
cursor: grab;
}
.category-edit-row.dragging .drag-handle {
cursor: grabbing;
}
.category-editor-group.dragging .group-drag-handle {
cursor: grabbing;
}
.category-edit-fields > form {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(150px, 220px) auto;
gap: var(--space-2);
align-items: center;
}
.category-edit-row > form[action="/categories/archive"] {
display: flex;
justify-content: flex-end;
}
.danger-action {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--danger);
font-weight: 750;
}
.movement-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
}
.movement-actions form {
display: inline-flex;
}
.movement-actions button {
height: 28px;
padding: 0 var(--space-2);
font-size: 10px;
white-space: nowrap;
}
.movement-edit-action {
color: var(--accent);
font-weight: 750;
}
.movements td {
padding: 10px 12px;
font-size: 8px;
}
.movements td:first-child { width: auto; color: var(--muted); }
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
border-radius: 999px;
padding: 3px 8px;
font-size: 8px;
font-weight: 750;
}
.pill.ok { background: var(--accent-soft); color: var(--accent); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.neutral { background: #edf1eb; color: var(--muted); }
.positive { color: var(--accent); }
.negative { color: var(--danger); }
.neutral-text, .muted { color: var(--muted); }
.center { text-align: center; }
.empty {
max-width: 720px;
margin: 96px auto;
padding: 0 24px;
}
.empty h1 { margin-bottom: 12px; }
.empty p { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
.app-shell { display: block; }
.sidebar {
position: static;
width: 100%;
min-width: 0;
height: auto;
}
.plan-header {
grid-template-columns: 1fr;
padding: 18px;
}
.toolbar {
overflow-x: auto;
padding-left: 18px;
padding-right: 18px;
}
.overview {
grid-template-columns: repeat(2, 1fr);
}
.budget-grid {
overflow-x: auto;
}
th, td {
padding: 0 14px;
}
}
/* Touch polish (only where the pointer is a finger — with a mouse, selecting
text and dragging images are normal, and :active would just flicker). */
@media (pointer: coarse) {
body {
-webkit-user-select: none;
user-select: none;
}
input, textarea, select, [contenteditable], .selectable {
-webkit-user-select: text;
user-select: text;
}
img {
-webkit-touch-callout: none;
-webkit-user-drag: none;
}
/* press feedback: opacity only — a transform would break sticky/fixed bars */
button:active, .circle-button:active, .ov-tile--link:active,
.account-group li a:active, .category-link:active, .main-nav a:active {
opacity: 0.6;
transition: opacity 80ms;
}
}
/* The hidden attribute must win over layout rules (labels are display:grid),
so toggling element.hidden in JS reliably shows/hides dialog fields. */
[hidden] {
display: none !important;
}
/* Login page */
main.login {
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: calc(24px + var(--sa-top)) 24px calc(24px + var(--sa-bottom));
}
.offline .brand-mark {
width: 56px;
height: 56px;
margin-bottom: 20px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--sidebar);
color: #fff;
font-size: 28px;
font-weight: 800;
}
.offline h1 { font-size: 22px; }
.offline p { font-size: 14px; }
.offline .primary-action {
height: 44px;
padding: 0 22px;
border-radius: 999px;
}
.login-card {
width: 100%;
max-width: 360px;
background: var(--panel);
border-radius: 18px;
padding: 32px 28px;
box-shadow: 0 18px 50px rgba(32, 35, 95, 0.12);
display: grid;
gap: 16px;
}
.login-card .brand-mark {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--sidebar);
color: #fff;
font-weight: 800;
font-size: 22px;
}
.login-card h1 {
margin: 0;
font-size: 22px;
}
.login-card label {
display: grid;
gap: 6px;
font-size: 14px;
color: var(--ink-2);
}
.login-card input {
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 15px;
}
.login-card button {
margin-top: 4px;
padding: 12px;
border: 0;
border-radius: 10px;
background: var(--sidebar);
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
.login-error {
margin: 0;
padding: 10px 12px;
border-radius: 10px;
background: rgba(200, 40, 40, 0.1);
color: #b3261e;
font-size: 14px;
}
.sidebar-logout {
margin-top: auto;
padding-top: 12px;
}
.sidebar-logout button {
width: 100%;
padding: 9px;
border: 1px solid var(--sidebar-border);
border-radius: 10px;
background: transparent;
color: var(--sidebar-muted);
cursor: pointer;
font-size: 14px;
}
.sidebar-logout button:hover {
color: #fff;
border-color: var(--sidebar-muted);
}
/* Reports (summary tab) */
.report {
margin-top: 28px;
/* Match the 28px inset of .summary-head/.metrics above so the charts line up
with the metric tiles instead of sitting flush against the panel edge. */
padding: 0 28px;
}
.report h3 {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
.trend-chart {
width: 100%;
max-width: 560px;
height: auto;
}
.trend-bar { fill: var(--accent); }
.trend-grid {
stroke: var(--line-soft);
stroke-width: 1;
}
.trend-label {
fill: var(--muted);
font-size: 11px;
font-family: inherit;
}
.trend-axis-label {
fill: var(--faint);
font-size: 10.5px;
font-family: inherit;
font-variant-numeric: tabular-nums;
}
.breakdown {
display: grid;
gap: 10px;
max-width: 620px;
}
.breakdown-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) 3fr auto;
align-items: center;
gap: 14px;
}
.breakdown-name {
font-size: 13.5px;
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breakdown-bar {
height: 12px;
border-radius: 6px;
background: var(--line-soft);
overflow: hidden;
}
.breakdown-bar > span {
display: block;
height: 100%;
border-radius: 6px;
background: var(--accent);
min-width: 3px;
}
.breakdown-val {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Account edit */
.edit-account-action {
height: 32px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--panel);
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.edit-account-action:hover { border-color: var(--accent); color: var(--accent-ink); }
.account-default-form {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
}
.account-default-form button {
width: 100%;
height: auto;
min-height: 40px;
border: 1px solid var(--line);
border-radius: 10px;
background: transparent;
color: var(--ink-2);
font-weight: 600;
cursor: pointer;
}
.account-default-form button:hover { border-color: var(--accent); color: var(--accent-ink); }
/* --- Navigation loading feedback ------------------------------------------
A top progress bar for any htmx request plus a content skeleton for slow
ones (see app.js). Kept out of the way of the native