/* ============================================================
   ADMIN V2 — the dashboard shell, opted into per client.
   ------------------------------------------------------------
   Ships with every build and does NOTHING unless build.mjs put
   class="v2" on <body>, which it does when brand.js says
   adminV2: true. Every rule below is scoped to body.v2, so a
   client who has not opted in is byte-for-byte unchanged.

   WHY THIS FILE LOADS AFTER theme.css.
   The v1 dashboard needed a wall of #clientsTab overrides
   because a client theme is shared with her public page and
   several of them restyle bare `button` and `.sub`. Loading
   last means the shell's structure wins on source order and
   those defences stop being necessary. Colour still comes from
   her tokens — every value here is a var() — so a dark theme
   like Vane's paints this correctly with nothing added.

   TYPE IS NOT HERS. --font-ui is a system stack, on purpose:
   a script face at 12px is what made handles unreadable. Her
   script font still carries the wordmark, and nothing else.
   A theme can override --font-ui if a client ever needs it.
   ============================================================ */

:root{
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  --v2-rail: 216px;
  --v2-bar: 84px;
}

/* ---- hide the v1 chrome ------------------------------------ */
body.v2 .views,
body.v2 .rail,
body.v2 .wrap > h1,
body.v2 .wrap > .sub,
body.v2 .wrap > .crown{ display:none !important; }

/* The workspace grid collapses: the rail it was making room for
   is now fixed to the edge of the screen.

   NO !important HERE, and that is load-bearing. .hidden is
   display:none!important at specificity (0,1,0); this selector is
   (0,2,1), so with !important on both sides THIS one won and
   #siteView stayed on screen behind Today — the old Upcoming card
   showing under the new one. Without it, it still outranks core's
   plain .workspace rules and loses to .hidden, which is exactly
   the order we want. */
body.v2 .workspace{ display:block; }
body.v2 #panes{ max-height:none !important; overflow:visible !important; padding-right:0 !important; }

body.v2{ padding-bottom:var(--v2-bar); min-height:100dvh; }
/* Belt and braces after the header bug below: nothing in this shell
   is allowed to make the page slide sideways. A phone that can pan
   7px horizontally eats taps as the start of a swipe, which is what
   "it needs two taps" actually was. */
body.v2{ overflow-x:hidden; }
body.v2 .wrap{ padding-top:0; padding-bottom:1.2rem; }
body.v2 #dash, body.v2 #todayPane, body.v2 #setupPane,
body.v2 #v2Bar, body.v2 #v2Nav, body.v2 #calView{ font-family:var(--font-ui); }

/* ---- header ------------------------------------------------ */
#v2Bar{ display:none; }
/* FULL-BLEED, AND THE NUMBERS HAVE TO MATCH .wrap's PADDING.
   These negative margins pull the bar out to the screen edge. core
   sets .wrap padding to 1.2rem — but 0.75rem under 560px, so on a
   phone this hung 7px off each side, the document scrolled
   sideways, and every tap started life as a possible horizontal
   swipe. If .wrap's padding ever changes, change both of these. */
body.v2 #v2Bar{
  display:flex; align-items:center; gap:.7rem;
  position:sticky; top:0; z-index:20;
  margin:0 -1.2rem 1.1rem; padding:.6rem 1.2rem;
  background:var(--white); border-bottom:1px solid var(--blush-2);
}
@media(max-width:559px){
  body.v2 #v2Bar{ margin:0 -.75rem 1rem; padding:.6rem .75rem; }
}
body.v2 #v2Bar .crown{ max-height:36px; width:auto; max-width:56vw; margin:0; }
body.v2 #v2Name{ font-family:var(--font-script); font-size:1.5rem; line-height:1.1;
  color:var(--plum); }
body.v2 #v2BarR{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
body.v2 .v2-ico{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid var(--blush-2); background:transparent; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; position:relative; }
body.v2 .v2-ico svg{ width:18px; height:18px; }
body.v2 .v2-ico .pip{ position:absolute; top:1px; right:2px; width:9px; height:9px;
  border-radius:50%; background:var(--ribbon); border:2px solid var(--white); }

/* ---- bottom bar on a phone, left rail on a desktop --------- */
#v2Nav{ display:none; }
body.v2 #v2Nav{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--white); border-top:1px solid var(--blush-2);
  padding:.45rem .3rem calc(.55rem + env(safe-area-inset-bottom,0px));
}
body.v2 .v2-nav{
  background:transparent; border:0; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.5rem .2rem; color:var(--ink-soft);
  font-size:.7rem; font-weight:500; letter-spacing:.01em; text-transform:none;
  line-height:1.2; min-height:52px; }
body.v2 .v2-nav svg{ width:23px; height:23px; }
body.v2 .v2-nav.on{ color:var(--pink-dark); font-weight:700; }
body.v2 .v2-nav .n{ display:none; }
body.v2 .v2-nav.has .n{
  display:inline-block; margin-left:.25rem; font-size:.62rem; font-weight:700;
  background:var(--st-pend-bg,#ffe3a3); color:var(--st-pend-fg,#8a6d1a);
  border-radius:999px; padding:0 .35rem; }

@media(min-width:860px){
  body.v2{ padding-bottom:0; padding-left:var(--v2-rail); }
  body.v2 .wrap{ max-width:1040px; }
  body.v2 #v2Nav{
    grid-template-columns:1fr; grid-auto-rows:max-content; align-content:start;
    gap:.25rem; top:0; bottom:0; right:auto; width:var(--v2-rail);
    border-top:0; border-right:1px solid var(--blush-2); padding:1.3rem .7rem; }
  body.v2 .v2-nav{ flex-direction:row; justify-content:flex-start; gap:.7rem;
    padding:.65rem .8rem; font-size:.9rem; min-height:0; text-align:left; }
  body.v2 .v2-nav.on{ background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff); }
  body.v2 #v2Bar{ margin-left:-1.2rem; }
}

/* The toast lives at bottom:1.2rem, which on a phone is behind the
   tab bar. It has a higher z-index so it drew ON TOP of the nav
   rather than above it — a save confirmation covering Calendar and
   Clients for two and a half seconds. */
body.v2 #status{ bottom:calc(var(--v2-bar) + .6rem); }
@media(min-width:860px){ body.v2 #status{ bottom:1.2rem; } }

/* No scrolling the page behind an open modal. */
body.v2.modal-open{ overflow:hidden; }

/* ---- shared bits ------------------------------------------- */
body.v2 .v2-lbl{ font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:.2rem 0 .55rem; }
body.v2 .v2-card{ background:var(--white); border:1px solid var(--blush-2);
  border-radius:14px; }
body.v2 .v2-btn{ height:44px; padding:0 1rem; border-radius:10px; font-size:.9rem;
  font-weight:600; letter-spacing:0; text-transform:none;
  background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff);
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
body.v2 .v2-btn.g{ background:transparent; color:var(--ink);
  border:1.5px solid var(--blush-2); font-weight:500; }
body.v2 .v2-btn.x{ width:44px; padding:0; color:var(--btn-danger-fg,#c0392b); }
body.v2 .v2-btn svg{ width:17px; height:17px; }
body.v2 .v2-tag{ font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.15rem .45rem; border-radius:5px; }
body.v2 .v2-tag.pending{ background:var(--st-pend-bg,#ffe3a3); color:var(--st-pend-fg,#8a6d1a); }
body.v2 .v2-tag.confirmed{ background:var(--st-open-bg,#e9f5ee); color:var(--st-open-fg,#3f8b62); }

/* ---- TODAY ------------------------------------------------- */
body.v2 #todayPane .v2-day{ display:flex; align-items:baseline;
  justify-content:space-between; gap:.9rem; margin-bottom:1rem; }
body.v2 #t2Title{ font-size:1.65rem; font-weight:600; letter-spacing:-.02em;
  line-height:1.1; color:var(--plum); font-family:var(--font-ui); }
body.v2 #t2Date{ font-size:.82rem; color:var(--ink-soft); margin-top:.15rem; }
body.v2 #t2Money{ font-size:1.1rem; font-weight:600; color:var(--plum);
  font-variant-numeric:tabular-nums; display:block; text-align:right; }
body.v2 #t2Count{ font-size:.75rem; color:var(--ink-soft); display:block; text-align:right; }

body.v2 #t2Req{ border:1px solid var(--st-pend-fg,#8a6d1a); border-radius:14px;
  overflow:hidden; margin-bottom:1.1rem; background:var(--white); }
body.v2 #t2ReqH{ display:flex; align-items:center; gap:.5rem; padding:.65rem .9rem;
  background:var(--st-pend-bg,#ffe3a3); color:var(--st-pend-fg,#8a6d1a);
  font-size:.82rem; font-weight:700; }
body.v2 #t2ReqH i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
body.v2 .v2-req{ padding:.75rem .9rem; border-top:1px solid var(--blush-2); }
body.v2 .v2-req:first-child{ border-top:0; }
body.v2 .v2-req .who{ font-size:.92rem; font-weight:600; color:var(--ink); }
body.v2 .v2-req .what{ font-size:.82rem; color:var(--ink-soft); margin-top:.1rem; }
body.v2 .v2-reqopen{ display:flex; align-items:flex-start; gap:.7rem; width:100%;
  background:transparent; border:0; border-radius:0; padding:0; margin:0; color:var(--ink);
  font:inherit; text-align:left; letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-reqopen .txt{ flex:1; min-width:0; display:block; }
body.v2 .v2-reqopen .thumb{ flex:none; width:52px; height:52px; border-radius:10px;
  object-fit:cover; border:1px solid var(--blush-2); }
body.v2 .v2-reqopen > svg{ width:15px; height:15px; flex:none; color:var(--ink-soft);
  margin-top:.3rem; }
body.v2 .v2-req .who{ display:block; }
body.v2 .v2-req .what{ display:block; }
body.v2 .v2-req .what.note{ margin-top:.2rem; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
body.v2 .v2-req .acts{ display:flex; gap:.5rem; margin-top:.65rem; }
body.v2 .v2-req .acts .v2-btn{ flex:1; }
body.v2 .v2-req .acts .v2-btn.x{ flex:none; }

body.v2 .v2-appt{ display:flex; gap:.75rem; align-items:center;
  background:var(--white); border:1px solid var(--blush-2); border-radius:14px;
  padding:.75rem .9rem; margin-bottom:.5rem; width:100%; text-align:left;
  color:var(--ink); font:inherit; box-shadow:none; }
body.v2 .v2-appt.next{ flex-direction:column; align-items:stretch; gap:.75rem; }
body.v2 .v2-appt .when{ flex:none; width:52px; text-align:center; }
body.v2 .v2-appt .when b{ display:block; font-size:.98rem; font-weight:700;
  color:var(--plum); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
body.v2 .v2-appt .when span{ display:block; font-size:.62rem; font-weight:600;
  color:var(--ink-soft); }
body.v2 .v2-appt .bar{ width:1px; align-self:stretch; background:var(--blush-2); flex:none; }
body.v2 .v2-appt .who{ font-size:.95rem; font-weight:600; }
body.v2 .v2-appt .what{ font-size:.82rem; color:var(--ink-soft); margin-top:.1rem; }
body.v2 .v2-appt .thumb{ flex:none; width:52px; height:52px; border-radius:10px;
  object-fit:cover; border:1px solid var(--blush-2); }
body.v2 .v2-appt .row{ display:flex; gap:.75rem; align-items:center; }
body.v2 .v2-appt .acts{ display:flex; gap:.5rem; }
body.v2 .v2-appt .acts .v2-btn{ flex:1; height:40px; font-size:.85rem; }
body.v2 .v2-empty{ color:var(--ink-soft); font-size:.9rem; padding:1.2rem 0; }

/* ---- SETUP ------------------------------------------------- */
body.v2 #setupPane h2{ font-size:1.65rem; font-weight:600; letter-spacing:-.02em;
  color:var(--plum); font-family:var(--font-ui); margin-bottom:1.1rem; }
body.v2 .v2-group{ margin-bottom:1.3rem; }
body.v2 .v2-list{ background:var(--white); border:1px solid var(--blush-2);
  border-radius:14px; overflow:hidden; }
body.v2 .v2-row{ display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.85rem .9rem; background:transparent; border:0; border-top:1px solid var(--blush-2);
  border-radius:0; color:var(--ink); font:inherit; font-size:.92rem; text-align:left;
  letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-row:first-child{ border-top:0; }
body.v2 .v2-row .k{ flex:1; font-weight:500; min-width:0; }
body.v2 .v2-row .val{ font-size:.82rem; color:var(--ink-soft); flex:none;
  max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v2 .v2-row svg{ width:15px; height:15px; flex:none; color:var(--blush-2); }
body.v2 #v2Acct{ display:flex; align-items:center; justify-content:space-between;
  gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }

/* ---- the back bar on a Setup sub-page ---------------------- */
#v2Sub{ display:none; }
body.v2 #v2Sub.on{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
body.v2 #v2SubT{ font-size:1.05rem; font-weight:600; color:var(--plum); }

/* ---- CALENDAR ---------------------------------------------- */
/* The v1 month grid retires whole rather than in pieces. Hiding
   its heading and grid separately broke the moment #v2Cal became
   the first child of #calView and :first-child stopped matching
   the card — the old "Bookings Calendar" heading came back under
   the new one. An id cannot drift like that. renderCal() still
   writes into #calGrid in here and nobody sees it, which is what
   keeps the v1 shell working for everyone else. */
body.v2 #calCard{ display:none; }
body.v2 #calView > .card{ background:transparent; border:0; box-shadow:none;
  padding:0; margin-bottom:1.4rem; }

body.v2 #v2Cal{ display:block; }
body.v2 .v2-seg{ display:inline-flex; background:var(--blush); border-radius:10px;
  padding:3px; gap:2px; }
body.v2 .v2-seg button{ padding:.4rem .85rem; border-radius:8px; font-size:.8rem;
  font-weight:600; letter-spacing:0; text-transform:none;
  background:transparent; color:var(--ink-soft); }
body.v2 .v2-seg button.on{ background:var(--white); color:var(--ink); }
body.v2 .v2-nav-row{ display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin:.9rem 0 .8rem; }
body.v2 .v2-nav-row b{ font-size:1.05rem; font-weight:600; color:var(--plum); }
body.v2 .v2-arrow{ width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--white); border:1px solid var(--blush-2); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center; }
body.v2 .v2-arrow svg{ width:15px; height:15px; }

body.v2 .v2-dow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px; margin-bottom:5px; }
body.v2 .v2-dow span{ text-align:center; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; color:var(--ink-soft); }
body.v2 .v2-month{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
body.v2 .v2-cell{ min-height:62px; border-radius:10px; padding:.4rem .1rem 0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:transparent; border:1px solid transparent; color:var(--ink);
  font:inherit; letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-cell.work{ background:var(--white); border-color:var(--blush-2); }
body.v2 .v2-cell.off{ background:transparent; border-color:transparent; }
body.v2 .v2-cell.shut{ background:var(--blush); border:1px dashed var(--blush-2); }
body.v2 .v2-cell.sel{ border:2px solid var(--sel-bg,var(--ribbon)); padding-top:calc(.4rem - 1px); }
body.v2 .v2-cell .d{ font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums;
  line-height:1; }
body.v2 .v2-cell.off .d,
body.v2 .v2-cell.spill .d{ color:var(--ink-soft); opacity:.55; }
body.v2 .v2-cell.shut .d{ color:var(--ink-soft); text-decoration:line-through; }
body.v2 .v2-cell.now .d{ background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; margin-top:-2px; opacity:1; }
body.v2 .v2-dots{ display:flex; gap:3px; height:6px; align-items:center; }
body.v2 .v2-dots i{ width:5px; height:5px; border-radius:50%; display:block; }
body.v2 .v2-dots i.b{ background:var(--st-conf-bg,var(--ribbon)); }
body.v2 .v2-dots i.p{ background:var(--st-pend-fg,#c99a1e); }
body.v2 .v2-more{ font-size:.55rem; color:var(--ink-soft); line-height:1; }

body.v2 .v2-week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
body.v2 .v2-wcell{ border-radius:11px; padding:.45rem .1rem .5rem;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:transparent; border:0; color:var(--ink); font:inherit;
  letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-wcell .w{ font-size:.62rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-soft); }
body.v2 .v2-wcell .d{ font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums; }
body.v2 .v2-wcell.off .w, body.v2 .v2-wcell.off .d{ color:var(--ink-soft); opacity:.55; }
body.v2 .v2-wcell.sel{ background:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-wcell.sel .w, body.v2 .v2-wcell.sel .d{ color:var(--on-accent,#fff); opacity:1; }
body.v2 .v2-wcell.sel .v2-dots i{ background:var(--on-accent,#fff); }
body.v2 .v2-wcell.sel .v2-dots i.p{ background:var(--st-pend-bg,#ffe3a3); }

body.v2 .v2-legend{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  margin-top:.9rem; font-size:.7rem; color:var(--ink-soft); }
body.v2 .v2-legend i{ width:7px; height:7px; border-radius:50%; display:inline-block;
  margin-right:.3rem; vertical-align:1px; }
body.v2 .v2-legend i.sq{ width:11px; height:11px; border-radius:3px; }
body.v2 .v2-legend i.b{ background:var(--st-conf-bg,var(--ribbon)); }
body.v2 .v2-legend i.p{ background:var(--st-pend-fg,#c99a1e); }

body.v2 #v2Sheet{ margin-top:1.1rem; }
body.v2 #v2SheetH{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.7rem; margin-bottom:.6rem; }
body.v2 #v2SheetH b{ font-size:1rem; font-weight:600; color:var(--plum); }
body.v2 #v2SheetH span{ font-size:.78rem; color:var(--ink-soft); }
body.v2 .v2-slot{ display:flex; align-items:center; gap:.7rem; width:100%;
  background:var(--white); border:1px solid var(--blush-2); border-radius:12px;
  padding:.7rem .85rem; margin-bottom:.45rem; text-align:left; color:var(--ink);
  font:inherit; letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-slot .t{ flex:none; width:64px; font-size:.8rem; font-weight:700;
  font-variant-numeric:tabular-nums; }
body.v2 .v2-slot .m{ flex:1; min-width:0; font-size:.85rem; }
body.v2 .v2-slot .m small{ display:block; font-size:.76rem; color:var(--ink-soft); }
body.v2 .v2-slot.open{ border-style:dashed; }
body.v2 .v2-slot.open .t,body.v2 .v2-slot.open .m{ color:var(--ink-soft); font-weight:600; }
body.v2 .v2-slot.blocked{ background:var(--blush); }
body.v2 .v2-slot.blocked .t{ text-decoration:line-through; color:var(--ink-soft); }
body.v2 .v2-slot.blocked .m{ color:var(--ink-soft); }
body.v2 .v2-slot .go{ flex:none; font-size:.72rem; font-weight:700; color:var(--ink-soft); }

/* ============================================================
   THE OLD CARDS, WEARING THE NEW SHELL
   ------------------------------------------------------------
   Setup's sub-pages and Clients reuse the v1 panes wholesale —
   that is the point, there is one Services editor and one save
   path, not two. But dropping into them from the new shell landed
   you in a visibly different app: display-serif headings, pills
   in lowercase tracked caps, a heavier card. Same components,
   restyled to match, and scoped so the v1 dashboard is untouched.
   ============================================================ */
body.v2 #panes .card,
body.v2 #storeView .card,
body.v2 #schedCard{
  background:var(--white); border:1px solid var(--blush-2); border-radius:14px;
  box-shadow:none; padding:1.1rem; margin-bottom:1rem;
}
body.v2 #panes .card h2,
body.v2 #storeView .card h2,
body.v2 #schedCard h2{
  font-family:var(--font-ui); font-size:1.05rem; font-weight:600;
  letter-spacing:-.01em; color:var(--plum); text-transform:none;
  margin-bottom:.7rem;
}
body.v2 #panes label,
body.v2 #storeView label,
body.v2 #schedCard label{
  font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; color:var(--ink-soft);
}
body.v2 #panes input, body.v2 #panes textarea, body.v2 #panes select,
body.v2 #storeView input, body.v2 #storeView textarea, body.v2 #storeView select,
body.v2 #schedCard input, body.v2 #schedCard select{
  font-family:var(--font-ui); font-size:.92rem; border-radius:10px;
  border-width:1px;
}
body.v2 #panes .muted, body.v2 #storeView .muted, body.v2 #schedCard .muted,
body.v2 #panes .notice{ font-family:var(--font-ui); }
body.v2 #panes .notice{ border-radius:12px; }

/* buttons: same colours, this shell's shape and case */
body.v2 #panes .btn,
body.v2 #storeView .btn,
body.v2 #calView .btn,
body.v2 #v2Sub .btn{
  font-family:var(--font-ui); border-radius:10px; text-transform:none;
  letter-spacing:0; font-weight:600; font-size:.88rem; padding:.72rem 1.15rem;
}
body.v2 #panes .btn.small,
body.v2 #storeView .btn.small,
body.v2 #calView .btn.small,
body.v2 #v2Sub .btn.small{ padding:.48rem .85rem; font-size:.78rem; }
body.v2 #panes .btn.danger,
body.v2 #storeView .btn.danger{ padding:.48rem .8rem; font-size:.78rem; }
body.v2 #panes .btn.ghost,
body.v2 #storeView .btn.ghost,
body.v2 #calView .btn.ghost,
body.v2 #v2Sub .btn.ghost{ border-width:1.5px; }

/* service groups and rows */
body.v2 #svcTab .svc-cat > summary{ font-family:var(--font-ui); font-size:.72rem;
  letter-spacing:.1em; font-weight:700; }
body.v2 #svcTab .svc-cat, body.v2 #svcTab .svc-row{ border-radius:12px; }

/* clients: these need to outrank core's own #clientsTab defences,
   which pin the body font to keep a theme's script face out. Same
   intent, one step further — the shell's UI face, not her page's. */
body.v2 #clientsTab .cl-row b,
body.v2 #clientsTab .cl-row .sub,
body.v2 #clientsTab #clName,
body.v2 #clientsTab #clMeta,
body.v2 #clientsTab .cl-visit b,
body.v2 #clientsTab .cl-visit .sub,
body.v2 #clientsTab .cl-chip{ font-family:var(--font-ui); }
body.v2 #clientsTab #clName{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
body.v2 #clientsTab .cl-chip{ border-radius:9px; font-size:.75rem; }

/* the modal is shared with the v1 shell, so only the type moves */
body.v2 #modal{ border-radius:16px; }
body.v2 #modal h3{ font-family:var(--font-ui); font-size:1.1rem; font-weight:600;
  letter-spacing:-.01em; }
body.v2 #modal .row, body.v2 #modal .row b{ font-family:var(--font-ui); }
body.v2 #modal .btn{ font-family:var(--font-ui); border-radius:10px;
  text-transform:none; letter-spacing:0; font-weight:600; font-size:.86rem;
  padding:.6rem 1rem; }

/* ---- SETUP CHIPS ------------------------------------------- */
body.v2 #setupChips{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem; }
/* Sized so the five usual chips make one line at 390px, and a
   client who also sells sets wraps to two rather than hiding the
   sixth behind a horizontal scroll — the point of this layout is
   that nothing is hidden. */
body.v2 .v2-chip{
  padding:.45rem .62rem; border-radius:999px; font-size:.79rem; font-weight:600;
  letter-spacing:0; text-transform:none; white-space:nowrap;
  background:var(--white); border:1.5px solid var(--blush-2); color:var(--ink-soft);
  box-shadow:none; }
body.v2 .v2-chip.on{ background:var(--sel-bg,var(--ribbon));
  border-color:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff); }
/* a card switched off by the My page editor. !important because the
   cards it hides carry inline display from the per-client toggles. */
body.v2 .card.v2-off{ display:none !important; }

/* ---- MY PAGE ----------------------------------------------- */
body.v2 #myPage{ padding-bottom:.5rem; }
body.v2 .mp-blk{
  position:relative; background:var(--white); border:1px solid var(--blush-2);
  border-radius:14px; padding:.95rem 1rem 1rem; margin-bottom:.7rem; }
body.v2 .mp-blk.mp-empty{ border-style:dashed; }
body.v2 .mp-edit{
  position:absolute; top:.6rem; right:.6rem; display:inline-flex; align-items:center;
  gap:.3rem; background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff);
  border-radius:999px; padding:.28rem .65rem; font-size:.7rem; font-weight:700;
  letter-spacing:.02em; }
body.v2 .mp-edit svg{ width:12px; height:12px; }
body.v2 .mp-tag{ font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem;
  padding-right:70px; }
body.v2 .mp-none{ font-size:.85rem; color:var(--ink-soft); font-style:italic; }
body.v2 .mp-ann{ background:var(--blush-2); color:var(--pink-dark);
  border-radius:10px; padding:.55rem .7rem; font-size:.82rem; font-weight:600; }
body.v2 .mp-name{ font-family:var(--font-script); font-size:1.7rem; line-height:1.15;
  color:var(--plum); }
body.v2 .mp-body{ font-size:.85rem; color:var(--ink); line-height:1.5; margin-top:.3rem; }
body.v2 .mp-svc{ display:flex; justify-content:space-between; gap:.7rem;
  font-size:.85rem; padding:.2rem 0; }
body.v2 .mp-svc b{ font-weight:600; font-variant-numeric:tabular-nums; }
body.v2 .mp-more{ font-size:.78rem; color:var(--ink-soft); margin-top:.35rem; }
body.v2 .mp-deal{ display:flex; flex-direction:column; padding:.2rem 0; }
body.v2 .mp-deal b{ font-size:.9rem; font-weight:600; }
body.v2 .mp-deal span{ font-size:.78rem; color:var(--ink-soft); }
body.v2 .mp-shots{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
body.v2 .mp-shots img{ width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; border:1px solid var(--blush-2); display:block; }
body.v2 .mp-slot{ display:block; width:100%; aspect-ratio:1/1; border-radius:10px;
  border:1.5px dashed var(--blush-2); background:var(--blush); }

/* ---- folded help ------------------------------------------- */
body.v2 .v2-help{
  display:inline-flex; align-items:center; gap:.45rem; width:auto;
  background:transparent; border:1.5px solid var(--blush-2); color:var(--ink-soft);
  border-radius:999px; padding:.38rem .85rem; margin:0 0 .9rem;
  font-family:var(--font-ui); font-size:.75rem; font-weight:600;
  letter-spacing:0; text-transform:none; box-shadow:none; }
body.v2 .v2-help::after{
  content:''; width:6px; height:6px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .18s; }
body.v2 .v2-help.on::after{ transform:rotate(-135deg) translate(-2px,-2px); }
body.v2 .v2-helpbox{ display:none; }
body.v2 .v2-helpbox.on{ display:block; margin-bottom:.9rem; }
body.v2 .v2-helpbox p{ margin-bottom:.7rem; }

/* ---- FREE -------------------------------------------------- */
body.v2 #v2FreeNote{ margin:.2rem 0 1rem; }
body.v2 .v2-free-day{ background:var(--white); border:1px solid var(--blush-2);
  border-radius:14px; padding:.85rem 1rem .95rem; margin-bottom:.6rem; }
body.v2 .v2-free-nm{ font-size:.95rem; font-weight:600; color:var(--plum);
  margin-bottom:.6rem; }
body.v2 .v2-free-nm span{ font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--st-open-bg,#e9f5ee);
  color:var(--st-open-fg,#3f8b62); border-radius:5px; padding:.15rem .45rem;
  margin-left:.35rem; vertical-align:1px; }
body.v2 .v2-free-times{ display:flex; gap:.4rem; flex-wrap:wrap; }
body.v2 .v2-free-times span{ border:1px solid var(--blush-2); border-radius:9px;
  padding:.45rem .7rem; font-size:.85rem; font-weight:600;
  font-variant-numeric:tabular-nums; }
/* the button follows her down the list rather than sitting under it */
body.v2 #v2FreeBar{ position:sticky; bottom:0; padding:.9rem 0 .2rem;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0,var(--cream) 22%); }
body.v2 #v2FreeBar .v2-btn{ width:100%; height:48px; font-size:.95rem; }
body.v2 #v2CopyPrev{ margin-top:.7rem; font-size:.76rem; line-height:1.5;
  white-space:pre-line; text-align:left; background:var(--blush);
  border-radius:10px; padding:.6rem .75rem; }
@media(min-width:860px){
  body.v2 #v2FreeBar{ position:static; background:none; }
  body.v2 #v2FreeBar .v2-btn{ width:auto; padding:0 1.6rem; }
}

/* ---- set the whole week ------------------------------------ */
body.v2 #v2WeekSet{ margin-top:1rem; }
body.v2 .v2-ws-lbl{ font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
body.v2 .v2-ws-lbl span{ letter-spacing:.02em; text-transform:none;
  font-weight:600; color:var(--st-pend-fg,#8a6d1a); }
body.v2 .v2-ws-btns{ display:flex; gap:.35rem; flex-wrap:wrap; }

/* Hours sits inside the calendar's own card now, and the segment
   above it already says "Hours" — the card heading was saying it
   twice. */
body.v2 #schedCard{ margin-top:1rem; }
body.v2 #schedCard > h2{ display:none; }
body.v2 #slotTimes > .v2-off{ display:none !important; }
body.v2 .v2-more-sched{ margin:.2rem 0 .6rem; }

/* ============================================================
   DASHBOARD — the landing page
   ============================================================ */
body.v2 #dashHead{ margin-bottom:1.1rem; }
body.v2 #dashHi{ font-size:1.55rem; font-weight:600; letter-spacing:-.025em;
  line-height:1.15; color:var(--plum); }
body.v2 #dashSub{ font-size:.85rem; color:var(--ink-soft); margin-top:.25rem; }

body.v2 #dashStats{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
  margin-bottom:1.2rem; }
body.v2 .v2-stat{ background:var(--white); border:1px solid var(--blush-2);
  border-radius:16px; padding:.85rem .9rem .9rem; min-width:0; }
body.v2 .v2-stat-top{ display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; margin-bottom:.45rem; }
body.v2 .v2-stat-l{ font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); }
body.v2 .v2-stat-top svg{ width:15px; height:15px; flex:none; color:var(--ink-soft);
  opacity:.75; }
body.v2 .v2-stat-v{ font-size:1.5rem; font-weight:700; letter-spacing:-.03em;
  line-height:1.05; color:var(--plum); font-variant-numeric:tabular-nums; }
body.v2 .v2-stat-s{ font-size:.75rem; color:var(--ink-soft); margin-top:.2rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

body.v2 .v2-sec{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.8rem; margin:.2rem 0 .6rem; }
body.v2 .v2-link{ background:transparent; border:0; padding:0; box-shadow:none;
  font-family:var(--font-ui); font-size:.8rem; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--pink-dark); }

/* ---- one booking row, used by the dashboard and the record ---- */
body.v2 .v2-bk{ display:flex; align-items:center; gap:.7rem; width:100%;
  background:var(--white); border:1px solid var(--blush-2); border-radius:14px;
  padding:.7rem .85rem; margin-bottom:.5rem; text-align:left; color:var(--ink);
  font:inherit; letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-face{ flex:none; border-radius:12px; object-fit:cover;
  border:1px solid var(--blush-2); display:block; }
body.v2 .v2-initial{ display:flex; align-items:center; justify-content:center;
  background:var(--blush); color:var(--pink-dark); font-size:1rem; font-weight:700; }
body.v2 .v2-bk-m{ flex:1; min-width:0; display:block; }
body.v2 .v2-bk-n{ display:block; font-size:.95rem; font-weight:600; line-height:1.25; }
body.v2 .v2-bk-s{ display:block; font-size:.8rem; color:var(--ink-soft);
  margin-top:.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v2 .v2-bk-w{ display:block; font-size:.78rem; color:var(--ink-soft);
  margin-top:.1rem; font-variant-numeric:tabular-nums; }
body.v2 .v2-bk-c{ width:15px; height:15px; flex:none; color:var(--blush-2); }
body.v2 .v2-tag.completed{ background:var(--blush); color:var(--ink-soft); }
body.v2 .v2-tag.cancelled{ background:transparent; color:var(--btn-danger-fg,#c0392b);
  border:1px solid var(--btn-danger-bd,#e6b0aa); }

/* ---- the record ---- */
body.v2 #bkFilters{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem; }
body.v2 #bkFilters .v2-chip i{ font-style:normal; opacity:.65; font-size:.72rem;
  margin-left:.1rem; }

/* ============================================================
   SHARPENING PASS
   ------------------------------------------------------------
   Three things were making this look cheap, and none of them
   were the layout:

   1. EVERY label was uppercase, 700 weight, widely tracked. Four
      shouting labels above four numbers reads like a spreadsheet
      header, not a dashboard. Sentence case, normal weight.
   2. The tiles were tall and mostly empty -- a lot of padding
      around the digit "0".
   3. Her --cream IS #FFFFFF, so a white card on a white page was
      being separated by a pink hairline and nothing else. A soft
      shadow does that job properly, and keeps her background
      artwork visible the way lifting the whole ground would not.
   ============================================================ */

/* 1. stop shouting */
body.v2 .v2-lbl,
body.v2 .v2-ws-lbl,
body.v2 .v2-stat-l,
body.v2 .mp-tag{
  font-size:.8rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--ink-soft); }
body.v2 .v2-stat-l{ font-size:.78rem; font-weight:500; }
body.v2 .mp-tag{ font-size:.75rem; }
body.v2 .v2-ws-lbl span{ font-weight:600; }

/* 2. tighter tiles */
body.v2 #dashStats{ gap:.55rem; }
body.v2 .v2-stat{ border-radius:14px; padding:.75rem .8rem .8rem; }
body.v2 .v2-stat-top{ margin-bottom:.15rem; }
body.v2 .v2-stat-top svg{ width:14px; height:14px; opacity:.55; }
body.v2 .v2-stat-v{ font-size:1.45rem; font-weight:650; letter-spacing:-.035em; }
body.v2 .v2-stat-s{ font-size:.74rem; margin-top:.05rem; }

/* 3. separate by shadow, not by a pink outline.
      The border is declared twice on purpose: the plain one is the
      fallback for a browser without color-mix, the softened one
      wins everywhere else. */
body.v2 .v2-stat,
body.v2 .v2-bk,
body.v2 .v2-appt,
body.v2 .v2-free-day,
body.v2 .mp-blk,
body.v2 .v2-list,
body.v2 #panes .card,
body.v2 #storeView .card,
body.v2 #schedCard{
  border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05);
}
body.v2 #dashHi{ font-size:1.5rem; letter-spacing:-.03em; }
body.v2 #dashSub{ font-size:.83rem; }

/* ============================================================
   SERVICES — its own destination
   ============================================================ */
body.v2 #svcHead{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:.8rem; margin-bottom:.9rem; }
body.v2 #svcHead h2{ font-family:var(--font-ui); font-size:1.5rem; font-weight:600;
  letter-spacing:-.03em; color:var(--plum); margin:0; text-transform:none; }
body.v2 #svcHead p{ font-size:.83rem; color:var(--ink-soft); margin-top:.2rem; }
body.v2 #svcAdd{ flex:none; height:36px; padding:0 .85rem; border-radius:999px;
  background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff);
  font-family:var(--font-ui); font-size:.8rem; font-weight:600; letter-spacing:0;
  text-transform:none; display:inline-flex; align-items:center; gap:.35rem; }
body.v2 #svcAdd svg{ width:14px; height:14px; }
body.v2 #svcCats{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem; }
body.v2 #svcCats .v2-chip i{ font-style:normal; opacity:.6; font-size:.72rem; }

body.v2 .v2-svc-grp{ margin-bottom:1.2rem; }
body.v2 .v2-addon{ font-weight:500; color:var(--ink-soft); opacity:.8; }
body.v2 .v2-svc{ display:flex; align-items:center; gap:.7rem; width:100%;
  background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05);
  border-radius:14px; padding:.65rem .8rem; margin-bottom:.5rem; text-align:left;
  color:var(--ink); font:inherit; letter-spacing:normal; text-transform:none; }
body.v2 .v2-svc-pic{ flex:none; width:44px; height:44px; border-radius:11px;
  object-fit:cover; display:block; border:1px solid var(--blush-2); }
body.v2 .v2-svc-none{ background:var(--blush); }
body.v2 .v2-svc-m{ flex:1; min-width:0; display:block; }
body.v2 .v2-svc-n{ display:block; font-size:.95rem; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v2 .v2-svc-s{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.1rem;
  font-variant-numeric:tabular-nums; }
body.v2 .v2-svc-e{ flex:none; font-size:.8rem; font-weight:600; color:var(--pink-dark); }
body.v2 .v2-svc > svg{ width:15px; height:15px; flex:none; color:var(--blush-2); }

/* the single-service form */
body.v2 #svcForm{ padding-bottom:.5rem; }
body.v2 #svcFormT{ font-size:1.3rem; font-weight:600; letter-spacing:-.025em;
  color:var(--plum); margin-bottom:1rem; }
body.v2 #svcFormBody{ background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05);
  border-radius:14px; padding:1rem 1.05rem 1.1rem; }
body.v2 #svcFormBody label{ font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.02em; text-transform:none; color:var(--ink-soft); margin:.9rem 0 .3rem; }
body.v2 #svcFormBody label:first-child{ margin-top:0; }
body.v2 #svcFormBody input, body.v2 #svcFormBody textarea{
  font-family:var(--font-ui); font-size:.95rem; border-radius:10px; border-width:1px; }
body.v2 #svcFormBody .muted{ font-family:var(--font-ui); font-size:.78rem; margin-top:.35rem;
  line-height:1.45; }
body.v2 .v2-two{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
body.v2 .v2-two label{ margin-top:.9rem; }
body.v2 .v2-svc-big{ display:block; width:96px; height:96px; object-fit:cover;
  border-radius:12px; border:1px solid var(--blush-2); margin-bottom:.6rem; }
body.v2 #svcFormActs{ display:flex; gap:.6rem; margin-top:1rem; align-items:center; }
body.v2 #svcFormActs .v2-btn{ flex:1; }
body.v2 #svcFormDel{ flex:none; }

/* ---- reschedule ------------------------------------------ */
body.v2 .v2-rs-slots{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.35rem; }
body.v2 .v2-rs-slots .v2-chip{ font-variant-numeric:tabular-nums; }
body.v2 .v2-rs-slots .v2-chip.off{ opacity:.35; text-decoration:line-through; }
body.v2 .v2-rs-slots .v2-chip i{ font-style:normal; font-size:.68rem; opacity:.7; margin-left:.2rem; }
body.v2 #modal input[type=date]{ margin-top:.3rem; }

/* ============================================================
   THE REFERENCE PASS
   ------------------------------------------------------------
   Every screen gets the same head: a display-face title, one
   quiet line under it. Settings is an index of rows with an icon
   tile, a name, what is inside, and a chevron. Booking details
   and a client's profile are screens with a back arrow, not
   modals. The card is one shape everywhere — white, 14px, a soft
   shadow — and the labels are sentence case.
   ============================================================ */

/* ---- the head on every screen ---- */
body.v2 .v2-head{ margin:.2rem 0 1.1rem; }
body.v2 .v2-head h1{
  font-family:var(--font-display, var(--font-ui)); font-size:1.85rem; font-weight:500;
  letter-spacing:-.01em; line-height:1.1; color:var(--plum); margin:0; text-transform:none; }
body.v2 .v2-head p{ font-size:.85rem; color:var(--ink-soft); margin:.3rem 0 0; line-height:1.45; }
body.v2 #dashHi{ font-family:var(--font-display, var(--font-ui)); font-size:1.85rem;
  font-weight:500; letter-spacing:-.01em; }
body.v2 #dashSub{ margin-top:.3rem; }
body.v2 #svcHead{ align-items:center; margin-bottom:1rem; }
body.v2 #svcHead .v2-head{ margin:0; }
body.v2 #svcFormT{ display:none; }         /* the sub bar names the form now */
body.v2 #calHead{ margin-bottom:.9rem; }
body.v2-hours-only #calHead, body.v2-hours-only .v2-segrow{ display:none; }
body.v2-hours-only #schedCard{ margin-top:0; }

/* ---- sub-screen bar: round back arrow + title ---- */
body.v2 #v2Sub.on{ align-items:center; gap:.7rem; margin:0 0 1.1rem; }
body.v2 .v2-back{ width:38px; height:38px; border-radius:50%; flex:none; padding:0;
  background:var(--white); border:1px solid var(--blush-2); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; box-shadow:none; }
body.v2 .v2-back svg{ width:17px; height:17px; }
body.v2 #v2SubT{ font-family:var(--font-display, var(--font-ui)); font-size:1.45rem;
  font-weight:500; letter-spacing:-.01em; color:var(--plum); }
body.v2 #v2SubT:empty{ display:none; }

/* ---- the one card ---- */
body.v2 .v2-card{
  background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05);
  border-radius:14px; }

/* ---- Settings index ---- */
body.v2 #setRows{ display:flex; flex-direction:column; gap:.55rem; }
body.v2 .v2-setrow{ display:flex; align-items:center; gap:.85rem; width:100%;
  background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05);
  border-radius:14px; padding:.85rem .95rem; text-align:left; color:var(--ink);
  font:inherit; letter-spacing:normal; text-transform:none; }
body.v2 .v2-setrow .ico{ flex:none; width:42px; height:42px; border-radius:12px;
  background:var(--blush); color:var(--pink-dark); display:inline-flex;
  align-items:center; justify-content:center; }
body.v2 .v2-setrow .ico svg{ width:20px; height:20px; }
body.v2 .v2-setrow .txt{ flex:1; min-width:0; display:block; }
body.v2 .v2-setrow b{ display:block; font-size:.98rem; font-weight:600; line-height:1.25; }
body.v2 .v2-setrow small{ display:block; font-size:.78rem; color:var(--ink-soft);
  margin-top:.15rem; line-height:1.35; }
body.v2 .v2-setrow > svg{ width:15px; height:15px; flex:none; color:var(--ink-soft); opacity:.6; }

/* one settings area at a time: infoTab holds three of them */
body.v2[data-vset="business"] #alertsCard,
body.v2[data-vset="business"] #infoTab .account{ display:none !important; }
body.v2[data-vset="alerts"] #infoTab .card:not(#alertsCard),
body.v2[data-vset="alerts"] #infoSave,
body.v2[data-vset="alerts"] #infoTab .account{ display:none !important; }
body.v2[data-vset="account"] #infoTab .card,
body.v2[data-vset="account"] #infoSave{ display:none !important; }
body.v2 #alertsCard{ margin-top:0 !important; }
body.v2 #infoTab .account{ background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05);
  border-radius:14px; padding:1rem 1.1rem; margin-top:0; }
body.v2 #infoTab .account .muted{ font-family:var(--font-ui); font-size:.9rem; color:var(--ink); }
body.v2 #whoami{ display:none; }   /* v2Who carries the same string */

/* hide the v1 client card under this shell; renderClients still writes to it */
body.v2 #clientsTab{ display:none !important; }

/* ---- who: the header on details and profile ---- */
body.v2 .v2-who{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; }
body.v2 .v2-who .v2-face{ border-radius:50%; }
body.v2 .v2-who .v2-initial{ font-size:1.4rem; }
body.v2 .v2-who .m{ flex:1; min-width:0; }
body.v2 .v2-who b{ display:block; font-family:var(--font-display, var(--font-ui));
  font-size:1.35rem; font-weight:500; letter-spacing:-.01em; color:var(--plum); line-height:1.15; }
body.v2 .v2-who span{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; }
body.v2 .v2-who em{ font-style:normal; color:var(--st-pend-fg,#8a6d1a); font-weight:600; }
body.v2 .v2-who .v2-tag{ flex:none; }

/* ---- key / value rows inside a card ---- */
body.v2 .v2-kvs{ padding:.15rem 1rem; margin-bottom:1rem; }
body.v2 .v2-kv{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-top:1px solid var(--blush); font-size:.9rem; }
body.v2 .v2-kv:first-child{ border-top:0; }
body.v2 .v2-kv span{ color:var(--ink-soft); flex:none; }
body.v2 .v2-kv b{ font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere; }
body.v2 .v2-kv b small{ font-weight:500; color:var(--ink-soft); }
body.v2 .v2-kv .clink{ color:var(--pink-dark); text-decoration:underline; text-underline-offset:2px; }
body.v2 .v2-note{ padding:.85rem 1rem; font-size:.9rem; line-height:1.5;
  white-space:pre-wrap; margin-bottom:1rem; }

/* ---- action buttons on details / profile ---- */
body.v2 #bdActs, body.v2 #cpActs{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  margin-bottom:1.2rem; }
body.v2 #bdActs .v2-btn, body.v2 #cpActs .v2-btn{ height:46px; font-size:.88rem; }
body.v2 #bdActs .v2-btn.x{ width:auto; }
body.v2 #bdActs .v2-btn.wide{ grid-column:1 / -1; }
body.v2 #bdActs .v2-btn:first-child:nth-last-child(odd){ grid-column:1 / -1; }
body.v2 .v2-btn[disabled]{ opacity:.45; }
body.v2 .v2-ig{ margin-bottom:1rem; }

/* ---- clients ---- */
body.v2 .v2-search{ width:100%; font-family:var(--font-ui); font-size:.95rem;
  border-radius:12px; border:1px solid var(--blush-2); background:var(--white);
  padding:.75rem .95rem; margin-bottom:.7rem; }
body.v2 #v2ClSorts{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem; }
body.v2 .v2-cl .v2-face{ border-radius:50%; }
body.v2 .v2-when{ flex:none; font-size:.74rem; color:var(--ink-soft); text-align:right;
  max-width:5.5rem; }
body.v2 .v2-when.due{ color:var(--st-pend-fg,#8a6d1a); font-weight:600; }
body.v2 #cpStats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem;
  margin-bottom:.9rem; }
body.v2 #cpStats .v2-stat-v{ margin-top:.15rem; }
body.v2 #cpStats .v2-stat-v.s{ font-size:1.05rem; letter-spacing:-.01em; padding-top:.25rem; }

/* ---- the old forms under Settings, once more ---- */
body.v2 #panes .card, body.v2 #storeView .card, body.v2 #schedCard{ padding:1.1rem 1.05rem; }
body.v2 #panes label, body.v2 #storeView label, body.v2 #schedCard label{
  font-size:.74rem; font-weight:600; letter-spacing:.01em; text-transform:none; }
body.v2 #panes .btn:not(.ghost):not(.danger),
body.v2 #storeView .btn:not(.ghost):not(.danger){ width:100%; height:46px; padding:0 1rem;
  border-radius:10px; font-size:.92rem; }
body.v2 #panes .card + div .muted,
body.v2 #panes > div > div:last-child > .muted{ font-size:.78rem; }
body.v2 #modal h3{ font-family:var(--font-display, var(--font-ui)); font-size:1.3rem;
  font-weight:500; letter-spacing:-.01em; }

/* ---- fixes from the first look ---- */
body.v2 .v2-head{ text-align:left; }
body.v2 .v2-head h1{ text-align:left; }
body.v2-hours-only .v2-segrow{ display:none !important; }
body.v2 .v2-who .v2-initial{ display:flex; }
body.v2 #bdActs .v2-btn:first-child:nth-last-child(odd){ grid-column:auto; }
body.v2 .v2-ig{ width:180px; }
body.v2 .v2-ig .igshot{ height:180px; }
body.v2 .v2-ig.big{ width:100%; }
body.v2 #bookingsPane{ padding-top:.1rem; }
body.v2 #schedCard{ display:none !important; }   /* HOURS, THE REFERENCE WAY draws into #v2Hours */

/* ---- HOURS, THE REFERENCE WAY ---- */
body.v2 .v2-hcard{ padding:.95rem 1rem 1rem; margin-bottom:.7rem; }
body.v2 .v2-htitle{ font-size:1rem; font-weight:600; color:var(--plum); margin-bottom:.7rem; }
body.v2 .v2-htitle span{ font-size:.75rem; font-weight:500; color:var(--ink-soft); margin-left:.3rem; }
body.v2 .v2-hsub{ font-size:.8rem; color:var(--ink-soft); margin:-.35rem 0 .8rem; line-height:1.45; }
body.v2 .v2-times{ display:flex; gap:.45rem; flex-wrap:wrap; }
body.v2 .v2-time{ display:inline-flex; align-items:center; gap:.2rem; height:40px;
  border:1px solid var(--blush-2); border-radius:10px; padding:0 .3rem 0 .8rem;
  font-size:.9rem; font-variant-numeric:tabular-nums; background:var(--white); }
body.v2 .v2-time b{ font-weight:600; }
body.v2 .v2-time button{ width:30px; height:30px; border-radius:8px; padding:0; border:0;
  background:transparent; color:var(--ink-soft); display:inline-flex; align-items:center;
  justify-content:center; box-shadow:none; }
body.v2 .v2-time button svg{ width:13px; height:13px; }
body.v2 .v2-time.plus{ border-style:dashed; color:var(--ink-soft); font-weight:600;
  font-size:.82rem; padding:0 .8rem; background:transparent; letter-spacing:0; text-transform:none; box-shadow:none; }
body.v2 .v2-time.add{ padding:0 .3rem 0 .3rem; gap:.35rem; border-style:solid; }
body.v2 .v2-time.add input{ width:104px; height:32px; margin:0; padding:0 .55rem; border-radius:7px;
  border:1px solid var(--blush-2); font-family:var(--font-ui); font-size:.9rem; }
body.v2 .v2-time.add .v2-btn{ height:32px; padding:0 .7rem; font-size:.8rem; border-radius:7px; }

body.v2 .v2-hday{ display:flex; align-items:center; gap:.6rem; padding:.45rem 0;
  border-top:1px solid var(--blush); }
body.v2 .v2-hday:first-of-type{ border-top:0; }
body.v2 .v2-hpill{ flex:none; width:52px; height:38px; border-radius:11px; padding:0;
  background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff); border:0;
  font-size:.8rem; font-weight:700; letter-spacing:0; text-transform:none; box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.2rem; position:relative; }
body.v2 .v2-hpill i{ font-style:normal; font-size:.6rem; font-weight:700; opacity:.85;
  background:rgba(255,255,255,.25); border-radius:4px; padding:0 .25rem; }
body.v2 .v2-hday.shut .v2-hpill{ background:var(--blush); color:var(--ink-soft); }
body.v2 .v2-hsq{ flex:1; min-width:0; display:flex; gap:.35rem; flex-wrap:wrap; }
body.v2 .v2-hsqb{ height:34px; min-width:48px; padding:0 .55rem; border-radius:9px;
  background:var(--blush); color:var(--ink-soft); border:0; font-size:.78rem; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; box-shadow:none;
  text-decoration:line-through; }
body.v2 .v2-hsqb.on{ background:var(--white); color:var(--ink); border:1px solid var(--blush-2);
  text-decoration:none; }
body.v2 .v2-hoff{ font-size:.8rem; color:var(--ink-soft); align-self:center; }
body.v2 .v2-hmore{ display:block; width:100%; text-align:left; border:1.5px dashed var(--blush-2);
  border-radius:14px; padding:.85rem 1rem; margin-bottom:.7rem; background:transparent;
  box-shadow:none; letter-spacing:0; text-transform:none; color:var(--ink); }
body.v2 .v2-hmore b{ display:block; font-size:.92rem; font-weight:600; }
body.v2 .v2-hmore small{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:.15rem; }
body.v2 .v2-hsay{ padding:.8rem 1rem .9rem; font-size:.9rem; line-height:1.5; }
body.v2 .v2-hsay .v2-lbl{ margin:0 0 .3rem; }
body.v2 #svcFormDel{ font-family:var(--font-ui); border-radius:10px; text-transform:none;
  letter-spacing:0; font-weight:600; font-size:.82rem; padding:.6rem .9rem; }
body.v2 #mpFoot{ font-family:var(--font-ui); font-size:.78rem; }

/* ---- SHOP TAB ---------------------------------------------
   Only in a build whose brand.js has `store`; otherwise the button
   carries .hidden and the grid below never knows it exists. */
/* Bottom bar only. Left unscoped, this came after the >=860px sidebar
   rule and beat its single column, so on an iPad in landscape and on
   every desktop the six buttons were squeezed into one row inside the
   216px rail — overlapping words, no usable tabs (Sep 2026). */
@media(max-width:859px){ body.v2 #v2Nav{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); } }
body.v2 #v2Nav .v2-nav.hidden{ display:none !important; }
@media(max-width:400px){ body.v2 .v2-nav{ font-size:.66rem; padding:.5rem 0; } }
#shopHead{ display:none; }
body.v2 #shopHead{ display:block; }
body.v2 #storeView .card > h2,
body.v2 #storeView .card > h2 + .muted{ display:none; }
body.v2 #storeView .card{ padding:1rem 1.05rem 1.1rem; }
body.v2 #storeView .pn-drop{ border-radius:14px; padding:1.2rem; background:var(--white); }
body.v2 #storeView .pn-drop b{ font-family:var(--font-ui); font-size:.95rem; font-weight:600; }
body.v2 #storeView .pn-drop .muted{ font-size:.78rem; }
body.v2 #storeView .pn-2{ grid-template-columns:1fr 1fr; gap:.7rem; }
body.v2 #storeView .pn-item{ display:flex; align-items:center; gap:.75rem; padding:.7rem 0;
  border-top:1px solid var(--blush); }
body.v2 #storeView .pn-item img{ width:56px; height:56px; object-fit:cover; border-radius:12px;
  border:1px solid var(--blush-2); flex:none; }
body.v2 #storeView .pn-item > div:nth-child(2), body.v2 #storeView .pn-item > div:first-child:not(img){ flex:1; min-width:0; }
body.v2 #storeView .pn-item .nm{ font-family:var(--font-ui); font-size:.95rem; font-weight:600; }
body.v2 #storeView .pn-item .mt{ font-family:var(--font-ui); font-size:.8rem; color:var(--ink-soft); }
body.v2 #storeView .pn-acts{ display:flex; flex-direction:column; gap:.3rem; flex:none; }
body.v2 #storeView .pn-acts .btn{ width:auto; height:auto; padding:.4rem .7rem; font-size:.76rem; }
body.v2 #storeView #pnSave{ margin-top:.2rem; }
body.v2 #storeView #pnCancel{ margin-top:.5rem; }

/* ---- CALENDAR A: one strip, one day, one menu ---------------- */
body.v2 .v2-monrow{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin:.1rem 0 .7rem; }
body.v2 .v2-monbtn{ display:inline-flex; align-items:center; gap:.3rem; background:transparent;
  border:0; padding:.3rem 0; color:var(--plum); font-family:var(--font-ui); font-size:1rem;
  font-weight:600; letter-spacing:0; text-transform:none; box-shadow:none; }
body.v2 .v2-monbtn svg{ width:14px; height:14px; color:var(--ink-soft); transition:transform .18s; }
body.v2 .v2-monbtn.on svg{ transform:rotate(180deg); }
body.v2 #v2Strip{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
body.v2 .v2-wcell{ border-radius:12px; padding:.5rem .1rem .55rem; gap:4px; }
body.v2 .v2-wcell .w{ font-size:.62rem; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); }
body.v2 .v2-wcell .d{ font-size:.98rem; font-weight:600; }
body.v2 .v2-wcell i, body.v2 .v2-cell i{ font-style:normal; font-size:.62rem; font-weight:700;
  line-height:1; min-height:15px; min-width:15px; padding:2px 5px; border-radius:999px;
  background:var(--blush); color:var(--pink-dark); display:inline-flex; align-items:center;
  justify-content:center; }
body.v2 .v2-wcell i:empty, body.v2 .v2-cell i:empty{ background:transparent; }
body.v2 .v2-wcell i.p, body.v2 .v2-cell i.p{ background:var(--st-pend-bg,#ffe3a3); color:var(--st-pend-fg,#8a6d1a); }
body.v2 .v2-wcell.off .w, body.v2 .v2-wcell.off .d{ color:var(--ink-soft); opacity:.45; }
body.v2 .v2-wcell.now .d{ text-decoration:underline; text-underline-offset:3px; }
body.v2 .v2-wcell.sel{ background:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-wcell.sel .w, body.v2 .v2-wcell.sel .d{ color:var(--on-accent,#fff); opacity:1; }
body.v2 .v2-wcell.sel i{ background:rgba(255,255,255,.22); color:var(--on-accent,#fff); }
body.v2 .v2-swipe{ display:flex; align-items:center; justify-content:center; gap:.4rem;
  margin:.4rem 0 .2rem; font-size:.7rem; color:var(--ink-soft); opacity:.85; }
body.v2 .v2-swipe button{ width:30px; height:30px; border-radius:50%; border:0; padding:0;
  background:transparent; color:var(--ink-soft); display:inline-flex; align-items:center;
  justify-content:center; box-shadow:none; }
body.v2 .v2-swipe button svg{ width:14px; height:14px; }
@media(min-width:860px){ body.v2 .v2-swipe span{ display:none; } }

/* the month drop-down */
body.v2 #v2MonDrop{ background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 14px 40px rgba(var(--glow-deep),.14); border-radius:16px; padding:.75rem;
  margin-bottom:.9rem; }
body.v2 .v2-mh{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-bottom:.6rem; }
body.v2 .v2-mh b{ font-size:.95rem; font-weight:600; color:var(--plum); }
body.v2 .v2-cell{ min-height:44px; padding:.25rem .1rem; gap:2px; border:0; background:transparent; }
body.v2 .v2-cell.work, body.v2 .v2-cell.off, body.v2 .v2-cell.shut{ background:transparent; border:0; }
body.v2 .v2-cell .d{ font-size:.85rem; }
body.v2 .v2-cell.off .d{ color:var(--ink-soft); opacity:.4; text-decoration:none; }
body.v2 .v2-cell.spill .d{ opacity:.3; }
body.v2 .v2-cell.now{ border:1.5px solid var(--sel-bg,var(--ribbon)); }
body.v2 .v2-cell.now .d{ background:transparent; color:inherit; width:auto; height:auto; margin:0; }
body.v2 .v2-cell.sel{ background:var(--sel-bg,var(--ribbon)); border:0; padding:.25rem .1rem; }
body.v2 .v2-cell.sel .d{ color:var(--on-accent,#fff); opacity:1; }
body.v2 .v2-cell.sel i{ background:rgba(255,255,255,.22); color:var(--on-accent,#fff); }
body.v2 .v2-cell i{ min-height:13px; min-width:13px; padding:1px 4px; font-size:.56rem; }

/* the day */
body.v2 #v2DayH{ display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  margin:.9rem 0 .5rem; }
body.v2 #v2DayH b{ font-size:1rem; font-weight:600; color:var(--plum); }
body.v2 #v2DayH span{ font-size:.76rem; color:var(--ink-soft); margin-left:.4rem; }
body.v2 .v2-dots-btn{ width:36px; height:36px; border-radius:50%; flex:none; padding:0;
  background:var(--white); border:1px solid var(--blush-2); color:var(--ink);
  font-size:1rem; font-weight:700; letter-spacing:1px; line-height:1; box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center; }
body.v2 .v2-slot{ border-radius:14px; padding:.65rem .8rem; gap:.7rem; }
body.v2 .v2-slot .t{ width:62px; font-size:.8rem; font-weight:700; white-space:nowrap; }
body.v2 .v2-slot.bk{ border-color:color-mix(in srgb, var(--blush-2) 60%, transparent);
  box-shadow:0 1px 2px rgba(var(--glow-deep),.05), 0 8px 20px rgba(var(--glow-deep),.05); }
body.v2 .v2-slot.bk .v2-face{ border-radius:50%; }
body.v2 .v2-slot.bk .m b{ display:block; font-size:.92rem; font-weight:600; }
body.v2 .v2-slot.bk .m small{ font-size:.78rem; }
body.v2 .v2-slot.open{ border:1.5px dashed var(--blush-2); background:transparent; }
body.v2 .v2-slot.open .m{ color:var(--ink-soft); font-weight:500; }
body.v2 .v2-slot.open .go{ color:var(--pink-dark); font-weight:600; font-size:.78rem; }
body.v2 .v2-slot.blocked .go{ font-size:.78rem; }
body.v2 #v2Cal.v2-hours > :not(#v2Free){ display:none; }

/* the ··· menu, a sheet from the bottom */
body.v2 #v2Menu{ position:fixed; inset:0; z-index:60; }
body.v2 #v2Menu.hidden{ display:none !important; }
body.v2 .v2-menu-dim{ position:absolute; inset:0; background:rgba(15,12,14,.38); }
body.v2 .v2-menu-sheet{ position:absolute; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px)); max-width:440px; margin:0 auto;
  background:var(--white); border-radius:18px; padding:.5rem; box-shadow:0 20px 50px rgba(0,0,0,.25); }
body.v2 .v2-menu-sheet .hd{ font-size:.76rem; font-weight:600; color:var(--ink-soft);
  text-align:center; padding:.5rem 0 .3rem; }
body.v2 .v2-mi{ display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  background:transparent; border:0; border-top:1px solid var(--blush); border-radius:0;
  padding:.85rem .75rem; color:var(--ink); font-family:var(--font-ui); font-size:.95rem;
  font-weight:500; letter-spacing:0; text-transform:none; box-shadow:none; }
body.v2 .v2-mi:first-child{ border-top:0; }
body.v2 .v2-mi svg{ width:20px; height:20px; flex:none; color:var(--pink-dark); }
body.v2 .v2-mi.red, body.v2 .v2-mi.red svg{ color:var(--btn-danger-fg,#c0392b); }
body.v2 .v2-menu-cancel{ width:100%; margin-top:.4rem; background:var(--blush); border:0;
  border-radius:12px; padding:.85rem; font-family:var(--font-ui); font-size:.95rem;
  font-weight:600; color:var(--ink); letter-spacing:0; text-transform:none; box-shadow:none; }
@media(min-width:860px){
  body.v2 .v2-menu-sheet{ bottom:auto; top:50%; transform:translateY(-50%); }
}

/* the openings modal reuses the Free styles */
body.v2 #modal .v2-free-day{ box-shadow:none; }
body.v2 #modal #v2CopyPrev{ margin-top:.5rem; font-size:.76rem; line-height:1.5;
  white-space:pre-line; background:var(--blush); border-radius:10px; padding:.6rem .75rem; }

/* dashboard: the openings pill */
body.v2 #dashHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
body.v2 .v2-pill{ flex:none; display:inline-flex; align-items:center; gap:.35rem; height:34px;
  padding:0 .8rem; border-radius:999px; background:var(--white); border:1px solid var(--blush-2);
  color:var(--ink); font-family:var(--font-ui); font-size:.78rem; font-weight:600;
  letter-spacing:0; text-transform:none; box-shadow:none; margin-top:.35rem; }
body.v2 .v2-pill svg{ width:14px; height:14px; }

/* ---- CALENDAR B: the whole month, a ··· per week and per day ---- */
body.v2 .v2-monrow{ margin:.1rem 0 .6rem; }
body.v2 .v2-monnav{ display:flex; align-items:center; gap:.4rem; }
body.v2 .v2-monnav b{ font-size:1rem; font-weight:600; color:var(--plum); min-width:9.5rem;
  text-align:center; }
body.v2 .v2-dow{ grid-template-columns:repeat(7,minmax(0,1fr)) 24px; gap:3px; margin-bottom:3px; }
body.v2 .v2-wrow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)) 24px; gap:3px;
  margin-bottom:3px; align-items:stretch; }
body.v2 .v2-cell{ min-height:54px; padding:.3rem .05rem .3rem; gap:4px; border-radius:9px;
  background:var(--white); border:1px solid var(--blush-2);
  border-color:color-mix(in srgb, var(--blush-2) 60%, transparent); }
body.v2 .v2-cell .d{ font-size:.82rem; font-weight:600; }
body.v2 .v2-cell.off{ background:transparent; border-color:transparent; }
body.v2 .v2-cell.off .d{ color:var(--ink-soft); opacity:.4; text-decoration:none; }
body.v2 .v2-cell.spill .d{ opacity:.3; }
body.v2 .v2-cell.spill{ background:transparent; border-color:transparent; }
body.v2 .v2-cell.past:not(.sel){ opacity:.6; }
body.v2 .v2-cell.now{ border:1.5px solid var(--sel-bg,var(--ribbon)); }
body.v2 .v2-cell.now .d{ background:transparent; color:inherit; width:auto; height:auto; margin:0; }
body.v2 .v2-cell.sel{ background:var(--sel-bg,var(--ribbon)); border-color:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-cell.sel .d{ color:var(--on-accent,#fff); opacity:1; }
body.v2 .v2-sd{ display:flex; flex-wrap:wrap; gap:2px; justify-content:center; max-width:30px; }
body.v2 .v2-sd i{ width:6px; height:6px; border-radius:50%; display:block; box-sizing:border-box; }
body.v2 .v2-sd i.b{ background:var(--st-conf-bg,var(--ribbon)); }
body.v2 .v2-sd i.p{ background:var(--st-pend-fg,#c99a1e); }
body.v2 .v2-sd i.o{ border:1.2px solid var(--pink-deep); background:transparent; }
body.v2 .v2-sd em{ font-style:normal; font-size:.55rem; line-height:6px; color:var(--ink-soft); }
body.v2 .v2-cell.sel .v2-sd i.b{ background:var(--on-accent,#fff); }
body.v2 .v2-cell.sel .v2-sd i.o{ border-color:rgba(255,255,255,.7); }
body.v2 .v2-cell.sel .v2-sd i.p{ background:var(--st-pend-bg,#ffe3a3); }
body.v2 .v2-wmenu{ width:24px; padding:0; border-radius:8px; border:1px solid var(--blush-2);
  background:var(--white); color:var(--ink-soft); font-size:.9rem; font-weight:700;
  letter-spacing:0; line-height:1; box-shadow:none; writing-mode:vertical-rl;
  display:inline-flex; align-items:center; justify-content:center; }
body.v2 .v2-key{ display:flex; flex-wrap:wrap; gap:.3rem .8rem; justify-content:center;
  margin:.6rem 0 .2rem; font-size:.68rem; color:var(--ink-soft); }
body.v2 .v2-key span{ display:inline-flex; align-items:center; gap:.3rem; }
body.v2 .v2-key i{ width:7px; height:7px; border-radius:50%; display:inline-block; box-sizing:border-box; }
body.v2 .v2-key i.b{ background:var(--st-conf-bg,var(--ribbon)); }
body.v2 .v2-key i.p{ background:var(--st-pend-fg,#c99a1e); }
body.v2 .v2-key i.o{ border:1.2px solid var(--pink-deep); }
body.v2 .v2-key em{ font-style:normal; font-weight:700; letter-spacing:1px; }
body.v2 #v2DayH{ margin-top:1rem; }
@media(min-width:860px){
  body.v2 .v2-cell{ min-height:64px; }
  body.v2 .v2-sd{ max-width:48px; }
}

/* a later slot of a long appointment */
body.v2 .v2-slot.cont{ background:var(--blush); box-shadow:none; border-style:solid; padding-top:.45rem; padding-bottom:.45rem; }
body.v2 .v2-slot.cont .t{ color:var(--ink-soft); }
body.v2 .v2-slot.cont .m small{ font-size:.78rem; color:var(--ink-soft); }
body.v2 #modal #mbCover{ font-size:.78rem; line-height:1.45; }
body.v2 #modal select{ width:100%; }

body.v2 #v2HrsHead{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--blush-2); }
body.v2 #v2Hours{ padding-bottom:.5rem; }

/* ---- INSIGHTS ---------------------------------------------- */
body.v2 .v2-stat{ text-align:left; font:inherit; color:var(--ink); cursor:pointer; position:relative;
  letter-spacing:normal; text-transform:none; width:100%; }
body.v2 .v2-stat::after{ content:''; position:absolute; right:10px; bottom:10px; width:6px; height:6px;
  border-right:1.6px solid var(--blush-2); border-bottom:1.6px solid var(--blush-2); transform:rotate(-45deg); }
body.v2 .v2-stat:active{ transform:scale(.98); }
body.v2 .v2-chips{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.9rem; }
body.v2 .v2-ins{ padding:.9rem 1rem 1rem; margin-bottom:.7rem; }
body.v2 .v2-ins .ct{ font-size:.95rem; font-weight:600; color:var(--plum); display:flex; align-items:baseline;
  justify-content:space-between; gap:.5rem; }
body.v2 .v2-ins .ct small{ font-size:.76rem; font-weight:500; color:var(--ink-soft); }
body.v2 .v2-ins .big{ font-size:2rem; font-weight:650; letter-spacing:-.035em; color:var(--plum);
  font-variant-numeric:tabular-nums; line-height:1; margin-top:.5rem; }
body.v2 .v2-badge{ display:inline-block; font-size:.7rem; font-weight:700; padding:2px 6px; border-radius:5px;
  margin-left:.4rem; vertical-align:6px; letter-spacing:0; }
body.v2 .v2-badge.up{ background:var(--st-open-bg,#e9f5ee); color:var(--st-open-fg,#3f8b62); }
body.v2 .v2-badge.dn{ background:#fbe6e3; color:var(--btn-danger-fg,#c0392b); }
body.v2 .v2-ins .vs{ font-size:.78rem; color:var(--ink-soft); margin-top:.25rem; }
body.v2 .v2-bars{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; align-items:end;
  height:96px; margin-top:.9rem; padding-top:6px; }
body.v2 .v2-bars .b{ display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
body.v2 .v2-bars .b i{ display:block; width:100%; max-width:34px; background:var(--blush-2); border-radius:6px 6px 3px 3px; min-height:4px; }
body.v2 .v2-bars .b.now i{ background:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-bars .b em{ font-style:normal; font-size:.64rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
body.v2 .v2-bars .b.now em{ color:var(--plum); }
body.v2 .v2-bars .b b{ font-size:.64rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; min-height:.8rem; }
body.v2 .v2-two-ins{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:.7rem; }
body.v2 .v2-two-ins .v2-card{ margin:0; padding:.75rem .8rem .8rem; }
body.v2 .v2-two-ins .k{ font-size:.78rem; font-weight:500; color:var(--ink-soft); }
body.v2 .v2-two-ins .v{ font-size:1.4rem; font-weight:650; letter-spacing:-.03em; color:var(--plum);
  font-variant-numeric:tabular-nums; margin-top:.15rem; }
body.v2 .v2-two-ins .s{ font-size:.74rem; color:var(--ink-soft); margin-top:.1rem; }
body.v2 .v2-rank{ margin-top:.6rem; }
body.v2 .v2-rank .r{ padding:.45rem 0; border-top:1px solid var(--blush); }
body.v2 .v2-rank .r:first-child{ border-top:0; padding-top:.1rem; }
body.v2 .v2-rank .t{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; font-size:.86rem; }
body.v2 .v2-rank .t b{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v2 .v2-rank .t span{ color:var(--ink-soft); font-size:.78rem; font-variant-numeric:tabular-nums; flex:none; }
body.v2 .v2-rank .g{ height:6px; border-radius:3px; background:var(--blush); margin-top:.35rem; overflow:hidden; }
body.v2 .v2-rank .g i{ display:block; height:100%; background:var(--sel-bg,var(--ribbon)); border-radius:3px; }
body.v2 .v2-rank .r.alt .g i{ background:var(--pink-deep); }
body.v2 .v2-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:.75rem; align-items:end; height:74px; }
body.v2 .v2-days .d{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; }
body.v2 .v2-days .d i{ display:block; width:100%; background:var(--blush-2); border-radius:5px 5px 2px 2px; min-height:3px; }
body.v2 .v2-days .d.top i{ background:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-days .d em{ font-style:normal; font-size:.64rem; font-weight:700; color:var(--ink-soft); letter-spacing:.04em; }
body.v2 .v2-days .d.off em{ opacity:.4; }
body.v2 .v2-split{ display:flex; height:10px; border-radius:5px; overflow:hidden; margin-top:.75rem; background:var(--blush); }
body.v2 .v2-split i{ display:block; height:100%; }
body.v2 .v2-split .a{ background:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-split .b{ background:var(--pink-deep); flex:1; }
body.v2 .v2-legend2{ display:flex; gap:.9rem; font-size:.78rem; color:var(--ink-soft); margin-top:.5rem; }
body.v2 .v2-legend2 i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
body.v2 .v2-legend2 i.a{ background:var(--sel-bg,var(--ribbon)); }
body.v2 .v2-legend2 i.b{ background:var(--pink-deep); }
body.v2 .v2-legend2 b{ color:var(--ink); font-weight:600; }
body.v2 .v2-ins .v2-kv{ padding:.5rem 0; font-size:.86rem; }
body.v2 .v2-ins.soon{ border:1.5px dashed var(--blush-2); background:rgba(255,255,255,.55); box-shadow:none; }
body.v2 .v2-ins.soon .ct{ color:var(--ink-soft); }
body.v2 .v2-ins.soon p{ font-size:.78rem; color:var(--ink-soft); margin:.4rem 0 0; line-height:1.45; }
body.v2 .v2-ins .src{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-top:1px solid var(--blush); font-size:.86rem; }
body.v2 .v2-ins .src:first-child{ border-top:0; margin-top:.3rem; }
body.v2 .v2-ins .src .ic{ width:30px; height:30px; border-radius:9px; background:var(--blush); display:flex;
  align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:var(--pink-dark); flex:none; }
body.v2 .v2-ins .src .n{ flex:1; font-weight:600; }
body.v2 .v2-ins .src .c{ color:var(--ink-soft); font-size:.78rem; font-variant-numeric:tabular-nums; }
body.v2 .v2-ins .src .c b{ color:var(--ink); font-weight:600; }
body.v2 .v2-foot{ font-size:.72rem; color:var(--ink-soft); text-align:center; margin:.4rem 0 0; line-height:1.45; }
/* "Edit" instead of ··· */
body.v2 .v2-dots-btn{ width:auto; height:34px; padding:0 .8rem; border-radius:999px; font-size:.78rem;
  font-weight:600; letter-spacing:0; font-family:var(--font-ui); }
body.v2 .v2-wmenu{ font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--font-ui); writing-mode:vertical-rl; color:var(--ink); }
body.v2 .v2-key em{ letter-spacing:0; font-size:.62rem; text-transform:uppercase; border:1px solid var(--blush-2);
  border-radius:5px; padding:1px 4px; }

/* ---- HOURS: many schedules ---- */
body.v2 .v2-hlist{ padding:.25rem .5rem; }
body.v2 .v2-hrow{ border-top:1px solid var(--blush); }
body.v2 .v2-hrow:first-child{ border-top:0; }
body.v2 .v2-hhead{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:transparent; border:0; padding:.75rem .5rem; color:var(--ink); font:inherit;
  letter-spacing:normal; text-transform:none; box-shadow:none; }
body.v2 .v2-hhead .m{ flex:1; min-width:0; }
body.v2 .v2-hhead b{ display:block; font-size:.95rem; font-weight:600; }
body.v2 .v2-hhead small{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:.1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v2 .v2-hhead > svg{ width:15px; height:15px; flex:none; color:var(--ink-soft); transition:transform .18s; }
body.v2 .v2-hrow.open .v2-hhead > svg{ transform:rotate(90deg); }
body.v2 .v2-hbody{ padding:0 .5rem .9rem; }
body.v2 .v2-htools{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:.7rem; }
body.v2 .v2-htools .v2-help{ margin:0; padding:.3rem .7rem; font-size:.72rem; }
body.v2 .v2-htools .v2-help::after{ display:none; }
body.v2 .v2-htools span{ font-size:.75rem; color:var(--ink-soft); margin-left:auto; }

/* ---- BOOK SOMEONE PILL: the open row keeps its dashed outline; the
   words on the right are a button you can see is a button, the same
   pill as Edit. */
body.v2 .v2-slot.open .go{ display:inline-flex; align-items:center; height:30px; padding:0 .85rem;
  border-radius:999px; background:var(--white); border:1px solid var(--blush-2);
  color:var(--ink); font-family:var(--font-ui); font-size:.76rem; font-weight:600; letter-spacing:0;
  white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.04); }
body.v2 .v2-slot.open:active .go{ transform:scale(.97); }
body.v2 .v2-slot.held .m{ font-size:.8rem; }

/* ---- PROFILE TILES: they are facts, not links — no arrow. Visits is
   the one you can change, and says so. */
body.v2 #cpStats .v2-stat::after{ display:none; }
body.v2 #cpStats .v2-stat{ cursor:default; }
body.v2 #cpStats .cp-visits{ cursor:pointer; }
body.v2 #cpStats .v2-stat-l{ display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
body.v2 .cp-edit{ font-size:.62rem; font-weight:600; letter-spacing:0; text-transform:none; padding:1px 7px;
  border:1px solid var(--blush-2); border-radius:999px; color:var(--ink); background:var(--white); }
body.v2 .cp-sub{ font-size:.64rem; color:var(--ink-soft); margin-top:.2rem; line-height:1.3; }

/* ---- SHOP, NEW-ADMIN STYLE ------------------------------------ */
body.v2 #v2ShopList{ display:block; margin-bottom:1rem; }
body.v2 .v2-shop-ft.v2only{ display:block; }
body.v2 #v2ShopRows .v2-bk{ margin-bottom:.5rem; }
body.v2 .v2-shop-img{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none;
  background:var(--blush); border:1px solid var(--blush-2); display:block; }
body.v2 .v2-shop-row.sold .v2-shop-img{ filter:grayscale(.6) opacity(.6); }
body.v2 .v2-shop-r{ display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex:none; }
body.v2 .v2-shop-r b{ font-size:.95rem; font-weight:650; font-variant-numeric:tabular-nums; }
body.v2 #v2ShopAdd{ width:100%; height:46px; margin-top:.2rem; display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1.5px dashed var(--blush-2); border-radius:14px; background:transparent; }
body.v2 #v2ShopAdd svg{ width:18px; height:18px; }
body.v2 .v2-shop-ft{ font-size:1.05rem; font-weight:650; color:var(--ink); margin:0 0 .85rem; font-family:var(--font-ui); }
body.v2 #storeView .v2-shop-card #pnCancel{ width:100%; height:44px; border-radius:10px; }
body.v2 .v2-shop-acts{ display:none; justify-content:space-between; gap:.6rem; margin-top:.9rem; padding-top:.8rem;
  border-top:1px solid var(--blush); }
body.v2 .v2-shop-acts.on{ display:flex; }
body.v2 .v2-shop-link{ background:none; border:0; padding:.3rem 0; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--ink); cursor:pointer; }
body.v2 .v2-shop-link.red{ color:var(--btn-danger-fg,#c0392b); margin-left:auto; }
body.v2 #storeView .v2-shop-card label[style*="display:flex"]{ font-size:.84rem; }

/* ---- ONE WEEK, EVERY DAY (the week's Edit sheet) ------------------ */
body.v2 #v2Menu.wk #v2MenuItems{ max-height:min(72vh,640px); overflow:auto; -webkit-overflow-scrolling:touch; }
body.v2 .v2-wk{ border-top:1px solid var(--blush); padding:.7rem .55rem .2rem; }
body.v2 .v2-wk-h{ font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:.5rem; display:flex;
  justify-content:space-between; align-items:baseline; gap:.5rem; }
body.v2 .v2-wk-h small{ font-weight:500; color:var(--ink-soft); font-size:.72rem; }
body.v2 .v2-wk-d{ padding:.6rem 0; border-top:1px solid var(--blush); }
body.v2 .v2-wk-d:first-of-type{ border-top:0; }
body.v2 .v2-wk-d.past{ opacity:.45; }
body.v2 .v2-wk-top{ display:flex; align-items:center; gap:.45rem; margin-bottom:.45rem; }
body.v2 .v2-wk-n{ flex:1; font-size:.84rem; color:var(--ink-soft); font-weight:500; }
body.v2 .v2-wk-n b{ color:var(--ink); font-weight:700; font-size:.95rem; margin-left:.15rem; }
body.v2 .v2-wk-set{ width:auto; height:30px; padding:0 .5rem; font-size:.76rem; border-radius:8px;
  border:1px solid var(--blush-2); background:var(--white); color:var(--ink); }
body.v2 .v2-wk-tog{ height:30px; padding:0 .75rem; border-radius:999px; font:inherit; font-size:.76rem; font-weight:600;
  border:1px solid var(--st-open-fg,#3f8b62); color:var(--st-open-fg,#3f8b62); background:var(--st-open-bg,#e9f5ee); cursor:pointer; }
body.v2 .v2-wk-tog.off{ border-color:var(--blush-2); color:var(--ink-soft); background:var(--white); }
body.v2 .v2-wk-t{ display:flex; flex-wrap:wrap; gap:.35rem; }
body.v2 .v2-wt{ height:32px; padding:0 .65rem; border-radius:9px; font:inherit; font-size:.78rem; font-weight:600;
  border:1.5px solid var(--blush-2); background:var(--white); color:var(--ink); cursor:pointer; white-space:nowrap; }
body.v2 .v2-wt.x{ background:transparent; color:var(--ink-soft); text-decoration:line-through; border-style:dashed; font-weight:500; }
body.v2 .v2-wt.far{ background:transparent; color:var(--ink-soft); border-style:dashed; font-weight:500; }
body.v2 .v2-wt.b{ background:var(--sel-bg,var(--ribbon)); border-color:transparent; color:var(--on-accent,#fff); }
body.v2 .v2-wt.p{ background:var(--st-pend-bg,#ffe3a3); border-color:transparent; color:var(--st-pend-fg,#8a6d1a); }
body.v2 .v2-wt:disabled{ cursor:default; }
body.v2 .v2-wk-none{ font-size:.78rem; color:var(--ink-soft); }
body.v2 .v2-wk-key{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem; font-size:.7rem; color:var(--ink-soft);
  padding:.7rem 0 .3rem; border-top:1px solid var(--blush); margin-top:.3rem; }
body.v2 .v2-wk-key i{ display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:-.45rem;
  border:1.5px solid var(--blush-2); background:var(--white); vertical-align:-2px; }
body.v2 .v2-wk-key i.x{ border-style:dashed; background:transparent; }
body.v2 .v2-wk-key i.far{ border-style:dashed; background:transparent; }
body.v2 .v2-wk-key i.b{ background:var(--sel-bg,var(--ribbon)); border-color:transparent; }

/* ---- BLOCK PILL: beside Book someone, same pill, quieter ---- */
body.v2 .v2-slot.open .m{ flex:1; min-width:0; }
body.v2 .v2-slot.open .go + .go{ margin-left:-.3rem; }
body.v2 .v2-slot.open .go.blk{ color:var(--ink-soft); background:transparent; }
/* a blocked time: the same pill, now saying Reopen */
body.v2 .v2-slot.blocked .go{ display:inline-flex; align-items:center; height:30px; padding:0 .85rem;
  border-radius:999px; background:var(--white); border:1px solid var(--blush-2);
  color:var(--ink); font-family:var(--font-ui); font-size:.76rem; font-weight:600; letter-spacing:0; white-space:nowrap; }
body.v2 .v2-slot.blocked .m{ flex:1; min-width:0; }
@media (max-width:380px){ body.v2 .v2-slot.open .m{ display:none; } }

/* ---- WEEK ADD TIME ---- */
body.v2 .v2-wt.add{ border-style:dashed; color:var(--pink-dark); background:transparent; font-weight:600; }
body.v2 .v2-wt.one{ border-style:solid; border-color:var(--pink-dark); }
body.v2 .v2-wk-t .v2-wk-none{ align-self:center; margin-right:.2rem; }

/* ---- "+ Add a schedule": a real button inside the dashed card ---- */
body.v2 .v2-hmore-go{ display:inline-flex; align-items:center; height:34px; padding:0 1rem; margin-top:.7rem;
  border-radius:999px; background:var(--sel-bg,var(--ribbon)); color:var(--on-accent,#fff);
  font-family:var(--font-ui); font-size:.8rem; font-weight:600; letter-spacing:0; white-space:nowrap; }
body.v2 .v2-hmore:active .v2-hmore-go{ transform:scale(.97); }

/* ---- SPANISH SETTINGS: its own screen, just the switch ---- */
body.v2[data-vset="lang"] #langCard h2{ display:none; }

/* ---- a service's Spanish, in its own section like a policy's ---- */
body.v2 .v2-svc-es{ margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--blush-2); }
body.v2 .v2-svc-es-t{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
body.v2 .v2-svc-es label .muted{ font-weight:400; text-transform:none; letter-spacing:0; }

/* ---- which number is which schedule, over the days ---- */
body.v2 .v2-hkey{ font-size:.76rem; color:var(--ink); margin:-.3rem 0 .5rem; line-height:1.9; }
body.v2 .v2-hkey i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--blush); color:var(--pink-dark); font-size:.66rem; font-weight:700; margin-right:.3rem; }

/* ---- SERVICES TOP: My page shortcut, Add beside the first category ---- */
.v2-mp-short{ display:none; }
body.v2 #svcHead > #svcAdd{ display:none; }
body.v2 .v2-mp-short{ display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  background:var(--white); border:1px solid var(--blush-2); border-radius:14px;
  padding:.75rem .85rem; margin:0 0 1rem; cursor:pointer; font:inherit; color:var(--ink); }
body.v2 .v2-mp-ic{ width:36px; height:36px; border-radius:10px; background:var(--blush);
  color:var(--pink-dark,var(--ink)); display:flex; align-items:center; justify-content:center; flex:none; }
body.v2 .v2-mp-ic svg{ width:19px; height:19px; }
body.v2 .v2-mp-m{ display:flex; flex-direction:column; min-width:0; flex:1; }
body.v2 .v2-mp-t{ font-size:.95rem; font-weight:600; }
body.v2 .v2-mp-s{ font-size:.8rem; color:var(--ink-soft); margin-top:.1rem; }
body.v2 .v2-mp-c{ width:16px; height:16px; color:var(--ink-soft); flex:none; }
body.v2 .v2-svc-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
body.v2 .v2-svc-lbl0{ margin-bottom:.6rem; justify-content:flex-end; }
body.v2 .v2-svc-top #svcAdd{ height:32px; padding:0 .8rem; }

/* ---- DAYS YOU'RE OPEN: default line ---- */
body.v2 .v2-htitle + .v2-hdef{ font-size:.8rem; font-weight:500; color:var(--ink-soft); margin:-.55rem 0 .6rem; }


/* ===== ADMIN UX PASS (Sep 2026) ===== */
body.v2 a.v2-btn{ text-decoration:none; }
body.v2 .v2-req .acts .v2-btn.x.dec{ flex:none; width:auto; padding:0 .9rem; }
body.v2 .v2-req .what.dep{ color:var(--st-pend-fg,#8a6d1a); font-weight:700; margin-top:.3rem; }
body.v2 #cpActs .v2-btn.wide{ grid-column:1 / -1; }
body.v2 .v2-kv small{ font-weight:500; color:var(--ink-soft); }
body.v2 .v2-priv{ padding:.2rem; }
body.v2 .v2-priv textarea{ width:100%; border:0; background:transparent; resize:vertical; min-height:3.2rem;
  font:inherit; font-size:.92rem; color:var(--ink); padding:.6rem .7rem; box-shadow:none; }
body.v2 .v2-priv-list{ padding:.3rem .9rem; margin-bottom:.9rem; }
body.v2 .v2-priv-list div{ padding:.55rem 0; border-top:1px solid var(--blush); font-size:.9rem; color:var(--ink); }
body.v2 .v2-priv-list div:first-child{ border-top:0; }
body.v2 .v2-priv-list small{ display:block; font-size:.7rem; color:var(--ink-soft); margin-bottom:.1rem; }

/* share sheet */
body.v2 .v2-share-url{ font-size:.9rem; font-weight:600; color:var(--ink); background:var(--blush);
  border-radius:10px; padding:.6rem .8rem; margin-bottom:.7rem; overflow-wrap:anywhere; }
body.v2 .v2-share-list{ display:flex; flex-direction:column; }
body.v2 .v2-share-i{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  background:transparent; border:0; border-top:1px solid var(--blush); border-radius:0; box-shadow:none;
  padding:.75rem .2rem; color:var(--ink); font:inherit; letter-spacing:0; text-transform:none; }
body.v2 .v2-share-i:first-child{ border-top:0; }
body.v2 .v2-share-i svg{ width:20px; height:20px; flex:none; color:var(--ink-soft); }
body.v2 .v2-share-i b{ display:block; font-size:.95rem; font-weight:600; }
body.v2 .v2-share-i small{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:.1rem; }

/* Calendar | Hours */
body.v2 .v2-ctabs{ display:flex; gap:3px; background:var(--blush); border-radius:12px; padding:3px; margin:0 0 1rem; }
body.v2 .v2-ctabs button{ flex:1; height:38px; padding:0; border:0; border-radius:9px; background:transparent;
  color:var(--ink-soft); font:600 .88rem var(--font-ui); letter-spacing:0; text-transform:none; box-shadow:none; }
body.v2 .v2-ctabs button.on{ background:var(--white); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }
body.v2.v2-cal-hrs #v2Cal > *:not(#calHead):not(#v2CalSeg):not(#v2Menu){ display:none !important; }
body.v2.v2-cal-hrs #calHead p{ display:none; }
body.v2:not(.v2-cal-hrs) #v2HrsHead, body.v2:not(.v2-cal-hrs) #v2Hours{ display:none !important; }
body.v2 .v2-wmenu{ writing-mode:horizontal-tb; font-size:0; }
body.v2 .v2-wmenu svg{ width:14px; height:14px; }
body.v2 .v2-key em.pen{ display:inline-flex; border:1px solid var(--blush-2); border-radius:5px; padding:1px 3px; }
body.v2 .v2-key em.pen svg{ width:10px; height:10px; }

/* switches, instead of the browser's own checkbox */
body.v2 input.v2-tog, body.v2 #spanishOn, body.v2 #groupSwitcherOn, body.v2 #pnSold{
  -webkit-appearance:none; appearance:none; width:44px !important; min-width:44px; height:26px; padding:0 !important;
  border-radius:999px; background:var(--blush-2); position:relative; flex:none; cursor:pointer;
  border:0 !important; margin:0 !important; box-shadow:none; transition:background .15s; }
body.v2 input.v2-tog::after, body.v2 #spanishOn::after, body.v2 #groupSwitcherOn::after, body.v2 #pnSold::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
body.v2 input.v2-tog:checked, body.v2 #spanishOn:checked, body.v2 #groupSwitcherOn:checked, body.v2 #pnSold:checked{
  background:var(--sel-bg,var(--ribbon)); }
body.v2 input.v2-tog:checked::after, body.v2 #spanishOn:checked::after, body.v2 #groupSwitcherOn:checked::after, body.v2 #pnSold:checked::after{ left:21px; }
body.v2[data-vset="lang"] #saveBtn, body.v2[data-vset="lang"] #saveBtn + p,
body.v2[data-vset="form"] #saveBtn, body.v2[data-vset="form"] #saveBtn + p,
body.v2[data-vset="form"] #formCard h2{ display:none; }

/* service form */
body.v2 .v2-sfcats{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
body.v2 .v2-sfcats .v2-chip{ margin:0; }
body.v2 .v2-sw{ display:flex !important; align-items:center; justify-content:space-between; gap:.8rem;
  margin:.8rem 0 0 !important; padding:.7rem .85rem; border:1px solid var(--blush-2); border-radius:12px;
  text-transform:none !important; letter-spacing:0 !important; cursor:pointer; }
body.v2 .v2-sw b{ display:block; font-size:.92rem; font-weight:600; color:var(--ink); }
body.v2 .v2-sw + .v2-two, body.v2 .v2-sw + .v2-sw + .v2-two{ margin-top:.4rem; }
body.v2 .v2-sw small{ display:block; font-size:.78rem; font-weight:400; color:var(--ink-soft); margin-top:.1rem; }
body.v2 .v2-file{ display:flex !important; align-items:center; justify-content:center; min-height:52px;
  border:1.5px dashed var(--blush-2); border-radius:12px; color:var(--ink-soft); font-size:.9rem !important;
  font-weight:600; text-transform:none !important; letter-spacing:0 !important; cursor:pointer; margin:0 0 .6rem !important; }
body.v2 .v2-file input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
body.v2 #svcFormActs{ position:sticky; bottom:calc(var(--v2-bar) + .5rem); z-index:5;
  background:var(--white); border:1px solid var(--blush-2); border-radius:14px; padding:.55rem;
  box-shadow:0 -4px 14px rgba(0,0,0,.06); }
@media(min-width:860px){ body.v2 #svcFormActs{ bottom:.8rem; } }
body.v2 .v2-svc.off{ opacity:.55; }
body.v2 .v2-svc.ord{ cursor:default; }
body.v2 .v2-mv{ width:40px; height:40px; flex:none; padding:0; border-radius:10px; border:1.5px solid var(--blush-2);
  background:transparent; color:var(--ink); font-size:1.05rem; box-shadow:none; margin-left:.35rem; }
body.v2 .v2-ord-go{ display:block; margin:.6rem auto 0; }
body.v2 .v2-ord-done{ width:100%; margin-top:.8rem; }

/* booking form fields */
body.v2 .v2-frow{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.6rem 0; border-top:1px solid var(--blush); }
body.v2 .v2-frow:first-child{ border-top:0; }
body.v2 .v2-frow b{ font-size:.92rem; font-weight:600; color:var(--ink); }
body.v2 .v2-fseg{ display:flex; gap:2px; background:var(--blush); border-radius:10px; padding:2px; }
body.v2 .v2-fseg button{ height:32px; padding:0 .6rem; border:0; border-radius:8px; background:transparent;
  color:var(--ink-soft); font:600 .76rem var(--font-ui); letter-spacing:0; text-transform:none; box-shadow:none; }
body.v2 .v2-fseg button.on{ background:var(--white); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }
body.v2 #bookingsPane .v2-search{ margin-bottom:.7rem; }
body.v2 #csvBtn.v2only{ display:inline-block; }


/* ===== sign-in centred on the phone, with her logo above it ===== */
body.v2:has(#loginCard:not(.hidden)){ padding-bottom:0; }
body.v2:has(#loginCard:not(.hidden)) .wrap{ min-height:100dvh; display:flex; flex-direction:column;
  justify-content:center; box-sizing:border-box; max-width:460px; margin:0 auto;
  padding:1.5rem 16px calc(1.5rem + env(safe-area-inset-bottom,0px)); }
body.v2:has(#loginCard:not(.hidden)) .wrap > .crown{ display:block !important; margin:0 auto 1.3rem;
  max-width:min(var(--logo-max,280px),62vw); max-height:30vh; width:auto; object-fit:contain; }
body.v2:has(#loginCard:not(.hidden)) .wrap > h1:not(.sr-only){ display:block !important; text-align:center; margin:0 0 1rem; }
body.v2:has(#loginCard:not(.hidden)) #loginCard{ margin:0; width:100%; box-sizing:border-box; }
@media(min-width:860px){ body.v2:has(#loginCard:not(.hidden)){ padding-left:0; } }

/* ===== final amount paid ===== */
body.v2 .v2-fin{ display:flex; align-items:center; gap:.5rem; padding:.45rem .5rem .45rem .9rem; }
body.v2 .v2-fin .cur{ font-weight:700; color:var(--ink-soft); }
body.v2 .v2-fin input{ flex:1; min-width:0; border:0; background:transparent; font:600 1.15rem var(--font-ui);
  color:var(--ink); padding:.5rem 0; margin:0; box-shadow:none; }
body.v2 .v2-fin .v2-btn{ flex:none; height:40px; }
body.v2 .v2-fin-s{ font-size:.78rem; color:var(--ink-soft); margin:.4rem .2rem 0; line-height:1.4; }
body.v2 .v2-finlist{ padding:.2rem .9rem; margin-bottom:1rem; }
body.v2 .v2-finlist button{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:.6rem;
  background:transparent; border:0; border-top:1px solid var(--blush); border-radius:0; box-shadow:none;
  padding:.7rem 0; color:var(--ink); font:inherit; text-align:left; letter-spacing:0; text-transform:none; }
body.v2 .v2-finlist button:first-child{ border-top:0; }
body.v2 .v2-finlist b{ display:block; font-size:.92rem; font-weight:600; }
body.v2 .v2-finlist small{ display:block; font-size:.78rem; color:var(--ink-soft); }
body.v2 .v2-finlist em{ font-style:normal; font-weight:700; font-size:.82rem; color:var(--ink);
  border:1.5px solid var(--blush-2); border-radius:999px; padding:.25rem .8rem; }
body.v2 .v2-finlist p{ font-size:.78rem; color:var(--ink-soft); margin:.2rem 0 .6rem; }

/* client note on the profile */
body.v2 #cpNote{ margin:0 0 1rem; }
body.v2 #cpNote .v2-sec{ margin-top:.2rem; }
body.v2 .v2-clnote{ white-space:pre-wrap; }

body.v2 .v2-lbl .v2-lbl-s{ font-size:.66rem; font-weight:600; letter-spacing:.02em; text-transform:none; opacity:.85; }

/* ---------- card payments (brand.js cardPay only — hidden otherwise) ---------- */
body.v2 #payCard .pay-test{ display:inline-block; margin-left:.4rem; padding:.1rem .45rem; font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; background:#fff4d6; color:#8a5a00; border-radius:4px; vertical-align:2px; }
body.v2 #payCard .pay-list{ margin:0 0 1rem 1.1rem; padding:0; line-height:1.7; color:var(--ink-soft); font-size:.9rem; }
body.v2 #payCard .pay-ok{ display:flex; align-items:center; gap:.55rem; margin:.1rem 0 .2rem; }
body.v2 #payCard .pay-ok .pay-ck{ width:26px; height:26px; border-radius:50%; background:#1a7f45; color:#fff; display:grid; place-items:center; font-weight:800; font-size:.9rem; }
/* a grid, not a wrapping flex row: the label is a bare text node, and in a
   wrapping row a long one (the Spanish) dropped whole under its checkbox */
body.v2 #payCard .pay-sw{ display:grid; grid-template-columns:auto 1fr; align-items:start; column-gap:.55rem; row-gap:.1rem; margin:.5rem 0; text-transform:none; letter-spacing:0; font-size:.95rem; font-weight:500; line-height:1.35; }
body.v2 #payCard .pay-sw input{ width:auto; margin:.2rem 0 0; }
body.v2 #payCard .pay-sw small{ grid-column:2; color:var(--ink-soft); font-size:.78rem; }
body.v2 #payCard .pay-sw.off{ opacity:.6; }
body.v2 #payCard .pay-warn{ font-size:.85rem; color:#9a3412; margin:.4rem 0; }
body.v2 #payCard .pay-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.9rem; }
body.v2 #payCard .pay-stats div{ border:1px solid var(--blush-2); padding:.65rem .75rem; border-radius:var(--r-card,12px); }
body.v2 #payCard .pay-stats small{ display:block; color:var(--ink-soft); font-size:.74rem; }
body.v2 #payCard .pay-stats b{ font-size:1.35rem; }
body.v2 .pay-g{ color:#1a7f45; }
.pay-amt{ display:flex; align-items:center; gap:.3rem; border:2px solid var(--ribbon); border-radius:12px; padding:.5rem .9rem; margin:0; }
.pay-amt span{ font-size:1.8rem; color:var(--ink-soft); }
.pay-amt input{ border:0!important; outline:0; background:transparent; font-size:2rem!important; font-weight:800; width:100%; padding:0!important; margin:0!important; box-shadow:none!important; }
.pay-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.8rem; }
.pay-qr{ width:min(250px,70vw); margin:.2rem auto .6rem; }
.pay-qr svg{ display:block; width:100%; height:auto; border-radius:10px; border:1px solid #e3e7ef; }
.pay-big{ text-align:center; font-size:2.1rem; font-weight:800; letter-spacing:-.01em; }
.pay-wait{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.8rem; font-size:.88rem; color:var(--ink-soft); }
.pay-wait::before{ content:''; width:14px; height:14px; border-radius:50%; border:2px solid var(--blush-2); border-top-color:var(--ribbon); animation:paySpin 1s linear infinite; }
@keyframes paySpin{ to{ transform:rotate(360deg); } }
.pay-done{ text-align:center; padding:.6rem 0; }
.pay-done span{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#1a7f45; color:#fff; font-size:1.8rem; font-weight:800; }
.pay-done b{ display:block; font-size:1.6rem; margin-top:.6rem; }
.pay-done small{ display:block; color:var(--ink-soft); margin-top:.2rem; }

/* Book Now on each service — sits with the My page / Current deals rows
   above it, so it gets their white card rather than a bare outline */
body.v2 #menuBookRow{ background:var(--white); border-radius:14px; padding:.75rem .85rem; margin:0 0 1rem !important; }
body.v2 #menuBookRow b{ font-size:.95rem; }