:root{
  --cream:#F6EFE2; --paper:#fffdf8; --ink:#2a241d; --muted:#8a7f6d;
  --cognac:#B5916A; --gold:#C6A368; --line:#e7dfce; --line2:#efe8d8;
  --shadow:0 1px 3px rgba(40,30,20,.10);
}
*{ box-sizing:border-box; } html,body{ margin:0; }
[hidden]{ display:none !important; }
body{ font-family:"Be Vietnam Pro",system-ui,sans-serif; color:var(--ink); background:var(--cream); -webkit-text-size-adjust:100%; }

/* ---- header ---- */
.top{ display:flex; align-items:center; gap:11px; padding:11px 16px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.top .mono{ opacity:.92; }
.ttl{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.top h1{ font-family:"EB Garamond",serif; font-size:21px; margin:0; font-weight:600; }
.updated{ font-size:10.5px; color:var(--muted); }
.add-btn{ margin-left:auto; border:0; background:var(--ink); color:var(--cream); border-radius:22px; padding:11px 18px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; box-shadow:var(--shadow); white-space:nowrap; }
.add-btn:active{ transform:scale(.97); }

/* ---- mode tabs ---- */
.modes{ display:flex; gap:6px; padding:10px 16px 4px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:59px; z-index:9; }
.modes button{ flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:22px; padding:10px 18px; font:inherit; font-size:14px; color:var(--muted); cursor:pointer; }
.modes button.on{ background:var(--ink); color:var(--cream); border-color:var(--ink); font-weight:600; }

/* ---- control bars ---- */
.ctrlbar{ display:flex; align-items:center; gap:8px; padding:10px 16px; flex-wrap:wrap; }
.ctrlbar .nav{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer; color:var(--ink); }
.ctrlbar input[type=date]{ font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.rangepick{ display:inline-flex; gap:4px; margin-left:auto; background:#fff; border:1px solid var(--line); border-radius:11px; padding:3px; }
.rangepick button{ border:0; background:none; border-radius:8px; padding:9px 14px; font:inherit; font-size:13.5px; color:var(--muted); cursor:pointer; }
.rangepick button.on{ background:var(--cream); color:var(--ink); font-weight:600; }

.loading{ text-align:center; color:var(--muted); padding:48px 16px; }

/* ---- legend ---- */
.legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:2px 16px 10px; font-size:11.5px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{ width:16px; height:11px; border-radius:3px; display:inline-block; }
.legend i.dot{ width:11px; height:11px; border-radius:50%; }
.legend i.hatch{ background:var(--cognac); background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px); }

/* ---- tape chart ---- */
.tape{ overflow-x:auto; padding:2px 16px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.grid{ display:grid; width:100%; align-items:stretch; }
.gh{ position:sticky; top:0; z-index:3; background:var(--cream); text-align:center; padding:5px 0 6px; border-bottom:1px solid var(--line); }
.gh .wd{ display:block; font-size:10px; color:var(--muted); }
.gh .dd{ display:block; font-size:12px; font-weight:500; }
.gh.today{ background:rgba(198,163,104,.22); }
.gh.today .wd, .gh.today .dd{ color:#9c7b34; font-weight:700; }
.gh.we .wd, .gh.we .dd{ color:#bf5b4b; }
.corner{ position:sticky; left:0; top:0; z-index:6; background:var(--cream); border-bottom:1px solid var(--line); }
.floorlab{ position:sticky; left:0; z-index:4; grid-column:1 / -1; background:var(--cream); color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px 3px; }
.rlabel{ position:sticky; left:0; z-index:5; background:var(--paper); padding:6px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line2); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.rlabel b{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rlabel small{ color:var(--muted); font-weight:400; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell{ border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); min-height:46px; }
.cell.today{ background:rgba(198,163,104,.10); }
.cell.we{ background:rgba(191,91,75,.022); }
.bar{ border-radius:9px; color:#fff; font-size:12px; line-height:1.25; padding:5px 9px; margin:5px 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.20); align-self:center; font-weight:500; z-index:1; }
.bar.unpaid{ background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 5px, transparent 5px 11px); }
.bar.cancelled{ opacity:.4; text-decoration:line-through; }

/* ---- panes (day / table) ---- */
.pane{ max-width:760px; margin:0 auto; padding:6px 14px 24px; }
.pane.wide{ max-width:1180px; }
.floorhd{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cognac); margin:16px 4px 6px; }
.dayhd{ text-align:center; font-family:"EB Garamond",serif; font-size:20px; margin:8px 0 4px; }
.dayhd small{ display:block; font-size:12px; font-family:"Be Vietnam Pro"; color:var(--muted); text-transform:capitalize; }
.droom{ display:flex; gap:11px; align-items:center; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; box-shadow:var(--shadow); }
.droom .chip{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.droom .rm{ font-weight:600; min-width:58px; } .droom .rm small{ display:block; color:var(--muted); font-weight:400; font-size:10.5px; }
.droom .who{ flex:1; font-size:14px; } .droom .who small{ color:var(--muted); }
.droom.free{ background:transparent; box-shadow:none; border-style:dashed; }
.droom.free .who{ color:#b3a892; }

/* ---- table (desktop) ---- */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.tbl th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:11px 12px; border-bottom:2px solid var(--line); background:var(--cream); }
.tbl td{ padding:12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.tbl tr{ cursor:pointer; } .tbl tbody tr:hover{ background:var(--cream); }
.tbl .past td{ opacity:.5; }
.tbl .gname{ font-weight:600; }
.empty{ text-align:center; color:var(--muted); padding:36px; }
/* status pill */
.st{ font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; white-space:nowrap; }

/* ---- booking cards (mobile table) ---- */
.bcard{ display:flex; gap:11px; align-items:center; padding:13px; background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; box-shadow:var(--shadow); cursor:pointer; }
.bcard .chip{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.bcard .b1{ flex:1; min-width:0; } .bcard .b1 b{ font-size:14.5px; } .bcard .b1 small{ display:block; color:var(--muted); font-size:12px; }
.bcard .b2{ text-align:right; } .bcard .b2 small{ display:block; color:var(--muted); font-size:11.5px; margin-top:3px; }
.bcard.past{ opacity:.55; }

/* ---- modals ---- */
.modal{ position:fixed; inset:0; z-index:50; background:rgba(30,22,14,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal .card{ background:var(--paper); border-radius:18px; padding:22px; max-width:380px; width:100%; position:relative; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal .x{ position:absolute; top:6px; right:10px; border:0; background:none; font-size:28px; cursor:pointer; color:var(--muted); line-height:1; padding:4px 8px; }
.modal h3{ font-family:"EB Garamond",serif; margin:2px 0 14px; font-size:22px; padding-right:24px; }
.row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid var(--line2); font-size:14px; align-items:center; }
.row span{ color:var(--muted); } .row b{ text-align:right; }

/* ---- form ---- */
.form form{ display:flex; flex-direction:column; gap:11px; }
.form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:500; }
.form input, .form select{ font:inherit; font-size:16px; color:var(--ink); padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; width:100%; }
.form .two{ display:flex; gap:10px; } .form .two label{ flex:1; min-width:0; }
.form .submit{ margin-top:6px; border:0; background:var(--ink); color:var(--cream); border-radius:11px; padding:14px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; }
.form .submit:disabled{ opacity:.5; }
.form-msg{ margin:0; font-size:13px; min-height:1em; } .form-msg.err{ color:#bf5b4b; } .form-msg.ok{ color:#5a8a4a; }

/* ---- desktop ---- */
@media(min-width:760px){
  .top{ padding:14px 28px; } .top h1{ font-size:24px; }
  .modes{ top:69px; padding:12px 28px 6px; } .ctrlbar{ padding:12px 28px; } .legend{ padding:2px 28px 10px; }
  .tape{ padding:2px 28px 16px; } .pane{ padding:8px 28px 30px; }
  .modal .card{ max-width:440px; }
}
/* ---- mobile: stack form 2-col rows ---- */
@media(max-width:520px){
  .form .two{ flex-direction:column; gap:11px; }
}
@media(max-width:759px){ .modes{ overflow-x:auto; -webkit-overflow-scrolling:touch; } }