:root{
  --bg:#efece5;
  --card:#ffffff;
  --dark:#171512;
  --dark-soft:#26221d;
  --orange:#f4762d;
  --orange-soft:#fde4d2;
  --green:#1fae6c;
  --green-soft:#d9f3e6;
  --yellow:#eab308;
  --yellow-soft:#fdf1c8;
  --red:#e6483a;
  --red-soft:#fbdedb;
  --text:#171512;
  --muted:#8a8378;
  --border:#e7e2d9;
  --radius:20px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}

.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:84px;
  background:var(--card);
  margin:16px 0 16px 16px;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 0;
  gap:6px;
}
.logo-mark{
  width:40px;height:40px;border-radius:12px;
  background:var(--dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;margin-bottom:18px;
}
.nav-icon{
  width:52px;height:52px;
  border:none;background:transparent;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);position:relative;
}
.nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.nav-icon:hover{background:var(--orange-soft);color:var(--orange);}
.nav-icon.active{background:var(--dark);color:#fff;}
.nav-icon span{
  position:absolute;left:60px;top:50%;transform:translateY(-50%);
  background:var(--dark);color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;
  z-index:20;
}
.nav-icon:hover span{opacity:1;}
.sidebar-spacer{flex:1;}

/* Main */
.main{flex:1;padding:24px 28px;max-width:1400px;display:flex;flex-direction:column;}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.brand-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:4px;}
.welcome-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.welcome h1{margin:0;font-size:26px;}
.welcome .accent{color:var(--orange);}
.period-label{margin:4px 0 0;color:var(--muted);font-size:14px;}

.sync-btn{
  position:relative;display:flex;align-items:center;gap:7px;
  background:var(--card);border:1px solid var(--border);color:var(--text);
  border-radius:999px;padding:7px 14px 7px 12px;font-size:13px;font-weight:600;cursor:pointer;
}
.sync-btn svg{stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sync-btn:hover{border-color:var(--orange);color:var(--orange);}
.sync-btn:hover svg{stroke:var(--orange);}
.sync-btn.synced{border-color:var(--green);color:var(--green);}
.sync-btn.synced svg{stroke:var(--green);}
.sync-dot{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  display:none;margin-left:2px;
}
.sync-dot.show{display:inline-block;}
.sync-feedback{font-size:12px;color:var(--green);font-weight:600;}
.sync-reminder{
  margin:6px 0 0;font-size:13px;color:#8a6a04;background:var(--yellow-soft);
  display:none;padding:6px 12px;border-radius:8px;width:fit-content;
}
.sync-reminder.show{display:block;}

.topbar-actions{display:flex;align-items:center;gap:10px;}

.hero-empty{
  display:none;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:80px 24px;max-width:640px;margin:20px auto;
}
.hero-empty.show{display:flex;}
.hero-title{margin:0;font-size:40px;line-height:1.15;}
.hero-logo{max-width:100%;width:480px;height:auto;display:block;}
.hero-subline{margin:0;color:var(--muted);font-size:16px;max-width:460px;}
.btn-hero{
  margin-top:10px;background:var(--orange);color:#fff;border:none;border-radius:999px;
  padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;
}
.btn-hero:hover{background:#e0621b;}
.btn-hero-secondary{
  margin-top:2px;background:none;border:none;color:var(--muted);
  font-size:13px;text-decoration:underline;cursor:pointer;padding:4px;
}
.btn-hero-secondary:hover{color:var(--text);}
.hero-privacy{
  margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5;max-width:440px;
}
.hero-privacy code{background:var(--orange-soft);padding:1px 5px;border-radius:5px;font-size:12px;}
.dashboard-content.hide{display:none;}

.pill-select{
  border:1px solid var(--border);background:var(--card);
  border-radius:999px;padding:10px 16px;font-size:14px;color:var(--text);
  cursor:pointer;
}

.filter-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange-soft);color:#9a4a1a;
  border-radius:999px;padding:8px 8px 8px 16px;font-size:13px;font-weight:600;
  margin-bottom:14px;
}
.filter-chip button{
  border:none;background:rgba(0,0,0,.08);color:inherit;
  width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.filter-chip button:hover{background:rgba(0,0,0,.16);}
.category-row{cursor:pointer;border-radius:10px;padding:4px;margin:-4px;transition:background .12s;}
.category-row:hover{background:var(--orange-soft);}

.btn-primary{
  background:var(--dark);color:#fff;border:none;border-radius:999px;
  padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.btn-primary:hover{background:var(--dark-soft);}
.btn-primary svg{stroke:#fff;fill:none;stroke-width:2;}

.btn-dark{
  background:var(--dark);color:#fff;border:none;border-radius:12px;
  padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-dark.small{padding:6px 12px;font-size:13px;border-radius:8px;}
.btn-dark:hover{background:var(--dark-soft);}

.btn-danger{
  background:var(--red-soft);color:var(--red);border:none;border-radius:12px;
  padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-danger:hover{background:var(--red);color:#fff;}

/* Cards */
.card{
  background:var(--card);border-radius:var(--radius);padding:22px;
}
.card h3{margin:0 0 4px;font-size:17px;}
.card h4{margin:20px 0 8px;font-size:14px;color:var(--muted);}
.hint{color:var(--muted);font-size:13px;line-height:1.5;margin:6px 0 16px;}

.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:10px;}
.card-head-value{font-size:20px;font-weight:700;}
.card-head-actions{display:flex;align-items:center;gap:14px;}
.income-color{color:var(--green);}
.expense-color{color:var(--red);}

.tx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.select-all-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;}
.bulk-bar{
  display:none;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--orange-soft);color:#9a4a1a;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;
}
.bulk-bar.show{display:flex;}
.bulk-bar .btn-dark.small{padding:6px 12px;font-size:12px;}
.tx-checkbox{flex-shrink:0;width:16px;height:16px;cursor:pointer;}

/* Stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px;}
.stat-card{background:var(--card);border-radius:var(--radius);padding:20px;}
.stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px;margin-bottom:14px;}
.stat-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.stat-icon.bilanz{background:#eee9e0;color:var(--dark);}
.stat-icon.einnahmen{background:var(--green-soft);color:var(--green);}
.stat-icon.ausgaben{background:var(--red-soft);color:var(--red);}
.stat-icon.sparquote{background:var(--orange-soft);color:var(--orange);}
.stat-value{font-size:28px;font-weight:700;letter-spacing:-0.5px;}
.stat-sub{font-size:13px;color:var(--muted);margin-top:6px;}
.stat-sub.up{color:var(--green);}
.stat-sub.down{color:var(--red);}

/* Mid grid */
.mid-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-bottom:18px;align-items:stretch;}
.import-card{display:flex;flex-direction:column;}
.last-import-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--muted);font-size:14px;margin-top:8px;}
.import-info{margin-top:10px;font-size:14px;line-height:1.7;}
.import-info b{color:var(--text);}
.import-info .muted{color:var(--muted);}

.chart-card{display:flex;flex-direction:column;}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;}
.chart-total{font-size:24px;font-weight:700;margin-top:4px;}
.chart-container{flex:1;min-height:220px;position:relative;}

.chart-tooltip{
  position:absolute;top:0;left:0;
  background:var(--dark);color:#fff;border-radius:12px;padding:10px 14px;
  font-size:12px;line-height:1.7;pointer-events:none;opacity:0;
  transform:translate(-50%,-108%);white-space:nowrap;z-index:5;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.chart-tooltip.show{opacity:1;}
.chart-tooltip .tt-date{font-weight:700;margin-bottom:2px;}
.chart-tooltip .tt-row{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.chart-tooltip .tt-row i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.chart-tooltip .tt-label{display:flex;align-items:center;gap:6px;color:#d8d3c8;}

.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;justify-content:flex-end;max-width:260px;}
.legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;}
.dot.green{background:var(--green);}
.dot.orange{background:var(--orange);}

/* Bottom grid */
.bottom-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}

/* Budget health gauge */
.budget-health{display:flex;flex-direction:column;align-items:center;}
.gauge-wrap{position:relative;width:220px;height:130px;}
.gauge-score{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
}
.gauge-score .label{font-size:14px;font-weight:700;color:var(--muted);}
.gauge-score .value{font-size:36px;font-weight:800;line-height:1.1;}
.gauge-score .value.green{color:var(--green);}
.gauge-score .value.yellow{color:var(--yellow);}
.gauge-score .value.red{color:var(--red);}

.verdict-message{
  width:100%;border-radius:14px;padding:14px 16px;margin-top:14px;
  font-size:14px;line-height:1.5;border:1px solid transparent;
}
.verdict-message.green{background:var(--green-soft);border-color:#b9e8d1;color:#0e7a4b;}
.verdict-message.yellow{background:var(--yellow-soft);border-color:#f2dd8f;color:#8a6a04;}
.verdict-message.red{background:var(--red-soft);border-color:#f3bdb6;color:#a4241a;}
.verdict-headline{font-weight:800;display:inline;text-transform:uppercase;letter-spacing:.03em;font-size:12px;margin-right:4px;}

.health-reasons{width:100%;margin-top:14px;}
.health-reasons .why-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;}
.health-reasons ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.health-reasons li{font-size:13px;line-height:1.5;padding-left:16px;position:relative;color:var(--text);}
.health-reasons li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--muted);}

/* Transaction list */
.tx-list{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto;}
.tx-list.full{max-height:none;}
.tx-row{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid var(--border);}
.tx-row:last-child{border-bottom:none;}
.tx-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1;}
.tx-avatar{width:38px;height:38px;border-radius:12px;background:#f0ede6;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--dark);flex-shrink:0;}
.tx-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.tx-meta{font-size:12px;color:var(--muted);}
.tx-amount{font-weight:700;font-size:14px;white-space:nowrap;flex-shrink:0;}
.tx-amount.pos{color:var(--green);}
.tx-amount.neg{color:var(--red);}
.tx-empty{color:var(--muted);font-size:14px;padding:20px 4px;}

.cat-select{
  border:1px solid var(--border);background:#fafaf8;color:var(--text);
  border-radius:8px;padding:6px 10px;font-size:12px;max-width:170px;
  flex-shrink:0;cursor:pointer;
}
.cat-select.manual{border-color:var(--orange);background:var(--orange-soft);color:#9a4a1a;}

/* Category breakdown */
.category-list{display:flex;flex-direction:column;gap:14px;}
.category-row .cat-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;}
.category-row .cat-top span:first-child{font-weight:600;}
.cat-tagline{font-size:12px;color:var(--muted);font-style:italic;margin:-4px 0 6px;}
.cat-bar-bg{background:var(--border);border-radius:999px;height:8px;overflow:hidden;}
.cat-bar-fill{height:100%;border-radius:999px;background:var(--orange);}

/* Rules table */
.rules-table{width:100%;border-collapse:collapse;margin-top:6px;}
.rules-table th{text-align:left;font-size:12px;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--border);}
.rules-table td{padding:6px;border-bottom:1px solid var(--border);}
.rules-table input, .rules-table select{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;background:#fafaf8;
}
.rules-table input:disabled{background:transparent;border-color:transparent;color:var(--muted);cursor:not-allowed;padding-left:2px;}
.rules-table .del-btn{background:none;border:none;color:var(--red);cursor:pointer;font-size:16px;padding:4px 8px;}

/* Import view */
.dropzone{
  border:2px dashed var(--border);border-radius:16px;padding:36px;text-align:center;
  color:var(--muted);cursor:pointer;margin-bottom:16px;transition:.15s;
}
.dropzone svg{stroke:var(--muted);fill:none;stroke-width:1.6;margin-bottom:8px;}
.dropzone:hover, .dropzone.drag{border-color:var(--orange);background:var(--orange-soft);color:var(--orange);}
.dropzone:hover svg, .dropzone.drag svg{stroke:var(--orange);}
.import-msg{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;}
.import-msg.ok{background:var(--green-soft);color:#0e7a4b;}
.import-msg.err{background:var(--red-soft);color:var(--red);}

/* Settings */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border);gap:20px;}
.settings-row:last-child{border-bottom:none;}
.settings-row .hint{margin:4px 0 0;}

/* Views */
.view{display:none;}
.view.active{display:block;}

/* Footer */
.app-footer{margin-top:auto;padding:24px 4px 4px;text-align:center;}
.footer-link{
  background:none;border:none;color:var(--muted);font-size:12px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.footer-link:hover{color:var(--text);}

/* Rechtliches */
#view-rechtliches p{font-size:14px;line-height:1.6;margin:0 0 12px;}
#view-rechtliches h4{margin:20px 0 4px;font-size:14px;}
#view-rechtliches h4:first-of-type{margin-top:4px;}
#view-rechtliches code{background:#f0ede6;padding:1px 5px;border-radius:4px;font-size:13px;}
.placeholder-note{background:var(--yellow-soft);border:1px solid #f2dd8f;border-radius:10px;padding:10px 12px;color:#8a6a04;}

/* Modal */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(23,21,18,.45);
  align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--card);border-radius:16px;padding:24px;width:100%;max-width:360px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modal-box h3{margin:0 0 4px;font-size:17px;}
.modal-box input{
  width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-size:14px;margin-top:4px;background:#fafaf8;color:var(--text);
}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

@media (max-width: 1000px){
  .mid-grid{grid-template-columns:1fr;}
  .bottom-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  .sidebar{width:64px;}
  .stat-grid{grid-template-columns:1fr;}
}