:root{--surface: #FFF8F1;--surface-card: #F5E6C8;--surface-input: #F0E4CE;--surface-dim: #E7D9BB;--bg-main: #F2D48C;--cta: #D9A845;--cta-hover: #E89545;--text-primary: #3A2418;--text-secondary: #5A3520;--cream-fill: #F0E4CE;--accent-deep: #6B2E1A;--accent-red: #A8371C;--success-green: #2E8B45;--font-display: "Bricolage Grotesque", system-ui, sans-serif;--font-body: "Be Vietnam Pro", system-ui, sans-serif;--sp-xs: 4px;--sp-sm: 8px;--sp-md: 16px;--sp-lg: 24px;--sp-xl: 32px;--sp-2xl: 48px;--margin-mobile: 20px;--r-input: 8px;--r-card: 16px;--r-sheet: 24px;--r-pill: 999px;--sticker-border: 4px solid var(--surface-card);--shadow-hard: 4px 4px 0px 0px rgba(58, 36, 24, .2);--shadow-hard-sm: 3px 3px 0px 0px rgba(58, 36, 24, .18)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--surface);color:var(--text-primary);font-family:var(--font-body);font-weight:400;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}#root{min-height:100vh;min-height:100dvh}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}.app-shell{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:0 var(--margin-mobile) var(--sp-md);position:relative;z-index:2;display:flex;flex-direction:column}.headline-lg{font-family:var(--font-display);font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0}.headline-md{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.2;margin:0}.body-lg{font-size:16px;font-weight:400;line-height:1.5}.body-sm,.sub-text{font-size:14px;font-weight:400;line-height:1.4;color:var(--text-secondary)}.label-bold{font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.05em}.caption{font-size:12px;font-weight:400;line-height:1.4;color:var(--text-secondary)}.screen-title{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text-primary);margin:0 0 var(--sp-lg)}.btn{font-family:var(--font-body);font-weight:700;font-size:16px;border:none;border-radius:var(--r-pill);padding:16px 24px;width:100%;cursor:pointer;background:var(--cta);color:var(--text-primary);box-shadow:var(--shadow-hard);transition:transform .08s ease,box-shadow .08s ease,background .15s ease;-webkit-tap-highlight-color:transparent}.btn:hover:not(:disabled){background:var(--cta-hover)}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px #3a241833}.btn:disabled{background:var(--surface-input);color:var(--text-secondary);box-shadow:none;cursor:not-allowed;opacity:.75}.btn-secondary{background:var(--surface-card);color:var(--text-secondary);border:2px solid var(--cta)}.btn-secondary:hover:not(:disabled){background:var(--surface-input)}.card{background:var(--surface-card);border-radius:var(--r-card);padding:var(--sp-md);border:var(--sticker-border);box-shadow:var(--shadow-hard)}.debug-toggle{position:fixed;top:6px;right:6px;z-index:999;font-size:10px;padding:4px 7px;border-radius:6px;border:1px dashed var(--text-secondary);background:#fff9;color:var(--text-secondary);cursor:pointer;font-family:monospace;opacity:.4}.debug-toggle.on{opacity:1;background:#ba1a1a;color:#fff;border-color:#ba1a1a}.toast{position:fixed;bottom:var(--sp-xl);left:50%;transform:translate(-50%);background:var(--text-primary);color:var(--cream-fill);padding:10px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:500;z-index:1000;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.screen-enter{animation:fade-up .28s ease both}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spacer{flex:1}.action-bar{position:sticky;bottom:0;z-index:10;background:var(--surface);padding-top:var(--sp-sm);padding-bottom:calc(var(--sp-sm) + env(safe-area-inset-bottom,0px));margin:0 calc(var(--margin-mobile) * -1);padding-left:var(--margin-mobile);padding-right:var(--margin-mobile)}
