:root { --cream:#f6f4ea; --surface:#fffef8; --ink:#20352a; --muted:#617066; --line:#dbe3d5; --dill:#315a35; --lime:#e4efb7; --danger:#a54444; font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:var(--cream); }
button,input,select { font:inherit; }
button { cursor:pointer; }
#app { width:min(100%,430px); min-height:100vh; margin:0 auto; background:var(--cream); display:flex; flex-direction:column; }
.top { background:var(--surface); border-bottom:1px solid var(--line); padding:calc(15px + env(safe-area-inset-top)) 18px 13px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:700; font-size:19px; letter-spacing:-.6px; }
.mark { display:flex; align-items:center; justify-content:center; gap:3px; width:39px; height:38px; }
.pickle { display:block; position:relative; width:15px; height:32px; border-radius:48% 52% 46% 54% / 42% 44% 56% 58%; background:var(--dill); }
.pickle:first-child { transform:rotate(-8deg); }.pickle:last-child { transform:rotate(8deg); }
.pickle::before,.pickle::after { content:""; position:absolute; width:3px; height:3px; border-radius:50%; background:var(--lime); }.pickle::before { top:9px; left:6px; }.pickle::after { top:19px; left:7px; }.pickle:last-child::after { display:none; }.pickle:last-child::before { top:14px; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:var(--lime); color:var(--dill); font-size:12px; font-weight:700; }
.citybar { position:relative; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.citybar > span { color:var(--muted); font-size:12px; max-width:118px; }.citybar .city-picker { flex:1; max-width:225px; }.citybar label { display:none; }
.city-picker { position:relative; }.city-picker input[type="search"] { width:100%; min-height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); padding:8px 10px; font-size:14px; }
.city-results { position:absolute; z-index:5; top:calc(100% + 5px); left:0; right:0; max-height:245px; overflow:auto; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 13px 28px #20352a22; }.city-results button { width:100%; display:flex; flex-direction:column; gap:2px; padding:11px 12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; font-size:14px; }.city-results button:last-child { border-bottom:0; }.city-results button:hover,.city-results button:focus { background:#eef3e7; }.city-results small { color:var(--muted); }
.content { flex:1; padding:22px 18px; }.eyebrow { color:var(--dill); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }.title { margin:7px 0; font-size:29px; line-height:1.1; letter-spacing:-1px; }.sub { margin:0; color:var(--muted); font-size:14px; }
.hero { margin-top:20px; padding:24px 20px; background:var(--lime); border-radius:22px; }.hero p { color:#38512a; font-size:14px; line-height:1.5; }.primary,.secondary { min-height:48px; border:0; border-radius:13px; padding:12px 16px; font-weight:700; }.primary { width:100%; margin-top:18px; background:var(--dill); color:white; }.secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line); }.notice { margin:14px 0; padding:11px 13px; border-radius:12px; background:#edf4e8; color:var(--dill); font-size:13px; }.section-head { margin:26px 0 11px; display:flex; align-items:center; justify-content:space-between; }.section-head h2 { margin:0; font-size:17px; }.text-button { border:0; background:transparent; color:var(--dill); font-weight:700; }
.community { width:100%; margin:10px 0; padding:15px; text-align:left; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); }.community strong { display:block; font-size:15px; }.community span { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.4; }.community small { display:block; margin-top:10px; color:var(--muted); }
.bottom { position:sticky; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:9px 18px max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }.tab { min-height:48px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-weight:700; }.tab.active { background:#eef3e7; color:var(--dill); }
.searching { min-height:390px; display:grid; align-content:center; justify-items:center; text-align:center; gap:15px; }.searching .ring { width:60px; height:60px; border-radius:50%; border:7px solid var(--lime); border-top-color:var(--dill); animation:spin 1s linear infinite; }.searching h1 { margin:0; font-size:27px; }.searching p { max-width:300px; color:var(--muted); } @keyframes spin { to { transform:rotate(360deg); } }
.chat { display:flex; flex-direction:column; min-height:calc(100vh - 190px); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); }.chat-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--line); }.chat-head .meta { flex:1; }.chat-head .meta strong { display:block; }.chat-head .meta span { color:var(--muted); font-size:12px; }.messages { flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; }.bubble { max-width:84%; padding:11px 13px; border-radius:14px 14px 14px 3px; background:#f1f3ec; line-height:1.4; font-size:14px; }.bubble.own { align-self:flex-end; border-radius:14px 14px 3px 14px; background:var(--lime); }.composer { display:flex; gap:8px; padding:11px; border-top:1px solid var(--line); }.composer input { min-width:0; flex:1; min-height:46px; border:1px solid var(--line); border-radius:12px; background:var(--cream); padding:11px 12px; font-size:16px; }.send { width:48px; border:0; border-radius:12px; background:var(--dill); color:white; font-size:20px; }.small-actions { display:flex; gap:7px; }.small-actions button { min-height:36px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-size:12px; }.small-actions .danger { color:var(--danger); }
.setup { min-height:100vh; padding:42px 22px; display:flex; flex-direction:column; justify-content:center; }.setup .mark { margin-bottom:18px; }.setup label { margin:18px 0 6px; font-size:13px; font-weight:700; }.setup input { min-height:48px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:11px; color:var(--ink); font-size:16px; }.setup .city-picker input { min-height:48px; }.setup small { color:var(--muted); margin-top:14px; line-height:1.4; }
.empty { padding:34px 15px; text-align:center; color:var(--muted); }
@media (min-width:700px) { body { padding:24px; } #app { min-height:860px; border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:0 14px 45px #315a3514; } }
@media (prefers-reduced-motion:reduce) { .searching .ring { animation:none; } }