:root{
  --ink:#222; --muted:#8e8e93; --faint:#c7c7cc; --line:#f0f0f0;
  --red:#ff385c; --pill:#1c1c1e; --pill-past:#c7c7cc; --bg:#fff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}   /* the hidden attribute must win over any class display */
html,body{margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}

.stick{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.top{display:flex; align-items:center; justify-content:space-between; padding:12px 16px 8px}
.mlabel{font-size:24px; font-weight:800; letter-spacing:-.02em}
.sync{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:#fff; border-radius:999px; padding:7px 12px; cursor:pointer; color:var(--muted);
  font:600 12.5px/1 inherit}
.sync:active{transform:scale(.97)}
.sicon{width:15px; height:15px}
.sync.spinning .sicon{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tabs{display:flex; gap:8px; padding:2px 16px 10px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:8px 14px; font:600 13px/1 inherit; cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.tab.active{background:var(--ink); border-color:var(--ink); color:#fff}

.dow{display:grid; grid-template-columns:repeat(7,1fr); padding:2px 10px 8px}
.dow span{text-align:center; font-size:11px; font-weight:700; color:var(--faint);
  text-transform:uppercase; letter-spacing:.04em}

.calendar{padding:4px 10px 140px}
.month{padding:16px 0 2px}
.mtitle{margin:6px 4px 12px; font-size:20px; font-weight:800; letter-spacing:-.01em}

.week{position:relative}
.days{display:grid; grid-template-columns:repeat(7,1fr)}
.day{position:relative; height:62px; box-shadow:inset 0 0 0 1px #f4f4f5; border-radius:12px}
.day.empty{box-shadow:none}
.day .n{position:absolute; top:7px; left:9px; font-size:14px; font-weight:600; color:var(--ink)}
.day.past .n{color:var(--faint); font-weight:500}
.day.today .n{top:4px; left:5px; width:26px; height:26px; border-radius:50%;
  background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700}

/* booking pills float in a lane below the date numbers */
.bars{position:absolute; left:0; right:0; top:30px; height:26px; pointer-events:none}
.bar{position:absolute; top:0; height:26px; display:flex; align-items:center; gap:6px;
  padding:0 9px; overflow:hidden; color:#fff; font-size:12.5px; font-weight:600;
  white-space:nowrap; background:var(--pill)}
.bar.past{background:var(--pill-past)}
.bar.rl{border-top-left-radius:14px; border-bottom-left-radius:14px}
.bar.rr{border-top-right-radius:14px; border-bottom-right-radius:14px}
.bar .av{flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center}
.bar .av svg{width:13px; height:13px; color:#fff}
.bar .nm{overflow:hidden; text-overflow:ellipsis}

.todaybtn{position:fixed; right:16px; bottom:26px; width:50px; height:50px; border-radius:50%;
  background:#fff; border:1px solid #eee; box-shadow:0 6px 20px rgba(0,0,0,.16);
  display:none; align-items:center; justify-content:center; cursor:pointer; z-index:50}
.todaybtn svg{width:22px; height:22px; color:var(--ink); transition:transform .2s ease}
.todaybtn.down svg{transform:rotate(180deg)}
.todaybtn:active{transform:scale(.94)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* tappable pills + reservation detail sheet */
.bars .bar{pointer-events:auto; cursor:pointer}
.bars .bar:active{filter:brightness(1.18)}

.sheet-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transition:opacity .28s ease; z-index:60}
.sheet-backdrop.open{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:50%; top:50%; z-index:61; width:min(400px, calc(100% - 36px));
  background:#fff; border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,.30);
  padding:24px 22px calc(20px + env(safe-area-inset-bottom));
  max-height:82vh; overflow-y:auto; opacity:0; pointer-events:none;
  transform:translate(-50%,-48%) scale(.94);
  transition:transform .26s cubic-bezier(.32,.72,0,1), opacity .2s ease; will-change:transform,opacity}
.sheet.open{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.grabber{width:38px; height:5px; border-radius:3px; background:#e2e2e6; margin:8px auto 16px; cursor:pointer}
.s-status{display:inline-block; font-size:12px; font-weight:700; color:#1c1c1e; background:#f0f0f0;
  border-radius:999px; padding:5px 11px; margin-bottom:14px}
.s-name{margin:0 0 16px; font-size:26px; font-weight:800; letter-spacing:-.02em}
.s-name.pending{color:var(--muted); font-weight:700; font-size:20px}
.s-guests{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; margin-bottom:10px}
.s-guests svg{width:20px; height:20px; color:var(--muted); flex:0 0 auto}
.s-dates{font-size:15px; color:#444; margin-bottom:16px}
.s-note{font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px}

.actions{display:flex; align-items:center; gap:8px}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:50%; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease}
.iconbtn svg{width:16px; height:16px}
.iconbtn.on{background:#1c1c1e; border-color:#1c1c1e; color:#fff}
.iconbtn:active{transform:scale(.95)}
.s-payout{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:#1c1c1e; margin-bottom:10px}
.s-payout svg{width:20px; height:20px; color:#3aa76d; flex:0 0 auto}
.s-close{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:none; background:#f0f0f0; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center}
.s-close svg{width:15px; height:15px}
.s-close:active{transform:scale(.92)}
.s-party{font-size:13.5px; color:var(--muted); margin:-4px 0 12px 30px}
html.modal-open, body.modal-open{overflow:hidden}
.bars .bar.sel{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--red); z-index:6}

/* login page */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:#f6f6f7; padding:24px}
.login-card{width:100%; max-width:340px; background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.08); padding:26px 22px; display:flex; flex-direction:column; gap:12px}
.login-brand{display:flex; align-items:center; gap:9px; font-size:22px; font-weight:800; letter-spacing:-.02em}
.login-brand .dot{width:10px; height:10px; border-radius:50%; background:var(--red)}
.login-sub{color:var(--muted); font-size:13.5px; margin:-6px 0 6px}
.login-input{border:1px solid var(--line); border-radius:12px; padding:13px 14px; font-size:16px; outline:none; width:100%; background:#fff}
.login-input:focus{border-color:#bbb}
.login-remember{display:flex; align-items:center; gap:9px; font-size:13.5px; color:#444; user-select:none}
.login-remember input{width:17px; height:17px}
.login-btn{background:var(--ink); color:#fff; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:700; cursor:pointer}
.login-btn:active{transform:scale(.99)}
.login-btn:disabled{opacity:.6}
.login-error{color:#d33; font-size:13px; font-weight:600}

/* account menu */
.acct-menu{position:fixed; top:56px; right:14px; z-index:70; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.18); padding:6px; min-width:176px; display:flex; flex-direction:column}
.acct-item{border:none; background:none; text-align:left; padding:11px 12px; border-radius:9px; font:600 14px/1 inherit; color:var(--ink); cursor:pointer}
.acct-item:hover{background:#f4f4f5}
.acct-item.danger{color:#d33}

/* admin overlay */
.overlay{position:fixed; inset:0; z-index:65; background:#fff; display:flex; flex-direction:column; max-width:520px; margin:0 auto; box-shadow:0 0 60px rgba(0,0,0,.15)}
.overlay-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line)}
.overlay-title{font-size:20px; font-weight:800}
.overlay-tabs{display:flex; gap:8px; padding:12px 16px 0}
.otab{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font:600 13.5px/1 inherit; cursor:pointer}
.otab.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.overlay-body{flex:1; overflow-y:auto; padding:16px}
.otab-pane{display:flex; flex-direction:column; gap:14px}
.users-list{display:flex; flex-direction:column; gap:8px}
.user-row{border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.user-row .u-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.user-row .u-name{font-weight:700}
.user-row .u-badges{display:flex; gap:6px}
.badge{font-size:11px; font-weight:700; border-radius:999px; padding:3px 8px; background:#f0f0f0; color:#555}
.badge.admin{background:#111; color:#fff}
.badge.payout{background:#e6f6ec; color:#2b7a4b}
.user-row .u-actions{display:flex; gap:8px; flex-wrap:wrap}
.mini-btn{border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 11px; font:600 12.5px/1 inherit; cursor:pointer}
.mini-btn.danger{color:#d33; border-color:#f0c9c9}
.user-new{border:1px dashed var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px}
.un-title{font-weight:700}
.chk{display:flex; align-items:center; gap:8px; font-size:14px}
.chk input{width:16px; height:16px}
.logs-bar{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.log-select{border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:600 13px/1 inherit}
.log-view{background:#0f1114; color:#d7dbe0; border-radius:12px; padding:14px; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; word-break:break-word; max-height:64vh; overflow-y:auto; margin:0}
#pwForm{display:flex; flex-direction:column; gap:12px}
.pw-hidden-user{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}