:root{--bg:#f6efe3;--ink:#2a1d14;--mut:#7a6a5c;--glass:rgba(255,252,246,.82);--line:rgba(60,30,10,.1);--green:#2f8f5b;--soil:#b5523b;--gold:#e0a63a;--map:#c9d9a8;--road:#d8b48a}
[data-theme=night]{--bg:#141a2b;--ink:#f3ead9;--mut:#a79d8e;--glass:rgba(28,34,56,.82);--line:rgba(255,255,255,.1);--map:#2b3a2e;--road:#4a3a2c}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:16px/1.4 "Nunito","Trebuchet MS",system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;box-shadow:0 6px 24px rgba(60,30,10,.12)}
#app{max-width:520px;margin:0 auto;height:100%;display:flex;flex-direction:column;gap:8px;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));position:relative}
.hud{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;font-weight:800}.hud .mood{color:var(--green);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .bal{background:var(--line);padding:8px 12px;border-radius:16px}.plus{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;font-size:22px;font-weight:800}
.pills{display:flex;gap:8px;justify-content:center;font-size:13px;font-weight:700}.pills span{background:var(--glass);padding:4px 12px;border-radius:14px}.pills .on{color:var(--green)}
.gov{background:var(--green);color:#fff;padding:8px 14px;border-radius:16px;font-weight:700;font-size:14px}
.daily{padding:10px 16px;font-weight:800;cursor:pointer}
main{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.scene{padding:18px;text-align:center;background:linear-gradient(160deg,var(--soil),#7d3a2a);color:#fff;border-radius:26px}.scene .big{font-size:64px}.scene h2{margin:4px 0}.scene p{margin:0;opacity:.9}
.sec{padding:12px}.sec h3{margin:0 0 8px;font-size:15px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{background:var(--line);padding:10px;border-radius:16px;text-align:left;font-weight:700;font-size:14px}.btn small{display:block;color:var(--mut);font-weight:600}.btn.go{background:var(--green);color:#fff}.btn.go small{color:#e6f5ec}
.btn:disabled{opacity:.45}.people{display:flex;gap:8px;overflow:auto}.people div{text-align:center;font-size:12px}
.needs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px;padding:10px 14px}.need{display:flex;align-items:center;gap:6px;font-size:16px}.bar{flex:1;height:8px;border-radius:5px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;border-radius:5px;transition:width .4s}
nav{display:grid;grid-template-columns:repeat(4,1fr);padding:6px;gap:4px}nav button{background:none;padding:8px 0;border-radius:18px;font-weight:800;font-size:13px}nav button.on{background:var(--ink);color:var(--bg)}nav span{display:block;font-size:20px}
footer{text-align:center;font-size:12px;color:var(--mut);font-weight:700}
.map{position:relative;flex:none;height:62vh;min-height:420px;border-radius:26px;background:radial-gradient(circle at 80% 90%,#79b8d6 0 14%,transparent 15%),linear-gradient(90deg,transparent 48%,var(--road) 48% 52%,transparent 52%),linear-gradient(0deg,transparent 48%,var(--road) 48% 51%,transparent 51%),var(--map);overflow:hidden}
.pin{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--glass);font-size:22px;box-shadow:0 3px 10px rgba(0,0,0,.25)}.pin.here{outline:3px solid var(--green)}
.sheet,.modal{position:absolute;left:10px;right:10px;z-index:5;padding:16px}.sheet{bottom:150px}
.modal{top:10px;bottom:10px;overflow:auto;border-radius:34px;background:linear-gradient(170deg,#4b2bb5,#c7502c 80%,#f0a92a);color:#fff;border:8px solid #15151a}
.modal .x{position:sticky;top:0;float:right;background:#fff;color:#000;padding:8px 16px;border-radius:20px;font-weight:800}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;text-align:center;font-size:12px;font-weight:700}.app{background:none;color:#fff}.app b{display:grid;place-items:center;height:60px;border-radius:18px;background:rgba(255,255,255,.2);font-size:30px;margin-bottom:4px}.app.soon{opacity:.5}
.sub{background:var(--glass);color:var(--ink);border-radius:20px;padding:12px;margin-top:12px}.row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.chat{max-height:42vh;overflow:auto}.msg b{color:var(--green)}input[type=text],input[type=password]{width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:16px;font-weight:700;z-index:20;max-width:90%}
.splash{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:var(--bg);z-index:30;transition:opacity .5s}.splash h1{font-size:44px;margin:0;color:var(--soil)}
.hero{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:14px;padding:20px;background:linear-gradient(180deg,#cfe6f2 0,#f1e2c5 45%,var(--soil) 100%)}
.hero h1{font-size:52px;margin:0;color:#3a1c10;line-height:1}.hero .tag{margin:0;color:#6a4a38;font-weight:700}.hero .card{width:100%;max-width:420px;padding:18px;display:flex;flex-direction:column;gap:10px;background:rgba(255,252,246,.92)}
.hero .btn{text-align:center;padding:14px;border-radius:24px}.hero .tabs{display:flex;gap:6px}.hero .tabs button{flex:1;padding:8px;border-radius:14px;background:var(--line);font-weight:800}.hero .tabs .on{background:var(--ink);color:var(--bg)}
.swatches{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700}.swatches input{width:44px;height:34px;border:0;padding:0;background:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.stage{position:relative;height:42vh;min-height:300px;flex:none;border-radius:26px;overflow:hidden;background:linear-gradient(#cfe6f2,#efe0c4);touch-action:pan-y}
[data-theme=night] .stage{background:linear-gradient(#141a2b,#2a2438)}.stage.full{height:48vh}.stage canvas{display:block;width:100%;height:100%}
.buytop{display:flex;gap:8px;align-items:center;padding:8px 12px;font-weight:800}.buytop .bal{flex:1;text-align:center}.buytop button{width:40px;height:40px;border-radius:50%;background:var(--line);font-size:18px}
.cat{flex:1;min-height:0;overflow:auto;padding:12px}.tabs2{display:flex;gap:6px;overflow:auto;margin-bottom:8px}.tabs2 button{white-space:nowrap;padding:8px 14px;border-radius:18px;background:var(--line);font-weight:800}.tabs2 .on{background:var(--ink);color:var(--bg)}
.ic{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.ic span{flex:1}.ic small{display:block;color:var(--mut)}.ic .btn{padding:8px 12px}
.banner{background:var(--gold);color:#2a1d14;padding:8px 12px;border-radius:14px;font-weight:800;margin-bottom:8px;display:flex;gap:8px;align-items:center}.banner button{background:#fff;padding:6px 10px;border-radius:12px;font-weight:800}
.prev{height:300px;border-radius:22px;background:linear-gradient(#cfe6f2,#e9eef7);overflow:hidden;color:#000}.prev canvas{display:block;width:100%;height:100%}