:root{
  --bg:#EFE7D8;
  --charcoal:#2A2521;
  --ochre:#B9812A;
  --sage:#6B7A5E;
  --card:#F7F2E7;
  --line: rgba(42,37,33,0.12);
  --danger:#A13D2D;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent;}
html{ -webkit-text-size-adjust: 100%; }
body{
  background: var(--bg);
  color: var(--charcoal);
  font-family:'Karla', sans-serif;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
}
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; }

/* --- Auth-Seiten --- */
.auth-wrap{
  padding: calc(var(--safe-top) + 48px) 24px 40px;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}
.auth-logo{ font-family:'Fraunces', serif; font-size:24px; font-weight:600; margin-bottom: 6px; }
.auth-sub{ font-size:14px; opacity:0.65; margin-bottom: 40px; }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.field input{
  width:100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 16px;
  font-family: inherit;
  color: var(--charcoal);
}
.field input:focus{ outline: 2px solid var(--ochre); outline-offset: 1px; }
.btn{
  display:block;
  width:100%;
  text-align:center;
  padding: 15px;
  border-radius: 999px;
  border:none;
  font-size: 15px;
  font-weight:700;
  font-family: inherit;
  cursor:pointer;
}
.btn-primary{ background: var(--ochre); color: var(--charcoal); }
.btn-ghost{ background: transparent; color: var(--charcoal); border:1px solid var(--line); }
.auth-footer{ margin-top: 24px; text-align:center; font-size: 13.5px; opacity:0.75; }
.auth-footer a{ color: var(--ochre); font-weight:700; }
.alert{
  background: rgba(161,61,46,0.1);
  color: var(--danger);
  border: 1px solid rgba(161,61,46,0.25);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
.alert-success{
  background: rgba(107,122,94,0.12);
  color: var(--sage);
  border-color: rgba(107,122,94,0.3);
}

/* --- App-Layout --- */
.app-body{ padding-top: calc(var(--safe-top) + 14px); padding-bottom: calc(var(--safe-bottom) + 88px); }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding: 0 18px 18px; }
.logo{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; }
.avatar-btn{
  width:36px; height:36px; border-radius:50%;
  background: var(--sage); color: var(--card);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-family:'Fraunces', serif;
}
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  background: var(--card); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}

.chip-row{ display:flex; gap:8px; overflow-x:auto; padding: 0 18px 22px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; font-size:13px; font-weight:600; padding: 9px 16px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line); white-space:nowrap;
}
.chip.active{ background: var(--charcoal); color: var(--card); border-color:var(--charcoal); }

.balance-hero{
  margin: 0 18px 22px; background: var(--charcoal); color: var(--card);
  border-radius: 22px; padding: 26px 22px 24px; position:relative; overflow:hidden;
}
.balance-hero::after{
  content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background: var(--ochre); opacity:0.16; top:-70px; right:-60px;
}
.balance-hero .eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.65; margin-bottom:10px; }
.balance-hero .figure{ font-family:'Fraunces', serif; font-size:36px; font-weight:600; letter-spacing:-0.01em; display:flex; align-items:baseline; gap:8px; }
.balance-hero .figure .sign{ font-size:22px; }
.balance-hero .figure .sign.pos{ color: var(--ochre); }
.balance-hero .figure .sign.neg{ color: #D98E7C; }
.balance-hero .sub{ font-size:13px; opacity:0.7; margin-top:6px; }

.quick-actions{ display:flex; gap:10px; padding: 0 18px 26px; }
.qa-btn{
  flex:1; background: var(--card); border: 1px solid var(--line); border-radius:16px;
  padding: 14px 10px; text-align:center; font-size:12.5px; font-weight:600;
}
.qa-btn .icon{ font-size:18px; display:block; margin-bottom:6px; }
.qa-btn.primary{ background: var(--ochre); color: var(--charcoal); border-color:var(--ochre); }

.section-title{ display:flex; justify-content:space-between; align-items:baseline; padding: 4px 18px 12px; }
.section-title h3{ font-size:17px; }
.section-title .link{ font-size:12.5px; color: var(--sage); font-weight:600; }

.list{ padding: 0 18px; display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.card{ background: var(--card); border-radius:16px; padding: 14px 16px; border: 1px solid var(--line); }
.expense-card{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:40px; height:40px; border-radius:50%; background: var(--sage); color: var(--card);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  font-family:'Fraunces', serif; flex-shrink:0;
}
.expense-info{ flex:1; min-width:0; }
.expense-title{ font-weight:600; font-size:14.5px; }
.expense-meta{ font-size:11.5px; opacity:0.6; margin-top:2px; }
.expense-amount{ font-size:14.5px; font-weight:700; font-variant-numeric: tabular-nums; flex-shrink:0; }
.expense-amount.settlement{ color: var(--sage); }

.settle-card{ display:flex; justify-content:space-between; align-items:center; }
.settle-who{ font-size:14px; }
.settle-who b{ font-weight:700; }
.settle-amount{ font-weight:700; color: var(--ochre); font-variant-numeric: tabular-nums; font-size:14.5px; }
.settle-action{ font-size:12px; font-weight:700; color: var(--sage); border: 1px solid var(--line); padding: 8px 12px; border-radius:999px; }

.overview-row{ display:flex; justify-content:space-between; align-items:center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.overview-row:last-child{ border-bottom:none; }
.overview-name{ font-size:14px; font-weight:600; }
.overview-figures{ display:flex; gap:18px; }
.overview-figures > div{ display:flex; flex-direction:column; align-items:flex-end; }
.overview-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.5; }
.overview-value{ font-size:13.5px; font-weight:600; font-variant-numeric: tabular-nums; }
.overview-value.debt-owed{ color: var(--danger); }
.overview-value.debt-credit{ color: var(--sage); }

.edit-link{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color: var(--charcoal); opacity:0.5; margin-left:4px;
}
.edit-link:active{ opacity:0.9; }

.empty-state{ padding: 28px 20px; text-align:center; color: var(--charcoal); opacity:0.6; font-size:14px; }

.fab{
  position:fixed; right: max(20px, calc((100% - 480px)/2 + 20px));
  bottom: calc(78px + var(--safe-bottom)); width:54px; height:54px; border-radius:50%;
  background: var(--ochre); color: var(--charcoal); display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; box-shadow: 0 10px 24px rgba(185,129,42,0.4); z-index: 30;
}

.tabbar{
  position: fixed; bottom:0; left:0; right:0; max-width:480px; margin: 0 auto;
  background: var(--card); border-top: 1px solid var(--line); display:flex;
  padding: 10px 8px calc(10px + var(--safe-bottom)); z-index: 20;
}
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; color: var(--charcoal); opacity:0.45; font-weight:600; }
.tab.active{ opacity:1; color: var(--ochre); }
.tab .icon{ font-size:19px; }

/* --- Formularseiten (Ausgabe erfassen etc.) --- */
.form-page{ padding: calc(var(--safe-top) + 14px) 18px calc(var(--safe-bottom) + 40px); }
.form-header{ display:flex; align-items:center; gap:14px; margin-bottom: 28px; }
.form-header h1{ font-size:20px; }
.back-btn{ font-size:22px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.radio-group{ display:flex; gap:10px; margin-bottom: 20px; }
.radio-option{
  flex:1; padding: 12px; text-align:center; border-radius:14px; border:1px solid var(--line);
  background: var(--card); font-size:13.5px; font-weight:600; cursor:pointer;
}
.radio-option input{ display:none; }
.radio-option.selected{ background: var(--charcoal); color: var(--card); border-color: var(--charcoal); }
.member-checklist{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.member-row{
  display:flex; align-items:center; justify-content:space-between; padding: 12px 14px;
  background: var(--card); border-radius:14px; border: 1px solid var(--line);
}
.member-row .left{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.member-row input[type="number"]{
  width: 84px; padding: 8px 10px; border-radius:10px; border:1px solid var(--line);
  font-family: inherit; font-size:14px; text-align:right;
}
select{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background: var(--card); font-size:15px; font-family:inherit; color: var(--charcoal);
}

/* --- Profilseite --- */
.profile-hero{ display:flex; flex-direction:column; align-items:center; padding: 12px 0 28px; }
.profile-avatar{
  width:76px; height:76px; border-radius:50%; background: var(--sage); color: var(--card);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;
  font-family:'Fraunces', serif; margin-bottom:14px;
}
.profile-name{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; }
.profile-email{ font-size:13.5px; opacity:0.6; margin-top:4px; }
.profile-badge{
  margin-top:12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding: 7px 14px; border-radius:999px; background: var(--card); border:1px solid var(--line); color: var(--charcoal);
}
.profile-badge.admin{ background: var(--charcoal); color: var(--card); border-color: var(--charcoal); }

.copy-row{ display:flex; gap:10px; align-items:stretch; }
.copy-code{
  flex:1; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background: var(--card);
  font-family: monospace; font-size:17px; font-weight:700; letter-spacing:0.1em; text-align:center;
}
.copy-btn{
  flex-shrink:0; width:48px; border-radius:14px; border:1px solid var(--line); background: var(--card);
  font-size:18px; color: var(--charcoal);
}
.copy-btn.copied{ background: var(--sage); color: var(--card); border-color: var(--sage); }

@media (min-width: 481px){
  body{ border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}