:root{
  color-scheme: light;
  --bg:#f7f2e9; --surface:#ffffff; --surface-2:#f1ead9; --surface-3:#e9dfc9;
  --border: rgba(32,20,8,0.12); --border-soft: rgba(32,20,8,0.07);
  --text-primary:#201a10; --text-secondary:#6b5d47; --text-muted:#93856c;
  --accent:#b6752e; --accent-strong:#8a5a20; --accent-soft: rgba(182,117,46,0.13);
  --income:#1baf7a; --income-soft: rgba(27,175,122,0.14);
  --expense:#e34948; --expense-soft: rgba(227,73,72,0.13);
  --baseline:#c3b8a2; --grid:#e6dcc8;
  --slot1:#2a78d6; --slot2:#eb6834; --slot4:#eda100; --slot5:#e87ba4; --slot6:#008300; --slot7:#4a3aa7;
  --shadow: 0 1px 2px rgba(32,20,8,0.06), 0 8px 24px -12px rgba(32,20,8,0.18);
}
@media (prefers-color-scheme: dark){
  html:not(.theme-light){
    color-scheme: dark;
    --bg:#161209; --surface:#201a11; --surface-2:#291f13; --surface-3:#332616;
    --border: rgba(255,240,220,0.12); --border-soft: rgba(255,240,220,0.07);
    --text-primary:#f5ecdc; --text-secondary:#cabca0; --text-muted:#93856c;
    --accent:#e0a256; --accent-strong:#f0b56c; --accent-soft: rgba(224,162,86,0.16);
    --income:#199e70; --income-soft: rgba(25,158,112,0.18);
    --expense:#e66767; --expense-soft: rgba(230,103,103,0.16);
    --baseline:#4a4028; --grid:#332a18;
    --slot1:#3987e5; --slot2:#d95926; --slot4:#c98500; --slot5:#d55181; --slot6:#1ea31e; --slot7:#9085e9;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
html.theme-dark{
  color-scheme: dark;
  --bg:#161209; --surface:#201a11; --surface-2:#291f13; --surface-3:#332616;
  --border: rgba(255,240,220,0.12); --border-soft: rgba(255,240,220,0.07);
  --text-primary:#f5ecdc; --text-secondary:#cabca0; --text-muted:#93856c;
  --accent:#e0a256; --accent-strong:#f0b56c; --accent-soft: rgba(224,162,86,0.16);
  --income:#199e70; --income-soft: rgba(25,158,112,0.18);
  --expense:#e66767; --expense-soft: rgba(230,103,103,0.16);
  --baseline:#4a4028; --grid:#332a18;
  --slot1:#3987e5; --slot2:#d95926; --slot4:#c98500; --slot5:#d55181; --slot6:#1ea31e; --slot7:#9085e9;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html,body{ background:var(--bg); }
body{
  color:var(--text-primary);
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin:0;
  padding: 20px 16px 48px;
}
h1,h2{ font-family:"Fraunces", Georgia, serif; margin:0; }
a{ color:inherit; }

.app{ max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }

/* topbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1180px; margin:0 auto 18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:12px; height:12px; border-radius:3px; background:var(--accent); transform:rotate(45deg); flex:none; }
.brand h1{ font-size:1.5rem; font-weight:600; letter-spacing:-0.01em; }
.brand h1 em{ font-style:italic; color:var(--accent-strong); font-weight:500; }
.main-nav{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; box-shadow:var(--shadow); }
.main-nav a{ text-decoration:none; font-size:0.85rem; font-weight:700; color:var(--text-secondary); padding:7px 14px; border-radius:8px; }
.main-nav a.active, .main-nav a:hover{ background:var(--accent-soft); color:var(--accent-strong); }
.nav-user{ display:flex; align-items:center; gap:10px; }
.icon-btn{ appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:1rem; }
.icon-btn:hover{ color:var(--text-primary); }
.who{ display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:700; color:var(--text-secondary); }
.logout-link{ font-size:0.8rem; font-weight:700; color:var(--text-muted); text-decoration:none; border:1px solid var(--border); padding:7px 12px; border-radius:10px; background:var(--surface); }
.logout-link:hover{ color:var(--expense); border-color:var(--expense); }

/* period nav */
.period-nav-row{ display:flex; }
.period-nav{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; box-shadow:var(--shadow); }
.period-nav a{ text-decoration:none; color:var(--text-secondary); width:30px; height:30px; border-radius:8px; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.period-nav a:hover{ background:var(--surface-2); color:var(--text-primary); }
#periodLabel{ font-weight:700; font-size:0.92rem; padding:0 8px; min-width:132px; text-align:center; }
.today-btn{ font-size:0.78rem !important; width:auto !important; padding:0 10px !important; color:var(--accent-strong) !important; font-weight:700; border-left:1px solid var(--border); }

/* cards */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.card-head h2{ font-size:1.05rem; font-weight:600; }
.legend{ display:flex; gap:14px; font-size:0.78rem; color:var(--text-secondary); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }

/* KPI */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi-tile{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.kpi-label{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.kpi-value{ font-size:1.55rem; font-weight:800; letter-spacing:-0.01em; }
.kpi-value.income{ color:var(--income); }
.kpi-value.expense{ color:var(--expense); }
.kpi-delta{ font-size:0.78rem; color:var(--text-muted); font-weight:600; }
.kpi-delta.up{ color:var(--income); }
.kpi-delta.down{ color:var(--expense); }

/* entry form */
.form-card form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); }
.field label .hint{ text-transform:none; font-weight:500; letter-spacing:0; color:var(--text-muted); }
.field input, .field select{
  font: inherit; font-size:0.9rem; color:var(--text-primary); background:var(--surface-2);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-height:38px;
}
.field input:focus, .field select:focus, button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.f-date{ width:150px; } .f-cat{ width:190px; } .f-amount{ width:120px; } .f-note{ width:220px; flex:1 1 180px; } .f-name{ width:170px; }
.submit-btn{ appearance:none; border:none; background:var(--accent); color:#fff; font:inherit; font-weight:700; font-size:0.88rem; padding:9px 18px; border-radius:10px; cursor:pointer; min-height:38px; }
.submit-btn:hover{ background:var(--accent-strong); }
.hint{ font-size:0.8rem; color:var(--text-muted); }

/* charts */
.charts-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:14px; }
.chart-card svg{ width:100%; height:auto; display:block; }
.toggle-row{ display:flex; gap:6px; }
.toggle-row button{ appearance:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary); font:inherit; font-size:0.76rem; font-weight:700; padding:5px 10px; border-radius:8px; cursor:pointer; }
.toggle-row button.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }

.cat-rows{ display:flex; flex-direction:column; gap:10px; }
.cat-row{ display:grid; grid-template-columns:112px 1fr auto; align-items:center; gap:10px; }
.cat-label{ font-size:0.82rem; color:var(--text-secondary); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-track{ height:10px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
.cat-fill{ height:100%; border-radius:6px; min-width:3px; }
.cat-value{ font-size:0.82rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-primary); text-align:right; min-width:76px; }
.cat-empty{ font-size:0.85rem; color:var(--text-muted); padding:12px 0; }

/* tooltip */
.viz-tooltip{ position:fixed; z-index:50; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:8px 10px; font-size:0.78rem; color:var(--text-primary); pointer-events:none; max-width:220px; }
.viz-tooltip b{ font-variant-numeric:tabular-nums; }
.viz-tooltip .tt-date{ font-weight:700; margin-bottom:3px; }
.viz-tooltip .tt-row{ display:flex; justify-content:space-between; gap:12px; }
.viz-tooltip .tt-row.income{ color:var(--income); }
.viz-tooltip .tt-row.expense{ color:var(--expense); }

/* ledger */
.day-group{ margin-bottom:6px; }
.day-header{ display:flex; justify-content:space-between; align-items:center; padding:9px 4px 6px; border-bottom:1px solid var(--border-soft); font-size:0.8rem; }
.day-header .d-date{ font-weight:700; color:var(--text-secondary); }
.day-header .d-net{ font-weight:800; font-variant-numeric:tabular-nums; }
.day-header .d-net.up{ color:var(--income); } .day-header .d-net.down{ color:var(--expense); }
.entry-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.entry-row:last-child{ border-bottom:none; }
.type-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.type-dot.einnahme{ background:var(--income); } .type-dot.ausgabe{ background:var(--expense); }
.e-cat{ font-size:0.82rem; font-weight:700; min-width:120px; }
.e-note{ font-size:0.82rem; color:var(--text-secondary); flex:1 1 140px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.e-author{ display:flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--text-muted); }
.author-badge{ width:20px; height:20px; border-radius:50%; color:#fff; font-size:0.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.e-amount{ font-weight:800; font-variant-numeric:tabular-nums; min-width:92px; text-align:right; }
.e-amount.einnahme{ color:var(--income); } .e-amount.ausgabe{ color:var(--expense); }
.del-form{ margin:0; }
.e-del{ appearance:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); font:inherit; font-size:0.72rem; font-weight:700; padding:5px 9px; border-radius:8px; cursor:pointer; }
.e-del:hover{ color:var(--expense); border-color:var(--expense); }
.ledger-empty{ font-size:0.88rem; color:var(--text-muted); padding:22px 4px; text-align:center; }

.foot{ display:flex; justify-content:space-between; align-items:center; font-size:0.76rem; color:var(--text-muted); padding:2px 4px; flex-wrap:wrap; gap:8px; }

/* auth pages */
.auth-wrap{ min-height:80vh; display:flex; align-items:center; justify-content:center; }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 26px; box-shadow:var(--shadow); width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; }
.auth-card .brand{ justify-content:center; margin-bottom:4px; }
.auth-lead{ font-size:0.86rem; color:var(--text-secondary); text-align:center; margin:0; }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-form label{ display:flex; flex-direction:column; gap:5px; font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.auth-form label .hint{ text-transform:none; font-weight:500; letter-spacing:0; }
.auth-form input{ font:inherit; font-size:0.95rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.auth-note{ font-size:0.85rem; border-radius:10px; padding:8px 12px; margin:0; }
.auth-note.err{ background:var(--expense-soft); color:var(--expense); }
.auth-note.ok{ background:var(--income-soft); color:var(--income); }

/* admin users */
.user-list{ display:flex; flex-direction:column; }
.user-row{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.user-row:last-child{ border-bottom:none; }
.u-name{ font-weight:700; font-size:0.88rem; min-width:120px; }
.u-email{ font-size:0.82rem; color:var(--text-secondary); flex:1 1 160px; }
.u-role{ font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); background:var(--surface-2); padding:3px 8px; border-radius:6px; }
.u-role.is-admin{ color:var(--accent-strong); background:var(--accent-soft); }
.u-you{ font-size:0.76rem; color:var(--text-muted); font-style:italic; }

@media (max-width: 860px){
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .charts-grid{ grid-template-columns:1fr; }
  .f-note, .f-name{ flex:1 1 100%; width:auto; }
}
@media (max-width: 480px){
  .kpi-row{ grid-template-columns:1fr 1fr; }
  body{ padding:16px 12px 40px; }
  .cat-row{ grid-template-columns:88px 1fr auto; }
}