:root { --bg:#f3f6fb; --surface:#fff; --surface-2:#f7f9fc; --text:#172033; --muted:#64748b; --line:#dfe6ef; --primary:#1d4ed8; --primary-2:#2563eb; --good:#0f9f6e; --warn:#d97706; --danger:#dc2626; --sidebar:#101a2d; --shadow:0 10px 35px rgba(30,41,59,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:light; }
:root.dark { --bg:#0e1524; --surface:#152033; --surface-2:#1c2940; --text:#e6edf7; --muted:#9dafc7; --line:#2a3952; --sidebar:#0a1020; --shadow:0 14px 40px rgba(0,0,0,.28); color-scheme:dark; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { font-size:15px; } a { color:var(--primary); text-decoration:none; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(1.8rem,3vw,2.55rem); letter-spacing:-.04em; } h2 { font-size:1.08rem; } button,input,select,textarea { font:inherit; }
.page { display:grid; grid-template-columns:270px 1fr; min-height:100vh; }.sidebar { background:var(--sidebar); min-height:100vh; position:sticky; top:0; height:100vh; overflow-y:auto; }.page main { min-width:0; }.content { max-width:1500px; margin:0 auto; padding:34px 36px 60px!important; }.top-row { height:58px; background:color-mix(in srgb,var(--surface) 94%,transparent); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:14px; position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.navbar-brand { display:grid!important; grid-template-columns:44px 1fr; grid-template-rows:auto auto; align-items:center; color:#fff!important; gap:0 10px; font-weight:760; letter-spacing:-.02em; }.brand-mark { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:linear-gradient(145deg,#3b82f6,#1d4ed8); box-shadow:0 9px 22px rgba(37,99,235,.36); }.navbar-brand small { color:#8fa2bf; font-size:.68rem; font-weight:500; letter-spacing:.03em; }.nav-scrollable { padding:16px 0 30px; }.nav-item { font-size:.9rem; }.nav-item .nav-link,.nav-item button.nav-link { display:flex; width:100%; align-items:center; gap:10px; min-height:42px; color:#aebbd0; border-radius:10px; margin:2px 0; border:0; background:none; text-align:left; padding:.65rem .8rem; }.nav-item .nav-link:hover { background:#182740; color:#fff; }.nav-item .nav-link.active { color:#fff; background:linear-gradient(100deg,#1d4ed8,#2563eb); box-shadow:0 7px 20px rgba(29,78,216,.3); }.account-link { margin-top:24px; border-top:1px solid #293650; padding-top:14px; }
.environment-pill { color:var(--muted); font-size:.8rem; }.theme-button { width:36px; height:36px; border:1px solid var(--line); color:var(--text); background:var(--surface); border-radius:10px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:28px; }.page-heading p { color:var(--muted); margin-bottom:0; max-width:720px; }.eyebrow { display:block; color:var(--primary-2); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; }.quick-actions { display:flex; gap:10px; white-space:nowrap; }.btn { border-radius:10px; padding:.68rem 1rem; font-weight:650; border:1px solid transparent; }.btn-primary { background:var(--primary); border-color:var(--primary); }.btn-secondary { color:var(--text); background:var(--surface); border-color:var(--line); }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }.metric-card { position:relative; display:flex; flex-direction:column; gap:8px; padding:20px; min-height:146px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#94a3b8; }.metric-card.positive::before { background:var(--good); }.metric-card.accent::before { background:var(--primary-2); }.metric-card.warning::before { background:var(--warn); }.metric-card span { color:var(--muted); font-size:.82rem; font-weight:650; }.metric-card strong { font-size:1.75rem; letter-spacing:-.035em; }.metric-card small { margin-top:auto; color:var(--muted); }.dashboard-columns { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px; margin-bottom:16px; }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.panel-heading h2 { margin:0; }.panel-heading a { font-size:.82rem; }.task-list { list-style:none; padding:0; margin:0; }.task-list li { display:flex; gap:11px; padding:12px 0; border-top:1px solid var(--line); }.task-list span { display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:8px; color:#9a5200; background:#fff3d7; font-weight:800; }.status-list { margin:0; }.status-list div { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-top:1px solid var(--line); }.status-list dt { color:var(--muted); font-weight:500; }.status-list dd { margin:0; text-align:right; font-weight:650; }.empty-state,.loading { color:var(--muted); padding:24px 0; }
.data-table { width:100%; border-collapse:collapse; }.data-table th { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }.data-table td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }.data-table tr:last-child td { border-bottom:0; }.status-badge { display:inline-flex; border-radius:999px; padding:4px 9px; background:var(--surface-2); color:var(--muted); font-size:.74rem; font-weight:700; }.status-badge.good { background:#dff7ed; color:#087552; }.status-badge.warn { background:#fff0d6; color:#995600; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.field { display:flex; flex-direction:column; gap:6px; }.field.full { grid-column:1/-1; }.field label { font-size:.8rem; font-weight:650; color:var(--muted); }.form-control,.form-select { color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:.68rem .78rem; min-height:43px; }.form-control:focus,.form-select:focus { border-color:var(--primary-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-2) 16%,transparent); }.validation-message,.text-danger { color:var(--danger); font-size:.78rem; }.notice { border-radius:12px; padding:13px 15px; margin-bottom:15px; color:#765000; background:#fff7dd; border:1px solid #f2df9b; }.success { color:#087552; background:#dff7ed; border:1px solid #a7e8d1; }.split-view { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(0,1.4fr); gap:18px; align-items:start; }.money { font-variant-numeric:tabular-nums; font-weight:700; }.help { color:var(--muted); font-size:.82rem; }.danger-zone { border-color:#f1b8b8; }
.tax-tabs { display:flex; gap:7px; overflow-x:auto; margin:0 0 18px; padding:5px; border:1px solid var(--line); background:var(--surface); border-radius:13px; }.tax-tabs button { white-space:nowrap; color:var(--muted); background:transparent; border:0; border-radius:9px; padding:.64rem .85rem; font-weight:650; }.tax-tabs button.active { color:#fff; background:var(--primary); }.tax-step { padding:12px 0; border-top:1px solid var(--line); }.tax-step summary { display:flex; justify-content:space-between; gap:20px; cursor:pointer; }.tax-step p { color:var(--muted); margin:10px 0 3px; }.tax-step small { color:var(--muted); }.danger-card::before { background:var(--danger); }
.paypal-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }.paypal-account-layout { grid-template-columns:minmax(320px,.75fr) minmax(420px,1.25fr); }.paypal-account-card { padding:16px 0; border-top:1px solid var(--line); }.paypal-account-card:first-of-type { border-top:0; padding-top:0; }.paypal-account-card .btn { width:100%; margin-top:12px; }.transaction-heading { align-items:flex-end; gap:20px; }.transaction-heading>div:first-child h2 { margin-bottom:4px; }.transaction-filters { display:grid; grid-template-columns:minmax(250px,1.4fr) minmax(180px,.8fr); gap:10px; width:min(650px,60%); }.transaction-list { display:grid; gap:13px; }.transaction-card { position:relative; border:1px solid var(--line); border-left:4px solid #94a3b8; border-radius:14px; background:var(--surface-2); padding:17px; overflow:hidden; }.transaction-card.category-income { border-left-color:var(--good); }.transaction-card.category-outgoingpayment,.transaction-card.category-refund { border-left-color:var(--warn); }.transaction-card.category-fee { border-left-color:var(--danger); }.transaction-card.category-transfer,.transaction-card.category-hold { border-left-color:var(--primary-2); }.transaction-card header,.transaction-card footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }.transaction-title { display:flex; align-items:center; gap:12px; min-width:0; }.transaction-title>div { min-width:0; }.transaction-title strong,.transaction-title span { display:block; }.transaction-title span { color:var(--muted); font-size:.8rem; margin-top:3px; }.transaction-icon { display:grid!important; place-items:center; flex:0 0 38px; height:38px; border-radius:12px; color:var(--text)!important; background:var(--surface); font-size:1.25rem!important; font-weight:800; }.transaction-badges { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }.transaction-content { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:24px; padding:16px 0; margin:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.transaction-description p { margin-bottom:9px; font-weight:650; }.transaction-description span { display:block; color:var(--muted); font-size:.82rem; margin-top:4px; overflow-wrap:anywhere; }.transaction-amounts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.transaction-amounts div { padding:10px; border:1px solid var(--line); background:var(--surface); border-radius:10px; }.transaction-amounts span,.transaction-amounts strong { display:block; }.transaction-amounts span { color:var(--muted); font-size:.7rem; margin-bottom:5px; }.transaction-amounts strong { font-size:.9rem; font-variant-numeric:tabular-nums; }.transaction-ids { display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--muted); font-size:.76rem; overflow-wrap:anywhere; }.transaction-card footer .btn { flex:0 0 auto; }.expense-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }.amount-preview,.selected-file { flex-direction:row; justify-content:space-between; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }.amount-preview span,.selected-file small { color:var(--muted); }.amount-preview strong { font-size:1.2rem; }.table-actions { text-align:right; white-space:nowrap; }.btn-small { padding:.45rem .65rem; font-size:.78rem; }.expense-table small { color:var(--muted); }.expense-workflow { grid-template-columns:repeat(2,minmax(0,1fr)); }
.recurring-expense-layout { display:grid; grid-template-columns:minmax(340px,.8fr) minmax(420px,1.2fr); gap:20px; align-items:start; }.recurring-list { display:grid; gap:12px; }.recurring-card { border:1px solid var(--line); border-left:4px solid var(--good); border-radius:13px; background:var(--surface-2); padding:15px; }.recurring-card.paused { border-left-color:var(--warn); opacity:.82; }.recurring-card header,.recurring-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }.recurring-card header div strong,.recurring-card header div span { display:block; }.recurring-card header div span { color:var(--muted); font-size:.78rem; margin-top:3px; }.recurring-card p { margin:12px 0; color:var(--muted); }.recurring-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 13px; }.recurring-card dl div { padding:9px; border-radius:9px; background:var(--surface); }.recurring-card dt { color:var(--muted); font-size:.7rem; }.recurring-card dd { margin:3px 0 0; font-weight:700; font-size:.84rem; }.recurring-card footer { justify-content:flex-end; border-top:1px solid var(--line); padding-top:12px; }
#blazor-error-ui { background:#fff1d6; bottom:0; box-shadow:0 -1px 3px rgba(0,0,0,.2); display:none; left:0; padding:.8rem 1.25rem; position:fixed; width:100%; z-index:1000; }.navbar-toggler { display:none; }
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-columns,.split-view{grid-template-columns:1fr}}
@media(max-width:760px){.page{display:block}.sidebar{height:auto;min-height:0;position:relative}.navbar-toggler{display:block;appearance:none;position:absolute;top:14px;right:18px;width:38px;height:32px;border:1px solid #43516a;border-radius:9px}.navbar-toggler:after{content:'☰';color:#fff;display:grid;place-items:center;height:100%}.navbar-toggler:checked~.nav-scrollable{display:block}.nav-scrollable{display:none}.top-row{display:none}.content{padding:24px 16px 45px!important}.page-heading{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.data-table{display:block;overflow-x:auto}.quick-actions{width:100%}.quick-actions .btn{flex:1}}
@media(max-width:1050px){.paypal-account-layout,.expense-workflow,.recurring-expense-layout{grid-template-columns:1fr}.transaction-content{grid-template-columns:1fr}.transaction-heading{align-items:stretch;flex-direction:column}.transaction-filters{width:100%}}
@media(max-width:760px){.transaction-filters{grid-template-columns:1fr}.transaction-card header,.transaction-card footer{align-items:flex-start;flex-direction:column}.transaction-badges{justify-content:flex-start}.transaction-amounts{grid-template-columns:1fr}.transaction-card footer .btn{width:100%;text-align:center}.paypal-metrics,.expense-metrics{grid-template-columns:1fr}}