:root {
  /* LeBella Nails & Spa palette, matched to lebellanailspa.com: ivory, champagne and gold */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #FBF7EE;
  --ink: #0B0A08;
  --ink-2: #5A544A;
  --line: #E8DCC2;
  --accent: #8A6219;
  --accent-ink: #ffffff;
  --accent-soft: #F2E6CC;
  --gold: #C9973A;
  --ok: #3f7a5a;
  --ok-soft: #e3f0e8;
  --warn: #a5552f;
  --warn-soft: #f7e6dc;
  --shadow: 0 1px 2px rgba(92, 83, 87, .05), 0 8px 24px rgba(201, 151, 58, .08);
  --radius: 18px;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 74px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0A08;
    --surface: #16130F;
    --surface-2: #201B13;
    --ink: #F6F1E6;
    --ink-2: #C9C0AE;
    --line: #3A3122;
    --accent: #E9C46E;
    --accent-ink: #1A1306;
    --accent-soft: #3A2E15;
    --gold: #E9C46E;
    --ok: #8fd0aa;
    --ok-soft: #1f3329;
    --warn: #f0a77f;
    --warn-soft: #3b261c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 1.75rem; }
.muted { color: var(--ink-2); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 600; color: var(--gold); margin: 0 0 .5rem; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell ---------- */
.app { display: flex; flex-direction: column; height: 100dvh; }
.main { flex: 1; min-height: 0; min-width: 0; position: relative; }
.view { display: none; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--safe-t) + 16px) 16px calc(var(--tabbar-h) + var(--safe-b) + 24px); }
.view.is-active { display: block; }
.view-head { margin-bottom: 18px; }
.view-head p { margin: 4px 0 0; }
.view-head.row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; }

/* phone: bottom tab bar */
.rail {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex; justify-content: space-around;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-top: 1px solid var(--line);
}
.brand, .rail-foot { display: none; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; color: var(--ink-2); font-size: .7rem; font-weight: 500;
}
.tab.is-active { color: var(--accent); }
.tab.is-active svg { fill: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---------- concierge ---------- */
#view-concierge.is-active { display: flex; gap: 24px; padding: 0; overflow: hidden; }
.chat-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.chat-head {
  display: flex; justify-content: space-between; align-items: center; margin: 0;
  padding: calc(var(--safe-t) + 12px) 16px 12px; border-bottom: 1px solid var(--line);
}
.chat-head h1 { font-size: 1.25rem; }
.concierge-id { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  color: #fff; background: linear-gradient(135deg, #E9C46E, #C9973A 55%, #8A6219);
}
.status { margin: 0; font-size: .8rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf7d; box-shadow: 0 0 0 3px color-mix(in srgb, #4caf7d 25%, transparent); }
.ghost-btn { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .85rem; color: var(--ink-2); }
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }

.messages { flex: 1; overflow-y: auto; padding: 20px 16px 12px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.welcome { margin: auto 0 8px; padding: 8px 4px; animation: rise .5s ease both; }
.welcome h2 { font-size: 1.9rem; line-height: 1.15; margin-bottom: 8px; }
.welcome > p:not(.eyebrow) { color: var(--ink-2); margin: 0 0 18px; max-width: 34ch; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 14px; font-size: .9rem;
  box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.suggestion:hover, .suggestion:active { border-color: var(--accent); transform: translateY(-1px); }

.msg { max-width: min(85%, 560px); padding: 10px 14px; border-radius: 20px; animation: rise .25s ease both; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.msg.bot.error { border-color: var(--warn); }
.card-wrap { align-self: flex-start; width: min(100%, 560px); animation: rise .3s ease both; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

.composer {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 0 12px calc(var(--tabbar-h) + var(--safe-b) + 10px); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
}
.composer textarea {
  flex: 1; border: 0; background: none; resize: none; outline: none; padding: 9px 8px; max-height: 140px;
  font-size: 16px; /* prevents iOS zoom */
}
.send-btn, .icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center;
}
.send-btn { background: var(--accent); color: var(--accent-ink); }
.send-btn:disabled { opacity: .4; }
.icon-btn { background: var(--surface-2); color: var(--ink-2); font-size: 1.3rem; }
.icon-btn.listening { background: var(--accent); color: var(--accent-ink); animation: pulse 1.2s infinite; }

/* rich cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.card h4 { margin: 0 0 2px; font-family: var(--serif); font-size: 1.05rem; }
.card .meta { color: var(--ink-2); font-size: .85rem; margin: 0 0 12px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 8px 6px; text-align: center;
  display: flex; flex-direction: column; line-height: 1.2; transition: all .15s;
}
.slot strong { font-size: .95rem; }
.slot small { color: var(--ink-2); font-size: .72rem; }
.slot:hover, .slot.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.slot.is-picked { box-shadow: inset 0 0 0 1px var(--accent); }
.card.booking { border-left: 4px solid var(--ok); }
.card.booking.cancelled { border-left-color: var(--warn); }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); margin-bottom: 8px; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .9rem; margin: 8px 0 12px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 500; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 12px; font-size: .85rem; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-btn.danger:hover { border-color: var(--warn); color: var(--warn); }
.menu-cat { margin: 4px 0 6px; font-size: .75rem; color: var(--gold); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.menu-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.visit-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.visit-row:first-of-type { border-top: 0; }

/* side panel (wide only) */
.side-panel { display: none; }
.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.panel-card p { margin: 0 0 4px; }
.hours { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.hours li { display: flex; justify-content: space-between; padding: 3px 0; }
.hours li.today { font-weight: 700; color: var(--accent); }

/* ---------- book ---------- */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.book-col { min-width: 0; }
.view { overflow-x: hidden; }
.step { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 6px 0 12px; }
.step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem var(--sans); background: var(--accent); color: var(--accent-ink); }
.seg { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--surface-2); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; border: 0; background: none; padding: 6px 16px; border-radius: 999px; font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.service-list { display: grid; gap: 8px; }
.service {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; transition: border-color .15s, background .15s;
}
.service .name { font-weight: 600; }
.service .desc { grid-column: 1; color: var(--ink-2); font-size: .82rem; }
.service .price { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-weight: 600; }
.service .price small { display: block; color: var(--ink-2); font-weight: 400; font-size: .75rem; }
.service.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.service .tag { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-left: 6px; }
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; margin-bottom: 8px; }
.date-strip button {
  flex: none; width: 58px; scroll-snap-align: start; border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
  padding: 8px 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.date-strip button small { font-size: .7rem; color: var(--ink-2); text-transform: uppercase; }
.date-strip button strong { font-size: 1.2rem; font-family: var(--serif); }
.date-strip button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.date-strip button.is-active small { color: inherit; opacity: .85; }
.date-strip button:disabled { opacity: .35; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: .85rem; color: var(--ink-2); }
.field em { font-style: normal; opacity: .7; }
.field.inline { flex-direction: row; align-items: center; gap: 10px; }
.field input, .field select, .field textarea, .lookup input {
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 11px 12px; color: var(--ink); font-size: 16px; outline: none;
}
.field input:focus, .field textarea:focus, .lookup input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slot-grid { margin-bottom: 24px; }
.summary { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: .9rem; }
.summary p { margin: 0; }
.summary .total { display: flex; justify-content: space-between; font-weight: 600; margin-top: 6px; }
.primary-btn {
  border: 0; border-radius: 999px; padding: 13px 22px; background: var(--accent); color: var(--accent-ink); font-weight: 600; width: 100%;
  transition: transform .1s, opacity .15s;
}
.primary-btn:active { transform: scale(.98); }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; }
.form-error { color: var(--warn); font-size: .9rem; min-height: 1.2em; }
.confirm { text-align: center; padding: 24px 12px; }
.confirm .big { font-size: 2.5rem; }

/* ---------- visits ---------- */
.lookup { display: flex; gap: 8px; margin-bottom: 18px; max-width: 520px; }
.lookup input { flex: 1; }
.lookup .primary-btn { width: auto; }
.visit-list { display: grid; gap: 12px; max-width: 640px; }

/* ---------- salon dashboard ---------- */
/* ---------- category colours (Fresha-style pastels) ---------- */
.cat-0 { --c-bg: #6ed8cf; --c-ink: #063f3a; --c-soft: #e3f8f6; }  /* Nails: teal */
.cat-1 { --c-bg: #a9e1f8; --c-ink: #083a55; --c-soft: #e9f7fd; }  /* Hair: sky */
.cat-2 { --c-bg: #dcd8fc; --c-ink: #2e2380; --c-soft: #f3f1fe; }  /* Lashes & brows: lavender */
.cat-3 { --c-bg: #e6f49b; --c-ink: #3f4c05; --c-soft: #f7fbdf; }  /* Skin & massage: lime */
.cat-4 { --c-bg: #f8c3dc; --c-ink: #6d1640; --c-soft: #fdecf4; }  /* Waxing: pink */
.cat-5 { --c-bg: #fcc27a; --c-ink: #5a3200; --c-soft: #fef0dc; }  /* orange */
.cat-6 { --c-bg: #f9b4a8; --c-ink: #6b1d12; --c-soft: #feedea; }  /* coral */
.cat-7 { --c-bg: #b5ebb8; --c-ink: #134a1a; --c-soft: #eaf9eb; }  /* mint */
.cat-8 { --c-bg: #fbe38a; --c-ink: #5a4300; --c-soft: #fef8dc; }  /* butter */
.cat-9 { --c-bg: #c9d3e3; --c-ink: #23324a; --c-soft: #eff2f7; }  /* slate */
@media (prefers-color-scheme: dark) {
  .cat-0, .cat-1, .cat-2, .cat-3, .cat-4, .cat-5, .cat-6, .cat-7, .cat-8, .cat-9 { --c-soft: color-mix(in srgb, var(--c-bg) 18%, var(--surface)); }
}

/* ---------- staff calendar ---------- */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.cal-date { display: flex; align-items: center; gap: 6px; }
.cal-date .icon-btn { width: 36px; height: 36px; }
.date-title { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 10px; font: 600 1.35rem var(--serif); cursor: pointer; white-space: nowrap; }
.date-title:hover { background: var(--surface-2); }
.date-title svg { width: 18px; height: 18px; }
.date-title input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.date-title input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.cal-mode { margin: 0; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { border-radius: var(--radius); padding: 14px 16px; background: var(--c-soft, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-bg, var(--line)) 45%, transparent); }
.stat small { color: var(--c-ink, var(--ink-2)); font-size: .78rem; font-weight: 500; opacity: .85; }
.stat strong { display: block; font: 600 1.7rem var(--serif); margin-top: 2px; color: var(--c-ink, var(--ink)); }
@media (prefers-color-scheme: dark) { .stat small, .stat strong { color: var(--ink); } }

.schedule { margin-bottom: 14px; }
.cal-scroll {
  overflow: auto; overscroll-behavior: contain; max-height: calc(100dvh - 260px); min-height: 420px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cal { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(var(--col-min, 132px), 1fr)); position: relative; }
.cal-corner, .cal-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.cal-corner { left: 0; z-index: 4; }
.cal-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; text-align: center; }
.avatar-lg { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 1.05rem var(--sans); background: var(--av); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--av) 35%, transparent); }
.cal-head strong { font-size: .88rem; font-weight: 500; line-height: 1.2; }
.cal-head small { color: var(--ink-2); font-size: .7rem; }
.cal-gutter { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); height: calc(var(--hours) * var(--hour)); }
.cal-gutter span { position: absolute; right: 8px; transform: translateY(-50%); font-size: .72rem; color: var(--ink-2); line-height: 1.1; text-align: right; }
.cal-gutter span small { display: block; font-size: .62rem; }
.cal-gutter span:first-child { transform: translateY(2px); }
.cal-col {
  position: relative; height: calc(var(--hours) * var(--hour)); border-right: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% calc(var(--hour) / 2);
}
.cal-col:last-child { border-right: 0; }
.cal-col.closed { background-color: var(--surface-2); background-image: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--line) 70%, transparent) 8px 9px); }
.block {
  position: absolute; left: 4px; right: 4px; overflow: hidden; border-radius: 10px; padding: 6px 8px;
  background: var(--c-bg); color: var(--c-ink); font-size: .78rem; line-height: 1.25; cursor: default;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .12s, box-shadow .12s;
}
.block:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12); z-index: 1; }
.block .t { font-size: .72rem; opacity: .85; }
.block strong { display: block; font-size: .86rem; font-weight: 600; margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .svc { opacity: .9; }
.block .ai { position: absolute; top: 5px; right: 7px; font-size: .7rem; }
.block.short { padding: 3px 8px; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.block.short strong { margin: 0; font-size: .78rem; }
.block.cancelled { opacity: .55; background: repeating-linear-gradient(135deg, var(--c-bg) 0 6px, var(--c-soft) 6px 12px); }
.block.cancelled strong { text-decoration: line-through; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #e5484d; z-index: 2; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; }
.cal-empty { padding: 28px 16px; text-align: center; color: var(--ink-2); }

/* week view: rows = team, columns = days */
.week { display: grid; grid-template-columns: 84px repeat(7, minmax(118px, 1fr)); }
.week-corner, .week-day { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.week-corner { left: 0; z-index: 4; }
.week-day { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; gap: 2px; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink); }
.week-day b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .95rem; }
.week-day small { font-size: .72rem; color: var(--ink-2); }
.week-day.today b { background: var(--accent); color: var(--accent-ink); }
.week-day.today small { color: var(--accent); font-weight: 600; }
.week-day:hover b { box-shadow: 0 0 0 2px var(--accent-soft); }
.week-who { position: sticky; left: 0; z-index: 2; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-size: .72rem; }
.week-who .avatar-lg { width: 38px; height: 38px; font-size: .9rem; }
.week-cell { padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-height: 92px; }
.week-cell.closed { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, color-mix(in srgb, var(--line) 70%, var(--surface-2)) 8px 9px); }
.pill { border: 0; border-radius: 7px; padding: 4px 7px; background: var(--c-bg); color: var(--c-ink); font-size: .74rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pill.cancelled { opacity: .5; text-decoration: line-through; }
.more { font-size: .72rem; color: var(--ink-2); text-align: center; background: none; border: 0; cursor: pointer; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 2px 18px; font-size: .8rem; color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--c-bg); }
.handoffs ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.handoffs li { padding: 8px 0; border-top: 1px solid var(--line); }
.handoffs li:first-child { border-top: 0; }

.mode-pill { font-size: .72rem; border-radius: 999px; padding: 4px 10px; background: var(--surface-2); color: var(--ink-2); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 84px); transform: translateX(-50%); z-index: 80;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: .9rem; box-shadow: var(--shadow);
  animation: rise .2s ease both; max-width: calc(100% - 32px);
}

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- tablet & desktop: side rail ---------- */
@media (min-width: 768px) {
  .app { flex-direction: row; }
  .rail {
    position: static; flex-direction: column; justify-content: flex-start; gap: 4px;
    width: 92px; height: auto; padding: calc(var(--safe-t) + 18px) 10px 18px; border-top: 0; border-right: 1px solid var(--line);
    background: var(--bg); backdrop-filter: none;
  }
  .brand { display: flex; justify-content: center; margin-bottom: 18px; }
  .brand-mark {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff;
    font: 600 1.4rem var(--serif); background: linear-gradient(135deg, #E9C46E, #C9973A 55%, #8A6219);
  }
  .brand-text { display: none; }
  .tab { flex: none; padding: 10px 0; border-radius: 14px; font-size: .72rem; }
  .tab.is-active { background: var(--accent-soft); }
  .rail-foot { display: block; margin-top: auto; text-align: center; }
  .view { padding: calc(var(--safe-t) + 28px) 32px 32px; }
  .composer { margin: 0 24px 20px; }
  .messages { padding: 24px; }
  .chat-head { padding: calc(var(--safe-t) + 16px) 24px 14px; }
  .toast { bottom: 96px; }
  .book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .cal { --col-min: 150px; }
}

@media (min-width: 1100px) {
  .rail { width: 240px; padding-left: 18px; padding-right: 18px; }
  .brand { justify-content: flex-start; gap: 12px; align-items: center; }
  .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
  .brand-text strong { font: 600 1.15rem var(--serif); }
  .brand-text small { color: var(--ink-2); font-size: .75rem; }
  .tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: .95rem; }
  #view-concierge.is-active { padding-right: 28px; }
  .side-panel { display: flex; flex-direction: column; gap: 14px; width: 320px; flex: none; padding: calc(var(--safe-t) + 20px) 0 20px; overflow-y: auto; }
}

/* iPad landscape gets the side panel too, at a tighter width */
@media (min-width: 1000px) and (max-width: 1099px) {
  #view-concierge.is-active { padding-right: 20px; }
  .side-panel { display: flex; flex-direction: column; gap: 12px; width: 280px; flex: none; padding: calc(var(--safe-t) + 20px) 0 20px; overflow-y: auto; }
}

/* installed PWA on iPhone: no browser chrome */
@media (display-mode: standalone) and (max-width: 767px) {
  .chat-head { padding-top: calc(var(--safe-t) + 6px); }
}

/* staff PIN gate */
.pin-gate { max-width: 360px; margin: 40px auto; text-align: center; }
.pin-gate h2 { margin-bottom: 6px; }
.pin-gate form { display: flex; gap: 8px; margin-top: 16px; }
.pin-gate input { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 11px 12px; color: var(--ink); font-size: 16px; text-align: center; letter-spacing: .3em; }
.pin-gate .primary-btn { width: auto; }

/* ---------- staff calendar: extras ---------- */
.cal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.primary-btn.small { width: auto; padding: 8px 16px; font-size: .9rem; }
.primary-btn.danger { background: #d9534f; color: #fff; }
.chip-btn.danger { color: #c0392b; }
.cal-closed { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: .9rem; }
.cal-col { cursor: copy; }
.cal-now { position: relative; pointer-events: none; z-index: 2; }
.cal-col .off { position: absolute; left: 0; right: 0; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 85%, transparent) 0 7px, color-mix(in srgb, var(--line) 75%, transparent) 7px 8px); }
.tblock {
  position: absolute; left: 4px; right: 4px; border: 1px dashed color-mix(in srgb, var(--ink-2) 45%, transparent); border-radius: 10px; padding: 5px 8px; text-align: left;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, color-mix(in srgb, var(--line) 80%, var(--surface-2)) 6px 12px);
  color: var(--ink-2); font-size: .75rem; font-weight: 600; cursor: pointer; overflow: hidden; z-index: 1;
}
.block { border: 0; text-align: left; font-family: inherit; display: block; z-index: 1; cursor: pointer; }
.block > span, .block > strong { display: block; }
.block.short > * { display: inline; }
.block .st { position: absolute; bottom: 5px; right: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.65); color: var(--c-ink); padding: 1px 6px; border-radius: 999px; }
.block .note { position: absolute; top: 5px; right: 20px; font-size: .7rem; }
.block.st-arrived { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--c-ink) 70%, transparent); }
.block.st-completed { filter: saturate(.55); opacity: .8; }
.block.st-no_show { background: var(--surface); outline: 2px dashed #e5484d; outline-offset: -2px; color: var(--ink-2); }
.block.st-no_show strong { text-decoration: line-through; }
.block.st-cancelled { opacity: .45; background: repeating-linear-gradient(135deg, var(--c-bg) 0 6px, var(--c-soft) 6px 12px); }
.block.st-cancelled strong { text-decoration: line-through; }
.block.dragging { z-index: 10; opacity: .92; box-shadow: 0 14px 32px rgba(0,0,0,.25); transition: none; cursor: grabbing; }
.buffer { position: absolute; left: 4px; right: 4px; border-radius: 0 0 10px 10px; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--line) 80%, transparent) 0 4px, transparent 4px 8px); }
.pill-block { background: var(--surface-2); color: var(--ink-2); font-style: italic; cursor: default; }
.cal-legend .lg-block { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--line) 3px 6px); border: 1px dashed var(--ink-2); }
.cal-legend .lg-off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--line) 3px 4px); }

.staff-panels { display: grid; gap: 14px; }
@media (min-width: 900px) { .staff-panels { grid-template-columns: 3fr 2fr; align-items: start; } }
.wl-item { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.wl-item:first-child { border-top: 0; }
.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.small { font-size: .8rem; }

/* ---------- sheets (bottom sheet on phone, side panel on iPad/desktop) ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 10, 15, .38); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease both; }
.sheet {
  position: relative; width: 100%; max-height: 88dvh; overflow-y: auto; background: var(--surface); color: var(--ink);
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + var(--safe-b)); box-shadow: 0 -10px 40px rgba(0,0,0,.2); animation: sheet-up .24s cubic-bezier(.2,.8,.2,1) both;
}
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 8px; }
.sheet-close { position: absolute; top: 10px; right: 12px; z-index: 2; }
body.sheet-open { overflow: hidden; }
@media (min-width: 768px) {
  .sheet-backdrop { align-items: stretch; justify-content: flex-end; }
  .sheet { width: 440px; max-height: none; height: 100%; border-radius: 22px 0 0 22px; padding: 22px 24px; animation-name: sheet-in; }
  .sheet-grip { display: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-title { font-size: 1.5rem; margin: 6px 0 12px; }
.sheet-hero { margin: 4px -4px 14px; padding: 16px 16px 14px; border-radius: 16px; background: var(--c-bg, var(--surface-2)); color: var(--c-ink, var(--ink)); }
.sheet-hero .eyebrow { color: inherit; opacity: .75; }
.sheet-hero h2 { font-size: 1.6rem; margin: 2px 0 4px; }
.sheet-hero p { margin: 0; }
.sheet-hero .hero-meta { margin-top: 6px; font-size: .88rem; opacity: .9; }
.hero-block { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, color-mix(in srgb, var(--line) 80%, var(--surface-2)) 8px 16px); }
.sheet-row { margin-bottom: 12px; }
.sheet-row a { text-decoration: none; color: var(--ink); display: inline-block; }
.field-label { font-size: .85rem; color: var(--ink-2); margin: 0 0 6px; }
.status-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.st-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 12px; font-size: .85rem; }
.st-btn.is-active.st-confirmed { background: #dcd8fc; border-color: #9b8ff0; color: #2e2380; }
.st-btn.is-active.st-arrived { background: #a9e1f8; border-color: #4bb3e6; color: #083a55; }
.st-btn.is-active.st-completed { background: #6ed8cf; border-color: #2fbfb1; color: #063f3a; }
.st-btn.is-active.st-no_show { background: #fde2e1; border-color: #e5484d; color: #8c1d20; }
.st-btn.is-active.st-cancelled { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink-2); }
.sheet-grid { display: grid; grid-template-columns: 1.45fr 1fr 1.25fr; gap: 8px; }
.sheet-grid.two { grid-template-columns: 1fr 1fr; }
.sheet-grid .field { margin-bottom: 10px; min-width: 0; }
.sheet-grid select, .sheet-grid input { width: 100%; min-width: 0; }
.sheet-actions { position: sticky; bottom: calc(-18px - var(--safe-b)); background: linear-gradient(transparent, var(--surface) 30%); padding: 12px 0 4px; margin-top: 6px; }
#newTabs { margin-bottom: 14px; }
.cat-seg button.is-active { background: var(--c-bg); color: var(--c-ink); }
.svc-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 12px; max-height: 260px; overflow-y: auto; padding: 2px; }
.svc-pick { display: flex; flex-direction: column; text-align: left; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: .85rem; }
.svc-pick small { color: var(--ink-2); font-size: .72rem; }
.svc-pick.is-picked { background: var(--c-bg); border-color: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-ink) 30%, transparent); }
.svc-pick.is-picked small { color: inherit; opacity: .8; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.switch { display: flex; align-items: center; gap: 8px; font-size: .92rem; margin: 6px 0 12px; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.shift-rows { display: grid; gap: 4px; }
.shift-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; padding: 4px 0; }
.shift-row .switch { margin: 0; }
.shift-row select { border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; background: var(--surface); color: var(--ink); font-size: .85rem; }
.shift-row.disabled { opacity: .45; }
.staff-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 4px; scrollbar-width: none; }
.staff-tab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; font-size: .72rem; color: var(--ink-2); padding: 4px; border-radius: 12px; width: 76px; }
.staff-tab .avatar-lg { width: 40px; height: 40px; font-size: .9rem; }
.staff-tab.is-active { background: var(--surface-2); color: var(--ink); font-weight: 600; }

/* ---------- colour on guest screens ---------- */
.service[class*="cat-"] { border-left: 6px solid var(--c-bg); }
.service[class*="cat-"].is-selected { background: var(--c-soft); border-color: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-bg); }
#catSeg button.is-active[class*="cat-"] { background: var(--c-bg); color: var(--c-ink); }
.slots[class*="cat-"] .slot, .card[class*="cat-"] .slot { background: var(--c-soft); border-color: color-mix(in srgb, var(--c-bg) 60%, transparent); }
.slots[class*="cat-"] .slot:hover, .slots[class*="cat-"] .slot.is-picked, .card[class*="cat-"] .slot:hover, .card[class*="cat-"] .slot.is-picked { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-ink); }
.slots[class*="cat-"] .slot.is-picked small, .card[class*="cat-"] .slot.is-picked small { color: inherit; }
.card[class*="cat-"] { border-top: 5px solid var(--c-bg); }
.card.booking[class*="cat-"] { border-top: 1px solid var(--line); border-left: 6px solid var(--c-bg); }
.card.booking.cancelled[class*="cat-"] { border-left-color: var(--warn); }
.card.cat-4 .badge, .waitlist-offer .badge { background: var(--c-bg); color: var(--c-ink); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c-bg); margin-right: 7px; vertical-align: 1px; }
.chip-btn[class*="cat-"] { background: var(--c-soft); border-color: color-mix(in srgb, var(--c-bg) 70%, transparent); }
.chip-btn[class*="cat-"]:hover { background: var(--c-bg); color: var(--c-ink); }
.menu-cat[class*="cat-"] { color: var(--ink); }
.waitlist-offer { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--c-soft); border: 1px solid var(--c-bg); }
.waitlist-offer summary { cursor: pointer; font-weight: 600; color: var(--c-ink); }
.waitlist-offer form { margin-top: 12px; }
@media (prefers-color-scheme: dark) { .waitlist-offer summary { color: var(--ink); } }
.waitlist-done { padding: 12px 14px; border-radius: 14px; background: #e3f8f6; color: #063f3a; }

/* phone: compact swipeable stats, taller calendar */
@media (max-width: 767px) {
  .stats { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
  .stats::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 auto; min-width: 136px; padding: 9px 12px; }
  .stat strong { font-size: 1.25rem; }
  .cal-scroll { max-height: 72dvh; min-height: 360px; }
  .cal-bar { gap: 8px; }
  .date-title { font-size: 1.15rem; }
}

/* ---------- team management ---------- */
.team-list { display: grid; gap: 4px; margin-bottom: 8px; }
.team-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.team-row .avatar-lg { width: 42px; height: 42px; font-size: .95rem; }
.team-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-info strong { font-size: .98rem; }
.team-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.skill { font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: var(--c-bg); color: var(--c-ink); }
.team-tools { display: flex; align-items: center; gap: 4px; }
.icon-btn.mini { width: 30px; height: 30px; font-size: .95rem; }
.icon-btn:disabled { opacity: .3; }
.back-link { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 4px 0; margin-bottom: 4px; }
.member-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.member-head .sheet-title { margin: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--sw); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; transition: box-shadow .15s; }
.swatch.is-active { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--sw); }
.skill-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.skill-pick { border: 1px solid color-mix(in srgb, var(--c-bg) 70%, var(--line)); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-size: .88rem; color: var(--ink); }
.skill-pick.is-on { background: var(--c-bg); color: var(--c-ink); border-color: var(--c-bg); font-weight: 600; }
.member-links { margin-bottom: 4px; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.danger-zone p { margin: 0 0 6px; }

/* ---------- manage hub & editors ---------- */
.manage-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.manage-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; min-height: 112px; border: 0; border-radius: 18px; background: var(--c-bg); color: var(--c-ink); transition: transform .12s; }
.manage-tile:hover { transform: translateY(-2px); }
.manage-tile strong { font: 600 1.15rem var(--serif); }
.manage-tile span { font-size: .8rem; opacity: .85; }
.search-input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.svc-list { display: grid; gap: 14px; padding-bottom: 6px; }
.svc-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px -2px 12px; padding: 2px; }
.svc-jump::-webkit-scrollbar { display: none; }
.svc-jump button { flex: none; display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 7px 12px; font-size: .82rem; background: var(--c-soft); color: var(--ink); white-space: nowrap; }
.svc-jump button:hover { background: var(--c-bg); color: var(--c-ink); }
.svc-group { border-radius: 18px; background: var(--c-soft); border: 1px solid color-mix(in srgb, var(--c-bg) 55%, transparent); overflow: hidden; scroll-margin-top: 8px; }
.svc-group header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; background: var(--c-bg); color: var(--c-ink); font-weight: 600; letter-spacing: .02em; }
.svc-group header > span:first-child { flex: 1; display: inline-flex; align-items: center; }
.svc-group header .dot { background: var(--c-ink); opacity: .55; }
.svc-count { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.55); color: var(--c-ink, var(--ink)); }
.grp-add { border: 0; border-radius: 999px; padding: 5px 10px; font-size: .78rem; font-weight: 600; background: rgba(255,255,255,.7); color: var(--c-ink); }
.svc-rows { display: grid; gap: 6px; padding: 8px; }
.svc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.svc-row:hover { box-shadow: inset 0 0 0 2px var(--c-bg, var(--line)); }
.svc-row .svc-name { font-weight: 500; font-size: .92rem; }
.svc-row .svc-meta { color: var(--ink-2); font-size: .78rem; white-space: nowrap; }
.svc-tag { display: inline-block; margin-left: 6px; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--c-bg, var(--surface-2)); color: var(--c-ink, var(--ink-2)); vertical-align: 2px; }
.svc-hidden { border-radius: 18px; background: var(--surface-2); padding: 4px 4px 2px; }
.svc-hidden summary { cursor: pointer; padding: 10px 12px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.svc-hidden > p { margin: 0 12px 4px; }
.svc-row.is-hidden { color: var(--ink-2); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.svc-row.is-hidden .svc-name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 50%, transparent); }
.tag { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin-left: 4px; }
.cal-col .now-line::before { display: none; }
.cal-gutter + .cal-col .now-line::before { display: block; }

/* ---------- team photos ---------- */
.avatar-lg { overflow: hidden; }
.avatar-lg.has-photo { background: var(--surface-2); }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar-lg.xl { width: 72px; height: 72px; font-size: 1.5rem; }
.photo-pick { position: relative; cursor: pointer; flex: none; }
.photo-badge { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--surface); box-shadow: var(--shadow); }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.member-head { align-items: center; gap: 14px; margin-bottom: 12px; }

/* ---------- gold tab bar (phone) / side rail (iPad, desktop) ---------- */
.tab[data-view="concierge"] { --t: #8A6219; --t-soft: #F2E6CC; }
.tab[data-view="book"]      { --t: #8A6219; --t-soft: #F2E6CC; }
.tab[data-view="visits"]    { --t: #8A6219; --t-soft: #F2E6CC; }
.tab[data-view="salon"]     { --t: #8A6219; --t-soft: #F2E6CC; }
@media (prefers-color-scheme: dark) {
  .tab[data-view="concierge"] { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab[data-view="book"]      { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab[data-view="visits"]    { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab[data-view="salon"]     { --t: #ff4fa8; --t-soft: #3a1028; }
}
.rail {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 0; box-shadow: 0 -8px 28px rgba(120, 20, 70, .12), 0 -1px 0 var(--line);
  padding-top: 6px;
}
.tab { gap: 4px; color: var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .01em; transition: color .15s; }
.tab svg {
  width: 56px; height: 34px; padding: 5px 16px; border-radius: 999px; color: var(--t); stroke-width: 2;
  background: var(--t-soft); transition: background .18s, color .18s, transform .18s;
}
.tab:active svg { transform: scale(.94); }
.tab.is-active { color: var(--t); font-weight: 700; }
.tab.is-active svg { background: var(--t); color: #fff; fill: none; box-shadow: 0 6px 14px color-mix(in srgb, var(--t) 40%, transparent); }
@media (prefers-color-scheme: dark) { .tab.is-active svg { color: #16121a; } }

/* phone: black tab bar */
@media (max-width: 767px) {
  .rail { background: #000; box-shadow: 0 -8px 28px rgba(0, 0, 0, .22); }
  .tab { color: #fff; }
  .tab[data-view="concierge"] { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab[data-view="book"]      { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab[data-view="visits"]    { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab[data-view="salon"]     { --t: #ff4fa8; --t-soft: #3a1028; }
  .tab.is-active svg { color: #000; box-shadow: 0 6px 16px color-mix(in srgb, var(--t) 35%, transparent); }
}

@media (min-width: 768px) {
  .rail { box-shadow: none; padding-top: calc(var(--safe-t) + 18px); border-right: 1px solid var(--line); background: var(--bg); }
  .tab { padding: 8px 0; font-size: .74rem; }
  .tab svg { width: 52px; height: 36px; padding: 6px 14px; }
  .tab.is-active { background: none; }
}
@media (min-width: 1100px) {
  .tab { padding: 8px 10px; font-size: .95rem; border-radius: 16px; }
  .tab svg { width: 44px; height: 36px; padding: 6px 10px; flex: none; }
  .tab.is-active { background: var(--t-soft); }
}

/* calendar: breathing room after closing time */
.cal { padding-bottom: 14px; }
.cal-head small { white-space: nowrap; }

/* =========================================================
   Staff mode (after the PIN): Fresha-style layout
   ========================================================= */
.staff-rail, .staff-tabbar { display: none; }
.only-phone { display: none !important; }
body.staff-mode .rail { display: none; }
body.staff-mode #view-salon.is-active { display: flex; padding: 0; overflow: hidden; height: 100%; }
.staff-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.staff-mode .staff-main { height: 100%; padding: calc(var(--safe-t) + 14px) 20px 14px; }

/* dark icon sidebar */
@media (min-width: 768px) {
  body.staff-mode .staff-rail {
    display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none;
    width: 76px; padding: calc(var(--safe-t) + 14px) 0 16px; background: #141117; color: #b9aeb5;
  }
}
.srail-logo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; font: 600 1.35rem var(--serif); background: linear-gradient(135deg, #E9C46E, #C9973A 55%, #8A6219); }
.srail-btn { position: relative; width: 50px; height: 50px; border: 0; border-radius: 15px; display: grid; place-items: center; background: none; color: inherit; transition: background .15s, color .15s; }
.srail-btn svg { width: 25px; height: 25px; stroke-width: 1.8; }
.srail-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.srail-btn.is-active { background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(201, 151, 58, .45); }
.srail-push { margin-top: auto; }
.srail-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font: 700 .66rem/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--surface); }

/* toolbar */
body.staff-mode .cal-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 12px; }
.tool-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 16px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .92rem var(--sans); cursor: pointer; white-space: nowrap;
}
.tool-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn.icon-only { width: 42px; padding: 0; font-size: 1.25rem; }
.tool-btn.is-today { color: var(--ink-2); }
.tool-spacer { flex: 1; }
.date-group { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); flex: none; }
.date-group .tool-btn { border: 0; height: 40px; width: 40px; background: none; }
.date-group .date-title { font: 600 .98rem var(--sans); padding: 0 6px; min-width: 0; }
.date-group .date-title svg { width: 16px; height: 16px; }
.select-pill select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.add-wrap { position: relative; }
.add-btn { background: #141117; color: #fff; border-color: #141117; padding: 0 18px; }
.add-btn:hover { background: #2a2330; }
.add-btn svg { width: 16px; height: 16px; }
.add-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); display: grid; }
.add-menu button { text-align: left; border: 0; background: none; padding: 11px 12px; border-radius: 10px; font: 500 .94rem var(--sans); color: var(--ink); }
.add-menu button:hover { background: var(--surface-2); }
.bell-btn .srail-badge { top: -3px; right: -3px; }
@media (prefers-color-scheme: dark) {
  .add-btn { background: #f7eef0; color: #141117; border-color: #f7eef0; }
  .add-btn:hover { background: #fff; }
}

/* calendar fills the rest of the screen */
body.staff-mode .schedule { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
body.staff-mode .cal-scroll { flex: 1; min-height: 0; max-height: none; }
body.staff-mode .cal-closed { margin-bottom: 8px; }
.cal-head .avatar-lg { width: 58px; height: 58px; font-size: 1.15rem; }
.cal-head strong { font-weight: 600; }
.cal.single { grid-template-columns: 56px minmax(0, 1fr); }

/* sheets reused for the side sections */
.menu-list { display: grid; gap: 6px; }
.menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.menu-item:hover { background: var(--surface-2); }
.handoff-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.handoff-list li { padding: 9px 0; border-top: 1px solid var(--line); }
.handoff-list li:first-child { border-top: 0; }
.sheet .stats { margin-bottom: 14px; }

/* phone (iPhone): header, avatar strip, one person's day, bottom bar with + */
@media (max-width: 767px) {
  .only-wide { display: none !important; }
  .only-phone { display: revert !important; }
  .date-title input#dayPick { pointer-events: none; } /* the date opens the menu instead */
  .date-group { position: relative; }
  .date-menu:not([hidden]) { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(300px, calc(100vw - 24px)); padding: 10px; display: grid; gap: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); animation: rise .15s ease both; }
  .date-menu .phone-switch { display: flex; width: 100%; }
  .phone-switch button { flex: 1; padding: 9px 0; font-size: .95rem; }
  .date-menu-pick { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); font: 600 .95rem var(--sans); color: var(--ink); cursor: pointer; }
  .date-menu-pick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .date-menu-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
  .tool-btn.only-phone { display: inline-flex !important; }
  .me-btn.only-phone { display: inline-grid !important; place-items: center; }
  .srail-logo.phone-logo { display: grid !important; width: 40px; height: 40px; border-radius: 12px; margin: 0; flex: none; font-size: 1.25rem; } /* LeBella logo where the menu lines were */
  body.staff-mode .staff-main { padding: calc(var(--safe-t) + 8px) 12px calc(var(--tabbar-h) + var(--safe-b) + 8px); }
  body.staff-mode .cal-bar { gap: 6px; margin-bottom: 8px; }
  body.staff-mode .cal-bar .date-group { flex: 1; justify-content: space-between; min-width: 0; }
  body.staff-mode .tool-spacer { display: none; }
  .strip-person span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .date-group .date-title { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .team-pill { width: 42px; padding: 0; }
  .team-pill svg { width: 20px; height: 20px; }
  .staff-strip:not([hidden]) { display: flex !important; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; flex: none; }
  .staff-strip::-webkit-scrollbar { display: none; }
  .strip-person, .strip-all { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; font: 600 .72rem var(--sans); color: var(--ink-2); padding: 0; }
  .strip-person .avatar-lg { width: 44px; height: 44px; font-size: .95rem; box-shadow: 0 0 0 2px var(--surface); }
  .strip-person.is-active .avatar-lg { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  .strip-person.is-active { color: var(--ink); }
  .strip-all { width: 44px; height: 44px; border-radius: 50%; justify-content: center; background: var(--surface-2); color: var(--ink); font-size: .8rem; }
  .strip-all.is-active { background: var(--accent); color: var(--accent-ink); }
  body.staff-mode .cal-scroll { border-radius: 18px; }
  .cal.single .cal-head { flex-direction: row; justify-content: center; gap: 12px; padding: 10px; }
  .cal.single .cal-head .avatar-lg { width: 46px; height: 46px; }
  body.staff-mode .staff-tabbar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 25; align-items: center; justify-content: space-around;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding: 4px 6px var(--safe-b);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -8px 28px rgba(120, 20, 70, .12), 0 -1px 0 var(--line);
  }
  .stab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; color: var(--ink-2); font: 600 .7rem var(--sans); }
  .stab svg { width: 26px; height: 26px; stroke-width: 1.9; }
  .stab.is-active { color: var(--accent); }
  .stab .srail-badge { top: -4px; right: calc(50% - 22px); }
  .stab-add { flex: none; width: 60px; height: 60px; margin-top: -26px; border-radius: 50%; justify-content: center; background: var(--accent); color: #fff; box-shadow: 0 10px 22px rgba(201, 151, 58, .45), 0 0 0 5px var(--surface); }
  .stab-add svg { width: 28px; height: 28px; stroke-width: 2.4; }
  body.staff-mode .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #refreshBtn { display: none !important; }
  body.staff-mode .cal-bar { gap: 6px; }
  body.staff-mode .tool-btn:not(.icon-only) { padding: 0 13px; }
}

/* =========================================================
   Staff screens: Fresha-style violet accent (guests keep rose)
   ========================================================= */
body.staff-mode { --accent: #6950f3; --accent-ink: #ffffff; --accent-soft: #ece9fe; }
@media (prefers-color-scheme: dark) { body.staff-mode { --accent: #8f7cff; --accent-ink: #120d2b; --accent-soft: #2a2450; } }
body.staff-mode .srail-btn.is-active { box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.tp-all, .me-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.team-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tp-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.tp-item strong { font-size: .85rem; text-align: center; }
.tp-item small { color: var(--ink-2); font-size: .72rem; }
.tp-item .avatar-lg, .tp-all { width: 52px; height: 52px; }
.tp-all { background: var(--surface-2); }
.tp-item.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }

/* =========================================================
   iPhone staff UI (matches Fresha's app)
   ========================================================= */
@media (max-width: 767px) {
  /* header: plain icons, bold date, bell dot, profile */
  body.staff-mode .staff-main { padding: calc(var(--safe-t) + 6px) 0 calc(var(--tabbar-h) + var(--safe-b)); }
  body.staff-mode .cal-bar { padding: 4px 10px 6px; margin: 0; gap: 2px; }
  body.staff-mode .tool-spacer { display: block; flex: 1; }
  body.staff-mode .cal-bar .date-group { flex: none; border: 0; background: none; }
  body.staff-mode .date-group > .tool-btn { display: none; }
  body.staff-mode .date-group .date-title { font: 700 1.2rem var(--sans); letter-spacing: -.01em; padding: 0 4px; gap: 8px; }
  body.staff-mode .date-group .date-title svg { width: 20px; height: 20px; stroke-width: 2.2; }
  body.staff-mode .team-pill { display: none !important; }
  .tool-btn.plain { border: 0; background: none; width: 44px; height: 44px; color: var(--ink); }
  .tool-btn.plain svg { width: 26px; height: 26px; stroke-width: 1.9; }
  .me-btn { border: 0; background: none; padding: 0 0 0 6px; }
  .me-avatar { width: 38px; height: 38px; color: #fff; font: 600 1.05rem var(--serif); background: linear-gradient(135deg, #E9C46E, #C9973A 55%, #8A6219); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--accent) 40%, transparent); }
  /* alerts as a red dot, not a number */
  body.staff-mode .srail-badge { min-width: 0; width: 11px; height: 11px; padding: 0; font-size: 0; top: 7px; right: 8px; box-shadow: 0 0 0 2px var(--surface); }
  /* ...except the golden bell, which shows the total number of new notifications */
  body.staff-mode .gold-bell .srail-badge { min-width: 20px; width: auto; height: 20px; padding: 0 5px; font: 700 .72rem/20px var(--sans); top: -1px; right: -5px; }

  /* one person's day: big photo + name, edge-to-edge calendar */
  body.staff-mode .staff-strip { display: none !important; }
  body.staff-mode .cal-scroll { border: 0; border-radius: 0; box-shadow: none; background: var(--surface); }
  body.staff-mode .cal.single .cal-head { flex-direction: column; justify-content: center; gap: 6px; padding: 8px 6px 12px; border-bottom: 0; cursor: pointer; }
  body.staff-mode .cal.single .cal-head .avatar-lg { width: 66px; height: 66px; font-size: 1.35rem; box-shadow: none; }
  body.staff-mode .cal.single .cal-head strong { font-size: 1.05rem; font-weight: 700; }
  body.staff-mode .cal.single .cal-head small { display: none; }
  body.staff-mode .cal.single .cal-corner { border-bottom: 0; }
  body.staff-mode .cal.single { grid-template-columns: 62px minmax(0, 1fr); }
  body.staff-mode .cal-gutter { border-right: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
  body.staff-mode .cal-gutter span { right: 10px; font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.05; }
  body.staff-mode .cal-gutter span small { font-size: .72rem; font-weight: 600; color: var(--ink); }
  body.staff-mode .cal-col { border-right: 1px solid var(--line); background-image: linear-gradient(color-mix(in srgb, var(--line) 85%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px); }
  body.staff-mode .cal.single .block { left: 4px; right: 8px; border-radius: 7px; padding: 10px 12px; }
  body.staff-mode .cal.single .block .t { font-size: .88rem; opacity: .9; }
  body.staff-mode .cal.single .block strong { font-size: 1.08rem; font-weight: 700; margin: 4px 0 3px; }
  body.staff-mode .cal.single .block .svc { font-size: .92rem; }
  body.staff-mode .cal.single .block.short { padding: 4px 12px; }
  body.staff-mode .cal.single .block.short strong { font-size: .92rem; margin: 0; }

  /* bottom bar: icons only, wide + button */
  body.staff-mode .staff-tabbar { padding: 6px 10px var(--safe-b); align-items: center; box-shadow: 0 -1px 0 var(--line); background: var(--surface); }
  body.staff-mode .stab { color: var(--ink); height: 52px; justify-content: center; }
  body.staff-mode .stab svg { width: 29px; height: 29px; stroke-width: 1.8; }
  body.staff-mode .stab.is-active { color: var(--accent); }
  body.staff-mode .stab .srail-badge { top: 9px; right: calc(50% - 18px); }
  body.staff-mode .stab-add { width: 80px; height: 50px; margin: 0; border-radius: 999px; flex: none; background: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
  body.staff-mode .stab-add svg { width: 30px; height: 30px; stroke-width: 2.2; }
}
/* block text starts at the top (buttons centre their content by default) */
.block:not(.short) { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }

/* iPhone: separators between team columns (side-by-side view); the one-person view stays clean */
@media (max-width: 767px) {
  body.staff-mode .cal:not(.single) .cal-col:last-child { border-right: 0; }
  body.staff-mode .cal:not(.single) .cal-head { border-right: 1px solid var(--line); }
  body.staff-mode .cal:not(.single) .cal-head:nth-last-child(1 of .cal-head) { border-right: 0; }
  body.staff-mode .cal:not(.single) .cal-head { border-bottom: 1px solid var(--line); }
  body.staff-mode .cal.single .cal-col { border-right: 0; }
}

/* ---------- pinned time column (day) and team column (week) ----------
   Sticky positioning only works inside the element's own box, so the left
   column is a separate strip in a flex row that spans the full width. */
.cal { display: flex; align-items: stretch; min-width: 100%; width: max-content; --head-h: 118px; }
.cal-time { position: sticky; left: 0; z-index: 4; flex: none; width: 58px; background: var(--surface); }
.cal-time .cal-corner { position: sticky; top: 0; z-index: 5; height: var(--head-h); border-right: 1px solid var(--line); }
.cal-gutter { position: relative; left: auto; z-index: auto; }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(var(--col-min, 132px), 1fr)); min-width: calc(var(--cols) * var(--col-min, 132px)); }
.cal-grid .cal-head { height: var(--head-h); justify-content: center; }
.cal.single .cal-grid { min-width: 0; }
.cal.single { width: 100%; }
@media (min-width: 768px) { .cal { --head-h: 122px; } }

.week { display: flex; align-items: stretch; min-width: 100%; width: max-content; --row-h: 132px; }
.week-side { position: sticky; left: 0; z-index: 4; flex: none; width: 84px; background: var(--surface); }
.week-side .week-corner { position: sticky; top: 0; z-index: 5; height: 64px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.week-side .week-who { height: var(--row-h); }
.week-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); grid-auto-rows: var(--row-h); min-width: calc(7 * 118px); }
.week-grid .week-day { height: 64px; grid-row: 1; }
.week-grid > .week-day + .week-cell, .week-grid .week-cell { min-height: 0; overflow: hidden; }
.week-grid { grid-template-rows: 64px; }

@media (max-width: 767px) {
  body.staff-mode .cal { --head-h: 112px; }
  body.staff-mode .cal.single { --head-h: 124px; }
  body.staff-mode .cal.single .cal-time { width: 62px; }
  body.staff-mode .cal.single .cal-time .cal-corner { border-right: 0; border-bottom: 0; }
  .week-side { width: 72px; }
}

/* =========================================================
   Staff screens: overview strip, quarter-hour grid, gray separators
   ========================================================= */
/* every separator in the staff screens is neutral gray */
body.staff-mode { --line: #e4e4e8; --grid-hour: #dedee3; --grid-quarter: #f1f1f4; --surface-2: #f4f4f6; }
@media (prefers-color-scheme: dark) { body.staff-mode { --line: #313137; --grid-hour: #3a3a41; --grid-quarter: #26262b; --surface-2: #232328; } }

/* overview tiles above the calendar (iPad and desktop) */
body.staff-mode .overview-strip:not([hidden]) { flex: none; margin: 0 0 12px; }
.overview-strip .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.overview-strip .stat { border: 0; padding: 10px 14px; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; min-height: 64px; }
.overview-strip .stat strong { font-size: 1.35rem; margin-top: 0; }
.overview-strip .stat[role="button"] { cursor: pointer; }
.overview-strip .stat[role="button"]:hover { filter: brightness(.97); }
body.staff-mode .stat { border: 0; }

/* calendar: 4 very thin lines per hour (every 15 minutes), slightly stronger on the hour */
body.staff-mode .cal-col:not(.closed) {
  background-image: linear-gradient(var(--grid-hour) 1px, transparent 1px), linear-gradient(var(--grid-quarter) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% calc(var(--hour) / 4);
}
body.staff-mode .cal-col.closed { background-image: linear-gradient(var(--grid-hour) 1px, transparent 1px); background-size: 100% var(--hour); background-color: var(--surface-2); }

/* as few separators as possible: one gray line between columns, under the header, beside the hours */
body.staff-mode .cal-scroll { box-shadow: none; border-color: var(--line); }
body.staff-mode .cal-col { border-right: 1px solid var(--line); }
body.staff-mode .cal-col:last-child { border-right: 0; }
body.staff-mode .cal-head { border-bottom: 1px solid var(--line); border-right: 0; }
body.staff-mode .cal-time .cal-corner { border-right: 0; border-bottom: 0; }
body.staff-mode .cal-gutter { border-right: 1px solid var(--line); }
body.staff-mode .tblock { border: 0; }
body.staff-mode .buffer { background: repeating-linear-gradient(135deg, var(--grid-hour) 0 3px, transparent 3px 7px); }
body.staff-mode .week-day, body.staff-mode .week-side .week-corner { border-bottom: 1px solid var(--line); }
body.staff-mode .week-who { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.staff-mode .week-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.staff-mode .staff-rail { border: 0; }
@media (max-width: 767px) {
  /* one-person phone view keeps just the hour grid */
  body.staff-mode .cal.single .cal-head, body.staff-mode .cal.single .cal-time .cal-corner { border-bottom: 0; border-right: 0; }
  body.staff-mode .cal.single .cal-col { border-right: 0; }
  body.staff-mode .cal:not(.single) .cal-head { border-right: 1px solid var(--line); }
  body.staff-mode .cal:not(.single) .cal-head:nth-last-child(1 of .cal-head) { border-right: 0; }
}
/* block text never squashes on top of itself; it just stops at the block edge */
.block:not(.short) > * { flex-shrink: 0; }
@media (max-width: 767px) {
  body.staff-mode .cal.single .block { padding: 8px 12px; }
  body.staff-mode .cal.single .block strong { margin: 2px 0 1px; }
}
/* phone: plain round avatars, no lines between team heads */
@media (max-width: 767px) {
  body.staff-mode .cal-head .avatar-lg { flex: none; aspect-ratio: 1; box-shadow: none; }
  body.staff-mode .cal:not(.single) .cal-head { border-right: 0; }
}
/* hours column: one line down its right side, nothing above the first hour */
body.staff-mode .cal-gutter { border-right: 1px solid var(--line); }
/* phone header: the technician whose day is showing, no ring */
@media (max-width: 767px) {
  .me-btn .avatar-lg, .me-btn .me-avatar { width: 38px; height: 38px; flex: none; aspect-ratio: 1; box-shadow: none; font: 600 .9rem var(--sans); }
  .me-btn .me-avatar.tp-all { background: var(--surface-2); color: var(--ink); }
  .tp-item .avatar-lg { box-shadow: none; }
}
/* form fields: one height, one look, never wider than their column (iOS date
   inputs otherwise keep their own size and spill into the next box) */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .field select, .lookup input {
  display: block; width: 100%; min-width: 0; max-width: 100%; height: 46px; margin: 0;
  -webkit-appearance: none; appearance: none; line-height: 1.2; text-align: left;
}
.field select {
  padding-right: 32px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.field input[type="date"], .field input[type="time"] { padding-right: 10px; }
.field input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input::-webkit-datetime-edit { padding: 0; }
.field input::-webkit-calendar-picker-indicator { margin: 0; opacity: .55; }
.field textarea { display: block; width: 100%; min-width: 0; }
.sheet-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.sheet-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* phones: date on its own row, then time and person side by side */
@media (max-width: 520px) {
  .sheet-grid:not(.two) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
  .sheet-grid:not(.two) > .field:first-child { grid-column: 1 / -1; }
}
/* service categories: hold a chip to recolour or remove it; "+ Category" adds one */
.svc-jump button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-x; }
.svc-jump .cat-new { background: none; border: 1.5px dashed var(--line); color: var(--ink-2); }
.cat-hint { margin: -4px 2px 8px; }
.cat-panel { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: var(--c-soft); border: 1px solid color-mix(in srgb, var(--c-bg) 60%, transparent); }
.cat-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; color: var(--c-ink); }
.cat-panel-head strong { font-size: 1.05rem; }
.cat-panel-head input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--surface); font-size: 16px; color: var(--ink); outline: none; }
.cat-panel-head input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cat-panel .swatches { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cat-panel .swatch { aspect-ratio: 1; width: 100%; max-width: 40px; justify-self: center; border-radius: 50%; border: 0; background: var(--c-bg); cursor: pointer; }
.cat-panel .swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c-ink); }
.cat-panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-panel-actions .chip-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cat-panel .form-error:empty { display: none; }
.svc-empty { padding: 10px 14px; margin: 0; }
@media (max-width: 420px) { .cat-panel .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* My visits: texted-code check */
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
#codeForm { margin-top: -4px; }
#codeHint { margin: 0 2px 14px; }
/* hour lines sit at the top of each hour, so draw the closing-time line too */
.cal-col { box-shadow: inset 0 -1px 0 var(--grid-hour, var(--line)); }
.cal { padding-bottom: 26px; }
/* phone, whole team: close off the last column with a line too */
@media (max-width: 767px) {
  body.staff-mode .cal:not(.single) .cal-col:last-child { border-right: 1px solid var(--line); }
}

/* Concierge welcome: appointment-system intro */
.welcome-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.welcome-system { text-transform: none; letter-spacing: .02em; font-weight: 500; color: var(--ink-2); padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; }
.welcome-ways { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; max-width: 30rem; }
.welcome-ways li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .98rem; }
.welcome-ways strong { color: var(--ink); font-weight: 600; }
.way-icon { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2, rgba(0,0,0,.04)); font-size: 1rem; }
.welcome-phone { color: var(--accent, inherit); font-weight: 600; text-decoration: none; white-space: nowrap; }
.welcome-phone:hover { text-decoration: underline; }
.welcome > p.welcome-note { font-size: .85rem; max-width: 30rem; margin: 0 0 18px; }

/* Grok Bot: the concierge's gold mascot, blinking and smiling */
.avatar.grok-bot { background: none; width: 46px; height: 46px; overflow: visible; }
.grok-bot svg { width: 100%; height: 100%; overflow: visible; }
.bot-shape { fill: #C9973A; }
.bot-eyes ellipse { fill: #000; }
.bot-smile { fill: none; stroke: #000; stroke-width: 4; stroke-linecap: round; }
.bot-body { transform-origin: 50% 95%; animation: bot-bob 3.2s ease-in-out infinite; }
.bot-eyes { transform-box: fill-box; transform-origin: center; animation: bot-blink 4.2s infinite; }
@keyframes bot-blink { 0%, 44%, 50%, 88%, 92%, 96%, 100% { transform: scaleY(1); } 47%, 90%, 94% { transform: scaleY(.1); } }
@keyframes bot-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .bot-body { animation: none; } .bot-eyes { animation-duration: 6s; } }

/* Welcome: bigger salon name, heading always on one line */
.welcome { container-type: inline-size; }
.welcome .eyebrow.welcome-brand { font-size: 1.05rem; letter-spacing: .16em; font-weight: 700; }
.welcome h2 { white-space: nowrap; font-size: clamp(1.15rem, 6vw, 1.9rem); font-size: min(1.9rem, 7.1cqi); }

/* Team order: grab the ≡ handle to drag a row up or down */
.drag-handle {
  width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; margin-left: 2px;
  border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: grab; touch-action: none;
}
.drag-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.drag-handle:hover, .drag-handle:focus-visible { background: var(--surface-2); color: var(--accent); }
.team-list.is-sorting { user-select: none; -webkit-user-select: none; }
.team-list.is-sorting .drag-handle { cursor: grabbing; }
.team-row.is-dragging {
  position: relative; z-index: 2; background: var(--surface); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(120, 20, 70, .18); border-bottom-color: transparent;
}
.team-row.is-dragging .drag-handle { color: var(--accent); background: var(--accent-soft); }

/* ---------- glossy pill tab buttons: gold, green, charcoal, staff purple ---------- */
.tab[data-view="concierge"] { --g1: #6B4A10; --g2: #C9973A; --g3: #F2D58A; --t: #8A6219; --t-soft: #F2E6CC; }
.tab[data-view="book"]      { --g1: #1b6e0c; --g2: #46b02a; --g3: #a8f48c; --t: #2f9a18; --t-soft: #e3f7da; }
.tab[data-view="visits"]    { --g1: #000000; --g2: #3A352D; --g3: #8C8476; --t: #3A352D; --t-soft: #ECE6DA; }
.tab[data-view="salon"]     { --g1: #3523a8; --g2: #6950f3; --g3: #b8acff; --t: #6950f3; --t-soft: #ece9fe; }
.tab.tab-ig                 { --g1: #6d1b9e; --g2: #e1306c; --g3: #ffc06b; --t: #e1306c; --t-soft: #fde3ec; }
a.tab { text-decoration: none; } /* the Instagram link looks like the other buttons */
.tab svg,
.tab.is-active svg {
  color: #fff; fill: none; stroke-width: 2.2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
  background:
    radial-gradient(ellipse 46% 30% at 50% 26%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3) 68%, transparent 72%),
    linear-gradient(to bottom, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--g1),
    0 0 0 2px #8e8e8e,
    0 0 0 4px #d4d4d4,
    0 4px 10px rgba(0, 0, 0, .22);
}
.tab svg { opacity: .82; transition: opacity .18s, transform .18s, box-shadow .18s; }
.tab.is-active svg {
  opacity: 1; transform: scale(1.06);
  box-shadow:
    inset 0 0 0 1.5px var(--g1),
    0 0 0 2px #8e8e8e,
    0 0 0 4px #d4d4d4,
    0 6px 16px color-mix(in srgb, var(--g2) 55%, transparent);
}
.tab:active svg { transform: scale(.94); }
.tab.is-active { color: var(--t); }
@media (prefers-color-scheme: dark) {
  .tab.is-active svg { color: #fff; }
  .tab[data-view="visits"] { --t: #f2bf45; --t-soft: #3a2e08; }
  .tab[data-view="salon"] { --t: #8f7cff; --t-soft: #2a2450; }
}
@media (min-width: 768px) {
  .tab.is-active { background: var(--t-soft); }
  .tab svg { width: 60px; height: 34px; padding: 6px 19px; border-radius: 999px; flex: none; }
}
/* phone: round glossy buttons on the black bar */
@media (max-width: 767px) {
  .tab svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; }
  .tab.is-active svg { color: #fff; }
  .tab[data-view="concierge"] { --t: #E9C46E; }
  .tab[data-view="book"]      { --t: #6fd94e; }
  .tab[data-view="visits"]    { --t: #D9D2C4; }
  .tab[data-view="salon"]     { --t: #8f7cff; }
  .tab svg, .tab.is-active svg {
    box-shadow:
      inset 0 0 0 1.5px var(--g1),
      0 0 0 2px #6d6d6d,
      0 0 0 4px #bdbdbd,
      0 4px 12px rgba(0, 0, 0, .4);
  }
  .tab.is-active svg { box-shadow: inset 0 0 0 1.5px var(--g1), 0 0 0 2px #6d6d6d, 0 0 0 4px #e6e6e6, 0 0 16px color-mix(in srgb, var(--g2) 70%, transparent); }
}

/* iPad and desktop: each menu item is one full-width glossy pill, label inside */
@media (min-width: 768px) {
  .rail .tab,
  .rail .tab.is-active {
    width: 100%; margin-bottom: 12px; padding: 10px 6px; border-radius: 22px;
    color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    background:
      radial-gradient(ellipse 48% 26% at 50% 22%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .25) 68%, transparent 72%),
      linear-gradient(to bottom, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%);
    box-shadow: inset 0 0 0 1.5px var(--g1), 0 0 0 2px #8e8e8e, 0 0 0 4px #d4d4d4, 0 4px 10px rgba(0, 0, 0, .2);
    opacity: .85; transition: opacity .18s, transform .18s, box-shadow .18s;
  }
  .rail .tab.is-active {
    opacity: 1;
    box-shadow: inset 0 0 0 1.5px var(--g1), 0 0 0 2px #8e8e8e, 0 0 0 4px #d4d4d4, 0 6px 18px color-mix(in srgb, var(--g2) 55%, transparent);
  }
  .rail .tab:hover { opacity: 1; }
  .rail .tab:active { transform: scale(.97); }
  .rail .tab svg,
  .rail .tab.is-active svg {
    width: 24px; height: 24px; padding: 0; border-radius: 0; background: none; box-shadow: none;
    opacity: 1; transform: none; color: #fff;
  }
}
@media (min-width: 1100px) {
  .rail .tab, .rail .tab.is-active { padding: 12px 18px; border-radius: 999px; gap: 12px; }
  .rail .tab { background-size: auto; }
  .rail .tab,
  .rail .tab.is-active {
    background:
      radial-gradient(ellipse 46% 30% at 50% 26%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .25) 68%, transparent 72%),
      linear-gradient(to bottom, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%);
  }
}

/* LeBella logo links back to the homepage */
a.brand, a.srail-logo { text-decoration: none; color: inherit; }
a.srail-logo { color: #fff; }
a.brand:hover .brand-mark, a.srail-logo:hover { filter: brightness(1.08); }

/* Booking sheet: the AI conversation behind a booking */
.ai-convo { margin: 10px 0 4px; padding: 12px; border-radius: 16px; background: var(--surface-2); display: grid; gap: 8px; }
.ai-convo-btn { justify-self: start; font-weight: 600; text-decoration: none; color: var(--ink); }
.chat-log { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.chat-line { max-width: 88%; }
.chat-line span { display: block; font-size: .7rem; font-weight: 600; color: var(--ink-2); margin: 0 4px 2px; }
.chat-line p { margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--surface); white-space: pre-wrap; font-size: .9rem; }
.chat-line.guest { justify-self: end; text-align: right; }
.chat-line.guest p { background: var(--accent); color: var(--accent-ink); }

/* Staff: AI call log (30 days) */
.vl-day { border-bottom: 1px solid var(--line); }
.vl-open { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: none; padding: 14px 2px; text-align: left; color: inherit; }
.vl-open > span { display: flex; flex-direction: column; gap: 2px; }
.vl-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.vl-open[aria-expanded="true"] .vl-chev, .vl-call[open] > summary .vl-chev { transform: rotate(90deg); }
.vl-body { display: grid; gap: 8px; padding-bottom: 14px; }
.vl-time { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .82rem; min-width: 62px; }
.vl-call { background: var(--surface-2); border-radius: 14px; }
.vl-call summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.vl-call summary::-webkit-details-marker { display: none; }
.vl-who { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vl-call .chat-log { max-height: none; padding: 0 12px 14px; }
.vl-actions { margin: 0 14px 10px; padding: 8px 12px; list-style: none; display: grid; gap: 4px; font-size: .84rem; color: var(--ink-2); background: var(--surface); border-radius: 10px; }
/* Bell: new AI bookings */
.ai-book-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-book-head .switch { font-size: .82rem; }
.ai-book-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ai-book-list button { width: 100%; display: grid; gap: 1px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; cursor: pointer; }
.ai-book-list li.unread button { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ai-book-list li.unread strong::before { content: "● "; color: var(--accent); }
.ai-book-list span { font-size: .88rem; color: var(--ink-2); }
.ai-book-list small { font-size: .75rem; }

.call-transcript { white-space: pre-wrap; font: inherit; font-size: .88rem; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); }

/* Staff PIN: settings, team, services, security and the AI call log are admin-only (shifts are allowed) */
body.role-staff :is(.srail-btn, .stab)[data-staff-go]:is([data-staff-go="team"], [data-staff-go="services"], [data-staff-go="voicelog"], [data-staff-go="salon"]) { display: none; }
body.role-staff .srail-btn[data-staff-go="exit"] { margin-top: auto; }

/* Security sheet */
.security-link { width: 100%; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; color: inherit; }
.pin-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.pin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pin-card .badge.off { background: var(--surface-2); color: var(--ink-2); }
.pin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.pin-actions .primary-btn { width: auto; }

/* Calendar view switch: Day · Week · Month */
.view-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); flex: none; }
.view-switch button { border: 0; background: none; color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.view-switch button:hover { color: var(--ink); }
.view-switch [aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.phone-switch { display: none; } /* phones only: Today / Week / Month under the date */
.today-chip.is-today { opacity: .45; }

/* Month view */
.month { min-width: 100%; display: flex; flex-direction: column; }
.month-head, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.month-wd { padding: 8px 6px; font-size: .74rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.month-cell { position: relative; min-height: 118px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.month-cell.out { background: var(--surface-2); }
.month-cell.out .m-date { color: var(--ink-2); opacity: .55; }
.month-cell.closed:not(.out) { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--line) 45%, transparent) 8px 9px); }
.m-date { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .9rem; }
.month-cell.today .m-date { background: var(--accent); color: var(--accent-ink); }
.m-count { position: absolute; top: 9px; right: 8px; font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.m-pills { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-pills .pill { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
.m-pills .more { font-size: .72rem; color: var(--ink-2); padding-left: 4px; }
@media (max-width: 767px) {
  .month-cell { min-height: 64px; padding: 4px 2px; align-items: center; }
  .m-pills { display: none; }
  .m-count { position: static; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
  .m-date { width: 26px; height: 26px; font-size: .85rem; }
}

/* Bell: a golden bell; it wears a red bow while there's something new */
body.staff-mode .cal-bar .bell-btn.gold-bell,
.bell-btn.gold-bell {
  position: relative; width: 44px; height: 44px; padding: 0; flex: none; border: 0; border-radius: 12px;
  display: inline-grid; place-items: center; background: none; box-shadow: none;
}
.gold-bell .gold-bell-art { width: 38px; height: 38px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(110, 70, 0, .35)); transform-origin: 50% 12%; }
.gold-bell .gold-bell-bow { display: none; }
.gold-bell.has-new .gold-bell-bow { display: inline; }
.gold-bell.has-new .gold-bell-art { animation: gold-bell-ring 2.6s ease-in-out infinite; }
.gold-bell .srail-badge { top: -2px; right: -4px; z-index: 1; } /* red count on the bell's right shoulder */
.gold-bell:hover .gold-bell-art { transform: rotate(-8deg); }
.gold-bell:active .gold-bell-art { transform: scale(.92); }
@keyframes gold-bell-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 86% { transform: rotate(-6deg); } 92% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .gold-bell.has-new .gold-bell-art { animation: none; } }