:root{
  --bg:#f4f6fb; --card:#fff; --line:#e6e9f0; --ink:#222; --sub:#8a90a0;
  --free:#d6f0e0; --free-bd:#7fce9f;
  --busy:#ffe6c7; --busy-bd:#f5b461;
  --over:#ffd2d2; --over-bd:#e86a6a;
  --all:#d8e4ff; --all-bd:#7aa0ee;
  --pri:#3b6fe0; --pri-d:#2b57bc; --ok:#27ae60; --warn:#e67e22; --danger:#e74c3c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);
       padding:10px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header h1{font-size:17px;margin:0;font-weight:700}
.badge{font-size:12px;padding:3px 9px;border-radius:999px;font-weight:600}
.badge.wd{background:#eef2ff;color:#3b6fe0}.badge.we{background:#fff0e6;color:#e67e22}
.stats{display:flex;gap:16px;margin-left:auto;align-items:center;flex-wrap:wrap}
.stat{text-align:center;line-height:1.15}.stat b{font-size:18px;display:block}.stat span{font-size:11px;color:var(--sub)}
.stat.rev b{color:var(--ok)}.stat.alert b{color:var(--danger)}
.top-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.datepick,.shopsel{padding:7px 8px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-family:inherit;color:#333;background:#fff}
.shopsel{font-weight:700}
.who{font-size:12px;color:var(--sub)}
button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;font-size:14px;padding:9px 14px;background:#eef1f7;color:#333;font-weight:600;transition:.12s}
button:active{transform:scale(.96)}
button.primary{background:var(--pri);color:#fff}button.primary:active{background:var(--pri-d)}
button.ghost{background:#fff;border:1px solid var(--line)}
button.danger{background:#fdeaea;color:var(--danger)}button.warn{background:#fdf0e3;color:var(--warn)}button.ok{background:#e9f8ef;color:var(--ok)}
button.on{background:var(--pri);color:#fff}
button:disabled{opacity:.4;cursor:not-allowed}

.over-banner{background:var(--danger);color:#fff;text-align:center;padding:6px;font-size:13px;font-weight:700;display:none}
.over-banner.on{display:block}
.move-bar{display:none;align-items:center;justify-content:center;gap:10px;background:#7a3fb3;color:#fff;
       padding:8px;font-size:13px;font-weight:700;position:sticky;top:0;z-index:40}
.move-bar b{font-weight:800}
.move-bar button{background:rgba(255,255,255,.22);color:#fff;border:0;border-radius:8px;padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer}
body.moving .move-bar{display:flex}
body.moving .seat{opacity:.4;pointer-events:none}
body.moving .seat:not(.busy):not(.allday):not(.over){opacity:1;pointer-events:auto;cursor:pointer;
       border-color:var(--pri);animation:movepulse 1.1s infinite}
@keyframes movepulse{0%,100%{box-shadow:0 0 0 0 rgba(59,111,224,.5)}50%{box-shadow:0 0 0 7px rgba(59,111,224,0)}}
.conn{position:fixed;left:14px;bottom:14px;z-index:70;font-size:12px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(20,30,60,.12);display:none}
.conn.bad{display:block;color:var(--danger);border-color:#f3c0c0;background:#fdeaea}
.toasts{position:fixed;top:64px;right:14px;z-index:80;display:flex;flex-direction:column;gap:10px;width:280px;max-width:80vw}
.toast{position:relative;background:#fff;border-left:5px solid var(--danger);border-radius:12px;
       box-shadow:0 10px 30px rgba(20,30,60,.22);padding:13px 30px 13px 14px;cursor:pointer;animation:slidein .25s ease}
.toast .tt{font-weight:800;color:var(--danger);font-size:14px;margin-bottom:3px}
.toast .ts{font-size:12px;color:#555;line-height:1.4}
.toast .tcz{position:absolute;top:6px;right:6px;background:none;padding:2px 7px;font-size:16px;color:#aaa}
.toast .tsz{top:7px;right:8px;font-size:11px;font-weight:700;color:#8a6d3b;background:#fff5e0;border:1px solid #f0dcae;border-radius:7px;padding:2px 7px}
@keyframes slidein{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
.edit-bar{display:none;gap:8px;align-items:center;background:#fff7e8;border-bottom:1px solid #f0e2c5;padding:8px 14px;flex-wrap:wrap}
body.edit .edit-bar{display:flex}
.edit-bar .tip{font-size:12px;color:#a07d2e;margin-left:auto}
.edit-bar .selsep{width:1px;align-self:stretch;background:#f0e2c5}
.edit-bar .selinfo{font-size:12px;font-weight:700;color:#a07d2e;min-width:42px}
.zoombox{display:inline-flex;align-items:center;gap:4px}
.zoombox button{padding:6px 11px;font-size:16px;line-height:1}
.zoombox #zoomLbl{min-width:46px;text-align:center;font-size:12px;font-weight:700;color:#7a5e1e;cursor:pointer;user-select:none}

main{padding:14px}
.board-wrap{overflow:auto;background:#fbfcfe;border:1px solid var(--line);border-radius:14px;max-width:100%}
body.edit .board-wrap{height:72vh;min-height:360px}
body.edit.snap .board-wrap{background-image:
   linear-gradient(#e7ebf3 1px,transparent 1px),linear-gradient(90deg,#e7ebf3 1px,transparent 1px);
   background-attachment:local,local}
.board{position:relative;transform-origin:top left}
.editfab{position:absolute;z-index:55;display:flex;align-items:center;gap:3px;padding:5px 10px;font-size:12px;font-weight:700;border-radius:8px;background:var(--pri);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;white-space:nowrap}
.marquee{position:absolute;z-index:58;pointer-events:none;border:1.5px solid var(--pri);background:rgba(59,111,224,.12);border-radius:2px}
.guide{position:absolute;z-index:60;pointer-events:none;background:#ff3b8d;box-shadow:0 0 0 .5px rgba(255,59,141,.35)}
.guide-v{top:0;height:100%;width:1px}
.guide-h{left:0;width:100%;height:1px}
.el{position:absolute;user-select:none}
.room{border:2px solid #d8dde8;border-radius:12px;background:rgba(250,251,254,.6);z-index:1}
.room .rlbl{position:absolute;top:8px;left:12px;font-size:20px;color:#b9c0d0;font-weight:800}
.room.boxroom{border-color:#c9b3e8;background:rgba(245,240,253,.5)}
.room.boxroom .rlbl{color:#9a7fc4}
.furn{z-index:2;border:1.5px dashed #c4cad8;border-radius:10px;background:#eef1f7;display:flex;align-items:center;justify-content:center;color:#9aa1b2;font-weight:700;font-size:17px}
.seat{z-index:5;border:2px solid var(--free-bd);background:var(--free);border-radius:12px;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
      cursor:pointer;overflow:hidden;text-align:center;padding:2px}
.seat .snm{font-size:12px;font-weight:700;line-height:1.05;color:#37503f}
.seat .stm{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05}
.seat .sx{font-size:10px;font-weight:700;line-height:1.05}
.seat .snote{position:absolute;top:1px;right:3px;font-size:11px;line-height:1;pointer-events:none;z-index:6}
.seat .snote-tip{display:none;position:absolute;top:16px;right:0;min-width:90px;max-width:200px;white-space:normal;text-align:left;
      background:rgba(30,30,40,.95);color:#fff;font-size:11px;font-weight:600;line-height:1.4;padding:6px 8px;border-radius:8px;
      box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:70;pointer-events:none}
body:not(.edit) .seat:hover{overflow:visible;z-index:40}
body:not(.edit) .seat:hover .snote-tip{display:block}
.seat.busy{border-color:var(--busy-bd);background:var(--busy)}.seat.busy .snm{color:#7a4a14}
.seat.allday{border-color:var(--all-bd);background:var(--all)}.seat.allday .snm{color:#274a8c}
.seat.over{border-color:var(--over-bd);background:var(--over);animation:pulse 1.1s infinite}.seat.over .snm{color:#9a2020}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,106,106,.55)}50%{box-shadow:0 0 0 6px rgba(232,106,106,0)}}
body.edit .seat,body.edit .furn,body.edit .room{cursor:move;outline:1px dashed rgba(59,111,224,.35)}
.el.sel{outline:3px solid var(--pri)!important;z-index:50}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(20,28,48,.45);display:none;z-index:60;align-items:center;justify-content:center;padding:16px}
.overlay.on{display:flex}
.modal{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-h{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-h h3{margin:0;font-size:17px}
.modal-b{padding:18px}.modal-f{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
.modal-f button{flex:1;min-width:90px;padding:12px}
.x{background:none;padding:4px 8px;font-size:20px;color:#999}
.seg{display:flex;gap:8px;margin:6px 0 16px}
.seg button{flex:1;background:#f1f3f8;border:2px solid transparent;font-weight:700}
.seg button.sel{background:#eef3ff;border-color:var(--pri);color:var(--pri)}
.seg.we button.sel{background:#fff3e8;border-color:var(--warn);color:var(--warn)}
label.fld{font-size:12px;color:var(--sub);font-weight:700;display:block;margin:8px 0 4px}
.note-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.note-tags .notetag{background:#f1f3f8;border:1px solid #e1e5ee;color:#566;border-radius:14px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer}
.note-tags .notetag.on{background:#eef3ff;border-color:var(--pri);color:var(--pri)}
.price-box{background:#f7f9fc;border-radius:12px;padding:14px;text-align:center;margin-top:6px}
.price-box .big{font-size:30px;font-weight:800;color:var(--pri)}.price-box .sm{font-size:12px;color:var(--sub)}
.info-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
.info-row span:first-child{color:var(--sub)}.info-row b{font-variant-numeric:tabular-nums}
.bill{margin-top:10px}.bill .it{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:#444}
.bill .tot{display:flex;justify-content:space-between;font-weight:800;font-size:16px;padding-top:8px;margin-top:4px;border-top:2px solid var(--line)}
input[type=text],input[type=number],input[type=time],input[type=password]{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:12px;color:var(--sub);line-height:1.5;margin-top:8px}
.empty{color:var(--sub);text-align:center;padding:40px}

/* 全店汇总卡片 */
.ov-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:6px}
.ov-card{background:#f7f9fc;border-radius:12px;padding:12px;text-align:center}
.ov-card b{display:block;font-size:22px;color:var(--ok)}.ov-card span{font-size:12px;color:var(--sub)}

/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(20,30,60,.15);padding:30px 26px;width:100%;max-width:360px}
.login-card h1{margin:0 0 4px;font-size:22px;text-align:center}
.login-card .sub{text-align:center;color:var(--sub);font-size:13px;margin-bottom:22px}
.login-card label.fld{margin-top:14px}
.login-card .err{color:var(--danger);font-size:13px;min-height:18px;margin-top:10px;text-align:center}
.login-card button.primary{width:100%;padding:13px;margin-top:18px;font-size:16px}