:root{
  --green:#4caf50; --green-dark:#2e7d32; --blue:#2196f3; --red:#f44336; --amber:#ffc107;
  --text:#1f2733; --muted:#7c8a98; --border:#e3e8ee; --soft:#f6f8fb;
  --avail:#4caf50; --booked:#2196f3; --sold:#f44336; --reserved:#ffc107;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--soft);display:flex;flex-direction:column;overflow:hidden}
header{background:#fff;border-bottom:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;z-index:5}
header .brand{font-weight:700;font-size:18px;color:var(--green-dark)}
header .brand span{color:var(--muted);font-weight:400;font-size:13px;margin-left:8px}
.counts{display:flex;gap:14px;margin-left:auto;font-size:13px;align-items:center;flex-wrap:wrap}
.counts b{font-size:15px}
.chip{display:inline-flex;align-items:center;gap:6px}
.dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.tbtn{font:inherit;padding:6px 11px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}
.tbtn.active{background:var(--green);color:#fff;border-color:var(--green)}
main{flex:1;display:flex;min-height:0}
#stage{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%, #fff, #e7edf4);touch-action:none}
svg{width:100%;height:100%;display:block}
svg.panning{cursor:grabbing}
.plot{fill:transparent;pointer-events:all;stroke:none;cursor:pointer;transition:fill-opacity .12s, transform .18s ease;transform-box:fill-box;transform-origin:center}
.plot:hover{stroke:#0b3d16;stroke-width:2;vector-effect:non-scaling-stroke}
.plot.popped{stroke:#000;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:pop .34s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1)}}
.zoomctl{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:6}
.zoomctl button{width:44px;height:44px;border:1px solid var(--border);background:#fff;border-radius:10px;font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.hint{position:absolute;left:16px;bottom:14px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.8);padding:4px 10px;border-radius:8px;z-index:6}
/* bottom sheet */
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:9;background:#fff;border-top:1px solid var(--border);
  box-shadow:0 -6px 24px rgba(0,0,0,.16);border-radius:16px 16px 0 0;padding:8px 16px 18px;
  transform:translateY(135%);transition:transform .28s cubic-bezier(.2,.85,.3,1)}
#sheet.show{transform:translateY(0)}
.sheet-grip{width:42px;height:4px;border-radius:3px;background:var(--border);margin:2px auto 8px}
.sheet-row{display:flex;align-items:center;justify-content:space-between}
.sheet-row b{font-size:17px}
#sheetClose{border:none;background:var(--soft);width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.statusmsg{margin-top:12px;padding:14px;border-radius:12px;text-align:center;font-size:18px;font-weight:700}
.sheet-sub{font-size:12px;color:var(--muted);margin:12px 0 6px;font-weight:600}
.sheet-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sheet-btns button{padding:12px 6px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:2px solid var(--border);background:#fff;color:var(--text)}
@media(min-width:760px){ #sheet{left:auto;right:16px;bottom:16px;width:340px;border-radius:16px;border:1px solid var(--border)} .sheet-grip{display:none} }
@media(max-width:759px){
  header{padding:8px 12px;gap:8px} header .brand{font-size:16px} header .brand span{display:none}
  .counts{gap:8px;font-size:11px;margin-left:0;flex-basis:100%;order:3}
}
/* upload / admin */
.pad{padding:24px;max-width:760px;margin:0 auto}
.drop{background:#fff;border:2px dashed var(--border);border-radius:18px;padding:40px 24px;text-align:center;cursor:pointer}
.drop.hover{border-color:var(--green);background:#f2fbf3}
.field{display:block;margin:10px 0;font-size:13px;color:var(--muted)}
.field input{width:100%;font:inherit;font-size:14px;color:var(--text);padding:9px 11px;border:1px solid var(--border);border-radius:8px;margin-top:4px}
.btn{background:var(--green);color:#fff;border:none;padding:11px 20px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.ring{width:46px;height:46px;border:5px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite;margin:10px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
footer{background:#fff;border-top:1px solid var(--border);text-align:center;font-size:11px;color:var(--muted);padding:6px;letter-spacing:.14em}
footer b{color:var(--green-dark)}