:root{--green:#2f6b3a;--green2:#4f8f4a;--leaf:#9cc58a;--sun:#f4b942;--sky:#cfeaf6;--cream:#fffaf0;--ink:#24332a;--muted:#5d6b61;--terra:#d9623b;--free:#3aa055;--maybe:#e8a92c;--busy:#d0574a;--unk:#d9d4c7;--card:#ffffffee;--r:18px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky) 0%,#eef7ea 55%,#e3f0d9 100%);min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
#scenery{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sun{position:absolute;top:28px;right:24px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#ffe08a 0 55%,#f4b94200 70%);box-shadow:0 0 60px 20px #ffe5a055;animation:pulse 6s ease-in-out infinite}
.cloud{position:absolute;width:120px;height:38px;background:#fff;border-radius:40px;opacity:.85;filter:blur(.3px)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:56px;height:56px;top:-26px;left:18px}.cloud::after{width:40px;height:40px;top:-16px;left:62px}
.c1{top:90px;left:-140px;animation:drift 70s linear infinite}.c2{top:170px;left:-140px;transform:scale(.7);animation:drift 95s linear infinite 20s}.c3{top:40px;left:-140px;transform:scale(.5);animation:drift 120s linear infinite 45s}
.hills{position:absolute;bottom:0;left:0;width:100%;height:28vh}
.balloon{position:absolute;bottom:22vh;left:8%;font-size:28px;animation:float 14s ease-in-out infinite}
@keyframes drift{to{transform:translateX(calc(100vw + 300px))}}
@keyframes pulse{50%{transform:scale(1.06)}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-60px)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--green);color:#fff}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:.2px}
.logo{display:inline-block;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-6deg)}}
.top-actions{display:flex;gap:6px;align-items:center}
.chip{background:#ffffff26;color:#fff;border:0;border-radius:999px;padding:6px 10px;font:inherit;font-size:.9rem;cursor:pointer}
.bunting{height:16px;background:repeating-linear-gradient(90deg,transparent 0 4px,transparent 4px 36px),conic-gradient(from 150deg at 50% 0,var(--sun) 0 60deg,transparent 0) 0 0/36px 16px,conic-gradient(from 150deg at 50% 0,var(--terra) 0 60deg,transparent 0) 12px 0/36px 16px;transform-origin:top;animation:sway 4s ease-in-out infinite}
@keyframes sway{50%{transform:skewX(3deg)}}
main{max-width:640px;margin:0 auto;padding:12px}
.card{background:var(--card);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:0 4px 0 #0000000d,0 8px 24px #2f6b3a14;backdrop-filter:blur(4px)}
.center{text-align:center}
h1{font-size:2.1rem;line-height:1.05;margin:.2em 0;color:var(--green)}
h2{font-size:1.3rem;margin:.1em 0 .3em;color:var(--green)}
h3{margin:.2em 0}
.sub{color:var(--muted);margin:.3em 0 .8em}
.hero-emoji{font-size:64px}
.wobble{animation:bob 2.5s ease-in-out infinite}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
input,textarea,select{font:inherit;width:100%;padding:12px 14px;border:2px solid #cfdcc6;border-radius:14px;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:3px solid var(--sun);border-color:var(--green2)}
button:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--green);color:#fff;border:0;border-radius:14px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 0 #1d4a26;text-decoration:none;min-height:44px}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1d4a26}
.btn.big{width:100%;margin-top:10px;font-size:1.1rem}
.btn.huge{width:100%;font-size:1.3rem;padding:18px}
.btn.alt{background:#fff;color:var(--green);box-shadow:0 4px 0 #cfdcc6;border:2px solid #cfdcc6}
.btn.warn{background:var(--terra);box-shadow:0 4px 0 #9c3f21}
.btn.small{padding:8px 12px;min-height:38px;font-size:.92rem}
.surprise{background:linear-gradient(135deg,var(--terra),#f08a3c);box-shadow:0 5px 0 #9c3f21;margin:6px 0}
.surprise:hover{filter:brightness(1.05)}
.link{background:none;border:0;color:var(--green);text-decoration:underline;font:inherit;cursor:pointer;padding:8px}
.msg{min-height:1.3em;color:var(--terra);font-weight:700}
.name-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.name-btn{background:#fff;border:2px solid #d8e6cf;border-radius:14px;padding:10px 4px;font:inherit;font-weight:700;cursor:pointer;min-height:58px}
.name-btn small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
.name-btn:active{transform:scale(.97)}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:14px 0}
.pin-dots i{width:18px;height:18px;border-radius:50%;border:3px solid var(--green);display:block}
.pin-dots i.on{background:var(--green)}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto}
.pinpad button{font-size:1.5rem;padding:14px 0;border-radius:16px;border:0;background:#fff;box-shadow:0 3px 0 #cfdcc6;cursor:pointer;font-weight:700;color:var(--ink)}
.pinpad button:active{transform:translateY(2px)}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:#fff;border-top:1px solid #dfe8d8;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px #2f6b3a14}
.tabbar button{flex:1;background:none;border:0;font:inherit;font-size:.74rem;color:var(--muted);padding:8px 0 10px;cursor:pointer;min-height:56px}
.tabbar button span{display:block;font-size:1.35rem;transition:transform .2s}
.tabbar button.active{color:var(--green);font-weight:800}
.tabbar button.active span{transform:translateY(-3px) scale(1.15)}
.hello h2{margin-bottom:0}
.job .bar{height:12px;border-radius:99px;background:#e7efe0;overflow:hidden;margin:8px 0}
.job .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--free),var(--sun));border-radius:99px;transition:width .6s}
.plan-hero{background:linear-gradient(135deg,#2f6b3a,#4f8f4a);color:#fff}
.plan-hero h2,.plan-hero .sub{color:#fff}
.plan-hero a{color:#fff}
.countdown{display:flex;gap:8px;margin:10px 0}
.countdown div{background:#ffffff26;border-radius:12px;padding:6px 10px;text-align:center;min-width:58px}
.countdown b{display:block;font-size:1.5rem}
.countdown small{font-size:.7rem;opacity:.9}
.pill{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.78rem;font-weight:700;background:#eef4ea;color:var(--green);margin:2px 2px 2px 0}
.pill.local{background:#e3f4e1;color:#23662f}.pill.nearby{background:#fff1d6;color:#8a5a00}.pill.trip{background:#fde3da;color:#9c3f21}
.pill.ok{background:#e3f4e1;color:#23662f}.pill.warn{background:#fde3da;color:#9c3f21}
.pill.confirmed{background:var(--sun);color:#4a3200}.pill.proposed{background:#e9eef7;color:#33476b}
.best-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px dashed #dbe5d3;cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;font:inherit;text-align:left;color:inherit}
.best-row:last-child{border-bottom:0}
.medal{font-size:1.5rem}
.names{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.nm{background:#eef4ea;border-radius:99px;padding:2px 8px;font-size:.82rem}
.nm.free{background:#dff2e3}.nm.maybe{background:#fff0cf}.nm.busy{background:#fbe0dc}.nm.unknown{background:#eee}
.seg{display:flex;background:#eef4ea;border-radius:12px;padding:4px;gap:4px;margin:8px 0}
.seg.small{margin-top:12px}
.seg-btn{flex:1;border:0;background:none;padding:9px;border-radius:9px;font:inherit;font-weight:700;color:var(--muted);cursor:pointer}
.seg-btn.active{background:#fff;color:var(--green);box-shadow:0 2px 6px #0001}
.quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip-btn{border:2px solid #cfdcc6;background:#fff;border-radius:99px;padding:7px 12px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink);min-height:40px}
.chip-btn.on{background:var(--green);color:#fff;border-color:var(--green)}
.progress{font-size:.85rem;color:var(--muted);margin-left:auto}
.footy{margin-top:10px;padding:12px;border-radius:14px;background:#f4f8f0}
.footy .row{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}
.footy select{width:auto;padding:8px}
.wk{background:var(--card);border-radius:var(--r);padding:12px;margin:10px 0;box-shadow:0 3px 0 #0000000a}
.wk.best{outline:3px solid var(--sun)}
.wk-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px}
.wk-head b{font-size:1rem}
.wk-days{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.day-btn{border:0;border-radius:14px;padding:10px 6px;font:inherit;font-weight:800;cursor:pointer;min-height:64px;background:#f1efe8;color:var(--ink);position:relative;transition:transform .12s,background .2s}
.day-btn:active{transform:scale(.96)}
.day-btn small{display:block;font-weight:600;font-size:.75rem;opacity:.85}
.day-btn.free{background:var(--free);color:#fff}.day-btn.maybe{background:var(--maybe);color:#3d2a00}.day-btn.busy{background:var(--busy);color:#fff}
.day-btn.pattern{background-image:repeating-linear-gradient(45deg,#ffffff33 0 6px,transparent 6px 12px)}
.pop{animation:pop .25s}
@keyframes pop{50%{transform:scale(1.07)}}
.heatbar{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.78rem;color:var(--muted);background:none;border:0;padding:4px 0;cursor:pointer;width:100%;font-family:inherit;text-align:left}
.heatbar .hb{flex:1;height:8px;border-radius:99px;background:#ebe7dc;overflow:hidden}
.heatbar .hb i{display:block;height:100%;background:linear-gradient(90deg,var(--maybe),var(--free))}
.wk-extra{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;align-items:center}
.evchip{font-size:.78rem;background:#fff5df;border-radius:99px;padding:3px 8px}
.bedchip{font-size:.78rem;background:#e8f0fb;border-radius:99px;padding:3px 8px;border:0;cursor:pointer;font-family:inherit;color:var(--ink);min-height:30px}
.hm{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px;align-items:stretch;background:var(--card);padding:12px;border-radius:var(--r)}
.hm .lbl{font-size:.8rem;padding:6px 6px 6px 0;color:var(--muted);white-space:nowrap}
.hm .hd{font-weight:800;text-align:center;font-size:.8rem;color:var(--muted)}
.hm button{border:0;border-radius:8px;font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;min-height:36px;color:#fff}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin:8px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:3px}
.idea{background:var(--card);border-radius:var(--r);padding:14px;margin:10px 0;box-shadow:0 3px 0 #0000000a}
.idea h3{font-size:1.08rem}
.meta{font-size:.84rem;color:var(--muted);margin:4px 0}
.meta a{color:var(--green)}
.reacts{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.react{border:2px solid #e2e9dc;background:#fff;border-radius:99px;padding:6px 12px;font:inherit;cursor:pointer;min-height:40px}
.react.on{border-color:var(--green);background:#e6f3e2}
.react .n{font-weight:800;margin-left:3px}
.who{font-size:.78rem;color:var(--muted)}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.comments{margin-top:8px;border-top:1px dashed #dbe5d3;padding-top:8px}
.comment{font-size:.9rem;margin:4px 0}
.comment b{color:var(--green)}
.tweak{font-size:.88rem;background:#fff7e3;border-radius:10px;padding:6px 8px;margin:4px 0}
.inline-form{display:flex;gap:6px;margin-top:6px}
.inline-form input{padding:9px 12px}
.stack{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.stack label{font-weight:700;font-size:.9rem}
.stack .hint{font-weight:400;color:var(--muted);font-size:.8rem}
.kinds{display:flex;flex-wrap:wrap;gap:6px}
.filters{display:flex;gap:6px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.filters .chip-btn{flex:0 0 auto;white-space:nowrap}
.event{display:flex;gap:12px;background:var(--card);border-radius:var(--r);padding:12px;margin:10px 0;box-shadow:0 3px 0 #0000000a}
.event.hot{outline:3px solid var(--sun)}
.datebadge{flex:0 0 58px;text-align:center;background:var(--green);color:#fff;border-radius:12px;padding:6px 2px;height:fit-content}
.datebadge b{display:block;font-size:1.4rem;line-height:1}
.datebadge small{font-size:.72rem;text-transform:uppercase}
.datebadge.tbc{background:#9aa59c}
.event h3{font-size:1rem}
.small-print{font-size:.82rem;color:var(--muted)}
.small-print a{color:var(--green)}
.plan{background:var(--card);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:0 3px 0 #0000000a}
.plan.confirmed{outline:3px solid var(--sun)}
.rsvp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.rsvp button{border:2px solid #e2e9dc;background:#fff;border-radius:12px;padding:10px 4px;font:inherit;font-weight:800;cursor:pointer;min-height:48px;color:var(--ink)}
.rsvp button.on.yes{background:var(--free);border-color:var(--free);color:#fff}
.rsvp button.on.maybe{background:var(--maybe);border-color:var(--maybe)}
.rsvp button.on.no{background:var(--busy);border-color:var(--busy);color:#fff}
.headcount{font-size:2rem;font-weight:900;color:var(--green)}
.beds{margin-top:12px;background:#f1f6fd;border-radius:14px;padding:12px}
.beds h4{margin:0 0 6px}
.bedtotals{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;margin:6px 0 10px}
.bedtotals div{background:#fff;border-radius:10px;padding:6px}
.bedtotals b{display:block;font-size:1.3rem}
.bedtotals small{font-size:.72rem;color:var(--muted)}
.offer{background:#fff;border-radius:12px;padding:10px;margin:8px 0}
.offer .beds-icons{font-size:1.2rem;letter-spacing:2px}
.offer .full{color:var(--busy);font-weight:800}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:12px;border:2px solid #cfdcc6;background:#fff;font-size:1.3rem;cursor:pointer}
.stepper output{font-size:1.3rem;font-weight:800;min-width:2ch;text-align:center}
.sheet{position:fixed;inset:0;z-index:60;background:#0006;display:flex;align-items:flex-end;justify-content:center}
.sheet-body{background:var(--cream);width:100%;max-width:640px;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));position:relative;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sheet-close{position:absolute;top:10px;right:10px;border:0;background:#0000000f;border-radius:50%;width:40px;height:40px;font-size:1.1rem;cursor:pointer}
.sug{background:#fff;border-radius:16px;padding:14px;margin:10px 0;box-shadow:0 3px 0 #0000000d;animation:up .35s ease-out both}
.sug:nth-child(2){animation-delay:.08s}.sug:nth-child(3){animation-delay:.16s}
.sug .pitch{font-style:italic;margin:6px 0}
.travel{font-size:.82rem;color:var(--muted)}
.moods{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;z-index:70;max-width:90vw;transition:.25s;pointer-events:none;font-weight:600;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.foot-note{text-align:center}
.admin table{width:100%;border-collapse:collapse;font-size:.85rem}
.admin td,.admin th{padding:6px 4px;border-bottom:1px solid #e5ece0;text-align:left}
.empty{text-align:center;color:var(--muted);padding:14px}
@media (min-width:560px){.name-grid{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.cloud,.balloon{display:none}}