/* DESIGN SYSTEM — TipSplit
   Direction: Warm and human
   Fonts: display Fraunces / body Manrope   (Google Fonts)
   Primary #E8734A   Primary-dark #C85A34   Primary-light #F5A97F
   Accent #4A7856    Surface #FFF8F0        Surface-2 #FFFFFF
   Text #2B2320      Text-2 #6B5D54         Text-3 #A69A8F
   Border-light rgba(43,35,32,0.08)   Border-medium rgba(43,35,32,0.16)
   Radius sm 8px / md 14px / lg 20px / xl 28px
   Spacing scale: 4 8 12 16 24 32 48 64
   Copied verbatim from docs/mockups/index.html so the shipped app matches the approved design.
*/
:root{
  --primary:#E8734A; --primary-dark:#C85A34; --primary-light:#F5A97F;
  --accent:#4A7856; --accent-light:#E4EEE6;
  --surface:#FFF8F0; --surface-2:#FFFFFF;
  --text:#2B2320; --text-2:#6B5D54; --text-3:#A69A8F;
  --border-light:rgba(43,35,32,0.08); --border-medium:rgba(43,35,32,0.16);
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --shadow-sm:0 1px 2px rgba(43,35,32,0.08);
  --shadow-md:0 4px 16px rgba(43,35,32,0.10);
  --shadow-lg:0 12px 32px rgba(43,35,32,0.14);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --font-display:'Fraunces', serif; --font-body:'Manrope', sans-serif;
}
*{box-sizing:border-box;}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font-body); background:var(--surface); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
}
.app{ width:100%; max-width:480px; min-height:100vh; background:var(--surface); display:flex; flex-direction:column; }

section[data-screen]{ display:none; flex:1; flex-direction:column; }
section[data-screen].active{ display:flex; }

.topbar{ padding:var(--sp-6) var(--sp-5) var(--sp-2); display:flex; align-items:center; }
.wordmark{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.wordmark .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.tagline{ font-size:13px; color:var(--text-2); margin:0 var(--sp-5) var(--sp-5); }

.content{ padding:0 var(--sp-5) var(--sp-6); flex:1; display:flex; flex-direction:column; gap:var(--sp-5); }

.field-group{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }
.bill-input-wrap{
  display:flex; align-items:center; background:var(--surface-2); border:1.5px solid var(--border-medium);
  border-radius:var(--radius-md); padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-sm);
}
.bill-input-wrap.error{ border-color:#C0392B; }
.bill-input-wrap .currency{ font-family:var(--font-display); font-size:24px; color:var(--text-2); margin-right:6px; }
.bill-input-wrap input{
  border:none; outline:none; font-family:var(--font-display); font-size:28px; font-weight:600;
  width:100%; background:transparent; color:var(--text);
}
.error-text{ font-size:12px; color:#C0392B; display:none; }
.error-text.show{ display:block; }

.tip-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.tip-pill{
  flex:1; min-width:60px; text-align:center; padding:var(--sp-3) 0; border-radius:var(--radius-md);
  border:1.5px solid var(--border-medium); background:var(--surface-2); font-weight:700; font-size:14px;
  color:var(--text-2); cursor:pointer; transition:.15s;
}
.tip-pill.selected{ background:var(--primary); border-color:var(--primary); color:#fff; }
.tip-pill.custom{ flex:1.4; display:flex; align-items:center; justify-content:center; gap:4px; }
.tip-pill.custom input{ width:34px; border:none; background:transparent; font-family:var(--font-body); font-weight:700; font-size:14px; color:inherit; text-align:right; outline:none; }
.tip-pill.custom.selected input{ color:#fff; }

.stepper{ display:flex; align-items:center; justify-content:space-between; background:var(--surface-2); border:1.5px solid var(--border-medium); border-radius:var(--radius-md); padding:var(--sp-2) var(--sp-4); box-shadow:var(--shadow-sm); }
.stepper-btn{ width:44px; height:44px; border-radius:50%; border:none; background:var(--accent-light); color:var(--accent); font-size:18px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.stepper-btn:focus-visible, .tip-pill:focus-visible, .btn:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.stepper-count{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.stepper-label{ font-size:12px; color:var(--text-3); }

.results-card{
  background:var(--surface-2); border-radius:var(--radius-lg); padding:var(--sp-5); box-shadow:var(--shadow-md);
  border:1px solid var(--border-light); display:flex; flex-direction:column; gap:var(--sp-4); transition:opacity .15s;
}
.result-row{ display:flex; justify-content:space-between; align-items:baseline; }
.result-row .k{ font-size:13px; color:var(--text-2); }
.result-row .v{ font-family:var(--font-display); font-size:18px; font-weight:600; }
.result-row.hero .v{ font-size:32px; color:var(--primary-dark); }
.divider{ height:1px; background:var(--border-light); }

.roundup-banner{
  background:var(--accent-light); border-radius:var(--radius-md); padding:var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.roundup-banner .text{ font-size:13px; color:var(--accent); font-weight:600; }
.roundup-banner .amount{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--accent); }

.btn{
  border:none; border-radius:999px; padding:16px; font-family:var(--font-body); font-weight:700; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:disabled{ background:#CFC9C0; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--text-2); border:1.5px solid var(--border-medium); }

/* Screen 2 — donate confirmation (styles added in slice 3) */
.donate-icon{ width:64px; height:64px; border-radius:50%; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:28px; margin:var(--sp-6) auto 0; }
.donate-amount{ font-family:var(--font-display); font-size:40px; font-weight:700; color:var(--accent); text-align:center; }
.donate-copy{ font-size:14px; color:var(--text-2); text-align:center; line-height:1.5; padding:0 var(--sp-3); }
.donate-copy b{ color:var(--text); }
.donate-actions{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-5); }