/* AFERO — platform shell is a calm ink-on-paper UI; each venue page takes its own accent and light/dark theme. */
:root{
  --bg:#F5F6F3; --surface:#FFFFFF; --surface2:#ECEFEA; --ink:#141A1F; --muted:#5D6870; --line:#D9DED8;
  --accent:#1D5C86; --accent-ink:#FFFFFF; --brand:#E2533A;
  --ok:#2F7D5B; --ok-soft:#DDF0E6; --bad:#B4413A; --bad-soft:#F6DFDC; --warn:#A86A12; --warn-soft:#F7EBD5;
  --taken:#C3CCCC; --taken-line:#9AA7A8; --chair:#B9C6C8; --zone:#EEF2EF; --zone-line:#C9D4D1; --zone2:#E2ECF2;
  --font-d:"Bricolage Grotesque", system-ui, sans-serif; --font-b:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:14px; --shadow:0 1px 2px rgba(20,26,31,.06), 0 8px 24px rgba(20,26,31,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:var(--font-b);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
.page{padding-block:32px 64px;min-height:60vh}
.narrow{max-width:480px}
.boot{padding:40px;text-align:center;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:13px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--font-d);line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.01em}
h3{font-size:18px;font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.empty{padding:32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty>.i{width:30px;height:30px;color:var(--accent)}
.skeleton{height:120px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface2),var(--surface),var(--surface2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* Buttons & forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;font-weight:600;text-decoration:none;color:var(--ink);transition:transform .15s, border-color .15s, box-shadow .15s}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent)}
.btn.big{padding:13px 20px;font-size:16px;border-radius:12px}
.form{display:flex;flex-direction:column;gap:14px;padding:24px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:13px;font-weight:600}
.field input,.field textarea,.field select,.addowner input{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;width:100%;min-width:0;outline:none}
.field input:focus,.field textarea:focus,.addowner input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.row-end{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.err{color:var(--bad);font-size:13px;min-height:0}
.err:empty{display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100vw - 32px)}

/* Platform nav */
.pnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pnav-in{display:flex;align-items:center;gap:12px;padding-block:10px}
.plogo{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:800;font-size:20px;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.pmark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:16px}
.pright{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.navbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.navbtn .i{width:15px;height:15px}
.pfoot{border-top:1px solid var(--line);padding-block:22px 40px;color:var(--muted);font-size:13px}

/* Home */
.phero{padding-block:24px 28px;display:flex;flex-direction:column;gap:10px}
.phero h1{font-size:clamp(40px,8vw,84px);letter-spacing:-.03em}
.phero p{margin:0;color:var(--muted);font-size:18px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 12px;max-width:520px;margin-top:8px}
.search input{border:0;outline:none;background:none;padding:9px 0;width:100%}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.vcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .2s, border-color .2s;overflow:hidden}
.vcard::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--va)}
.vcard:hover{transform:translateY(-3px);border-color:var(--va)}
.vcard b{font-family:var(--font-d);font-size:20px}
.vic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--surface2);color:var(--va, var(--accent));flex:none}
.vtype{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vaddr{font-size:13px;color:var(--muted);display:flex;gap:4px;align-items:center}
.vaddr .i{width:14px;height:14px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--bad)}
.live i{width:8px;height:8px;border-radius:99px;background:currentColor}
.live.on{color:var(--ok)}

/* Admin */
.ahead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
#newForm{margin-bottom:18px}
.types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tcard input{position:absolute;opacity:0}
.tcard span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:all .15s}
.tcard span .i{width:26px;height:26px;color:var(--muted)}
.tcard input:checked+span{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--surface))}
.tcard input:checked+span .i{color:var(--accent)}
.tcard input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.slug{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding-left:10px}
.slug input{border:0 !important;box-shadow:none !important;background:none !important;padding-left:2px !important}
.vlist{display:flex;flex-direction:column;gap:12px}
.vrow{padding:16px;display:flex;flex-direction:column;gap:12px}
.vr-head{display:flex;align-items:center;gap:12px}
.vr-head>div{display:flex;flex-direction:column;min-width:0}
.vr-head b{font-size:17px}
.vr-head a{display:inline-flex;gap:4px;align-items:center;text-decoration:none}
.vr-head .pill{margin-left:auto}
.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.off{background:var(--bad-soft);color:var(--bad)}
.vr-toggles{display:flex;gap:18px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch span{width:38px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:99px;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(16px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.vr-members{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{font-size:12.5px;padding:3px 9px;border-radius:99px;background:var(--surface2)}
.addowner{display:flex;gap:8px;flex-wrap:wrap}
.addowner input{flex:1;min-width:200px}

/* Venue page */
.venue{--bg2:var(--bg);background:var(--bg);color:var(--ink);padding-bottom:40px}
.venue.dark{--bg:#0C0A12;--surface:#15111D;--surface2:#1E1829;--ink:#F2ECFA;--muted:#A096B2;--line:#2C2540;--accent-ink:#16060F;--taken:#2A2437;--taken-line:#4A4060;--chair:#3A3150;--zone:#110D18;--zone-line:#2C2540;--zone2:#1A1326;--shadow:0 0 0 1px rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.45);color-scheme:dark}
header.pnav.dark{--bg:#0C0A12;--surface:#15111D;--ink:#F2ECFA;--line:#2C2540;color:var(--ink)}
body:has(.venue.dark){background:#0C0A12}
body:has(.venue.dark) .pfoot{--line:#2C2540;color:#A096B2;background:#0C0A12}
.announce{background:var(--accent);color:var(--accent-ink);text-align:center;padding:10px 16px;font-weight:600;display:flex;gap:8px;justify-content:center;align-items:center}
.vhero{padding-block:40px 24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.vhero h1{font-size:clamp(40px,8vw,88px);letter-spacing:-.03em}
.vtypechip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent)}
.lead{margin:0;font-size:18px;color:var(--muted);max-width:52ch}
.facts{display:flex;flex-wrap:wrap;gap:8px}
.fact{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.fact .i{width:15px;height:15px;color:var(--accent)}
.fact.live{color:var(--bad);font-weight:700}
.fact.live i{width:8px;height:8px;border-radius:99px;background:currentColor}
.fact.live.on{color:var(--ok)}
.warn{display:flex;gap:8px;align-items:center;background:var(--warn-soft);color:var(--warn);padding:10px 14px;border-radius:10px;font-weight:600;margin:0}
.vsec{padding-block:36px;display:flex;flex-direction:column;gap:14px}
.events{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ev{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.ev img{margin:-18px -18px 6px;width:calc(100% + 36px);aspect-ratio:4/5;max-height:320px;object-fit:cover}
.ev .when{color:var(--accent);font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center}
.ev p{margin:0;color:var(--muted);font-size:14px}
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:860px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rule{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.ric{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);flex:none}
.rule small{display:block;color:var(--muted);font-size:12px}
.book{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.book{grid-template-columns:minmax(0,1fr)}}
.bpanel{padding:16px;display:flex;flex-direction:column;gap:16px;min-width:0}
.step{display:flex;flex-direction:column;gap:8px;min-width:0}
.step-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.step-h .n{width:20px;height:20px;border-radius:99px;display:grid;place-items:center;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);font-size:11px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.dchip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 10px;min-width:58px;display:flex;flex-direction:column;align-items:center}
.dchip small{font-size:11px;color:var(--muted);text-transform:uppercase}
.dchip b{font-size:18px}
.dchip[aria-pressed="true"],.tchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dchip[aria-pressed="true"] small,.tchip[aria-pressed="true"] small{color:inherit;opacity:.85}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.tchip{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 4px;display:flex;flex-direction:column;align-items:center}
.tchip small{font-size:11px;color:var(--muted)}
.tchip:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:40px;height:40px;border-radius:99px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.stepper button:disabled{opacity:.35}
.stepper output{min-width:90px;text-align:center;font-weight:700;font-size:17px}
.summary{background:var(--surface2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.summary b{display:flex;gap:6px;align-items:center}
.note{align-self:flex-start;font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-soft);padding:2px 8px;border-radius:99px}
.plancard{padding:12px;min-width:0;display:flex;flex-direction:column;gap:8px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;gap:5px;align-items:center}
.sw{width:12px;height:12px;border-radius:4px;border:2px solid var(--accent);background:var(--surface);display:inline-block}
.sw.sel{background:var(--accent);opacity:.7}
.sw.tk{background:repeating-linear-gradient(45deg,var(--taken) 0 3px,var(--surface) 3px 6px);border-color:var(--taken-line)}
.plan{overflow-x:auto}
.svg-plan{display:block;width:100%;min-width:540px;height:auto;user-select:none}
.zone rect{fill:var(--zone);stroke:var(--zone-line);stroke-width:1.5}
.z-terrace rect,.z-sea rect{fill:var(--zone2)} .z-terrace rect{stroke-dasharray:6 6}
.zone-label{fill:var(--muted);font:700 12px var(--font-b);letter-spacing:.12em;text-transform:uppercase}
.counter rect{fill:var(--surface2);stroke:var(--zone-line);stroke-width:1.5}
.counter text,.dance text{fill:var(--muted);font:600 12px var(--font-b)}
.pillar rect{fill:var(--zone-line)}
.door path{stroke:var(--accent);stroke-width:3;fill:none} .door text{fill:var(--accent);font:700 11px var(--font-b);letter-spacing:.1em}
.plant circle{fill:color-mix(in srgb, var(--ok) 45%, var(--zone))} .plant circle+circle{fill:color-mix(in srgb, var(--ok) 70%, var(--zone))}
.dance .floor{fill:var(--surface2);stroke:var(--line)}
.dance .light{fill:var(--accent);opacity:.35;animation:lights 6s ease-in-out infinite} .dance .l2{animation-delay:-3s;opacity:.25}
@keyframes lights{50%{transform:translate(30px,15px)}}
.waves path{fill:none;stroke:var(--accent);stroke-width:2;opacity:.3;animation:wave 8s linear infinite}
@keyframes wave{to{transform:translateX(-80px)}}
.tbl{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.tbl .top{fill:var(--surface);stroke:var(--accent);stroke-width:2.2}
.tbl .chair,.tbl .bench{fill:var(--chair)} .tbl .bench{opacity:.7}
.tbl .bed{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.6}
.tbl .tl{fill:var(--ink);font:700 14px var(--font-b);text-anchor:middle;pointer-events:none}
.tbl .ts{fill:var(--muted);font:500 10px var(--font-b);text-anchor:middle;pointer-events:none}
.tbl .tn{fill:var(--ink);font:600 11px var(--font-b);text-anchor:middle;pointer-events:none}
.st-free:hover,.st-free:focus-visible{transform:scale(1.07)}
.st-free:hover .top,.st-free:focus-visible .top{fill:color-mix(in srgb, var(--accent) 15%, var(--surface))}
.st-selected .top{fill:var(--accent);stroke:var(--accent)} .st-selected .tl,.st-selected .ts{fill:var(--accent-ink)}
.ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 6;animation:march 1s linear infinite}
@keyframes march{to{stroke-dashoffset:-22}}
.st-taken{cursor:not-allowed} .st-taken .top{fill:url(#hatch);stroke:var(--taken-line)} .st-taken .tl{fill:var(--muted)}
.st-small{cursor:not-allowed} .st-small .top{stroke-dasharray:4 4;opacity:.5} .st-small .tl{opacity:.5}
.hatch-bg{fill:var(--surface2)} .hatch-line{stroke:var(--taken);stroke-width:4}
.glow{fill:color-mix(in srgb, var(--accent) 25%, transparent);stroke:var(--accent);stroke-width:2;animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{opacity:.35}}
.pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pkg{text-align:left;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pkg[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
.pkg .pic{color:var(--accent)} .pkg .price{font-weight:800;font-size:18px;color:var(--accent);margin-top:4px}
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px 36px}
.menu h3{margin-bottom:6px}
.mi{padding:10px 0;border-bottom:1px dashed var(--line)}
.mi-top{display:flex;align-items:baseline;gap:8px}
.mi .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.mi .pr{font-weight:700;color:var(--accent);white-space:nowrap}
.mi p{margin:2px 0 0;color:var(--muted);font-size:14px}
.loc{padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.loc p{margin:0;display:flex;gap:8px;align-items:center}
.loc .i{color:var(--accent)}

/* Sheet */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.sheet{align-items:center}}
.sheet-back{position:absolute;inset:0;background:rgba(10,12,16,.5);backdrop-filter:blur(3px)}
.sheet-box{position:relative;width:min(540px,100%);max-height:92vh;overflow:auto;padding:24px;border-radius:var(--r) var(--r) 0 0;color:var(--ink)}
@media (min-width:700px){.sheet-box{border-radius:var(--r)}}
.venue.dark~.sheet .sheet-box{--surface:#15111D;--ink:#F2ECFA;--line:#2C2540;--bg:#0C0A12;--muted:#A096B2}
.sheet-box .form{padding:0;margin-top:12px}
.x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:99px;border:0;background:var(--surface2);display:grid;place-items:center}
.done{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.okc{width:64px;height:64px;border-radius:99px;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok)}
.okc .i{width:32px;height:32px}
.code{font:700 22px ui-monospace, Menlo, Consolas, monospace;letter-spacing:.08em;padding:8px 16px;border-radius:10px;background:var(--surface2)}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}