/* Functional additions keep the original palette, type, spacing, and navigation. */
[hidden]{display:none!important}
html,body{height:100%;height:100dvh}
.app,.main-app{min-height:0}
.flow-body,.app-body{min-height:0}
button,select,input,textarea{font:inherit}
button:focus-visible,a:focus-visible,[role=button]:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed}
.hero{overflow-y:auto}
.day-chip{color:var(--w)}
.day-row{padding:3px 1px}
.form-input{font-size:16px}
textarea.form-input{resize:vertical;min-height:70px}
.form-input[aria-invalid=true]{border-color:var(--coral)}
.field-help,.empty-state{color:var(--w70);font-size:.75rem;line-height:1.6;margin:.4rem 0}
.field-help a,.empty-state a,.dialog-copy a{color:var(--lime)}
.error-message{font-size:.78rem;line-height:1.4;color:#ffaaaa;margin:0 0 .65rem}
.sum-row,.confirm-row{gap:.8rem}
.sum-row strong,.confirm-row strong{text-align:right;overflow-wrap:anywhere}
.oc-id,.ao-id{overflow-wrap:anywhere}
.oc-top,.ao-top{gap:.5rem}
.oc-desc,.ao-desc{line-height:1.6;overflow-wrap:anywhere}
.order-actions{display:flex;gap:.4rem;margin-top:.7rem}
.order-actions button{min-height:38px}
.pf-item{min-height:44px}
.quick-card{min-height:58px}
.tab{min-height:48px}
.hdr-bell{width:40px;height:40px}
.hdr-streak{white-space:nowrap}
.home-greet,.stat-lbl,.sec-title,.reward-next,.pf-loc,.pf-st-l,.quick-sub{color:var(--w70)}
.tab{color:var(--w70)}
.ao-lbl{font-size:.5rem;color:var(--w50)}
.notif-panel{top:calc(58px + var(--sat,0px));max-height:70dvh;overflow:auto;width:min(330px,calc(100% - 1rem))}
.notif-time{color:var(--w50)}
.notif-txt{overflow-wrap:anywhere}
.confirm-inner{padding-top:1rem}
.confirm{padding-top:calc(1.5rem + var(--sat,0px));padding-bottom:calc(1.5rem + var(--sab,0px))}
.confirm-skip{color:var(--w70);min-height:36px}
dialog{margin:auto;border:1px solid var(--w15);border-radius:var(--r-card);background:var(--bg2);color:var(--w);width:min(440px,calc(100% - 1.5rem));max-height:85dvh;padding:1.1rem;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.7)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.dialog-header h2{font:700 1.2rem var(--hd)}
.dialog-copy{font-size:.85rem;line-height:1.65;color:var(--w70)}
.dialog-copy p{margin:.6rem 0}
.dialog-copy a{overflow-wrap:anywhere}
.dialog-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.dialog-actions a{text-align:center;text-decoration:none}
.check-row{display:flex;gap:.6rem;align-items:center;margin:.9rem 0;font-size:.82rem;line-height:1.5}
.check-row input{accent-color:var(--lime);width:20px;height:20px}
.toast,.connection-banner{position:fixed;left:50%;transform:translateX(-50%);z-index:500;width:max-content;max-width:calc(100% - 2rem);background:var(--bg3);border:1px solid var(--w30);border-radius:12px;padding:.7rem 1rem;color:var(--w);font-size:.8rem;line-height:1.4;box-shadow:0 4px 24px #0008}
.toast{bottom:calc(80px + var(--sab,0px))}
.connection-banner{top:0;border-radius:0 0 12px 12px;font-size:.72rem;text-align:center}
.connection-banner button{background:none;border:none;color:var(--lime);padding:.4rem;cursor:pointer}
.no-script{position:fixed;inset:0;z-index:999;background:var(--bg);padding:30vh 2rem;color:white;text-align:center}
.no-script a{color:var(--lime)}
.credit{color:var(--w50)}.credit a{color:var(--teal)}
@media(max-height:600px){.hero{justify-content:flex-start;padding-top:1rem}.hero-stats{margin-top:.7rem}.hero-scroll{display:none}.hero-badge{margin-bottom:.8rem}.hero-sub{margin-bottom:1rem}.hero-trust{margin-top:.6rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-canvas,.confetti-cv{display:none}}

/* Payment states share the existing brand and remain readable at mobile widths. */
.payment-mode { position:fixed; top:0; left:0; right:0; z-index:80; padding:7px 12px; text-align:center; background:#d9efad; color:#182708; font:600 11px/1.4 Inter,sans-serif; }
.payment-mode[hidden] { display:none; }
.app:has(.payment-mode:not([hidden])) .hero-content { padding-top:40px; }
.app:has(.payment-mode:not([hidden])) .flow-hdr,.app:has(.payment-mode:not([hidden])) .app-hdr { padding-top:40px; }
.payment-card { padding:16px; margin:14px 0; border:1px solid rgba(188,245,96,.25); border-radius:16px; background:rgba(188,245,96,.045); }
.payment-card p { font-size:13px; line-height:1.6; color:var(--w60); margin:8px 0 12px; }
.payment-card button,.payment-card a { margin-top:10px; }
.payment-security { display:block; color:var(--lime); font-size:11px; line-height:1.5; }