:root{--brown-50: #fdf8f6;--brown-100: #f2e8e5;--brown-200: #eaddd7;--brown-300: #e0cec8;--brown-400: #a78a7a;--brown-500: #9c7355;--brown-600: #6d4c2e;--brown-700: #5d3a2a;--brown-800: #4a2c1f;--brown-900: #3d2319;--brown-950: #2c1810;--accent: var(--brown-600);--accent-hover: var(--brown-700);--accent-light: var(--brown-400);--card-bg: rgba(253, 248, 246, .96);--card-border: rgba(139, 105, 20, .2);--text-primary: var(--brown-900);--text-secondary: var(--brown-600);--input-bg: #fff;--input-border: var(--brown-300);--header-bg: var(--brown-800);--header-text: #fff;--max-content: 480px;--radius: 16px;--radius-sm: 10px}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text-primary)}#root{min-height:100vh;display:flex;flex-direction:column}.app-shell{flex:1;min-height:100vh;background:linear-gradient(180deg,#87ceeb,#b8d4e3 25%,#a8d5a2,#7cb87a,#5a9e5a 85%,#4a8c4a);background-size:cover;background-position:center;background-attachment:fixed;position:relative}.app-shell:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 30%,transparent 70%,rgba(45,55,45,.2) 100%);pointer-events:none}.app-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.card{background:var(--card-bg);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:0 4px 20px #2d382d26;border:1px solid var(--card-border);width:100%;max-width:var(--max-content)}.card h1,.card h2,.card h3{margin:0 0 12px;color:var(--text-primary);font-weight:700}.card p{color:var(--text-secondary);font-size:14px;margin:0 0 12px;line-height:1.5}button,.btn{cursor:pointer;padding:12px 20px;border-radius:var(--radius-sm);border:none;font-size:15px;font-weight:600;transition:background .2s,transform .05s;background:var(--accent);color:#fff}button:hover:not(:disabled),.btn:hover{background:var(--accent-hover)}button:active:not(:disabled),.btn:active{transform:scale(.98)}button:disabled{opacity:.6;cursor:not-allowed}button.secondary,.btn-secondary{background:var(--brown-200);color:var(--brown-800)}button.secondary:hover:not(:disabled){background:var(--brown-300)}input[type=text],input[type=email],input[type=number]{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);font-size:16px;width:100%;max-width:100%;transition:border-color .2s}input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #6d4c2e33}label{display:block;margin-bottom:6px;font-weight:500;color:var(--text-primary)}.app-header{background:var(--header-bg);color:var(--header-text);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.app-header .back{background:transparent;color:inherit;padding:8px;font-size:18px}.app-header .back:hover{background:#ffffff26}.list-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--brown-200);text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}.list-item:last-child{border-bottom:none}.list-item:hover{background:#8b69140f}.list-item .avatar{width:44px;height:44px;border-radius:50%;background:var(--brown-300);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.list-item .title{font-weight:600;color:var(--text-primary)}.list-item .meta{font-size:13px;color:var(--text-secondary);margin-top:2px}.list-item .chevron{margin-left:auto;color:var(--brown-500);font-size:18px}.hero-buttons{display:flex;flex-direction:column;gap:14px;width:100%;max-width:var(--max-content);margin-top:24px}.hero-buttons .btn{padding:18px 24px;font-size:17px;border-radius:var(--radius);text-align:center}.error-message{color:#b91c1c;font-size:14px;margin-bottom:12px;padding:10px;background:#b91c1c14;border-radius:var(--radius-sm)}@media(min-width:768px){.app-content{padding:32px;justify-content:center}.card{padding:28px}.hero-buttons{flex-direction:row;justify-content:center;gap:20px;max-width:560px}.hero-buttons .btn{flex:1;max-width:260px}}.state-renderer{background:var(--card-bg);min-height:100vh;display:flex;flex-direction:column}.state-renderer header{background:var(--header-bg)!important;color:var(--header-text)!important;border:none!important}.state-renderer main{padding:20px!important;flex:1}.state-renderer p{color:var(--text-secondary)}