:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --chip:#E8EAEE; --chip-on:#1D2027; --chip-on-ink:#FFFFFF;
  --ink:#15171C; --muted:#6A707C; --line:#DADDE3; --hatch-a:#E4E6EA; --hatch-b:#F4F5F7;
  --l1:#1F8A55; --l2:#2B7BB5; --box:#C8323A;
  --accent:#2B62E3; --accent-soft:rgba(43,98,227,.12); --warn:#C8323A; --ok:#1F8A55;
  --font:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131313; --surface:#1B1C1F; --chip:#25272C; --chip-on:#2F3238; --chip-on-ink:#FFFFFF;
    --ink:#F1F2F4; --muted:#8C919B; --line:#2C2E33; --hatch-a:#222326; --hatch-b:#18191B;
    --l1:#4CC486; --l2:#5AA9E0; --box:#EF6A70;
    --accent:#3D72F5; --accent-soft:rgba(61,114,245,.16); --warn:#EF6A70; --ok:#4CC486;
  }
}
:root[data-theme="dark"]{
  --bg:#131313; --surface:#1B1C1F; --chip:#25272C; --chip-on:#2F3238; --chip-on-ink:#FFFFFF;
  --ink:#F1F2F4; --muted:#8C919B; --line:#2C2E33; --hatch-a:#222326; --hatch-b:#18191B;
  --l1:#4CC486; --l2:#5AA9E0; --box:#EF6A70;
  --accent:#3D72F5; --accent-soft:rgba(61,114,245,.16); --warn:#EF6A70; --ok:#4CC486;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:620px;margin:0 auto;padding:14px 18px 150px}

.top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.badge{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
.banner-logo{display:block;width:100%;height:auto;border-radius:16px;margin-top:16px;background:#fff}
.brand{font-weight:800;font-size:1.05rem;flex:1}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.status{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status.live .dot{background:var(--ok)}
.views{display:flex;background:var(--chip);border-radius:999px;padding:3px}
.views button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-weight:600;font-size:.85rem;color:var(--muted)}
.views button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.gear{border:0;background:var(--chip);width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.gear svg{width:17px;height:17px}

.lbl{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:0;background:var(--chip);color:var(--muted);border-radius:999px;padding:11px 22px;font-weight:700;min-width:58px}
.chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.25)}
.hint{color:var(--muted);font-size:.85rem;margin:8px 0 0}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}

.carousel{display:flex;align-items:center;gap:6px}
.arrow{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0}
.arrow svg{width:14px;height:14px}
.arrow:disabled{opacity:.35;cursor:default}
.days{flex:1;display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 calc((100% - 20px)/6);scroll-snap-align:start;border:0;background:transparent;border-radius:12px;padding:10px 0;text-align:center;color:var(--muted);line-height:1.35}
.day b{display:block;font-weight:700;color:var(--muted)}
.day[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink)}
.day[aria-pressed="true"] b{color:inherit}
@media (max-width:480px){.day{flex-basis:calc((100% - 12px)/4)}}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tab{border:0;background:transparent;border-radius:999px;padding:9px 4px;font-weight:600;color:var(--muted);white-space:nowrap}
.tab[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink)}
.tab:disabled{opacity:.35;cursor:default}
.tab .ic{margin-right:5px}
@media (max-width:420px){.tab .ic{display:none}.tab{font-size:.88rem}}

.slots{margin-top:22px;display:flex;flex-direction:column;gap:20px}
.row{position:relative}
.ticks{position:relative;height:20px;margin:0 2px 0;font-size:.78rem;font-weight:700}
.ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ticks span.first{transform:none}
.ticks span.last{transform:translateX(-100%)}
.ticks i{position:absolute;top:7px;width:4px;height:4px;border-radius:50%;background:var(--muted);transform:translateX(-50%);opacity:.6}
.tickrow{display:flex}
.tickrow .gap{flex:0 0 84px}
.rbar{display:flex;align-items:center;gap:0;margin-top:8px}
.rlabel{flex:0 0 84px;font-size:.8rem;font-weight:800;line-height:1.15;color:var(--muted)}
.rlabel small{display:block;font-size:.66rem;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.04em}
.rlabel.L1{color:var(--l1)} .rlabel.L2{color:var(--l2)} .rlabel.BOX{color:var(--box)}
.barwrap{flex:1;min-width:0}
.bar{display:flex;height:34px;border-radius:999px;overflow:hidden;background:repeating-linear-gradient(-55deg,var(--hatch-a) 0 11px,var(--hatch-b) 11px 22px)}
.cell{flex:1;border:0;padding:0;background:transparent;position:relative}
.cell.free{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cell .pr{font-size:.68rem;font-weight:700;color:var(--muted);pointer-events:none}
.cell.sel .pr{color:var(--accent)}
.cell.free:hover{background:var(--accent-soft)}
.cell.sel{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cell.sel + .cell.sel{box-shadow:inset 0 1.5px 0 0 var(--accent),inset 0 -1.5px 0 0 var(--accent),inset 1px 0 0 0 var(--accent),inset -1.5px 0 0 0 var(--accent)}
.cell.taken,.cell.past,.cell.locked{cursor:not-allowed}
.cell.locked{background:radial-gradient(circle,var(--muted) 1px,transparent 1.6px) 0 0/9px 9px,var(--surface);box-shadow:inset 0 0 0 1px var(--line);opacity:.55}
.cell:first-child{border-radius:999px 0 0 999px}
.cell:last-child{border-radius:0 999px 999px 0}
.closed{color:var(--muted);text-align:center;padding:26px 0}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:.8rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:18px;height:12px;border-radius:4px;display:inline-block}
.sw.f{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.sw.t{background:repeating-linear-gradient(-55deg,var(--hatch-a) 0 4px,var(--muted) 4px 5px)}
.sw.o{background:radial-gradient(circle,var(--muted) 1px,transparent 1.6px) 0 0/5px 5px,var(--surface);box-shadow:inset 0 0 0 1px var(--line);opacity:.7}
.sw.s{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}

.foot{position:fixed;left:0;right:0;bottom:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .2s}
.foot.show{transform:none}
.foot .in{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:14px}
.foot .sum{flex:1;min-width:0}
.foot .sum b{display:block;font-size:1rem}
.foot .sum span{font-size:.85rem;color:var(--muted)}
.cta{border:0;background:var(--accent);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700}
.cta:disabled{opacity:.5;cursor:not-allowed}
.link{border:0;background:transparent;color:var(--muted);font-weight:600;padding:8px}

.list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.item b{font-size:.98rem}
.item small{color:var(--muted);grid-column:1/2}
.tag{grid-row:1/3;grid-column:2;align-self:center;font-size:.75rem;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--chip);white-space:nowrap}
.tag.paid{color:var(--ok)}
.empty{color:var(--muted)}
.toggle{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem;margin-top:16px}
.toggle input{width:18px;height:18px;accent-color:var(--accent)}

dialog{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:20px;width:min(460px,calc(100% - 24px))}
dialog::backdrop{background:rgba(0,0,0,.55)}
@media (max-width:560px){dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}
.dlg{padding:22px}
.dlg h3{margin:0 0 4px;font-size:1.3rem;font-weight:800}
.dlg .sub{color:var(--muted);margin:0 0 18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.8rem;font-weight:700;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px 14px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px}
.ghost{border:1px solid var(--line);background:transparent;border-radius:999px;padding:11px 18px;font-weight:600}
.danger{border:1px solid var(--warn);color:var(--warn);background:transparent;border-radius:999px;padding:11px 18px;font-weight:700}
.kv{display:grid;grid-template-columns:90px 1fr;gap:8px 12px;margin:0 0 18px}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-word}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:.9rem;max-width:calc(100% - 32px);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.banner{margin-top:12px;border:1px dashed var(--line);border-radius:12px;padding:8px 12px;font-size:.85rem;color:var(--muted)}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){.foot,.toast,.days{transition:none;scroll-behavior:auto}}

/* ---- additions for the live site ---- */
a{color:var(--accent)}
.top a.brandlink{display:flex;align-items:center;gap:10px;flex:1;color:inherit;text-decoration:none;min-width:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin:4px 0 12px}
.check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.payline{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.9rem;margin-bottom:14px}
.ref{font-size:1.6rem;font-weight:800;letter-spacing:.06em}
.mine .item{cursor:default}
.mine .acts{margin-top:8px;justify-content:flex-start}
.small{font-size:.85rem;color:var(--muted)}
.foot-links{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{color:var(--muted)}
.deskbar{margin-top:12px;border-radius:12px;padding:8px 12px;font-size:.85rem;background:var(--accent-soft);color:var(--ink)}
.wa{background:#1FA855;color:#fff;border:0;border-radius:999px;padding:11px 18px;font-weight:700;text-decoration:none;display:inline-block}
@media print{
  .top,.views,.foot,.carousel,hr,.noprint,.toast{display:none!important}
  body{background:#fff;color:#000}
  .item{break-inside:avoid;border-color:#999}
}

.tip{position:fixed;left:0;top:0;z-index:60;background:var(--ink);color:var(--bg);font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .12s}
.tip.show{opacity:1}
@media (prefers-reduced-motion: reduce){.tip{transition:none}}