:root{
  --paper:#f2f3f7; --panel:#ffffff; --ink:#1f2333; --muted:#6b7086; --line:#dfe2ea;
  --accent:#6d3d8c; --accent-soft:#efe6f6; --accent-ink:#4b2563;
  --ok:#2f9e63; --ok-soft:#e1f5ea; --warn:#d99a1e; --warn-soft:#fbf0d5; --empty:#b4b8c6; --empty-soft:#eceef3;
  --zone:#8a8fa3; --zone-soft:#e6e8ef; --sel:#3b6ee8; --sel-soft:#e4ecfd; --danger:#c73e4b;
  --shadow:0 1px 2px rgba(31,35,51,.06),0 8px 24px rgba(31,35,51,.08);
  --tap:44px; --radius:12px;
}
@media (prefers-color-scheme:dark){ :root{
  --paper:#141827; --panel:#1d2233; --ink:#eceef5; --muted:#9aa0b8; --line:#2e3449;
  --accent:#b58bd6; --accent-soft:#33264a; --accent-ink:#e6d3f5;
  --ok:#5fcb8a; --ok-soft:#1c3a2b; --warn:#f0b94a; --warn-soft:#3d3118; --empty:#5d6580; --empty-soft:#262c3f;
  --zone:#7c839c; --zone-soft:#232839; --sel:#7fa3ff; --sel-soft:#233052; --danger:#ef7a85;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.4);
}}
*{box-sizing:border-box} html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
.btn{min-height:var(--tap);padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;text-decoration:none}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.big{min-height:56px;font-size:18px;padding:0 24px}
.icon{width:var(--tap);height:var(--tap);padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;font-size:20px;display:inline-grid;place-items:center;color:inherit;text-decoration:none}
.icon:hover{background:var(--empty-soft)}
input[type=text],input[type=number],input[type=search],select,textarea{min-height:var(--tap);padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);width:100%}
textarea{min-height:120px;resize:vertical}
label.f{display:block;font-size:13px;color:var(--muted);margin:8px 0 4px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1 1 auto;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;white-space:nowrap}
.badge.zero{background:var(--ok-soft);color:var(--ok)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--empty-soft);color:var(--muted);font-size:13px}
.status{font-size:13px;color:var(--muted);white-space:nowrap}.status.offline{color:var(--danger);font-weight:700}
.muted{color:var(--muted)} .sr{position:absolute;left:-9999px}
h1{font-size:22px;margin:0 0 8px} h2{font-size:16px;margin:16px 0 8px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;max-width:min(90vw,480px);z-index:50;box-shadow:var(--shadow)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:60;padding:16px}
.overlay .card{max-width:420px;text-align:center}.overlay .card p{font-size:17px}
/* landing */
.landing{max-width:560px;margin:0 auto;padding:32px 16px}
.landing .lead{font-size:17px;color:var(--muted);margin:0 0 24px}
.plans{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.plans a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:inherit;text-decoration:none}
.plans a small{color:var(--muted)}
/* app layout */
.top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.plan-name{border:1px solid transparent;background:transparent;font-weight:700;font-size:17px;min-width:0}
.plan-name:hover,.plan-name:focus{border-color:var(--line);background:var(--paper)}
.layout{display:grid;grid-template-columns:360px 1fr;height:calc(100vh - 61px);height:calc(100dvh - 61px)}
.drawer{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.drawer-handle{display:none}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;min-height:var(--tap);border:0;background:transparent;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.pane{display:none;padding:12px;overflow:auto;flex:1;min-height:0}.pane.on{display:block}
.stage{position:relative;overflow:hidden;background:var(--paper)}
.stage-scroll{position:absolute;inset:0;overflow:auto;touch-action:pan-x pan-y}
.zoom{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;z-index:5}
.zoom .btn{min-width:var(--tap);padding:0 10px}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* stage svg */
#svg{display:block;margin:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);user-select:none;-webkit-user-select:none}
#svg .room{fill:var(--panel)}
#svg .grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.35}
#svg .grid line.major{opacity:.8}
#svg .table{cursor:grab;touch-action:none}
#svg .table circle,#svg .table rect{fill:var(--panel);stroke-width:4;vector-effect:non-scaling-stroke}
#svg .table.empty circle,#svg .table.empty rect{stroke:var(--empty);fill:var(--empty-soft)}
#svg .table.part circle,#svg .table.part rect{stroke:var(--warn);fill:var(--warn-soft)}
#svg .table.full circle,#svg .table.full rect{stroke:var(--ok);fill:var(--ok-soft)}
#svg .table.sel circle,#svg .table.sel rect{stroke:var(--sel);stroke-width:6;filter:drop-shadow(0 0 6px var(--sel))}
#svg .table.target circle,#svg .table.target rect{stroke:var(--sel);stroke-dasharray:8 6;animation:pulse 1.2s infinite}
#svg .table.blocked{opacity:.4}
#svg .table.drop-hover circle,#svg .table.drop-hover rect{fill:var(--sel-soft);stroke-width:8}
#svg text{fill:var(--ink);pointer-events:none;font-family:inherit}
#svg .table .cnt{fill:var(--muted)} #svg .table .nm{fill:var(--ink)}
#svg .zone{cursor:grab;touch-action:none}
#svg .zone rect{fill:var(--zone-soft);stroke:var(--zone);stroke-width:2;stroke-dasharray:10 6;vector-effect:non-scaling-stroke}
#svg .zone.sel rect{stroke:var(--sel);stroke-width:4}
#svg .zone text{fill:var(--zone)}
#svg .zone-handle{fill:var(--zone);opacity:.6;cursor:nwse-resize;stroke:none!important;stroke-dasharray:none!important}
#svg .dragging{opacity:.85;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
@keyframes pulse{50%{stroke-opacity:.4}}
.ghost{position:fixed;z-index:70;pointer-events:none;background:var(--sel);color:#fff;padding:8px 14px;border-radius:999px;font-weight:700;box-shadow:var(--shadow)}
.guest.lifted{opacity:.5}
/* guests */
.counters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.hint{background:var(--sel-soft);color:var(--sel);padding:10px 12px;border-radius:var(--radius);margin:10px 0;font-weight:600}
.glist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.guest{display:flex;align-items:center;gap:4px;min-height:var(--tap);padding:0 4px 0 12px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;touch-action:pan-y}
.guest:hover{background:var(--empty-soft)}
.guest.seated .tb{color:var(--ok);font-weight:600}.guest .tb{font-size:13px;color:var(--muted);white-space:nowrap}
.guest.sel{background:var(--sel-soft);border-color:var(--sel)}
.guest .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guest .icon{font-size:16px;width:var(--tap);height:var(--tap)}
/* tables */
.tlist{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.trow{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);cursor:pointer;text-align:left;width:100%}
.trow .dot{width:12px;height:12px;border-radius:50%;background:var(--empty);flex:none}
.trow.part .dot{background:var(--warn)}.trow.full .dot{background:var(--ok)}.trow.zone .dot{border-radius:2px;background:var(--zone)}
.seg .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
/* onboarding steps + mobile drawer */
.steps{position:absolute;inset:0;display:grid;place-items:center;z-index:6;pointer-events:none;padding:16px}
.steps-card{pointer-events:auto;display:grid;gap:10px;width:min(100%,420px)}
.step{justify-content:flex-start;gap:14px;text-align:left}.step .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--paper);font-weight:800;flex:none}
.step.done{opacity:.6}.step.done .num{background:var(--ok)}
@media (max-width:899px){
  .layout{display:block;position:relative}
  .stage{position:absolute;inset:0}
  .drawer{position:absolute;left:0;right:0;bottom:0;z-index:10;border-right:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.15);transition:height .25s ease}
  .drawer[data-state=peek]{height:64px}.drawer[data-state=half]{height:50%}.drawer[data-state=full]{height:calc(100% - 8px)}
  .drawer-handle{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;cursor:pointer;touch-action:none;font-size:13px;flex:none}
  .grip{width:40px;height:5px;border-radius:3px;background:var(--line);flex:none}
  .drawer[data-state=peek] .tabs,.drawer[data-state=peek] .pane{display:none}
  .top{padding:6px 8px}.top .btn{padding:0 10px}.status{display:none}.badge{min-height:32px;padding:0 10px;font-size:13px}
  .zoom{bottom:auto;top:12px}
  .steps{align-items:start;padding-top:60px}
}
/* mobile header: icon-only undo/share, no horizontal overflow */
body{overflow-x:hidden}
.top{flex-wrap:nowrap;overflow:hidden}
.plan-name{flex:1 1 0;width:0}
@media (max-width:899px){
  #undo,#share{width:var(--tap);min-width:var(--tap);padding:0;font-size:0;flex:none}
  #undo::before{content:'↶';font-size:22px} #share::before{content:'⇪';font-size:20px}
  .badge{flex:none}
}