:root {
  --bg: #f3f0ea;
  --card: #ffffff;
  --ink: #2a2622;
  --muted: #9a938a;
  --line: #ece7df;
  --chip: #f4f1ec;
  --field: #f4f1ec;
  --accent: #f1c84b;
  --gold: #f1c84b;
  --gold-deep: #e8b73a;
  --teal: #5fc9c0;
  --green: #9fb23f;
  --pos: #2f9e93;
  --uncat: #d2544a;            /* rote Schrift für unkategorisierte Buchungen */
  --in: #3fae6b;              /* grüner Icon-Rahmen = Eingang */
  --out: #e0584c;            /* roter Icon-Rahmen = Ausgang */
  --btn-dark-bg: #2a2622;
  --btn-dark-ink: #ffffff;
  --balance-bg: linear-gradient(135deg, #f6d96b 0%, #f1c84b 55%, #e8b73a 100%);
  --balance-ink: #2a2622;
  --shadow: 0 10px 30px rgba(60, 50, 40, 0.06);
  --radius: 22px;
}

/* ---------- Theme: Bankio (pastell, hell) ---------- */
:root[data-theme="bankio"] {
  --bg: linear-gradient(160deg, #eaf1fd 0%, #e7f0f6 50%, #e9f5ee 100%);
  --card: #ffffff;
  --ink: #1d2840;
  --muted: #8893a8;
  --line: #e4ebf7;
  --chip: #eef3fc;
  --field: #eef3fc;
  --accent: #7aa0f0;
  --pos: #2f9e93;
  --uncat: #e0574e;
  --in: #54b98a;
  --out: #e8857a;
  --btn-dark-bg: #1d2840;
  --btn-dark-ink: #ffffff;
  --balance-bg: linear-gradient(135deg, #bcd3fb 0%, #a8c6f7 55%, #9bd9bf 100%);
  --balance-ink: #16263f;
  --shadow: 0 14px 34px rgba(80, 110, 170, 0.12);
}

/* ---------- Theme: Dark (Neon-Limette) ---------- */
:root[data-theme="dark"] {
  --bg: #121317;
  --card: #1d1f25;
  --ink: #eef0f2;
  --muted: #8a8f99;
  --line: #2c2f37;
  --chip: #272a32;
  --field: #272a32;
  --accent: #c5f82a;
  --pos: #5fd3a0;
  --uncat: #ff6b5e;
  --in: #54c98a;
  --out: #ff6f63;
  --btn-dark-bg: #c5f82a;
  --btn-dark-ink: #14160c;
  --balance-bg: linear-gradient(135deg, #2b3320 0%, #1d1f25 60%);
  --balance-ink: #eef0f2;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.app { max-width: 1180px; margin: 0 auto; padding: 24px 26px 60px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; margin-bottom: 20px; flex-wrap: wrap;
}
.topbar-left p { font-size: 14px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Import-Button am Seitenende nur auf Mobile (siehe Media-Query unten) */
.import-bar-mobile { display: none; }

.period-select {
  border: 0; background: var(--card); border-radius: 999px; padding: 9px 16px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer; min-width: 110px;
}

.btn {
  border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: transform .1s, opacity .15s;
  font-family: inherit;
}
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); }
.btn-ghost { background: var(--chip); color: var(--ink); }
.btn.small { padding: 7px 14px; font-size: 13px; }

/* Design-Umschalter */
.theme-switch { position: relative; }
.theme-btn {
  border: 0; background: var(--card); box-shadow: var(--shadow);
  border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.theme-btn .caret { color: var(--muted); }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 6px; z-index: 60; min-width: 150px;
}
.theme-opt {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.theme-opt:hover, .theme-opt.on { background: var(--chip); }

/* Kategorie ein-/ausblenden (Sparen) */
.spar-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: var(--card); box-shadow: var(--shadow);
  border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.spar-toggle .spar-ic { font-size: 15px; line-height: 1; }
.spar-toggle .spar-state {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--pos); color: #fff; border-radius: 999px; padding: 2px 8px;
}
.spar-toggle.off { opacity: .85; }
.spar-toggle.off .spar-name { text-decoration: line-through; color: var(--muted); }
.spar-toggle.off .spar-state { background: var(--muted); }

/* Richtungs-Filter (Einnahmen/Ausgaben/Beides) */
.seg {
  display: inline-flex; gap: 2px; background: var(--chip); border-radius: 999px;
  padding: 3px; margin: 0 0 12px;
}
.seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* Hiveage-Abgleich (jetzt auf der Schritt-1-Seite) */
.wizard-card #s1Run, .wizard-card #hiveageRun { margin-bottom: 4px; }
.wizard-card .hiveage-sec:first-of-type { margin-top: 4px; }
.hiveage-note { font-size: 13px; color: var(--pos); font-weight: 600; padding: 4px 0 8px; }
.hiveage-summary {
  font-size: 13px; color: var(--ink); padding: 8px 0 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.hiveage-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 0 4px; }
.tx-item.off { opacity: .5; }
.hv-auto { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.hv-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.hv-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.hv-inv-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.hv-inv-name { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-sel, select.hv-sel {
  font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--field); color: var(--ink); outline: none; max-width: 230px; flex-shrink: 0;
}
.hv-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- Wizard (Schritt 1: Hiveage-Zuordnung) ---------- */
.goto-step1 {
  border: 0; background: var(--card); box-shadow: var(--shadow);
  border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.wizard-screen { display: flex; justify-content: center; padding: 40px 0; }
.wizard-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px 38px; max-width: 640px; width: 100%;
}
.wizard-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 11px; font-weight: 700; }
.wz-step { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wz-step.active { color: var(--ink); }
.wz-arrow { color: var(--muted); }
.wizard-card h2 { font-size: 20px; margin-bottom: 16px; }
.wizard-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.wizard-summary > div {
  flex: 1; min-width: 120px; background: var(--chip); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.wz-num { font-size: 22px; font-weight: 700; color: var(--ink); }
.wz-lbl { font-size: 12px; color: var(--muted); }
.wizard-hint { line-height: 1.55; }
.s1-key-row { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.s1-key-row input { flex: 1; min-width: 200px; }
#s1Result .hiveage-summary:first-child { border-top: 0; }
.wizard-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- Empty state ---------- */
.empty-state { display: flex; justify-content: center; padding: 80px 0; }
.empty-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 48px 44px; text-align: center; max-width: 440px;
}
.empty-emoji { font-size: 44px; margin-bottom: 12px; }
.empty-card h2 { font-size: 22px; margin-bottom: 10px; }
.empty-card p { font-size: 14px; margin-bottom: 22px; line-height: 1.5; }

/* ---------- Monats-Übersicht ---------- */
.month-strip {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 18px;
}
.ms-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ms-controls { display: flex; gap: 8px; align-items: center; }
.ms-bars { display: flex; gap: 6px; align-items: stretch; }
.ms-month {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 2px 4px; border-radius: 12px; font-family: inherit;
  transition: background .12s;
}
.ms-month:hover { background: var(--chip); }
.ms-month.active { background: var(--chip); }
/* Divergierend: Einnahmen nach oben, Ausgaben nach unten ab der Nulllinie.
   Balken teilen sich den Platz gleichmäßig (Spalte = flex:1, Balken breit). */
.ms-col { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ms-up   { width: 100%; height: 64px; display: flex; align-items: flex-end;   justify-content: center; }
.ms-down { width: 100%; height: 64px; display: flex; align-items: flex-start; justify-content: center; }
.ms-base { width: 100%; border-top: 1px solid var(--line); }
.ms-bar { width: 64%; max-width: 56px; min-height: 2px; transition: height .25s; }
.ms-bar-in  { background: var(--pos); border-radius: 6px 6px 0 0; }
.ms-bar-out { background: var(--out); border-radius: 0 0 6px 6px; }
.ms-month.active .ms-bar-in,
.ms-month.active .ms-bar-out { filter: brightness(.9); }
.ms-name { font-size: 11px; color: var(--muted); font-weight: 600; }
/* Legende im Kopf */
.ms-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.ms-legend span { display: flex; align-items: center; gap: 5px; }
.ms-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ms-dot.in { background: var(--pos); }
.ms-dot.out { background: var(--out); }

/* ---------- Grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  grid-auto-flow: row dense;
}
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}
.card-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }

.pill {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--chip); padding: 3px 10px; border-radius: 999px;
}

/* Karten-Spannweiten (Punkt 6) */
.uncat-card { grid-column: span 2; display: flex; flex-direction: column; }
.kpi-card.slim { grid-column: span 1; }
.balance-card.slim { grid-column: span 1; }
.donut-card { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.tx-card { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.line-card { grid-column: span 2; }
.manual-card { grid-column: span 2; display: flex; flex-direction: column; }
.search-card { grid-column: span 2; display: flex; flex-direction: column; }

/* KPI card */
.kpi-card { display: flex; flex-direction: column; justify-content: space-between; }
.kpi-value { font-size: 30px; font-weight: 700; margin: 16px 0 14px; letter-spacing: -0.5px; }
.kpi-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi-mini { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 12px; background: var(--chip); color: var(--ink); }

/* Balance card */
.balance-card {
  background: var(--balance-bg); color: var(--balance-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.balance-card::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.16);
}
.card-label.light { color: var(--balance-ink); opacity: .72; }
.balance-value { font-size: 30px; font-weight: 700; margin: 14px 0; letter-spacing: -0.5px; color: var(--balance-ink); position: relative; }
.balance-row { display: flex; justify-content: flex-end; align-items: center; position: relative; }
.net-pill { background: var(--chip); color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }

/* Transactions / Listen */
.tx-search {
  border: 0; background: var(--field); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; width: 150px; color: var(--ink); font-family: inherit;
}
.tx-search:focus { outline: 2px solid var(--accent); }
.tx-list { overflow-y: auto; flex: 1; max-height: 540px; padding-right: 4px; }
.tx-day-label { font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 8px; }
.tx-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.tx-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
  background: var(--chip); border: 2px solid transparent;
}
button.tx-icon { font-family: inherit; padding: 0; }
button.tx-icon.cat-pick { cursor: pointer; transition: transform .1s; }
button.tx-icon.cat-pick:hover { transform: scale(1.06); }
.tx-info { flex: 1; min-width: 0; }
.tx-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-name.uncat { color: var(--ink); }
/* Klickbarer Name (Einzelbuchungen umbenennen) – sieht aus wie Text, ist aber ein Button */
button.tx-name.editable {
  display: block; max-width: 100%; text-align: left; border: 0; background: transparent;
  padding: 0; margin: 0; cursor: text; color: var(--ink); font-family: inherit; font-size: 14px;
  font-weight: 600; line-height: 1.3; border-bottom: 1px dashed transparent;
}
button.tx-name.editable.uncat { color: var(--ink); }
button.tx-name.editable:hover { border-bottom-color: var(--muted); }
/* Inline-Edit: Name wird zum Eingabefeld (gleiche Optik, klar editierbar) */
.tx-name-edit {
  display: block; max-width: 100%; width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--ink); background: var(--card); padding: 1px 6px; margin: -2px 0;
  border: 1px solid var(--accent, #2f9e93); border-radius: 6px; outline: none;
}
.tx-name-edit.uncat { color: var(--ink); }
.tx-cat { font-size: 12px; color: var(--muted); }
.tx-amount { font-size: 14px; font-weight: 700; white-space: nowrap; }
.tx-amount.neg { color: var(--ink); }
.tx-amount.pos { color: var(--ink); }
/* Beträge nur in der „Beides"-Ansicht farbig: Einnahmen grün, Ausgaben rot */
.dir-both .tx-amount.pos { color: var(--pos); }
.dir-both .tx-amount.neg { color: var(--out); }

.tx-rename {
  border: 0; background: transparent; cursor: pointer; flex-shrink: 0;
  font-size: 13px; padding: 4px 6px; border-radius: 8px; line-height: 1;
  opacity: 0; transition: opacity .12s, background .12s; font-family: inherit;
}
.tx-item:hover .tx-rename { opacity: .6; }
.tx-rename:hover { opacity: 1; background: var(--chip); }

/* Donut: prominent, Legende darunter */
/* „Wohin dein Geld geht": sortiertes Balken-Ranking, füllt die Karte */
.cat-bars { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 2px; flex: 1; overflow-y: auto; }
.cat-bar {
  display: flex; align-items: center; gap: 11px; width: 100%;
  flex: 1 1 auto; min-height: 44px; max-height: 94px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 7px 8px; border-radius: 10px; font-family: inherit; color: var(--ink);
  transition: background .12s;
}
.cat-bar:hover { background: var(--chip); }
.cb-icon { width: 26px; text-align: center; font-size: 18px; flex-shrink: 0; line-height: 1; }
.cb-icon .cat-ic-img { width: 18px; height: 18px; vertical-align: -3px; }
.cb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cb-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-val { font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.cb-pct { color: var(--muted); font-weight: 600; }
.cb-track { height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.cb-fill { display: block; height: 100%; border-radius: 5px; min-width: 3px; }

/* Vergleich */
.cmp-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.small-select { padding: 6px 12px; min-width: auto; font-size: 12px; }
.legend-inline { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend-inline span { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.teal { background: var(--teal); }
.dot.gold { background: var(--gold); }
.line-card canvas { max-height: 210px; }

/* Nicht-kategorisiert / Manuell / Such-Karte */
.uncat-card .tx-list, .manual-card .tx-list, .search-card .tx-list { max-height: 300px; }

.manual-card .tx-item.done { opacity: .7; }

/* ---------- Kategorie-Popover ---------- */
.cat-picker {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22); padding: 8px; z-index: 100;
  width: 232px; max-height: 340px; overflow-y: auto;
}
.cp-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px 6px; }
.cp-list { display: flex; flex-direction: column; }
.cp-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink); font-family: inherit;
}
.cp-item:hover { background: var(--chip); }
.cp-ic { width: 22px; text-align: center; }
.cp-remove { color: var(--uncat); border-top: 1px solid var(--line); margin-top: 4px; }

/* Inline „(Rechnung zuordnen)" + Invoice-Picker */
.tx-invoice-link {
  background: none; border: 0; padding: 0; margin-left: 7px; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline;
}
.tx-invoice-link:hover { opacity: .8; }
.inv-picker {
  position: fixed; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22); padding: 8px; z-index: 100;
  width: 340px; max-height: 360px; overflow-y: auto;
}
.ip-list { display: flex; flex-direction: column; }
.ip-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 9px;
  font-size: 13px; color: var(--ink); font-family: inherit;
}
.ip-item:hover { background: var(--chip); }
.ip-item.match { background: rgba(47,158,147,.10); }
.ip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ip-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ip-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px; flex-shrink: 0; background: var(--chip); color: var(--muted);
}
.ip-toggle {
  width: 100%; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--accent); padding: 8px;
  border-top: 1px solid var(--line); margin-top: 4px;
}
.ip-toggle:hover { background: var(--chip); }
.ip-paid { background: #d1f0e0; color: #1a8f4f; }
.ip-viewed { background: #dbeafe; color: #2563eb; }
.ip-overdue { background: #fde2e0; color: #c0392b; }
.ip-partially_paid { background: #fef3c7; color: #b7791f; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(20,18,14,.45);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal-box {
  background: var(--card); border-radius: var(--radius); padding: 26px;
  width: 100%; max-width: 540px; max-height: 85vh; overflow-y: auto; color: var(--ink);
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.modal-head h3 { font-size: 19px; }
.modal-head.sticky {
  position: sticky; top: 0; z-index: 3; background: var(--card);
  margin: -26px -26px 0; padding: 26px 26px 12px; border-bottom: 1px solid var(--line);
}
.modal-close { border: 0; background: var(--chip); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--ink); flex-shrink: 0; }
.cat-editor { margin: 18px 0; display: flex; flex-direction: column; gap: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Drilldown-Liste */
#drillBody { max-height: 60vh; }

/* ---------- Kategorien verwalten ---------- */
#catModal .modal-box { max-width: 640px; }
.cat-toolbar { margin: 16px 0 4px; }
.cat-add-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cat-add-form input {
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: var(--card);
}
.cat-add-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.cat-add-icon { width: 48px; text-align: center; }
.cat-add-name { flex: 1; min-width: 120px; }
/* Eigenes Bild/SVG als Kategorie-Icon */
.cat-ic-img { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; border-radius: 4px; display: inline-block; }
.tx-icon .cat-ic-img { width: 60%; height: 60%; border-radius: 6px; }
.cp-ic .cat-ic-img, .spar-ic .cat-ic-img { width: 16px; height: 16px; }
.cat-img-btn, .cat-edit-img {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-img-btn:hover, .cat-edit-img:hover { background: var(--chip); }
.cat-edit-img .cat-ic-img { width: 20px; height: 20px; border-radius: 5px; }
.cat-icon-preview { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.cat-icon-preview .cat-ic-img { width: 22px; height: 22px; border-radius: 6px; }

.cat-colors { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.swatch-pick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch-pick.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card) inset; }

.cat-mgr-cat { border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-top: 14px; }
.cat-mgr-head { display: flex; align-items: center; gap: 8px; }
.cat-edit-icon, .cat-edit-name {
  border: 1px solid transparent; border-radius: 10px; padding: 6px 8px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: transparent;
}
.cat-edit-icon { width: 44px; text-align: center; flex-shrink: 0; }
.cat-edit-name { flex: 1; min-width: 0; font-weight: 700; }
.cat-edit-icon:hover, .cat-edit-name:hover:not(:disabled) { background: var(--chip); }
.cat-edit-icon:focus, .cat-edit-name:focus { outline: 2px solid var(--accent); background: var(--card); }
.cat-edit-name:disabled { color: var(--ink); opacity: 1; }
.cat-edit-color { width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.cat-mgr-sum { font-size: 13px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.cat-mgr-sum.pos { color: var(--pos); }
.cat-mgr-sum.neg { color: var(--ink); }
.cat-del { border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 8px; opacity: .55; flex-shrink: 0; }
.cat-del:hover { opacity: 1; background: var(--chip); }

.cat-mgr-txs { margin-top: 8px; }
.cat-mgr-tx { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.cat-mgr-tx:first-child { border-top: 0; }
.cat-mgr-tx .tx-icon { width: 32px; height: 32px; font-size: 15px; }
.cat-mgr-tx .tx-info { flex: 1; min-width: 0; }
.cat-mgr-tx .tx-cat .pos { color: var(--pos); }
.cat-mgr-tx .tx-cat .neg { color: var(--muted); }
.cat-remove { border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 7px; border-radius: 8px; flex-shrink: 0; font-family: inherit; }
.cat-remove:hover { background: var(--chip); color: var(--ink); }
.cat-empty { padding: 8px 0; }

.cat-kw { margin-top: 10px; }
.cat-kw summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 0; }
.cat-kw textarea {
  width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; font-size: 13px; font-family: inherit; resize: vertical;
  min-height: 40px; color: var(--ink); background: var(--card);
}
.cat-kw textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

.cat-presets { margin-top: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preset-chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; box-shadow: inset 3px 0 0 var(--c); font-family: inherit;
}
.preset-chip:hover { background: var(--chip); }

.manual-edit { margin-top: 14px; }
.manual-edit summary { font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 4px 0; }
.manual-edit p { margin: 6px 0; }
.manual-edit textarea {
  width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 44px; color: var(--ink); background: var(--card);
}
.manual-edit textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .donut-card, .tx-card, .line-card, .manual-card, .search-card { grid-column: 1 / -1; grid-row: auto; }
  .kpi-card.slim, .balance-card.slim { grid-column: span 1; }
}
@media (max-width: 600px) {
  /* Strikt EINSPALTIG: jede Karte über die volle Breite, keine span-2-Reste,
     die sonst eine implizite zweite Spalte erzeugen. */
  .grid { grid-template-columns: 1fr; }
  /* min-width:0 verhindert, dass eine Karte mit breitem Inhalt die 1fr-Spalte
     über die Containerbreite hinaus aufzieht (Beträge würden sonst geclippt). */
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; min-width: 0; }

  /* Topbar gestapelt; die drei Steuer-Buttons in EINE Zeile, je 1/3 der Breite. */
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .topbar-left { display: none; }
  .topbar-right { width: 100%; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
  .topbar-right > #gotoStep1,
  .topbar-right > #sparToggle,
  .topbar-right > #themeSwitch { flex: 1 1 0; min-width: 0; }
  .topbar-right #gotoStep1,
  .topbar-right #sparToggle,
  .topbar-right .theme-btn {
    width: 100%; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.15; padding: 9px 6px; font-size: 12px;
  }
  /* Import-Button wandert aus der Topbar ans Seitenende, volle Breite. */
  .topbar #importBtn { display: none; }
  .import-bar-mobile { display: block; margin-top: 18px; }
  .import-bar-mobile .btn { width: 100%; padding: 14px; font-size: 15px; }

  .kpi-card.slim, .balance-card.slim { grid-column: auto; }

  /* Kein horizontaler Überlauf: NICHT über overflow:hidden lösen (das würde
     Dropdowns/Popover abschneiden), sondern über min-width:0 weiter unten. */
  .app { max-width: 100%; }

  /* Monatsstreifen: 12 Monate dürfen unter die Label-Breite schrumpfen. */
  .ms-bars { gap: 4px; }
  .ms-month { min-width: 0; font-size: 10px; padding: 6px 1px 4px; }
  .ms-up, .ms-down { height: 48px; }

  /* Karten-Kopf darf umbrechen, damit die Hinweis-Pill nicht überläuft. */
  .card-head { flex-wrap: wrap; margin-bottom: 10px; }

  /* Listenkarten (v.a. „Nicht eindeutig") kompakter: engeres Karten-Padding,
     Hinweis-Pill „Klick aufs Icon ordnet zu" ausblenden, schlankere Zeilen. */
  .card { padding: 16px; }
  .uncat-card .card-head > .pill,
  .manual-card .card-head > .pill,
  .search-card .card-head > .pill { display: none; }
  .tx-item { padding: 6px 0; gap: 10px; }
  .tx-icon { width: 34px; height: 34px; font-size: 15px; }
  .uncat-card .tx-list, .manual-card .tx-list, .search-card .tx-list { max-height: 240px; }
}

/* ---------- Toast (kurze Bestätigung) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }