*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f3f4f6;color:#111827;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit}button{border:0}body{overscroll-behavior:none}.hidden{display:none!important}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(100%,430px);background:#fff;padding:28px;border-radius:30px;box-shadow:0 20px 50px rgba(0,0,0,.08)}.brand-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:#111827;color:#fff;font-size:28px;font-weight:800;margin-bottom:22px}.auth-card h1{font-size:34px;letter-spacing:-1.2px;margin:4px 0}.auth-card p{color:#6b7280;line-height:1.5;margin:0 0 24px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#f3f4f6;border-radius:14px;padding:4px;margin-bottom:18px}.segment{padding:10px;border-radius:11px;background:transparent;color:#6b7280;font-weight:650}.segment.active{background:#fff;color:#111827;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.stack{display:grid;gap:14px}.field{display:grid;gap:7px;flex:1}.field>span{font-size:13px;font-weight:650;color:#4b5563}.field input,.field select,.field textarea{width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:13px 14px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#9ca3af;box-shadow:0 0 0 3px rgba(17,24,39,.05)}.primary-button,.secondary-button{width:100%;padding:14px 16px;border-radius:15px;font-weight:750;cursor:pointer}.primary-button{background:#111827;color:#fff}.secondary-button{margin-top:10px;background:#f3f4f6;color:#111827}.eyebrow{color:#6b7280;font-size:13px;font-weight:650}
#app{width:100%;min-height:100vh;padding-bottom:calc(82px + env(safe-area-inset-bottom))}.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 20px 16px;background:rgba(243,244,246,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.app-header h1{margin:2px 0 0;font-size:26px;letter-spacing:-.8px}.avatar-button{width:44px;height:44px;border-radius:50%;background:#111827;color:white;font-weight:700}.app-content{width:min(100%,700px);margin:auto;padding:10px 18px 120px}
.hero-card{margin-top:8px;padding:24px;border-radius:28px;background:#111827;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.12)}.hero-label{color:#d1d5db;font-size:14px}.hero-value{margin-top:8px;font-size:40px;font-weight:780;letter-spacing:-1.5px}.hero-footer{display:flex;justify-content:space-between;margin-top:22px;color:#d1d5db;font-size:14px}.section-title{margin:30px 4px 14px;font-size:19px}.category-list,.transaction-list,.items-list{display:grid;gap:10px}.category-card,.transaction-card,.form-card{background:#fff;border-radius:20px;box-shadow:0 5px 18px rgba(0,0,0,.045)}.category-card,.transaction-card{display:flex;align-items:center;justify-content:space-between;padding:16px}.category-left,.transaction-left{display:flex;gap:12px;align-items:center}.category-icon,.transaction-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#f3f4f6}.category-name,.transaction-name{font-weight:680}.category-sub,.transaction-sub{margin-top:2px;color:#6b7280;font-size:13px}.category-amount,.transaction-amount{font-weight:750}.empty-state{padding:30px 18px;text-align:center;background:#fff;border-radius:22px;color:#6b7280}.empty-state strong{display:block;color:#111827;margin-bottom:6px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid rgba(0,0,0,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px;background:transparent;color:#9ca3af;font-size:11px}.nav-item.active{color:#111827}.nav-icon{font-size:22px;line-height:1}.floating-button{position:fixed;right:22px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;width:58px;height:58px;border-radius:19px;background:#111827;color:#fff;font-size:32px;line-height:1;box-shadow:0 12px 32px rgba(0,0,0,.22)}.floating-button:active{transform:scale(.96)}
.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(17,24,39,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.bottom-sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;width:min(100%,700px);margin:auto;padding:10px 18px calc(20px + env(safe-area-inset-bottom));background:#f9fafb;border-radius:28px 28px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.15);animation:slideUp .25s ease-out}@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-handle{width:42px;height:5px;margin:2px auto 16px;border-radius:10px;background:#d1d5db}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.sheet-header h2{margin:3px 0 0;font-size:24px}.close-button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e5e7eb;color:#374151;font-size:24px}.sheet-options{display:grid;gap:10px}.sheet-option{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:20px;background:#fff;text-align:left;box-shadow:0 4px 16px rgba(0,0,0,.04)}.sheet-option:active{transform:scale(.985)}.sheet-option-icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:16px;background:#f3f4f6;font-size:22px}.sheet-option-text{display:flex;flex-direction:column;gap:4px;flex:1}.sheet-option-text strong{font-size:16px}.sheet-option-text span{color:#6b7280;font-size:13px;line-height:1.35}.sheet-arrow{color:#9ca3af;font-size:28px}
.full-sheet{position:fixed;inset:0;z-index:100;background:#f3f4f6;overflow:auto}.full-sheet-header{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;background:rgba(255,255,255,.94);border-bottom:1px solid #e5e7eb;backdrop-filter:blur(18px)}.full-sheet-header .text-button:last-child{text-align:right}.text-button{background:transparent;color:#374151}.text-button.strong{font-weight:750;color:#111827}.full-sheet-body{width:min(100%,700px);margin:auto;padding:18px 18px calc(40px + env(safe-area-inset-bottom))}.form-card{padding:16px;display:grid;gap:14px}.form-row{display:flex;gap:10px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:28px 4px 12px}.section-heading h2{margin:3px 0 0;font-size:21px}.small-button{padding:9px 12px;border-radius:12px;background:#e5e7eb;color:#111827;font-weight:700}.expense-item{background:#fff;border-radius:18px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.04);border:1px solid transparent}.item-grid{display:grid;grid-template-columns:1.6fr .7fr;gap:10px}.item-bottom{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:10px}.remove-item{width:42px;border-radius:12px;background:#fee2e2;color:#991b1b;font-size:20px}.validation-card{margin-top:14px;padding:16px;border-radius:18px;font-size:14px;line-height:1.5;background:#fff}.validation-card.ok{background:#ecfdf5;color:#065f46}.validation-card.warn{background:#fff7ed;color:#9a3412}.attachment-info{color:#6b7280;font-size:14px}.button-row{display:flex;gap:10px}.file-button{display:inline-flex;cursor:pointer}.source-banner{padding:14px 16px;border-radius:17px;background:#e0f2fe;color:#075985;margin-bottom:14px;font-size:14px;line-height:1.45}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card{background:#fff;border-radius:20px;padding:18px;box-shadow:0 5px 18px rgba(0,0,0,.04)}.stat-card span{font-size:13px;color:#6b7280}.stat-card strong{display:block;font-size:22px;margin-top:5px}.household-card{background:#111827;color:#fff;padding:22px;border-radius:24px}.member-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}.member-row:last-child{border-bottom:0}.danger-button{padding:12px 14px;border-radius:14px;background:#fee2e2;color:#991b1b;font-weight:700}.toast{position:fixed;z-index:200;left:50%;bottom:110px;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 15px;border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:14px;max-width:calc(100% - 32px)}
/* =========================================================
   ANALYSE / CONFIDENCE
========================================================= */
.item-analysis-header{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:10px}.confidence-badge,.auto-corrected-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:750;line-height:1}.confidence-high{background:#dcfce7;color:#166534}.confidence-good{background:#ecfdf5;color:#047857}.confidence-medium{background:#fef3c7;color:#92400e}.confidence-low{background:#fee2e2;color:#991b1b}.confidence-manual{background:#f3f4f6;color:#4b5563}.auto-corrected-badge{background:#e0e7ff;color:#3730a3}.item-needs-review{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.08),0 4px 14px rgba(0,0,0,.04)}.item-analysis-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.item-analysis-meta span{background:#f3f4f6;color:#4b5563;border-radius:9px;padding:5px 7px;font-size:11px}.ocr-details{margin-top:11px;border-top:1px solid #f3f4f6;padding-top:10px;color:#6b7280;font-size:12px}.ocr-details summary{cursor:pointer;font-weight:650}.ocr-details code{display:block;white-space:pre-wrap;margin-top:8px;padding:9px;border-radius:10px;background:#f9fafb;color:#374151;overflow-wrap:anywhere}.validation-breakdown{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin-top:11px}.validation-breakdown strong{text-align:right}.validation-note{margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}.warning-note{font-weight:650}.review-suggestions{display:grid;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}.review-suggestions span{display:block}
@media(max-width:480px){.item-grid{grid-template-columns:1.35fr .65fr}.form-row{flex-direction:column}.confidence-badge,.auto-corrected-badge{font-size:10px}}
@media(min-width:700px){.floating-button{right:calc((100vw - 700px)/2 + 22px)}}
.missing-position-alert{
  display:grid;
  gap:5px;
  margin-top:12px;
  padding:11px 12px;
  border-radius:12px;
  background:#ffedd5;
  color:#9a3412
}
.missing-position-alert strong{
  color:#7c2d12
}

.add-missing-suggestion{
  margin-top:6px;
  width:100%;
  background:#fff;
  border:1px solid rgba(154,52,18,.2)
}

.general-discount-details{
  display:grid;
  gap:4px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(0,0,0,.08);
  font-size:12px
}
.general-discount-details span{
  display:block
}


/* =========================================================
   UI UPGRADE – DASHBOARD / STATISTIK
========================================================= */

.hero-topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px
}

.hero-trend{
  flex-shrink:0;
  margin-top:4px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.12);
  color:#fff
}

.hero-trend.positive{
  background:rgba(52,211,153,.16);
  color:#d1fae5
}

.hero-trend.negative{
  background:rgba(251,191,36,.14);
  color:#fef3c7
}

.quick-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px
}

.quick-stat{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.04)
}

.quick-stat-icon{
  width:42px;
  height:42px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f3f4f6;
  font-size:19px;
  font-weight:800
}

.quick-stat small{
  display:block;
  color:#6b7280;
  font-size:11px;
  margin-bottom:3px
}

.quick-stat strong{
  display:block;
  max-width:145px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px
}

.compact-heading{
  margin-top:26px;
  margin-bottom:12px
}

.stats-month-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin:8px 4px 14px
}

.stats-month-header h2{
  margin:3px 0 0;
  font-size:26px;
  letter-spacing:-.7px
}

.stats-change{
  display:grid;
  justify-items:end;
  gap:2px;
  padding:9px 11px;
  border-radius:14px;
  background:#fff
}

.stats-change span{
  color:#6b7280;
  font-size:10px
}

.stats-change strong{
  font-size:14px
}

.stats-change.positive strong{
  color:#047857
}

.stats-change.negative strong{
  color:#b45309
}

.stat-card-featured{
  background:#111827;
  color:#fff
}

.stat-card-featured span{
  color:#d1d5db
}

.analytics-card{
  margin-top:12px;
  padding:17px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.045);
  overflow:hidden
}

.analytics-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:10px
}

.analytics-card-head h3{
  margin:3px 0 0;
  font-size:18px;
  letter-spacing:-.25px
}

.analytics-highlight{
  font-size:16px
}

.analytics-chip{
  max-width:160px;
  padding:7px 9px;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  font-size:11px;
  font-weight:750;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

/* Verlauf */

.trend-chart{
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}

.chart-grid-line{
  stroke:#eef0f3;
  stroke-width:1
}

.trend-line{
  fill:none;
  stroke:#111827;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round
}

.trend-area{
  fill:url(#expense-area-gradient);
  opacity:.16
}

.chart-gradient-start{
  stop-color:#111827;
  stop-opacity:.75
}

.chart-gradient-end{
  stop-color:#111827;
  stop-opacity:0
}

.trend-dot{
  fill:#fff;
  stroke:#111827;
  stroke-width:4
}

.chart-axis-label{
  fill:#9ca3af;
  font-size:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

/* Doughnut */

.donut-layout{
  display:grid;
  grid-template-columns:minmax(190px,.9fr) minmax(180px,1.1fr);
  gap:16px;
  align-items:center
}

.donut-wrap{
  position:relative;
  display:grid;
  place-items:center;
  min-height:225px
}

.donut-chart{
  width:210px;
  height:210px
}

.donut-track{
  stroke:#f3f4f6
}

.donut-segment{
  stroke-linecap:butt;
  transition:opacity .18s ease
}

.donut-center{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  display:grid;
  justify-items:center;
  gap:3px;
  pointer-events:none
}

.donut-center span{
  color:#9ca3af;
  font-size:11px
}

.donut-center strong{
  max-width:115px;
  text-align:center;
  font-size:15px
}

.donut-legend{
  display:grid;
  gap:9px
}

.donut-legend-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  min-width:0
}

.legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--legend-color)
}

.donut-legend-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#374151;
  font-size:12px
}

.donut-legend-value{
  color:#6b7280;
  font-size:11px;
  font-weight:750
}

/* Kategorie-Ranking */

.category-bars{
  display:grid;
  gap:14px;
  padding-top:3px
}

.category-bar-row{
  display:grid;
  gap:6px
}

.category-bar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:13px
}

.category-bar-head span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#374151;
  font-weight:650
}

.category-bar-head strong{
  flex-shrink:0
}

.category-bar-track{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#f3f4f6
}

.category-bar-fill{
  height:100%;
  min-width:5px;
  border-radius:999px;
  background:#111827
}

.category-bar-row:nth-child(2) .category-bar-fill{
  background:#2563eb
}

.category-bar-row:nth-child(3) .category-bar-fill{
  background:#10b981
}

.category-bar-row:nth-child(4) .category-bar-fill{
  background:#f59e0b
}

.category-bar-row:nth-child(5) .category-bar-fill{
  background:#8b5cf6
}

.category-bar-row:nth-child(6) .category-bar-fill{
  background:#ef4444
}

.category-bar-row:nth-child(7) .category-bar-fill{
  background:#06b6d4
}

.category-bar-row:nth-child(8) .category-bar-fill{
  background:#ec4899
}

.category-bar-foot{
  color:#9ca3af;
  font-size:10px
}

.chart-empty{
  padding:28px 10px;
  text-align:center;
  color:#9ca3af;
  font-size:13px
}

@media(max-width:520px){
  .donut-layout{
    grid-template-columns:1fr
  }

  .donut-wrap{
    min-height:205px
  }

  .donut-chart{
    width:195px;
    height:195px
  }

  .donut-legend{
    grid-template-columns:1fr 1fr;
    gap:8px 12px
  }

  .quick-stat{
    padding:13px
  }

  .quick-stat-icon{
    width:38px;
    height:38px
  }
}

@media(max-width:390px){
  .quick-stats{
    grid-template-columns:1fr
  }

  .stats-month-header{
    align-items:flex-start;
    flex-direction:column
  }

  .stats-change{
    justify-items:start
  }

  .donut-legend{
    grid-template-columns:1fr
  }
}


/* =========================================================
   PROFIL-MENÜ
========================================================= */

.avatar-button{
  cursor:pointer;
  transition:
    transform .16s ease,
    box-shadow .16s ease
}

.avatar-button:active{
  transform:scale(.94)
}

.profile-menu{
  position:fixed;
  z-index:120;
  top:max(72px, calc(env(safe-area-inset-top) + 58px));
  right:14px;
  width:min(310px, calc(100vw - 28px));
  padding:12px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:22px;
  background:rgba(255,255,255,.98);
  box-shadow:
    0 22px 55px rgba(17,24,39,.18),
    0 3px 12px rgba(17,24,39,.08);
  backdrop-filter:blur(18px);
  transform-origin:top right
}

.profile-menu.hidden{
  display:none
}

.profile-menu-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 7px 13px
}

.profile-menu-avatar{
  width:48px;
  height:48px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:#111827;
  color:#fff;
  font-size:19px;
  font-weight:850
}

.profile-menu-identity{
  min-width:0;
  display:grid;
  gap:3px
}

.profile-menu-identity strong,
.profile-menu-identity span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.profile-menu-identity span{
  color:#6b7280;
  font-size:12px
}

.profile-menu-household{
  display:grid;
  gap:3px;
  margin-bottom:8px;
  padding:11px 12px;
  border-radius:15px;
  background:#f5f6f8
}

.profile-menu-household span{
  color:#9ca3af;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:750
}

.profile-menu-household strong{
  font-size:13px
}

.profile-menu-action{
  width:100%;
  display:grid;
  grid-template-columns:26px 1fr auto;
  align-items:center;
  gap:8px;
  padding:12px 10px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#111827;
  text-align:left;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer
}

.profile-menu-action:hover{
  background:#f5f6f8
}

.profile-menu-action.danger{
  color:#b42318
}

.profile-chevron{
  color:#9ca3af;
  font-size:20px
}

/* =========================================================
   HAUSHALT
========================================================= */

.household-overview-card{
  padding:20px;
  border-radius:26px;
  background:
    linear-gradient(
      145deg,
      #111827,
      #1f2937
    );
  color:#fff;
  box-shadow:0 12px 28px rgba(17,24,39,.14)
}

.household-overview-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px
}

.household-overview-card h2{
  margin:5px 0 0;
  font-size:25px;
  letter-spacing:-.6px
}

.household-eyebrow{
  color:#cbd5e1
}

.household-count-pill{
  flex-shrink:0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#e5e7eb;
  font-size:11px;
  font-weight:800
}

.household-member-list{
  display:grid;
  gap:8px;
  margin-top:18px
}

.household-member-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:11px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.07)
}

.household-member-avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#fff;
  color:#111827;
  font-size:14px;
  font-weight:850
}

.household-member-main{
  min-width:0;
  display:grid;
  gap:2px
}

.household-member-main strong{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:13px
}

.household-member-main span{
  color:#cbd5e1;
  font-size:11px
}

.you-badge{
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff !important;
  font-size:9px !important;
  font-weight:800
}

.member-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 4px rgba(52,211,153,.12)
}

.household-connect-card{
  display:grid;
  gap:15px
}

.connect-card-head{
  display:flex;
  align-items:flex-start;
  gap:12px
}

.connect-icon{
  width:43px;
  height:43px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f3f4f6;
  font-size:19px
}

.household-connect-card p,
.sync-status-card p{
  margin:4px 0 0;
  color:#6b7280;
  font-size:12px;
  line-height:1.5
}

.household-action{
  width:100%
}

.invite-code-panel{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:18px 14px;
  border:1px dashed #cbd5e1;
  border-radius:18px;
  background:#f8fafc;
  text-align:center
}

.invite-code-panel span{
  color:#6b7280;
  font-size:11px
}

.invite-code-panel strong{
  font-size:27px;
  letter-spacing:.13em;
  font-variant-numeric:tabular-nums
}

.invite-code-panel small{
  color:#9ca3af;
  font-size:10px
}

.compact-action{
  margin-top:5px;
  padding:10px 15px
}

.join-household-form{
  display:grid;
  gap:9px
}

.invite-code-input{
  width:100%;
  box-sizing:border-box;
  padding:15px 14px;
  border:1px solid #dfe3e8;
  border-radius:15px;
  outline:none;
  background:#fff;
  color:#111827;
  text-align:center;
  text-transform:uppercase;
  font:inherit;
  font-size:18px;
  font-weight:800;
  letter-spacing:.12em
}

.invite-code-input:focus{
  border-color:#111827;
  box-shadow:0 0 0 3px rgba(17,24,39,.08)
}

.household-safety-note{
  padding-top:8px;
  border-top:1px solid #eef0f3;
  font-size:10px !important
}

.sync-status-card{
  display:flex;
  align-items:flex-start;
  gap:12px
}

.sync-indicator{
  width:10px;
  height:10px;
  flex-shrink:0;
  margin-top:4px;
  border-radius:50%
}

.sync-indicator.online{
  background:#10b981;
  box-shadow:0 0 0 5px rgba(16,185,129,.12)
}

.sync-indicator.offline{
  background:#9ca3af;
  box-shadow:0 0 0 5px rgba(156,163,175,.12)
}


/* =========================================================
   AUSGABE LÖSCHEN / LEERE POSITIONEN
========================================================= */

.items-empty-state{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:26px 18px;
  border:1px dashed #d1d5db;
  border-radius:18px;
  background:rgba(255,255,255,.55);
  text-align:center
}

.items-empty-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f3f4f6;
  color:#9ca3af;
  font-size:20px
}

.items-empty-state strong{
  font-size:14px
}

.items-empty-state span{
  max-width:330px;
  color:#6b7280;
  font-size:12px;
  line-height:1.45
}

.transaction-delete-zone{
  display:grid;
  gap:12px;
  margin-top:28px;
  padding:16px;
  border:1px solid #fecaca;
  border-radius:20px;
  background:#fff
}

.transaction-delete-zone.hidden{
  display:none
}

.transaction-delete-copy{
  display:grid;
  gap:4px
}

.transaction-delete-copy strong{
  color:#991b1b;
  font-size:14px
}

.transaction-delete-copy span{
  color:#6b7280;
  font-size:11px;
  line-height:1.45
}

.delete-transaction-button{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  background:#fee2e2;
  color:#991b1b;
  font:inherit;
  font-size:13px;
  font-weight:800
}

.delete-transaction-button:active{
  transform:scale(.985)
}

.transaction-delete-confirm{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  place-items:center;
  padding:18px
}

.transaction-delete-confirm.hidden{
  display:none
}

.transaction-delete-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(17,24,39,.5);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}

.transaction-delete-dialog{
  position:relative;
  z-index:1;
  width:min(100%,390px);
  padding:22px;
  border-radius:25px;
  background:#fff;
  box-shadow:0 28px 70px rgba(17,24,39,.28);
  text-align:center
}

.delete-dialog-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:17px;
  background:#fee2e2;
  font-size:22px
}

.transaction-delete-dialog h2{
  margin:0;
  font-size:21px;
  letter-spacing:-.35px
}

.transaction-delete-dialog > p{
  margin:8px auto 0;
  color:#6b7280;
  font-size:12px;
  line-height:1.5
}

.delete-dialog-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:17px;
  padding:13px 14px;
  border-radius:15px;
  background:#f5f6f8;
  text-align:left
}

.delete-dialog-summary strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px
}

.delete-dialog-summary span{
  flex-shrink:0;
  font-size:13px;
  font-weight:800
}

.delete-dialog-warning{
  color:#991b1b !important;
  font-size:11px !important
}

.delete-dialog-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:18px
}

.confirm-delete-button{
  padding:12px;
  border-radius:14px;
  background:#b42318;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:800
}

.confirm-delete-button:disabled{
  opacity:.55
}

@media(max-width:390px){
  .delete-dialog-actions{
    grid-template-columns:1fr
  }
}


/* =========================================================
   KATEGORIEN ANKLICKBAR + DETAILANSICHT
========================================================= */

.category-card-button{
  width:100%;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease
}

.category-card-button:active{
  transform:scale(.985)
}

.category-card-button:hover{
  background:#fafafa
}

.category-card-right{
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0
}

.category-chevron{
  color:#c4c9d1;
  font-size:24px;
  font-weight:500;
  line-height:1
}

.category-bar-button,
.donut-legend-button{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer
}

.category-bar-button{
  padding:0;
  border-radius:12px
}

.category-bar-button:active,
.donut-legend-button:active{
  opacity:.7
}

.category-bar-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.category-bar-open{
  color:#6b7280;
  font-weight:700
}

.donut-legend-button{
  padding:4px 3px;
  border-radius:9px
}

.category-detail-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:3px 0 11px
}

.category-detail-topbar > span{
  color:#6b7280;
  font-size:12px;
  font-weight:700
}

.category-back-button{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:13px;
  background:#fff;
  color:#111827;
  box-shadow:0 4px 14px rgba(17,24,39,.06);
  font:inherit;
  font-size:27px;
  line-height:1;
  cursor:pointer
}

.category-back-button:active{
  transform:scale(.94)
}

.category-detail-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:21px;
  border-radius:25px;
  background:#111827;
  color:#fff;
  box-shadow:0 14px 34px rgba(17,24,39,.14)
}

.category-detail-icon{
  width:60px;
  height:60px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(255,255,255,.11);
  font-size:28px
}

.category-detail-copy{
  min-width:0
}

.category-detail-copy .eyebrow{
  color:#cbd5e1
}

.category-detail-copy h2{
  margin:3px 0 7px;
  font-size:23px;
  letter-spacing:-.45px
}

.category-detail-copy > strong{
  display:block;
  font-size:28px;
  letter-spacing:-.75px
}

.category-detail-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:10px
}

.category-detail-stats article{
  min-width:0;
  padding:13px 11px;
  border-radius:17px;
  background:#fff;
  box-shadow:0 4px 15px rgba(17,24,39,.04)
}

.category-detail-stats span{
  display:block;
  margin-bottom:4px;
  color:#9ca3af;
  font-size:10px
}

.category-detail-stats strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px
}

.category-trend-card{
  margin-top:10px
}

.category-detail-groups{
  display:grid;
  gap:11px
}

.category-receipt-card{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 5px 18px rgba(17,24,39,.045)
}

.category-receipt-head{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:0;
  border-bottom:1px solid #f0f1f3;
  background:#fff;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer
}

.category-receipt-head:active{
  background:#f8fafc
}

.category-receipt-merchant{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px
}

.category-receipt-icon{
  width:37px;
  height:37px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f3f4f6;
  font-size:16px
}

.category-receipt-merchant > div{
  min-width:0
}

.category-receipt-merchant strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px
}

.category-receipt-merchant span{
  display:block;
  margin-top:2px;
  color:#9ca3af;
  font-size:10px
}

.category-receipt-total{
  flex-shrink:0;
  display:grid;
  justify-items:end;
  gap:2px
}

.category-receipt-total strong{
  font-size:13px
}

.category-receipt-total span{
  color:#6b7280;
  font-size:9px;
  font-weight:700
}

.category-position-list{
  display:grid
}

.category-position-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 15px
}

.category-position-row +
.category-position-row{
  border-top:1px solid #f5f6f7
}

.category-position-main{
  min-width:0;
  display:grid;
  gap:2px
}

.category-position-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#374151;
  font-size:12px
}

.category-position-main span{
  color:#9ca3af;
  font-size:10px
}

.category-position-amount{
  flex-shrink:0;
  font-size:12px;
  font-weight:800
}

.category-discount-row{
  background:#fafafa
}

.category-discount-row
.category-position-amount{
  color:#047857
}

@media(max-width:390px){
  .category-detail-stats{
    grid-template-columns:1fr 1fr
  }

  .category-detail-stats article:last-child{
    grid-column:1 / -1
  }

  .category-receipt-head{
    align-items:flex-start
  }
}


/* =========================================================
   HAUSHALTSVERWALTUNG v19
========================================================= */

.household-switch-list{
  display:grid;
  gap:9px
}

.household-switch-card{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  color:#111827;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(17,24,39,.035)
}

.household-switch-card:not(:disabled):active{
  transform:scale(.988)
}

.household-switch-card.active{
  border-color:#111827;
  background:#f8fafc
}

.household-switch-card:disabled{
  cursor:default;
  opacity:1
}

.household-switch-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f3f4f6;
  font-size:18px
}

.household-switch-card.active
.household-switch-icon{
  background:#111827
}

.household-switch-main{
  min-width:0;
  display:grid;
  gap:3px
}

.household-switch-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px
}

.household-switch-main span{
  color:#6b7280;
  font-size:10px
}

.household-switch-chevron{
  color:#9ca3af;
  font-size:20px;
  font-weight:800
}

.household-create-card,
.household-manage-card{
  display:grid;
  gap:15px;
  margin-top:10px
}

.household-name-form{
  display:grid;
  gap:9px
}

.household-name-input{
  width:100%;
  box-sizing:border-box;
  padding:13px 14px;
  border:1px solid #dfe3e8;
  border-radius:14px;
  outline:none;
  background:#fff;
  color:#111827;
  font:inherit;
  font-size:14px
}

.household-name-input:focus{
  border-color:#111827;
  box-shadow:0 0 0 3px rgba(17,24,39,.08)
}

.household-danger-card{
  display:grid;
  gap:10px;
  padding:16px;
  border:1px solid #fecaca;
  border-radius:20px;
  background:#fff
}

.household-danger-card strong{
  color:#991b1b;
  font-size:14px
}

.household-danger-card p{
  margin:0;
  color:#6b7280;
  font-size:11px;
  line-height:1.5
}

.household-danger-card label{
  margin-top:4px;
  color:#991b1b;
  font-size:10px;
  font-weight:750
}

.danger-input{
  border-color:#fecaca
}

.delete-household-button{
  width:100%;
  padding:13px 14px;
  border:0;
  border-radius:14px;
  background:#fee2e2;
  color:#991b1b;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer
}

.delete-household-button:disabled{
  opacity:.55
}