:root{
  --paper:#F4F4F1; --surface:#FFFFFF; --surface-2:#FAFAF8;
  --ink:#141A21; --ink-2:#2A323C; --muted:#6B7480; --faint:#98A0AB;
  --rule:#E4E5E1; --rule-2:#D3D5D0;
  --avail:#1B6B4C; --avail-bg:#E9F2ED; --avail-line:#C6DDD1;
  --booked:#8A5A08; --booked-bg:#FAF1E1; --booked-line:#E8D5B0;
  --sold:#8A3336; --sold-bg:#F6E9E9; --sold-line:#E2C8C9;
  --accent:#1B4B7A;
  --shadow:0 1px 2px rgba(20,26,33,.05), 0 1px 1px rgba(20,26,33,.03);
  --r:10px; --r-sm:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); min-height:100vh; padding:0 0 64px;
  font-family:'Inter',ui-sans-serif,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
input,select,textarea{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-2); border-radius:var(--r-sm);
  padding:9px 11px; width:100%; transition:border-color .12s ease, box-shadow .12s ease}
input:hover:not(:disabled){border-color:#B9BCB6}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(27,75,122,.10); outline:none}
input:disabled{background:#F1F1EE; color:var(--muted); cursor:not-allowed}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

.top{background:var(--ink); color:#EDEFF1; padding:20px 0 0}
.brand{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
.brand h1{margin:0; font-size:17px; font-weight:600; letter-spacing:-.02em; color:#fff}
.brand p{margin:0; font-size:13px; color:#8E97A2; letter-spacing:0}
.who{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; color:#8E97A2}
.who button{font-size:13px; color:#C7CDD4; padding:4px 0}
.who button:hover{color:#fff}
.tally{display:flex; gap:0; margin:18px 0 0; flex-wrap:wrap}
.tally div{display:flex; align-items:baseline; gap:7px; padding-right:22px; margin-right:22px;
  border-right:1px solid rgba(255,255,255,.10)}
.tally div:last-child{border-right:none; margin-right:0; padding-right:0}
.tally b{font-size:21px; font-weight:600; letter-spacing:-.03em; color:#fff}
.tally span{font-size:12px; color:#8E97A2}
.tabs{display:flex; gap:26px; margin-top:18px; border-bottom:1px solid rgba(255,255,255,.10)}
.tabs button{padding:11px 0 12px; font-size:14px; color:#8E97A2; position:relative}
.tabs button:hover{color:#C7CDD4}
.tabs button[aria-selected=true]{color:#fff; font-weight:500}
.tabs button[aria-selected=true]::after{content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:#fff; border-radius:2px 2px 0 0}

.bands{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0 14px}
.bands button{padding:8px 15px; border:1px solid var(--rule-2); border-radius:var(--r-sm);
  background:var(--surface); font-size:13.5px; font-weight:500; color:var(--ink-2);
  transition:background .12s ease, border-color .12s ease}
.bands button:hover{border-color:#B9BCB6}
.bands button span{font-weight:400; color:var(--muted); margin-left:5px}
.bands button[aria-pressed=true]{background:var(--ink); color:#fff; border-color:var(--ink)}
.bands button[aria-pressed=true] span{color:#9AA3AE}
.chart{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  overflow-x:auto; box-shadow:var(--shadow)}
table.stack{border-collapse:separate; border-spacing:0; width:100%; min-width:640px}
table.stack th{font-size:11px; font-weight:500; color:var(--faint); padding:12px 6px 10px;
  border-bottom:1px solid var(--rule); letter-spacing:.02em}
table.stack th.fl{text-align:right; padding-right:16px; width:92px}
table.stack td{padding:4px; border-bottom:1px solid #F0F0ED}
table.stack tr:last-child td{border-bottom:none}
table.stack td.fl{text-align:right; padding-right:16px; font-size:12.5px; color:var(--muted);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.cell{width:100%; display:block; padding:9px 6px; border-radius:var(--r-sm); text-align:center;
  border:1px solid transparent; transition:box-shadow .12s ease, transform .12s ease}
.cell:hover{box-shadow:0 2px 6px rgba(20,26,33,.10); transform:translateY(-1px)}
.cell b{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.cell span{display:block; font-size:10.5px; margin-top:2px; opacity:.7; font-weight:400}
.cell.a{background:var(--avail-bg); color:var(--avail); border-color:var(--avail-line)}
.cell.b{background:var(--booked-bg); color:var(--booked); border-color:var(--booked-line)}
.cell.s{background:var(--sold-bg); color:var(--sold); border-color:var(--sold-line)}
.cell.sel{box-shadow:0 0 0 2px var(--ink)}
.cell.none{background:#F7F7F5; color:#C6C9C3; cursor:default; border-color:#EFEFEC}
.legend{display:flex; gap:20px; flex-wrap:wrap; margin:14px 2px 0; font-size:12.5px; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px;
  vertical-align:-1px}

.grid2{display:grid; grid-template-columns:1fr 336px; gap:20px; align-items:start; margin-top:20px}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:20px 22px; box-shadow:var(--shadow)}
.card h2{margin:0 0 3px; font-size:16.5px; font-weight:600; letter-spacing:-.02em}
.card h3{margin:26px 0 2px; font-size:12px; font-weight:600; color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase; padding-bottom:9px; border-bottom:1px solid var(--rule)}
.card h3:first-of-type{margin-top:20px}
.sub{margin:0; font-size:13px; color:var(--muted)}
.pill{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px;
  font-weight:600; letter-spacing:.01em; vertical-align:2px}
.pill.a{background:var(--avail-bg); color:var(--avail)}
.pill.b{background:var(--booked-bg); color:var(--booked)}
.pill.s{background:var(--sold-bg); color:var(--sold)}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:0 26px; margin:16px 0 0}
.facts div{display:flex; justify-content:space-between; gap:12px; font-size:13.5px;
  padding:9px 0; border-bottom:1px solid #F0F0ED}
.facts span{color:var(--muted)}
.facts b{font-weight:600}
.field{margin-bottom:13px}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; font-weight:500}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.act{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.btn{padding:11px 18px; border-radius:var(--r-sm); font-size:14px; font-weight:500;
  background:var(--ink); color:#fff; transition:background .12s ease, opacity .12s ease}
.btn:hover{background:#232B35}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--rule-2)}
.btn.ghost:hover{background:var(--surface-2); border-color:#B9BCB6}
.btn.warn{background:var(--avail)}
.btn.warn:hover{background:#175C41}
.btn[disabled]{opacity:.4; cursor:not-allowed}

table.cs{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:4px}
table.cs td{padding:9px 0; border-bottom:1px solid #F2F2EF; vertical-align:top}
table.cs td.r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  padding-left:14px; width:130px; font-weight:500}
table.cs td.hd{color:var(--faint); font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; padding-bottom:6px}
table.cs tr.tot td{font-weight:600; border-top:1px solid var(--rule-2); border-bottom:none;
  padding-top:11px}
table.cs tr.disc td{color:var(--sold)}
.grand{display:flex; justify-content:space-between; align-items:center; gap:18px;
  background:var(--ink); color:#fff; padding:17px 20px; border-radius:var(--r); margin-top:20px}
.grand span{font-size:12.5px; max-width:60%; color:#9AA3AE; line-height:1.5}
.grand b{font-size:25px; font-weight:600; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.after{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px}
.after div{background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:11px 13px}
.after span{display:block; font-size:11.5px; color:var(--muted); margin-bottom:2px}
.after b{font-size:16px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
table.cs.sum{margin-top:16px}
table.cs.sum td{padding:10px 0; font-size:14px}
table.cs.sum td.r{font-size:15px; font-weight:600}
table.cs.sum tr:last-child td{border-bottom:none}

details.sec{margin-top:12px; border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--surface-2)}
details.sec summary{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:13px 15px; font-size:13.5px; font-weight:500; cursor:pointer; color:var(--ink-2);
  list-style:none}
details.sec summary::-webkit-details-marker{display:none}
details.sec summary::after{content:'+'; font-size:16px; color:var(--faint); font-weight:400;
  order:3; margin-left:-6px}
details.sec[open] summary::after{content:'\2013'}
details.sec summary b{margin-left:auto; font-weight:600; color:var(--ink)}
details.sec[open] summary{border-bottom:1px solid var(--rule)}
details.sec > table, details.sec > .scrollx{padding:4px 15px 14px; background:var(--surface)}
details.sec > table{width:calc(100% - 30px); margin:8px 15px 14px; padding:0}
details.sec.sched > .scrollx{margin:0; background:var(--surface); border-radius:0 0 var(--r-sm) var(--r-sm)}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}
.scrollx table{min-width:660px}
table.pay{width:100%; border-collapse:collapse; font-size:12px; margin-top:14px}
table.pay th{text-align:right; font-weight:600; color:var(--faint); padding:8px 6px;
  border-bottom:1px solid var(--rule-2); font-size:10.5px; letter-spacing:.03em;
  text-transform:uppercase}
table.pay th:nth-child(1),table.pay th:nth-child(2){text-align:left}
table.pay td{padding:7px 6px; border-bottom:1px solid #F2F2EF; text-align:right;
  font-variant-numeric:tabular-nums}
table.pay td:nth-child(1){color:var(--faint)}
table.pay td:nth-child(2){text-align:left}
table.pay tr:last-child td{font-weight:600; border-top:1px solid var(--rule-2)}

.bk{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:16px 18px; margin-bottom:10px; display:flex; justify-content:space-between;
  gap:18px; flex-wrap:wrap; box-shadow:var(--shadow)}
.bk b{font-size:15px; font-weight:600}
.bk p{margin:4px 0 0; font-size:13px; color:var(--muted)}
.bk .when{font-size:12.5px; color:var(--faint); text-align:right; white-space:nowrap}
.empty{background:var(--surface); border:1px dashed var(--rule-2); border-radius:var(--r);
  padding:40px 20px; text-align:center; color:var(--muted); font-size:14px}
.note{font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.6}
.flash{background:var(--avail-bg); border:1px solid var(--avail-line); color:var(--avail);
  padding:11px 14px; border-radius:var(--r-sm); font-size:13px; margin-top:14px; line-height:1.5}
.flash.bad{background:var(--sold-bg); border-color:var(--sold-line); color:var(--sold)}
.modal{position:fixed; inset:0; background:rgba(20,26,33,.5); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:50}
.modal .card{max-width:430px; width:100%; max-height:88vh; overflow:auto;
  box-shadow:0 20px 50px rgba(20,26,33,.25)}
.login{max-width:376px; margin:64px auto 0}
.stickytotal{display:none}

@media(max-width:880px){
  .grid2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .costgrid{display:flex; flex-direction:column}
  .costgrid .card.sheet{order:2}
  .costgrid .card.noprint{order:1}
}

@media(max-width:640px){
  body{padding-bottom:92px}
  .wrap{padding:0 16px}
  .top{padding-top:16px}
  .brand h1{font-size:16px}
  .brand p{font-size:12px}
  .who{margin-left:0; width:100%; justify-content:space-between; margin-top:6px}
  .tally{margin-top:14px}
  .tally div{padding-right:14px; margin-right:14px}
  .tally b{font-size:18px}
  .tally span{font-size:11.5px}
  .tabs{gap:20px; margin-top:14px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tabs button{white-space:nowrap; font-size:13.5px}
  .card{padding:16px}
  .card h2{font-size:16px}
  .card h3{margin-top:22px}
  input,select,textarea{font-size:16px; padding:11px 12px}
  .row2{grid-template-columns:1fr; gap:0}
  .btn{padding:13px 18px; width:100%; text-align:center; font-size:14.5px}
  .act{gap:9px; margin-top:16px}

  table.cs tr.hdrow{display:none}
  table.cs tr{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px;
    align-items:center; padding:9px 0; border-bottom:1px solid #F2F2EF}
  table.cs.sum td{padding:0; font-size:13.5px}
  table.cs.sum td.r{font-size:15px}
  details.sec summary{padding:12px 13px; font-size:13px}
  details.sec > table{width:calc(100% - 26px); margin:6px 13px 12px}
  table.cs td{border:none; padding:0; min-width:0}
  table.cs td:first-child{grid-column:1; grid-row:1; font-size:13.5px; line-height:1.4}
  table.cs td:nth-child(2){grid-column:1; grid-row:2; font-size:11.5px; color:var(--muted);
    text-align:left; width:auto; padding:2px 0 0; font-weight:400; justify-self:start}
  table.cs td:nth-child(2):empty{display:none}
  table.cs td:nth-child(3){grid-column:2; grid-row:1 / -1; justify-self:end; align-self:center;
    text-align:right; width:auto; padding:0; font-size:14.5px; font-weight:600;
    white-space:nowrap}
  table.cs tr.tot{background:var(--surface-2); margin:3px -10px; padding:11px 10px;
    border-radius:var(--r-sm); border-top:none}
  table.cs tr.tot td:nth-child(3){font-size:15.5px}

  .grand{flex-direction:column; align-items:flex-start; gap:6px; padding:15px; margin-top:16px}
  .grand span{max-width:100%}
  .grand b{font-size:24px}
  .after{grid-template-columns:1fr 1fr; gap:8px; margin-top:9px}
  .after div{padding:9px 11px}
  .after b{font-size:14.5px}
  .card h2{font-size:16px}

  table.stack{min-width:520px}
  table.stack td.fl{font-size:11.5px; padding-right:10px}
  table.stack th.fl{width:62px}
  table.stack th{font-size:10.5px}
  .cell{padding:8px 4px}
  .cell b{font-size:13px}
  .cell span{font-size:10px}
  .bands button span{display:none}
  .legend{gap:14px; font-size:12px}

  .bk{flex-direction:column; gap:10px}
  .bk .when{text-align:left}
  .login{margin-top:32px}

  .stickytotal{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    align-items:center; justify-content:space-between; gap:14px;
    background:var(--ink); color:#fff; padding:13px 18px;
    padding-bottom:calc(13px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 16px rgba(20,26,33,.20)}
  .stickytotal span{font-size:12px; color:#9AA3AE}
  .stickytotal b{font-size:19px; font-weight:600; letter-spacing:-.03em;
    font-variant-numeric:tabular-nums}
}

@media(max-width:380px){
  .after{grid-template-columns:1fr}
  .tally div{padding-right:11px; margin-right:11px}
}

@media print{
  body{background:#fff; padding:0}
  .top,.bands,.chart,.legend,.act,.noprint,.stickytotal{display:none!important}
  .grid2,.costgrid{display:block}
  .card{border:none; padding:0; box-shadow:none}
  .grand{background:#fff; color:#000; border:1.5px solid #000}
  .grand span{color:#333}
  details.sec, details.sec > table, details.sec > .scrollx{display:block!important;
    border:none; background:none; padding:0; margin:0; width:100%}
  details.sec summary{display:block; border:none; padding:14px 0 6px;
    font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#444}
  details.sec summary::after{content:''}
  details.sec summary b{display:none}
  .scrollx{overflow:visible}
  .scrollx table{min-width:0}
  table.cs tr{display:table-row}
  table.cs td{display:table-cell; border-bottom:1px solid #ddd; padding:6px 0}
  table.cs tr.tot{background:none; margin:0; padding:0}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  .cell:hover{transform:none}
}

.cell.h{background:#EAF0F6; color:#1B4B7A; border-color:#C8D8E8}
.cell.k{background:#EFEFEC; color:#5A6068; border-color:#DDDDD8}
.cell.c{background:#F6EDEC; color:#8A4A36; border-color:#E4CDC6}
.pill.h{background:#EAF0F6; color:#1B4B7A}
.pill.k{background:#EFEFEC; color:#5A6068}
.pill.c{background:#F6EDEC; color:#8A4A36}
.legend i.lg.a{background:var(--avail-bg); border:1px solid var(--avail-line)}
.legend i.lg.b{background:var(--booked-bg); border:1px solid var(--booked-line)}
.legend i.lg.s{background:var(--sold-bg); border:1px solid var(--sold-line)}
.legend i.lg.h{background:#EAF0F6; border:1px solid #C8D8E8}
.legend i.lg.k{background:#EFEFEC; border:1px solid #DDDDD8}
.legend i.lg.c{background:#F6EDEC; border:1px solid #E4CDC6}
.statusrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--rule)}
.statusrow > span{font-size:12.5px; color:var(--muted)}
.chip{padding:6px 13px; border-radius:20px; font-size:12.5px; font-weight:600;
  border:1px solid transparent; transition:box-shadow .12s ease}
.chip:hover{box-shadow:0 1px 4px rgba(20,26,33,.12)}
.chip.a{background:var(--avail-bg); color:var(--avail); border-color:var(--avail-line)}
.chip.b{background:var(--booked-bg); color:var(--booked); border-color:var(--booked-line)}
.chip.s{background:var(--sold-bg); color:var(--sold); border-color:var(--sold-line)}
.chip.h{background:#EAF0F6; color:#1B4B7A; border-color:#C8D8E8}
.chip.k{background:#EFEFEC; color:#5A6068; border-color:#DDDDD8}
.chip.c{background:#F6EDEC; color:#8A4A36; border-color:#E4CDC6}
@media(max-width:640px){.chip{padding:8px 14px}}

.cell b em{font-style:normal; font-weight:500; opacity:.65; font-size:.86em}