:root { --green:#173d2b; --green-2:#24563d; --cream:#f7f5ef; --ink:#17231c; --muted:#617068; --line:#d9ded9; --gold:#f1c767; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(180deg,#e8efe9 0,#f7f5ef 260px); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { width:min(100%,680px); margin:0 auto; padding:24px 16px calc(28px + env(safe-area-inset-bottom)); }
.hero { display:flex; align-items:center; gap:14px; margin:10px 4px 24px; }
.brand-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--green); color:var(--gold); font-weight:800; letter-spacing:-.06em; font-size:19px; box-shadow:0 8px 20px #173d2b25; }
h1,h2,p { margin:0; } h1 { font-size:27px; letter-spacing:-.04em; } h2 { font-size:18px; letter-spacing:-.02em; } .subtitle { color:var(--muted); font-size:14px; margin-top:2px; } .eyebrow { color:var(--green-2); font-size:11px; letter-spacing:.12em; font-weight:800; }
.card,.total-card { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 8px 24px #173d2b0d; margin-bottom:16px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }.section-actions { display:flex; align-items:center; gap:12px; }.text-button { border:0; background:transparent; color:var(--green-2); font-weight:700; padding:7px 4px; font-size:14px; }.text-button:disabled { color:#9aa79f; }
label { display:block; font-size:14px; font-weight:750; margin:18px 0 7px; } input,select { width:100%; min-height:48px; border:1px solid #bfcac2; border-radius:11px; color:var(--ink); background:#fff; padding:0 12px; font:inherit; font-size:16px; } input:focus,select:focus { outline:3px solid #f1c76788; border-color:var(--green-2); }
.stump-group { padding:0 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px; }.stump-group:first-child { padding-top:0; }.stump-group:last-child { margin-bottom:14px; }.group-heading { display:flex; justify-content:space-between; align-items:center; color:var(--green); font-size:14px; }.remove-group,.add-group-button { border:0; background:transparent; color:var(--green-2); font:inherit; font-weight:750; cursor:pointer; }.remove-group { font-size:13px; padding:6px 0; }.add-group-button { width:100%; min-height:46px; border:1px dashed #9eb4a4; border-radius:11px; background:#f4f8f4; font-size:14px; }
.input-with-unit { display:flex; align-items:center; position:relative; }.input-with-unit input { padding-right:72px; }.input-with-unit span:not(.currency) { position:absolute; right:13px; color:var(--muted); font-size:14px; pointer-events:none; }.input-with-unit .currency { position:absolute; left:13px; color:var(--muted); font-size:16px; }.input-with-unit .currency + input { padding-left:28px; padding-right:12px; }.field-note { color:var(--muted); font-size:12px; line-height:1.4; margin-top:6px; }.optional { color:var(--muted); font-weight:500; }
.toggle-row { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:16px 0 0; }.toggle-row label { margin:0 0 3px; }.toggle-row p { color:var(--muted); font-size:12px; line-height:1.3; max-width:250px; }.toggle-row input { appearance:none; width:52px; height:30px; min-height:30px; padding:3px; border-radius:100px; background:#d5ddd7; cursor:pointer; }.toggle-row input::after { content:""; display:block; width:22px; height:22px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 3px #0004; }.toggle-row input:checked { background:var(--green-2); }.toggle-row input:checked::after { transform:translateX(22px); }
.total-card { background:var(--green); color:#fff; border-color:var(--green); }.total-card .eyebrow { color:#cae0ce; }.total { font-size:48px; letter-spacing:-.06em; margin:3px 0 4px; }.quote-status { color:#deece1; font-size:14px; }.quote-lines { margin-top:18px; border-top:1px solid #ffffff33; }.quote-line { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #ffffff22; font-size:14px; }.quote-line span:last-child { font-weight:750; white-space:nowrap; }.quote-disclaimer { color:#cae0ce; font-size:11px; line-height:1.4; margin-top:15px; }
details summary { cursor:pointer; font-weight:800; font-size:16px; color:var(--green); } details[open] summary { margin-bottom:12px; } .settings-panel .primary-button { margin-top:18px; }.primary-button { width:100%; min-height:48px; border:0; border-radius:11px; background:var(--green); color:#fff; font-weight:800; font-size:15px; }.tier-setting { display:grid; grid-template-columns:1fr 110px; gap:10px; align-items:end; margin:12px 0; }.tier-setting label { margin:0; }.tier-setting input { min-height:42px; }
footer { color:var(--muted); text-align:center; font-size:12px; padding:8px; }
.group-help { margin:-4px 0 20px; }
.pricing-mode { padding-top:0; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.pricing-mode p { max-width:460px; }
[hidden] { display:none !important; }
.chip-switches { border:0; padding:0; margin:18px 0 0; min-width:0; }
.chip-switches legend { padding:0; font-size:14px; font-weight:750; }
.chip-switches .toggle-row { padding-top:12px; }
.toggle-row input { flex-shrink:0; }
.toggle-row input:disabled { opacity:.45; cursor:not-allowed; }
.best-price-button { margin-top:16px; width:100%; min-height:48px; border:0; border-radius:11px; background:var(--gold); color:var(--green); font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.best-price-button:disabled { opacity:.55; cursor:default; }
.best-price-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.best-price-note { margin-top:8px; color:#deece1; font-size:12px; line-height:1.4; }
.compare-cleanup-button { margin-top:12px; width:100%; min-height:44px; border:1px solid #ffffff66; border-radius:11px; background:transparent; color:#fff; font:inherit; font-size:14px; font-weight:750; cursor:pointer; }
.compare-cleanup-button:disabled { opacity:.5; cursor:default; }
.scope-label { margin-top:18px; font-size:14px; font-weight:750; }
.cleanup-scope { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.scope-button { min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--green); font:inherit; font-size:13px; cursor:pointer; }
.scope-button[aria-pressed="true"] { background:var(--green); color:#fff; border-color:var(--green); }
.cleanup-choices { display:grid; gap:12px; margin:16px 0; }
.cleanup-choice { padding:16px; border:1px solid var(--line); border-radius:12px; background:#f4f8f4; }
.cleanup-choice h3 { margin:0 0 6px; font-size:16px; }
.cleanup-choice p { color:var(--muted); font-size:13px; line-height:1.4; }
.cleanup-total { display:block; margin:12px 0 4px; color:var(--green); font-size:27px; }
.cleanup-choice button { width:100%; min-height:44px; margin-top:12px; border:0; border-radius:9px; background:var(--green); color:#fff; font:inherit; font-size:14px; font-weight:750; cursor:pointer; }
.cleanup-choice button:disabled { color:var(--green); background:#dce8dd; cursor:default; }
.scope-button:focus-visible,.cleanup-choice button:focus-visible,.compare-cleanup-button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (min-width:700px) { .app-shell { padding-top:42px; } .card,.total-card { padding:24px; } }