/* Admin + client panels. Same palette as the site, calmer — these are work screens. */

.panel{background:var(--ink);min-height:100vh}
.panel .spotlight,.panel .grain{display:none}

/* ── gate ────────────────────────────────────────────────── */
.gate{min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  background:radial-gradient(60% 60% at 50% 20%,rgba(245,196,69,.12),transparent 70%)}
.gate__box{width:min(400px,100%);display:grid;gap:15px;justify-items:stretch;text-align:center;
  padding:36px 30px;border-radius:22px;border:1px solid rgba(245,196,69,.24);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 40px 90px -50px rgba(245,196,69,.75)}
.gate__box img{justify-self:center;filter:drop-shadow(0 0 20px rgba(245,196,69,.5))}
.gate__box h1{font-family:var(--disp);font-weight:400;font-size:38px;letter-spacing:.06em;text-transform:uppercase}
.gate__sub{color:var(--mute);font-size:14.5px;margin-bottom:6px}
.gate__box .field{text-align:left}
.gate__back{color:var(--mute2);font-size:13.5px;margin-top:4px}
.gate__back:hover{color:var(--gold)}

/* ── shell ───────────────────────────────────────────────── */
.pbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px clamp(16px,3vw,30px);background:rgba(7,5,12,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pbar__brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:20px;
  letter-spacing:.08em;text-transform:uppercase}
.pbar__brand img{filter:drop-shadow(0 0 12px rgba(245,196,69,.5))}
.pbar .btn{margin-left:auto;padding:10px 18px;font-size:14px}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{font-family:var(--body);font-weight:800;font-size:14px;letter-spacing:.02em;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--mute);cursor:pointer;transition:all .2s}
.tab:hover{color:var(--white);border-color:rgba(255,255,255,.3)}
.tab.is-on{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 50%,var(--gold-dp));
  color:#1a1206;border-color:var(--gold)}

.pwrap{width:min(1100px,94vw);margin:0 auto;padding:30px 0 90px}
.pane{display:none}
.pane.is-on{display:block}
.ph{font-family:var(--disp);font-weight:400;font-size:clamp(26px,4vw,40px);text-transform:uppercase;
  letter-spacing:.03em;color:var(--gold-lt)}
.psub{color:var(--mute);font-size:14.8px;margin-top:8px;margin-bottom:24px;max-width:70ch}
.pch{font-family:var(--disp);font-weight:400;font-size:20px;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:14px;color:var(--gold-lt)}

.pcard{padding:24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  display:grid;gap:14px;align-content:start}
.split{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1.15fr);gap:18px;align-items:start}
/* Fields side by side must line up on their INPUTS, not their bottoms. Aligning to
   flex-end meant a two-line hint under one field shoved its input up relative to its
   neighbour — which read as a bug, because it was one. The label gets a reserved
   height so a one-line and a two-line label still start their inputs at the same
   place, and anything below the input is free to differ. */
.prow{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.prow .field{flex:1 1 160px;display:flex;flex-direction:column;gap:7px}
.prow .field > label{
  min-height:2.5em;display:flex;align-items:flex-end;margin:0;
}
.prow .field > .hintline{margin-top:auto;padding-top:2px}
/* buttons that sit in a field row line up with the inputs, not the labels */
.prow > .btn{align-self:flex-start;margin-top:calc(2.5em + 7px)}
.pactions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.check{display:flex;align-items:center;gap:9px;font-size:14.5px;color:rgba(255,255,255,.86);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}

.msg{font-size:14px;font-weight:700;display:none}
.msg.ok{display:block;color:#8bf5b3}
.msg.bad{display:block;color:#ff9ac9}

/* ── lists ───────────────────────────────────────────────── */
.list{display:grid;gap:10px;max-height:560px;overflow-y:auto}
.empty{color:var(--mute2);font-size:14px;padding:6px 0}
.row{display:grid;gap:5px;padding:14px 16px;border-radius:13px;
  background:rgba(0,0,0,.32);border:1px solid var(--line)}
.row__top{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.row__t{font-weight:800;font-size:15.5px}
.row__d{color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.06em}
.row__m{color:var(--mute);font-size:13.6px;overflow-wrap:anywhere}
.row__acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.mini{font-size:12px;font-weight:800;letter-spacing:.04em;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mute);cursor:pointer;transition:all .18s}
.mini:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.mini.on{background:var(--gold);border-color:var(--gold);color:#1a1206}
.mini.danger:hover{background:rgba(255,45,149,.2);border-color:var(--magenta);color:#ffb3d8}
.pill{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--mute)}
.pill.new{background:rgba(245,196,69,.18);color:var(--gold-lt)}
.pill.booked{background:rgba(62,232,122,.16);color:#8bf5b3}
.pill.done{background:rgba(34,231,255,.14);color:#9be9f7}
.pill.passed{background:rgba(255,255,255,.06);color:var(--mute2)}

.creds{padding:16px;border-radius:13px;border:1px dashed rgba(245,196,69,.5);
  background:rgba(245,196,69,.08);font-size:14.5px;line-height:1.8}
.creds b{color:var(--gold-lt);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px}
.creds small{display:block;margin-top:8px;color:var(--mute);font-size:12.5px}

@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .pbar .btn{margin-left:0}
}

/* ── show / hide password ────────────────────────────────── */
.pw{position:relative;display:flex;align-items:center}
.pw input{padding-right:48px;width:100%}
.pw__eye{
  position:absolute;right:8px;display:grid;place-items:center;
  width:34px;height:34px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--mute);transition:background .2s,color .2s;
}
.pw__eye:hover{background:rgba(245,196,69,.18);color:var(--gold-lt)}
.pw__eye svg{width:20px;height:20px;fill:currentColor}
.pw__eye .pw__off{display:none}
.pw__eye.is-shown .pw__on{display:none}
.pw__eye.is-shown .pw__off{display:block}

/* ── requested slots, with a live verdict on each ────────── */
.slots{display:grid;gap:6px;margin:9px 0 4px}
.slot{
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between;
  padding:8px 12px;border-radius:10px;font-size:14px;
}
.slot--ok{background:rgba(62,232,122,.11);border:1px solid rgba(62,232,122,.34)}
.slot--no{background:rgba(255,45,149,.10);border:1px solid rgba(255,45,149,.34)}
.slot__when{font-weight:800}
.slot__v{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.slot--ok .slot__v{color:#8bf5b3}
.slot--no .slot__v{color:#ff9ac9}

/* ── reply box ───────────────────────────────────────────── */
.reply{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.reply__msg{
  flex:1 1 220px;font-family:var(--body);font-size:14px;color:var(--white);
  background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
}
.reply__msg:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,69,.15)}
.mini.go{background:rgba(62,232,122,.16);border-color:rgba(62,232,122,.45);color:#8bf5b3}
.mini.go:hover{background:rgba(62,232,122,.3);color:#fff}
.mini.no{background:rgba(255,45,149,.14);border-color:rgba(255,45,149,.42);color:#ff9ac9}
.mini.no:hover{background:rgba(255,45,149,.28);color:#fff}
.pill.available{background:rgba(62,232,122,.16);color:#8bf5b3}
.pill.unavailable{background:rgba(255,45,149,.16);color:#ff9ac9}
.row .msg{margin-top:8px}

/* ── client video list ───────────────────────────────────── */
.vwarn{
  padding:13px 16px;border-radius:12px;margin-bottom:12px;font-size:14px;line-height:1.6;
  background:rgba(245,196,69,.10);border:1px dashed rgba(245,196,69,.45);color:var(--gold-lt);
}
.vrow a.row__t{color:var(--gold-lt);border-bottom:1px solid rgba(245,196,69,.4)}
.vrow a.row__t:hover{color:#fff}

/* ── confirm page ────────────────────────────────────────── */
.confirm{width:min(500px,100%)}
.confirm h1{font-family:var(--disp);font-weight:400;font-size:34px;letter-spacing:.05em;text-transform:uppercase}
.offers{display:grid;gap:10px;margin:20px 0 6px;text-align:left}
.offer{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  padding:15px 18px;border-radius:14px;cursor:pointer;font-family:var(--body);
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.18);color:var(--white);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s;
}
.offer:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(245,196,69,.14)}
.offer__d{font-weight:800;font-size:15.5px}
.offer__t{grid-column:1;color:var(--gold-lt);font-weight:700;font-size:14.5px}
.offer__tick{grid-row:1/3;grid-column:2;font-size:20px;color:transparent;transition:color .2s}
.offer.is-on{background:linear-gradient(135deg,rgba(245,196,69,.24),rgba(245,196,69,.10));border-color:var(--gold)}
.offer.is-on .offer__tick{color:var(--gold)}
.offer--gone{
  display:grid;grid-template-columns:1fr auto;padding:15px 18px;border-radius:14px;
  background:rgba(255,45,149,.08);border:1px solid rgba(255,45,149,.3);opacity:.7;
}
.offer--gone .offer__d{text-decoration:line-through}
.offer__x{grid-row:1/3;grid-column:2;align-self:center;font-size:11px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:#ff9ac9}
.soon__card--pay{margin:20px 0;text-align:left;padding:22px}
.soon__card--pay h3{font-family:var(--disp);font-weight:400;font-size:21px;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:9px;color:var(--gold-lt)}
.soon__card--pay p{color:var(--mute);font-size:14.5px}
.slot__pick{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute);cursor:pointer}
.slot__pick input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.chosenline{margin-top:8px;padding:10px 14px;border-radius:11px;font-size:14.5px;
  background:rgba(245,196,69,.14);border:1px solid rgba(245,196,69,.45);color:var(--gold-lt)}
.pill.offered{background:rgba(139,92,246,.2);color:#cbb8ff}
.pill.confirmed{background:rgba(62,232,122,.2);color:#8bf5b3}

/* ── click-to-block calendar ─────────────────────────────── */
.acal{margin-bottom:18px}
.acal__top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:6px}
.acal__top b{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.05em;min-width:9.5ch;text-align:center}
.acal__hint{font-size:13px;color:var(--mute);flex:1 1 220px}
.acal .cal__d{font-size:14px}
.acal .cal__d:hover:not(:disabled):not(.is-past){transform:translateY(-3px)}

/* ── clickable user rows + their bucket ──────────────────── */
.row--click{cursor:pointer;transition:border-color .2s,background .2s}
.row--click:hover{border-color:rgba(245,196,69,.45);background:rgba(245,196,69,.06)}
.row--click.is-open{border-color:var(--gold);background:rgba(245,196,69,.10)}

.bucket{
  margin-top:22px;padding:22px;border-radius:20px;
  border:1px solid rgba(245,196,69,.32);
  background:linear-gradient(160deg,rgba(245,196,69,.07),rgba(255,255,255,.015));
}
.bucket__head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.bucket__name{font-family:var(--disp);font-weight:400;font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;letter-spacing:.03em;color:var(--gold-lt)}
.bucket__meta{color:var(--mute);font-size:13.8px;margin-top:4px;overflow-wrap:anywhere}
.bucket__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:start}
.bucket .pcard{background:rgba(0,0,0,.3)}

/* the file drop zone — inert until storage exists, and it says so */
.drop{
  display:grid;place-items:center;gap:6px;text-align:center;
  padding:26px 18px;margin-bottom:14px;border-radius:15px;
  border:2px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s;
}
.drop.is-over{border-color:var(--gold);background:rgba(245,196,69,.12)}
.drop__tag{font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:rgba(245,196,69,.16);color:var(--gold-lt)}
.drop__big{font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.drop__sub{font-size:13px;color:var(--mute);max-width:38ch}

/* ── four months at once ─────────────────────────────────── */
.acmonths{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.acmonth__h{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold-lt);text-align:center;margin-bottom:8px}
.acmonths .cal__dow,.acmonths .cal__grid{max-width:none;gap:4px}
.acmonths .cal__d{font-size:12.5px;border-radius:8px}

/* ── link-style button (forgot password etc.) ────────────── */
.linky{
  background:none;border:0;cursor:pointer;font-family:var(--body);font-size:13.5px;
  color:var(--mute);text-decoration:underline;text-underline-offset:3px;padding:4px;
}
.linky:hover{color:var(--gold)}

/* ── "how to post a video" explainer ─────────────────────── */
.howto{
  padding:20px 22px;border-radius:16px;margin-bottom:22px;
  background:rgba(34,231,255,.07);border:1px solid rgba(34,231,255,.3);
}
.howto__h{font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:#bdf2fb;margin-bottom:12px}
.howto__steps{display:grid;gap:10px;counter-reset:h;list-style:none;margin-bottom:14px}
.howto__steps li{position:relative;padding-left:30px;font-size:14.5px;color:rgba(255,255,255,.88);line-height:1.6}
.howto__steps li::before{
  counter-increment:h;content:counter(h);position:absolute;left:0;top:1px;
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  background:var(--cyan);color:#04222a;font-size:11.5px;font-weight:900;
}
.howto__note{font-size:13.8px;color:var(--mute);line-height:1.65}

/* selects on panel pages match the public site exactly */
.panel select{
  font-family:var(--body);font-size:15.5px;color:var(--white);
  background-color:rgba(0,0,0,.42);border:1.5px solid rgba(255,255,255,.16);
  border-radius:12px;padding:13px 40px 13px 15px;width:100%;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5C445'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.panel select:focus{outline:none;border-color:var(--gold);background-color:rgba(0,0,0,.6);box-shadow:0 0 0 4px rgba(245,196,69,.16)}
.panel select option{background:#12101c;color:#fff}

/* ── segmented upload / link toggle ──────────────────────── */
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid var(--line)}
.seg__btn{
  flex:1;font-family:var(--body);font-weight:800;font-size:13.5px;cursor:pointer;
  padding:9px 12px;border-radius:9px;border:0;background:none;color:var(--mute);transition:all .2s;
}
.seg__btn:hover{color:#fff}
.seg__btn.is-on{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#150e03}

/* ── live drop zone ──────────────────────────────────────── */
.drop--live{
  display:grid;place-items:center;gap:5px;text-align:center;cursor:pointer;
  padding:30px 18px;border-radius:15px;border:2px dashed rgba(245,196,69,.4);
  background:rgba(245,196,69,.05);transition:border-color .2s,background .2s,transform .2s;
}
.drop--live:hover{border-color:var(--gold);background:rgba(245,196,69,.12)}
.drop--live.is-over{border-color:var(--gold);background:rgba(245,196,69,.2);transform:scale(1.01)}
.drop--live .drop__big{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold-lt)}
.drop--live .drop__sub{font-size:12.8px;color:var(--mute)}
.drop__file{
  margin-top:8px;font-size:13px;font-weight:800;color:#8bf5b3;
  background:rgba(62,232,122,.14);border:1px solid rgba(62,232,122,.4);
  padding:6px 13px;border-radius:999px;overflow-wrap:anywhere;
}

/* ── upload progress ─────────────────────────────────────── */
.bar{height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:width .18s linear}

.hintline{font-size:12.8px;color:var(--mute);line-height:1.6;margin-top:8px}
.vplayer{width:100%;max-height:320px;border-radius:12px;background:#000;margin:8px 0}

/* ── 48-hour hold ────────────────────────────────────────── */
.holdpill{
  display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.06em;
  padding:4px 11px;border-radius:999px;margin-left:6px;white-space:nowrap;
  background:rgba(245,196,69,.18);color:var(--gold-lt);border:1px solid rgba(245,196,69,.45);
}
.holdpill--out{background:rgba(255,45,149,.16);color:#ff9ac9;border-color:rgba(255,45,149,.45)}
.holdpill--paid{background:rgba(62,232,122,.16);color:#8bf5b3;border-color:rgba(62,232,122,.45)}
.chosenline small{display:block;margin-top:6px;font-size:12.5px;color:var(--mute);font-weight:400}
.pill.expired{background:rgba(255,255,255,.06);color:var(--mute2)}

/* ── panels: tablets and phones ──────────────────────────── */
@media (max-width:1024px){
  .bucket__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .bucket__grid{grid-template-columns:1fr}
  .pbar{gap:12px}
  .pbar .btn{margin-left:0;order:3}
  .tabs{order:4;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex-shrink:0}
}
@media (max-width:620px){
  .pwrap{padding:20px 0 80px}
  .pcard{padding:17px 15px}
  .ph{font-size:clamp(22px,7vw,30px)}
  .acmonths{grid-template-columns:1fr}
  .acmonths .cal__d{font-size:14px}
  .prow{flex-direction:column;align-items:stretch}
  .prow .field{flex:1 1 auto}
  .pactions{flex-direction:column;align-items:stretch}
  .pactions .btn{width:100%}
  .reply{flex-direction:column;align-items:stretch}
  .reply .mini{width:100%}
  .row__acts{gap:6px}
  .slot{flex-direction:column;align-items:flex-start;gap:4px}
  .gate__box{padding:26px 20px}
  .gate__box h1{font-size:30px}
  .offer{grid-template-columns:1fr;gap:4px}
  .offer__tick{grid-row:auto;grid-column:1;justify-self:end;margin-top:-24px}
  .bucket{padding:16px 14px}
  .drop--live{padding:22px 14px}
}
@media (hover:none){
  .tab{min-height:42px}
  .mini{min-height:38px}
  .btn{min-height:46px}
}
.slugrow{display:flex;align-items:center;gap:0}
.slugrow span{
  padding:13px 10px 13px 14px;border-radius:12px 0 0 12px;font-size:15px;color:var(--mute);
  background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.16);border-right:0;white-space:nowrap;
}
.slugrow input{border-radius:0 12px 12px 0!important}
.pill.contacted{background:rgba(139,92,246,.2);color:#cbb8ff}
.pill.agreed{background:rgba(62,232,122,.18);color:#8bf5b3}
.reply a.mini{display:inline-flex;align-items:center;text-decoration:none}

/* ── partner portal ──────────────────────────────────────────
   A venue's own view: a note from us, the disclaimers they have to read before
   sending a request, and the link they hand out. */

/* the note the admin writes for this partner specifically */
.pnote{
  padding:16px 18px;border-radius:14px;margin-bottom:20px;
  border:1px solid rgba(245,196,69,.4);background:rgba(245,196,69,.08);
}
.pnote b{color:var(--gold-lt);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.pnote p{margin:6px 0 0;font-size:14.5px;color:rgba(255,255,255,.9);line-height:1.6;white-space:pre-wrap}

/* what a partner must read before sending a request on someone's behalf */
.pdisc{
  margin:22px 0;padding:16px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
}
.pdisc b{color:var(--white);font-size:14px}
.pdisc ol{margin:8px 0 0 18px;padding:0;display:grid;gap:6px}
.pdisc li{font-size:13.8px;color:var(--mute);line-height:1.6}
.pdisc li b{color:var(--gold-lt);font-size:inherit}

/* the shareable link, styled to be read aloud down a phone */
.plink{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:12px 0;padding:11px 14px;border-radius:11px;
  border:1px dashed rgba(245,196,69,.45);background:rgba(245,196,69,.06);
}
.plink span{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.plink code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  color:var(--gold-lt);overflow-wrap:anywhere;
}

.hint{color:var(--mute2);font-weight:400;font-size:12.5px}

/* ── admin: the partner's portal half of an enquiry row ────── */
.pportal{
  margin-top:12px;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
}
.pportal .row__top{gap:9px}
.pportal .row__acts{margin-top:9px}

/* ── admin: what an event costs ───────────────────────────────
   Free-text prices elsewhere are marketing copy; these feed an invoice, so they are
   real numbers. Deposit left blank means 10% of the total, worked out when read. */
.pmoney{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  margin-top:12px;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
}
.pmoney__f{display:grid;gap:4px;flex:1 1 120px;min-width:110px}
.pmoney__f label{
  font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mute2);
}
.pmoney__f input{
  width:100%;padding:8px 10px;border-radius:9px;font-size:14px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.16);color:var(--white);
}
.pmoney__f input:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.45)}
.pmoney__bal{
  font-size:13px;font-weight:800;color:var(--gold-lt);
  padding-bottom:9px;white-space:nowrap;
}

/* ── admin: schedule ─────────────────────────────────────── */
.schedh{
  font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);
  margin:22px 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(245,196,69,.28);
  display:flex;align-items:baseline;gap:10px;
}
.schedh:first-child{margin-top:0}
.schedh span{
  font-family:var(--body);font-size:11px;font-weight:900;letter-spacing:.06em;
  color:var(--mute2);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:999px;
}
/* an event that has already happened is reference, not work — step it back */
.row--past{opacity:.55}

/* ── the customer's receipt page ─────────────────────────── */
/* NOT display:grid — Chrome drops the list markers when a list becomes a grid
   container, and a numbered policy that renders unnumbered reads as loose prose. */
.policy{margin:0;padding-left:22px;list-style:decimal}
.policy li{
  display:list-item;font-size:14.2px;line-height:1.62;color:var(--mute);margin-bottom:9px;
}
.policy li::marker{color:var(--gold);font-weight:800}
.policy li:last-child{margin-bottom:0}

/* ── the guest gallery ───────────────────────────────────────
   Seen mostly on a phone, at or just after a party, by someone who has never heard of
   us before. It has one job: make the clips easy to get and make it obvious who filmed
   them. */

.codebox{
  width:min(560px,100%);margin:6vh auto 0;padding:32px 28px;border-radius:20px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  text-align:center;
}
.codeform{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.codeform input{
  flex:1 1 220px;padding:15px 18px;border-radius:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;letter-spacing:.1em;text-align:center;text-transform:uppercase;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:var(--white);
}
.codeform input:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.55)}
.codeform input::placeholder{color:var(--mute2);letter-spacing:.08em}

.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.vcard{
  margin:0;display:grid;gap:0;border-radius:16px;overflow:hidden;
  /* thumbnail, then caption, then the button — the middle row absorbs any slack so
     every Download button in the grid lines up along the bottom */
  grid-template-rows:auto 1fr auto;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
}
/* 360 clips are shot vertical — give them a portrait frame instead of letterboxing */
.vcard__v{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;display:block}
.vcard__ext{
  /* auto rows + centred content, or the grid stretches to fill the tall 9:16 frame and
     flings the play button and its label to opposite ends */
  display:grid;justify-items:center;align-content:center;grid-auto-rows:max-content;
  gap:12px;aspect-ratio:9/16;
  background:radial-gradient(circle at 50% 40%,rgba(245,196,69,.18),rgba(0,0,0,.5));
  color:var(--white);font-weight:800;font-size:14.5px;text-align:center;padding:20px;
}
.vcard__ext:hover{background:radial-gradient(circle at 50% 40%,rgba(245,196,69,.3),rgba(0,0,0,.5))}
.vcard__play{
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--gold);color:#1a1206;font-size:24px;padding-left:4px;
  box-shadow:0 0 30px rgba(245,196,69,.5);
}
.vcard__cap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 15px 10px}
.vcard__t{font-weight:800;font-size:15px;flex:1 1 auto}
.vcard__dl{margin:0 15px 15px;justify-content:center}

.pcard--cta{
  border-color:rgba(245,196,69,.35);
  background:linear-gradient(180deg,rgba(245,196,69,.09),rgba(255,255,255,.02));
}

.foot--slim{padding:30px 0;margin-top:50px}
.foot--slim .foot__copy{text-align:center}

@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
  .codebox{padding:26px 20px;margin-top:2vh}
}

/* ── the host's guest-page card ──────────────────────────── */
.gwrap{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.gwrap__qr{
  flex:0 0 auto;padding:12px;border-radius:14px;background:#fff;
  box-shadow:0 0 30px rgba(245,196,69,.25);
}
.gwrap__qr img{display:block;width:180px;height:180px}
.gwrap__body{flex:1 1 260px;min-width:0}
.gcode{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  font-size:23px;letter-spacing:.08em;color:var(--gold-lt);margin:0 0 10px;
  overflow-wrap:anywhere;
}
/* a switched-off gallery leaves its buttons in place but visibly inert */
.is-dim{opacity:.45}

/* ── the one thing a customer must not miss ───────────────── */
.alert{
  margin:0 0 16px;padding:15px 17px;border-radius:14px;
  border:1px solid rgba(245,196,69,.45);background:rgba(245,196,69,.09);
}
.alert b{color:var(--gold-lt);font-size:15.5px}
.alert p{margin:7px 0 0;font-size:14.3px;line-height:1.6;color:rgba(255,255,255,.88)}
.alert p:first-of-type{margin-top:8px}
.alert a{color:var(--gold);font-weight:700}
/* overdue or cancelled — this one has to look different from a friendly nudge */
.alert--bad{border-color:rgba(255,45,149,.5);background:rgba(255,45,149,.1)}
.alert--bad b{color:#ffb3d8}
.alert--bad a{color:#ffb3d8}

/* The bar assumes one trailing button (margin-left:auto). With a Back button as well,
   only the first should push right; the rest sit beside it. */
.pbar .btn ~ .btn{margin-left:0}

/* ── availability requests, rebuilt ───────────────────────────
   One customer per card. The old flat list made you hold three dates in your head and
   cross-reference the calendar tab by hand; here their month sits beside their times. */

.inq{
  border:1px solid var(--line);border-radius:16px;margin-bottom:12px;
  background:rgba(255,255,255,.03);overflow:hidden;
}
.inq.is-open{border-color:rgba(245,196,69,.45);background:rgba(245,196,69,.05)}

.inq__head{
  width:100%;display:flex;flex-wrap:wrap;gap:11px;align-items:center;
  padding:15px 17px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;
}
.inq__head:hover{background:rgba(255,255,255,.04)}
.inq__name{font-weight:800;font-size:16px;color:var(--white)}
.inq__when{color:var(--mute);font-size:13.5px}
.inq__chev{margin-left:auto;color:var(--mute2);font-size:13px}

.inq__body{padding:0 17px 17px}
.inq__contact{font-size:14px;color:var(--mute);margin:0 0 16px}
.inq__contact a{color:var(--gold)}

/* calendar left, times right — the whole point of the rebuild */
.inq__cols{display:grid;grid-template-columns:minmax(260px,auto) minmax(280px,1fr);gap:22px;align-items:start}
.inq__cal{display:grid;gap:14px}
.inq__h{
  font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px;
}
.inq__open{color:var(--mute);font-family:var(--body);font-size:12.5px;letter-spacing:0}
.inq__times{min-width:0}

/* the legend, so the colours mean something without being explained twice */
.inq__key{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11.5px;color:var(--mute2);margin:0}
.k{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.k--ask{background:var(--gold)}
.k--full{background:rgba(255,45,149,.55)}
.k--part{background:rgba(255,145,60,.5)}

/* days they asked for, against what is already blocked */
.cal__d.is-ask{
  background:var(--gold)!important;color:#1a1206!important;font-weight:900;
  box-shadow:0 0 0 2px rgba(245,196,69,.35);
}
.cal__d.is-ask.is-clash{
  background:linear-gradient(135deg,var(--gold) 45%,rgba(255,45,149,.85) 55%)!important;
  color:#fff!important;
}
.cal__d.is-picked{box-shadow:0 0 0 3px #3ee87a}
.cal__d.is-sel{outline:2px solid var(--white);outline-offset:1px}
.cal__d[disabled]{cursor:default;opacity:.55}

/* one block per day, so three windows on one date read as one thing */
.dayblock{
  border:1px solid rgba(255,255,255,.12);border-radius:13px;
  padding:11px 13px;margin-bottom:10px;background:rgba(0,0,0,.2);
}
.dayblock.is-sel{border-color:var(--gold);background:rgba(245,196,69,.1)}
.dayblock__h{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:8px}
.dayblock__h span:first-child{font-weight:800;font-size:14.5px}
.dayblock__tag{
  font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;
}
.dayblock__tag.ok{background:rgba(62,232,122,.16);color:#8bf5b3}
.dayblock__tag.no{background:rgba(255,45,149,.16);color:#ffb3d8}
.dayblock .slot{
  display:flex;align-items:center;gap:10px;padding:8px 4px;
  border:0;border-top:1px solid rgba(255,255,255,.07);cursor:pointer;
}
.dayblock .slot:first-of-type{border-top:0}
.dayblock .slot input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}
.dayblock .slot__x{color:#ff6fae;width:17px;text-align:center;flex-shrink:0}
.dayblock .slot__when{font-size:14px;font-weight:700}
.dayblock .slot__v{margin-left:auto;font-size:12px;color:var(--mute2)}
.dayblock .slot--no .slot__when{opacity:.55;text-decoration:line-through}

@media (max-width:860px){
  .inq__cols{grid-template-columns:1fr}
}

/* ── back-office forms: steps, not one long scroll ────────────
   A long form on an admin screen means filling something in, scrolling away, and
   forgetting what you put three fields up. Short steps that each fit a screen, a
   running summary that never leaves, and a Next that lands you at the top. */

.wiz__steps{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0;
}
.wiz__steps li{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13.5px;font-weight:800;color:var(--mute2);
  padding:9px 15px 9px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  transition:color .2s,border-color .2s,background .2s;
}
.wiz__steps li span{
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:rgba(255,255,255,.09);color:var(--mute);font-size:12px;flex-shrink:0;
}
.wiz__steps li:hover{color:var(--white);border-color:rgba(255,255,255,.28)}
.wiz__steps li.is-done{color:rgba(255,255,255,.8);border-color:rgba(62,232,122,.35)}
.wiz__steps li.is-done span{background:rgba(62,232,122,.2);color:#8bf5b3}
.wiz__steps li.is-on{
  color:#1a1206;border-color:var(--gold);
  background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dp));
}
.wiz__steps li.is-on span{background:rgba(0,0,0,.22);color:#1a1206}

/* form left, summary right — the summary is the whole point */
.wiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:20px;align-items:start}
.wiz__main{
  padding:24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.wizstep{display:none}
.wizstep.is-on{display:block}

.wiz__nav{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
}
.wiz__nav .msg{flex-basis:100%}

.wiz__side{position:sticky;top:88px}
.wizsum{
  padding:18px;border-radius:16px;
  border:1px solid rgba(245,196,69,.3);background:rgba(245,196,69,.06);
}
.wizsum__h{
  font-family:var(--disp);font-weight:400;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px;
}
.wizsum__r{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;
}
.wizsum__r:first-of-type{border-top:0}
.wizsum__r span{color:var(--mute2);flex-shrink:0}
.wizsum__r b{color:var(--white);text-align:right;overflow-wrap:anywhere}
.wizsum__list{margin:0;padding-left:17px;display:grid;gap:5px}
.wizsum__list li{font-size:13px;color:rgba(255,255,255,.86)}
.wizsum__none{margin:0;font-size:13px;color:var(--mute2)}

@media (max-width:900px){
  /* the summary moves above the form rather than disappearing — on a phone it is the
     part you most want to glance at */
  .wiz{grid-template-columns:1fr}
  .wiz__side{position:static;order:-1}
}

/* ── the calendar workspace ───────────────────────────────────
   With forty-odd events a month nothing legible fits inside a day cell, so the grid is
   a NAVIGATOR — a count and coloured dots — and the detail lives in a panel beside it
   that scrolls on its own. Same shapes as the rest of the panel: chips are .mini-sized
   pills, cards are .row-like, the month grid reuses .cal__grid. */

.ws{display:grid;grid-template-columns:minmax(320px,1fr) minmax(340px,1.05fr);gap:20px;align-items:start}

.ws__cal{
  padding:18px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.ws__monthbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ws__month{
  font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;margin:0;flex:1 1 auto;text-align:center;
}
.ws__monthbar .mini{flex-shrink:0}

.ws__grid{gap:5px}
.wsday{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;
  min-height:52px;padding:6px 2px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid transparent;color:var(--white);
  font:inherit;transition:background .15s,border-color .15s;
}
.wsday:hover{background:rgba(255,255,255,.1)}
.wsday.is-blank{background:none;cursor:default;pointer-events:none}
.wsday.is-empty{opacity:.45}
.wsday.is-today{border-color:rgba(255,255,255,.45)}
.wsday.is-sel{background:rgba(245,196,69,.2);border-color:var(--gold)}
.wsday__n{font-size:13px;font-weight:700;line-height:1}
.wsday__dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;display:block}
.wsday__more{font-size:9.5px;font-weight:800;color:var(--mute2);line-height:1}

/* one colour vocabulary, used by dots, chips and card edges alike */
.k--paid,.dot.k--paid{background:#3ee87a}
.k--due,.dot.k--due{background:var(--gold)}
.k--late,.dot.k--late{background:#ff2d95}
.k--hold,.dot.k--hold{background:#22e7ff}
.k--ask,.dot.k--ask{background:#a78bfa}
.k--dead,.dot.k--dead{background:rgba(255,255,255,.32)}

.ws__key{display:flex;flex-wrap:wrap;gap:13px;align-items:center;font-size:11.5px;color:var(--mute2);margin:14px 0 0}

/* the panel: fixed height, scrolls on its own, tools stay put */
.ws__side{
  display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);overflow:hidden;max-height:78vh;
}
.ws__tools{padding:14px;border-bottom:1px solid rgba(255,255,255,.1);display:grid;gap:11px}
.ws__search{
  width:100%;padding:10px 13px;border-radius:11px;font-size:14px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16);color:var(--white);
}
.ws__search:focus{outline:none;border-color:var(--gold)}
.ws__chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--mute);
}
.chip:hover{color:var(--white);border-color:rgba(255,255,255,.35)}
.chip span{
  font-size:10.5px;padding:1px 6px;border-radius:999px;
  background:rgba(255,255,255,.1);color:var(--white);
}
.chip.is-on{background:var(--gold);border-color:var(--gold);color:#1a1206}
.chip.is-on span{background:rgba(0,0,0,.22);color:#1a1206}
/* a chip used as a status tag rather than a control */
.chip--tag{cursor:default;color:#0b0713;border:0;padding:3px 9px;font-size:10.5px}
.chip--tag:hover{color:#0b0713}
.chip--tag.k--dead{color:var(--white)}

.ws__list{overflow-y:auto;padding:14px;flex:1 1 auto;min-height:220px}
.ws__head{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  margin:0 0 12px;font-size:14.5px;
}
.ws__hint{color:var(--mute2);font-size:12.5px}
.ws__mh{
  font-family:var(--disp);font-weight:400;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin:18px 0 9px;
  padding-bottom:5px;border-bottom:1px solid rgba(245,196,69,.25);
}
.ws__mh:first-child{margin-top:0}
.ws__foot{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:13px 14px;border-top:1px solid rgba(255,255,255,.1);
}

/* one event */
.evt{display:flex;gap:0;border-radius:13px;overflow:hidden;margin-bottom:9px;background:rgba(0,0,0,.22)}
.evt.is-past{opacity:.5}
.evt__bar{width:4px;flex-shrink:0}
.evt__body{padding:11px 13px;min-width:0;flex:1 1 auto}
.evt__top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:5px}
.evt__name{font-size:15px}
.evt__via{font-size:11.5px;color:var(--mute2)}
.evt__line{margin:2px 0;font-size:13.4px;color:var(--mute);overflow-wrap:anywhere}
.evt__money{color:rgba(255,255,255,.9);font-weight:700}
.evt__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

@media (max-width:1000px){
  .ws{grid-template-columns:1fr}
  .ws__side{max-height:none}
}

/* ── the planner ──────────────────────────────────────────────
   Sits above the requests because it is the thing to read first: what to offer so the
   most people get booked. Gold border because it is advice, not a control. */

.planner{margin-bottom:20px}
.planner__in{
  padding:18px;border-radius:16px;
  border:1px solid rgba(245,196,69,.4);background:rgba(245,196,69,.07);
}
.planner__in--calm{
  border-color:rgba(62,232,122,.35);background:rgba(62,232,122,.07);
  font-size:14.5px;color:rgba(255,255,255,.9);
}
.planner__in--calm b{color:#8bf5b3}

.planner__head{display:flex;flex-wrap:wrap;gap:11px;align-items:baseline;margin-bottom:10px}
.planner__h{
  font-family:var(--disp);font-weight:400;font-size:18px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold);margin:0;
}
.planner__h4{
  font-family:var(--disp);font-weight:400;font-size:13.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#ffb3d8;margin:16px 0 8px;
}
.planner__sum{font-size:13.5px;color:rgba(255,255,255,.88);font-weight:700}
.planner__warn{font-size:11.5px;color:var(--mute2)}
.planner__why{font-size:13px;color:var(--mute);margin:0 0 12px;line-height:1.6}
.planner__note{font-size:12.5px;color:var(--mute2);margin:12px 0 0}

.plan__list{display:grid;gap:7px}
.plan__row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%;
  padding:10px 13px;border-radius:11px;cursor:pointer;text-align:left;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:inherit;font:inherit;
}
.plan__row:hover{border-color:var(--gold);background:rgba(0,0,0,.4)}
.plan__row--bad{border-color:rgba(255,45,149,.35)}
.plan__row--bad:hover{border-color:var(--magenta)}
.plan__who{font-weight:800;font-size:14.5px;min-width:130px}
.plan__slot{font-size:13.5px;color:var(--mute);flex:1 1 auto}
.plan__tag{
  font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--mute);
}
.plan__tag.is-first{background:rgba(62,232,122,.18);color:#8bf5b3}

/* capacity settings: the plain-words line matters more than the two inputs */
.capnote{
  margin:6px 0 16px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(245,196,69,.32);background:rgba(245,196,69,.07);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.9);
}
.capnote b{color:var(--gold-lt)}

.planner__h4--warn{color:var(--gold)}
.plan__row--tight{border-color:rgba(245,196,69,.4);cursor:default}
.plan__row--tight:hover{border-color:rgba(245,196,69,.4);background:rgba(0,0,0,.25)}

/* ── the package builder ──────────────────────────────────────
   Picking a tier is picking hours, so the tier cards say the hours out loud rather than
   hiding them in a field underneath. --tier carries each rung's accent through. */

.tierpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tiercard{
  --tier:var(--gold);
  display:grid;gap:4px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  padding:14px 15px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  transition:border-color .18s,background .18s,transform .18s;
}
.tiercard:hover{border-color:var(--tier);transform:translateY(-2px)}
.tiercard.is-on{
  border-color:var(--tier);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 1px var(--tier),0 10px 30px rgba(0,0,0,.35);
}
.tiercard__n{
  font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tier);
}
.tiercard__h{font-size:13px;font-weight:800;color:var(--white)}
.tiercard__b{font-size:12.5px;color:var(--mute2);line-height:1.45}

/* tick a feature rather than retyping it */
.featpick{display:flex;flex-wrap:wrap;gap:7px}
.feat{
  cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--mute);
}
.feat:hover{color:var(--white);border-color:rgba(255,255,255,.35)}
.feat.is-on{background:rgba(62,232,122,.16);border-color:rgba(62,232,122,.5);color:#8bf5b3}

/* the preview is the real card, not an impression of it */
.pkgprev{display:grid;gap:12px;justify-items:start}
.pkgprev .pkgcard{max-width:340px;pointer-events:none}
.pkgprev__note{font-size:12.5px;color:var(--mute2);margin:0}

/* ── saying what a thing is, and what to do about it ──────────
   A colour and a count do not tell you what a filter means. This line does, in two
   parts: what these events ARE, and what you are meant to do about them. */
.ws__explain{
  margin:0;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.22);
  font-size:12.8px;line-height:1.55;display:grid;gap:3px;
}
.ws__explain b{color:rgba(255,255,255,.92);font-weight:700}
.ws__explain span{color:var(--mute2)}
.ws__explain:empty{display:none}

/* the one sentence on each event that says what happens next */
.evt__next{
  margin:8px 0 0;padding:8px 11px;border-radius:9px;font-size:13.2px;line-height:1.5;
  border-left:3px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.86);
}
.evt__next.is-warn{border-left-color:var(--gold);background:rgba(245,196,69,.1);color:var(--gold-lt)}
.evt__next.is-dead{border-left-color:rgba(255,255,255,.18);color:var(--mute2)}
.evt__acts{margin-top:10px}
.evt .msg{margin-top:8px}

/* ── status tags: colour has to WIN ───────────────────────────
   .chip is declared after the colour classes and at the same specificity, so its dark
   background was overriding every one of them — leaving near-black text on a dark chip,
   which is invisible. These are more specific on purpose. Do not "simplify" them back
   into single-class rules. */
.chip.chip--tag.k--paid{background:#3ee87a;color:#06210f}
.chip.chip--tag.k--due {background:#f5c445;color:#241a03}
.chip.chip--tag.k--late{background:#ff2d95;color:#2b0417}
.chip.chip--tag.k--hold{background:#22e7ff;color:#02222a}
.chip.chip--tag.k--ask {background:#a78bfa;color:#150a2e}
.chip.chip--tag.k--dead{background:rgba(255,255,255,.26);color:#fff}

/* ── week and day: the shape of a day ─────────────────────────
   An hour axis down the side, one column per day, every booking drawn to scale with its
   turnaround shaded on after it. Two events thirty minutes apart look thirty minutes
   apart, and a turnaround that swallows the gap is visible rather than asserted. */

.seg--view{margin:14px 0 12px}

.tl{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.tl__axis{position:relative;flex:0 0 52px;margin-top:46px}
.tl__h{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,255,255,.1)}
.tl__h span{
  position:absolute;top:-8px;left:0;font-size:10.5px;font-weight:700;color:var(--mute2);
  background:var(--ink);padding-right:5px;
}
.tl__cols{display:flex;flex:1 1 auto;min-width:0}
.tl__col{flex:1 1 0;min-width:104px;border-left:1px solid rgba(255,255,255,.08)}
.tl--day .tl__col{min-width:0}
.tl__col.is-today{background:rgba(255,255,255,.03)}
.tl__col.is-sel{background:rgba(245,196,69,.07)}

.tl__head{
  display:flex;align-items:baseline;gap:6px;justify-content:center;width:100%;
  height:46px;padding:0 6px;cursor:pointer;font:inherit;color:inherit;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);
}
.tl__head:hover{background:rgba(255,255,255,.06)}
.tl__dow{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--mute2)}
.tl__dnum{font-size:16px;font-weight:800}
.tl__dn{
  font-size:10px;font-weight:900;padding:1px 6px;border-radius:999px;
  background:rgba(245,196,69,.2);color:var(--gold-lt);
}
.tl__col.is-today .tl__dnum{color:var(--gold)}

/* the hour grid lines come from the axis; the body just holds blocks */
.tl__body{position:relative;background:
  repeating-linear-gradient(to bottom,
    rgba(255,255,255,.055) 0 1px,
    transparent 1px calc(60px * 0.85))}

.tl__ev{
  position:absolute;overflow:hidden;cursor:pointer;text-align:left;
  padding:4px 6px;border-radius:7px;border:0;font:inherit;
  color:#0b0713;box-shadow:0 2px 10px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:1px;line-height:1.2;
}
.tl__ev:hover{filter:brightness(1.12);z-index:3}
.tl__ev.is-past{opacity:.5}
.tl__ev.k--dead{color:#fff}
.tl__ev-t{font-size:10px;font-weight:900;opacity:.8}
.tl__ev-n{font-size:11.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the shaded tail: this booth cannot start again inside it */
.tl__turn{
  position:absolute;border-radius:0 0 7px 7px;pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.13) 0 5px, rgba(255,255,255,.03) 5px 10px);
  border-bottom:1px dashed rgba(255,255,255,.22);
}
.tl__now{position:absolute;left:0;right:0;height:2px;background:var(--magenta);z-index:2}
.tl__now::before{
  content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--magenta);
}
.tl__key{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mute2);margin:12px 0 0}
.tl__keyturn{
  display:inline-block;width:22px;height:12px;border-radius:3px;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.16) 0 5px, rgba(255,255,255,.04) 5px 10px);
}

/* ── the way back ─────────────────────────────────────────────
   Shown only when one tab sent you to another. Gold so it reads as "you are mid-task",
   not as chrome that is always there. */
.backbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:18px 0 -6px;padding:11px 15px;border-radius:12px;
  border:1px solid rgba(245,196,69,.42);background:rgba(245,196,69,.09);
}
.backbar span{font-size:13px;color:var(--mute)}

/* ── your packages, laid out as the ladder ────────────────────
   Not a list of rows: each one shows what it actually IS — tier, hours, contents — and
   carries every control that applies to it, so nothing has to be hunted for. */

.pkglist__h{margin-top:34px}
.pkglist{display:grid;gap:14px}

.pkgrow{
  --tier:var(--gold);
  padding:16px 18px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  border-left:4px solid var(--tier);
}
.pkgrow.is-off{opacity:.6}

.pkgrow__head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:8px}
.pkgrow__tier{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;background:var(--tier);color:#0b0713;
}
.pkgrow__name{font-size:17px}
.pkgrow__hrs{
  font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:.04em;color:var(--tier);
}
.pkgrow__price{font-size:13px;font-weight:800;color:var(--mute)}
.pkgrow__line{margin:3px 0;font-size:13.6px;color:var(--mute);line-height:1.55}

.pkgrow__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
  margin:12px 0;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pkgrow__h{
  font-family:var(--disp);font-weight:400;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin:0 0 7px;
}
.pkgrow__list{margin:0;padding-left:17px;display:grid;gap:4px;list-style:disc}
.pkgrow__list li{font-size:13px;color:var(--mute);line-height:1.5}
.pkgrow__none{margin:0;font-size:13px;color:var(--mute2)}

.pkgrow .row__acts{margin-top:12px;align-items:center}
.pkgrow .iconbtn[disabled]{opacity:.3;cursor:default}
.pkgrow .iconbtn[disabled]:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--mute)}