/* Wedza Partner Portal — the wedza.in look (frontend/partials/site_head.php) for the partner app's features. */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
  --accent-tint: color-mix(in srgb, var(--accent) 5%, #fff);
  --accent-light: color-mix(in srgb, var(--accent) 55%, #fff);
  --accent-deep: color-mix(in srgb, var(--accent) 78%, #6a0a1a);
  --accent-glow: color-mix(in srgb, var(--accent) 45%, transparent);
  --ink: #16202e;
  --ink-2: #3b3f4c;
  --muted: #6b7080;
  --line: rgba(18, 19, 26, .08);
  --line-2: rgba(18, 19, 26, .14);
  --bg: #fffaf8;
  --paper: #ffffff;
  --ok: #15803d; --ok-bg: #e8f7ee;
  --warn: #b45309; --warn-bg: #fef4e2;
  --bad: #c2410c; --bad-bg: #fdece6;
  --info: #3b5bdb; --info-bg: #eaf0ff;
  --display: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --shadow: 0 1px 2px rgba(22, 32, 46, .04), 0 10px 30px -18px rgba(22, 32, 46, .25);
  --side: 264px;
  /* Theme surfaces (light) */
  --on-ink: #ffffff;
  --accent-text: var(--accent-deep);
  --surface-2: #eef0f4;
  --hover: #f3f1f0;
  --skel-a: #f1eeec; --skel-b: #f8f6f5;
  --switch-off: #d9dbe1;
  --topbar-bg: rgba(255, 250, 248, .85);
  --tabbar-bg: rgba(255, 255, 255, .96);
  --glass: rgba(255, 255, 255, .7);
  --grid-line: rgba(22, 32, 46, .07);
  --scrim: rgba(15, 10, 16, .4);
  --pop-shadow: rgba(0, 0, 0, .45);
  --warn-text: #7c3e06; --ok-text: #14532d;
  --soon-bg: #fff7e6; --soon-text: #9a5a00;
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; margin: 0; line-height: 1.15 }
em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.muted { color: var(--muted) }
.small { font-size: 13px }
.hidden { display: none !important }

/* Boot */
.boot { min-height: 100vh; display: grid; place-items: center; gap: 18px; align-content: center }
.boot img { height: 44px; width: auto }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block }
@keyframes spin { to { transform: rotate(360deg) } }

/* Kicker + buttons (as on wedza.in) */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.kicker:before { content: none }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, opacity .2s }
.btn svg { width: 17px; height: 17px; flex: none }
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: scale(.98) }
.btn[disabled] { opacity: .55; pointer-events: none }
.btn-primary { color: #fff; background: var(--accent); box-shadow: 0 12px 26px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .25) }
.btn-dark { color: var(--on-ink); background: var(--ink) }
.btn-dark:hover { background: var(--accent) }
.btn-ghost { background: var(--paper); border: 1px solid var(--line-2); color: var(--ink) }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent) }
.btn-soft { background: var(--accent-soft); color: var(--accent-text) }
.btn-danger { background: var(--bad-bg); color: var(--bad) }
.btn-ok { background: var(--ok-bg); color: var(--ok) }
/* Send quote on WhatsApp */
.ws-wa svg { color: #128c4b }
.btn-whatsapp svg { color: #fff }
.list .ws-remind { margin: -6px 14px 10px auto; display: flex; width: max-content }
/* CRM dashboard: Payments due */
/* CRM Home: Today / Tomorrow / This week / Custom over Events and Payments due */
.ws-range-head { gap: 12px; margin-bottom: 14px }
.ws-range-head h3 { font-size: 18px; margin: 0 }
.ws-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.ws-range .chips { margin: 0 }
.ws-range-dates { display: flex; gap: 8px }
.ws-range-dates label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted) }
.ws-range-dates .input { width: auto }
a.ws-pay-more { text-decoration: none }
.ws-dash-tiles { margin-bottom: 28px }
button.stat { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer }
button.stat:hover { border-color: var(--line-2) }
.ws-pay-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 14px }
.ws-pay-sum > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line) }
.ws-pay-sum span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.ws-pay-sum b { font-family: var(--display); font-size: 21px; letter-spacing: -.02em }
.ws-pay-sum small { font-size: 12.5px; color: var(--muted) }
.ws-pay-sum .bad { background: var(--bad-bg); border-color: transparent }
.ws-pay-sum .bad span, .ws-pay-sum .bad b { color: var(--bad) }
.ws-pay-group { padding: 10px 18px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line) }
.ws-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 14px 0 0 }
.ws-pay + .ws-pay { border-top: 1px solid var(--line) }
a.ws-pay { color: inherit; text-decoration: none }
a.ws-pay:hover { background: var(--bg) }
.ws-pay-main { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0 12px 18px; color: inherit; text-decoration: none; min-width: 0 }
.ws-pay:hover { background: var(--accent-tint) }
.ws-pay-date { width: 46px; height: 46px; border-radius: 13px; display: grid; place-content: center; text-align: center; line-height: 1.05; background: var(--surface-2); color: var(--ink) }
.ws-pay-date b { font-family: var(--display); font-size: 17px }
.ws-pay-date span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ws-pay.late .ws-pay-date { background: var(--bad-bg); color: var(--bad) }
.ws-pay.late .ws-pay-date span { color: var(--bad) }
.ws-pay-t { display: grid; min-width: 0 }
.ws-pay-t b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ws-pay-t > span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ws-pay-t em { font-style: normal; font-weight: 600 }
.ws-pay.late .ws-pay-t em { color: var(--bad) }
.ws-pay-amt { font-family: var(--display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap }
.ws-pay-remind { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s }
.ws-pay-remind svg { width: 16px; height: 16px; color: #128c4b }
.ws-pay-remind:hover { background: #128c4b; border-color: #128c4b; color: #fff }
.ws-pay-remind:hover svg { color: #fff }
.ws-pay-sheet { margin: 0 -22px }
.ws-pay-sheet .ws-pay-sum { padding-top: 2px }
.ws-pay-sum-3 { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 560px) { .ws-pay-sum-3 { grid-template-columns: 1fr } }
.ws-pay-more { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--accent-text); text-decoration: none }
.ws-pay-more svg { width: 15px; height: 15px }
@media (max-width: 560px) { .ws-pay-remind span { display: none } .ws-pay-remind { width: 34px; padding: 0; justify-content: center } }
.btn.btn-whatsapp { background: #128c4b; color: #fff; box-shadow: 0 12px 26px -12px rgba(18, 140, 75, .6) }
.btn.btn-whatsapp:hover { background: #0f7a41 }
.ws-seen { color: var(--ok) !important; display: flex; align-items: center; gap: 4px; justify-content: flex-end; white-space: nowrap }
.ws-seen svg { margin-right: 0 !important }
/* Quote column: the amount, with Sent / Seen on its own line under it. */
.ws-quote-cell { white-space: nowrap }
.ws-quote-cell .money { display: block }
.ws-quote-cell .ws-m { margin-top: 2px; white-space: nowrap }
.ws-seen svg { width: 13px; height: 13px }
.ws-send { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start }
.ws-phone { border: 8px solid var(--ink); border-radius: 34px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-card, 0 10px 30px -18px rgba(22, 32, 46, .25)) }
.ws-phone-bar { height: 22px; background: var(--ink); display: grid; place-items: center }
.ws-phone-bar span { width: 70px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25) }
.ws-phone iframe { display: block; width: 100%; height: min(640px, calc(100vh - 260px)); min-height: 460px; border: 0; background: #fffaf8 }
.ws-to { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; background: var(--ok-bg) }
.ws-to > svg { width: 26px; height: 26px; color: #128c4b; flex: none }
.ws-to b { display: block }
.ws-send-side textarea { font-size: 14px; line-height: 1.5; min-height: 300px }
.ws-pricing:empty { display: none }
.ws-listed { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; background: var(--accent-tint); border: 1px solid var(--accent-soft) }
.ws-listed > div { display: grid; gap: 2px }
.ws-listed b { font-family: var(--display); font-size: 17px; letter-spacing: -.02em }
.ws-listed s { color: var(--muted); font-weight: 500; font-size: 14px }
.ws-listed-total { text-align: right }
.ws-listed-total b { font-size: 22px }
.ws-ok-text { color: var(--ok) !important }
.input.is-invalid { border-color: var(--bad) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 14%, transparent) }
.ws-err { color: var(--bad) !important; font-weight: 600 }
/* Calendar day colours, as in the partner app: coral active / mixed, green all completed, grey all cancelled. */
.cal button { --tone: var(--accent) }
.cal button.tone-done { --tone: #2e9b63 }
.cal button.tone-cancel { --tone: #9a9da4 }
.cal button.has:not(.sel) { background: color-mix(in srgb, var(--tone) 10%, var(--paper)); border-color: color-mix(in srgb, var(--tone) 35%, transparent); color: var(--ink) }
.cal button.has .dot { background: var(--tone) }
.cal button.sel.has { box-shadow: inset 0 0 0 2px var(--tone) }
.cal-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 12.5px; color: var(--muted) }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px }
.cal-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50% }
.cal-legend .tone-active::before { background: var(--accent) }
.cal-legend .tone-done::before { background: #2e9b63 }
.cal-legend .tone-cancel::before { background: #9a9da4 }
/* Booking rules (as the app's Slot Configuration) */
.ss-unit { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px }
.ss-unit-box { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 14px; font-weight: 600; color: var(--ink-2); background: var(--paper) }
.ss-off .input, .ss-off .ss-unit-box { opacity: .45 }
.ss-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; transition: background .15s, border-color .15s }
.ss-check input { position: absolute; opacity: 0; pointer-events: none }
.ss-check[hidden] { display: none !important }
.ss-check > span:last-child { display: grid; gap: 2px }
.ss-tick { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s }
.ss-tick svg { width: 14px; height: 14px; stroke-width: 3 }
.ss-check:has(input:checked) { background: var(--accent-tint); border-color: var(--accent) }
.ss-check:has(input:checked) .ss-tick { background: var(--accent); border-color: var(--accent); color: #fff }
.ss-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
/* Convert to order: accordion steps + review */
.ws-acc-list { display: grid; gap: 10px }
.ws-acc-list[hidden], #wvReview[hidden] { display: none !important }
.ws-acc { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; transition: border-color .2s, box-shadow .2s }
.ws-acc.open { border-color: var(--accent-soft); box-shadow: 0 12px 30px -22px rgba(22, 32, 46, .35) }
.ws-acc-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink) }
.ws-acc-head > svg { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .25s var(--ease, ease) }
.ws-acc.open .ws-acc-head > svg { transform: rotate(180deg) }
.ws-acc-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-2) }
.ws-acc.open .ws-acc-n { background: var(--accent); color: #fff }
/* Convert to order: steps go in order; ones not reached yet are locked, finished ones get a tick */
.ws-acc.locked .ws-acc-head { cursor: not-allowed; opacity: .55 }
.ws-acc.done .ws-acc-n { background: var(--ok-bg); color: var(--ok); font-size: 0 }
.ws-acc.done .ws-acc-n::before { content: '✓'; font-size: 14px }
.ws-acc-t { display: grid; gap: 2px; min-width: 0 }
.ws-acc-t b { font-family: var(--display); font-size: 16.5px; letter-spacing: -.02em }
.ws-acc-s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ws-acc-s svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px }
.ws-acc-body { display: none; padding: 0 18px 18px 60px }
.ws-acc.open .ws-acc-body { display: block; animation: accIn .25s ease }
@keyframes accIn { from { opacity: 0; transform: translateY(-4px) } }
.ws-acc-next { display: flex; justify-content: flex-end; margin-top: 14px }
.ws-warn-text { color: var(--warn) } .ws-bad-text { color: var(--bad) }
@media (max-width: 760px) { .ws-acc-body { padding: 0 14px 16px } }
.ws-rev { display: grid; gap: 16px }
.ws-rev-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-tint), var(--paper)); border: 1px solid var(--accent-soft) }
.ws-rev-top h3 { margin: 6px 0 2px; font-size: 22px }
.ws-rev-top p { margin: 0 }
.ws-rev-amt { text-align: right; display: grid }
.ws-rev-amt b { font-family: var(--display); font-size: 32px; letter-spacing: -.03em }
.ws-rev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start }
.ws-rev-box { padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper) }
.ws-rev-box h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px }
.ws-rev-box h4 svg { width: 17px; height: 17px; color: var(--accent) }
.ws-rev-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px }
.ws-rev-line:first-of-type { border-top: 0 }
.ws-rev-total { font-weight: 700; border-top: 1.5px solid var(--line-2) }
.ws-rev-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-size: 13.5px; font-weight: 600 }
.ws-rev-note svg { width: 16px; height: 16px; flex: none }
@media (max-width: 760px) { .ws-rev-grid { grid-template-columns: 1fr } .ws-rev-amt { text-align: left } }
.ws-pct-wrap { position: relative; display: block }
.ws-pct-wrap .input.ws-pct { padding-right: 26px; text-align: right; font-variant-numeric: tabular-nums }
.ws-pct-wrap > span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none }
.ev { margin: 4px 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg) }
.ev-label { font-size: 13px; font-weight: 600; color: var(--ink-2) }
.ev-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin }
.ev-tab { flex: none; display: grid; gap: 2px; min-width: 128px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s }
.ev-tab b { font-size: 14px; color: var(--ink) }
.ev-tab span { font-size: 12.5px; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ev-tab:hover { border-color: var(--accent-light) }
.ev-tab.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-soft) }
.ev-tab.ev-add { min-width: 0; place-content: center; color: var(--accent-text); font-weight: 700; border-style: dashed }
.ev-tab.ev-add-line { min-height: 44px; padding: 0 18px }
.ev-day { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper) }
.ev-day-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: end }
.ev-day-head .field { margin-bottom: 0 }
.ev-rm-day { margin-bottom: 6px; color: var(--bad) }
.ev-lines { display: grid; gap: 10px; margin-top: 14px }
.ev-line { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.ev-line-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center }
.ev-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; margin-top: 12px }
.ev-line-grid .field { margin-bottom: 8px }
.ev-avail:empty { display: none }
.ev-cap { display: inline-block; margin-top: 2px; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 600 }
.ev-cap.free { background: var(--ok-bg); color: var(--ok) }
.ev-cap.limited { background: var(--info-bg); color: var(--info) }
.ev-cap.full { background: var(--warn-bg); color: var(--warn) }
.ev-day-foot { margin-top: 12px }
.ev-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--on-ink) }
.ev-total-r { display: inline-flex; align-items: baseline; gap: 10px }
.ev-total-tax { display: block; margin-top: 2px; font-size: 13px; color: color-mix(in srgb, var(--on-ink) 70%, transparent) }
.ev-tax { display: flex; gap: 8px }
.ev-tax .input { min-width: 0; flex: 1 1 0 }
.ev-tax .input[data-f="ttype"] { flex: 0 0 auto; width: auto }
.ev-total-r b { font-family: var(--display); font-size: 22px; letter-spacing: -.02em }
.ev-total-r s { color: color-mix(in srgb, var(--on-ink) 55%, transparent) !important }
.ev-total .ws-ok-text { color: #34d399 !important; font-style: normal; font-weight: 700; font-size: 13px }
@media (max-width: 760px) { .ev-day-head { grid-template-columns: 1fr } .ev { padding: 12px } }
.ws-pick { display: grid; gap: 8px; min-width: 0 }
.ws-pick-c[hidden] { display: none }
/* Searchable dropdown (P.pick): type to filter, Add “…” for your own. */
.ws-combo { position: relative }
.ws-combo-box { position: relative; display: block }
.ws-combo-in { padding-right: 40px !important }
.ws-combo-chev { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; transition: transform .2s }
.ws-combo-in[aria-expanded="true"] + .ws-combo-chev { transform: rotate(180deg) }
.ws-combo-list { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: 264px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); box-shadow: 0 18px 40px -18px rgba(20, 16, 24, .35) }
.ws-combo-list[hidden] { display: none }
.ws-combo-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14.5px; color: var(--ink) }
.ws-combo-opt.is-active { background: var(--hover, var(--surface-2)) }
.ws-combo-opt[aria-selected="true"] { font-weight: 600; color: var(--accent-text, var(--accent)) }
.ws-combo-add { color: var(--accent-text, var(--accent)); font-weight: 600 }
.ws-combo-add svg { width: 16px; height: 16px; flex: none }
.ws-combo-none { display: block; padding: 10px 12px; color: var(--muted); font-size: 14px }
.ws-add-row .ws-pick { gap: 6px }
.ws-pin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center }
.ws-pin .input { letter-spacing: .3em; font-variant-numeric: tabular-nums }
.ws-assign { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px }
.ws-assign label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2) }
.ws-assign label svg { width: 16px; height: 16px }
.ws-assign select { width: auto; min-width: 220px; min-height: 40px; padding-top: 8px; padding-bottom: 8px }
.ws-assign .hint { flex-basis: 100% }
.icon-btn.ws-lost { color: var(--bad) }
.icon-btn.ws-lost:hover { background: var(--bad-bg) }
.ws-m svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px }
@media (max-width: 760px) { .ws-send { grid-template-columns: 1fr } .ws-phone { max-width: 320px; margin: 0 auto } .ws-phone iframe { height: 460px } }
/* Lead form: extra event days sit right under the date; nothing takes space until one is added. */
.ws-more-days { display: grid; gap: 8px }
.ws-more-days:empty { display: none }
.ws-more-days .ws-add-row { margin-top: 0 }
.ws-add-row.ws-day-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg) }
.ws-day-row .ws-day-label { grid-column: 1 / -1 }
#wlAvail:empty { display: none }
#wlAvail .notice { margin-top: 0 !important }
.btn-ok { background: var(--ok); color: #fff }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px }
.btn-block { width: 100% }
.btn .spinner { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 255, 255, .4); border-top-color: #fff }
.btn-ghost .spinner, .btn-soft .spinner, .btn-danger .spinner, .btn-ok .spinner { border-color: var(--line-2); border-top-color: var(--accent) }
.link { color: var(--accent); font-weight: 600; background: none; border: 0; padding: 0 }
.link:hover { text-decoration: underline }
/* A small link with an icon (← All galleries): icon and text on one line */
.link.small:has(> svg) { display: inline-flex; align-items: center; gap: 4px }
.link.small > svg { width: 15px; height: 15px; flex: none }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2) }
.icon-btn:hover { color: var(--accent); border-color: var(--accent-light) }
.icon-btn svg { width: 18px; height: 18px }

/* Forms */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-bottom: 16px; align-content: start }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--ink-2) }
.input, select.input, textarea.input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); outline: none; transition: border-color .2s, box-shadow .2s }
textarea.input { min-height: 96px; resize: vertical }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.input-group { display: flex; gap: 8px; width: 100% }
/* Fields share the row instead of each taking 100% (which overflowed the card). */
.input-group > .input { flex: 1 1 0; width: auto; min-width: 0 }
.input-group > select.input { flex: 0 0 152px }
/* Our own arrow with room to breathe, so "+91 India" never runs into it. */
select.input { -webkit-appearance: none; appearance: none; padding-right: 38px; 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' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7080' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px }
.hint { font-size: 12.5px; color: var(--muted) }
.error-text { font-size: 13px; color: var(--bad) }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px }
.check input { width: 18px; height: 18px; accent-color: var(--accent) }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px }
.otp input { text-align: center; font-size: 22px; font-weight: 700; font-family: var(--display); min-height: 56px; padding: 0 }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none }
.switch input { opacity: 0; width: 0; height: 0 }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--switch-off); transition: background .2s }
.switch span:before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--ease) }
.switch input:checked + span { background: var(--accent) }
.switch input:checked + span:before { transform: translateX(18px) }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr }
.auth-hero { position: relative; overflow: hidden; isolation: isolate; padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; background: var(--bg) }
.auth-hero:before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 45% at 100% 0%, var(--accent-glow), transparent 70%), radial-gradient(45% 40% at 0% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%) }
.auth-hero:after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 40% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 60% at 40% 40%, #000 30%, transparent 80%) }
.auth-hero .brand img { height: 40px; width: auto }
.auth-hero h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: .98; letter-spacing: -.045em; font-weight: 800; max-width: 620px }
.auth-hero h1 em.serif { font-size: 1.06em }
.auth-hero p.lead { max-width: 480px; margin: 18px 0 0; font-size: 17px; color: var(--muted) }
.auth-points { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; max-width: 460px }
.auth-points li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); font-weight: 600; font-size: 14.5px }
.auth-points li i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent) }
.auth-points svg { width: 17px; height: 17px }
.auth-foot { font-size: 13px; color: var(--muted) }
.auth-panel { display: grid; place-items: center; padding: 40px 24px; background: var(--paper); border-left: 1px solid var(--line) }
.auth-card { width: min(420px, 100%) }
.auth-card h2 { font-size: 30px; margin-bottom: 6px }
.auth-card .sub { margin: 0 0 26px; color: var(--muted) }
.auth-card .sub:has(+ .number-chip) { margin-bottom: 12px }
.auth-card .number-chip + form { margin-top: 8px }
.auth-card .back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 0 }
.auth-card .back svg { width: 16px; height: 16px }
.auth-card .number-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 18px; border-radius: 12px; background: var(--accent-tint); font-weight: 700 }
.auth-alt { margin-top: 18px; text-align: center; font-size: 14px; color: var(--muted) }
.notice { padding: 14px 16px; border-radius: 14px; background: var(--accent-tint); border: 1px solid var(--accent-soft); font-size: 14px }
.notice.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn-text) }
.notice.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok-text) }
.notice.info { background: var(--info-bg); border-color: transparent; color: var(--info) }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr }
  .auth-hero { padding: 24px 20px 30px }
  .auth-hero h1 { font-size: 38px; margin-top: 26px }
  .auth-points, .auth-foot { display: none }
  .auth-panel { border-left: 0; border-top: 1px solid var(--line); align-items: start; padding: 28px 16px 40px }
}

/* ---------- App layout ---------- */
.layout { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px }
.side .brand img { height: 34px; width: auto }
.side .brand span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 3px 8px; border-radius: 999px; background: var(--accent-soft) }
.nav-group { margin: 14px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); transition: background .15s, color .15s }
.nav a svg { width: 19px; height: 19px; flex: none; opacity: .75 }
.nav a:hover { background: var(--accent-tint); color: var(--ink) }
.nav a.active { background: var(--accent-soft); color: var(--accent-text) }
.nav a.active svg { opacity: 1; color: var(--accent) }
.nav a .badge-dot { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center }
.nav a .nav-new { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4 }
.side-foot { margin-top: auto; padding-top: 16px }
.app-dl { margin-top: auto; margin-bottom: 4px; flex: none; padding: 16px; border-radius: 18px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 4px }
.app-dl b { font-size: 14px; color: var(--ink) }
.app-dl > span { font-size: 12.5px; line-height: 1.4; color: var(--muted) }
.app-dl-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 999px; background: #25d366; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer }
.app-dl-send:hover { filter: brightness(.95) }
.app-dl-store { background: var(--ink); color: var(--on-ink); text-decoration: none }
.app-dl-store svg { width: 17px; height: 17px }
.app-dl-note { margin-top: 6px; font-size: 11.5px; color: var(--muted) }
/* Header: Download app; the card shows on hover (or tap / keyboard focus). On phones the card sits at the end of the menu instead. */
.app-dl-wrap { position: relative }
.app-dl-pop { position: absolute; right: 0; top: 100%; z-index: 80; width: 300px; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s }
.app-dl-wrap:hover .app-dl-pop, .app-dl-wrap:focus-within .app-dl-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s }
.app-dl-pop .app-dl { margin: 0; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .3) }
.app-dl-pop .app-dl-send { white-space: nowrap }
.app-dl--side { display: none }
@media (max-width: 640px) { .app-dl-wrap { display: none } .app-dl--side { display: flex } }
.side-card { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--accent-tint), var(--paper)); border: 1px solid var(--accent-soft); font-size: 13px }
.side-card b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 4px }
.main { min-width: 0; display: flex; flex-direction: column }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 32px; background: var(--topbar-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line) }
.topbar .menu-btn { display: none }
.topbar h1 { font-size: 22px }
.topbar .spacer { flex: 1 }
.me { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper) }
.me .avatar { width: 34px; height: 34px }
.me b { font-size: 14px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.me small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500 }
.content { padding: 28px 32px 60px; max-width: 1240px; width: 100%; margin: 0 auto }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-weight: 800; font-family: var(--display); flex: none; overflow: hidden }
.avatar img { width: 100%; height: 100%; object-fit: cover }
.tabbar { display: none }
.scrim { display: none }
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr }
  .side { position: fixed; z-index: 60; left: 0; top: 0; width: 280px; transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: 20px 0 60px -30px rgba(0, 0, 0, .4) }
  .side.open { transform: none }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim) }
  .topbar { padding: 12px 16px }
  .topbar .menu-btn { display: inline-grid }
  .topbar h1 { font-size: 19px }
  .me b, .me small { display: none }
  .me { padding: 3px; border: 0; background: none }
  .content { padding: 18px 16px 100px }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--tabbar-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--line) }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--muted) }
  .tabbar a svg { width: 21px; height: 21px }
  .tabbar a.active { color: var(--accent) }
  .tabbar a .badge-dot { position: absolute; top: 2px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; display: grid; place-items: center }
}

/* ---------- Building blocks ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px }
/* One title style on every page (as the apps): 22 bold ink, 13 regular muted subtitle, 7px apart. */
.page-head h2 { font-size: 22px; font-weight: 700; color: var(--ink) }
.page-head p { margin: 7px 0 0; max-width: 640px; font-size: 13px; font-weight: 400; color: var(--muted) }
.grid { display: grid; gap: 16px }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px }
.card.flush { padding: 0; overflow: hidden }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.card-head h3 { font-size: 18px }
.section { margin-top: 28px }
.section > .card-head { margin-bottom: 12px }
.stat { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s }
a.stat:hover { transform: translateY(-2px); border-color: var(--accent-light) }
.stat i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); flex: none }
.stat i svg { width: 21px; height: 21px }
.stat span { display: block; font-size: 13px; font-weight: 600; color: var(--muted) }
.stat b { display: block; font-family: var(--display); font-size: 26px; line-height: 1.15; letter-spacing: -.03em }
.stat.blue i { background: var(--info-bg); color: var(--info) }
.stat.green i { background: var(--ok-bg); color: var(--ok) }
.stat.amber i { background: var(--warn-bg); color: var(--warn) }
.stat.red i { background: var(--bad-bg); color: var(--bad) }
.hero-card { position: relative; overflow: hidden; isolation: isolate; padding: 26px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(135deg, var(--accent-deep), var(--accent) 60%, var(--accent-light)) }
.hero-card:after { content: ""; position: absolute; z-index: -1; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .14) }
.hero-card .kicker { color: #fff }
.hero-card h3 { font-size: 26px }
.hero-card p { margin: 6px 0 0; opacity: .88 }
.hero-card .btn { background: #fff; color: var(--accent-deep) }
.row { display: flex; align-items: center; gap: 12px }
.row.between { justify-content: space-between }
.row.wrap { flex-wrap: wrap }
.stack { display: grid; gap: 12px }
.divider { height: 1px; background: var(--line); margin: 16px 0 }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-weight: 600; font-size: 13.5px; color: var(--ink-2) }
.chip:hover { border-color: var(--accent-light) }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink) }
.chip .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; display: grid; place-items: center }
.chip.active .count { background: color-mix(in srgb, var(--on-ink) 18%, transparent); color: var(--on-ink) }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; text-transform: capitalize }
.badge.ok { background: var(--ok-bg); color: var(--ok) }
.badge.warn { background: var(--warn-bg); color: var(--warn) }
.badge.bad { background: var(--bad-bg); color: var(--bad) }
.badge.info { background: var(--info-bg); color: var(--info) }
.badge.accent { background: var(--accent-soft); color: var(--accent-text) }
.kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px 16px; font-size: 14px }
.kv dt { color: var(--muted) }
.kv dd { margin: 0; font-weight: 600; word-break: break-word }
.list { display: grid }
.list-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line) }
.list-item:last-child { border-bottom: 0 }
a.list-item:hover, button.list-item:hover { background: var(--accent-tint) }
button.list-item { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0 }
.list-item .grow { flex: 1; min-width: 0 }
.list-item .title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.list-item .meta { font-size: 13px; color: var(--muted) }
.thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--accent-soft); flex: none }
.money { font-family: var(--display); font-weight: 700; letter-spacing: -.02em }
.empty { display: grid; place-items: center; gap: 10px; padding: 48px 20px; text-align: center; color: var(--muted) }
.empty i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent) }
.empty i svg { width: 28px; height: 28px }
.empty b { font-family: var(--display); font-size: 18px; color: var(--ink) }
.skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite }
@keyframes shimmer { to { background-position: -200% 0 } }
.table-wrap { overflow-x: auto }
table.table { width: 100%; border-collapse: collapse; font-size: 14px }
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle }
.table tr:last-child td { border-bottom: 0 }
.table tr.clickable:hover td { background: var(--accent-tint); cursor: pointer }
.pager { display: flex; justify-content: center; padding: 16px }

/* Booking cards */
.booking-card { display: grid; gap: 12px; padding: 18px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease) }
.booking-card:hover { border-color: var(--accent-light); transform: translateY(-2px) }
.booking-card .when { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2) }
.booking-card .when span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint) }
.booking-card .when svg { width: 14px; height: 14px; color: var(--accent) }
.booking-card .actions { display: flex; gap: 8px }
.booking-card .actions .btn { flex: 1 }
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none }
.timeline li { position: relative; padding: 0 0 18px 26px; font-size: 14px }
.timeline li:before { content: ""; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--line-2) }
.timeline li:last-child:before { display: none }
.timeline li:after { content: ""; position: absolute; left: 1px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2) }
.timeline li.done:after { background: var(--accent); border-color: var(--accent) }
.proofs { display: flex; gap: 8px; flex-wrap: wrap }
.proofs a img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line) }

/* Modal + toast */
.modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--scrim); animation: fade .15s }
.modal-back.order-alert-back { z-index: 130 }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--paper); border-radius: 24px; box-shadow: 0 30px 80px -20px var(--pop-shadow); animation: pop .2s var(--ease) }
.modal.wide { width: min(760px, 100%) }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0 }
.modal-head h3 { font-size: 20px }
.modal-body { padding: 18px 22px }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } }
/* Toasts: web style, top-right, stacked */
#toasts { position: fixed; z-index: 200; top: 86px; right: 24px; display: grid; gap: 10px; width: min(380px, calc(100% - 32px)) }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.4; box-shadow: 0 18px 40px -16px rgba(22, 32, 46, .35); animation: toastIn .25s var(--ease) }
.toast > i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2) }
.toast > i svg { width: 16px; height: 16px }
.toast > span { flex: 1; min-width: 0 }
.toast > button { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted) }
.toast > button:hover { background: var(--hover); color: var(--ink) }
.toast > button svg { width: 15px; height: 15px }
.toast.success { border-left-color: var(--ok) }
.toast.success > i { background: var(--ok-bg); color: var(--ok) }
.toast.error { border-left-color: var(--bad) }
.toast.error > i { background: var(--bad-bg); color: var(--bad) }
.toast.out { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) } }
@media (max-width: 640px) { #toasts { top: auto; bottom: 90px; left: 16px; right: 16px; width: auto } }

/* Chat */
.chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 160px); min-height: 480px; padding: 0; overflow: hidden }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto }
.chat-list .list-item.active { background: var(--accent-soft) }
.chat-pane { display: flex; flex-direction: column; min-width: 0 }
.chat-pane .head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line) }
.chat-pane .msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--accent-tint) }
.bubble { max-width: min(72%, 560px); padding: 10px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word; align-self: flex-start }
.bubble.me { align-self: flex-end; background: var(--accent); color: #fff; border-color: transparent; border-bottom-right-radius: 6px }
.bubble:not(.me) { border-bottom-left-radius: 6px }
.bubble time { display: block; margin-top: 4px; font-size: 11px; opacity: .7; text-align: right }
.bubble .files { display: grid; gap: 6px; margin-bottom: 4px }
.bubble .files img { max-width: 240px; border-radius: 12px }
.bubble .files a.file { text-decoration: underline }
.day-sep { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--paper); font-size: 12px; color: var(--muted); font-weight: 600 }
.composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--paper) }
.composer textarea { flex: 1; min-height: 46px; max-height: 160px; resize: none; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; outline: none; line-height: 1.45 }
.composer textarea:focus { border-color: var(--accent) }
@media (max-width: 1000px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - 190px) }
  .chat.has-open .chat-list { display: none }
  .chat:not(.has-open) .chat-pane { display: none }
}

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px }
.cal .dow { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 4px 0 }
.cal button { position: relative; aspect-ratio: 1 / .82; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 600; display: grid; place-items: center }
.cal button.out { visibility: hidden }
.cal button.today { border-color: var(--accent) }
.cal button.sel { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.cal button .dot { position: absolute; bottom: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; display: grid; place-items: center }
.cal button.off { background: var(--surface-2); color: var(--muted) }

/* Week hours */
.hours-row { display: grid; grid-template-columns: 130px auto 1fr; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.hours-row:last-child { border-bottom: 0 }
.hours-row .times { display: flex; gap: 8px; align-items: center }
.hours-row .times input { max-width: 150px }
@media (max-width: 640px) { .hours-row { grid-template-columns: 1fr auto } .hours-row .times { grid-column: 1 / -1 } }

/* Store buttons (as on wedza.in) */
.store-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: center; text-align: center }
.store-block > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2) }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 16px 7px 12px; border: 1px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--on-ink); text-align: left; transition: background .25s, border-color .25s }
.store:hover { background: var(--accent); border-color: var(--accent) }
.store svg { width: 22px; height: 22px; flex: none }
.store small { display: block; font-size: 10px; line-height: 1.1; color: color-mix(in srgb, var(--on-ink) 70%, transparent) }
.store strong { display: block; font-size: 14.5px; line-height: 1.2 }

/* Inline icons keep their size and never stretch inside flex rows. */
svg { flex: none }
.list-item > svg:last-child { color: var(--muted) }
.thumb svg { width: 20px; height: 20px }
/* Prices and badges at the end of a row keep their full width; the title shrinks instead. */
.list-item > .money, .list-item > b, .list-item > .badge, .row > .money { flex: none; white-space: nowrap }
/* Chat: the message box takes the whole row next to the send button. */
.composer > .grow { flex: 1 1 auto; min-width: 0 }
.composer textarea { width: 100% }
/* List rows never get wider than their card (grid items default to min-content). */
.list { grid-template-columns: minmax(0, 1fr) }

/* Chips stay on one line; step chips scroll sideways on small screens. */
.chip { white-space: nowrap; flex: none }
.chip svg { width: 15px; height: 15px }
.chip .count svg { width: 12px; height: 12px }
.chip .count.done { background: var(--ok-bg); color: var(--ok) }
.chip.active .count.done { background: rgba(255, 255, 255, .2); color: #fff }
.steps-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none }
.steps-row::-webkit-scrollbar { display: none }

/* Wedza Partner logo (square mark + wordmark) */
.side .brand img { height: 52px }
.auth-hero .brand img { height: 64px }
/* Corporate information cards (step 3, as in the app) */
.sub-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 16px; background: var(--paper) }
.sub-card h3 { font-size: 16px }
.sub-card > .hint { margin: 2px 0 14px }
.icon-input { position: relative }
.icon-input > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none }
.icon-input > .input { padding-left: 42px }

/* Drawer: every sub-page slides in over the page you came from. */
body.drawer-open { overflow: hidden }
.drawer-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); animation: fade .2s }
.drawer { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w, 820px), 100vw); max-width: 100%; transition: width .25s var(--ease); display: flex; flex-direction: column; background: var(--bg); box-shadow: -30px 0 80px -30px var(--pop-shadow); animation: drawerIn .28s var(--ease) }
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0 } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--paper) }
.drawer-head h3 { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px }
/* Inside the drawer the close button replaces the "← Back" links and the big page title. */
.drawer .page-head > div > a.link.small { display: none }
.drawer .page-head h2 { font-size: 22px; margin-top: 0 !important }
.drawer form .row.card[style*="sticky"] { bottom: 0 }

/* Sidebar plan card (opens Subscription) */
.plan-card { display: grid; gap: 12px; padding: 16px; border-radius: 18px; color: #fff; background: linear-gradient(140deg, var(--accent-deep), var(--accent) 65%, var(--accent-light)); box-shadow: 0 16px 30px -18px var(--accent-glow); position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s }
.plan-card:after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .14); pointer-events: none }
.plan-card:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px var(--accent-glow) }
.plan-top { display: flex; align-items: center; gap: 10px }
.plan-top > i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .2) }
.plan-top > i svg { width: 18px; height: 18px }
.plan-top small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85 }
.plan-top b { display: block; font-family: var(--display); font-size: 17px; line-height: 1.2 }
.plan-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; opacity: .92 }
.plan-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden }
.plan-bar > span { display: block; height: 100%; border-radius: inherit; background: #fff }
.plan-cta { display: inline-flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--accent-deep); font-size: 13px; font-weight: 700 }
.plan-cta svg { width: 15px; height: 15px }
.plan-card.soon .plan-cta { background: var(--soon-bg); color: var(--soon-text) }
.plan-card.off { color: var(--ink); background: var(--paper); border: 1px dashed var(--accent-light); box-shadow: none }
.plan-card.off:after { display: none }
.plan-card.off .plan-top > i { background: var(--accent-soft); color: var(--accent) }
.plan-card.off .plan-top small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); opacity: 1 }
.plan-card.off .plan-cta { background: var(--accent); color: #fff }

.bubble { white-space: normal }
.bubble .text { white-space: pre-wrap }

/* Footer: copyright, version, developer */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 18px 32px 24px; margin-top: auto; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); text-align: center }
.site-foot a { color: var(--accent); font-weight: 600 }
.site-foot a:hover { text-decoration: underline }
.auth-foot .site-foot { justify-content: flex-start; padding: 0; border: 0; margin: 0 }
.main { min-height: 100vh }
@media (max-width: 1000px) { .site-foot { padding-bottom: 96px } }

/* Calendar: day cards fill the width (one or more columns), count badge in the corner */
.day-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
.day-cards > * { min-width: 0 }
/* Calendar page: a narrower month with taller days; the day's bookings get the rest. */
.cal-wrap { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) }
.cal-wrap .cal button { aspect-ratio: 1 / 1.12 }
.cal[hidden], .cal-my[hidden] { display: none !important }
/* Home pages: the month card (P.miniCalendar) with the day tiles beside it */
.home-cal-row { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start }
.home-cal-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start }
/* An odd last tile spans both columns so the grid ends square. */
.home-cal-tiles > .stat:last-child:nth-child(odd) { grid-column: 1 / -1 }
@media (max-width: 560px) { .home-cal-tiles { grid-template-columns: minmax(0, 1fr) } }
.mini-cal .cal-title { font-size: 16px; text-decoration: none }
/* Month calendars: the count sits on the tile's corner, clear of the date. */
.cal { overflow: visible }
/* Filter chips a page hides (Calendar for crew). */
.chips[hidden] { display: none !important }
@media (max-width: 860px) { .home-cal-row { grid-template-columns: minmax(0, 1fr) } }
.cal-title { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 700 18px var(--display); letter-spacing: -.02em; cursor: pointer }
.cal-title:hover, .cal-title.open { background: var(--accent-tint); color: var(--accent-text) }
.cal-title svg { width: 16px; height: 16px; color: var(--muted); transition: transform .2s }
.cal-title.open svg { transform: rotate(180deg); color: var(--accent) }
.cal-my-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px }
.cal-my-head b { font: 700 20px var(--display) }
.cal-my-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.cal-my-grid button { height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: 600 14.5px var(--sans, inherit); cursor: pointer }
.cal-my-grid button:hover { background: var(--accent-tint); color: var(--accent-text) }
.cal-my-grid button.now { border-color: var(--accent) }
.cal-my-grid button.sel { background: var(--ink); border-color: var(--ink); color: var(--on-ink) }
@media (max-width: 1100px) { .cal-wrap { grid-template-columns: minmax(0, 1fr) } .cal-wrap .cal button { aspect-ratio: 1 / .9 } }
.booking-card .when .when-src { background: var(--info-bg); color: var(--info); font-weight: 700 }
.cal button .dot { bottom: auto; top: -6px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; z-index: 1; box-shadow: 0 0 0 2px var(--paper) }

/* Wide drawer content stays readable */
.drawer-body > * { max-width: 1240px; margin-left: auto; margin-right: auto }

/* Phones: the portal is web-only */
.mobile-only { min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; text-align: center; background: var(--bg) }
.mobile-only .box { max-width: 380px; display: grid; gap: 16px; justify-items: center }
.mobile-only img.logo { height: 72px; width: auto }
.mobile-only h1 { font-size: 26px; line-height: 1.15 }
.mobile-only p { margin: 0; color: var(--muted) }
.mobile-only .badge-web { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700 }
.mobile-only .badge-web svg { width: 16px; height: 16px }

/* ================= Dark mode ================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1015;
  --paper: #171a21;
  --ink: #eceef3;
  --ink-2: #c5c9d3;
  --muted: #8f95a4;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --on-ink: #11131a;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, #171a21);
  --accent-tint: color-mix(in srgb, var(--accent) 9%, #171a21);
  --accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --ok: #34d399; --ok-bg: rgba(52, 211, 153, .14);
  --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .14);
  --bad: #f87171; --bad-bg: rgba(248, 113, 113, .14);
  --info: #9db0ff; --info-bg: rgba(157, 176, 255, .14);
  --surface-2: #232733;
  --hover: #232733;
  --skel-a: #1d2029; --skel-b: #262a35;
  --switch-off: #3a3f4c;
  --topbar-bg: rgba(14, 16, 21, .82);
  --tabbar-bg: rgba(23, 26, 33, .96);
  --glass: rgba(23, 26, 33, .72);
  --grid-line: rgba(255, 255, 255, .045);
  --scrim: rgba(0, 0, 0, .55);
  --pop-shadow: rgba(0, 0, 0, .7);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -18px rgba(0, 0, 0, .7);
  --warn-text: #fcd34d; --ok-text: #86efac;
  --soon-bg: #fff3d6; --soon-text: #8a5200;
}
:root[data-theme="dark"] .auth-hero h1 .ink { color: var(--ink) }
:root[data-theme="dark"] .hero-card .btn, :root[data-theme="dark"] .plan-cta { color: #b02a35 }
:root[data-theme="dark"] .btn-ghost:hover { color: var(--accent-text) }
/* Maps keep Leaflet's own layers (z-index up to 1000) inside them, so pop-ups and the header stay on top. */
.leaflet-container { position: relative; z-index: 0; isolation: isolate }
:root[data-theme="dark"] .leaflet-container { filter: brightness(.85) contrast(1.05) }

/* Theme switch button */
.theme-btn svg { transition: transform .45s var(--ease) }
.theme-btn:hover svg { transform: rotate(-20deg) }
.auth-theme { position: absolute; top: 18px; right: 18px; z-index: 3 }
.auth-panel { position: relative }

/* Switching: one crisp circular reveal (View Transitions); no per-element colour fades. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal }
::view-transition-old(root) { z-index: 1 }
::view-transition-new(root) { z-index: 2 }
/* Browsers without View Transitions: a short, synchronised colour fade. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .32s ease, border-color .32s ease, color .32s ease, fill .32s ease, box-shadow .32s ease !important;
}

/* Logo per theme */
.logo-dark { display: none !important }
:root[data-theme="dark"] .logo-light { display: none !important }
:root[data-theme="dark"] .logo-dark { display: block !important }
.topbar .brand img { height: 44px; width: auto }

/* New booking alert */
.order-alert { display: grid; justify-items: center; gap: 16px; text-align: left }
.order-alert .ring { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 0 var(--accent-glow); animation: ringPulse 1.4s ease-out infinite }
.order-alert .ring svg { width: 32px; height: 32px; animation: ringShake 1.4s ease-in-out infinite; transform-origin: 50% 10% }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow) } 80%, 100% { box-shadow: 0 0 0 22px transparent } }
@keyframes ringShake { 0%, 50%, 100% { transform: rotate(0) } 10% { transform: rotate(14deg) } 20% { transform: rotate(-12deg) } 30% { transform: rotate(9deg) } 40% { transform: rotate(-6deg) } }
.order-alert-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--accent-tint); text-align: left; color: var(--ink); transition: border-color .2s }
.order-alert-item:hover { border-color: var(--accent-light) }
.order-alert-item .grow { display: grid; min-width: 0 }
.order-alert-modal { border: 2px solid var(--accent) }
@media (prefers-reduced-motion: reduce) { .order-alert .ring, .order-alert .ring svg { animation: none } }

/* ===== Clean header: one solid bar across the sidebar logo and the top bar ===== */
:root { --header-h: 76px }
.side { padding-top: 0 }
.side .brand { height: var(--header-h); margin: 0 -16px 10px; padding: 0 24px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 2 }
.side .brand img { height: 56px; width: auto }
.topbar { height: var(--header-h); padding: 0 32px; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); transition: box-shadow .25s ease }
.topbar.scrolled { box-shadow: 0 10px 24px -18px rgba(22, 32, 46, .35) }
:root[data-theme="dark"] .topbar.scrolled { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8) }
.topbar h1 { font-size: 21px; letter-spacing: -.02em }
.topbar .me { padding: 4px 6px 4px 4px; background: none; border: 0; border-radius: 12px; transition: opacity .15s }
.topbar .me:hover { opacity: .8 }
.topbar .me b { font-size: 14px; line-height: 1.2 }
.topbar .icon-btn { width: 42px; height: 42px; border-radius: 12px; background: var(--bg) }
.topbar .icon-btn:hover { background: var(--paper) }
@media (max-width: 1000px) { :root { --header-h: 64px } .topbar { padding: 0 16px } .side .brand { position: static } }
.side .brand { flex: none }
/* Horizontal Wedza lockup (heart + wordmark), left edge lined up with the menu icons. */
.side .brand { padding: 0 28px; gap: 12px }
.side .brand img { height: 32px; width: auto }
/* Sub-brand: wedza | Partner, wedza | CRM. A hairline, then the product name in the display face. */
.side .brand .brand-product { display: inline-flex; align-items: center; height: 26px; padding: 0 0 0 12px; border-left: 1.5px solid var(--line-2); border-radius: 0; background: none; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-transform: none; color: var(--ink-2); line-height: 1 }

/* Drawer sizes: sm (reading), md (details), lg (long forms); full width on small screens */
.drawer[data-size="sm"] { --drawer-w: 640px }
.drawer[data-size="md"] { --drawer-w: 880px }
.drawer[data-size="lg"] { --drawer-w: 90vw }
@media (max-width: 960px) { .drawer, .drawer[data-size] { width: 100vw } }
/* Content adapts to the drawer's own width */
.drawer-body { container-type: inline-size; padding-bottom: 0 }
@container (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
  .hours-row { grid-template-columns: 1fr auto }
  .kv { grid-template-columns: minmax(100px, 40%) 1fr }
}
@container (min-width: 761px) and (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Form actions: a proper footer bar at the bottom of the drawer */
.form-actions { gap: 14px }
.drawer .form-actions { position: sticky; bottom: 0; z-index: 6; margin: 22px -22px 0; padding: 14px 22px; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -12px 24px -20px rgba(22, 32, 46, .35) }
:root[data-theme="dark"] .drawer .form-actions { box-shadow: 0 -12px 24px -18px rgba(0, 0, 0, .8) }
.drawer form.card .form-actions { margin: 22px -22px -22px; border-radius: 0 0 var(--r-lg) var(--r-lg) }
.drawer .drawer-body > form:last-child, .drawer .drawer-body > .stack:last-child { margin-bottom: 0 }
.drawer-body > :last-child { margin-bottom: 22px }
.drawer-body > form.stack:last-child { margin-bottom: 0 }
.form-actions .muted { min-width: 0 }
@media (max-width: 640px) { .form-actions { flex-wrap: wrap } .form-actions .btn { flex: 1 } }

/* Forms and options open as side drawers; centre popups are kept for alerts. */
.sheet-back { place-items: stretch end; padding: 0; z-index: 100 }
.modal.sheet { width: min(560px, 100vw); height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: -30px 0 80px -30px var(--pop-shadow); animation: drawerIn .28s var(--ease) }
.modal.sheet.wide { width: min(760px, 100vw) }
/* Roomier drawers: forms 680px, previews and plans 1040px (full width on small screens). */
.modal.sheet { width: min(680px, 100vw) }
.modal.sheet.wide { width: min(1040px, 100vw) }
.sheet .modal-head { padding: 16px 22px; border-bottom: 1px solid var(--line) }
.sheet .modal-head h3 { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sheet .modal-body { flex: 1; overflow-y: auto; padding: 22px }
.sheet .modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -12px 24px -20px rgba(22, 32, 46, .35) }

/* Drawers with a form: the button bar always sits on the drawer's bottom edge,
   even when the step is short, and spans the full drawer width. */
.drawer-body:has(.form-actions) { display: flex; flex-direction: column }
.drawer-body:has(.form-actions) > * { width: 100%; flex: none }
.drawer-body:has(.form-actions) > form:has(> .form-actions),
.drawer-body:has(.form-actions) > :last-child:has(.form-actions) { flex: 1 0 auto; display: flex; flex-direction: column }
.drawer-body:has(.form-actions) > :last-child:has(.form-actions) > form { flex: 1 0 auto; display: flex; flex-direction: column }
.drawer .form-actions { margin-top: auto !important; border-top: 0; box-shadow: 0 0 0 100vmax var(--paper), 0 -1px 0 100vmax var(--line); clip-path: inset(-1px -100vmax 0) }
.drawer .stack > .form-actions { margin-top: auto !important }
.steps-head { margin-bottom: 4px }

/* ═══ One drawer design (matches the custom order drawer) ═══
   Flat panel, content aligned with the title, forms without card boxes,
   actions in the bar on the bottom edge. */
.drawer { background: var(--paper) }
.drawer[data-size="sm"] { --drawer-w: 560px }
.drawer[data-size="md"] { --drawer-w: 880px }
.drawer[data-size="lg"] { --drawer-w: 1080px }
.drawer-body > * { max-width: none }
.drawer .dup-title { display: none }
.drawer .page-head { margin-bottom: 16px; align-items: flex-start }
.drawer .page-head p { margin: 0 }
.drawer .page-head .kicker { margin-bottom: 4px }
.drawer .card { box-shadow: none }
.drawer form .card:not(.form-actions), .drawer form.card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 }
.drawer form .card-head h3 { font-size: 17px }
.drawer .form-actions, .drawer form .card.form-actions, .drawer form.card .form-actions {
  position: sticky; bottom: 0; z-index: 6; margin: 22px -22px 0 !important; margin-top: auto !important;
  padding: 14px 22px; border: 0; border-radius: 0; background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper), 0 -1px 0 100vmax var(--line); clip-path: inset(-1px -100vmax 0)
}
.drawer-body:has(.form-actions) > .form-actions:last-child { margin-top: auto !important }
.drawer .form-actions:not(:has(> :nth-child(2))) { justify-content: flex-end }

/* Ask to allow browser notifications */
.notify-ask { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; gap: 14px; width: min(400px, calc(100vw - 32px)); padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px var(--pop-shadow); animation: pop .25s var(--ease) }
.notify-ask.out { opacity: 0; transform: translateY(8px); transition: .2s }
.notify-ask > i { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft, rgba(254, 84, 90, .12)) }
.notify-ask b { font-size: 15px }
.notify-ask p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted) }

/* ═══ Analytics ═══ */
.delta { font-weight: 700; color: var(--muted) }
.delta.up { color: var(--ok) }
.delta.down { color: var(--bad) }
.stat small { display: block; margin-top: 2px; font-size: 12px }
.an-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; height: 260px; align-items: end; padding-top: 22px }
.an-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; outline: none }
.an-fill { width: min(42px, 70%); min-height: 0; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); transition: height .5s var(--ease), filter .15s }
.an-bar:hover .an-fill, .an-bar:focus .an-fill { filter: brightness(1.12) }
.an-val { margin-bottom: 6px; min-height: 15px; font-size: 11.5px; font-weight: 700; white-space: nowrap }

.an-lbl { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--muted) }
.an-sub { min-height: 16px; font-size: 11px; color: var(--muted) }
.an-hbars { display: grid; gap: 10px; margin-top: 10px }
.an-hrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 48px; align-items: center; gap: 12px; font-size: 13.5px }
.an-hrow b { text-align: right }
.an-hlbl { color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.an-htrack { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden }
.an-htrack > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .5s var(--ease) }
.an-donut { display: flex; align-items: center; gap: 28px; flex-wrap: wrap }
.an-donut circle { transition: stroke-dasharray .5s var(--ease) }
.an-dn { font: 800 26px/1 inherit; fill: currentColor }
.an-dl { font-size: 11px; fill: var(--muted) }
.an-legend { display: grid; gap: 10px; flex: 1; min-width: 180px }
.an-legend > div { display: grid; grid-template-columns: 12px 1fr auto 42px; align-items: center; gap: 10px; font-size: 14px }
.an-legend .dot { width: 10px; height: 10px; border-radius: 50% }
.an-legend .muted { text-align: right }
.an-mini { text-align: center }
.an-mini > div { padding: 14px 8px; border-radius: var(--r); background: var(--bg) }
.an-mini b { display: block; font-size: 24px }
.an-mini span { font-size: 12.5px; color: var(--muted); font-weight: 600 }
.an-top { display: grid; gap: 6px }
.an-trow { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 12px; color: inherit; text-decoration: none }
.an-trow:hover { background: var(--bg) }
.an-trow .grow > * { display: block }
.an-rank { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px }
.an-rating { display: flex; gap: 32px; align-items: center; flex-wrap: wrap }
.an-rating .an-hbars { min-width: 240px; margin: 0 }
.an-big { font-size: 46px; line-height: 1 }
.an-stars { color: #f2a53b; letter-spacing: 2px; margin: 6px 0 2px }
.an-stars span { color: var(--line) }
.page-head .chips { flex-wrap: nowrap }

/* Phone screen: copy the portal link */
.copy-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 6px 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper) }
.copy-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; text-align: left }
.copy-link .btn { flex: none }
.mobile-only .box { width: min(380px, 100%); min-width: 0 }
.mobile-only .box > * { max-width: 100%; min-width: 0 }
.copy-link { box-sizing: border-box }
.mobile-only .stores { flex-wrap: wrap; justify-content: center }
.mobile-only { grid-template-columns: minmax(0, 1fr) }
.copy-link input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; outline: none; text-overflow: ellipsis }
.mobile-only { position: relative }
.mobile-only .mobile-theme { position: absolute; top: 16px; right: 16px }

/* Login banner: smart links with QR codes (light and dark) */
.app-links { margin-top: 26px; max-width: 620px }
.app-links-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.app-links-title svg { width: 16px; height: 16px; color: var(--accent) }
.app-links-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.app-link { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); backdrop-filter: blur(8px) }
.app-link .qr { flex: none; display: block; width: 84px; height: 84px; padding: 7px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) }
.app-link .qr svg { display: block; width: 100%; height: 100% }
.app-link b { display: block; font-size: 15px }
.app-link span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted) }
.app-link .link { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 0 }
.app-link .link svg { width: 14px; height: 14px }
.app-links-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted) }
@media (max-width: 1180px) { .app-links-row { grid-template-columns: 1fr } }
.auth-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 620px }
.auth-points li { padding: 7px 12px 7px 7px; border-radius: 999px; font-size: 13.5px; gap: 8px }
.auth-points li i { width: 26px; height: 26px; border-radius: 999px }
.auth-points svg { width: 14px; height: 14px }
.mobile-only .share-btn { width: 100%; justify-content: center; gap: 8px; margin-top: -4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line) }
.mobile-only .share-btn svg { width: 17px; height: 17px; color: var(--accent) }

/* ═══ Toasts: compact, modern ═══ */
#toasts { position: fixed; z-index: 300; top: auto; bottom: 24px; right: 24px; left: auto; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none }
.toast { --tone: #8b95a7; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 16px; border: 1px solid rgba(255, 255, 255, .06); border-left: 0; border-radius: 16px;
  background: #16191f; color: #fff; box-shadow: 0 18px 40px -12px rgba(10, 12, 18, .45), 0 2px 6px rgba(10, 12, 18, .12); font-size: 14px; pointer-events: auto;
  animation: toastUp .38s cubic-bezier(.2, 1.1, .3, 1) both }
:root[data-theme="dark"] .toast { background: #232833; border-color: rgba(255, 255, 255, .09); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7) }
.toast.success { --tone: #22c55e }
.toast.error { --tone: #ff5a5f }
.toast.warn { --tone: #f5a524 }
.toast > i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone) }
.toast > i svg { width: 16px; height: 16px; stroke-width: 2.6 }
.toast-text { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 1px }
.toast-text b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #fff }
.toast-text span { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); overflow-wrap: anywhere }
.toast > button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -2px -4px 0 0; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .5); opacity: 0; transition: opacity .15s, background .15s, color .15s; cursor: pointer }
.toast:hover > button, .toast > button:focus-visible { opacity: 1 }
.toast > button:hover { background: rgba(255, 255, 255, .1); color: #fff }
.toast > button svg { width: 14px; height: 14px }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tone); opacity: .85; transform-origin: left; animation: toastBar var(--t, 4000ms) linear forwards }
.toast.paused .toast-bar { animation-play-state: paused }
.toast.out { animation: toastOut .26s ease forwards }
@keyframes toastUp { from { opacity: 0; transform: translateY(16px) scale(.96) } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97) } }
@keyframes toastBar { to { transform: scaleX(0) } }
@media (max-width: 640px) { #toasts { left: 16px; right: 16px; bottom: 16px; width: auto } .toast > button { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation-duration: .01ms } }

/* Header: feedback button */
.feedback-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 13px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s }
.feedback-btn svg { width: 17px; height: 17px; color: var(--accent) }
.feedback-btn:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-text, var(--accent)) }
@media (max-width: 1180px) { .feedback-btn span { display: none } .feedback-btn { width: 42px; padding: 0; justify-content: center; border-radius: 12px } }
/* Feedback drawer */
.fb-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.fb-type { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s }
.fb-type input { position: absolute; opacity: 0; pointer-events: none }
.fb-type i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--bg); color: var(--muted) }
.fb-type i svg { width: 18px; height: 18px }
.fb-type b { display: block; font-size: 14.5px }
.fb-type small { display: block; color: var(--muted); font-size: 12.5px }
.fb-type:has(input:checked) { border-color: var(--accent); background: var(--accent-tint, var(--accent-soft)) }
.fb-type:has(input:checked) i { background: var(--accent); color: #fff }
.fb-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }

/* New version available */
.update-bar { position: fixed; z-index: 310; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 12px; border-radius: 16px; background: #16191f; color: #fff; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px -12px rgba(10, 12, 18, .5); animation: toastUp .38s cubic-bezier(.2, 1.1, .3, 1) both }
:root[data-theme="dark"] .update-bar { background: #232833 }
.update-bar > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent) }
.update-bar > i svg { width: 16px; height: 16px }
.update-bar b { display: block; font-size: 14px }
.update-bar small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .7) }
.update-bar .update-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .55); cursor: pointer }
.update-bar .update-x:hover { background: rgba(255, 255, 255, .1); color: #fff }
.update-bar .update-x svg { width: 14px; height: 14px }

/* Progress window for uploads */
.progress-back { z-index: 250; backdrop-filter: blur(3px) }
.progress-box { width: min(440px, 100%); padding: 24px }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.progress-head b { font-size: 18px; letter-spacing: -.01em }
.progress-pct { font-weight: 800; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums }
.progress-track { height: 8px; margin-top: 14px; border-radius: 99px; background: var(--line); overflow: hidden }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ffb199)); transition: width .35s var(--ease) }
.progress-now { margin: 12px 0 0; font-size: 14px; font-weight: 600; min-height: 20px }
.progress-steps { display: grid; gap: 9px; margin: 16px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line) }
.progress-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted) }
.progress-steps li i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line) }
.progress-steps li.now { color: var(--ink); font-weight: 600 }
.progress-steps li.now i { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite }
.progress-steps li.done { color: var(--ink) }
.progress-steps li.done i { border-color: var(--ok); background: var(--ok) }
.progress-steps li.done i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.progress-back.finished .progress-track span { background: var(--ok) }
.progress-back.finished .progress-pct { color: var(--ok) }
@keyframes spin { to { transform: rotate(360deg) } }

/* Rejected profile: the reason from Wedza */
.empty.rejected i { background: var(--bad-bg); color: var(--bad) }
.reject-box { margin: 4px 0 20px; padding: 16px 18px; border-radius: 16px; background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); text-align: left }
.reject-box b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bad) }
.reject-box b svg { width: 16px; height: 16px }
.reject-box p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; white-space: pre-line; color: var(--ink) }
.reject-box small { display: block; margin-top: 10px; font-size: 12px; color: var(--muted) }

/* Bottom action bar: a clear full-width line on top, like the admin drawers. */
.drawer .form-actions, .drawer form .card.form-actions, .drawer form.card .form-actions { box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(-1px -100vmax 0); border-top: 0 }
.drawer .form-actions::before { content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; height: 1px; background: var(--line); pointer-events: none }
.sheet .modal-foot { border-top: 1px solid var(--line) }
:root[data-theme="dark"] .drawer .form-actions::before { background: rgba(255, 255, 255, .1) }
:root[data-theme="dark"] .sheet .modal-foot { border-top-color: rgba(255, 255, 255, .1) }
:root:not([data-theme="dark"]) .drawer .form-actions::before { background: rgba(18, 19, 26, .13) }

/* Toasts at the top right, under the header (same design), sliding down. */
#toasts { top: calc(var(--header-h, 76px) + 14px); bottom: auto; right: 24px; left: auto }
.toast { animation-name: toastDown }
.toast.out { animation-name: toastUpOut }
@keyframes toastDown { from { opacity: 0; transform: translateY(-14px) scale(.96) } }
@keyframes toastUpOut { to { opacity: 0; transform: translateY(-8px) scale(.97) } }
.auth ~ #toasts, body:has(.auth) #toasts, body:has(.mobile-only) #toasts { top: 18px }
@media (max-width: 640px) { #toasts { top: 12px; bottom: auto; left: 12px; right: 12px; width: auto } }

/* Wedza support avatar: the heart mark in brand colour on a soft tint (light and dark). */
.avatar.wedza-mark { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 0; overflow: visible }
.avatar.wedza-mark svg { width: 100%; height: 100%; display: block }
.avatar.wedza-mark { box-shadow: 0 0 0 1px var(--line-2) }

/* Release version beside the page name in the header: a neutral badge. */
.topbar .version-badge { flex: none; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums }
@media (max-width: 640px) { .topbar .version-badge { display: none } }

/* Home: the admin's partner banners in the top card, sliding when there are several. */
/* The banner is shown whole, never cropped: the card takes the banner's own shape (home.js
   fitBanner sets --banner-ratio, 2:1 to 3.2:1) and a blurred copy fills any space left over. */
.banner-card { position: relative; overflow: hidden; aspect-ratio: var(--banner-ratio, 2.5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow) }
.banner-track { display: flex; height: 100%; transition: transform .5s var(--ease) }
.banner-slide { position: relative; overflow: hidden; flex: 0 0 100%; display: block; height: 100% }
.banner-slide .banner-bg { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(22px) saturate(1.15); opacity: .65; pointer-events: none }
.banner-slide .banner-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain }
.banner-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px }
.banner-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; transition: width .2s, background .2s }
.banner-dots button.on { width: 22px; background: #fff }
@media (prefers-reduced-motion: reduce) { .banner-track { transition: none } }

/* Availability: choose an action, then a plain sentence of what will happen. */
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s }
.choice:hover { border-color: var(--accent-light) }
.choice > i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2) }
.choice > i svg { width: 19px; height: 19px }
.choice b { display: block; font-size: 15px }
.choice small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted) }
.choice.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-soft) }
.choice.on > i { background: var(--accent-soft); color: var(--accent) }
.av-part { margin: 4px 0 8px }
.av-part > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none }
.av-part > summary::before { content: "+ "; color: var(--accent); font-weight: 700 }
.av-part[open] > summary::before { content: "− " }
.av-limit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px }
.av-summary { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.5 }
.av-summary.bad { background: var(--bad-bg); color: var(--bad) }
.av-summary.ok { background: var(--ok-bg); color: var(--ok) }
.av-summary.muted { background: var(--surface-2); color: var(--muted) }
.av-summary b { color: inherit }
@media (max-width: 640px) { .choice-row, .av-limit { grid-template-columns: 1fr } }

/* ═══ Workspace (workspace.js): leads, orders, availability, clients, team ═══ */
.ws-actions { gap: 8px }
.input.ws-sm { min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 14px }
select.input.ws-sm { padding-right: 34px; background-position: right 10px center }
.ws-lead-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px }
.ws-src-pick { width: auto; min-width: 190px }
.notice.ws-quiet { display: flex; gap: 10px; align-items: center; background: var(--paper); border-color: var(--line); color: var(--muted) }
.notice.ws-quiet svg { width: 17px; height: 17px; flex: none }
.notice.bad { background: var(--bad-bg); border-color: transparent; color: var(--bad) }
.ws-t { font-weight: 700; white-space: nowrap }
/* The grey line under a title (often a lead's or order's services with their packages): wraps inside its card or cell, never runs past it. */
.ws-m { font-size: 13px; color: var(--muted); white-space: normal; overflow-wrap: anywhere }
.ws-nw { white-space: nowrap }
.ws-addr { min-width: 220px; max-width: 360px; white-space: pre-line }
.ws-contact span { white-space: pre-line }
.ws-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis }
.table th.ws-r, .table td.ws-r { text-align: right }
.table, .ws-match, .stat b { font-variant-numeric: tabular-nums }
.ws-acts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: nowrap }
/* Row action menu: one ⋯ button, the actions in a popover. */
.ws-menu { position: relative; display: inline-flex }
.ws-menu-btn svg { width: 20px; height: 20px }
.ws-menu.open .ws-menu-btn, .ws-menu-btn:hover { background: var(--accent-tint); color: var(--accent) }
.ws-menu-list { display: none; position: fixed; z-index: 60; padding: 6px 0 }
.ws-menu.open .ws-menu-list { display: block }
.ws-menu-card { min-width: 230px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop, 0 30px 80px -20px rgba(0, 0, 0, .45)); animation: wsMenuIn .14s ease }
.ws-menu-list.up .ws-menu-card { animation-name: wsMenuUp }
@keyframes wsMenuIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
@keyframes wsMenuUp { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.ws-mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: left; cursor: pointer; white-space: nowrap }
.ws-mi svg { width: 18px; height: 18px; flex: none; opacity: .85 }
.ws-mi:hover, .ws-mi:focus-visible { background: var(--hover, #f3f1f0); color: var(--ink); outline: none }
.ws-mi.wa svg { color: #128c4b; opacity: 1 }
.ws-mi.ok { color: var(--ok) }
.ws-mi.ok:hover, .ws-mi.ok:focus-visible { background: var(--ok-bg); color: var(--ok) }
.ws-mi.bad { color: var(--bad) }
.ws-mi.bad:hover, .ws-mi.bad:focus-visible { background: var(--bad-bg); color: var(--bad) }
@media (prefers-reduced-motion: reduce) { .ws-menu-card { animation: none } }
.ws-acts .link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.ws-acts .link svg { width: 15px; height: 15px }
.icon-btn.ws-danger:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-bg) }
.card-head.ws-pad { padding: 18px 18px 0; margin-bottom: 12px; flex-wrap: wrap }
.ws-bar { height: 6px; margin-top: 6px; min-width: 70px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.ws-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ok) }
.ws-bar.lg { height: 8px; margin: 14px 0 8px }
.ws-search { position: relative; max-width: 420px; margin-bottom: 16px }
.ws-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none }
.ws-search .input { border-radius: 999px; padding-left: 44px; min-height: 44px }
.search-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px }
.search-row .ws-search { flex: 1 1 280px; margin-bottom: 0 }
.date-pick { position: relative; display: flex; align-items: center; flex: 0 1 220px; min-width: 180px; cursor: pointer }
.date-pick > svg { position: absolute; left: 16px; color: var(--muted); pointer-events: none }
.date-pick .input { border-radius: 999px; padding-left: 44px; padding-right: 36px; min-height: 44px; width: 100%; cursor: pointer }
.date-pick.on > svg { color: var(--accent) }
.date-pick.on .input { border-color: var(--accent) }
.date-clear { position: absolute; right: 10px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer }
.ws-tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none }
.ws-tile svg { width: 17px; height: 17px }
.ws-tile.neutral { background: var(--surface-2); color: var(--ink-2) }
.ws-tile.ok { background: var(--ok-bg, #e8f7ee); color: var(--ok) }
.list-item.ws-on { background: var(--accent-soft) }
.ws-h4 { font-size: 16px; margin-bottom: 8px }

/* Team */
.ws-team { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start }
@media (max-width: 900px) { .ws-team { grid-template-columns: minmax(0, 1fr) } }
.ws-perm td { vertical-align: top }
.ws-perm-acts { display: flex; flex-wrap: wrap; gap: 10px 18px }
.ws-perm .check { font-size: 14px; color: var(--ink-2) }

/* Sheets: convert to order, payments, dates */
.ws-sheet .modal-body { container-type: inline-size }
.ws-sheet .sub-card h3, .drawer .sub-card h3 { margin-bottom: 4px }
.ws-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; margin-top: 10px }
.ws-inst-head, .ws-inst-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 96px minmax(0, 1.2fr) 40px; gap: 8px; align-items: center }
.ws-inst-head { padding: 0 2px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.ws-inst-row { padding: 8px 0; border-top: 1px solid var(--line) }
.ws-inst-row .pct { font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }
.ws-inst-row .ix { display: none }
.ws-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.ws-match .badge svg { width: 14px; height: 14px }
.ws-date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0 }
.ws-date-row:first-child { border-top: 0 }
.ws-date-row .grow { flex: 1; min-width: 0 }
.ws-date-row b { font-size: 14px; white-space: nowrap }
.ws-date-row.ws-pad-x { padding-left: 18px; padding-right: 18px }
.ws-stage-ph { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); display: block }
.ws-stage-ph.lg { width: 100%; max-width: 280px; height: auto; max-height: 200px; margin-bottom: 10px }
.ws-stage-up { display: block }
select.ws-stage-st { width: auto; font-weight: 600 }
.ws-stage-mv { display: inline-flex; gap: 4px }
.ws-stage-mv [data-dir="up"] svg { transform: rotate(180deg) }
.ws-stage-mv .icon-btn:disabled { opacity: .35; cursor: default }
select.ws-stage-st[data-st="pending"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)) }
select.ws-stage-st[data-st="completed"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)) }
.ws-warn-line { display: flex; gap: 6px; align-items: center; flex-basis: 100%; font-size: 12.5px; color: var(--warn) }
.ws-warn-line svg { width: 14px; height: 14px; flex: none }
@container (max-width: 700px) {
  .ws-inst-head { display: none }
  .ws-inst-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 0 }
  .ws-inst-row .ix { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2) }
  .ws-inst-row > .pct, .ws-inst-row > .rm { display: none }
  .ws-add-row { grid-template-columns: minmax(0, 1fr) }
  .ws-od-top { grid-template-columns: minmax(0, 1fr) !important }
}

/* Order detail drawer */
.ws-od-top { margin-bottom: 16px; align-items: start }
.badge.ws-nc { text-transform: none }
.ws-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px }
.ws-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint); font-size: 13px; color: var(--ink-2) }
.ws-pills svg { width: 14px; height: 14px; color: var(--accent) }
.kv.ws-kv-r { grid-template-columns: auto 1fr }
.kv.ws-kv-r dd { text-align: right; font-variant-numeric: tabular-nums }
.ws-contact { display: grid; gap: 8px; font-size: 14px }
.ws-contact div { display: flex; gap: 10px; align-items: center; min-width: 0; word-break: break-word }
.ws-contact svg { width: 16px; height: 16px; color: var(--muted); flex: none }

/* Sidebar plan card: compact single row so the menu keeps its room */
.plan-card.compact { padding: 10px 12px; gap: 0; border-radius: 16px }
.plan-card.compact:after { width: 90px; height: 90px; right: -30px; top: -30px }
.plan-card.compact .plan-top > i { width: 32px; height: 32px; border-radius: 10px }
.plan-card.compact .plan-top > span { flex: 1; min-width: 0 }
.plan-card.compact .plan-top b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.plan-card.compact .plan-top > svg { width: 16px; height: 16px; flex: none; opacity: .85 }
.plan-card.compact .plan-left { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--soon-bg); color: var(--soon-text) }
.side-foot { padding-top: 12px }

/* Home: current plan next to the banner, income and earnings under it */
.home-side { display: grid; gap: 16px; align-content: stretch; grid-template-rows: auto 1fr; min-width: 0 }
.home-side > .grid { align-items: stretch }
.plan-card.home-plan .plan-top > span:not(.plan-cta) { flex: 1; min-width: 0 }
.plan-card.home-plan .plan-top b { font-size: 20px }
.plan-card.home-plan .plan-cta { flex: none; padding: 7px 12px; gap: 6px }
.plan-card.home-plan .plan-meta { font-size: 13px }

/* ═══ Partner / Workspace switch (core.js P.switchMode) ═══ */
/* A CRM team member sees Services and Availability read-only (the server refuses the changes too). */
.is-member a[href$="/services/new"], .is-member a[href$="/edit"][href*="/services/"], .is-member .switch:has([data-toggle]), .is-member .switch:has([data-formtoggle]), .is-member #del, .is-member #rev,
.is-member #ssForm, .no-block #avGo, .no-block [data-del-leave], .no-block [data-del-limit] { display: none !important }
.member-chip { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); color: var(--muted) }
.member-chip svg { width: 18px; height: 18px; flex: none; color: var(--accent) }
.member-chip span { display: grid; min-width: 0 }
.member-chip b { color: var(--ink); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.member-chip small { font-size: 12px }
.member-biz { display: grid; gap: 8px; margin: 4px 0 14px }
.member-biz button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer }
.member-biz button:hover { border-color: var(--accent); background: var(--surface-2) }
.member-biz button svg { width: 18px; height: 18px; color: var(--accent) }
.mode-switch { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 6px 0 8px; padding: 4px; overflow: hidden; border-radius: 14px; background: var(--surface-2) }
.mode-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 40px; padding: 0 8px; border: 0; border-radius: 11px; background: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .35s cubic-bezier(.65, 0, .35, 1) }
.mode-switch button svg { width: 17px; height: 17px; flex: none; transition: color .35s cubic-bezier(.65, 0, .35, 1) }
.mode-switch button:hover { color: var(--ink) }
.mode-switch button[aria-selected="true"] { pointer-events: none }
/* The white tab that slides under the selected app. */
.mode-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 11px; background: var(--paper); box-shadow: 0 1px 2px rgba(22, 32, 46, .08), 0 4px 12px -6px rgba(22, 32, 46, .25); transition: transform .48s cubic-bezier(.65, 0, .35, 1) }
:root[data-theme="dark"] .mode-thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -6px rgba(0, 0, 0, .7) }
.mode-switch[data-at="partner"] .mode-thumb { transform: translateX(100%) }
/* Label colours follow the tab while it travels. */
.mode-switch[data-at="partner"] button[data-mode="workspace"], .mode-switch[data-at="workspace"] button[data-mode="partner"] { color: var(--muted); font-weight: 600 }
.mode-switch[data-at="partner"] button[data-mode="partner"], .mode-switch[data-at="workspace"] button[data-mode="workspace"] { color: var(--ink); font-weight: 700 }
.mode-switch[data-at="partner"] button[data-mode="partner"] svg, .mode-switch[data-at="workspace"] button[data-mode="workspace"] svg { color: var(--accent) }
/* Switching apps: a soft frosted veil with the product lockup, then the new app fades in. */
.mode-veil { position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 14px; background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); opacity: 0; pointer-events: all }
.mv-card { display: inline-flex; align-items: center; gap: 16px; padding: 18px 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(22, 32, 46, .35), 0 2px 6px rgba(22, 32, 46, .05); animation: mvIn .5s cubic-bezier(.2, .8, .2, 1) both }
.mv-logo img { height: 34px; width: auto; display: block }
.mv-sep { width: 1.5px; height: 30px; background: var(--line-2) }
.mv-name { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--ink) }
.mv-sub { font-size: 14px; color: var(--muted); animation: mvIn .5s cubic-bezier(.2, .8, .2, 1) .06s both }
.mv-bar { width: 120px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden }
.mv-bar span { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--accent); animation: mvBar .9s cubic-bezier(.65, 0, .35, 1) infinite }
@keyframes mvIn { from { opacity: 0; transform: translateY(8px) scale(.97) } }
@keyframes mvBar { from { transform: translateX(-100%) } to { transform: translateX(260%) } }
/* First-visit introduction of each app */
.mi { display: grid; gap: 18px }
.mi-head { display: grid; gap: 8px }
.mi-lock { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 6px }
.mi-lock img { height: 26px; width: auto; display: block }
.mi-sep { width: 1.5px; height: 22px; background: var(--line-2) }
.mi-lock b { font-family: var(--display); font-size: 20px; letter-spacing: -.02em; font-weight: 600; color: var(--ink-2) }
.mi h2 { margin: 0; font-family: var(--display); font-size: 28px; letter-spacing: -.03em }
.mi-head p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 620px }
.mi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.mi-item { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); animation: mvIn .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 50ms + 80ms) }
.mi-item:last-child:nth-child(odd) { grid-column: 1 / -1 }
.mi-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent) }
.mi-ic svg { width: 20px; height: 20px }
.mi-item b { display: block; font-size: 15px; margin-bottom: 2px }
.mi-item span { font-size: 13.5px; color: var(--muted); line-height: 1.5 }
.mi-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-tint); font-size: 13.5px; color: var(--ink-2) }
.mi-note svg { width: 16px; height: 16px; flex: none; color: var(--accent) }
@media (max-width: 640px) { .mi-grid { grid-template-columns: 1fr } .mi h2 { font-size: 23px } .mv-name { font-size: 24px } .mv-logo img { height: 28px } }
/* New menu items arrive one by one as the screen is revealed. */
.nav.mode-in-left > *, .nav.mode-in-right > * { animation: navIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 26ms + 300ms) }
.nav.mode-in-left > * { --from: 24px }
.nav.mode-in-right > * { --from: -24px }
@keyframes navIn { from { opacity: 0; transform: translateX(var(--from)) } }
.content.mode-in { animation: modeIn .6s cubic-bezier(.2, .8, .2, 1) .28s both }
@keyframes modeIn { from { opacity: 0; transform: translateY(14px); filter: blur(3px) } }
@media (prefers-reduced-motion: reduce) { .mode-thumb, .mode-switch button { transition: none } .nav.mode-in-left > *, .nav.mode-in-right > *, .content.mode-in, .mv-card, .mv-sub, .mv-bar span, .mi-item { animation: none } }

/* Workspace dashboard */
.ws-dash { align-items: start }
.ws-dash .list-item .title { font-size: 14.5px }
.ws-dash-empty .empty { padding: 28px 18px 32px }
.ws-date-tile { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); line-height: 1 }
.ws-date-tile b { font-family: var(--display); font-size: 18px }
.ws-date-tile small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em }
.ws-tile.ws-bad { background: var(--bad-bg); color: var(--bad) }

/* ---------- Phones: the whole portal works on mobile web ---------- */
.nav a.nav-phone { display: none }
@media (max-width: 1000px) {
  /* The closed menu sits off screen: no shadow peeking in at the left edge. */
  .side:not(.open) { box-shadow: none; visibility: hidden }
  .side { transition: transform .25s var(--ease), visibility 0s linear .25s }
  .side.open { transition: transform .25s var(--ease) }
  .nav a.nav-phone { display: flex }
  /* Chat fills the space between the top bar (which already says Chat) and the tab bar, so the message box stays in view. */
  .page-head:has(+ .chat) { display: none }
  .chat { height: calc(100dvh - 166px - env(safe-area-inset-bottom)); min-height: 360px }
}
/* Phones (upright or on their side) and tablets: tables become a stack of cards, one per row, the row's ⋯ menu in its corner, so nothing scrolls sideways. */
@media (max-width: 1000px) {
  .table-wrap { overflow: visible }
  .table, .table tbody, .table tr, .table td { display: block; width: 100% }
  .table thead { display: none }
  .table tr { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line) }
  .table tbody tr:last-child { border-bottom: 0 }
  .table td { padding: 2px 0 !important; border: 0 !important; text-align: left !important; white-space: normal }
  .table td:empty { display: none }
  .table td:first-child { padding-right: 52px !important }
  .table td:last-child:has(.ws-menu, .ws-acts, .btn) { position: absolute; top: 10px; right: 10px; width: auto; padding: 0 !important }
  .table td:last-child .ws-acts { justify-content: flex-end }
  .table td + td { margin-top: 2px }
  .table .ws-nw, .table .ws-clip { white-space: normal; max-width: none }
}
@media (max-width: 640px) {
  /* Top bar: menu, title, theme, notifications, you. The bug/idea link moves into the menu. */
  .topbar { gap: 8px }
  .topbar .feedback-btn { display: none }
  .topbar h1 { flex: 1; min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .topbar .spacer { display: none }
  .topbar .icon-btn { width: 38px; height: 38px }
  .page-head .btn { flex: none }
  /* Stat tiles: icon on top, number below, so two fit side by side. */
  .stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px }
  .stat i { width: 38px; height: 38px; border-radius: 12px }
  .stat i svg { width: 18px; height: 18px }
  .stat b { font-size: 22px }
  /* Phones zoom into inputs under 16px; keep fields at 16px so they don't. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important }
  .modal { border-radius: 22px }
}

/* ---------- Sign-in on phones: the form comes first, the story and app links below it ---------- */
.auth-mbrand, .al-phone, .app-get { display: none }
@media (max-width: 900px) {
  .auth { display: flex; flex-direction: column; min-height: 100dvh }
  .auth-panel { order: -1; display: block; place-items: normal; padding: 0 20px 32px; border-top: 0; border-bottom: 1px solid var(--line) }
  .auth-mbrand { display: flex; align-items: center; height: 68px; margin-bottom: 20px }
  .auth-mbrand .mi-lock { margin: 0 }
  .auth-theme { top: 14px; right: 16px }
  .auth-card { margin: 0 auto }
  .auth-card h2 { font-size: 27px }
  .auth-card .sub { margin-bottom: 22px }
  .auth-hero { padding: 28px 20px 32px; gap: 24px }
  .auth-hero .brand { display: none }
  .auth-hero h1 { font-size: 30px; margin-top: 0 }
  .auth-hero p.lead { font-size: 15px; margin-top: 12px }
  .auth-points { margin-top: 18px }
  .auth-foot { display: block }
}
/* On the phone itself a QR code can't be scanned: open the store link instead. */
@media (max-width: 640px), (pointer: coarse) and (max-width: 900px) {
  .al-desk, .app-link .qr, .app-link [data-copy] { display: none }
  .al-phone, .app-get { display: inline-flex }
  .app-link { padding: 12px 12px 12px 16px }
  .app-link .grow { flex: 1; min-width: 0 }
  .app-get { flex: none }
}

/* ---------- Phone on its side (short landscape screens) ---------- */
/* Height is what's scarce: the top bar scrolls away, the tab bar slims down, and chat and sheets fit what's left. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .topbar { position: static; --header-h: 56px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)) }
  /* Keep clear of the notch on whichever side it is. */
  .content { padding: 12px max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left)) }
  .page-head { margin-bottom: 14px }
  .tabbar { padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) }
  .tabbar a { grid-auto-flow: column; align-items: center; justify-content: center; gap: 7px; padding: 8px 4px; font-size: 12px }
  .tabbar a svg { width: 18px; height: 18px }
  .tabbar a .badge-dot { top: 0; right: auto; left: calc(50% + 4px) }
  .chat { height: calc(100dvh - 56px - 12px - 52px - 12px - env(safe-area-inset-bottom)); min-height: 220px }
  .chat-pane .head { padding: 8px 14px }
  .chat-pane .msgs { padding: 12px }
  .composer { padding: 8px 12px }
  .side { padding-top: 12px; padding-bottom: 12px; padding-left: max(16px, env(safe-area-inset-left)) }
  .modal-head { padding-top: 14px }
  .modal-body { padding-top: 12px; padding-bottom: 12px }
  .sheet .modal-body { padding: 14px 20px }
  .drawer-head { padding-top: 10px; padding-bottom: 10px }
  .auth-mbrand { height: 56px; margin-bottom: 8px }
}

/* ---------- Payment schedule on a Wedza booking ---------- */
.bp-list { margin-top: 12px; border-top: 1px solid var(--line) }
.bp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line) }
.bp-row:last-child { border-bottom: 0 }
.bp-main { display: grid; gap: 2px; min-width: 0 }
.bp-main b { font-size: 15px }
.bp-amt { display: grid; justify-items: end; gap: 4px }
.bp-amt .money { font-size: 15.5px }
.bp-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px }
.bp-wa svg { width: 16px; height: 16px; color: #128c4b }
.bp-edit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 10px; align-items: end; margin-bottom: 4px }
.bp-edit .field { margin-bottom: 10px }
.bp-edit .icon-btn { margin-bottom: 14px }
@media (max-width: 560px) {
  .bp-edit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--line) }
  .bp-edit .field:first-child { grid-column: 1 / -1 }
}

/* Not approved yet: one line above every page with the next step (core.js reviewBanner). */
.review-banner { display: flex; align-items: center; gap: 14px; max-width: 1240px; width: calc(100% - 64px); margin: 20px auto 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--accent-tint) }
.review-banner > i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) }
.review-banner > i svg { width: 19px; height: 19px }
.review-banner > div { flex: 1; min-width: 0; display: grid; gap: 2px }
.review-banner b { font-size: 14.5px; color: var(--ink) }
.review-banner span { font-size: 13.5px; color: var(--muted) }
.review-banner .btn { flex: none }
.review-banner.info { background: var(--paper) }
.review-banner.info > i { background: var(--surface-2); color: var(--ink-2) }
.review-banner.bad { background: var(--bad-bg); border-color: transparent }
.review-banner.bad > i { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad) }
@media (max-width: 1000px) { .review-banner { width: calc(100% - 32px); margin-top: 14px } }
@media (max-width: 640px) { .review-banner { flex-wrap: wrap } .review-banner .btn { width: 100% } }

/* CRM quick business setup popup (workspace.js openSetup) */
.ws-setup h4 { margin: 18px 0 10px; font-family: var(--display); font-size: 16px; letter-spacing: -.01em }
.ws-setup h4:first-of-type { margin-top: 0 }
.ws-setup .field label .ws-need, .ws-setup h4 .ws-need { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-style: normal; font-size: 11px; font-weight: 700; vertical-align: middle }
.ws-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px }
/* PAN "or" GST: a small pill between the two boxes, centred on the inputs */
.ws-or-grid { grid-template-columns: 1fr auto 1fr }
.ws-or { align-self: end; display: grid; place-items: center; height: 48px; margin-bottom: 16px; padding: 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em }
.ws-setup-logo { display: flex; align-items: center; gap: 14px }
.ws-setup-logo-img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line) }
.ws-setup-logo-img img { width: 100%; height: 100%; object-fit: cover }
.ws-setup-logo-img svg { width: 24px; height: 24px }
@media (max-width: 640px) { .ws-setup-grid { grid-template-columns: 1fr } .ws-or { height: auto; margin: -8px 0 8px; justify-self: center } }

.ws-setup-title { margin: 2px 0 4px; font-family: var(--display); font-size: 22px; letter-spacing: -.02em }

/* Setup + live demo invoice side by side (workspace.js invoicePreview). The invoice is paper: same colours as the PDF in both themes. */
.ws-setup [hidden], .ws-setup-wrap [hidden] { display: none !important }
.ws-pay-sub { margin: 4px 0 10px; font-weight: 700; font-size: 14px }
.ws-pv-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: -4px 0 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer }
.ws-setup-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px; align-items: start }
.ws-setup-wrap.pv-off { grid-template-columns: minmax(0, 1fr) }
.ws-setup-wrap.pv-off .ws-setup-pv { display: none }
.ws-setup-pv { position: sticky; top: 0 }
/* Drawers with the invoice preview open wider, the preview gets half so the invoice is readable. */
.modal.sheet.wide:has(.ws-setup-wrap) { width: min(1440px, 94vw) }
.ws-setup-wrap:not(.pv-off) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.ws-setup-pv .kicker { margin: 0 0 8px }
@media (max-width: 960px) { .modal.sheet.wide:has(.ws-setup-wrap) { width: 100vw } }
@media (max-width: 860px) { .ws-setup-wrap, .ws-setup-wrap:not(.pv-off) { grid-template-columns: minmax(0, 1fr) } .ws-setup-pv { position: static } }
.ws-choice { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ws-choice legend { grid-column: 1 / -1; padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 15px; color: var(--ink) }
.ws-choice label { position: relative; cursor: pointer }
.ws-choice input { position: absolute; opacity: 0 }
.ws-choice label > span { display: block; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); transition: border-color .15s, background .15s }
.ws-choice b { display: block; font-size: 15px }
.ws-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35 }
.ws-choice input:checked + span { border-color: var(--accent); background: var(--accent-tint) }
.ws-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px }
/* The demo invoice: the order PDF (pdf/wedza_document.php) as an A4 page, 1pt = 1.333px, scaled by livePreview. Paper colours in both themes. */
[data-inv-preview] { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #fff }
.inv-page { --i-ac: #fe545a; --i-acd: #dd444c; --i-ink: #16202e; --i-ink2: #3b3f4c; --i-mu: #6b7080; --i-line: #ebebec; --i-line2: #dcdcdf; --i-tint: #fff6f7; --i-soft: #ffeeee;
  position: absolute; top: 0; left: 0; width: 794px; transform-origin: 0 0; padding: 53px 53px 30px; background: #fff; color: var(--i-ink); font: 12px/1.35 "DejaVu Sans", Verdana, sans-serif; text-align: left }
.inv-page p { margin: 0 }
.inv-page .r { text-align: right }
.inv-page .c { text-align: center }
.inv-page .inv-ph { color: #b3b7c2; font-style: italic; font-weight: 400 }
.inv-m { color: var(--i-mu) }
.inv-i2 { color: var(--i-ink2); overflow-wrap: anywhere; white-space: pre-line }
.inv-i2 b { color: var(--i-ink) }
.inv-xs { font-size: 10px }
.inv-gap { margin-top: 8px !important }
.inv-ok { color: #15803d }
.inv-due { color: #b45309 }
.inv-label { font-size: 9px; font-weight: 700; color: var(--i-mu); text-transform: uppercase; letter-spacing: 1.3px }
.inv-head { display: flex; justify-content: space-between; align-items: center }
.inv-brand { display: flex; align-items: center; gap: 16px; min-width: 0 }
.inv-logo { width: 59px; height: 59px; flex: none; display: grid; place-items: center; background: var(--i-soft); color: var(--i-ac); font-size: 24px; font-weight: 700; overflow: hidden }
.inv-logo img { width: 100%; height: 100%; object-fit: cover }
.inv-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere }
.inv-no { text-align: right; flex: none }
.inv-kicker { font-size: 9px; font-weight: 700; color: var(--i-ac); text-transform: uppercase; letter-spacing: 1.6px }
.inv-num { font-size: 24px; font-weight: 700 }
.inv-hero { display: grid; grid-template-columns: 44fr 19fr 21fr 16fr; align-items: end; margin-top: 19px; padding: 21px 27px; border-radius: 24px; background: var(--i-tint); border: 1px solid var(--i-soft) }
.inv-hero p:not(.inv-label) { margin-top: 4px }
.inv-amt { font-size: 35px; font-weight: 700; line-height: 1.1 }
.inv-tone { text-align: right }
.inv-tone span { display: inline-block; padding: 7px 16px; background: #fef4e2; color: #b45309; font-weight: 700; font-size: 11px }
.inv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; margin-top: 19px }
.inv-card { border: 1px solid var(--i-line); border-radius: 19px; padding: 19px 21px; min-width: 0 }
.inv-cn { font-size: 15px; margin-top: 5px !important; overflow-wrap: anywhere }
.inv-items { width: 100%; border-collapse: collapse; margin-top: 24px }
.inv-items th { font-size: 9px; font-weight: 700; color: var(--i-mu); text-transform: uppercase; letter-spacing: 1.3px; padding: 0 13px 11px; text-align: left; border-bottom: 1px solid var(--i-line2) }
.inv-items th.r { text-align: right } .inv-items th.c { text-align: center }
.inv-items td { padding: 12px 13px; border-bottom: 1px solid var(--i-line); vertical-align: top }
.inv-items b { font-size: 12.5px }
.inv-sum { display: flex; justify-content: space-between; gap: 5%; margin-top: 19px }
.inv-thanks { width: 46%; padding-top: 19px }
.inv-ty { font-size: 15px; font-weight: 700; margin-bottom: 4px !important }
.inv-totals { width: 48.5% }
.inv-total { display: flex; justify-content: space-between; align-items: center; padding: 13px 19px; border-radius: 16px; background: linear-gradient(to right, var(--i-acd), var(--i-ac)); color: #fff }
.inv-total span { font-weight: 700; font-size: 14px }
.inv-total b { font-size: 17px }
.inv-totals table { width: 100%; border-collapse: collapse; margin-top: 5px }
.inv-totals td { padding: 7px 19px }
.inv-totals .inv-xs { margin-top: 7px; text-align: right }
.inv-link { color: var(--i-ac); font-weight: 700 }
.inv-pay { margin-top: 21px; border: 1px solid var(--i-line); border-radius: 16px; padding: 16px 19px }
.inv-pay-empty { border-style: dashed }
.inv-pay-t { font-size: 14px; font-weight: 700; overflow-wrap: anywhere }
.inv-pay .inv-xs { margin-top: 3px }
.inv-pay-cols { display: flex; margin-top: 11px }
.inv-pay-bank { flex: 0 0 58%; padding-right: 13px }
.inv-pay-bank:only-child { flex-basis: 100% }
.inv-pay-bank + .inv-pay-upi { border-left: 1px solid var(--i-line); padding-left: 16px }
.inv-pay-upi { flex: 1; min-width: 0 }
.inv-pay table { margin-top: 5px; border-collapse: collapse }
.inv-pay td { padding: 1px 16px 1px 0; font-size: 11px }
.inv-pay td b { font-size: 12px; overflow-wrap: anywhere }
.inv-upi { font-size: 13px; margin-top: 5px !important; overflow-wrap: anywhere }
.inv-pay-upi .inv-link { margin-top: 8px !important; font-size: 12px }
.inv-h3 { margin: 21px 0 0; font-size: 15px; font-weight: 700; font-family: inherit; letter-spacing: 0; color: var(--i-ink) }
.inv-h3 + .inv-items { margin-top: 11px }
.inv-foot { margin-top: 40px }
.inv-bar { display: flex; align-items: center; gap: 11px; padding: 16px 21px; border-radius: 19px; background: var(--i-ac); color: #fff; font-size: 10.5px }
.inv-bar img { height: 40px; flex: none }
.inv-bar p { flex: 1 }
.inv-bar b { font-size: 12.5px }
.inv-bar .inv-store { height: 35px }
.inv-fine { display: flex; justify-content: space-between; margin-top: 8px; font-size: 9.5px; color: var(--i-mu) }
.inv-fine b { color: var(--i-ac) }
@media (max-width: 640px) { .ws-choice { grid-template-columns: 1fr } }

/* "What it's for" occasions panel (lead form) */
.ev-occ { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow: auto; padding: 12px 14px 14px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 18px 40px -18px var(--pop-shadow) }
.ev-occ-g { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 8px }
.ev-occ-g:first-child { margin-top: 2px }
.ev-occ .chips { gap: 6px; flex-wrap: wrap }
.ev-occ .chip { font-size: 13px; min-height: 32px; padding: 0 12px }

/* ---------- Lead Machine (leadmachine.js): Wedza tokens only ---------- */
.lm-form-pick { width: auto; min-width: 180px }
.lm-dates { gap: 10px; margin: -4px 0 14px }
.lm-tiles .stat small { display: block; font-size: 12px; margin-top: 2px }
.lm-panels { margin-top: 18px; align-items: stretch }
.lm-panel { display: flex; flex-direction: column; min-width: 0; padding: 18px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
.lm-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px }
.lm-panel-head h4 { font-size: 16px }
.lm-panel-head .hint { font-size: 12.5px }
.lm-src { display: grid; gap: 14px }
.lm-src-row { display: grid; gap: 6px }
.lm-src-row + .lm-src-row { padding-top: 14px; border-top: 1px solid var(--line) }
.lm-src-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.lm-src-top b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lm-src-pct { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink) }
.lm-src-meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden }
.lm-src-meter > span { display: block; height: 100%; min-width: 8px; border-radius: 99px; background: var(--accent-light) }
.lm-src-meter .sub { display: block; height: 100%; border-radius: 99px; background: var(--accent) }
.lm-src-row small { font-size: 12.5px }
.lm-chart { position: relative; height: 200px; padding-left: 28px }
.lm-grid { position: absolute; inset: 0 0 22px 28px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none }
.lm-gl { position: relative; border-top: 1px dashed var(--grid-line); height: 0 }
.lm-gl:last-child { border-top-style: solid; border-color: var(--line-2) }
.lm-gl small { position: absolute; left: -28px; width: 22px; text-align: right; top: -8px; font-size: 10.5px; line-height: 1; color: var(--muted) }
.lm-bars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 100%; overflow-x: auto; padding: 0 4px }
.lm-bars.few { justify-content: space-around; gap: 12px }
.lm-bar { flex: 1 0 14px; max-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100% }
.lm-bars.few .lm-bar { max-width: 72px }
.lm-bar-cols { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px }
.lm-bar-cols span { position: relative; width: 45%; max-width: 26px; border-radius: 5px 5px 0 0; background: var(--accent-light); transition: height .4s var(--ease) }
.lm-bar-cols span.sub { background: var(--accent) }
.lm-bar-cols em { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px); font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-2) }
.lm-bar small { height: 16px; font-size: 10.5px; color: var(--muted); white-space: nowrap }
.lm-legend { gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted) }
.lm-legend span { display: inline-flex; align-items: center; gap: 6px }
.lm-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent-light) }
.lm-legend i.sub { background: var(--accent) }
/* Your link drawer */
.lm-tabs { position: sticky; top: -1px; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; padding: 6px; border-radius: 18px; background: var(--surface-2) }
.lm-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s }
.lm-tab:hover { color: var(--ink) }
.lm-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 32, 46, .06), 0 6px 16px -10px rgba(22, 32, 46, .3) }
.lm-tab-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--paper) }
.lm-tab[aria-selected="true"] .lm-tab-ic { background: var(--accent-soft); color: var(--accent) }
.lm-tab-ic svg { width: 18px; height: 18px }
.lm-tab b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lm-tab small { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted) }
.lm-pane[hidden] { display: none }
@media (max-width: 560px) { .lm-tab { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px } .lm-tab small { display: none } }
.lm-drawer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px }
.lm-drawer + .lm-drawer { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line) }
.lm-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0 }
.lm-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px }
.lm-sec-head h4, .lm-title { font-size: 16px }
.lm-sec-sub { margin: -4px 0 0; font-size: 13px }
.lm-main { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line) }
.lm-main-url { display: flex; align-items: center; gap: 12px; min-width: 0 }
.lm-main-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink) }
.lm-main-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.lm-main-acts .btn { justify-content: center; padding-left: 10px; padding-right: 10px }
.lm-note { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-tint); border: 1px solid var(--accent-soft); font-size: 13px; color: var(--ink-2) }
.lm-chs { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.lm-ch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0 }
.lm-ch + .lm-ch { border-top: 1px solid var(--line) }
.lm-ch-txt { flex: 1; min-width: 0 }
.lm-ch-txt b { display: block; font-size: 14px; font-weight: 600 }
.lm-ch-txt code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted) }
.lm-ch-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--surface-2) }
.lm-ch-ic svg { width: 20px; height: 20px }
.lm-ch-ic.ch-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%) }
.lm-ch-ic.ch-facebook { background: #1877f2 }
.lm-ch-ic.ch-whatsapp { background: #25d366 }
.lm-ch-ic.ch-google { background: #fff; border: 1px solid var(--line) }
.lm-ch-ic.ch-website, .lm-ch-ic.ch-main { background: var(--accent-soft); color: var(--accent) }
.lm-ch-ic.ch-qr { background: var(--ink); color: var(--on-ink) }
.lm-acts { display: flex; gap: 6px; flex: none }
.lm-acts .icon-btn { width: 36px; height: 36px; border-radius: 10px }
.lm-acts .icon-btn svg { width: 17px; height: 17px }
.lm-wa { color: #25d366 }
.lm-emb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line) }
.lm-emb-f { display: grid; gap: 6px; min-width: 0; margin: 0 }
.lm-emb-f > span { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-2) }
.lm-emb-f > span b { font-weight: 600 }
.lm-emb-in { display: flex; gap: 8px; min-width: 0 }
.lm-emb-in select.input { flex: 1; min-width: 0; min-height: 42px; padding-top: 8px; padding-bottom: 8px }
.lm-emb-num { flex: 0 0 96px; width: 96px; min-height: 42px; padding: 8px 10px }
.lm-emb-col { flex: none; width: 46px; height: 42px; padding: 3px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); cursor: pointer }
.lm-emb-range { width: 100%; height: 42px; accent-color: var(--accent) }
.lm-emb-sws { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px }
.lm-emb-sw { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer }
[hidden].lm-emb-num, [hidden].lm-emb-col { display: none }
@media (max-width: 560px) { .lm-emb { grid-template-columns: 1fr } }
.lm-code { margin: 0; padding: 14px 16px; max-height: 180px; overflow: auto; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); white-space: pre-wrap; word-break: break-all }
.lm-code-acts { display: flex; justify-content: flex-end }
@media (max-width: 560px) {
  .lm-main-acts { grid-template-columns: 1fr }
  .lm-ch { flex-wrap: wrap }
  .lm-ch-txt { flex-basis: calc(100% - 52px) }
  .lm-acts { margin-left: 52px }
}
.ws-sendq { margin-right: 6px; white-space: nowrap }
.ws-sendq svg { width: 16px; height: 16px }

/* Leads › Source column */
.ws-src { gap: 6px; white-space: nowrap }
.ws-src small { padding: 1px 6px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em }

/* Extra charges editor (lead form, convert to order) */
.ws-charges { margin-top: 4px }
.ws-charge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; margin-top: 8px }
.ws-charge + .ws-charge { padding-top: 10px; border-top: 1px solid var(--line) }
.ws-charge [data-ch-l] { grid-column: 1; grid-row: 1 } .ws-charge [data-ch-a] { grid-column: 2; grid-row: 1 } .ws-charge [data-ch-rm] { grid-column: 3; grid-row: 1 }
.ws-charge [data-ch-t] { grid-column: 1; grid-row: 2 } .ws-charge [data-ch-y] { grid-column: 2; grid-row: 2 }
.ws-charge-note { grid-column: 1 / -1; margin: -2px 0 2px }
/* Two columns: name and amount, then tax and on top / included. Phones: name, amount, then tax */
@media (max-width: 760px) { .ws-charge [data-ch-l] { grid-column: 1 / 3 } .ws-charge [data-ch-a] { grid-column: 1 / 4; grid-row: 2 } .ws-charge [data-ch-t], .ws-charge [data-ch-y] { grid-row: 3 } }
/* A value the partner can't edit (CRM lead price and tax: the service's own on Wedza). */
.input.ws-locked { display: flex; align-items: center; gap: 8px; background: var(--surface-2); color: var(--ink); font-weight: 600; cursor: default }

/* ---------- Lead wizard: Client → Services → Pricing → Review ---------- */
.wz-steps { position: sticky; top: -22px; z-index: 3; display: flex; align-items: center; gap: 6px; margin: -22px -22px 18px; padding: 12px 22px; background: var(--paper); border-bottom: 1px solid var(--line) }
.wz-steps > .steps-row { flex: 1; min-width: 0; padding-bottom: 0 }
.wz-pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px }
.wz-pane-head h4 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--ink) }
.wz-pane-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted) }
.wz-pane-head .btn { flex: none }
.wz-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 13.5px }
.wz-who { display: flex; align-items: center; gap: 12px }
.wz-notes { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap }
.wz-notes b { color: var(--ink) }
.wz-price { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px dashed var(--line-2) }
.wz-price > span:first-child { font-weight: 700 }
.wz-price small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted) }
.wz-price-r { text-align: right }
.wz-price-r b { font-family: var(--display); font-size: 18px; letter-spacing: -.02em }
.wz-card { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper) }
.wz-card.ws-charges, .wz-card.ws-discount { margin: 0 0 14px }
.wz-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px }
.wz-card-h h5 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink) }
.wz-day + .wz-day { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.wz-day-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 13.5px }
.wz-day-h span { color: var(--muted) }
.wz-line { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0 }
.wz-line b { font-size: 14px }
.wz-line small { display: block; color: var(--muted); font-size: 12.5px }
.wz-chips { gap: 8px; flex-wrap: wrap }
/* Long package names wrap instead of running off the side */
.wz-chips .chip { min-height: 32px; padding: 6px 12px; font-size: 13px; cursor: pointer; flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left }
.wz-break { padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--ink) }
.wz-card .wz-break { margin: 0 -4px -4px }
.wz-brow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--muted) }
.wz-brow small { margin-left: 6px; font-size: 12px; opacity: .7 }
.wz-brow b { color: var(--ink) }
.wz-brow-off b, .wz-brow-off span { color: var(--ok) }
.wz-brow-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700 }
.wz-brow-total b { font-family: var(--display); font-size: 20px; letter-spacing: -.02em }
.wz-save { margin: 6px 0 0; font-size: 12.5px; color: var(--ok) }
.sheet .modal-foot:has(.wz-foot-sum) { align-items: center; justify-content: space-between }
.wz-foot-sum { min-width: 0 }
.wz-foot-sum b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -.02em; color: var(--ink) }
.wz-foot-sum small { color: var(--muted); font-size: 12.5px }
.wz-foot-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.wz-foot-btns .btn svg:last-child:not(:first-child) { margin-left: 2px }
@media (max-width: 640px) {
  .wz-pane-head { flex-direction: column }
  .sheet .modal-foot:has(.wz-foot-sum) { flex-wrap: wrap }
  .wz-foot-btns { width: 100% }
  .wz-foot-btns .btn { flex: 1 1 auto }
}
/* Lead wizard, Services step: flat, one card per service */
.wz-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px }
.wz-days[hidden] { display: none }
.wz-day-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer }
.wz-day-pill small { font-size: 12px; font-weight: 500; color: var(--muted) }
.wz-day-pill.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink) }
.wz-day-pill.on small { color: color-mix(in srgb, var(--on-ink) 70%, transparent) }
.wz-day-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.wz-day-fields .field { margin-bottom: 14px }
.wz-svcs { display: grid; gap: 10px }
.wz-svc { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper) }
.wz-svc-head { display: flex; gap: 6px; align-items: center }
.wz-svc-head .input { flex: 1; min-width: 0 }
.wz-svc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; margin-top: 12px }
.wz-svc-fields .field { margin-bottom: 4px }
.wz-svc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px }
.wz-svc-foot b { font-size: 15px; color: var(--ink) }
.wz-inc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.wz-inc label { font-size: 13px; font-weight: 600 }
.wz-inc .pm-feats { margin: 8px 0 6px }
.wz-inc .hint { display: block; margin-top: 4px }
.wz-price { flex: none; display: grid; justify-items: end; gap: 2px; width: 132px }
.wz-price .input { width: 100%; text-align: right; font-variant-numeric: tabular-nums }
.wz-price small { color: var(--muted); font-size: 12px }
.wz-price .link { font-size: 12px; text-align: right }
.wz-inc-view { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2) }
.wz-inc-view li { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere }
.wz-inc-view svg { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--ok) }
.wz-avail:empty { display: none }
.wz-avail { margin-left: 10px }
.wz-cap { font-size: 12.5px; font-weight: 600 }
.wz-cap::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle }
.wz-cap.free { color: var(--ok) }
.wz-cap.limited { color: var(--info) }
.wz-cap.full { color: var(--warn) }
.wz-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px }
.wz-link-muted { color: var(--muted) }
@media (max-width: 640px) { .wz-day-fields { grid-template-columns: 1fr } .wz-avail { display: block; margin: 4px 0 0 } }
.wz-svcs + .wz-day-fields { margin-top: 14px }
/* Lead wizard, Services step: Quick pick (several services and packages, one day or more) */
.wz-quick { margin-bottom: 16px }
.wz-qp-qtys { display: flex; flex-wrap: wrap; gap: 8px 14px }
.wz-qp-qty { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2) }
.wz-qp-qty .input { width: 96px; min-height: 36px }
.wz-qp-oneday { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px }
.wz-qp-oneday .field, .wz-qp-date .wz-qp-occ { margin: 0 }
.wz-qp-date .wz-qp-occ { flex: 1 1 160px }
.wz-qp-date { flex-wrap: wrap }
@media (max-width: 640px) { .wz-qp-oneday { grid-template-columns: 1fr } }
.wz-inc.wz-inc-p { margin-top: 8px; padding-top: 8px }
.wz-qp-list { display: grid; gap: 8px }
.wz-qp-svc { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px }
.wz-qp-svc.on { border-color: var(--accent-light); background: var(--accent-soft) }
.wz-qp-check { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; cursor: pointer }
.wz-qp-check input { width: 18px; height: 18px; accent-color: var(--accent) }
.wz-qp-check b { font-size: 14px }
.wz-qp-pick { display: grid; gap: 8px; margin-top: 10px }
.wz-qp-pick + .wz-qp-pick { padding-top: 10px; border-top: 1px dashed var(--line-2) }
.wz-qp-date { align-items: flex-end; gap: 6px }
.wz-qp-svc > .link { margin-top: 8px }
/* Lead wizard (New lead, Edit lead, Edit order): a roomy sheet, and its rows laid out properly */
.modal.sheet.wz-modal { width: min(1040px, 100vw) }
.wz-who > div { min-width: 0 }
.wz-who b, .wz-who small { display: block }
.wz-who b { font-size: 14.5px }
.wz-who small { color: var(--muted); font-size: 12.5px }
.wz-line > .grow { flex: 1; min-width: 0 }
.wz-line > .money { flex: none; text-align: right }
.wz-svc-fields { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
/* CRM Home: "Your invoice setup is pending" */
/* A team member's sign-in details, after adding them */
.ws-signin { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px }
.ws-signin > div { padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line) }
.ws-signin span { display: block; font-size: 12.5px; color: var(--muted) }
.ws-signin b { font-family: var(--display); font-size: 22px; letter-spacing: .04em; color: var(--ink) }
/* Lead Machine: from visit to order */
.lm-funnel { display: grid; gap: 14px }
.lm-fstep-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 14px; color: var(--ink-2) }
.lm-fstep-top span { flex: 1 }
.lm-fstep-top b { font-size: 15px; color: var(--ink) }
.lm-fstep-top small { width: 44px; text-align: right; color: var(--muted) }
.lm-fbar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden }
.lm-fbar span { display: block; height: 100%; border-radius: 99px; background: var(--accent) }
.lm-fbar span.soft { background: color-mix(in srgb, var(--accent) 35%, transparent) }
.lm-fbar span.amber { background: var(--warn) }
.lm-fbar span.green { background: var(--ok) }
/* ---------- Team chat (teamchat.js) ---------- */
.tc { display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 460px; padding: 0; overflow: hidden }
.tc-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 4px; background: var(--accent-tint) }
.tc-row { display: flex; align-items: flex-end; gap: 8px }
.tc-row.tc-first { margin-top: 8px }
.tc-row.tc-mine { flex-direction: row-reverse }
.tc-face { flex: none; width: 32px }
.tc-face .avatar { width: 32px; height: 32px; font-size: 12px }
.tc-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(78%, 560px) }
.tc-mine .tc-col { align-items: flex-end }
.tc-row .bubble { align-self: auto; max-width: 100% }
.tc-who { margin: 0 4px 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-2) }
.tc-who span { margin-left: 4px; font-weight: 600; color: var(--muted) }
.tc-day { display: flex; justify-content: center; margin: 12px 0 6px }
.tc-day span { padding: 4px 12px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted) }
.tc-img img { display: block; max-width: min(280px, 100%); max-height: 320px; border-radius: 12px; margin-bottom: 4px; object-fit: cover }
.tc-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border-radius: 12px; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; text-decoration: none }
.tc-file b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px }
.tc-file small { opacity: .75; font-size: 12px }
.tc-more { display: flex; justify-content: center; margin-bottom: 8px }
.tc-empty { margin: auto; max-width: 360px; text-align: center }
.tc-compose { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--paper) }
.tc-bar { display: flex; align-items: flex-end; gap: 8px }
.tc-bar textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; padding-top: 11px; line-height: 1.4 }
.tc-clip { flex: none; cursor: pointer; width: 44px; height: 44px }
.tc-send { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center }
.tc-attach { margin-bottom: 8px }
.tc-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 13px }
.tc-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px }
.tc-chip small { color: var(--muted) }
@media (max-width: 760px) { .tc { height: calc(100vh - 200px); border-radius: 16px } .tc-msgs { padding: 12px } }
/* Team chat: your own messages (own class, so the header's .me chip style never applies) */
.tc-row .bubble.tc-me { background: var(--accent); color: #fff; border-color: transparent; border-bottom-right-radius: 6px; border-bottom-left-radius: 18px }
.tc-row .bubble.tc-me .tc-file { color: #fff }
/* Team chat: who has seen your latest message, and the Message info list */
.tc-mine .bubble { cursor: pointer }
.tc-seen { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; margin: 2px 44px 4px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer }
.tc-seen.on { color: var(--accent-text, var(--accent)) }
.tc-seen svg { width: 13px; height: 13px }
.tc-seen-msg { margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink-2); font-size: 13.5px; white-space: pre-wrap }
.tc-seen-sec + .tc-seen-sec { margin-top: 18px }
.tc-seen-sec h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink) }
.tc-seen-sec h4 svg { width: 14px; height: 14px; color: var(--muted) }
.tc-seen-sec .muted { margin: 0; font-size: 13px }
.tc-seen-row { display: flex; align-items: center; gap: 12px; padding: 6px 0 }
.tc-seen-row .avatar { width: 36px; height: 36px; flex: none }
.tc-seen-row span { flex: 1; min-width: 0 }
.tc-seen-row b { display: block; font-size: 14px }
.tc-seen-row small { color: var(--muted); font-size: 12px }
.tc-seen-row time { color: var(--muted); font-size: 12px; white-space: nowrap }
/* Team chat restyle (matches the app): plain canvas, grey bubbles for others,
   bubbles in a group join up on the sender's side, pill composer. */
.tc-msgs { background: var(--paper); gap: 2px }
.tc-row.tc-first { margin-top: 10px }
.tc-row.tc-last { margin-bottom: 4px }
.tc-face { width: 30px }
.tc-face .avatar { width: 30px; height: 30px; font-size: 11.5px }
.tc-who span { margin-left: 2px }
.tc-who span::before { content: '· '; }
.tc-day span { background: var(--surface-2); border: 0; font-size: 11.5px }
.tc-row .bubble { padding: 8px 12px 6px; border: 0; border-radius: 18px; background: var(--surface-2); color: var(--ink) }
.tc-row .bubble time { font-size: 10.5px; color: var(--muted); opacity: 1 }
.tc-row:not(.tc-mine) .bubble { border-bottom-left-radius: 6px }
.tc-row:not(.tc-mine):not(.tc-first) .bubble { border-top-left-radius: 6px }
.tc-row:not(.tc-mine).tc-last .bubble { border-bottom-left-radius: 4px }
.tc-row .bubble.tc-me { border-radius: 18px; border-bottom-right-radius: 6px }
.tc-row.tc-mine:not(.tc-first) .bubble.tc-me { border-top-right-radius: 6px }
.tc-row.tc-mine.tc-last .bubble.tc-me { border-bottom-right-radius: 4px }
.tc-row .bubble.tc-me time { color: #fff; opacity: .8 }
.tc-seen { margin-right: 40px }
.tc-bar { align-items: flex-end; gap: 10px }
.tc-field { flex: 1; display: flex; align-items: flex-end; min-height: 46px; border: 1px solid var(--line-2, var(--line)); border-radius: 24px; background: var(--bg); transition: border-color .15s }
.tc-field:focus-within { border-color: var(--accent) }
.tc-field textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; border: 0; outline: 0; background: transparent; padding: 12px 16px 12px 2px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--ink) }
.tc-clip { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); cursor: pointer }
.tc-clip:hover { color: var(--accent) }
.tc-clip svg { width: 19px; height: 19px }
.tc-send { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); color: var(--muted); border-color: transparent; transition: background .15s, color .15s }
.tc-send.tc-ready, .tc-send[data-busy="1"] { background: var(--accent); color: #fff }
.tc-chip { background: var(--accent-tint); border-color: var(--accent-soft) }


/* ---------- Limited plan offer (Jailer 2), offer.js ----------
   Cinema look on a fixed night-sky background in both themes: the poster,
   paper tickets with a perforated stub, a seat map that fills live and a
   DD:HH:MM:SS countdown. Takeover = full screen after login; card = Home. */
.ofr-card, .ofr-modal { --night: #0b0f14; --night-2: #121a22; --paper-t: #fffaf2; --ink-t: #18202b; --muted-t: #6f6a62; --teal: #7fb6c2 }
.ofr-card, .ofr-modal { position: relative; display: grid; grid-template-columns: minmax(200px, 34%) 1fr; overflow: hidden; color: #fff; background:
  radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
  radial-gradient(80% 70% at 0% 100%, rgba(127, 182, 194, .18), transparent 60%), var(--night) }
.ofr-card { border-radius: var(--r-lg); margin-bottom: 22px; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .6) }
.ofr-poster { position: relative; min-height: 100%; overflow: hidden }
/* The poster fades out into the background (a mask, so it matches the glows behind it) */
.ofr-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 98%); mask-image: linear-gradient(90deg, #000 50%, transparent 98%) }
.ofr-panel { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; min-width: 0 }
.ofr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.ofr-modal .ofr-head { padding-right: 48px } /* clear of the close button */
.ofr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #ffd9a8; background: rgba(255, 196, 120, .12); border: 1px solid rgba(255, 196, 120, .28) }
.ofr-music { display: none; align-items: center; gap: 8px; border: 0; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer }
.ofr-music:hover { background: rgba(255, 255, 255, .2) }
[data-offer-view] .ofr-music { display: inline-flex }
.ofr-music .off-label { display: none; align-items: center; gap: 6px }
.ofr-music .blk-label { display: none; align-items: center; gap: 6px }
[data-offer-view].music-blocked:not(.playing) .ofr-music .off-label { display: none }
[data-offer-view].music-blocked:not(.playing) .ofr-music .blk-label { display: inline-flex }
[data-offer-view].music-blocked:not(.playing) .ofr-music { color: #1a1206; background: #ffc478; animation: music-call 1.4s ease-in-out infinite }
@keyframes music-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 120, .55) } 50% { box-shadow: 0 0 0 9px rgba(255, 196, 120, 0) } }
@media (prefers-reduced-motion: reduce) { [data-offer-view].music-blocked .ofr-music { animation: none } }
[data-offer-view] .ofr-music .on-label { display: inline-flex; align-items: center; gap: 6px }
[data-offer-view]:not(.playing) .ofr-music .eq, [data-offer-view]:not(.playing) .ofr-music .on-label { display: none }
[data-offer-view]:not(.playing) .ofr-music .off-label { display: inline-flex }
[data-offer-view]:not(.playing) .ofr-music { color: #ffd9a8; background: rgba(255, 196, 120, .14) }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); animation: eq .9s ease-in-out infinite }
.eq i:nth-child(2) { animation-delay: -.3s } .eq i:nth-child(3) { animation-delay: -.6s }
@keyframes eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
.ofr-title { margin: 6px 0 0; font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff }
.ofr-title.big { font-size: clamp(38px, 5vw, 56px) }
.ofr-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-light) }
.ofr-sub { margin: 2px 0 10px; font-size: 14px; color: rgba(255, 255, 255, .72) }
.ofr-tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: auto }

/* Ticket: paper body + stub, notches cut at the perforation with a mask */
.tkt { --cut: 78px; position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink-t); background: var(--paper-t); border-radius: 16px;
  -webkit-mask: radial-gradient(circle 11px at 0 calc(100% - var(--cut)), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% calc(100% - var(--cut)), #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 calc(100% - var(--cut)), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% calc(100% - var(--cut)), #0000 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); transition: transform .25s var(--ease) }
.tkt:hover { transform: translateY(-3px) }
.tkt-body { display: grid; gap: 8px; padding: 16px 18px 16px; flex: 1; grid-template-rows: auto auto auto 1fr; align-content: start }
/* Tag, price and name line up across tickets; seats / countdown sit at the bottom */
.tkt-live { align-self: end }
.tkt-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px }
.tkt-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep) }
.tkt-off { padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent) }
.tkt-price { display: flex; align-items: baseline; gap: 8px }
.tkt-price b { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: .95; letter-spacing: -.03em }
.tkt-price s { font-size: 14px; color: var(--muted-t) }
.tkt-name { font-size: 13.5px; font-weight: 600 }
.tkt-name span { font-weight: 500; color: var(--muted-t) }
.tkt-info { display: grid; gap: 6px }
.tkt-note { margin: 0; font-size: 12px; line-height: 1.45; color: #5d574e }
.tkt-note:empty { display: none }
.tkt-note b { color: var(--accent-deep) }
.tkt-note svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--ok) }
/* Ticket photo for the Rs 9 offer, asked before payment */
.ofr-drop { position: relative; display: grid; place-items: center; gap: 8px; min-height: 150px; padding: 16px; border: 2px dashed var(--line); border-radius: 14px; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color .15s }
.ofr-drop:hover, .ofr-drop:focus-within { border-color: var(--accent) }
.ofr-drop.has { min-height: 0 }
.ofr-drop img { max-width: 100%; max-height: 220px; border-radius: 10px; object-fit: contain }
.ofr-drop img[hidden] { display: none }
.ofr-drop span { display: grid; justify-items: center; gap: 2px; font-size: 14px }
.ofr-drop span svg { width: 22px; height: 22px; color: var(--accent) }
.ofr-drop small { font-size: 12px; color: var(--muted) }
.ofr-err { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger, #d92d20) }
.tkt-live { display: grid; gap: 8px; margin-top: 4px }
.tkt-meter { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #4a4640 }
.tkt-meter span { display: inline-flex; align-items: center; gap: 4px }
.tkt-meter svg { width: 15px; height: 15px }
.tkt-meter > b { color: var(--accent-deep) }
.tkt-meter > b.gone { color: #8a8378 }
.tkt-screen { height: 14px; margin: 2px 12% -2px; border-top: 2px solid #d9cfc0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; line-height: 16px; color: #a89d8c }
.tkt-seats { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 5px }
.seat { display: block; aspect-ratio: 1 / .85; border-radius: 6px 6px 3px 3px; background: #ece4d6; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06) }
.seat.taken { background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18) }
.seat.new { animation: seat-in .7s var(--ease) both }
@keyframes seat-in { 0% { transform: scale(.4); background: #ffd27a } 60% { transform: scale(1.25) } 100% { transform: none } }
.tkt-bar { height: 8px; border-radius: 99px; background: #ece4d6; overflow: hidden }
.tkt-bar span { display: block; height: 100%; background: var(--accent); transition: width .6s var(--ease) }
.tkt-clock { display: flex; align-items: center; gap: 4px }
.tkt-clock span { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 10px; color: #fff; background: linear-gradient(180deg, #232c37 50%, #1a2129 50%) }
.tkt-clock b { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums }
.tkt-clock small { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6 }
.tkt-clock em { font-style: normal; font-weight: 800; color: #b9ae9d }
.tkt-ended { padding: 10px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 600; color: #8a8378; background: #f1ebe0 }
.tkt-stub { display: grid; gap: 6px; height: var(--cut); align-content: center; padding: 0 18px; border-top: 2px dashed #e0d6c6 }
.tkt-btn { width: 100%; padding: 12px 16px; border: 0; border-radius: 99px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 10px 22px -10px var(--accent-glow); cursor: pointer; transition: transform .15s, box-shadow .15s }
.tkt-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 26px -10px var(--accent-glow) }
.tkt-btn:disabled { cursor: default; color: #8a8378; background: #ece4d6; box-shadow: none }
.tkt.mine .tkt-btn:disabled { color: #fff; background: var(--ok) }
.tkt-fine { font-size: 10.5px; text-align: center; color: var(--muted-t) }
.tkt-stamp { display: none; position: absolute; top: 76px; left: 62%; transform: translate(-50%, -50%) rotate(-14deg); padding: 8px 18px; border: 3px double var(--accent); border-radius: 10px; text-align: center; color: var(--accent); background: rgba(255, 250, 242, .9); pointer-events: none }
.tkt-stamp b { display: block; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1 }
.tkt-stamp small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.tkt.full .tkt-stamp { display: block; animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both }
.tkt.full .tkt-body > :not(.tkt-live), .tkt.ended .tkt-body { opacity: .5 }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); opacity: 0 } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; margin-right: 2px; animation: offer-pulse 1.4s ease-in-out infinite }
@keyframes offer-pulse { 50% { opacity: .25 } }

/* Takeover */
.ofr-takeover { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(6, 8, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s }
.ofr-takeover.out { opacity: 0; transition: opacity .2s }
.ofr-modal { width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 28px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8); animation: ofr-in .45s var(--ease) both }
.ofr-modal .ofr-poster img { animation: ofr-zoom 18s ease-out both }
.ofr-modal .ofr-panel { padding: 34px 36px 28px; gap: 10px }
.ofr-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer }
.ofr-close:hover { background: rgba(255, 255, 255, .22) }
.ofr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .55) }
.ofr-later { border: 0; padding: 6px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .8); background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.ofr-later:hover { color: #fff }
body.ofr-lock { overflow: hidden }
@keyframes ofr-in { from { opacity: 0; transform: translateY(24px) scale(.97) } }
@keyframes ofr-zoom { from { transform: scale(1.12) } }

@media (max-width: 760px) {
  .ofr-card, .ofr-modal { grid-template-columns: 1fr }
  .ofr-poster { min-height: 0; height: 240px }
  .ofr-poster img { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 98%); mask-image: linear-gradient(180deg, #000 45%, transparent 98%) }
  .ofr-panel, .ofr-modal .ofr-panel { padding: 0 16px 18px; margin-top: -36px }
  .ofr-takeover { padding: 0; place-items: stretch }
  .ofr-modal { max-height: 100vh; border-radius: 0 }
  .tkt-price b { font-size: 38px }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .eq i, .seat.new, .tkt.full .tkt-stamp, .ofr-modal, .ofr-modal .ofr-poster img { animation: none }
}

/* Schedule a call (schedulecall.js) */
.scl-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory }
.scl-day { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; width: 64px; padding: 10px 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s }
.scl-day small { font-size: 12px; font-weight: 600; color: var(--muted) }
.scl-day b { font-size: 20px; line-height: 1.15 }
.scl-day:hover:not(:disabled) { border-color: var(--accent-light) }
.scl-day[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.scl-day[aria-pressed="true"] small { color: var(--accent-text) }
.scl-day:disabled { opacity: .45; cursor: not-allowed }
.scl-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px }
.scl-time { min-height: 46px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s }
.scl-time:hover:not(:disabled) { border-color: var(--accent-light) }
.scl-time[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff }
.scl-time:disabled { background: var(--surface-2); color: var(--muted); text-decoration: line-through; cursor: not-allowed }
.scl-mine-top { display: flex; gap: 14px; align-items: flex-start }
.scl-mine-top .grow { flex: 1; min-width: 0 }
.scl-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text) }
.scl-when { display: block; margin: 4px 0 2px; font-size: 18px; color: var(--ink) }
.scl-link { display: grid; gap: 2px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2) }
.scl-link a { color: var(--accent-text); font-weight: 600; word-break: break-all }
@media (max-width: 520px) { .scl-times { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Lead follow-ups (workspace.js followUpForm) */
.ws-fu { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 0; border: 0; background: none; font: 600 12px/1.3 inherit; color: var(--muted); cursor: pointer; white-space: nowrap; text-align: left }
.ws-fu svg { width: 13px; height: 13px; flex: none }
.ws-fu:hover { color: var(--ink) }
.ws-fu.due { color: var(--bad) }
.ws-fu[data-ws=""] { cursor: default }
.chip.ws-fu-chip .count { background: var(--bad); color: #fff }

/* Leads: List / Team board switch and the team board (workspace.js leadBoard) */
.ws-view { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line) }
.ws-view button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 13.5px/1 inherit; cursor: pointer }
.ws-view button svg { width: 15px; height: 15px }
.ws-view button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow) }
.ws-view .nav-new { margin-left: 2px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4 }
.ws-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start }
.ws-col { display: flex; flex-direction: column; min-height: 160px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px dashed transparent; transition: border-color .15s, background .15s }
.ws-col.over { border-color: var(--accent); background: var(--accent-tint) }
.ws-col-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px }
.ws-col-head b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink) }
.ws-col-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700 }
.ws-col-head small { display: block; font-size: 12px; color: var(--muted) }
.ws-col-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); color: var(--muted) }
.ws-col-ic svg { width: 14px; height: 14px }
.ws-col-due { color: var(--bad); font-weight: 700 }
.ws-col-body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 12px; max-height: 70vh; overflow-y: auto }
.ws-col-empty { margin: 4px 4px 8px; padding: 18px 10px; border: 1px dashed var(--line-2); border-radius: 14px; text-align: center; font-size: 12.5px; color: var(--muted) }
.ws-card { position: relative; padding: 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
.ws-card[draggable="true"] { cursor: grab }
.ws-card.dragging { opacity: .5 }
.ws-card-open { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: inherit }
.ws-card-open:not([disabled]) { cursor: pointer }
.ws-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px }
.ws-card-top b { font-size: 14px; color: var(--ink) }
.ws-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--muted) }
.ws-card-row span { display: inline-flex; align-items: center; gap: 5px }
.ws-card-row svg { width: 13px; height: 13px }
.ws-card .ws-fu { margin-top: 8px }
.ws-card-move { display: none; width: 100%; margin-top: 8px; min-height: 36px }
@media (hover: none) { .ws-card-move { display: block } .ws-card[draggable="true"] { cursor: default } }
/* ⋯ menu on a team board card (same items as the list row) */
.ws-card-menu { position: absolute; top: 6px; right: 6px; z-index: 2 }
.ws-card-menu .ws-menu-btn { width: 32px; height: 32px }
.ws-card.has-menu .ws-card-top { padding-right: 34px }


/* CRM > Expenses (expenses.js) */
.ex-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; color: inherit; cursor: pointer; transition: transform .2s var(--ease), border-color .2s }
.ex-card:hover { border-color: var(--accent-light); transform: translateY(-1px) }
.ex-card .kv { font-size: 13.5px; gap: 6px 12px }
.ex-bar span { background: var(--warn) }
.ex-profit { color: var(--ok); font-family: var(--display); font-size: 1.15em }
.ex-profit.loss { color: var(--bad) }
.ex-stats .stat { cursor: default }
.ex-stats .stat:hover { transform: none }
.ex-grid > *, .ex-card > * { min-width: 0 }
.ex-card .ws-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* .field sets display, which would otherwise show it while an order is chosen */
.ex-newgroup[hidden], .ws-sheet .field[hidden] { display: none }
.ex-for-fixed { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 600 }
.ex-for-fixed svg { color: var(--accent); flex: none }
/* Expenses: the searchable For picker */
.ex-pick { position: relative }
.ex-pick-list { position: absolute; z-index: 20; left: 0; right: 0; top: 66px; max-height: 320px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.14)) }
.ex-pick-list[hidden] { display: none }
.ex-pick-g { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.ex-pick-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer }
.ex-pick-item:hover { background: var(--surface-2) }
.ex-pick-item .grow { min-width: 0; flex: 1 }
.ex-pick-item b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ex-pick-item small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ex-pick-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none }
.ex-pick-ic svg { width: 15px; height: 15px }
.ex-pick-new { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px }
/* Import order: the list sits in the sheet itself (no floating popup to clip) */
.ex-pick-list.ex-inline { position: static; max-height: none; overflow: visible; padding: 4px; box-shadow: none }
.ex-pick-item.on { background: var(--accent-soft) }

.ex-imp-search .ws-search { max-width: none; margin-bottom: 0 }
.ex-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--paper); flex: none }
.ex-pick-item.on .ex-check { background: var(--accent); border-color: var(--accent); color: #fff }
.ex-check svg { width: 13px; height: 13px; stroke-width: 3 }
.btn .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; display: inline-grid; place-items: center }
/* Expenses > Paid to: a field that opens its search panel inside the form */
.ex-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit }
.ex-sel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ex-sel > svg { flex: none; color: var(--muted); transition: transform .15s }
.ex-sel[aria-expanded="true"] { border-color: var(--accent) }
.ex-sel[aria-expanded="true"] > svg { transform: rotate(180deg) }
.ex-sel-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper) }
.ex-sel-panel[hidden] { display: none }
.ex-sel-panel .ex-pick-list.ex-inline { max-height: 280px; overflow-y: auto; margin-top: 8px; border: 0; padding: 0 }
.ex-pick-ic { font-weight: 700; font-size: 13px }
.ex-cat { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 600; vertical-align: 2px }
/* Suppliers page filters: month and category side by side */
select.input.ex-month { width: auto; flex: 0 0 auto; min-width: 190px; min-height: 44px; border-radius: 999px; padding-right: 36px }
/* Suppliers filters: the search takes the rest of the row */
.ex-filters { align-items: center }
.ex-filters .ws-search { flex: 1 1 240px; max-width: none; margin-bottom: 0 }
/* Share feedback: the idea promise and Your ideas with their status */
.fb-promise { display: flex; gap: 10px; align-items: flex-start }
.fb-promise svg { flex: none; color: var(--accent); margin-top: 2px }
.fb-promise[hidden] { display: none }
.fb-ideas { margin-top: 24px; display: grid; gap: 10px }
.fb-ideas:empty { display: none }
.fb-ideas-h { font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0 0 2px }
.fb-idea { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: grid; gap: 8px }
.fb-idea-msg { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5 }
.fb-reply { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px }
/* Share feedback: three choices and Buy us a coffee */
/* The three choices as pill tabs (same look as Table / Team board) */
.fb-tabs { display: flex; width: 100%; box-sizing: border-box }
.fb-tab { position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 999px; color: var(--muted); font: 600 13.5px/1.2 inherit; cursor: pointer; text-align: center }
.fb-tab input { position: absolute; opacity: 0; pointer-events: none }
.fb-tab svg { width: 15px; height: 15px; flex: none }
.fb-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fb-tab:has(input:checked) { background: var(--paper); color: var(--ink); box-shadow: var(--shadow) }
.fb-tab:has(input:checked) svg { color: var(--accent) }
.fb-tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
@media (max-width: 420px) { .fb-tab span { font-size: 12px } .fb-tab svg { display: none } }
.fb-coffee[hidden], .fb-text[hidden] { display: none }
.fb-ideas[hidden] { display: none }
/* Top bar search (core.js wireSearch): pages, orders, clients; ⌘K */
.tb-search { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 1 460px; min-width: 0; height: 44px; padding: 0 12px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); transition: border-color .15s, box-shadow .15s }
.tb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.tb-search > svg { flex: none; color: var(--muted) }
.tb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink) }
.tb-search input::-webkit-search-cancel-button { display: none }
.tb-search kbd { flex: none; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font: 600 12px/1.2 inherit; color: var(--muted) }
.tb-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: 420px; overflow: auto; padding: 6px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); box-shadow: 0 24px 50px -20px rgba(22, 32, 46, .35) }
.tb-results[hidden] { display: none }
.tb-hit { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--ink) }
button.tb-hit { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer }
.tb-hit > svg { flex: none; width: 17px; height: 17px; color: var(--muted) }
.tb-hit span { min-width: 0 }
.tb-hit b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tb-hit small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tb-hit.on, .tb-hit:hover { background: var(--accent-soft) }
.tb-hit.on > svg { color: var(--accent) }
.tb-none { margin: 10px 12px; font-size: 13.5px; color: var(--muted) }
@media (max-width: 900px) { .tb-search kbd { display: none } }
@media (max-width: 640px) { .tb-search { flex-basis: auto; height: 40px } .tb-search input::placeholder { font-size: 13px } }
/* Sidebar: collapsible sections, Subscription pinned at the end */
.nav-sec + .nav-sec { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line) }
.nav-sec > .nav-group { display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap }
.nav-sec > .nav-group > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.nav-sec > .nav-group:hover { background: var(--hover) }
.nav-sec.closed > .nav-group { color: var(--ink-2); font-weight: 600 }
.nav-sec > .nav-group svg { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease) }
.nav-sec.closed > .nav-group svg { transform: rotate(-90deg) }
.nav-sec > .nav-group .nav-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.nav-sec:not(.closed) > .nav-group .nav-dot { display: none }
.nav-sec > .nav-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s var(--ease) }
.nav-sec.closed > .nav-items { grid-template-rows: 0fr }
.nav-sec > .nav-items > div { overflow: hidden; min-height: 0 }
.nav-sec:not(.closed) > .nav-items > div { padding-bottom: 6px }
.nav-pin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
/* The app-switch slide-in runs on each heading and link inside the sections, not the section boxes */
.nav.mode-in-left > .nav-sec, .nav.mode-in-right > .nav-sec, .nav.mode-in-left > .nav-pin, .nav.mode-in-right > .nav-pin { animation: none }
.nav.mode-in-left .nav-sec > .nav-group, .nav.mode-in-left .nav-items a, .nav.mode-in-left .nav-pin a,
.nav.mode-in-right .nav-sec > .nav-group, .nav.mode-in-right .nav-items a, .nav.mode-in-right .nav-pin a { animation: navIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 26ms + 300ms) }
.nav.mode-in-left .nav-sec > .nav-group, .nav.mode-in-left .nav-items a, .nav.mode-in-left .nav-pin a { --from: 24px }
.nav.mode-in-right .nav-sec > .nav-group, .nav.mode-in-right .nav-items a, .nav.mode-in-right .nav-pin a { --from: -24px }
@media (prefers-reduced-motion: reduce) { .nav .nav-sec > .nav-group, .nav .nav-items a, .nav .nav-pin a { animation: none !important } .nav-sec > .nav-items { transition: none } }
/* Sidebar: the red plan card (same look as Home's used to be), pinned to the bottom */
.side-plan { position: sticky; bottom: 0; z-index: 2; margin: auto 0 -12px; gap: 10px; padding: 14px; flex: none }
.side-plan .plan-top > span { flex: 1; min-width: 0 }
.side-plan .plan-top b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.side-plan .plan-cta { padding: 7px 12px }
.side-plan.on { outline: 3px solid var(--accent-soft); outline-offset: 2px }
.side-plan.off { background: linear-gradient(140deg, #3b3f4c, #16202e) }
.side-plan.off { color: #fff }
.side-plan.off .plan-top small { color: rgba(255, 255, 255, .72) }
.side-plan.off .plan-meta { color: rgba(255, 255, 255, .8); font-size: 12.5px }
.side-plan.off .plan-cta { background: var(--accent); color: #fff }
.side-plan.soon .plan-meta span:last-child { font-weight: 800 }
.side > .nav { margin-bottom: 14px }

/* Partner Home top row: banner (or quick actions) + earnings stacked beside it */
.home-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: stretch }
.home-earn { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0 }
.earn-tile { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-content: center; padding: 20px 22px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); transition: transform .2s var(--ease), border-color .2s }
.earn-tile:hover { transform: translateY(-2px); border-color: var(--accent-light) }
.earn-tile > i { grid-row: 1 / 4; align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px }
.earn-tile > i svg { width: 22px; height: 22px }
.earn-tile.green > i { background: var(--ok-bg); color: var(--ok) }
.earn-tile.blue > i { background: var(--info-bg); color: var(--info) }
.earn-tile > span { font-size: 13px; font-weight: 600; color: var(--muted) }
.earn-tile > b { font-family: var(--display); font-size: 32px; line-height: 1.15; letter-spacing: -.03em }
.earn-tile > small { font-size: 12px; color: var(--muted) }
.earn-tile:after { content: ""; position: absolute; right: -50px; bottom: -60px; width: 150px; height: 150px; border-radius: 50%; background: var(--accent-tint); z-index: -1 }
.earn-tile { isolation: isolate }
.quick-card { padding: 24px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-tint), var(--paper) 70%); border: 1px solid var(--accent-soft); box-shadow: var(--shadow) }
.quick-card h3 { font-size: 24px; margin: 4px 0 14px }
.quick-list { display: grid; gap: 10px }
.quick-go { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, transform .15s }
.quick-go:hover { border-color: var(--accent); transform: translateX(2px) }
.quick-go > i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) }
.quick-go > i svg { width: 18px; height: 18px }
.quick-go > span { flex: 1; min-width: 0 }
.quick-go b { display: block; font-size: 14.5px }
.quick-go small { display: block; font-size: 12.5px; color: var(--muted) }
.quick-go > svg { flex: none; width: 16px; height: 16px; color: var(--muted) }
@media (max-width: 900px) { .home-top { grid-template-columns: minmax(0, 1fr) } .home-earn { grid-template-rows: none; grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .home-earn { grid-template-columns: 1fr } }
/* Notifications: bell count, unread rows */
.bell-btn { position: relative }
.bell-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--paper) }
.bell-count[hidden] { display: none }
.n-item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer }
button.n-item { border-bottom: 1px solid var(--line) }
.n-item.unread { background: var(--accent-tint) }
.n-item.unread .title { font-weight: 800 }
.n-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none }
.n-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.ws-view button .nav-new { margin-left: 6px }
/* Leads list as cards (workspace.js leadCard): every action visible */
.lc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px }
.lc { position: relative; display: grid; gap: 14px; padding: 18px 20px }
/* When the lead came in: a ribbon across the card's top-left corner, like a stamp */
.lc:has(> .lc-came) { padding-top: 24px; padding-left: 46px }
.lc-came { position: absolute; top: 0; left: 0; z-index: 1; width: 84px; height: 84px; overflow: hidden; border-top-left-radius: var(--r-lg); pointer-events: auto }
.lc-came b { position: absolute; top: 15px; left: -42px; width: 150px; padding: 4px 0; transform: rotate(-45deg); background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-align: center; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(22, 32, 46, .5) }
.lc-came.fresh b { background: linear-gradient(90deg, var(--accent-deep), var(--accent)) }
@media (max-width: 560px) { .lc:has(> .lc-came) { padding-left: 40px } .lc-came { width: 76px; height: 76px } .lc-came b { top: 12px; left: -44px; width: 140px; font-size: 9.5px } }
/* Wide screens: one row across the card (client | service | facts), follow-up and buttons underneath */
@media (min-width: 1100px) {
  .lc { grid-template-columns: minmax(290px, 1.15fr) minmax(220px, 1.1fr) minmax(0, 1.9fr); column-gap: 24px; align-items: center }
  .lc > .lc-acts { grid-column: 1 / -1 }
  .lc-acts { grid-template-columns: auto 1fr; align-items: center }
  .lc-main .btn { flex: 0 0 auto }
}
.lc.lc-lost { opacity: .8 }
.lc-head { display: flex; align-items: center; gap: 12px }
.lc-who { flex: 1; min-width: 0 }
.lc-who b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lc-who span { display: block; font-size: 13px; color: var(--muted) }
.lc-svc { display: grid; gap: 3px }
.lc-svc b { font-size: 14.5px }
.lc-svc span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted) }
.lc-svc span svg { width: 14px; height: 14px }
.lc-note { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2) }
.lc-facts > div { min-width: 0; display: grid; gap: 3px; align-content: start }
.lc-facts small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
.lc-facts b { font-size: 14.5px }
.lc-facts span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted) }
.lc-facts span svg { width: 13px; height: 13px }
.lc-facts .ws-seen { color: var(--ok) }
.lc-acts { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line) }
.lc-main, .lc-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.lc-main .btn { flex: 1 1 auto; justify-content: center }
.lc-more .btn { padding-left: 10px; padding-right: 12px }
.lc-gap { flex: 1 }
.lc-bad { color: var(--bad) }
.lc-bad:hover { background: var(--bad-bg) }
/* Lead card: status + Seen / Sent badges side by side */
.lc-head { flex-wrap: wrap; row-gap: 8px }
.lc-badges { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; padding-left: 54px }
/* Follow-up on a lead card, as a chip beside the status (opens Change follow-up). */
.lc-fu-chip { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font-family: inherit; text-transform: none; background: var(--info-bg); color: var(--info) }
.lc-fu-chip svg { width: 13px; height: 13px; flex: none }
.lc-fu-chip.due { background: var(--bad-bg); color: var(--bad) }
.lc-fu-chip[data-ws=""] { cursor: default }
.lc-fu-chip:not([data-ws=""]):hover { filter: brightness(.96) }
.lc-seen { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 700; white-space: nowrap }
.lc-seen svg { width: 13px; height: 13px }
.lc-seen.sent { background: var(--surface-2); color: var(--muted) }
/* Order cards: four facts (value, collected, next payment, net profit) */
.lc-facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 640px) { .lc-facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.lc-facts b span { font-size: 12px; color: var(--muted); font-weight: 600 }
.lc-more .ws-wa svg { color: #128c4b }
/* Orders: Completed status and the Mark as completed button */
.badge.ws-nc.done { background: var(--ok); color: #fff }
.btn.btn-ok { background: var(--ok); color: #fff; box-shadow: 0 12px 24px -14px rgba(6, 118, 71, .6) }
.btn.btn-ok:hover { filter: brightness(1.05) }
/* Date filter: the picker fills the pill, and the × replaces its calendar icon once a date is picked */
.date-pick > .wzdp-wrap { flex: 1 1 auto; min-width: 0; width: 100% }
.date-pick .date-clear { z-index: 2; top: 50%; transform: translateY(-50%) }
.date-pick.on .wzdp-field svg { visibility: hidden }

/* CRM Home: the Partner Home banner on the left, the four number tiles 2 × 2 beside it */
.ws-home-top { margin-bottom: 28px }
/* The banner keeps its column width (aspect-ratio would grow it sideways over the tiles when the row is taller):
   its shape only sets the least height, and it stretches to the tiles' height with the blurred fill around it */
.ws-home-top > .banner-card { aspect-ratio: auto; min-width: 0 }
.ws-home-top > .banner-card::before { content: ''; display: block; padding-top: calc(100% / var(--banner-ratio, 2.5)) }
.ws-home-top > .banner-card .banner-track { position: absolute; inset: 0 }
.ws-top-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: stretch }
.ws-top-tiles .stat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-width: 0 }
/* Icon on top so a big amount (₹59,05,800) gets the tile's full width; it shrinks a little and never spills out */
.ws-top-tiles .stat > div { min-width: 0; max-width: 100% }
.ws-top-tiles .stat b { font-size: clamp(20px, 1.7vw, 26px); overflow-wrap: anywhere }
.ws-top-tiles .stat small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* The CRM's choose-a-plan screen (core.js crmLockPage); the trial shows on the menu's plan card */
.crm-lock { max-width: 520px; margin: 48px auto; padding: 36px 28px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow) }
.crm-lock-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-text) }
.crm-lock-ic svg { width: 30px; height: 30px }
.crm-lock h2 { margin: 18px 0 8px; font-family: var(--display); font-size: 26px; letter-spacing: -.02em }
.crm-lock p { margin: 0 auto 18px; max-width: 420px; color: var(--ink-2) }
.crm-lock ul { list-style: none; margin: 0 auto 22px; padding: 0; display: grid; gap: 8px; max-width: 340px; text-align: left }
.crm-lock li { display: flex; gap: 10px; align-items: center; font-weight: 600 }
.crm-lock li svg { width: 18px; height: 18px; color: var(--ok); flex: none }
.crm-lock small { display: block; margin-top: 16px }
@media (max-width: 640px) { .crm-lock { margin: 20px 0; padding: 28px 18px } }
/* No plan: the plans popup (core.js P.planPrompt) and the bar on CRM pages while the owner explores */
.lockv { display: grid; gap: 18px }
.lockv-hero { text-align: center }
.lockv-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 700 }
.lockv-kicker svg { width: 15px; height: 15px }
.lockv-hero h2 { margin: 12px 0 6px; font-size: 26px; letter-spacing: -.03em }
.lockv-hero p { margin: 0 auto; max-width: 520px; font-size: 14px; color: var(--muted) }
.lockv-feats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: left }
.lockv-feats li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600 }
.lockv-feats i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--paper); color: var(--accent); flex: none; box-shadow: var(--shadow) }
.lockv-feats svg { width: 16px; height: 16px }
.lockv-plans { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch }
.lockv-plans > .lockv-plan { flex: 1 1 190px }
.lockv-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-2) }
.lockv-plan.best { border: 2px solid var(--accent); box-shadow: 0 18px 36px -24px var(--accent-glow) }
.lockv-plan h3 { font-size: 18px }
.lockv-plan .btn { margin-top: auto }
.lockv-plan small { margin-bottom: 14px }
.lockv-flag { position: absolute; top: -11px; left: 16px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700 }
.lockv-flag.save { background: var(--ok); }
.lockv-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.lockv-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px }
.lockv-price b { font-family: var(--display); font-size: 30px; letter-spacing: -.03em }
.lockv-price s { color: var(--muted); font-size: 14px }
.lockv-empty { text-align: center }
.lockv-all { flex-basis: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--accent-text) }
.lockv-all svg { width: 15px; height: 15px }
.lockv-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted) }
.lockv-trust span { display: inline-flex; align-items: center; gap: 6px }
.lockv-trust svg { width: 15px; height: 15px; color: var(--ok) }
.explore-bar { display: flex; align-items: center; gap: 14px; margin: 18px 32px 0; padding: 12px 14px 12px 12px; border-radius: 16px; background: linear-gradient(120deg, var(--accent-tint), var(--paper)); border: 1px solid var(--accent-soft) }
.explore-bar .grow { flex: 1; min-width: 0; display: grid }
.explore-bar b { font-size: 14.5px }
.explore-bar small { font-size: 12.5px; color: var(--muted) }
.explore-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--paper); color: var(--accent); flex: none; box-shadow: var(--shadow) }
.explore-ic svg { width: 19px; height: 19px }
@media (max-width: 760px) {
  .lockv-feats { grid-template-columns: 1fr 1fr }
  .explore-bar { margin: 12px 16px 0; flex-wrap: wrap }
  .explore-bar .btn { width: 100% }
}

/* KYC and invoice tasks: a slim banner on inner pages (core.js reviewBanner) and
   the "Finish setting up" checklist on both Homes (workspace.js readyInner). --t is the task colour. */
.t-warn { --t: var(--warn) } .t-info { --t: var(--info) } .t-bad { --t: var(--bad) } .t-accent { --t: var(--accent) }
.nudge { --t: var(--accent); display: flex; align-items: center; gap: 14px; max-width: 1240px; width: calc(100% - 64px); margin: 18px auto 0; padding: 10px 10px 10px 12px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 10%, var(--paper)), var(--paper) 55%) }
.nudge-art { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow) }
.nudge-art svg { width: 40px; height: 40px }
.na-paper { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.2 }
.na-accent { fill: var(--accent) }
.na-line { fill: color-mix(in srgb, var(--ink) 18%, transparent) }
.na-badge { fill: var(--ok) }
.na-rupee { fill: #fff; font: 800 10px/1 Inter, system-ui, sans-serif }
.na-ring { fill: color-mix(in srgb, var(--accent) 8%, transparent) }
.na-ring2 { fill: color-mix(in srgb, var(--accent) 14%, transparent) }
.nudge-body { flex: 1; min-width: 0; display: grid; gap: 1px }
.nudge-body b { font-family: var(--display); font-size: 16px; letter-spacing: -.01em; color: var(--ink) }
.nudge-body span { font-size: 13px; color: var(--muted) }
.nudge-cta { flex: none }
.nudge-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer }
.nudge-x:hover { background: var(--hover); color: var(--ink) }
.nudge-x svg { width: 16px; height: 16px }
@media (max-width: 1000px) { .nudge { width: calc(100% - 32px); margin-top: 14px } }
@media (max-width: 640px) { .nudge { flex-wrap: wrap; position: relative; padding-right: 40px } .nudge-cta { width: 100%; padding-left: 66px } .nudge-cta .btn { width: 100% } .nudge-x { position: absolute; top: 8px; right: 8px } }

.t-ok { --t: var(--ok) }
.setup-card { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: center; margin: 0 0 24px; padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--accent-soft); background: radial-gradient(120% 140% at 0% 0%, var(--accent-tint), var(--paper) 60%); box-shadow: var(--shadow) }
.setup-side { display: flex; align-items: center; gap: 16px }
.setup-ring { --p: 0; flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--accent) 14%, var(--paper)) 0) }
.setup-ring b { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--paper); font-family: var(--display); font-size: 20px; color: var(--ink) }
.setup-side h3 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; letter-spacing: -.02em; color: var(--ink) }
.setup-side p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45 }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.setup-steps li { --t: var(--accent); display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line) }
.setup-steps li.is-done { background: transparent; border-style: dashed }
.step-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; font-size: 14px;
  border: 2px solid color-mix(in srgb, var(--t) 45%, transparent); color: var(--t) }
.step-mark svg { width: 16px; height: 16px }
.is-done .step-mark { background: var(--ok); border-color: var(--ok); color: #fff }
.step-body { flex: 1; min-width: 0; display: grid; gap: 1px }
.step-for { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.step-for em { font-style: normal; letter-spacing: 0; text-transform: none; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t) }
.step-body b { font-size: 15px; color: var(--ink) }
.is-done .step-body b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent) }
.step-body > span:last-child { font-size: 13px; color: var(--muted) }
.step-act { flex: none }
.step-done { font-size: 13px; font-weight: 700; color: var(--ok) }
@media (max-width: 900px) { .setup-card { grid-template-columns: 1fr; gap: 16px; padding: 16px } }
@media (max-width: 640px) { .setup-steps li { flex-wrap: wrap; align-items: flex-start } .step-act { width: 100%; padding-left: 46px } .step-act .btn { width: 100% } .setup-ring { width: 64px; height: 64px } .setup-ring b { width: 50px; height: 50px; font-size: 17px } }

/* Lead Machine > Design: the editor beside a live preview of the form */
.lm-dz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start }
.lm-dz-ed { display: grid; gap: 16px; min-width: 0 }
.lm-dz-g { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper) }
.lm-dz-g h5 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.lm-dz-f { display: grid; gap: 6px; margin: 0 }
.lm-dz-f > span { font-size: 13px; font-weight: 600; color: var(--ink-2, var(--ink)) }
.lm-dz-f textarea { resize: vertical; min-height: 64px }
.lm-dz-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.lm-dz-dot { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--paper); background: var(--c); box-shadow: 0 0 0 1px var(--line-2, var(--line)); cursor: pointer }
.lm-dz-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c) }
.lm-dz-pick { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); cursor: pointer; box-shadow: 0 0 0 1px var(--line) }
.lm-dz-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.lm-dz-cover { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.lm-dz-cover img { width: 120px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 10px }
.lm-dz-slug { display: flex; align-items: center; gap: 6px }
.lm-dz-slug > span { flex: none; font: 13px var(--mono, ui-monospace, monospace); color: var(--muted) }
.lm-dz-slug .input { min-width: 0 }
.lm-dz-acts { position: sticky; bottom: -1px; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; background: linear-gradient(transparent, var(--bg, var(--paper)) 30%) }
.lm-dz-pv { position: sticky; top: 92px; display: grid; gap: 8px; justify-items: center }
.lm-dz-phone { width: 100%; height: min(720px, calc(100vh - 220px)); border: 8px solid var(--ink); border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px rgba(22, 32, 46, .55) }
.lm-dz-phone iframe { display: block; width: 100%; height: 100%; border: 0 }
@media (max-width: 1100px) { .lm-dz-grid { grid-template-columns: minmax(0, 1fr) } .lm-dz-pv { position: static; order: -1 } .lm-dz-phone { height: 560px; max-width: 420px } }

/* Design Lab sections: one open at a time */
.lm-dz-g { padding: 0; gap: 0 }
.lm-dz-g > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; cursor: pointer; list-style: none; border-radius: 16px }
.lm-dz-g > summary::-webkit-details-marker { display: none }
.lm-dz-g > summary:hover h5 { color: var(--ink) }
.lm-dz-g > summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s }
.lm-dz-g[open] > summary svg { transform: rotate(180deg) }
.lm-dz-g[open] > summary h5 { color: var(--accent) }
.lm-dz-gb { display: grid; gap: 10px; padding: 0 16px 16px }

/* Design Lab > Your questions */
.lm-dz-qs { display: grid; gap: 10px }
.lm-dz-q { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-2, var(--line)); border-radius: 12px }
.lm-dz-qrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center }

/* Digital Marketing Service (digitalmarketing.js) */
.dm-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px }
.dm-plan > span { display: block; line-height: 1.5 }
.dm-plan svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px }
.dm-tabs { margin-bottom: 18px }
.dm-tabs .chip svg { width: 15px; height: 15px }
.dm-range { flex-wrap: wrap; gap: 10px; margin-bottom: 24px }
.dm-range + .section, .dm-range + div > .section:first-child { margin-top: 0 }
.dm-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px }
.dm-price b { font-family: var(--display); font-size: 32px; letter-spacing: -.03em }
.dm-price span { color: var(--muted); font-weight: 600 }
.dm-acc .row { flex-wrap: wrap; gap: 14px; align-items: center }
.dm-acc-n { display: grid; gap: 2px; text-align: right }
.dm-acc-n b { font-size: 18px }
.dm-table td { white-space: nowrap }
.dm-table td:first-child { white-space: normal; min-width: 260px }
.dm-ad { display: flex; gap: 12px; align-items: flex-start }
.dm-ad img, .dm-ad-ph { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-2) }
.dm-ad-ph { display: grid; place-items: center; color: var(--muted) }
.dm-bid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px }
.dm-bid b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .02em }
.dm-bid .btn { margin-left: auto }
.dm-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px }
.dm-demo > span:first-child { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap }
.dm-demo svg { width: 16px; height: 16px; color: var(--accent) }
.dm-demo b { color: var(--accent-text) }
/* Meta ad wallet */
.dm-w-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px }
.dm-w-top .kicker { display: flex }
.dm-w-top .kicker svg { width: 15px; height: 15px }
.dm-w-row { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 16px; margin-top: 16px; align-items: end }
.dm-w-big span, .dm-w-n span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.dm-w-big b { display: block; font-family: var(--display); font-size: 34px; letter-spacing: -.03em; line-height: 1.1 }
.dm-w-n b { display: block; font-size: 17px; margin-top: 2px }
.dm-w-pm { font-size: 14px !important; font-weight: 600; overflow-wrap: anywhere }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none }
@media (max-width: 760px) { .dm-w-row { grid-template-columns: 1fr 1fr } .dm-w-big { grid-column: 1 / -1 } }
/* Ads to orders */
.dm-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line) }
.dm-f { padding: 16px; background: var(--paper); display: grid; gap: 2px }
.dm-f span { font-size: 12.5px; font-weight: 600; color: var(--muted) }
.dm-f b { font-family: var(--display); font-size: 26px; letter-spacing: -.03em }
.dm-f small { font-size: 12px; color: var(--muted) }
@media (max-width: 640px) { .dm-funnel { grid-template-columns: 1fr 1fr } }
/* Spend chart: one series in the accent, 2px gaps, 4px rounded tops on the baseline */
.dm-chart { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 180px auto; gap: 6px 10px }
.dm-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11.5px; color: var(--muted); text-align: right }
.dm-bars { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 50% }
.dm-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0 }
.dm-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; transition: opacity .15s }
.dm-bar.on i, .dm-bar:hover i { opacity: 1 }
.dm-bars:hover .dm-bar:not(.on) i { opacity: .45 }
.dm-x { grid-column: 2; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted) }
.dm-tip { position: absolute; top: -6px; transform: translateX(-50%); display: grid; gap: 2px; min-width: 130px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink-2); pointer-events: none; z-index: 2 }
.dm-tip span { display: flex; justify-content: space-between; gap: 12px }
.dm-tip[hidden] { display: none }
/* Running ad cards */
.dm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px }
.dm-card { padding: 0; overflow: hidden; cursor: pointer; transition: transform .2s var(--ease), border-color .2s }
.dm-card:hover, .dm-card:focus-visible { transform: translateY(-2px); border-color: var(--accent-light); outline: none }
.dm-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2) }
.dm-card-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; color: var(--muted) }
.dm-card-media .badge { position: absolute; top: 10px; left: 10px }
.dm-vid { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11.5px; font-weight: 700 }
.dm-card-body { padding: 16px }
.dm-card-name { display: block; font-size: 15px }
.dm-card-h { margin-top: 10px; font-weight: 700; font-size: 14px }
.dm-card-t { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.dm-card-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
.dm-card-n small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600 }
.dm-card-n b { font-size: 14.5px }
.dm-ad-img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--muted) }
.dm-ph svg { width: 22px; height: 22px }
/* One ad (drawer) */
.dm-det-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.dm-issues { margin: 6px 0 0; padding-left: 18px }
.dm-preview { margin-top: 16px; max-width: 460px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper) }
.dm-pv-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px }
.dm-pv-head small { display: block; font-size: 12px; color: var(--muted) }
.dm-pv-logo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 800 }
.dm-pv-text { margin: 0; padding: 0 14px 12px; font-size: 14px; white-space: pre-line }
.dm-pv-img { display: grid; place-items: center; gap: 6px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-2); color: var(--muted) }
.dm-pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-2) }
.dm-pv-foot small { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase }
.dm-pv-cta { flex: none; padding: 8px 14px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-2); font-weight: 700; font-size: 13px }
.dm-h { margin: 22px 0 10px; font-size: 15px }
.dm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.dm-kpis > div { padding: 12px 14px; background: var(--paper) }
.dm-kpis span { display: block; font-size: 12px; color: var(--muted); font-weight: 600 }
.dm-kpis b { font-size: 16px }
@media (max-width: 640px) { .dm-kpis { grid-template-columns: 1fr 1fr } }
.dm-kvs { padding: 6px 18px }
.dm-kv { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.dm-kv:last-child { border-bottom: 0 }
.dm-kv span { color: var(--muted); font-weight: 600 }
.dm-kv b { font-weight: 600 }
/* Digital Marketing: not subscribed yet */
.dm-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px; padding: 28px; background: radial-gradient(120% 140% at 0% 0%, var(--accent-tint) 0%, var(--paper) 55%) }
.dm-hero .kicker svg { width: 16px; height: 16px }
.dm-hero-h { margin: 0; font-family: var(--display); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em }
.dm-hero-h em.serif { font-size: 1.08em }
.dm-hero-p { margin: 14px 0 0; max-width: 560px; font-size: 15px; color: var(--ink-2); line-height: 1.6 }
.dm-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.dm-hero-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--accent-soft); font-size: 13px; font-weight: 600; color: var(--ink-2) }
.dm-hero-tags svg { width: 15px; height: 15px; color: var(--accent) }
.dm-price-card { align-self: start; display: grid; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
.dm-pc-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.dm-price { display: flex; align-items: baseline; gap: 6px }
.dm-price b { font-family: var(--display); font-size: 40px; letter-spacing: -.04em; line-height: 1 }
.dm-price span { color: var(--muted); font-weight: 600 }
.dm-pc-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px }
/* Digital Marketing › the two plans in the price card (7.2.12): Ads + Unlimited posters, then Ads */
.dm-plan-opts { display: grid; gap: 10px }
.dm-plan-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .15s, background .15s }
.dm-plan-opt input { position: absolute; opacity: 0; pointer-events: none }
.dm-plan-opt::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--paper); box-sizing: border-box }
.dm-plan-opt.on { border-color: var(--accent); background: var(--accent-tint) }
.dm-plan-opt.on::before { border: 5px solid var(--accent) }
.dm-plan-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.dm-plan-o { flex: 1; min-width: 0; display: grid; gap: 3px }
.dm-plan-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px } .dm-plan-n b { font-size: 14.5px }
.dm-plan-n i { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-style: normal; font-size: 11px; font-weight: 700 }
.dm-plan-o small { font-size: 12.5px; line-height: 1.4; color: var(--muted) }
.dm-plan-p { flex: none; text-align: right } .dm-plan-p b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -.03em; line-height: 1.1 } .dm-plan-p small { font-size: 11.5px; color: var(--muted) }
.dm-pc-posters { padding-top: 8px; border-top: 1px dashed var(--line) } .dm-pc-list .dm-pc-posters svg { color: var(--accent) }
.dm-pc-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px }
.dm-pc-list svg { flex: none; width: 17px; height: 17px; color: var(--ok); margin-top: 1px }
.dm-buy { width: 100%; justify-content: center }
.dm-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.dm-feat { display: flex; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line) }
.dm-feat i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) }
.dm-feat i svg { width: 20px; height: 20px }
.dm-feat b { display: block; font-size: 15px }
.dm-feat span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted) }
.dm-steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.dm-steps-row li { display: flex; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line) }
.dm-steps-row li > b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 14px }
.dm-steps-row strong { display: block; font-size: 14.5px }
.dm-steps-row span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted) }
@media (max-width: 1100px) { .dm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .dm-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* Digital Marketing › trust panel under the hero copy (7.2.11): dark, like Gallery's Where your photos live */
.dm-trust { position: relative; overflow: hidden; isolation: isolate; margin-top: 22px; padding: 20px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%), linear-gradient(160deg, #141a2b 0%, #0d1120 75%); box-shadow: 0 24px 48px -32px rgba(13, 17, 32, .8) }
.dm-trust::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 18px 18px; mask: linear-gradient(180deg, #000, transparent 70%) }
.dm-trust-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffd2c8 }
.dm-trust-k svg { width: 15px; height: 15px }
.dm-trust-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px }
.dm-trust-grid li { display: flex; gap: 12px; align-items: flex-start; min-width: 0 }
.dm-trust-grid i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #ffd2c8 }
.dm-trust-grid i svg { width: 17px; height: 17px }
.dm-trust-grid b { display: block; font-size: 14px; color: #fff }
.dm-trust-grid small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .66) }
.dm-trust-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .72) }
.dm-trust-foot span { display: inline-flex; align-items: center; gap: 7px } .dm-trust-foot svg { width: 15px; height: 15px; color: #ffd2c8 }
.dm-pc-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; font-size: 12px; color: var(--muted) } .dm-pc-safe svg { width: 13px; height: 13px }
@media (max-width: 600px) { .dm-trust-grid { grid-template-columns: 1fr } .dm-trust { padding: 18px } }
@media (max-width: 860px) { .dm-hero { grid-template-columns: 1fr; padding: 22px } }
@media (max-width: 640px) { .dm-feats, .dm-steps-row { grid-template-columns: 1fr } }
/* Digital Marketing subscription card on the Subscription page */
.dm-sub { display: flex; align-items: center; gap: 14px; padding: 18px }
.dm-sub-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) }
.dm-sub-ic svg { width: 20px; height: 20px }
/* Digital Marketing › Setup: give Wedza access, with Business Suite screenshots */
.dm-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px }
.dm-guide > li { display: flex; gap: 12px }
.dm-guide > li > b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 13px }
.dm-guide > li > div { flex: 1; min-width: 0; display: grid; gap: 8px }
.dm-guide strong { font-size: 14.5px }
.dm-guide span { font-size: 13.5px; line-height: 1.55; color: var(--ink-2) }
.dm-guide a:not(.dm-shot):not(.btn) { color: var(--accent-text); font-weight: 600 }
.dm-shot { display: block; max-width: 620px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2) }
.dm-shot img { display: block; width: 100%; height: auto }
.dm-shot:hover { border-color: var(--accent-light) }
.dm-acc-state { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px }
.dm-acc-state > svg { flex: none; width: 18px; height: 18px; margin-top: 2px }
.dm-acc-state b { display: block }
.dm-acc-state span { display: block; font-size: 13px; margin-top: 2px }
/* Digital Marketing › Setup: progress rail + one step at a time */
.dm-setup { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1180px }
.dm-rail { position: sticky; top: 88px; padding: 18px }
.dm-rail-top { display: grid; gap: 8px; margin-bottom: 14px }
.dm-rail-top b { font-size: 14px }
.dm-rail-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.dm-rail-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .3s var(--ease) }
.dm-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative }
.dm-rail-step { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer }
.dm-rail-step:hover { background: var(--surface-2) }
.dm-rail-step.on { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-soft) }
.dm-rail-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-2); font-size: 13px; font-weight: 700; color: var(--muted); background: var(--paper) }
.dm-rail-ic svg { width: 15px; height: 15px }
.dm-rail-step.on .dm-rail-ic { border-color: var(--accent); color: var(--accent) }
.dm-rail-step.done .dm-rail-ic { border-color: var(--ok); background: var(--ok); color: #fff }
.dm-rail-step b { display: block; font-size: 14px }
.dm-rail-step small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted) }
.dm-panel { padding: 28px; min-width: 0 }
.dm-p-head { margin-bottom: 22px }
.dm-p-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.dm-p-head h3 { margin: 6px 0 0; font-family: var(--display); font-size: 24px; letter-spacing: -.02em }
.dm-p-head p { margin: 8px 0 0; max-width: 620px; color: var(--muted); font-size: 14.5px; line-height: 1.55 }
.dm-p-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line) }
.dm-callbox { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--accent-tint); border: 1px solid var(--accent-soft) }
.dm-callbox > div { flex: 1; min-width: 200px; display: grid; gap: 3px }
.dm-callbox small { font-size: 12.5px; color: var(--muted) }
.dm-callbox b { font-size: 16px }
.dm-callbox a:not(.btn) { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--accent-text) }
.dm-callbox a svg { width: 15px; height: 15px }
.dm-callbox-ic, .dm-conn-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); color: var(--accent) }
.dm-callbox-ic svg, .dm-conn-ic svg { width: 20px; height: 20px }
.dm-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px }
.dm-ticks li { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2) }
.dm-ticks svg { width: 16px; height: 16px; color: var(--ok) }
/* the brief, in sections */
.dm-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--line) }
.dm-sec:first-child { border-top: 0; padding-top: 0 }
.dm-sec-h { display: flex; gap: 10px; align-items: flex-start }
.dm-sec-h > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent) }
.dm-sec-h > span svg { width: 17px; height: 17px }
.dm-sec-h b { display: block; font-size: 14.5px }
.dm-sec-h small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4 }
.dm-sec-b .field:last-child { margin-bottom: 0 }
.dm-sec-b textarea.input { min-height: 0; resize: vertical }
.dm-g { gap: 0 16px }
.dm-req { font-style: normal; color: var(--accent) }
.dm-km { float: right; font-weight: 700; color: var(--accent-text) }
.dm-slider { width: 100%; accent-color: var(--accent); margin: 10px 0 2px }
.dm-age { display: flex; align-items: center; gap: 8px }
.dm-age .input { width: 84px }
.dm-age span { color: var(--muted) }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.dm-chips .chip { min-height: 30px; padding: 0 12px; font-size: 13px }
.dm-save { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
/* access + connect */
.dm-sub-h { margin: 0 0 14px; font-size: 15px }
.dm-conn { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper) }
.dm-conn > div { flex: 1; min-width: 200px }
.dm-conn small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted) }
.dm-conn-ic { background: var(--ok-bg); color: var(--ok) }
.dm-conn-ic.off { background: var(--accent-soft); color: var(--accent) }
.dm-live-box { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--r); background: var(--surface-2) }
.dm-live-box.ok { background: var(--ok-bg) }
.dm-live-box > span { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--paper); color: var(--accent) }
.dm-live-box.ok > span { color: var(--ok) }
.dm-live-box b { font-size: 17px }
.dm-live-box p { margin: 6px 0 14px; color: var(--ink-2); line-height: 1.55 }
@media (max-width: 1000px) { .dm-setup { grid-template-columns: 1fr } .dm-rail { position: static } .dm-rail ol { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .dm-sec { grid-template-columns: 1fr; gap: 12px } .dm-panel { padding: 20px } }
@media (max-width: 520px) { .dm-rail ol { grid-template-columns: 1fr } }
.dm-shot-sm { max-width: 420px }

/* Services: approval note under the Wedza app switch (CRM and enquiry form need no approval) */
.svc-vis-l { display: grid; gap: 4px }
.svc-note { display: flex; gap: 5px; align-items: flex-start; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--muted) }
.svc-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px }
.svc-note.warn { color: var(--warn) }
.svc-note.bad { color: var(--bad) }
.svc-note.ok { color: var(--ok) }

/* Digital Marketing brief: several cities / areas as chips */
.dm-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); cursor: text; transition: border-color .2s, box-shadow .2s }
.dm-tags:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.dm-tags input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 4px 2px }
.dm-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 13.5px; font-weight: 600 }
.dm-tag button { border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 50% }
.dm-tag button:hover { background: var(--hover) }

/* Digital Marketing › Requests */
.dm-req-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.dm-req-card { display: flex; align-items: center; gap: 14px; padding: 18px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); cursor: pointer; color: inherit; font: inherit; transition: border-color .2s }
.dm-req-card:hover { border-color: var(--accent) }
.dm-req-card > div { flex: 1; display: grid; gap: 3px }
.dm-req-card small { color: var(--muted); font-size: 13px; line-height: 1.45 }
.dm-req-card > svg { width: 18px; height: 18px; color: var(--muted) }
.dm-req-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; background: var(--accent-soft); color: var(--accent-text) }
.dm-req-ic.stop { background: var(--bad-bg); color: var(--bad) }
.dm-acc-fixed { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2) }
.dm-acc-fixed > svg { flex: none; width: 18px; height: 18px; color: var(--muted) }
.dm-acc-fixed span { display: grid; gap: 2px; min-width: 0 } .dm-acc-fixed small { font-size: 12.5px; color: var(--muted) }
.dm-req-ic.poster { background: var(--ok-bg); color: var(--ok-text) }
.dm-req-card.locked { border-style: dashed }
/* A poster request: the finished posters our team added, to download (7.2.12) */
.dm-req-done { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--ok-bg) }
.dm-req-done > b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ok-text) } .dm-req-done > b svg { width: 15px; height: 15px }
.dm-req-results { display: flex; flex-wrap: wrap; gap: 10px }
.dm-req-results a { display: grid; width: 120px; border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none }
.dm-req-results img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block }
.dm-req-results span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px; font-size: 12.5px; font-weight: 700 } .dm-req-results span svg { width: 14px; height: 14px }
.dm-req-ic svg { width: 20px; height: 20px }
.dm-req-list { display: grid; gap: 12px }
.dm-rq { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper) }
.dm-req-h { display: flex; align-items: center; gap: 12px }
.dm-req-h .grow { display: grid; gap: 2px }
.dm-req-h small { color: var(--muted); font-size: 12.5px }
.dm-req-what { margin: 0; font-weight: 600 }
.dm-req-txt { margin: 0; white-space: pre-line; color: var(--ink-2) }
.dm-req-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--accent-text); word-break: break-all }
.dm-req-link svg { width: 14px; height: 14px; flex: none }
.dm-req-photos { display: flex; flex-wrap: wrap; gap: 8px }
.dm-req-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block }
.dm-req-pic { position: relative }
.dm-req-pic button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--on-ink); cursor: pointer; line-height: 1 }
.dm-req-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 }
.dm-req-note > div { display: grid; gap: 2px }
@media (max-width: 1100px) { .dm-req-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 720px) { .dm-req-actions { grid-template-columns: 1fr } }

/* Notifications drawer (bell): narrow, grouped by day, an icon per kind */
.drawer[data-size="xs"] { --drawer-w: 440px }
.nd-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 18px }
.nd-acts:empty { display: none }
.nd-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2) }
.nd-seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer }
.nd-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(22, 32, 46, .12) }
.nd-seg button span { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center }
.nd-readall { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text); cursor: pointer }
.nd-readall svg { width: 14px; height: 14px }
.nd-readall:hover { text-decoration: underline }
.nd-group + .nd-group { margin-top: 18px }
.nd-group h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.nd-list { display: grid; gap: 2px }
.nd-item { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 12px 12px 10px; border: 0; border-radius: 14px; background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s }
button.nd-item { border-bottom: 0 }
.nd-item:hover { background: var(--hover) }
.nd-item.unread { background: var(--accent-tint) }
.nd-item.unread:hover { background: var(--accent-soft) }
.nd-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; background: var(--surface-2); color: var(--ink-2); overflow: hidden }
.nd-ic svg { width: 18px; height: 18px }
.nd-ic img { width: 100%; height: 100%; object-fit: cover }
.nd-ic.lead { background: var(--accent-soft); color: var(--accent-text) }
.nd-ic.booking { background: var(--info-bg); color: var(--info) }
.nd-ic.pay { background: var(--ok-bg); color: var(--ok) }
.nd-ic.plan { background: var(--warn-bg); color: var(--warn) }
.nd-ic.review { background: var(--warn-bg); color: var(--warn) }
.nd-txt { flex: 1; min-width: 0; display: grid; gap: 3px }
.nd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.nd-top b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink) }
.nd-item.unread .nd-top b { font-weight: 800 }
.nd-top time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap }
.nd-msg { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.nd-dot { position: absolute; top: 50%; left: -2px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent) }
.nd-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 12px; text-align: center }
.nd-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text) }
.nd-empty-ic svg { width: 24px; height: 24px }
.nd-empty small { color: var(--muted); font-size: 13px }
.nd-empty .btn { margin-top: 8px }

/* Digital Marketing › Setup: the partner's ad account ID */
.dm-acct { display: grid; gap: 4px; margin-top: 12px; max-width: 520px }
.dm-acct .field { margin: 0 0 8px }
.dm-acct small svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--ok) }
.dm-acct .link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer }
.dm-acct-go { display: flex; justify-content: flex-start; margin-top: 4px }
.dm-howto { margin: 2px 0 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg) }
.dm-howto summary { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--accent-text) }
.dm-howto summary svg { width: 15px; height: 15px }
.dm-howto ol { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2) }
.dm-acct-st.bad { color: var(--bad) }
.dm-acct-st { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; font-size: 13px; color: var(--muted) }
.dm-acct-st.ok { color: var(--ok) }
.dm-acct-st svg { width: 15px; height: 15px; flex: none }

.dm-acct-row { display: flex; gap: 8px }
.dm-acct-row .input { flex: 1; min-width: 0 }
.dm-adv { margin-top: 6px }
.dm-adv summary { display: inline-block; font-size: 12.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px }
.dm-adv[open] summary { margin-bottom: 6px }
.dm-adv p { margin: 0 0 8px }
.dm-adv .input { margin-bottom: 4px }

.dm-conn-main { padding: 16px; border: 1px solid var(--accent-soft); border-radius: 14px; background: var(--accent-tint) }
.dm-or { margin-top: 12px }
.dm-or > p { margin: 4px 0 6px }

/* Digital Marketing ads: loading placeholders in the page's own shape */
.dm-skel-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px }
.dm-skel-stats .skeleton { height: 92px; border-radius: var(--r) }
.dm-skel-chart { height: 220px; border-radius: var(--r); margin-bottom: 28px }
.dm-skel-h { width: 160px; height: 22px; margin-bottom: 14px; border-radius: 8px; background: var(--skel-a) }
.dm-skel-card { height: 340px; border-radius: var(--r) }
@media (max-width: 720px) { .dm-skel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* Digital Marketing › one ad (drawer): preview on the left, results on the right */
.dm-ad-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px }
.dm-ad-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0 }
.dm-ad-acts { display: flex; flex-wrap: wrap; gap: 8px }
.dm-ad-acts .dm-bad { color: var(--bad) }
.dm-ad-warn { margin: 0 0 18px }
.dm-ad-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 28px; align-items: start }
.dm-ad-side { position: sticky; top: 0 }
.dm-ad-side .dm-preview { margin: 0; max-width: none; box-shadow: var(--shadow) }
.dm-pv-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.dm-pv-more { display: block; margin: -6px 14px 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer }
.dm-pv-media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2) }
.dm-pv-media img { width: 100%; height: 100%; object-fit: cover; display: block }
.dm-pv-media .dm-ph { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted) }
.dm-pv-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff }
.dm-pv-play svg { width: 24px; height: 24px }
.dm-ad-main { display: grid; gap: 14px; min-width: 0 }
.dm-ad-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px }
.dm-ad-h h4 { margin: 0; font-size: 15px }
.dm-ad-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.dm-ad-hero > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow) }
.dm-ad-hl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap }
.dm-ad-hero i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text) }
.dm-ad-hero i svg { width: 15px; height: 15px }
.dm-ad-hero b { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dm-ad-hero small { font-size: 12px; color: var(--muted) }
/* Spent leads: the one number every partner checks first */
.dm-ad-hero > div:first-child { border-color: transparent; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ff9a5a)); color: #fff }
.dm-ad-hero > div:first-child .dm-ad-hl, .dm-ad-hero > div:first-child small { color: rgba(255, 255, 255, .88) }
.dm-ad-hero > div:first-child i { background: rgba(255, 255, 255, .2); color: #fff }
.dm-ad-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden }
.dm-ad-more > div { display: grid; gap: 2px; padding: 12px 16px; margin-right: -1px; border-right: 1px solid var(--line); min-width: 0 }
.dm-ad-more span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dm-ad-more b { font-size: 16px }
.dm-ad-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px; border-radius: 12px; background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--ink, inherit) }
.dm-ad-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-text) }
.dm-ad-box { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper) }
.dm-ad-box .dm-ad-h { margin: 0 0 12px }
.dm-ad-did { display: grid; gap: 10px }
.dm-ad-did > div { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 13.5px }
.dm-ad-did span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dm-ad-did i { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden }
.dm-ad-did em { display: block; height: 100%; border-radius: 99px; background: var(--accent) }
.dm-ad-did b { min-width: 56px; text-align: right }
.dm-ad-chips { display: flex; flex-wrap: wrap; gap: 6px }
.dm-ad-chips span { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 500; color: inherit }
.dm-ad-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.dm-ad-two .dm-kvs { margin-top: 8px; padding: 2px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper) }
.dm-ad-two .dm-kv { grid-template-columns: 110px 1fr; font-size: 13.5px }
@container (max-width: 980px) {
  .dm-ad-grid { grid-template-columns: 1fr }
  .dm-ad-side { position: static; max-width: 420px }
  .dm-ad-hero { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dm-ad-two { grid-template-columns: 1fr }
}

/* Top bar: a compact search, and the name + phone never wrap (they lost space to the search) */
.tb-search { flex: 0 1 340px; height: 42px }
.topbar .me { flex: none; max-width: 240px }
.topbar .me > div { min-width: 0 }
.topbar .me b, .topbar .me small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 1440px) { .tb-search { flex-basis: 300px } }
@media (max-width: 1360px) { a.feedback-btn[data-link] span { display: none } a.feedback-btn[data-link] { width: 42px; padding: 0; justify-content: center; border-radius: 12px } }
@media (max-width: 1240px) { .feedback-btn span { display: none } .feedback-btn { width: 42px; padding: 0; justify-content: center; border-radius: 12px } }
/* The shortcut hint only where there's a keyboard: not on touch phones and tablets */
@media (hover: none) and (pointer: coarse) { .tb-search kbd { display: none } }

/* Lead card: the form's answers as question / answer chips, the client's own note quoted under them */
.lc-notes { display: grid; gap: 8px; margin-top: 6px; min-width: 0 }
.lc-qas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.lc-qa { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; max-width: 100%; min-width: 0; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px !important }
.lc-qa small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--muted) }
.lc-qa small::after { content: ' ·'; }
.lc-qa b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px !important; font-weight: 700; color: var(--ink) }
.lc-more { position: relative }
.lc-more > summary { list-style: none; cursor: pointer; padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--accent-text) }
.lc-more > summary::-webkit-details-marker { display: none }
.lc-more[open] > summary { background: var(--accent-tint) }
.lc-more-pop { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); display: grid; gap: 6px; width: max-content; max-width: 320px; padding: 10px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
.lc-more-pop .lc-qa { display: grid !important; gap: 1px !important; border-radius: 12px; max-width: 300px }
.lc-more-pop .lc-qa small::after { content: ''; }
.lc-more-pop .lc-qa small, .lc-more-pop .lc-qa b { white-space: normal }
.lc-free { display: flex !important; gap: 7px; align-items: flex-start; margin: 0; padding: 7px 11px; border-left: 3px solid var(--accent-light); border-radius: 0 10px 10px 0; background: var(--accent-tint); font-size: 13px; color: var(--ink-2) }
.lc-free svg { flex: none; width: 14px !important; height: 14px !important; margin-top: 2px; color: var(--accent-text) }
.lc-free span { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2) !important; font-size: 13px !important }

/* Leads: search with Received on and Event date pickers */
.ws-lead-search { margin: 4px 0 18px }
.ws-lead-search .date-pick { flex: 0 1 200px }
/* Keep the notes inside the card: the column can shrink, chips clip, the address wraps on two lines */
.lc-svc { min-width: 0 }
.lc-notes, .lc-qas { min-width: 0; max-width: 100% }
.lc-qa { overflow: hidden }
.lc-qa b { display: block; min-width: 0 }
.lc-addr { display: flex !important; gap: 7px; align-items: flex-start; margin: 0; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink) }
.lc-addr svg { flex: none; width: 15px !important; height: 15px !important; margin-top: 2px; color: var(--accent-text) }
.lc-addr span { display: grid !important; gap: 1px; min-width: 0 }
.lc-addr em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-style: normal; color: var(--ink); font-size: 13px }
.lc-addr small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted) }

/* Lead card: the name opens the lead's details */
.lc-name { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer }
.lc-name:hover b { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px }
/* Lead details (modal): header, then one section per kind of info; empty ones are left out */
.ld { display: grid; gap: 14px }
.ld-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.ld-who { flex: 1; min-width: 180px; display: grid; gap: 6px }
.ld-who > b { font-family: var(--display); font-size: 22px; letter-spacing: -.02em }
.ld-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.ld-contact { display: flex; flex-wrap: wrap; gap: 8px }
.ld-sec { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper) }
.ld-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted) }
.ld-sec h4 svg { width: 15px; height: 15px; color: var(--accent-text) }
.ld-row { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px }
.ld-sec h4 + .ld-row { border-top: 0 }
.ld-row > span { color: var(--muted) }
.ld-row > b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere }
.ld-items { display: grid; gap: 6px; margin-top: 8px }
.ld-items > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--bg); font-size: 13.5px }
.ld-items span { color: var(--muted) }
.ld-items em { font-style: normal; font-weight: 700 }
.ld-addr { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted) }
.ld-addr svg { width: 15px; height: 15px }
.ld-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.ld-stats > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper) }
.ld-stats small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.ld-stats b { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums }
.ld-row-dates { align-items: start }
.ld-dates { display: grid; gap: 8px; min-width: 0 }
.ld-date { display: flex; align-items: center; gap: 12px }
.ld-date > div, .ld-range-txt { display: grid; gap: 2px; min-width: 0 }
.ld-date b, .ld-range-txt b { font-weight: 700; color: var(--ink) }
.ld-date small, .ld-range-txt small { font-size: 12.5px; color: var(--muted) }
.ld-range { display: grid; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg) }
.ld-range-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.ld-range-line { position: relative; flex: 0 0 96px; height: 2px; background: var(--accent-light); border-radius: 2px }
.ld-range-line em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--accent-text) }
.ld-range-txt { margin-left: 6px }
.ld-strip { display: flex; flex-wrap: wrap; gap: 6px }
.ld-strip span { display: grid; place-items: center; width: 38px; padding: 5px 0; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); line-height: 1.1 }
.ld-strip small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--muted) }
.ld-strip b { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
.ld-strip span.we { background: var(--accent-tint); border-color: var(--accent-soft) }
.ld-strip span.we small { color: var(--accent-text) }
@media (max-width: 560px) { .ld-stats { grid-template-columns: 1fr } .ld-range-line { flex-basis: 60px } }
.ld-quote { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent-light); border-radius: 0 10px 10px 0; background: var(--accent-tint); white-space: pre-line; font-size: 14px }
@media (max-width: 560px) { .ld-row, .ld-items > div { grid-template-columns: 1fr; gap: 2px } }

/* Every date field in the partner dashboard: calendar icon in front, the date (or its hint) left-aligned */
.wzdp-field { flex-direction: row-reverse; justify-content: flex-end }
.wzdp-field .wzdp-text { text-align: left }
/* Date filters (Leads, Orders): the × clear button stays on the right */
.date-pick > svg { display: none }
.date-pick .wzdp-field { gap: 10px; padding-left: 16px !important; padding-right: 38px !important }
.date-pick .wzdp-field svg { color: var(--muted) }
.date-pick.on .wzdp-field svg { visibility: visible; color: var(--accent) }
.date-pick.on .wzdp-field .wzdp-text { color: var(--ink); font-weight: 600 }

/* Lead details › Price: each service, its tax (included or on top) and the total */
.ld-prices { display: grid; gap: 6px }
.ld-price { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg) }
.ld-price > div { display: grid; gap: 2px; min-width: 0 }
.ld-price small { font-size: 12.5px; color: var(--muted) }
.ld-amt { justify-items: end; text-align: right }
.ld-tax { font-weight: 600 }
.ld-tax.in { color: var(--ok) !important }
.ld-tax.ex { color: var(--warn) !important }
.ld-sums { display: grid; margin-top: 10px }
.ld-sum { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; font-size: 14px }
.ld-sum span { color: var(--muted) }
.ld-sum.muted b { color: var(--muted); font-weight: 600 }
.ld-sum.ok b { color: var(--ok) }
.ld-sum.total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 16px }
.ld-sum.total span { color: var(--ink); font-weight: 700 }
.ld-sum.total b { font-family: var(--display); font-size: 20px }
/* Leads: the source filter sits in the search row, after Event date, shaped like the date pickers */
.ws-lead-search .ws-src-pick { flex: 0 1 220px; width: auto; min-height: 44px; margin: 0; border-radius: 999px; padding-left: 16px }

/* Service form › Pricing: model cards, a short how-it-works strip, then sections (price, what's included,
   time slots, bookings per day, tax) and a live "What customers see" card. Admin › Edit service matches it. */
.pm-head h4 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: -.02em }
.pm-head p { margin: 4px 0 14px; font-size: 14px; color: var(--muted) }
.pm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.pm-tab { position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 14px 14px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--paper); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s }
.pm-tab:hover { border-color: var(--accent-light); background: var(--accent-tint) }
.pm-tab-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); transition: background .15s, color .15s }
.pm-tab-t { display: grid; gap: 3px; min-width: 0; padding-right: 22px }
.pm-tab-t b { font-size: 15px; color: var(--ink) }
.pm-tab-t small { font-size: 12.5px; line-height: 1.4; color: var(--muted) }
.pm-radio { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); transition: border .15s }
.pm-tab.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-tint) }
.pm-tab.on .pm-tab-ic { background: var(--accent-soft); color: var(--accent) }
.pm-tab.on .pm-radio { border: 5px solid var(--accent) }
.pm-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.pm-help { counter-reset: pm; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 12px; border-radius: 14px; background: var(--surface-2) }
.pm-help li { counter-increment: pm; display: grid; grid-template-columns: 24px 1fr; column-gap: 9px; align-items: start; font-size: 13px }
.pm-help li:before { content: counter(pm); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--accent-text); font-size: 12px; font-weight: 700; border: 1px solid var(--line) }
.pm-help b { color: var(--ink); font-size: 13px }
.pm-help span { color: var(--muted); font-size: 12.5px; line-height: 1.4 }
.pm-sec { padding: 20px 0 4px; margin-top: 20px; border-top: 1px solid var(--line) }
.pm-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.pm-sec-head h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink) }
.pm-sec-head h5 .muted { font-weight: 500; font-size: 13px }
.pm-sec-head p { margin: 3px 0 0; font-size: 13px; color: var(--muted) }
.pm-sec .grid { margin-bottom: 0 }
.pm-sec .field > .btn, .pm-sec > .btn { justify-self: start }
/* Money and quantity boxes: currency in front, the unit after */
.pm-money, .pm-qty { position: relative; display: flex; align-items: center }
.pm-money > span { position: absolute; left: 14px; color: var(--muted); font-weight: 600; pointer-events: none }
.pm-money > .input { padding-left: 32px; font-variant-numeric: tabular-nums }
.pm-money > em, .pm-qty > em { position: absolute; right: 14px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none }
.pm-money.has-per > .input, .pm-qty > .input { padding-right: 96px }
.pm-qty > .input { font-variant-numeric: tabular-nums }
/* Features: a tick, the box, remove */
.pm-feats { display: grid; gap: 8px; margin-bottom: 10px }
.pm-feat { display: flex; align-items: center; gap: 8px }
.pm-feat > .input { flex: 1; min-width: 0 }
.pm-feat-dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--ok) }
.pm-feat-dot svg { width: 14px; height: 14px }
/* Time slots */
.pm-slots { display: grid; gap: 8px; justify-items: start }
.pm-slot { display: grid; grid-template-columns: 26px repeat(2, minmax(0, 132px)) repeat(2, minmax(0, 1fr)) 40px; gap: 10px; align-items: end; width: 100%; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg) }
.pm-slot.no-price { grid-template-columns: 26px repeat(2, minmax(0, 140px)) 40px }
.pm-slot label { display: grid; gap: 5px; min-width: 0 }
.pm-slot small { font-size: 12px; font-weight: 600; color: var(--ink-2) }
.pm-slot small i { font-style: normal; font-weight: 500; color: var(--muted) }
.pm-slot .input { width: 100%; min-width: 0; height: 42px; min-height: 42px; padding-left: 12px; padding-right: 10px }
.pm-slot .pm-money > .input { padding-left: 30px }
.pm-slot .icon-btn { height: 42px; width: 40px }
.pm-slot-n { display: grid; place-items: center; align-self: center; margin-top: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700 }
.pm-empty { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted) }
.pm-empty svg { width: 16px; height: 16px }
.pm-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13px; color: var(--muted) }
/* Packages */
.pm-pkgs { display: grid; gap: 14px }
.pm-pkg { padding: 16px 18px 18px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--paper) }
.pm-pkg.off { background: var(--surface-2) }
.pm-pkg.off .pm-pkg-head b { color: var(--muted) }
.pm-pkg-head { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.pm-pkg-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px }
.pm-pkg-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700 }
.pm-vis { gap: 8px; color: var(--ink-2); font-weight: 600 }
.pm-add { width: 100%; margin-top: 14px; border-style: dashed }
/* Multiple day event: single / multiple choice, then each day (name, price, remove) */
.pm-choice { flex-wrap: wrap; gap: 8px }
.pm-days { display: grid; gap: 8px; margin-bottom: 10px }
.pm-day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) 40px; gap: 8px; align-items: center }
.pm-day.no-price { grid-template-columns: minmax(0, 1fr) 40px }
.pm-day .ws-pick { min-width: 0 }
@media (max-width: 560px) { .pm-day { grid-template-columns: minmax(0, 1fr) 40px } .pm-day .pm-money { grid-column: 1 } .pm-day .icon-btn { grid-column: 2; grid-row: 1 } }
/* What customers see */
.pm-preview { margin-top: 24px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--accent-soft); background: var(--accent-tint) }
.pm-pv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text) }
.pm-pv-head svg { width: 16px; height: 16px }
.pm-pv-price { font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums }
.pm-pv-price small { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted) }
.pm-pv-price s { margin-left: 6px; font-size: 15px; font-weight: 600; color: var(--muted) }
.pm-pv-line { margin: 4px 0 0; font-size: 13px; color: var(--muted) }
.pm-pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.pm-pv-chips span { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink-2) }
.pm-pv-feats { list-style: none; display: grid; gap: 5px; margin: 12px 0 0; padding: 0; font-size: 13.5px; color: var(--ink-2) }
.pm-pv-feats li { display: flex; gap: 8px; align-items: flex-start }
.pm-pv-feats svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ok) }
.pm-pv-pkgs { display: grid; gap: 10px }
.pm-pv-pkg { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper) }
.pm-pv-pkg .money { font-size: 17px }
@media (max-width: 860px) { .pm-slot { grid-template-columns: 26px repeat(2, minmax(0, 1fr)) 40px } .pm-slot > label:nth-of-type(3) { grid-column: 2 } .pm-slot > label:nth-of-type(4) { grid-column: 3 } }
@media (max-width: 720px) { .pm-tabs, .pm-help { grid-template-columns: 1fr } }

/* Digital Marketing: the loader while Meta answers */
.dm-loader { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--accent-soft); background: var(--accent-tint) }
.dm-loader > div { display: grid; gap: 3px }
.dm-loader b { font-family: var(--display); font-size: 17px; letter-spacing: -.01em; color: var(--ink) }
.dm-loader small { font-size: 13px; color: var(--muted) }
.dm-loader-ring { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: dmspin .8s linear infinite }
@keyframes dmspin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .dm-loader-ring { animation-duration: 2.4s } }

/* Notifications drawer: room between items, the unread dot inside the item */
.nd-list { gap: 8px }
.nd-item { padding: 12px 14px 12px 22px }
.nd-dot { left: 9px }

/* ---------------- CRM › Gallery (gallery.js) ---------------- */
.cg-meter { margin-top: 14px }
.cg-meter-bar { height: 8px; margin-top: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden }
.cg-meter-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s var(--ease) }
.cg-meter-bar.full i { background: var(--bad) }
.cg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px }
.cg-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; color: inherit; text-decoration: none }
.cg-card:hover { border-color: var(--accent-light) }
.cg-card .grow { flex: 1; min-width: 0; display: grid; gap: 2px }
.cg-card .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cg-card-ic, .cg-job-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text) }
.cg-pw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 14px 18px; margin-bottom: 16px }
.cg-url { overflow-wrap: anywhere }
/* A gallery the client paid to keep: upload only (no edit, no delete). */
.cg-kept { padding: 16px 18px; margin-bottom: 16px; border-color: var(--ok-bg) }
.cg-kept.full { border-color: var(--bad) }
.cg-kept-head { display: flex; gap: 12px; align-items: flex-start }
.cg-kept-head > div { display: grid; gap: 2px }
.cg-kept-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok) }
.cg-kept.full .cg-kept-ic { background: var(--bad-bg, var(--surface-2)); color: var(--bad) }
.cg-kept-rules { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px }
.cg-kept-rules li { display: flex; align-items: center; gap: 8px }
.cg-kept-rules li svg { width: 16px; height: 16px; flex: none }
.cg-kept-rules .yes svg { color: var(--ok) }
.cg-kept-rules .no { color: var(--muted) }
.cg-kept-rules .no svg { color: var(--bad) }
.cg-locked .cg-tile-pick, .cg-locked [data-rm] { display: none }
.cg-drop { display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border: 2px dashed var(--line-2); border-radius: var(--r-lg); background: var(--paper); text-align: center; cursor: pointer; transition: border-color .2s, background .2s }
.cg-drop:hover, .cg-drop.over { border-color: var(--accent); background: var(--accent-tint) }
.cg-drop .cg-meter { width: 100%; max-width: 420px; text-align: left }
.cg-drop-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 4px }
.cg-queue { display: grid; gap: 8px; margin-top: 12px }
.cg-queue:empty { display: none }
.cg-job { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper) }
.cg-job .grow { flex: 1; min-width: 0; display: grid; gap: 2px }
.cg-job .grow b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cg-job.err { border-color: transparent; background: var(--bad-bg) }
.cg-job.err small { color: var(--bad) }
.cg-job.done { border-color: transparent; background: var(--ok-bg) }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px }
.cg-tile { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--paper); transition: box-shadow .15s, border-color .15s }
/* Select: a tick circle on each tile (on hover, or always while selecting); picked tiles get an accent ring */
.cg-tile-pick { position: absolute; top: 8px; left: 8px; z-index: 2; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .28); color: transparent; cursor: pointer; opacity: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: opacity .15s, background .15s }
.cg-tile-pick svg { width: 16px; height: 16px; stroke-width: 3 }
.cg-tile:hover .cg-tile-pick, .cg-grid.selecting .cg-tile-pick, .cg-tile-pick:focus-visible { opacity: 1 }
.cg-tile.picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.cg-tile.picked .cg-tile-pick { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1 }
.cg-tile.picked .cg-tile-open img { transform: scale(.92); border-radius: 10px }
.cg-tile-open img { transition: transform .15s var(--ease), border-radius .15s }
.cg-grid.selecting .cg-tile-bar .icon-btn { visibility: hidden }
.cg-selbar { position: fixed; left: 50%; bottom: 24px; z-index: 950; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--pop-shadow); max-width: calc(100vw - 32px) }
.cg-selbar-n { display: grid; gap: 1px; min-width: 120px; padding-right: 6px }
.cg-selbar-n b { font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums }
.cg-selbar-n small { font-size: 12px; color: var(--muted) }
.cg-selbar .btn { white-space: nowrap }
@media (max-width: 600px) { .cg-selbar { left: 16px; right: 16px; bottom: 76px; transform: none; flex-wrap: wrap; border-radius: 20px } }

.cg-tile-open { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer; background: var(--surface-2); color: var(--muted) }
.cg-tile-open img { width: 100%; height: 100%; object-fit: cover; display: block }
.cg-tile-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; word-break: break-word }
.cg-tile-vid { position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff }
.cg-tile-bar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px }
.cg-tile-bar small { flex: 1; color: var(--muted) }
.cg-view { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: var(--r-sm) }
@media (max-width: 700px) { .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px } .cg-tile-bar small { display: none } }
/* Gallery: plan page, hero with the client's view, plan picker, overview tiles */
.cg-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text) }
.cg-kicker svg { width: 15px; height: 15px }
.cg-stat-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text) }
.cg-stat-ic svg { width: 18px; height: 18px }
/* The client's view, drawn with tokens */
.cg-mock { justify-self: center; width: 100%; max-width: 280px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: var(--pop-shadow); overflow: hidden; transform: rotate(2deg) }
.cg-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted) }
.cg-mock-bar svg { width: 13px; height: 13px; color: var(--ok) }
.cg-mock-body { display: grid; gap: 4px; padding: 14px }
.cg-mock-body b { font-family: var(--display); font-size: 15px; color: var(--ink) }
.cg-mock-body small { font-size: 11.5px; color: var(--muted) }
.cg-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 0 10px }
.cg-mock-grid i { position: relative; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; color: var(--on-ink) }
.cg-mock-grid i svg { width: 14px; height: 14px }
.cg-mock-grid .t1 { background: color-mix(in srgb, var(--accent) 34%, var(--surface-2)) }
.cg-mock-grid .t2 { background: color-mix(in srgb, var(--ok) 30%, var(--surface-2)) }
.cg-mock-grid .t3 { background: color-mix(in srgb, var(--ink) 55%, var(--surface-2)) }
.cg-mock-grid .t4 { background: color-mix(in srgb, var(--warn) 32%, var(--surface-2)) }
.cg-mock-grid .t5 { background: color-mix(in srgb, var(--info) 32%, var(--surface-2)) }
.cg-mock-grid .t6 { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)) }
.cg-mock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600 }
.cg-mock-btn svg { width: 14px; height: 14px }
/* Plan picker */
.cg-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding-top: 10px }
.cg-paybar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--accent-soft); background: var(--accent-tint) }
.cg-paybar div { display: grid; gap: 2px }
.cg-paybar b { font-family: var(--display); font-size: 17px; color: var(--ink) }
/* How it works */
.cg-fine { margin: 18px 0 0; max-width: 760px }
/* Active plan: overview */
.cg-renew { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px }
.cg-renew span { display: inline-flex; align-items: center; gap: 8px }
.cg-overview { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px }
.cg-plan h3 { margin: 4px 0 0; font-family: var(--display); font-size: 24px }
.cg-upsell { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 12px; background: var(--accent-soft, rgba(255,82,91,.08)); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer }
.cg-upsell svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent) }
.cg-upsell:hover { border-style: solid }
.cg-stat { display: grid; align-content: start; gap: 4px; padding: 18px }
.cg-stat .cg-stat-ic { margin-bottom: 6px }
.cg-stat b { font-family: var(--display); font-size: 24px; line-height: 1.1; color: var(--ink) }
.cg-first { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px }
.cg-first h3 { margin: 0 0 6px }
.cg-first p { margin: 0 0 16px; max-width: 460px }
.cg-first .cg-mock { transform: none }
@media (max-width: 1100px) { .cg-overview .cg-plan { grid-column: 1 / -1 } }
@media (max-width: 760px) {
  .cg-first { grid-template-columns: 1fr; padding: 20px }
  .cg-stats .cg-stat:last-child { grid-column: 1 / -1 }
  .cg-paybar .btn { width: 100% }
}
/* Gallery: the storage plan, premium (accent gradient, days left in a ring; amber in its last 5 days) */
.cg-overview { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px }
.cg-plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(130deg, var(--accent-deep) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #ffb199) 100%); box-shadow: 0 28px 56px -34px var(--accent) }
.cg-plan::before, .cg-plan::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); z-index: -1 }
.cg-plan::before { right: -70px; top: -110px; width: 260px; height: 260px }
.cg-plan::after { left: 38%; bottom: -150px; width: 220px; height: 220px; background: rgba(255, 255, 255, .06) }
.cg-plan.soon { background: linear-gradient(130deg, #9a4b05, #d97706 60%, #f2b04b); box-shadow: 0 28px 56px -34px #d97706 }
.cg-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.cg-plan-k { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.cg-plan-k svg { width: 16px; height: 16px }
.cg-plan-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; backdrop-filter: blur(4px) }
.cg-plan-chip svg { width: 13px; height: 13px }
.cg-plan-mid { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.cg-plan-size { display: grid; gap: 4px; min-width: 0 }
.cg-plan-size b { font-family: var(--display); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums }
.cg-plan-size small { font-size: 13px; opacity: .88 }
/* Days left: a thin white progress ring around a frosted disc (7.1.100: bigger, lighter). */
.cg-plan-ring { --p: 100; position: relative; width: 124px; height: 124px; flex: none; display: grid; place-content: center; gap: 4px; text-align: center; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 18px 36px -20px rgba(0, 0, 0, .35); backdrop-filter: blur(6px) }
.cg-plan-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)) }
.cg-plan.soon .cg-plan-ring { background: rgba(122, 59, 4, .28) }
.cg-plan-ring b { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.cg-plan-ring small { font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .9 }
@media (max-width: 600px) { .cg-plan-ring { width: 104px; height: 104px } .cg-plan-ring b { font-size: 32px } }
.cg-plan-meter { display: grid; gap: 8px }
.cg-plan-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .24); overflow: hidden }
.cg-plan-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .4s var(--ease) }
.cg-plan-bar.full i { background: #ffe1a8 }
.cg-plan-use { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 13px; opacity: .92; font-variant-numeric: tabular-nums }
.cg-plan-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto }
.cg-plan-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--accent-deep); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); transition: transform .2s var(--ease) }
.cg-plan-btn svg { width: 17px; height: 17px }
.cg-plan.soon .cg-plan-btn { color: #9a4b05 }
.cg-plan-btn:hover, .cg-plan-up:hover { transform: translateY(-1px) }
.cg-plan-up { flex: 1; min-width: 220px; display: grid; gap: 2px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; backdrop-filter: blur(6px); transition: transform .2s var(--ease), background .2s }
.cg-plan-up:hover { background: rgba(255, 255, 255, .22) }
.cg-plan-up s { opacity: .7; font-weight: 500 }
.cg-plan-up small { font-size: 12px; opacity: .85 }
/* Beside the plan card the three stats stack as compact rows (icon left), sharing its height instead of each stretching to it */
.cg-stats { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0 }
.cg-stat { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-content: center; padding: 18px 22px; border-radius: 22px }
.cg-stat .cg-stat-ic { grid-row: 1 / span 3; align-self: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 0 }
.cg-stat-l, .cg-stat b, .cg-stat small { grid-column: 2; min-width: 0 }
.cg-stat .cg-stat-ic svg { width: 21px; height: 21px }
.cg-stat-l { font-size: 13px; font-weight: 600; color: var(--muted) }
.cg-stat b { font-size: 32px; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
/* Gallery: cards with a cover collage of their latest photos */
.cg-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.cg-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 22px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s }
.cg-card:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -30px rgba(22, 32, 46, .4) }
.cg-cover { display: grid; gap: 3px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--accent-soft), var(--accent-tint)) }
.cg-cover i { display: block; min-height: 0; background: var(--surface-2) center / cover no-repeat; transition: transform .5s var(--ease) }
.cg-card:hover .cg-cover i { transform: scale(1.04) }
.cg-cover { overflow: hidden }
.cg-cover.n2 { grid-template-columns: 1fr 1fr }
.cg-cover.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr } .cg-cover.n3 i:first-child { grid-row: 1 / 3 }
.cg-cover.n4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr } .cg-cover.n4 i:first-child { grid-row: 1 / 3 } .cg-cover.n4 i:last-child { grid-column: 2 / 4 }
.cg-cover em { display: grid; place-items: center; color: var(--accent-text) }
.cg-cover em svg { width: 34px; height: 34px; opacity: .7 }
.cg-cover-tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(15, 18, 26, .7); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px) }
.cg-cover-tag svg { width: 13px; height: 13px }
.cg-card-body { display: grid; gap: 4px; padding: 16px 18px 18px; min-width: 0 }
.cg-card-body > b { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cg-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums }
.cg-card-meta span { display: inline-flex; align-items: center; gap: 4px }
.cg-card-meta span + span::before { content: ""; width: 3px; height: 3px; margin-right: 8px; border-radius: 50%; background: var(--line-2) }
.cg-card-meta svg { width: 13px; height: 13px }
.cg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line) }
/* Long titles wrap to two lines, and the footer never pushes the card wider than its column. */
.cg-list > * { min-width: 0 }
.cg-card-body { grid-template-columns: minmax(0, 1fr) }
.cg-card-body > b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25 }
.cg-card-foot { flex-wrap: wrap }
.cg-card-foot .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cg-card-foot .btn { flex: none }
/* A gallery the client paid to keep: a green tag on the cover. */
.cg-cover-tag.kept { background: rgba(21, 128, 61, .88) }
.cg-card-kept { border-color: var(--ok-bg) }

/* Gallery › For your website (7.2.13): one slim card under Your galleries: photos, the 1 GB, three facts, two buttons */
.cg-webx { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; border-radius: 20px }
.cg-webx-thumb { display: grid; gap: 3px; width: 116px; height: 88px; border-radius: 14px; overflow: hidden; background: var(--accent-tint); text-decoration: none }
.cg-webx-thumb.n2 { grid-template-columns: 1fr 1fr } .cg-webx-thumb.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr } .cg-webx-thumb.n3 i:first-child { grid-row: span 2 }
.cg-webx-thumb i { display: block; min-height: 0; background: var(--surface-2) center / cover no-repeat; transition: transform .4s var(--ease) }
.cg-webx-thumb:hover i { transform: scale(1.05) }
.cg-webx-thumb em { display: grid; place-items: center; color: var(--accent-text) } .cg-webx-thumb em svg { width: 26px; height: 26px }
.cg-webx-main { display: grid; gap: 8px; min-width: 0 }
.cg-webx-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px }
.cg-webx-top b { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; color: var(--ink) }
.cg-webx-url { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cg-webx-url svg { width: 13px; height: 13px; flex: none }
.cg-webx-use { display: flex; align-items: center; gap: 12px; max-width: 460px }
.cg-webx-use small { flex: none; font-size: 12.5px; color: var(--muted) } .cg-webx-use small b { color: var(--ink) }
.cg-webx-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.cg-webx-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-deep)) }
.cg-webx-track.full i { background: var(--bad) }
.cg-webx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.cg-webx-facts li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2) }
.cg-webx-facts svg { width: 13px; height: 13px; color: var(--accent-text) }
.cg-webx-need { margin: 0; font-size: 13px; color: var(--muted) }
.cg-webx-acts { display: flex; flex-direction: column; gap: 8px } .cg-webx-acts .btn { justify-content: center; white-space: nowrap }
@media (max-width: 760px) { .cg-webx { grid-template-columns: 88px minmax(0, 1fr); padding: 12px } .cg-webx-thumb { width: 88px; height: 72px } .cg-webx-acts { grid-column: 1 / -1; flex-direction: row } .cg-webx-acts .btn { flex: 1 } .cg-webx { align-items: start } .cg-webx-use { flex-wrap: wrap; gap: 6px } .cg-webx-track { flex: 1 0 100% } }
@media (prefers-reduced-motion: reduce) { .cg-webx-thumb i { transition: none } }
@media (max-width: 1100px) { .cg-overview { grid-template-columns: 1fr } .cg-stats { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 760px) { .cg-stats { grid-template-columns: 1fr 1fr } .cg-plan-size b { font-size: 38px } .cg-plan-btn { flex: 1; justify-content: center } }
/* Gallery: security */
.cg-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.cg-secure { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-text); font-size: 12px; font-weight: 700 }
.cg-secure svg { width: 14px; height: 14px }
.cg-mock-bar em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--ok-text) }
/* Gallery: background uploads, the floating status (bottom right, every page) */
/* Upload status: one card at the bottom right. Head (summary + overall bar) always shows; the body opens on click */
.cg-up { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 380px; max-width: calc(100vw - 32px); border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--pop-shadow); overflow: hidden }
.cg-up-head { display: flex; align-items: center; gap: 4px; padding: 12px 10px 12px 14px }
.cg-up-sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.cg-up-badge { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text) }
.cg-up-badge svg { width: 20px; height: 20px }
.cg-up.busy .cg-up-badge svg { animation: cg-up-bob 1.4s ease-in-out infinite }
.cg-up.ok .cg-up-badge { background: var(--ok-bg); color: var(--ok) }
.cg-up.bad .cg-up-badge { background: var(--bad-bg); color: var(--bad) }
.cg-up-txt { flex: 1; min-width: 0; display: grid; gap: 2px }
.cg-up-txt b { font-size: 14.5px; font-weight: 700 }
.cg-up-txt small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums }
.cg-up-pct { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--accent-text); font-variant-numeric: tabular-nums }
.cg-up-chev { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--muted); transition: transform .25s var(--ease) }
.cg-up-chev svg { width: 18px; height: 18px }
.cg-up.open .cg-up-chev { transform: rotate(180deg) }
.cg-up-sum:hover .cg-up-chev { background: var(--hover); color: var(--ink) }
.cg-up-x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer }
.cg-up-x:hover { background: var(--hover); color: var(--ink) }
.cg-up-x svg { width: 16px; height: 16px }
.cg-up-eta { display: flex; align-items: center; gap: 10px; margin: 0 14px 12px; padding: 10px 14px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-text) }
.cg-up-eta svg { width: 20px; height: 20px; flex: none }
.cg-up-eta span { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px }
.cg-up-eta b { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums }
.cg-up-eta small { font-size: 12.5px; color: var(--muted) }
.cg-up-eta em { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums }
.cg-up-bar { height: 3px; background: var(--surface-2) }
.cg-up-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease) }
.cg-up.ok .cg-up-bar i { background: var(--ok) }
.cg-up.bad .cg-up-bar i { background: var(--bad) }
.cg-up-body { max-height: 46vh; overflow: auto; padding: 12px 14px 4px }
.cg-up-sub { display: flex; justify-content: space-between; margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.cg-up-sub span { text-transform: none; letter-spacing: 0; font-weight: 600 }
.cg-up-sub.bad { color: var(--bad) }
.cg-up-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px }
.cg-up-list > li { min-width: 0 }
.cg-up-g { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px }
.cg-up-g-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--paper); color: var(--accent-text) }
.cg-up-g-ic svg { width: 15px; height: 15px }
.cg-up-g-t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cg-up-g b { font-variant-numeric: tabular-nums } .cg-up-g b small { color: var(--muted); font-weight: 600 }
.cg-up-f { display: flex; align-items: center; gap: 10px; padding: 6px 2px }
.cg-up-f-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--accent-tint); color: var(--accent-text) }
.cg-up-f-ic svg { width: 15px; height: 15px }
.cg-up-f-main { flex: 1; min-width: 0; display: grid; gap: 5px }
.cg-up-f-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cg-up-f-bar { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden }
.cg-up-f-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s var(--ease) }
.cg-up-f > small { width: 34px; flex: none; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums }
.cg-up-f.bad .cg-up-f-ic { background: var(--bad-bg); color: var(--bad) }
.cg-up-f.bad .cg-up-f-main small { font-size: 12px; line-height: 1.4; color: var(--bad) }
.cg-up-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line) }
.cg-up-foot > span { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted) }
.cg-up-foot > span svg { width: 14px; height: 14px; flex: none }
@media (max-width: 600px) { .cg-up { right: 16px; left: 16px; bottom: 76px; width: auto } }
@keyframes cg-up-bob { 50% { transform: translateY(-2px) } }
.cg-upnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px }

/* ---------- Website (website.js): the partner's free site ---------- */
.pw-design { padding: 0; overflow: hidden; display: flex; flex-direction: column }
.pw-design.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow) }
.pw-design-body .badge svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px }
.pw-blurb { margin: 2px 0 10px; color: var(--ink-2); flex: 1 }
.pw-design-acts { gap: 8px; flex-wrap: wrap }
/* Website plan: Upgrade / Renew card, the active plan bar, the domain note and the brand colours */
.pw-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text) }
.pw-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.pw-colours { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.pw-colours h3 { font-family: var(--display); font-size: 18px; letter-spacing: -.03em; margin: 0 0 2px }
.pw-colours p { margin: 0 }
.pw-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.pw-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 3px; border: 2px solid transparent; border-radius: var(--r-pill, 999px); background: none; color: var(--ink-2); font: 600 13px var(--sans, inherit); cursor: pointer }
.pw-swatch i { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.pw-swatch-auto { padding-right: 12px; border-color: var(--line-2) }
.pw-swatch.on { border-color: var(--accent) }
.pw-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ---------- Website > Edit website (websiteeditor.js): a 90% drawer, sections left, the site live right ---------- */
.drawer[data-size="xl"] { --drawer-w: 90vw }
.drawer-body:has(> .we-app) { padding: 0; overflow: hidden; display: flex }
.drawer-body > .we-app { max-width: none; margin: 0 !important; width: 100% }
.we-app { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); height: 100%; min-height: 0 }
.we-side { overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 40px; border-right: 1px solid var(--line); background: var(--paper); scroll-padding-top: 12px }
.we-side-head { margin: 0 2px 14px }
.we-groups { gap: 10px }
.we-groups .lm-dz-g { transition: border-color .2s, box-shadow .2s }
.we-groups .lm-dz-g[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 18px 40px -30px rgba(22, 32, 46, .45) }
.we-groups .lm-dz-g > summary { gap: 12px; padding: 12px 14px }
.we-groups .lm-dz-g > summary h5 { flex: 1; font-size: 13px; letter-spacing: .06em }
.we-g-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; transition: background .2s, color .2s }
.we-g-ic svg { width: 17px; height: 17px }
.we-groups .lm-dz-g[open] .we-g-ic { background: var(--accent-soft); color: var(--accent) }
.we-lock { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px }
.we-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: radial-gradient(120% 80% at 50% 0%, var(--surface-2), var(--bg)) }
.we-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px) }
.we-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2) }
.we-seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 13px var(--body, inherit); cursor: pointer }
.we-seg button svg { width: 15px; height: 15px }
.we-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(22, 32, 46, .25) }
.we-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted) }
.we-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); animation: we-pulse 2s ease-in-out infinite }
@keyframes we-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 6%, transparent) } }
.we-state { margin-left: auto; font-size: 12.5px; color: var(--muted) }
.we-stage { flex: 1; min-height: 0; padding: 22px 26px 26px; display: flex; justify-content: center }
.we-screen { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(22, 32, 46, .55), 0 2px 6px rgba(22, 32, 46, .06) }
.we-chrome { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--paper); border-bottom: 1px solid var(--line); flex: none }
.we-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2) }
.we-chrome span { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 4px 14px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--muted); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.we-chrome span svg { width: 12px; height: 12px; color: var(--ok) }
.we-screen iframe { position: absolute; left: 0; top: 36px; border: 0; background: #fff; transform-origin: 0 0; transition: opacity .25s ease }
.we-screen iframe.next { opacity: 0; pointer-events: none }
.we-screen iframe.on { opacity: 1; z-index: 1 }
.we-screen iframe.off { opacity: 0; z-index: 0 }
.we-loading { position: absolute; inset: 36px 0 0; display: grid; place-items: center; background: #fff; z-index: 2 }
.we-loading[hidden] { display: none }
.we-fail { position: absolute; inset: 36px 0 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; background: var(--paper); color: var(--ink-2) }
.we-fail[hidden] { display: none }
.we-fail svg { width: 28px; height: 28px; color: var(--muted) }
.we-fail span { font-size: 13.5px; color: var(--muted) }
.we-stage.phone .we-screen { flex: none; width: 390px; max-width: 100%; border: 10px solid var(--ink); border-radius: 44px }
.we-stage.phone .we-chrome { display: none }
.we-stage.phone .we-screen iframe { top: 0; width: 100%; height: 100% }
.we-stage.phone .we-loading, .we-stage.phone .we-fail { inset: 0 }
.we-photos { display: grid; gap: 8px }
.we-thumbs { display: flex; gap: 8px; flex-wrap: wrap }
.we-thumbs figure { position: relative; margin: 0 }
.we-thumbs img { width: 76px; height: 58px; object-fit: cover; border-radius: 10px; display: block }
.we-n { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center }
.we-n svg { width: 12px; height: 12px }
.we-svc { border: 1px solid var(--line); border-radius: 14px; background: var(--bg, var(--paper)) }
.we-svc > summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; cursor: pointer; list-style: none }
.we-svc > summary::-webkit-details-marker { display: none }
.we-svc > summary b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.we-svc > summary img, .we-noimg { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none }
.we-noimg { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent) }
.we-svc > summary > svg:last-child { width: 16px; height: 16px; color: var(--muted); transition: transform .2s }
.we-svc[open] > summary > svg:last-child { transform: rotate(180deg) }
.we-svc-b { display: grid; gap: 10px; padding: 4px 12px 14px }
.we-faq { display: grid; gap: 10px }
.we-qa { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 14px }
.we-qa .btn { justify-self: start }
.we-ask { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft) }
.we-revs { display: grid; gap: 8px }
.we-rev { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px }
.we-rev p { overflow-wrap: anywhere }
.we-stars { color: #e7a33e; font-size: 12px; letter-spacing: 1px }
.we-sw { flex: none; margin: 2px 0 0 }
.we-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px }
.we-pick { position: relative; padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; overflow: hidden }
.we-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }
.we-pick.on { border-color: var(--accent) }
.we-uping { cursor: progress; border-color: var(--accent-light) }
.we-uping img { filter: saturate(.7) brightness(.85) }
.we-up-veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; background: rgba(15, 18, 26, .45); color: #fff; text-align: center }
.we-up-ring { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: radial-gradient(closest-side, transparent 72%, rgba(0,0,0,0) 73%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0); -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%); transition: background .2s }
.we-up-veil b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1 }
.we-up-veil small { font-size: 11.5px; opacity: .9 }
.we-pick .we-n { top: 6px; left: 6px }
.we-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center }
.we-x svg { width: 14px; height: 14px }
@media (max-width: 1100px) { .we-app { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) } .we-live { display: none } }
@media (max-width: 960px) { .drawer-body:has(> .we-app) { overflow: auto } .we-app { grid-template-columns: 1fr; height: auto } .we-main { order: -1; height: 70vh } .we-side { overflow: visible } }

/* Website > Your own domain */
.pw-dom-form { display: flex; gap: 10px; flex-wrap: wrap }
.pw-dom-form .input { flex: 1; min-width: 220px }

/* Website > Brand colour: the partner's own colour (picker + hex code) */
.pw-own { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 3px; border: 2px solid var(--line-2); border-radius: 999px }
.pw-own.on { border-color: var(--accent) }
.pw-own-pick { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--own, conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.pw-own-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.pw-own-hex { width: 104px; min-height: 34px; height: 34px; padding: 0 10px; border-radius: 999px; font: 600 13px var(--mono, ui-monospace, monospace); text-transform: lowercase }
.pw-own .btn { min-height: 30px; height: 30px }
.we-swatches { gap: 8px }
.we-own { flex-wrap: wrap; border-radius: 16px; padding: 6px 12px 6px 6px; margin-top: 2px }
.we-own .hint { flex: 1 1 140px }

/* Subscription › Your add-ons: every add-on bought, one card each (account.js) */
.addons-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 4px 0 12px }
.addons-head h3 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: -.03em }
.addons { margin-bottom: 22px }
.addon { display: flex; flex-direction: column; gap: 14px; padding: 18px }
.addon-top { display: flex; align-items: flex-start; gap: 12px }
.addon-top b { display: block; font-size: 15px; color: var(--ink) }
.addon-top small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4 }
.addon-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center }
.addon-ic svg { width: 20px; height: 20px }
.addon-when { display: grid; gap: 2px }
.addon-when b { font-family: var(--display); font-size: 20px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums }
.addon-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.addon-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent)) }
.addon-go { margin-top: auto; align-self: flex-start }
.addon-go svg { width: 16px; height: 16px }

/* Website › Get reviews from your clients */

/* Digital Marketing: Meta had a hiccup, showing the last results */
.dm-stale { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 16px }

/* ---------------- Website page (website.js): hero, stats, grow cards, designs ---------------- */
/* Website › the site card: name, status, address, actions, and the design in a browser frame */
.pw-hero { position: relative; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 8px; border-radius: 24px; isolation: isolate }
.pw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 100% 0%, var(--accent-tint) 0%, transparent 70%) }
.pw-hero-main { padding: 30px 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0 }
.pw-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.pw-hero-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.pw-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer }
.pw-hero-head h3 { margin: 0; font-family: var(--display); font-size: 34px; line-height: 1.1; letter-spacing: -.04em; color: var(--ink); overflow-wrap: anywhere }
.pw-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin: 10px 0 0; font-size: 13.5px; color: var(--muted) }
.pw-hero-meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px; border-radius: 50%; background: var(--line-2) }
.pw-dot { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink-2) }
.pw-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted) }
.pw-dot.ok { color: var(--ok) } .pw-dot.ok i { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg) }
.pw-dot.warn { color: var(--warn, #b45309) } .pw-dot.warn i { background: var(--warn, #d97706); box-shadow: 0 0 0 4px var(--warn-bg, #fdf3e1) }
.pw-dot.bad { color: var(--bad, #c0392b) } .pw-dot.bad i { background: var(--bad, #c0392b) }
.pw-hero-note { margin: -6px 0 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--muted) }
.pw-hero-note b { color: var(--ink-2); font-weight: 600 }
.pw-hero-note.bad b { color: var(--bad, #c0392b) }
.pw-urls { display: grid; gap: 8px; max-width: 560px }
.pw-url { display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--surface-2) }
.pw-url > svg { width: 17px; height: 17px; flex: none; color: var(--muted) }
.pw-url a { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pw-url a:hover { color: var(--accent-text) }
.pw-url .badge { flex: none }
.pw-url-copy { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 2px rgba(22, 32, 46, .08); transition: color .2s, transform .2s var(--ease) }
.pw-url-copy:hover { color: var(--accent-text); transform: scale(1.05) }
.pw-url-copy svg { width: 16px; height: 16px }
.pw-hero-acts { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap }
.pw-only { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted) }
.pw-only svg { width: 14px; height: 14px }
.pw-browser { position: relative; align-self: center; margin: 24px 24px 24px 0; border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 24px 50px -28px rgba(22, 32, 46, .35); transition: transform .4s var(--ease), box-shadow .4s var(--ease) }
.pw-browser:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -28px rgba(22, 32, 46, .42) }
.pw-browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line) }
.pw-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2) }
.pw-browser-bar i:first-child { background: #ff6159 } .pw-browser-bar i:nth-child(2) { background: #ffbd2e } .pw-browser-bar i:nth-child(3) { background: #28c941 }
.pw-browser-bar span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: var(--paper); font-size: 12px; font-weight: 600; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.pw-browser-bar span svg { width: 12px; height: 12px; flex: none; color: var(--ok) }
.pw-browser-shot { --s: .34; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2) top center / cover no-repeat }
.pw-browser-shot iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .5s }
.pw-browser-shot.on iframe { opacity: 1 }
.pw-browser-tag { position: absolute; right: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(15, 18, 26, .72); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px) }

.pw-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 32px 0 14px }
.pw-section-head h3 { font-size: 22px; letter-spacing: -.03em; color: var(--ink) }
.pw-section-head p { margin: 4px 0 0; font-size: 13px; max-width: 680px }
.pw-grow-card { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.pw-card-head { display: flex; align-items: flex-start; gap: 14px }

.pw-card-head h3 { font-size: 18px; letter-spacing: -.03em; color: var(--ink) }
.pw-card-head p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted) }
.pw-card-head .badge { flex: none }
.pw-card-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center }
.pw-card-ic svg { width: 20px; height: 20px }
.pw-linkbox { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--r-input, 14px); background: var(--surface-2); min-width: 0 }
.pw-linkbox code { font: 600 13.5px var(--mono, ui-monospace, monospace); color: var(--ink); overflow-wrap: anywhere; min-width: 0 }
.pw-linkbox .icon-btn { width: 36px; height: 36px; flex: none }
.pw-dom-host > span { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; overflow-wrap: anywhere }
.pw-dom-host > span svg { width: 18px; height: 18px; flex: none; color: var(--ok) }
.pw-card-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto }
.pw-card-acts .muted { margin-left: 4px }
.pw-dom-steps { list-style: none; counter-reset: pwstep; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 14px; color: var(--ink-2) }
.pw-dom-steps li { counter-increment: pwstep; display: flex; gap: 12px; align-items: flex-start; min-width: 0 }
.pw-dom-steps li::before { content: counter(pwstep); width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; margin-top: -2px }
.pw-dom-steps li > div { min-width: 0; flex: 1 }
.pw-dns-wrap { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-input, 14px); overflow-x: auto }
.pw-dns { width: 100%; border-collapse: collapse; font-size: 13.5px }
.pw-dns th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; background: var(--surface-2) }
.pw-dns td { padding: 10px 14px; vertical-align: middle; white-space: nowrap }
.pw-dns code { font: 600 13.5px var(--mono, ui-monospace, monospace); color: var(--ink) }
.pw-dns-val { display: inline-flex; align-items: center; gap: 8px }
.pw-dns-val .icon-btn { width: 32px; height: 32px }


.pw-design { transition: transform .25s var(--ease), box-shadow .25s var(--ease) }
.pw-design:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(22, 32, 46, .45) }
.pw-design-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2) }
.pw-design-img > span { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .5s var(--ease) }
.pw-design:hover .pw-design-img > span { transform: scale(1.05) }
.pw-design-tag { position: absolute; left: 10px; top: 10px; font-style: normal }
.pw-design-tag .badge { box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); background-color: var(--paper) }
.pw-design-tag .badge.ok { background: var(--ok-bg) } .pw-design-tag .badge.warn { background: var(--warn-bg) } .pw-design-tag .badge.info { background: var(--info-bg) }
.pw-design-img > em { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); opacity: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(15, 18, 26, .78); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; transition: opacity .25s, transform .25s var(--ease); backdrop-filter: blur(6px) }
.pw-design-img > em svg { width: 15px; height: 15px }
.pw-design:hover .pw-design-img > em, .pw-design-img:focus-visible > em { opacity: 1; transform: translate(-50%, 0) }
.pw-design-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; background: var(--paper) }
.pw-design-body > b { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; color: var(--ink) }
.pw-design-cur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ok) }
.pw-design-cur svg { width: 16px; height: 16px }

:root[data-theme="dark"] .pw-browser { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8) }
:root[data-theme="dark"] .pw-design:hover { box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8) }

.pw-tabs { display: flex; gap: 4px; margin: 22px 0 18px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none }
.pw-tabs::-webkit-scrollbar { display: none }
.pw-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14.5px Inter, sans-serif; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s }
.pw-tab > svg { width: 18px; height: 18px; opacity: .75 }
.pw-tab:hover { background: var(--accent-tint); color: var(--ink) }
.pw-tab.on { background: var(--accent-soft); color: var(--accent-text) }
.pw-tab.on > svg { opacity: 1; color: var(--accent) }
.pw-tab .badge { padding: 2px 8px; font-size: 11px }
.pw-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums }
.pw-tab.on .pw-tab-n { background: var(--paper); color: var(--accent-text) }
.pw-tab-lock { display: inline-grid; font-style: normal; color: var(--muted) }
.pw-tab-lock svg { width: 14px; height: 14px }
.pw-panel { display: grid; gap: 16px; animation: pwIn .28s var(--ease) }
.pw-panel[hidden] { display: none }
.pw-panel > .pw-section-head { margin: 4px 0 -4px }
@keyframes pwIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .pw-panel { animation: none } }
.pw-card-ic.ok { background: var(--ok-bg); color: var(--ok) }
.pw-locked { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.pw-locked .grow { flex: 1; min-width: 220px }
.pw-locked h3 { font-size: 18px; letter-spacing: -.03em }
.pw-locked p { margin: 4px 0 0; font-size: 13.5px }
.pw-plan-active { display: grid; gap: 18px }
.pw-meter { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-input, 14px); background: var(--surface-2) }
.pw-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.pw-meter-row b { font-family: var(--display); font-size: 22px; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums }
.pw-meter-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden }
.pw-meter-bar i { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-light)) }
@media (max-width: 1100px) {
  .pw-hero { grid-template-columns: minmax(0, 1fr) }
  .pw-browser { margin: 0 32px 28px; max-width: 440px }
}
@media (max-width: 640px) {
  .pw-hero-main { padding: 22px; gap: 16px }
  .pw-browser { margin: 0 22px 22px }
  .pw-hero-head h3 { font-size: 28px }
  .pw-tab { padding: 0 14px }
}
/* Website editor › Google tag & Meta Pixel */
.we-tr { font: 600 14px var(--mono, ui-monospace, monospace); letter-spacing: .01em }
.we-tr-n { display: inline-flex; align-items: center; gap: 6px; color: var(--muted) }
.we-tr-n svg { width: 14px; height: 14px }
.we-tr-n.ok { color: var(--ok) }
.we-tr-n.ok b { font-family: var(--mono, ui-monospace, monospace); color: var(--ink) }
.we-tr-n.bad { color: var(--bad) }
.we-tr-info { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-input, 14px); background: var(--accent-tint); border: 1px solid var(--accent-soft) }
.we-tr-info > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent) }
.we-tr-info b { color: var(--ink) }
.we-tr-info span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-2) }
/* Reviews (account.js): app + website reviews in one list */
.rv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 18px }
.rv-top > :only-child { grid-column: 1 / -1; max-width: 640px }
.rv-score { display: flex; align-items: center; gap: 24px }
.rv-score > div:first-child { display: grid; justify-items: center; gap: 2px; flex: none; min-width: 110px }
.rv-score > div:first-child b { font-family: var(--display); font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums }
.rv-bars { flex: 1; display: grid; gap: 6px; min-width: 0 }
.rv-bar { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums }
.rv-bar i { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.rv-bar i b { display: block; height: 100%; border-radius: inherit; background: #f5a524 }
.rv-bar em { font-style: normal; text-align: right }
.rv-ask { display: grid; gap: 12px; align-content: start }
.rv-ask .btn { justify-self: start }
.rv-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center }
.rv-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px; border-radius: var(--r-input, 14px); background: var(--surface-2) }
.rv-link code { font: 600 13px var(--mono, ui-monospace, monospace); color: var(--ink); overflow-wrap: anywhere; min-width: 0 }
.rv-link .icon-btn { width: 34px; height: 34px; flex: none }
.rv-filters { gap: 10px; justify-content: space-between; margin-bottom: 14px }
.rv-svc { width: auto; min-width: 200px; min-height: 40px }
.rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.rv-meta .muted svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px }
@media (max-width: 900px) { .rv-top { grid-template-columns: minmax(0, 1fr) } .rv-score { flex-wrap: wrap } }
.rv-show { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ink-2); cursor: pointer }
.rv-same { font-size: 11.5px; text-align: center; max-width: 140px; line-height: 1.35 }
.rv-move { display: flex; gap: 8px; flex-wrap: wrap; width: 100% }
.rv-move .input { flex: 1; min-width: 180px; min-height: 36px; height: 36px; padding: 0 12px; font-size: 13.5px }
.rv-pending { display: block; max-width: 160px; margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text, var(--warn)); font-size: 11.5px; line-height: 1.35; text-align: center }

/* Website › plans: Free next to the website plan, what each includes */
.pw-tiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch }
.pw-tier { display: flex; flex-direction: column; padding: 24px 26px; border-radius: 22px }
.pw-tier.pro { position: relative; overflow: hidden; border: 1.5px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 42%); box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--accent) 70%, transparent) }
.pw-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.pw-tier-name { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.pw-tier.pro .pw-tier-name { color: var(--accent-text) }
.pw-tier-pick { background: var(--accent); color: #fff }
.pw-tier-price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px }
.pw-tier-price b { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums }
.pw-tier-price span { font-size: 14px; font-weight: 600; color: var(--muted) }
.pw-tier-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted) }
.pw-tier-sub b { color: var(--ink) }
.pw-tier-all { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink) }
.pw-tier-all svg { width: 16px; height: 16px; color: var(--ok) }
.pw-tier-list { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px }
.pw-tier-all + .pw-tier-list { margin-top: 12px; padding-top: 0; border-top: 0 }
.pw-tier-list li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ink) }
.pw-tier-list i { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2) }
.pw-tier-list i svg { width: 15px; height: 15px }
.pw-tier-list li > span { min-width: 0; padding-top: 5px; overflow-wrap: anywhere }
.pw-tier-list.pro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px }
.pw-tier-list.pro i { width: 36px; height: 36px; border-radius: 12px; background: var(--paper); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft) }
.pw-tier-list.pro i svg { width: 17px; height: 17px }
.pw-tier-list.pro li > span { padding-top: 0 }
.pw-tier-list.pro b { display: block; font-size: 14px }
.pw-tier-list.pro small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted) }
.pw-tier-list.off { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); gap: 8px }
.pw-tier-list.off li { color: var(--muted); font-size: 13px }
.pw-tier-list.off i { width: 24px; height: 24px; border-radius: 8px; background: none; color: var(--muted) }
.pw-tier-list.off i svg { width: 13px; height: 13px }
.pw-tier-list.off li > span { padding-top: 3px }
.pw-tier-btn { width: 100%; justify-content: center; min-height: 48px; font-size: 15px }
.pw-tier.pro .pw-tier-list.pro { margin-bottom: 22px }
.pw-tier-note { margin: 0; font-size: 13.5px; color: var(--muted) }
.pw-tier-terms { list-style: none; margin: auto 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 8px; font-size: 13px; color: var(--ink-2) }
.pw-tier-terms li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4 }
.pw-tier-terms svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--ok) }
@media (max-width: 1100px) { .pw-tiers { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 640px) { .pw-tier { padding: 20px } .pw-tier-list.pro { grid-template-columns: minmax(0, 1fr) } }
.pw-panel > .pw-section-head + .pw-tiers { margin-top: 0 }

/* Gallery before a plan: what you get and the three steps, in one card */
.cg-why { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: 22px }
.cg-why-main { padding: 26px 28px }
.cg-why-main h3 { margin: 10px 0 18px; font-family: var(--display); font-size: 22px; line-height: 1.2; letter-spacing: -.03em; color: var(--ink) }
.cg-why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px }
.cg-why-list li { display: flex; gap: 12px; align-items: flex-start; min-width: 0 }
.cg-why-list li > svg { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text) }
.cg-why-list b, .cg-why-steps b { display: block; font-size: 14px; color: var(--ink) }
.cg-why-list small, .cg-why-steps small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted) }
.cg-why-steps { list-style: none; margin: 0; padding: 26px 26px; display: grid; align-content: center; gap: 18px; background: var(--surface-2); counter-reset: none }
.cg-why-steps li { position: relative; display: flex; gap: 12px; align-items: flex-start }
.cg-why-steps li + li::before { content: ""; position: absolute; left: 13px; top: -16px; height: 14px; width: 2px; border-radius: 2px; background: var(--line-2) }
.cg-why-steps i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 12.5px; font-weight: 700 }

@media (max-width: 900px) { .cg-why { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 600px) { .cg-why-list { grid-template-columns: minmax(0, 1fr) } .cg-why-main, .cg-why-steps { padding: 20px } }

/* Gallery › Choose your storage: plans and checkout in one card */
.cg-pick { padding: 24px 26px; border-radius: 22px }
.cg-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px }
.cg-pick-head h3 { margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: -.03em; color: var(--ink) }
.cg-pick-head p { margin: 4px 0 0; font-size: 13.5px }
.cg-plans { gap: 10px; padding-top: 8px }
.cg-pick .cg-paybar, .modal .cg-paybar { margin-top: 18px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none }
.cg-paybar .btn { min-width: 180px; justify-content: center }

/* Gallery › storage plan tiles (Wedza: selected = accent border + accent-soft wash, icons on accent-soft) */
.cg-plans { gap: 12px; padding-top: 12px }
.cg-plan-opt { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 18px; text-align: left; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .2s var(--ease) }
.cg-plan-opt:hover { border-color: var(--accent-light); transform: translateY(-2px); box-shadow: var(--shadow) }
.cg-po-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 14px -8px var(--accent) }
.cg-po-top { display: flex; align-items: center; justify-content: space-between }
.cg-po-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text) }
.cg-po-ic svg { width: 19px; height: 19px }
.cg-plan-radio { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); color: transparent; transition: background .2s, border-color .2s }
.cg-plan-radio svg { width: 13px; height: 13px }
.cg-po-size { margin-top: 14px; font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: var(--ink) }
.cg-po-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px; margin-top: 10px }
.cg-po-price b { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
.cg-po-price small { font-size: 13px; color: var(--muted) }
.cg-po-day { margin-top: 2px; font-size: 12.5px; color: var(--muted) }
.cg-po-fits { display: grid; gap: 6px; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--surface-2) }
.cg-po-fits > span { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); white-space: nowrap }
.cg-po-fits > span > svg { width: 26px; height: 26px; flex: none; padding: 6px; border-radius: 8px; background: var(--paper); color: var(--accent-text) }
.cg-po-fits b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
.cg-po-or { display: flex; align-items: center; gap: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.cg-po-or::before, .cg-po-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2) }
.cg-plan-opt.on { border: 1.5px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 55%); box-shadow: 0 0 0 4px var(--accent-tint), 0 20px 38px -26px var(--accent); transform: translateY(-2px) }
.cg-plan-opt.on .cg-plan-radio { background: var(--accent); border-color: var(--accent); color: #fff }
.cg-plan-opt.on .cg-po-ic { background: var(--accent); color: #fff }
.cg-plan-opt.on .cg-po-fits { background: var(--accent-tint) }
/* What fits fills the card's width (it shrank to less than its own lines, which spilled out) and sits at the
   bottom, so the boxes line up across cards even when one card's "Pay … now · … credit" line wraps */
.cg-plan-opt .cg-po-day { margin-bottom: 16px }
.cg-plan-opt { padding: 16px }
.cg-plan-opt .cg-po-fits { align-self: stretch; width: 100%; min-width: 0; box-sizing: border-box; margin-top: auto; padding: 9px 8px }
.cg-plan-opt .cg-po-fits > span { white-space: normal; gap: 7px; font-size: 12px; line-height: 1.3; min-width: 0 }
.cg-plan-opt .cg-po-fits > span > svg { width: 20px; height: 20px; padding: 4px; border-radius: 6px }
.cg-plan-opt .cg-po-fits b { white-space: nowrap }
/* Plans as a grid (3 a row), not five thin cards squeezed into one row */
.cg-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; padding-top: 14px }
.cg-plan-opt { padding: 20px }
.cg-plan-opt .cg-po-fits { padding: 11px 12px }
.cg-plan-opt .cg-po-fits > span { font-size: 13px }
@media (max-width: 900px) { .cg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .cg-plans { grid-template-columns: 1fr } }

/* Pay as you use › Where your photos live (7.2.10): a dark panel beside the start price, so the trust is seen with the Pay button. */
.cg-vault { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, rgba(243, 128, 32, .24), transparent 50%), linear-gradient(160deg, #141a2b 0%, #0d1120 75%); box-shadow: 0 28px 56px -36px rgba(13, 17, 32, .8) }
.cg-vault::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 18px 18px; mask: linear-gradient(180deg, #000, transparent 70%) }
.cg-vault-k { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffd2b0 }
.cg-vault-k svg { width: 15px; height: 15px }
.cg-vault-cf { display: flex; align-items: center; gap: 12px }
.cg-vault-mark { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #fff } .cg-vault-mark svg { width: 34px; height: auto }
.cg-vault-cf b { display: block; font-family: var(--display); font-size: 20px; letter-spacing: -.03em } .cg-vault-cf small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .62) }
.cg-vault-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.cg-vault-stats li { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1) }
.cg-vault-stats b { display: block; font-family: var(--display); font-size: 20px; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; background: linear-gradient(90deg, #fff, #ffd2b0); -webkit-background-clip: text; background-clip: text; color: transparent }
.cg-vault-stats small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .62) }
.cg-vault-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .7) }
.cg-vault-list li { display: flex; gap: 10px; align-items: flex-start }
.cg-vault-list svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #fbad41 }
.cg-vault-list b { color: #fff }
.cg-vault-fine { margin: auto 0 0; font-size: 11px; color: rgba(255, 255, 255, .42) }
.cg-start-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; font-size: 12.5px; opacity: .9 } .cg-start-safe svg { width: 14px; height: 14px }
@media (max-width: 1280px) and (min-width: 1001px) { .cg-vault-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .cg-vault { padding: 20px } .cg-vault-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* Pay as you use: the start price (accent card) beside Where your photos live, then 3 steps */
.cg-payg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px }
.cg-start { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #ffb199) 100%); box-shadow: 0 28px 56px -34px var(--accent) }
.cg-start::before { content: ""; position: absolute; right: -80px; top: -110px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .1); z-index: -1 }
.cg-start-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.cg-start-k svg { width: 16px; height: 16px }
.cg-start-price { display: flex; align-items: baseline; gap: 10px }
.cg-start-price b { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.cg-start-price span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12.5px; font-weight: 700 }
.cg-start-sub { margin: 0; font-size: 15px; opacity: .95 }
.cg-start-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .22); display: grid; gap: 9px; font-size: 13.5px }
.cg-start-list li { display: flex; align-items: center; gap: 9px }
.cg-start-list svg { width: 17px; height: 17px; flex: none; opacity: .9 }
.cg-start-ended { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-size: 13.5px; line-height: 1.45 }
.cg-start-ended svg { width: 18px; height: 18px; flex: none; margin-top: 1px }
.cg-start-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: #fff; color: var(--accent-deep); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); transition: transform .2s var(--ease) }
.cg-start-btn:hover { transform: translateY(-1px) }
.cg-start-btn svg { width: 18px; height: 18px }
.cg-flow { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.cg-flow li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface-2) }
.cg-flow i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-style: normal; font-weight: 700; font-size: 13px }
.cg-flow span { display: grid; gap: 2px; min-width: 0 }
.cg-flow b { font-size: 14px; color: var(--ink) }
.cg-flow small { font-size: 12.5px; line-height: 1.45; color: var(--muted) }
@media (max-width: 1000px) { .cg-payg-grid, .cg-flow { grid-template-columns: minmax(0, 1fr) } }

/* Lead Machine › stats: a toolbar, one strip of numbers, then source and funnel panels */
.lm-stats { padding: 0 }
.lm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px }
.lm-toolbar-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.lm-when { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted) }
.lm-when svg { width: 15px; height: 15px }
.lm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden }
.lm-kpi { display: grid; grid-template-rows: auto 1fr auto; align-items: start; gap: 8px; padding: 18px 18px 16px; min-width: 0 }
.lm-kpi + .lm-kpi { border-left: 1px solid var(--line) }
.lm-kpi.big { background: linear-gradient(180deg, var(--accent-tint), var(--paper) 80%) }
.lm-kpi-l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lm-kpi-l svg { width: 15px; height: 15px; flex: none; color: var(--accent-text) }
.lm-kpi:not(.big) .lm-kpi-l svg { color: var(--muted) }
.lm-kpi b { font-family: var(--display); font-size: 32px; line-height: 1.05; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums }
.lm-kpi small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lm-panels { margin-top: 16px; gap: 16px }
.lm-panel { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper) }
.lm-panel-head h4 { font-family: var(--display); font-size: 17px; letter-spacing: -.02em }
.lm-none { margin: auto 0; padding: 22px 0 10px; display: grid; justify-items: center; gap: 6px; text-align: center }
.lm-none-ic { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text) }
.lm-none-ic svg { width: 24px; height: 24px }
.lm-none b { font-size: 15px; color: var(--ink) }
.lm-none small { max-width: 300px; font-size: 13px; line-height: 1.5 }
.lm-none .btn { margin-top: 10px }
.lm-funnel { gap: 16px }
.lm-fstep-top { align-items: center; margin-bottom: 8px }
.lm-fstep-top small { width: auto; min-width: 46px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; text-align: center }
.lm-fbar { height: 10px }
.lm-fbar span { background: linear-gradient(90deg, var(--accent-deep), var(--accent)) }
.lm-fbar span.soft { background: linear-gradient(90deg, var(--accent-light), color-mix(in srgb, var(--accent) 45%, transparent)) }
@media (max-width: 1180px) { .lm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) } .lm-kpi:nth-child(4) { border-left: 0 } .lm-kpi:nth-child(n + 4) { border-top: 1px solid var(--line) } }
@media (max-width: 640px) { .lm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } .lm-kpi:nth-child(odd) { border-left: 0 } .lm-kpi:nth-child(4) { border-left: 1px solid var(--line) } .lm-kpi:nth-child(n + 3) { border-top: 1px solid var(--line) } .lm-kpi b { font-size: 28px } }
.lm-kpis { box-shadow: var(--shadow) }

/* Website › SEO: the form, the Google preview and the checklist */
.pw-seo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 16px; align-items: start }
.pw-seo-main { display: grid; gap: 12px; min-width: 0 }
.pw-seo-lock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px 12px 16px; border-radius: 16px; background: var(--accent-tint); border: 1px solid var(--accent-soft); font-size: 13.5px; color: var(--ink-2) }
.pw-seo-lock > svg { width: 17px; height: 17px; color: var(--accent-text); flex: none }
.pw-seo-lock span { flex: 1; min-width: 200px }
.pw-seo-lock b { color: var(--ink) }
.pw-seo-card { padding: 22px; border-radius: 20px }
.pw-seo-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums }
.pw-seo-n.ok { color: var(--ok) } .pw-seo-n.warn { color: var(--warn) }
.pw-seo-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px }
.pw-seo-img { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow: hidden; cursor: pointer; color: var(--muted); font: inherit }
.pw-seo-img span { position: absolute; inset: 0; background: center / cover no-repeat }
.pw-seo-img em { display: grid; place-items: center; gap: 2px; height: 100%; font-style: normal; font-size: 11.5px; font-weight: 600 }
.pw-seo-img em svg { width: 16px; height: 16px }
.pw-seo-img > svg { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--accent); color: #fff; opacity: 0; transition: opacity .2s }
.pw-seo-img.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.pw-seo-img.on > svg { opacity: 1 }
.pw-seo-img:disabled { cursor: default; opacity: .85 }
.pw-seo-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); cursor: pointer }
.pw-seo-sw b { display: block; font-size: 14px; color: var(--ink) }
.pw-seo-sw small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted) }
.pw-seo-acts { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line) }
.pw-seo-side { display: grid; gap: 12px; position: sticky; top: 96px }
.pw-seo-g { padding: 20px; border-radius: 20px }
.pw-seo-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.pw-seo-k svg { width: 14px; height: 14px }
.pw-seo-res { margin-top: 12px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #e3e5e8; font-family: Arial, Helvetica, sans-serif }
.pw-seo-site { display: flex; align-items: center; gap: 10px }
.pw-seo-site i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #f1f3f4; color: #202124; font-style: normal; font-size: 13px; font-weight: 700 }
.pw-seo-site b { display: block; font-size: 14px; font-weight: 400; color: #202124 }
.pw-seo-site small { display: block; font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pw-seo-res h4 { margin: 10px 0 4px; font-size: 19px; font-weight: 400; line-height: 1.3; color: #1a0dab; font-family: inherit; letter-spacing: 0 }
.pw-seo-res p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4d5156 }
.pw-seo-share { margin-top: 16px }
.pw-seo-card-pv { display: flex; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2) }
.pw-seo-card-pv > span { width: 96px; flex: none; background: var(--line) center / cover no-repeat }
.pw-seo-card-pv > div { min-width: 0; padding: 10px 12px; display: grid; gap: 2px }
.pw-seo-card-pv small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pw-seo-card-pv b { font-size: 13.5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pw-seo-check { padding: 20px; border-radius: 20px }
.pw-seo-score { display: flex; align-items: center; gap: 14px; margin-bottom: 14px }
.pw-seo-score b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink) }
.pw-seo-score small { font-size: 12.5px; color: var(--muted) }
.pw-seo-ring { --p: 0; --c: var(--accent); width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0) }
.pw-seo-ring.ok { --c: var(--ok) } .pw-seo-ring.warn { --c: var(--warn) } .pw-seo-ring.bad { --c: var(--accent) }
.pw-seo-ring b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); font-family: var(--display); font-size: 14px !important; color: var(--ink) }
.pw-seo-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.pw-seo-check li { display: flex; gap: 10px; align-items: flex-start }
.pw-seo-check li > svg { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--surface-2); color: var(--muted) }
.pw-seo-check li.ok > svg { background: var(--ok-bg); color: var(--ok) }
.pw-seo-check li b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink) }
.pw-seo-check li.ok b { font-weight: 500; color: var(--ink-2) }
.pw-seo-check li small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted) }
@media (max-width: 1100px) { .pw-seo { grid-template-columns: minmax(0, 1fr) } .pw-seo-side { position: static } }
.we-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); cursor: pointer }
.we-sw b { display: block; font-size: 14px; color: var(--ink) }
.we-sw small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted) }

/* Website › Designs: category chips, then big photo cards that sell the look */
.pw-dz-chips { margin: 0 0 18px; flex-wrap: wrap; gap: 8px }
.pw-dz-chips .chip { white-space: nowrap }
.pw-dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px }
.pw-dz { display: flex; flex-direction: column; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease) }
.pw-dz:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(22, 32, 46, .45) }
.pw-dz.on { border: 1.5px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow) }
.pw-dz-img { position: relative; display: block; aspect-ratio: 4 / 4.4; overflow: hidden; isolation: isolate; color: #fff }
.pw-dz-img > span:first-child { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .8s var(--ease) }
.pw-dz:hover .pw-dz-img > span:first-child { transform: scale(1.06) }
.pw-dz-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .78) 100%); z-index: 0 }
.pw-dz-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-style: normal }
.pw-dz-tag .badge { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5) }
.pw-dz-pv { position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -40%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-style: normal; font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .3s, transform .3s var(--ease) }
.pw-dz-pv svg { width: 17px; height: 17px }
.pw-dz:hover .pw-dz-pv, .pw-dz-img:focus-visible .pw-dz-pv { opacity: 1; transform: translate(-50%, -50%) }
.pw-dz-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 2px }
.pw-dz-cap b { font-family: var(--display); font-size: 26px; line-height: 1.1; letter-spacing: -.03em; text-shadow: 0 2px 12px rgba(0, 0, 0, .35) }
.pw-dz-cap small { font-size: 12.5px; font-weight: 600; opacity: .9 }
.pw-dz-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 16px 18px 18px }
.pw-dz-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted) }
.pw-dz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto }
.pw-dz-sw { display: inline-flex }
.pw-dz-sw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line-2) }
.pw-dz-sw i + i { margin-left: -7px }
.pw-dz[hidden] { display: none }
.we-cloud { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10.5px; font-weight: 700 }
.we-cloud svg { width: 11px; height: 11px }

/* Website › Plan & payments, on the plan: a membership card, what it includes, receipts */
.pw-mem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch }
.pw-mem-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 26px 28px; border-radius: 24px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, var(--accent-deep) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #ffb199) 100%); box-shadow: 0 30px 60px -34px var(--accent) }
.pw-mem-card::before { content: ""; position: absolute; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .12); z-index: -1 }
.pw-mem-card::after { content: ""; position: absolute; left: -60px; bottom: -120px; width: 240px; height: 240px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .07); z-index: -1 }
.pw-mem-card.soon { background: linear-gradient(140deg, #9a4b05, #d97706 60%, #f2b04b) }
.pw-mem-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.pw-mem-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .95 }
.pw-mem-k svg { width: 17px; height: 17px }
.pw-mem-st { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; backdrop-filter: blur(6px) }
.pw-mem-mid { display: flex; align-items: center; gap: 22px }
.pw-mem-mid > div:last-child { display: grid; gap: 3px }
.pw-mem-mid small { font-size: 12.5px; opacity: .85 }
.pw-mem-mid > div:last-child b { font-family: var(--display); font-size: 26px; letter-spacing: -.03em }
.pw-mem-ring { --p: 100; width: 112px; height: 112px; flex: none; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-deep) 85%, #000) 80%, transparent 81% 100%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0) }
.pw-mem-ring b { font-family: var(--display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums }
.pw-mem-ring small { font-size: 11px; opacity: .85; margin-top: 2px }
.pw-mem-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; color: var(--accent-deep); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45) }
.pw-mem-btn:hover { transform: translateY(-1px) }
.pw-mem-perks { padding: 24px 26px; border-radius: 24px }
.pw-mem-perks h3 { margin: 0 0 16px; font-family: var(--display); font-size: 19px; letter-spacing: -.02em }
.pw-mem-perks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px }
.pw-mem-perks li { display: flex; gap: 12px; align-items: flex-start; min-width: 0 }
.pw-mem-perks li > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text) }
.pw-mem-perks li > span svg { width: 18px; height: 18px }
.pw-mem-perks b { display: block; font-size: 14px; color: var(--ink); overflow-wrap: anywhere }
.pw-mem-perks small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted) }
.pw-rcpts { display: grid; gap: 10px }
.pw-rcpt { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
.pw-rcpt-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--ok-bg); color: var(--ok) }
.pw-rcpt-ic svg { width: 19px; height: 19px }
.pw-rcpt-main b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink) }
.pw-rcpt small { display: block; font-size: 12px; color: var(--muted) }
.pw-rcpt-col b { display: block; margin-top: 2px; font-size: 14px; color: var(--ink) }
.pw-rcpt-paid { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px dashed var(--ok); color: var(--ok); font-size: 12.5px; font-weight: 700; transform: rotate(-3deg) }
.pw-rcpt-paid svg { width: 14px; height: 14px }
@media (max-width: 1000px) { .pw-mem { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 760px) { .pw-mem-perks ul { grid-template-columns: minmax(0, 1fr) } .pw-rcpt { grid-template-columns: auto 1fr auto } .pw-rcpt-col { display: none } }

/* Edit website › Style */
.we-style { display: grid; gap: 18px }
.we-sty-row { display: grid; gap: 10px }
.we-sty-row > b, .we-sty-row .row b { font-size: 13.5px; color: var(--ink) }
.we-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2) }
.we-seg button { min-height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer }
.we-seg button.on { background: var(--paper); color: var(--accent-text); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .3) }
.we-range { width: 100%; accent-color: var(--accent) }
.we-corner-demo { display: flex; gap: 8px }
.we-corner-demo i { flex: 1; height: 44px; border-radius: var(--rd); background: var(--accent-soft); border: 1.5px solid var(--accent-light); transition: border-radius .2s }

/* Website templates: each card is a live, scaled-down view of the template's demo website */
.pw-dz-live { aspect-ratio: auto; display: block; padding: 0; background: var(--surface-2); color: inherit }
.pw-dz-live::after { display: none }
.pw-dz-bar { display: flex; gap: 5px; align-items: center; height: 24px; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--line) }
.pw-dz-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2) }
.pw-dz-bar i:nth-child(1) { background: #ff6159 } .pw-dz-bar i:nth-child(2) { background: #ffbd2e } .pw-dz-bar i:nth-child(3) { background: #28c941 }
.pw-dz-frame { --s: .22; position: relative; display: block; aspect-ratio: 1280 / 860; overflow: hidden; background: var(--surface-2) center / cover no-repeat }
.pw-dz-frame iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 860px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .5s }
.pw-dz-frame.on iframe { opacity: 1 }
.pw-dz-live .pw-dz-tag { top: 34px }
.pw-dz-live .pw-dz-pv { top: 55%; color: #fff; background: rgba(15, 18, 26, .55) }
.pw-dz:hover .pw-dz-live .pw-dz-frame { transform: none }
.pw-dz-name b { display: block; font-family: var(--display); font-size: 20px; letter-spacing: -.02em; color: var(--ink) }
.pw-dz-name small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.pw-dz-live > .pw-dz-bar { position: static; inset: auto; transform: none !important; background-image: none }

/* Digital Marketing: the subscription as a membership band */
.dm-mem { position: relative; display: flex; align-items: center; gap: 20px; margin-bottom: 18px; padding: 18px 22px; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #ffb199) 100%); box-shadow: 0 24px 50px -32px var(--accent) }
.dm-mem::before { content: ""; position: absolute; right: 120px; top: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .1); z-index: -1 }
.dm-mem.soon { background: linear-gradient(120deg, #9a4b05, #d97706 60%, #f2b04b) }
.dm-mem-ring { --p: 100; width: 74px; height: 74px; flex: none; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-deep) 85%, #000) 78%, transparent 79% 100%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0) }
.dm-mem.soon .dm-mem-ring { background: radial-gradient(closest-side, #7a3b04 78%, transparent 79% 100%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0) }
.dm-mem-ring b { font-family: var(--display); font-size: 24px; line-height: 1 }
.dm-mem-ring small { font-size: 10.5px; opacity: .85 }
.dm-mem-txt { flex: 1; min-width: 0; display: grid; gap: 3px }
.dm-mem-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.dm-mem-k svg { width: 16px; height: 16px }
.dm-mem-k i { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-style: normal; letter-spacing: .02em; text-transform: none }
.dm-mem-txt b { font-family: var(--display); font-size: 22px; letter-spacing: -.02em }
.dm-mem-txt small { font-size: 12.5px; opacity: .88 }
.dm-mem-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--accent-deep); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45) }
.dm-mem-btn:hover { transform: translateY(-1px) }
.dm-mem-acts { flex: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end }
.dm-mem-btn.up { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55) }
@media (max-width: 760px) { .dm-mem { flex-wrap: wrap } .dm-mem-acts { width: 100% } .dm-mem-btn { width: 100%; justify-content: center } }
.dm-mem.soon .dm-mem-btn { color: #9a4b05 }
/* Subscription, premium: the current plan as a membership card, add-ons with days left in a ring, plan cards */
.sub-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-bottom: 28px; padding: 30px 32px; border-radius: 24px; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-deep) 80%, #2a0610) 0%, transparent 60%), linear-gradient(125deg, var(--accent-deep) 0%, var(--accent) 58%, color-mix(in srgb, var(--accent) 70%, #ffb199) 100%); box-shadow: 0 34px 70px -40px var(--accent) }
.sub-hero::before { content: ""; position: absolute; right: -90px; top: -140px; width: 360px; height: 360px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, .07); z-index: -1 }
.sub-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); transform: translateX(-100%); animation: sub-shine 6s var(--ease) 1s infinite }
@keyframes sub-shine { 0%, 70% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce) { .sub-hero::after { animation: none; opacity: 0 } }
.sub-hero-main { display: grid; gap: 10px; min-width: 0 }
.sub-hero-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .95 }
.sub-hero-k svg { width: 17px; height: 17px; padding: 5px; box-sizing: content-box; border-radius: 10px; background: rgba(255, 255, 255, .18) }
.sub-hero h3 { margin: 0; font-family: var(--display); font-size: 38px; font-weight: 700; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance }
.sub-hero-tags { display: flex; flex-wrap: wrap; gap: 8px }
.sub-hero-tags span { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 700; backdrop-filter: blur(4px) }
.sub-hero-inc { display: grid; gap: 9px; margin: 0; padding: 18px 20px; list-style: none; border-radius: 18px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 600 }
.sub-hero-inc li { display: flex; align-items: center; gap: 10px }
.sub-hero-inc svg { width: 13px; height: 13px; flex: none; padding: 3px; border-radius: 50%; background: #fff; color: var(--accent-deep); stroke-width: 3 }
.sub-ring { --p: 100; width: 112px; height: 112px; flex: none; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-deep) 82%, #000) 80%, transparent 81% 100%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5) }
.sub-ring b { font-family: var(--display); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums }
.sub-ring small { font-size: 11px; opacity: .85 }
.addons-head, .sub-plans-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 4px 0 14px }
.sub-plans-head h3 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: -.03em }
.sub-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px }
.sub-addon { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 22px; background: linear-gradient(180deg, var(--accent-tint) 0%, var(--paper) 46%); border: 1px solid var(--line); box-shadow: var(--shadow-card, 0 1px 2px rgba(22, 32, 46, .04)); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s }
.sub-addon:hover { transform: translateY(-3px); border-color: var(--accent-light); box-shadow: 0 26px 48px -30px rgba(22, 32, 46, .35) }
.sub-addon.soon { background: linear-gradient(180deg, var(--warn-bg) 0%, var(--paper) 46%) }
.sub-addon.ended { background: var(--paper) }
.sub-addon-top { display: flex; align-items: flex-start; gap: 12px }
.sub-addon-top .grow { flex: 1; min-width: 0 }
.sub-addon-top b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: -.02em; color: var(--ink) }
.sub-addon-top small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted) }
.sub-addon-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent-deep), var(--accent)); box-shadow: 0 12px 24px -12px var(--accent) }
.sub-addon-ic svg { width: 21px; height: 21px }
.sub-addon.ended .sub-addon-ic { background: var(--surface-2); color: var(--muted); box-shadow: none }
.sub-addon-mid { display: flex; align-items: center; gap: 16px }
.sub-addon-ring { --p: 100; width: 70px; height: 70px; flex: none; display: grid; place-content: center; text-align: center; border-radius: 50%; color: var(--ink); background: radial-gradient(closest-side, var(--paper) 78%, transparent 79% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0) }
.sub-addon.soon .sub-addon-ring { background: radial-gradient(closest-side, var(--paper) 78%, transparent 79% 100%), conic-gradient(var(--warn) calc(var(--p) * 1%), var(--surface-2) 0) }
.sub-addon-ring b { font-family: var(--display); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums }
.sub-addon-ring small { font-size: 10.5px; color: var(--muted) }
.sub-addon-when { display: grid; gap: 1px; min-width: 0 }
.sub-addon-when span, .sub-addon-when small { font-size: 12.5px; color: var(--muted) }
.sub-addon-when b { font-family: var(--display); font-size: 21px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums }
.sub-addon-go { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 11px 16px; border-radius: 14px; background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s, color .2s }
.sub-addon-go svg { width: 17px; height: 17px; transition: transform .2s var(--ease) }
.sub-addon-go:hover { background: var(--accent-soft); color: var(--accent-text) }
.sub-addon-go:hover svg { transform: translateX(3px) }
.sub-addon-go.hot { background: var(--accent); color: #fff; box-shadow: var(--shadow-cta, 0 12px 24px -12px var(--accent)) }
.sub-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch }
.sub-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card, 0 1px 2px rgba(22, 32, 46, .04)); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s }
.sub-plan:hover { transform: translateY(-3px); border-color: var(--accent-light); box-shadow: 0 26px 48px -30px rgba(22, 32, 46, .35) }
.sub-plan.on { border: 1.5px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 50%); box-shadow: 0 0 0 4px var(--accent-tint), 0 24px 46px -30px var(--accent) }
.sub-plan-flag { position: absolute; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-deep), var(--accent)); color: #fff; font-size: 12px; font-weight: 700 }
.sub-plan-flag svg { width: 13px; height: 13px }
.sub-plan-flag.save { background: var(--ok-bg); color: var(--ok) }
.sub-plan-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text) }
.sub-plan h3 { margin: 0; padding-right: 96px; font-family: var(--display); font-size: 22px; letter-spacing: -.03em }
.sub-plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 8px }
.sub-plan-price b { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums }
.sub-plan-price s { font-size: 16px; color: var(--muted) }
.sub-plan-per { font-size: 13px; color: var(--muted) }
.sub-plan-inc { display: grid; gap: 10px; margin: 14px 0 20px; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2) }
.sub-plan-inc li { display: flex; align-items: center; gap: 10px }
.sub-plan-inc svg { width: 14px; height: 14px; flex: none; padding: 3px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); stroke-width: 3 }
.sub-plan-inc li.off { color: var(--muted) } .sub-plan-inc li.off svg { background: var(--surface-2); color: var(--muted) }
.sub-plan .btn { margin-top: auto }
@media (max-width: 1100px) { .sub-hero { grid-template-columns: minmax(0, 1fr) auto } .sub-hero-inc { grid-column: 1 / -1; grid-row: 2 } .sub-addons, .sub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .sub-addons, .sub-plans { grid-template-columns: 1fr } .sub-hero { grid-template-columns: 1fr; padding: 24px } .sub-hero h3 { font-size: 30px } .sub-ring { width: 92px; height: 92px; grid-row: 1 } .sub-hero-inc { grid-row: auto } }

/* Orders › Co-workers board: co-workers on the left, a column per imported event */
.field[hidden], .cw-imp[hidden] { display: none !important }
.cw-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px }
.cw-bar p { margin: 0; font-size: 13px; color: var(--muted); max-width: 640px }
/* Wraps into rows: scrolls only down, never sideways; each event shows in full (no inner scroll). */
.cw-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); overflow-x: visible }
.cw-board .ws-col-body { max-height: none; overflow: visible }
.cw-pool { position: sticky; left: 0; z-index: 3; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow) }
.cw-person { display: flex; align-items: center; gap: 10px; padding: 10px }
.cw-person b, .cw-chip b, .cw-person-row b { display: flex; align-items: center; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere }
.cw-person small, .cw-chip small, .cw-person-row small { display: block; font-size: 12px; color: var(--muted) }
.cw-load { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 700; white-space: nowrap }
.cw-load.free { background: var(--surface-2); color: var(--muted) }
.cw-tip { display: block; margin-top: 8px; font-size: 12px }
.cw-event .ws-col-body { gap: 12px }
/* A day inside an order's column: its name and date, services, own place, crew */
.cw-day { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--paper); border: 1px dashed transparent; transition: border-color .15s, background .15s }
.cw-day.cw-target { border-color: var(--line-2) }
.cw-day.over { border-color: var(--accent); background: var(--accent-tint) }
.cw-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }
.cw-day-head b { font-size: 13.5px; color: var(--ink) }
.cw-day-head span { font-size: 12px; color: var(--muted); white-space: nowrap }
.cw-svcs { display: flex; flex-wrap: wrap; gap: 4px }
.cw-svcs span { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600 }
.cw-own { padding: 6px 8px; border-radius: 10px; background: var(--warn-bg) }
.cw-day-crew { display: grid; gap: 8px }
.cw-day .ws-col-empty { margin: 0; padding: 12px 8px }
.cw-day .cw-chip { background: var(--surface-2); border-color: transparent }
.cw-day .cw-chip.clash { background: var(--warn-bg); border-color: var(--warn) }
.cw-od-days { display: grid; gap: 12px; margin-top: 18px }
.cw-od-day { padding: 14px; border: 1px solid var(--line); border-radius: 14px }
.cw-od-day > .cw-svcs { margin-top: 6px }
.cw-own-box { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2) }
/* Import: each day of a multi-day order, with its own place when it's somewhere else */
.cw-imp-day { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px }
.cw-imp-day.own { border-color: var(--accent) }
.cw-imp-day-head { display: flex; align-items: center; gap: 10px }
.cw-imp-day-head .grow { flex: 1; min-width: 0 }
.cw-imp-day-head b { display: block; font-size: 13.5px; color: var(--ink) }
.cw-imp-day-head small { display: block; font-size: 12px; color: var(--muted) }
.cw-imp-day-head .check { white-space: nowrap; font-size: 12.5px }
.cw-imp-day:not(.own) .cw-imp-day-body { display: none }
.cw-imp-day-body { margin-top: 12px }
.cw-head { display: grid; gap: 10px; padding: 14px 14px 10px }
.cw-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px }
.cw-title a { min-width: 0; color: inherit; text-decoration: none }
.cw-title a:hover b { color: var(--accent-text) }
.cw-title b { display: block; font-size: 15px; color: var(--ink); overflow-wrap: anywhere }
.cw-title small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted) }
.cw-tools { display: flex; flex: none; gap: 2px; margin: -4px -6px 0 0 }
.cw-tools .icon-btn { width: 32px; height: 32px }
.cw-meta { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted) }
.cw-meta span { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere }
.cw-meta .cw-loc { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; color: inherit; text-decoration: none }
.cw-meta .cw-loc:hover { color: var(--accent-text) }
.cw-loc b { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: 2px; color: var(--accent-text); font-weight: 700 }
.cw-loc b svg { width: 11px; height: 11px; margin-top: 0 }
[data-find-map] { display: inline-flex; align-items: center; gap: 4px }
[data-find-map] svg { width: 13px; height: 13px }
.cw-meta svg, .cw-going svg, .cw-clash svg { width: 13px; height: 13px; flex: none; margin-top: 2px }
.cw-going { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 700 }
.cw-going svg { margin-top: 0 }
.cw-going.none { background: var(--paper); color: var(--muted) }
.cw-chip { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line) }
/* A crew member's note on a day, and their buttons (note, WhatsApp, remove) */
.cw-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere }
.cw-note svg { width: 12px; height: 12px; flex: none; margin-top: 2px; color: var(--muted) }
.cw-chip-acts { display: flex; align-items: center; gap: 2px; flex: none }
.cw-chip-acts .icon-btn { width: 32px; height: 32px }
.cw-chip .grow, .cw-person .grow, .cw-person-row .grow, .cw-imp-head .grow, .cw-invite .grow { flex: 1; min-width: 0 }
.cw-chip.clash { border-color: var(--warn); background: var(--warn-bg) }
.cw-clash { display: flex; gap: 4px; margin-top: 4px; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--warn-text) }
.cw-add { width: 100%; min-height: 38px }
.cw-start { justify-content: center; min-width: 300px; padding: 10px }
/* Import orders sheet */
.cw-imp-list { display: grid; gap: 10px }
.cw-imp { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); transition: border-color .15s }
.cw-imp.on { border-color: var(--accent) }
.cw-imp-head { display: flex; align-items: center; gap: 12px; cursor: pointer }
.cw-imp-head input { width: 18px; height: 18px; accent-color: var(--accent); flex: none }
.cw-imp-head b { display: block; font-size: 14px; color: var(--ink) }
.cw-imp-head small { display: block; font-size: 12.5px; color: var(--muted) }
.cw-imp:not(.on) .cw-imp-body { display: none }
.cw-imp-head + .cw-imp-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.cw-contacts { display: grid; gap: 8px; margin-bottom: 8px }
.cw-contact-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center }
[data-add-contact] { display: inline-flex; align-items: center; gap: 4px }
[data-add-contact] svg { width: 14px; height: 14px }
[data-add-contact][hidden] { display: none }
/* Event details on an order page */
.cw-card { margin-bottom: 16px }
.cw-invite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.cw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.cw-k { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.cw-map { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px }
.cw-map svg { width: 13px; height: 13px }
.cw-people { display: grid; gap: 8px }
.cw-person-row { display: flex; align-items: center; gap: 6px; padding: 8px 6px 8px 12px; border-radius: 12px; background: var(--surface-2) }
.cw-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px }
@media (max-width: 700px) {
  /* Phones: no dragging, so events stack full width and each one's "+ Add co-worker…" does it. */
  .cw-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible }
  .cw-pool, .cw-event .ws-col-empty { display: none }
  .cw-start { min-width: 0 }
  .cw-grid { grid-template-columns: 1fr }
  .cw-contact-row { grid-template-columns: 1fr auto }
  .cw-contact-row [data-c="phone"] { grid-column: 1 }
  .cw-contact-row [data-del-contact] { grid-row: 1 / span 2; grid-column: 2 }
}

/* Leads card: a lead with several services lists them */
.lc-svc .lc-svcs { display: grid; gap: 3px }
.lc-svcs > span:not(.lc-svc-n) { display: block; padding-left: 12px; position: relative }
.lc-svcs > span:not(.lc-svc-n):not(.muted)::before { content: ''; position: absolute; left: 2px; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent) }
.lc-svcs > span.muted { font-weight: 600; font-size: 13px }
.lc-svc-n { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text) }

/* Co-workers board: "Add co-worker" on a day and its searchable picker */
.cw-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 38px; padding: 0 12px; border: 1px dashed var(--line-2); border-radius: 12px; background: none; color: var(--accent-text); font: 600 13px/1 inherit; cursor: pointer; transition: background .15s, border-color .15s }
.cw-add-btn:hover, .cw-add-btn:focus-visible { border-color: var(--accent); background: var(--accent-tint) }
.cw-add-btn svg { width: 15px; height: 15px }
.cw-none, .cw-all-in { margin: 0; font-size: 12.5px; color: var(--muted) }
.cw-pick { position: fixed; z-index: 1000; display: grid; max-height: min(380px, 70vh); grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 50px -18px rgba(22, 32, 46, .45); overflow: hidden; animation: accIn .15s ease }
.cw-pick-head { display: grid; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line) }
.cw-pick-head b { font-size: 13px; color: var(--ink) }
.cw-pick-q { position: relative }
.cw-pick-q svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted) }
.cw-pick-q .input { min-height: 40px; padding-left: 36px }
.cw-pick-list { overflow-y: auto; padding: 6px }
.cw-pick-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer }
.cw-pick-item:hover, .cw-pick-item.hi { background: var(--surface-2) }
.cw-pick-item .grow { flex: 1; min-width: 0 }
.cw-pick-item b { display: block; font-size: 13.5px; color: var(--ink) }
.cw-pick-item small { display: block; font-size: 12px; color: var(--muted) }
.cw-pick-free, .cw-pick-busy { flex: none; max-width: 45%; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cw-pick-free { background: var(--ok-bg); color: var(--ok) }
.cw-pick-busy { background: var(--warn-bg); color: var(--warn-text) }
.cw-pick-empty { margin: 10px; font-size: 13px; color: var(--muted) }

/* Expenses card: its kind and, for orders and bookings, Pending / Completed */
.ex-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: -4px }

/* Expenses: when the money was spent (All time / Today / This month / Custom) */
.ex-period button { min-height: 32px; padding: 0 12px; font-size: 13px }
.ex-range { display: inline-flex; align-items: center; gap: 6px }
.ex-range .input { width: 150px }

/* Every dropdown (core.js ddEnhance): the hidden <select> keeps the value, a button with its classes shows it,
   and the list opens over the page like the searchable dropdown (.ws-combo). */
.ws-dd-native { display: none !important }
.ws-dd-face { position: relative; display: flex; align-items: center; gap: 8px; padding-right: 38px; text-align: left; color: var(--ink); cursor: pointer; font: inherit }
.ws-dd-face.input { width: 100% }
.ws-dd-face[hidden] { display: none !important }
.ws-dd-face:disabled { cursor: default; opacity: .6 }
.ws-dd-face:focus-visible, .ws-dd-face.is-open { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none }
.ws-dd-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ws-dd-face.is-empty .ws-dd-val { color: var(--muted) }
.ws-dd-chev { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; transition: transform .2s }
.ws-dd-face.is-open .ws-dd-chev { transform: rotate(180deg) }
.ws-dd-face.ws-sm { padding-right: 34px }
.ws-dd-face.ws-sm .ws-dd-chev { right: 10px }
/* The select-only rules, for the button that now stands in for it. */
.ws-assign .ws-dd-face { width: auto; min-width: 220px; min-height: 40px; padding-top: 8px; padding-bottom: 8px }
.input-group > .ws-dd-face.input { flex: 0 0 152px }
.ws-dd-face.ws-stage-st { width: auto; font-weight: 600 }
.ws-dd-face.ws-stage-st[data-st="pending"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)) }
.ws-dd-face.ws-stage-st[data-st="completed"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)) }
.lm-emb-in .ws-dd-face.input { flex: 1; min-width: 0; min-height: 42px; padding-top: 8px; padding-bottom: 8px }
.ws-dd-face.input.ex-month { width: auto; flex: 0 0 auto; min-width: 190px; min-height: 44px; border-radius: 999px; padding-right: 36px }
.ws-dd-face.ws-src-pick, .ws-dd-face.lm-form-pick, .ws-dd-face.rv-svc { width: auto }
/* The list: over everything (sheets and modals too), below or above the button, wherever there's room. */
.ws-dd-pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); box-shadow: 0 18px 50px -18px rgba(22, 32, 46, .45); animation: accIn .12s ease }
.ws-dd-search { padding: 2px 2px 6px }
.ws-dd-search .input { min-height: 38px }
.ws-dd-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain }
.ws-dd-list .ws-combo-opt { justify-content: space-between }
.ws-dd-list .ws-combo-opt[aria-disabled="true"] { opacity: .45; cursor: default }
.ws-dd-tick { flex: none; width: 16px; height: 16px }
.ws-dd-group { display: block; padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
@media (max-width: 700px) { .ws-dd-face { font-size: 16px } }

/* Order › Add to this order: Extra charge / Another service tabs, tax in or on top, the total. */
.ws-xtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 14px; background: var(--surface-2) }
.ws-xtabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer }
.ws-xtabs button svg { width: 16px; height: 16px }
.ws-xtabs button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(18, 19, 26, .1) }
.ws-xtabs button:disabled { opacity: .5; cursor: not-allowed }
.ws-xseg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.ws-xseg button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer }
.ws-xseg button small { color: var(--muted); font-size: 12px }
.ws-xseg button.on { border-color: var(--accent); background: var(--accent-soft) }
.ws-xsum { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2) }
.ws-xsum span { color: var(--muted); font-size: 13px }
.ws-xsum b { font-size: 20px; text-align: right; font-variant-numeric: tabular-nums }
.ws-xsum small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px }
.ws-xsched { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer }
.ws-xsched input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent) }
.ws-xsched span { display: grid; gap: 2px } .ws-xsched small { color: var(--muted); font-size: 12.5px }

/* Gallery › Album picks from the client. */
.cg-album-new { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 700 }
.cg-album-new svg { width: 13px; height: 13px }
.cg-albums { padding: 16px 18px; margin-bottom: 16px; display: grid; gap: 12px }
.cg-albums-h { display: flex; gap: 12px; align-items: flex-start } .cg-albums-h > div { display: grid; gap: 2px }
.cg-album { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border-radius: 14px; background: var(--surface-2) }
.cg-album .grow { flex: 1; min-width: 160px; display: grid; gap: 2px }
.cg-album-cov { width: 64px; height: 64px; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 12px; overflow: hidden; background: var(--accent-soft) }
.cg-album-cov i { background: center / cover no-repeat } .cg-album-cov i:only-child { grid-column: 1 / -1; grid-row: 1 / 3 }
.cg-album-cov em { grid-column: 1 / -1; display: grid; place-items: center; color: var(--accent-text) }
.cg-album-acts { display: flex; gap: 6px; flex-wrap: wrap }
.cg-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px }
.cg-album-grid figure { position: relative; margin: 0; display: grid; gap: 4px }
.cg-album-grid img, .cg-album-grid em { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center }
.cg-album-grid span { position: absolute; left: 6px; top: 6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700 }
.cg-album-grid figcaption { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cg-album-note { flex-basis: 100%; padding: 0 4px }
.ws-terms { padding: 0 18px 16px; white-space: pre-line; font-size: 14px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere }
/* CRM › Contracts (contracts.js) */
.ct-row .grow, .ct-opt .grow { flex: 1; min-width: 0 }
.modal-foot .grow { flex: 1 }
.ct-list { padding: 0; overflow: hidden }
.ct-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit }
.ct-row:last-child { border-bottom: 0 }
.ct-row:hover { background: var(--accent-tint) }
.ct-row b, .ct-opt b { display: block; font-size: 15px }
.ct-row small, .ct-opt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px }
.ct-row > svg { width: 18px; height: 18px; color: var(--muted); flex: none }
.ct-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none }
.ct-ic svg { width: 19px; height: 19px }
.ct-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none }
.ct-meta small { color: var(--muted); font-size: 12px }
.ct-sec { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px }
.ct-pick { display: grid; gap: 8px }
.ct-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); text-align: left; color: var(--ink); font: inherit }
button.ct-opt { cursor: pointer }
button.ct-opt:hover { background: var(--accent-tint); border-color: var(--accent-light) }
.ct-opt.on { background: var(--accent-soft); border-color: var(--accent) }
.ct-opt > svg { width: 18px; height: 18px; color: var(--muted); flex: none }
.ct-amt { font-weight: 700; font-variant-numeric: tabular-nums }
.ct-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.ct-edit textarea { min-height: 440px; font-size: 14px; line-height: 1.6; resize: vertical }
.ct-preview { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; max-height: 440px; overflow: auto; background: var(--paper) }
@media (max-width: 960px) { .ct-edit { grid-template-columns: 1fr } .ct-preview { display: none } }
.ct-doc h3 { font-family: var(--display, 'Bricolage Grotesque'), sans-serif; font-size: 16px; margin: 18px 0 6px; letter-spacing: -.01em }
.ct-doc h3:first-child { margin-top: 0; font-size: 19px }
.ct-doc p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.65 }
.ct-doc ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.65 }
.ct-pad { position: relative; border: 1.5px dashed var(--line-2); border-radius: 14px; background: #fff; touch-action: none }
.ct-pad canvas { display: block; width: 100%; height: 200px; border-radius: 14px; cursor: crosshair }
.ct-pad-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #6b7080; font-size: 13px; pointer-events: none }
.ct-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px }
@media (max-width: 760px) { .ct-signs { grid-template-columns: 1fr } }
.ct-sign { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--paper) }
.ct-sign img { display: block; height: 70px; max-width: 100%; object-fit: contain; margin: 8px 0; background: #fff; border-radius: 8px }
.ct-sign-empty { height: 70px; margin: 8px 0 }
.ct-sign b { display: block }
.ct-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.ct-fields .chip { min-height: 30px; padding: 0 10px; font-size: 12.5px }
.ct-fields .chip svg { width: 14px; height: 14px }
.ct-saved { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; background: var(--paper) }
.ct-saved img { height: 64px; width: 200px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line) }
.ct-saved-meta { flex: 1; min-width: 0 }
.ct-saved-meta b, .ct-saved-meta small { display: block }
.ct-keep { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2) }
.ct-keep input { width: 18px; height: 18px; accent-color: var(--accent) }
@media (max-width: 760px) { .ct-saved { flex-wrap: wrap } .ct-saved img { width: 100% } }

/* "+ New" menu (core.js P.newMenu): create anything, grouped like the sidebar */
.nm-pop { position: fixed; z-index: 70; width: 300px; max-height: calc(100vh - 120px); overflow: auto; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop, 0 30px 80px -20px rgba(0, 0, 0, .45)); animation: wsMenuIn .14s ease }
.nm-group + .nm-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px }
.nm-group p { margin: 6px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.nm-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer }
.nm-pop button:hover, .nm-pop button:focus-visible { background: var(--accent-tint); outline: none }
.nm-pop button > svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text) }
.nm-pop b { display: block; font-size: 14px }
.nm-pop small { display: block; font-size: 12px; color: var(--muted) }
.qa-btn .qa-new { padding: 2px 8px; border-radius: 999px; background: var(--accent, #fe545a); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4 }

/* Money › GST report (gst.js) */
.gst-note { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.gst-note > svg { width: 20px; height: 20px; flex: none }
.gst-note span { flex: 1; min-width: 0 }
.gst-card { padding: 22px }
.gst-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.gst-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px }
@media (max-width: 1100px) { .gst-stats { grid-template-columns: 1fr 1fr } }
.gst-stats .stat { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper) }
.gst-stats .stat > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none }
.gst-stats .stat > i svg { width: 19px; height: 19px }
.gst-stats small { display: block; color: var(--muted); font-size: 12.5px }
.gst-stats b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 }
.gst-stats .muted.small { display: block; font-size: 12px }
.gst-aud { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 18px 22px }
.gst-aud .grow { flex: 1; min-width: 0 }
.gst-aud b, .gst-aud small { display: block }

/* New lead › Don't notify my client */
.ws-mute { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-input, 14px); cursor: pointer; margin-top: 4px }
.ws-mute b { display: block; font-size: 14px; color: var(--ink) }
.ws-mute small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.45 }
.ws-mute:hover { background: var(--hover) }
.wz-qp-custom { padding: 16px }
.wz-qp-custom .wz-inc { margin-top: 12px }
/* Expenses: what's still to pay under the amount */
.ex-due { display: block; font-size: 12px; font-weight: 600; color: var(--warn); text-align: right }

/* CRM › Work › Planner */
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1100px) { .pl-grid { grid-template-columns: 1fr } }
.pl-row { align-items: center }
.pl-row.is-done .title { color: var(--muted); text-decoration: line-through }
.pl-check { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--paper); display: grid; place-items: center; color: #fff; cursor: pointer; padding: 0 }
.pl-check svg { width: 15px; height: 15px }
.pl-check:hover { border-color: var(--accent) }
.pl-check.on { background: var(--ok); border-color: var(--ok) }
.pl-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.pl-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line) }
/* New lead › Services: My services / Custom service tabs, a custom service's dates */
.wz-qp-tabs { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.wz-tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent-deep)); font-size: 12px; font-weight: 700 }
.chip.active .wz-tab-n { background: rgba(255, 255, 255, .18); color: inherit }
.wz-qc-when { margin: 12px 0 0 }
.wz-qc-day { gap: 12px; align-items: flex-end; margin-top: 10px }
.wz-qc-day .icon-btn { margin-bottom: 4px }
.wz-qc-day .field { flex: 1 1 0; min-width: 0 }
/* Edit contract: type in the formatted view; the plain text follows */
.ct-live { min-height: 440px; max-height: 560px; outline: none; cursor: text }
.ct-live:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.ct-src { display: flex; flex-direction: column; gap: 7px }
.ct-src textarea { flex: 1 }
.ct-tools { gap: 6px }
.ct-tools .chip { height: 32px; padding: 0 12px; font-size: 13px }
@media (max-width: 960px) { .ct-edit .ct-preview.ct-live { display: block } .ct-src { display: none } }
.wz-qc-when [data-qc-dayadd] { display: block; align-self: flex-start; margin: 10px 0 0; text-align: left }

/* Account › Menu builder */
.mb-plan { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 22px }
.mb-plan b { display: block; font-family: var(--display, 'Bricolage Grotesque'), sans-serif; font-size: 18px; letter-spacing: -.02em; margin: 4px 0 2px }
.mb-plan.on { border-color: var(--ok); background: var(--ok-bg) }
.mb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start }
@media (max-width: 1100px) { .mb-wrap { grid-template-columns: 1fr } }
.mb-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer }
.mb-toggle b { display: block; font-size: 14.5px }
.mb-toggle small { display: block; margin-top: 2px }
.mb-sec { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-bottom: 12px; background: var(--paper) }
.mb-sec-h { display: flex; gap: 8px; align-items: center; margin-bottom: 8px }
.mb-sec-h .input { font-weight: 700 }
.mb-sec-h .icon-btn[data-mb^="sec-up"] svg, .mb-item .icon-btn[data-mb="up"] svg { transform: rotate(90deg) }
.mb-sec-h .icon-btn[data-mb^="sec-down"] svg, .mb-item .icon-btn[data-mb="down"] svg { transform: rotate(90deg) }
.mb-item { display: grid; grid-template-columns: 60px 36px minmax(0, 1fr) 170px 36px 36px 52px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line) }
.mb-item .input { height: 40px }
.mb-item.is-off .mb-ic, .mb-item.is-off .input { opacity: .45 }
.mb-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2) }
.mb-ic svg { width: 18px; height: 18px }
.mb-show { display: flex; justify-content: flex-end }
.mb-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); gap: 10px }
.mb-side { position: sticky; top: 96px; padding: 18px }
.mb-prev-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; font-size: 13px; font-weight: 600; text-align: center }
.mb-prev-sw span { padding: 6px; border-radius: 9px; color: var(--muted) }
.mb-prev-sw span.on { background: var(--paper); color: var(--ink) }
.mb-prev-g { font-weight: 700; font-size: 13.5px; margin: 12px 0 4px; color: var(--ink) }
.mb-prev-i { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13.5px; color: var(--ink-2) }
.mb-prev-i svg { width: 16px; height: 16px; opacity: .75 }
@media (max-width: 760px) { .mb-item { grid-template-columns: 56px 36px minmax(0, 1fr) 52px } .mb-item select, .mb-item .icon-btn { display: none } }
/* Menu builder › plain menu: section titles as headings, every page in view */
.nav-sec.plain > .nav-group { cursor: default; height: auto; padding: 12px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.nav-sec.plain > .nav-group:hover { background: none }

/* Menu builder: order number boxes */
.mb-pos { width: 60px; flex: none; text-align: center; padding: 0 6px; font-variant-numeric: tabular-nums; font-weight: 700 }
.mb-pos::-webkit-inner-spin-button { opacity: 1 }
/* Menu builder 7.3.71: named menus, Pages to drag from, drop zones */
.mb-menus { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.mb-menus .mb-new { border-style: dashed }
.mb-menu-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap }
.mb-menu-h b { display: block; font-size: 16px }
.mb-menu-h small { display: block; margin-top: 2px }
.mb-name { flex: 1; min-width: 200px; font-weight: 700; font-size: 16px }
.mb-toggle + .mb-toggle { margin-top: 12px }
.mb-edit .mb-wrap { grid-template-columns: minmax(0, 1fr) 300px }
.mb-edit .mb-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; padding: 0 }
.mb-item { grid-template-columns: 18px 60px 36px minmax(0, 1fr) 36px; cursor: grab }
.mb-grip { color: var(--muted); font-size: 13px; letter-spacing: -2px; user-select: none }
.mb-drop { border-radius: 12px; transition: background .15s, box-shadow .15s; min-height: 44px }
.mb-drop.is-over { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent-soft) }
.mb-hint { margin: 8px 4px; padding: 10px; border: 1px dashed var(--line-2); border-radius: 10px; text-align: center }
.mb-empty { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 28px 18px; margin-bottom: 10px; border: 1.5px dashed var(--line-2) }
.mb-pages { border: 1px solid var(--line); padding: 14px; background: var(--paper); max-height: 460px; overflow: auto }
.mb-page { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; cursor: grab; font-size: 14px; font-weight: 600; color: var(--ink-2) }
.mb-page:hover { background: var(--hover) }
.mb-page .icon-btn { width: 32px; height: 32px }
.is-dragging { opacity: .45 }
.mb-prev { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--paper) }
.mb-default { max-width: 360px }
@media (max-width: 1100px) { .mb-edit .mb-wrap { grid-template-columns: 1fr } .mb-edit .mb-side { position: static } }
@media (max-width: 760px) { .mb-item { grid-template-columns: 18px 56px minmax(0, 1fr) 36px } .mb-item .mb-ic { display: none } }

/* ---------- CRM Home › Customise (workspace.js customDashboard / dashCustomise, 7.3.77) ---------- */
.dash-cust-btn .qa-new { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4 }
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; align-items: stretch; margin-bottom: 28px }
.dash-cell { min-width: 0; display: flex; flex-direction: column }
.dash-cell > * { flex: 1 1 auto }
.dash-cell > .stat { height: 100% }
.dash-s { grid-column: span 1 }
.dash-m { grid-column: span 2 }
.dash-l { grid-column: 1 / -1 }
.dash-rows-2 { grid-row: span 2 }
.dash-rows-3 { grid-row: span 3 }
.dash-cell .banner-card { height: 100%; min-height: 220px }
.dash-grid.is-preview .dash-cell { animation: dashIn .28s var(--ease, ease) }
@keyframes dashIn { from { opacity: .4; transform: translateY(4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .dash-grid.is-preview .dash-cell { animation: none } }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .dash-rows-2, .dash-rows-3 { grid-row: auto } }
@media (max-width: 760px) { .dash-grid { grid-template-columns: minmax(0, 1fr) } .dash-s, .dash-m { grid-column: 1 / -1 } }
.dash-pad { padding: 4px 14px 14px }
.dash-rank { font-weight: 700; font-variant-numeric: tabular-nums }

/* Charts: plain bars */
.dash-chart { display: flex; flex-direction: column }
.dash-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted) }
.dash-legend span { display: inline-flex; align-items: center; gap: 6px }
.dash-legend i { width: 10px; height: 10px; border-radius: 3px }
.dash-legend .b, .dash-bar-pair .b { background: var(--accent-light, #fea1a4) }
.dash-legend .c, .dash-bar-pair .c { background: var(--accent) }
.dash-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 190px; align-items: end }
.dash-bar-col { display: grid; grid-template-rows: 1fr auto auto; gap: 6px; height: 100%; text-align: center; min-width: 0 }
.dash-bar-pair { display: flex; justify-content: center; align-items: flex-end; gap: 4px; min-height: 120px; border-bottom: 1px solid var(--line) }
.dash-bar-pair span { width: min(22px, 40%); border-radius: 6px 6px 0 0; transition: height .4s var(--ease, ease) }
.dash-bar-col small { color: var(--muted); font-size: 12.5px }
.dash-bar-col b { font-size: 12.5px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dash-hbars { display: grid; gap: 12px }
.dash-hbar { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 13.5px }
.dash-hbar > span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dash-hbar > div { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden }
.dash-hbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent) }
.dash-hbar i.t-ok { background: var(--ok) } .dash-hbar i.t-warn { background: var(--warn) } .dash-hbar i.t-info { background: var(--info) } .dash-hbar i.t-bad { background: var(--bad) }
.dash-hbar b { text-align: right; font-variant-numeric: tabular-nums }
.dash-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px }
.dash-links a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--r, 16px); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s, border-color .2s }
.dash-links a:hover { background: var(--accent-tint); border-color: var(--accent-soft) }
.dash-links i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent) }

/* The Customise drawer */
.modal-back.dash-ed-back { background: rgba(15, 10, 16, .14) }
.dash-ed-sheet { width: min(600px, 100vw) }
.dash-h { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 }
.dash-h .count { padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent-deep)); font-size: 12px }
.dash-on { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.dash-on-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid var(--line-2, var(--line)); border-radius: 14px; background: var(--paper); cursor: grab }
.dash-on-row.dragging { opacity: .45 }
.dash-on-row.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.dash-on-row .grow { flex: 1 1 auto; min-width: 0 }
.dash-on-row b { display: block; font-size: 14.5px }
.dash-on-row small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dash-on-row .icon-btn { width: 34px; height: 34px }
.dash-on-row .icon-btn:disabled { opacity: .35; cursor: default }
.dash-grip { color: var(--muted); display: grid; place-items: center }
.dash-up { display: inline-grid; transform: rotate(180deg) }
.dash-size { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); flex: none }
.dash-size button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 5px 11px; border-radius: 999px; cursor: pointer }
.dash-size button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(18, 19, 26, .12) }
.dash-size-one { font-size: 12.5px; color: var(--muted); padding: 0 8px; flex: none }
.dash-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.dash-add-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px dashed var(--line-2, var(--line)); border-radius: 14px; background: none; font: inherit; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s }
.dash-add-item:hover { background: var(--accent-tint); border-color: var(--accent) }
.dash-add-item .grow { min-width: 0 }
.dash-add-item b { display: block; font-size: 14px }
.dash-add-item small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px }
.dash-add-item svg { color: var(--accent); flex: none }
@media (max-width: 760px) { .dash-add { grid-template-columns: minmax(0, 1fr) } .dash-on-row small { display: none } }

/* Enjoying Wedza? rate the partner app (home.js P.rateCard) */
.rate-card { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper) }
.rate-card > i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) }
.rate-card > i svg { width: 19px; height: 19px }
.rate-card > div:first-of-type { flex: 1; min-width: 0 }
.rate-card b { display: block; font-size: 14.5px; color: var(--ink) }
.rate-card span { font-size: 13px; color: var(--muted) }
.rate-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.rate-later { border: 0; background: none; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer }
.rate-later:hover { color: var(--ink) }
@media (max-width: 760px) { .rate-card { flex-wrap: wrap } .rate-act { width: 100% } }
/* Customise as an on-page editor (7.3.79): the bar, each widget's tools, Add widget tile, saved card */
.dash-editbar { position: sticky; top: 86px; z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 16px 14px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--accent-light, #fea1a4); box-shadow: var(--shadow-pop, 0 12px 30px rgba(18, 19, 26, .12)) }
.dash-editbar .grow { min-width: 220px }
.dash-editbar b { display: block; font-family: var(--display, 'Bricolage Grotesque'), sans-serif; font-size: 17px; letter-spacing: -.02em }
.dash-editbar small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px }
.dash-grid.is-edit .dash-cell { position: relative; border-radius: 22px; outline: 2px dashed var(--line-2, rgba(18, 19, 26, .14)); outline-offset: 4px; cursor: grab; padding-top: 0 }
.dash-grid.is-edit .dash-cell:hover { outline-color: var(--accent) }
.dash-grid.is-edit .dash-cell.dragging { opacity: .4 }
.dash-grid.is-edit .dash-cell.over { outline: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-soft) }
.dash-grid.is-edit .dash-body { pointer-events: none; user-select: none }
.dash-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0 }
.dash-body > * { flex: 1 1 auto }
.dash-body > .stat { height: 100% }
.dash-tools { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px; font-size: 12.5px; color: var(--ink-2) }
.dash-tools > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 }
.dash-tools .dash-grip { cursor: grab }
.dash-tools .dash-size button { padding: 3px 9px; font-size: 12px }
.dash-x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-2, var(--line)); background: var(--paper); color: var(--ink-2); cursor: pointer; flex: none }
.dash-x:hover { color: var(--bad); border-color: var(--bad) }
.dash-x svg { width: 15px; height: 15px }
.dash-add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; border: 2px dashed var(--accent-light, #fea1a4); border-radius: 22px; background: var(--accent-tint); color: var(--accent-text, var(--accent-deep)); font: inherit; cursor: pointer }
.dash-add-tile:hover { border-color: var(--accent) }
.dash-add-tile small { color: var(--muted); font-size: 12.5px }
.dash-ph { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--muted); min-height: 120px }
.dash-ph b { color: var(--ink) }
.dash-saved { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 16px 20px; border-color: var(--accent-light, #fea1a4); background: var(--accent-tint) }
.dash-saved b { display: block; font-size: 15.5px }
.dash-saved-x { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer }
.dash-saved-x:hover { background: var(--accent-soft); color: var(--accent-text) }
.dash-saved-x svg { width: 18px; height: 18px }
.dash-saved-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none }
@media (max-width: 760px) { .dash-editbar { top: 70px } .dash-editbar .btn { flex: 1 1 auto } }
.dash-cell > .dash-tools { flex: none }
/* Gallery folders (gallery.js wireFolders, 7.3.82) */
.cg-folders { margin: 0 0 16px }
.cg-folders-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px }
.cg-folders-head b { display: block; font-size: 15.5px }
.cg-folders-head small { display: block; font-size: 13px }
.cg-fold-chips { flex-wrap: wrap }
.cg-fold-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.cg-drop-to { display: block; font-size: 13.5px; color: var(--ink-2); margin: 2px 0 4px }
.cg-drop-to:empty { display: none }
.cg-move { display: grid; gap: 8px }
.cg-move-to { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2, var(--line)); border-radius: 14px; background: var(--paper); font: inherit; color: var(--ink); cursor: pointer; text-align: left }
.cg-move-to:hover { background: var(--accent-tint); border-color: var(--accent) }
.cg-move-to svg { color: var(--accent) }

/* Crew board, cleaner (2026-10-31): each event one white card, days split by lines, compact crew rows,
   a short "Also on #ORD" pill, row actions on hover, and Add crew as a small link. */
.cw-board .cw-event { background: var(--paper); border: 1px solid var(--line); border-style: solid; box-shadow: var(--shadow) }
.cw-board .cw-event .ws-col-body { gap: 0; padding: 0 16px 8px }
.cw-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--line) }
.cw-title { align-items: center }
.cw-title > a { flex: 1 }
.cw-title .ws-date-tile { width: 44px; height: 44px }
.cw-going.need { background: var(--warn-bg); color: var(--warn) }
.cw-board .cw-day { padding: 12px 0; border: 0; border-radius: 0; background: none; gap: 6px }
.cw-board .cw-day + .cw-day { border-top: 1px solid var(--line) }
.cw-day-svcs { margin: 0; font-size: 12px; color: var(--muted) }
.cw-day .cw-chip, .cw-day .cw-chip.clash { background: none; border: 0; padding: 4px 0; border-radius: 10px }
.cw-role { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted) }
.cw-clash { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 700; cursor: help }
.cw-clash svg { margin-top: 0 }
.cw-none { display: flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600 }
.cw-none svg { width: 13px; height: 13px }
.cw-add-btn { width: auto; min-height: 0; justify-content: flex-start; padding: 4px 0; border: 0; border-radius: 0; background: none }
.cw-add-btn:hover, .cw-add-btn:focus-visible { background: none; text-decoration: underline }
@media (hover: hover) {
  .cw-day .cw-chip-acts { opacity: 0; transition: opacity .15s }
  .cw-day .cw-chip:hover .cw-chip-acts, .cw-day .cw-chip:focus-within .cw-chip-acts { opacity: 1 }
}

/* Crew board preview cards: each day and who's going; editing is in the Manage crew drawer. */
.cw-board .cw-event .ws-col-body { padding: 4px 16px 4px }
.cw-prow { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-radius: 0; background: none; text-align: left; font: inherit; cursor: pointer }
.cw-prow + .cw-prow { border-top: 1px solid var(--line) }
.cw-prow:hover .cw-prow-day b { color: var(--accent-text) }
.cw-prow-day { display: grid; gap: 2px; flex: 0 0 112px }
.cw-prow-day b { font-size: 13.5px; color: var(--ink) }
.cw-prow-day small { font-size: 12px; color: var(--muted) }
.cw-prow-who { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 }
.cw-pchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink) }
.cw-pchip .avatar { font-size: 10px }
.cw-foot { padding: 4px 16px 16px }
.cw-drawer .cw-od-day { background: var(--paper) }

/* Crew board as a list (user, 2026-10-31): one event per full-width row. Event on the left, its days
   and crew in the middle, Manage crew on the right; stacked on narrow screens. */
.cw-board { display: grid; grid-template-columns: 1fr; gap: 12px }
.cw-board .cw-event { display: grid; grid-template-columns: minmax(260px, 34%) minmax(0, 1fr) auto; align-items: stretch; min-height: 0 }
.cw-board .cw-event .cw-head { border-bottom: 0; border-right: 1px solid var(--line); padding: 16px 20px }
.cw-board .cw-event .ws-col-body { padding: 4px 20px; align-self: center; max-height: none }
.cw-board .cw-foot { align-self: center; padding: 16px 20px 16px 0 }
.cw-board .cw-start { grid-column: 1 / -1 }
@media (max-width: 960px) {
  .cw-board .cw-event { grid-template-columns: 1fr }
  .cw-board .cw-event .cw-head { border-right: 0; border-bottom: 1px solid var(--line) }
  .cw-board .cw-foot { padding: 4px 20px 16px }
}

/* A day's crew in the Manage crew drawer and on the order page: one person per full-width row,
   lines between, no boxes (the 220px tiles squeezed names letter by letter). */
.cw-chip b { display: block; overflow-wrap: normal }
.cw-od-day .cw-crew { grid-template-columns: 1fr; gap: 0 }
.cw-od-day .cw-chip, .cw-od-day .cw-chip.clash { background: none; border: 0; border-radius: 0; padding: 10px 0 }
.cw-od-day .cw-chip + .cw-chip { border-top: 1px solid var(--line) }
.cw-od-day .cw-chip .avatar { flex: none }
.cw-od-day { padding: 16px 20px }
.cw-od-day .cw-k { margin: 14px 0 4px !important }
.cw-add-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--muted) }

/* Crew board in the Partner app's layout (user, 2026-10-31): one card top to bottom in a full-width list -
   date tile and event, then place with the status on the right, a line, then each day with its crew
   (initial, name · role), lines between days, Manage crew at the bottom. */
.cw-board .cw-event { display: block }
.cw-board .cw-event .cw-head { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 24px 16px; gap: 16px }
.cw-metarow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.cw-metarow .cw-meta { display: flex; flex-wrap: wrap; gap: 6px 20px }
.cw-metarow .cw-going { justify-self: auto; flex: none }
.cw-board .cw-event .ws-col-body { padding: 4px 24px }
.cw-board .cw-foot { padding: 8px 24px 20px }
.cw-prow { padding: 16px 0; align-items: center }
.cw-prow-day { flex-basis: 160px }
.cw-prow-day b { font-size: 14px }
.cw-pchip { padding: 3px 12px 3px 3px; gap: 8px }
.cw-pchip b { font-weight: 600 }
.cw-pchip span { color: var(--muted); font-weight: 500 }
@media (max-width: 960px) { .cw-board .cw-foot { padding: 8px 24px 20px } }


/* Header search as a popup (7.4.25): the search icon or ⌘K opens it; Esc or a click outside closes it */
html.tb-lock, html.tb-lock body { overflow: hidden }
.tb-open { flex: none }
.tb-pop { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: var(--scrim, rgba(15, 10, 16, .4)) }
.tb-pop[hidden] { display: none }
.tb-pop .tb-search { flex: 0 1 640px; width: 100%; max-width: 640px; height: 56px; box-shadow: var(--shadow-pop, 0 30px 80px -20px rgba(0, 0, 0, .45)) }
.tb-pop .tb-search input { font-size: 16px }
.tb-pop .tb-results { max-height: min(460px, 62vh) }
.tb-pricing.active { border-color: var(--accent); color: var(--accent-text) }
/* Pricing & add-ons drawer (7.4.26): plan hero + add-on grid, Buy and Explore on each */
.pz { display: grid; gap: 18px }
.pz-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: end; padding: 24px 26px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--accent-deep, #dd444c), var(--accent, #fe545a) 60%, var(--accent-light, #fea1a4)); box-shadow: 0 24px 50px -26px var(--accent-glow, rgba(254, 84, 90, .55)) }
.pz-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none }
.pz-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .92 }
.pz-kicker svg { width: 15px; height: 15px }
.pz-hero-price { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 4px }
.pz-hero-price b { font-family: var(--display, inherit); font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1 }
.pz-hero-price span { font-size: 15px; opacity: .9 }
.pz-hero p { margin: 0 0 12px; font-size: 14px; opacity: .92; max-width: 460px }
.pz-ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600 }
.pz-ticks li { display: inline-flex; align-items: center; gap: 6px }
.pz-ticks svg { width: 14px; height: 14px }
.pz-hero-acts { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: end; text-align: right }
.pz-hero-buy { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--accent-deep, #dd444c); font-weight: 700; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .4) }
.pz-hero-buy:hover { transform: translateY(-1px) }
.pz-hero-acts small { font-size: 11.5px; opacity: .85; max-width: 200px }
.pz-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.pz-h h3 { margin: 0; font-family: var(--display, inherit); font-size: 19px; letter-spacing: -.02em }
.pz-h span { font-size: 13px; color: var(--muted) }
.pz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.pz-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); transition: border-color .2s, box-shadow .2s, transform .2s }
.pz-card:hover { border-color: var(--accent-light, #fea1a4); box-shadow: var(--shadow-card, 0 10px 30px -18px rgba(22, 32, 46, .25)); transform: translateY(-1px) }
.pz-card-top { display: flex; align-items: center; gap: 12px }
.pz-card-top b { display: block; font-size: 15px }
.pz-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent) }
.pz-ic svg { width: 19px; height: 19px }
.pz-price { display: block; margin-top: 1px; font-size: 13.5px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums }
.pz-card p { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.pz-acts { display: flex; gap: 8px }
.pz-acts .btn { display: inline-flex; align-items: center; gap: 6px }
.pz-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted) }
.pz-foot svg { width: 14px; height: 14px }
@media (max-width: 760px) { .pz-grid { grid-template-columns: 1fr } .pz-hero { grid-template-columns: 1fr } .pz-hero-acts { justify-items: start; text-align: left } }

/* Search in the sidebar, under the CRM / Partner switch (7.4.26): opens the search popup */
.side-search { display: flex; align-items: center; gap: 10px; flex: none; width: 100%; height: 42px; margin: 0 0 8px; padding: 0 10px 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s }
.side-search:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--ink) }
.side-search > svg { flex: none; width: 17px; height: 17px }
.side-search span { flex: 1 }
.side-search kbd { flex: none; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-2); font: 600 11.5px/1.2 inherit; color: var(--muted) }
@media (hover: none) and (pointer: coarse) { .side-search kbd { display: none } }

/* Search box in the top bar (7.4.29): the sidebar box's look, a fixed width */
.topbar .tb-trigger { flex: 0 1 300px; width: auto; min-width: 0; margin: 0 }
@media (max-width: 640px) { .topbar .tb-trigger { flex: 0 0 42px; padding: 0; justify-content: center } .topbar .tb-trigger span, .topbar .tb-trigger kbd { display: none } }

/* Free trial welcome (7.4.30): popup + confetti, once */
.tw-pop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: var(--scrim, rgba(15, 10, 16, .45)); opacity: 0; transition: opacity .3s var(--ease, ease) }
.tw-pop.in { opacity: 1 } .tw-pop.out { opacity: 0 }
.tw-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2 }
.tw-card { position: relative; z-index: 1; width: min(460px, 100%); padding: 34px 30px 26px; border-radius: 26px; background: var(--paper); text-align: center; box-shadow: var(--shadow-pop, 0 30px 80px -20px rgba(0, 0, 0, .45)); transform: translateY(18px) scale(.96); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1) }
.tw-pop.in .tw-card { transform: none }
.tw-badge { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent-deep, #dd444c), var(--accent, #fe545a) 60%, var(--accent-light, #fea1a4)); box-shadow: 0 14px 30px -12px var(--accent-glow, rgba(254, 84, 90, .6)) }
.tw-badge svg { width: 30px; height: 30px }
.tw-kicker { margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text) }
.tw-card h2 { margin: 0 0 10px; font-family: var(--display, inherit); font-size: 28px; line-height: 1.15; letter-spacing: -.03em }
.tw-card h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--accent) }
.tw-sub { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted) }
.tw-ticks { display: grid; gap: 8px; margin: 0 auto 20px; padding: 0; list-style: none; text-align: left; max-width: 300px; font-size: 14px; font-weight: 600 }
.tw-ticks li { display: flex; align-items: center; gap: 9px }
.tw-ticks svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d) }
.tw-go { width: 100%; justify-content: center }
.tw-left { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted) }
@media (prefers-reduced-motion: reduce) { .tw-pop, .tw-card { transition: none } }

/* Wedza All-in (7.4.31): Pricing drawer two plans; Subscription comparison */
.pz-two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 12px }
.pz-basic { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper) }
.pz-basic p { margin: 0 0 6px; font-size: 13px; color: var(--muted) }
.pz-kicker.dark { color: var(--accent-text) }
.pz-hero-price.dark b { font-size: 34px; color: var(--ink) } .pz-hero-price.dark span { color: var(--muted); opacity: 1 }
.pz-allin { grid-template-columns: 1fr; align-items: start }
.pz-allin .pz-hero-acts { justify-items: start; text-align: left }
.pz-hero-price s { font-size: 15px; opacity: .75 }
.pz [hidden] { display: none }
@media (max-width: 760px) { .pz-two { grid-template-columns: 1fr } }
.cmp { margin: 0 0 24px }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); overflow: hidden; box-shadow: var(--shadow-card, 0 10px 30px -18px rgba(22, 32, 46, .25)) }
.cmp-corner { padding: 26px 24px }
.cmp-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text) } .cmp-kicker svg { width: 14px; height: 14px }
.cmp-corner h3 { margin: 6px 0 6px; font-family: var(--display, inherit); font-size: 24px; letter-spacing: -.03em; line-height: 1.15 }
.cmp-corner p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted) }
.cmp-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 34px 20px 22px; text-align: center; border-left: 1px solid var(--line) }
.cmp-plan.hot { color: #fff; border-left: 0; background: linear-gradient(160deg, var(--accent-deep, #dd444c), var(--accent, #fe545a) 65%, var(--accent-light, #fea1a4)) }
.cmp-flag { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em }
.cmp-flag.soft { background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d) }
.cmp-flag svg { width: 12px; height: 12px }
.cmp-name { font-size: 15px; font-weight: 700 }
.cmp-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px } .cmp-price b { font-family: var(--display, inherit); font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1 } .cmp-price s { font-size: 14px; opacity: .6 }
.cmp-plan small { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px } .cmp-plan.hot small { color: rgba(255, 255, 255, .85) }
.cmp-save { margin: -2px 0 12px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--accent-deep, #dd444c); font-size: 12px; font-weight: 700 }
.cmp-plan .btn-block { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto }
.cmp-btn-light { background: #fff; color: var(--accent-deep, #dd444c); font-weight: 700; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .35) } .cmp-btn-light:hover { transform: translateY(-1px) }
.cmp-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--surface-2, #eef0f4); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #3b3f4c) }
.cmp-group small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted) }
.cmp-feat, .cmp-cell, .cmp-total { padding: 12px 18px; border-top: 1px solid var(--line) }
.cmp-feat { display: flex; align-items: center; gap: 12px; padding-left: 24px }
.cmp-fic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent) } .cmp-fic svg { width: 17px; height: 17px }
.cmp-feat b { display: block; font-size: 14px } .cmp-feat small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted) }
.cmp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: 13px; color: var(--muted); border-left: 1px solid var(--line) }
.cmp-cell.hot { background: var(--accent-tint); color: var(--ink); border-left: 0 }
.cmp-cell small { font-size: 11.5px; color: var(--muted) }
.cmp-yes { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d) } .cmp-yes svg { width: 14px; height: 14px }
.cmp-inc { font-size: 12.5px; font-weight: 600; color: var(--ok, #15803d) }
.cmp-plus { font-weight: 600; color: var(--ink-2, #3b3f4c) }
.cmp-total { display: flex; flex-direction: column; justify-content: center; padding-left: 24px; background: var(--paper) } .cmp-total b { font-size: 14px } .cmp-total small { font-size: 12.5px; color: var(--muted) }
.cmp-sum s { font-family: var(--display, inherit); font-size: 22px; color: var(--muted) }
.cmp-sum b { font-family: var(--display, inherit); font-size: 26px; color: var(--accent-text); letter-spacing: -.03em }
.cmp-renew { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: var(--info-bg, #eaf0ff); color: var(--ink); font-size: 13.5px; line-height: 1.5 }
.cmp-renew.warn { background: var(--warn-bg, #fef4e2) } .cmp-renew svg { flex: none; width: 18px; height: 18px; margin-top: 2px } .cmp-renew b { display: block }
.cmp-foot { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0 } .cmp-foot svg { flex: none; width: 14px; height: 14px; margin-top: 2px }
@media (max-width: 760px) { .cmp-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) } .cmp-corner, .cmp-plan, .cmp-feat, .cmp-cell { padding: 10px } .cmp-feat small { display: none } .cmp-price b { font-size: 22px } }

/* All-in: the next renewal as a bill (7.4.34) */
.rn { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); overflow: hidden; box-shadow: var(--shadow-card, 0 10px 30px -18px rgba(22, 32, 46, .25)) }
.rn-main { padding: 22px 24px }
.rn-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text) } .rn-k svg { width: 14px; height: 14px }
.rn-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px } .rn-total b { font-family: var(--display, inherit); font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1 } .rn-total span { color: var(--muted); font-size: 14px }
.rn-meter { position: relative; height: 14px; margin: 26px 0 10px; border-radius: 999px; background: var(--surface-2, #eef0f4) }
.rn-in { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ok, #15803d), #34d399) }
.rn-over { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(45deg, var(--warn, #b45309), var(--warn, #b45309) 6px, #f59e0b 6px, #f59e0b 12px) }
.rn-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); font-style: normal } .rn-mark span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ink) }
.rn-use { margin: 0; font-size: 13.5px; color: var(--muted) } .rn-use b { color: var(--ink) } .rn-warn { color: var(--warn, #b45309); font-weight: 700 }
.rn-bill { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-left: 1px solid var(--line); background: var(--accent-tint) }
.rn-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 14px } .rn-line small { display: block; font-size: 12px; color: var(--muted) } .rn-line b { font-variant-numeric: tabular-nums; white-space: nowrap }
.rn-line.muted b { color: var(--muted) }
.rn-sum { padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 16px } .rn-sum b { font-family: var(--display, inherit); font-size: 22px; color: var(--accent-text) }
.rn-bill .btn-block { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px }
.rn-note { font-size: 11.5px; line-height: 1.45; color: var(--muted) }
@media (max-width: 760px) { .rn { grid-template-columns: 1fr } .rn-bill { border-left: 0; border-top: 1px solid var(--line) } }

/* Pricing & add-ons drawer, premium (7.4.34): two plan cards, a compact add-on list */
.pq { display: grid; gap: 18px }
.pq-plans { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch } .pq-plans.one { grid-template-columns: 1fr }
.pq-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); overflow: hidden }
.pq-hot { border: 0; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(150deg, var(--accent-deep, #dd444c), var(--accent, #fe545a) 70%); box-shadow: 0 24px 50px -26px var(--accent-glow, rgba(254, 84, 90, .6)) }
.pq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.pq-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text) } .pq-k svg { width: 15px; height: 15px }
.pq-hot .pq-k { color: #fff }
.pq-save { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--accent-deep, #dd444c); font-size: 12px; font-weight: 800 }
.pq-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px } .pq-price b { font-family: var(--display, inherit); font-size: 42px; font-weight: 800; letter-spacing: -.045em; line-height: 1 } .pq-price span { font-size: 14px; color: var(--muted) } .pq-price s { font-size: 14px; opacity: .7 }
.pq-hot .pq-price span { color: rgba(255, 255, 255, .85) }
.pq-ticks { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px }
.pq-ticks li { display: flex; align-items: center; gap: 8px } .pq-ticks svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d) }
.pq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none }
.pq-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 600 } .pq-chips svg { width: 13px; height: 13px }
.pq-chips .pq-gb { background: #fff; color: var(--accent-deep, #dd444c) }
.pq-sub { margin: auto 0 0; font-size: 12.5px; color: var(--muted) } .pq-hot .pq-sub { color: rgba(255, 255, 255, .85) }
.pq-plan .btn-block { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px }
.pq-cta { background: #fff; color: var(--accent-deep, #dd444c); font-weight: 700; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .35) } .pq-cta:hover { transform: translateY(-1px) }
.pq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px } .pq-head h3 { margin: 0; font-family: var(--display, inherit); font-size: 19px; letter-spacing: -.02em } .pq-head span { font-size: 13px; color: var(--muted) }
.pq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden }
.pq-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.pq-row:nth-child(odd) { border-right: 1px solid var(--line) }
.pq-list > .pq-row:nth-last-child(-n+2) { border-bottom: 0 }
.pq-row:hover { background: var(--accent-tint) }
.pq-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent) } .pq-ic svg { width: 18px; height: 18px }
.pq-what b { display: block; font-size: 14px } .pq-what small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pq-cost { text-align: right; font-size: 13px; white-space: nowrap } .pq-cost b { color: var(--ink) }
.pq-incl { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d); font-size: 12px; font-weight: 700 } .pq-incl svg { width: 13px; height: 13px }
.pq-acts { display: flex; align-items: center; gap: 4px }
.pq-explore { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--muted) } .pq-explore:hover { background: var(--surface-2, #eef0f4); color: var(--ink) } .pq-explore svg { width: 16px; height: 16px }
.pq-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted) } .pq-foot svg { width: 14px; height: 14px }
@media (max-width: 900px) { .pq-plans, .pq-list { grid-template-columns: 1fr } .pq-row:nth-child(odd) { border-right: 0 } .pq-list > .pq-row:nth-last-child(2) { border-bottom: 1px solid var(--line) } }

/* How the All-in extra was worked out (7.4.34) */
.rn .rx { grid-column: 1 / -1; border-top: 1px solid var(--line) }
.rx > summary { display: flex; align-items: center; gap: 12px; padding: 14px 24px; cursor: pointer; list-style: none }
.rx > summary::-webkit-details-marker { display: none }
.rx > summary > svg:first-child { flex: none; width: 20px; height: 20px; color: var(--accent) }
.rx > summary span { flex: 1 } .rx > summary b { display: block; font-size: 14.5px } .rx > summary small { font-size: 12.5px; color: var(--muted) }
.rx > summary > svg:last-child { width: 18px; height: 18px; color: var(--muted); transition: transform .2s } .rx[open] > summary > svg:last-child { transform: rotate(180deg) }
.rx-body { display: grid; gap: 18px; padding: 4px 24px 22px }
.rx-step { display: flex; gap: 14px } .rx-step > i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-style: normal; font-weight: 800; font-size: 13px } .rx-step > i svg { width: 15px; height: 15px }
.rx-step > .grow { flex: 1; min-width: 0 }
.rx-step > .grow > b { display: block; font-size: 14px; margin-bottom: 8px }
.rx-chart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 0 2px; border-bottom: 1px solid var(--line-2) }
.rx-bar { flex: 1; min-width: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #34d399, var(--ok, #15803d)) }
.rx-bar.over { background: linear-gradient(180deg, #f59e0b, var(--warn, #b45309)) }
.rx-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--ink); font-style: normal } .rx-line span { position: absolute; right: 0; bottom: 4px; padding: 1px 7px; border-radius: 6px; background: var(--paper); font-size: 11px; font-weight: 700 }
.rx-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted) } .rx-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px } .rx-legend .ok { margin-left: 0; background: var(--ok, #15803d) } .rx-legend .warn { background: var(--warn, #b45309) }
.rx-calc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px }
.rx-calc span { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px }
.rx-calc span.hl { border-color: transparent; background: var(--accent-soft); color: var(--accent-text) }
.rx-calc em { font-style: normal; font-weight: 800; color: var(--muted) }
.rx-gals { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none }
.rx-gals li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13.5px }
.rx-gals a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600 } .rx-gals a:hover { color: var(--accent-text) }
.rx-gbar { height: 8px; border-radius: 999px; background: var(--surface-2, #eef0f4); overflow: hidden } .rx-gbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent) }
.rx-gals b { font-variant-numeric: tabular-nums; font-size: 13px }
/* Digital Marketing choice before paying from the drawer (7.4.35) */
.pq-pick { display: grid; gap: 10px }
.pq-opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; font: inherit; color: var(--ink) }
.pq-opt:hover { border-color: var(--accent); background: var(--accent-tint) }
.pq-opt b { font-size: 15px } .pq-opt span { font-weight: 700; color: var(--accent-text) } .pq-opt small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px }
/* Pricing & add-ons: what they already have (7.4.37) */
.pq-taken { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d); font-size: 13px; font-weight: 700; white-space: nowrap } .pq-taken svg { width: 14px; height: 14px }
.pq-till { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap }
.pq-row.is-taken .pq-ic { background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d) }
.pq-taken-plan { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: default; background: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d); border: 1px solid transparent; font-weight: 700; box-shadow: none } .pq-taken-plan svg { width: 16px; height: 16px }
.pq-hot .pq-taken-plan { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4) }
/* Header bar, cleaner (7.4.43): soft search on the left; Pricing as the one labelled pill, quiet round icons with a
   label on hover, a thin divider, then the profile. */
.topbar { gap: 10px }
.topbar .tb-trigger { flex: 0 1 380px; height: 42px; padding: 0 8px 0 16px; border: 1px solid transparent; border-radius: 999px; background: var(--surface-2); color: var(--muted) }
.topbar .tb-trigger:hover { border-color: var(--line-2); background: var(--paper); color: var(--ink) }
.topbar .tb-trigger kbd { border: 0; background: var(--paper); box-shadow: 0 1px 0 var(--line-2); border-radius: 999px; padding: 3px 9px }
.tb-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s }
.tb-pill svg { width: 17px; height: 17px }
.tb-pill:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-light, #fea1a4) }
.tb-pill.active { box-shadow: inset 0 0 0 1.5px var(--accent) }
.tb-tools { display: flex; align-items: center; gap: 2px; margin-left: 4px }
.tb-ic { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s }
.tb-ic svg { width: 19px; height: 19px }
.tb-ic:hover, .tb-ic.active { background: var(--surface-2); color: var(--ink) }
.topbar .theme-btn.tb-ic { width: 40px; height: 40px; border: 0; border-radius: 999px; background: none }
.topbar .theme-btn.tb-ic:hover { background: var(--surface-2) }
.tb-ic .bell-count { top: 2px; right: 1px; min-width: 17px; height: 17px; line-height: 17px; font-size: 10px }
/* The label under an icon on hover (keyboard focus too); never on touch screens. */
.tb-ic[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 90; transform: translate(-50%, -4px); padding: 6px 10px; border-radius: 8px; background: var(--toast-bg, #16191f); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s }
.tb-ic[data-tip]:hover::after, .tb-ic[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) }
.app-dl-wrap:hover .tb-ic[data-tip]::after { opacity: 0 } /* the download card shows instead */
@media (hover: none) { .tb-ic[data-tip]::after { display: none } }
.tb-div { flex: none; width: 1px; height: 26px; margin: 0 6px; background: var(--line-2) }
.topbar .me { gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; transition: background .15s }
.topbar .me:hover { opacity: 1; background: var(--surface-2) }
.topbar .me > svg { flex: none; width: 16px; height: 16px; color: var(--muted) }
@media (max-width: 1240px) { .tb-pill span { display: none } .tb-pill { width: 40px; padding: 0; justify-content: center } }
@media (max-width: 1000px) { .topbar .me > div, .topbar .me > svg { display: none } .topbar .me { padding: 2px } }
@media (max-width: 640px) { .tb-div, .tb-pill { display: none } .topbar .tb-trigger { flex: 0 0 40px; padding: 0 } }
/* Header (7.4.44, user: "no need that big search bar, keep all those as text"): a small search and labelled links. */
.topbar .tb-trigger { flex: 0 0 auto; width: 190px; padding: 0 6px 0 14px }
.tb-txt { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s }
.tb-txt svg { flex: none; width: 17px; height: 17px; color: var(--accent) }
.tb-txt:hover, .tb-txt.active { background: var(--surface-2); color: var(--ink) }
@media (max-width: 1360px) { .tb-txt span { display: none } .tb-txt { width: 40px; padding: 0; justify-content: center } }
@media (max-width: 1240px) { .topbar .tb-trigger { width: 150px } }
/* Post production (7.4.47): deliverables with their crew, status and team only folder */
.pp-row { align-items: center; gap: 12px }
.pp-row.is-done .title { color: var(--muted); text-decoration: line-through }
.pp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px }
.pp-crew { display: inline-flex; flex-wrap: wrap; gap: 6px }
.pp-who { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2) }
.pp-folder { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-size: 12.5px; font-weight: 700; text-decoration: none }
.pp-folder svg { width: 13px; height: 13px }
.pp-folder:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-light, #fea1a4) }
.pp-status { flex: none; width: auto; min-width: 128px; height: 36px; padding: 0 30px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700 }
.pp-status.info { background-color: var(--info-bg, #eaf0ff); color: var(--info, #3b5bdb); border-color: transparent }
.pp-status.ok { background-color: var(--ok-bg, #e8f7ee); color: var(--ok, #15803d); border-color: transparent }
.pp-pick { display: flex; flex-wrap: wrap; gap: 8px }
.pp-pick .chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px }
.page-head h2 svg { width: 22px; height: 22px; vertical-align: -2px; color: var(--accent) }
@media (max-width: 700px) { .pp-row { flex-wrap: wrap } }
.list-item.pp-row > .grow { flex: 1 1 auto; min-width: 0 }
.list-item.pp-row > select.pp-status { flex: 0 0 150px; width: 150px; max-width: 150px }
/* Deliverables: who sees it (7.4.51) */
.pp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.pp-seg button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer }
.pp-seg button svg { grid-row: span 2; width: 20px; height: 20px; color: var(--muted) }
.pp-seg button small { grid-column: 2; font-weight: 500; font-size: 12.5px; color: var(--muted) }
.pp-seg button:hover { background: var(--accent-tint) }
.pp-seg button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text, var(--accent)) }
.pp-seg button.on svg { color: var(--accent) }
.pp-team { background: var(--surface-2); color: var(--ink-2) }
@media (max-width: 560px) { .pp-seg { grid-template-columns: 1fr } }
/* Crew board, quiet list (7.4.66): hairlines, type and space do the work; colour only for days without crew */
.cw3-sum { margin: -4px 0 18px; color: var(--muted); font-size: 14px }
.cw3-state { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap }
.cw3-state.warn { color: var(--warn, #b45309) }
.cw3-state.ok { color: var(--ok, #15803d) }
.cw3-group + .cw3-group { margin-top: 28px }
.cw3-group h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.cw3-group h3 span { font-variant-numeric: tabular-nums; color: var(--ink-2) }
.cw3-tabs { margin-bottom: 16px }
.cw3-board { display: grid; gap: 14px }
.cw3-ev { border: 1px solid var(--line); border-radius: var(--r-lg, 22px); background: var(--paper); box-shadow: var(--shadow-card, 0 1px 2px rgba(22,32,46,.04)); overflow: hidden }
.cw3-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 22px 14px }
.cw3-when { display: flex; flex-direction: column; gap: 4px; padding-top: 1px }
.cw3-when b { font: 700 26px/1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums }
.cw3-when small { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap }
.cw3-title { min-width: 0 }
.cw3-title > a { display: block; font: 700 17px/1.3 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cw3-title > a:hover { color: var(--accent-text, var(--accent)) }
.cw3-title > small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted) }
.cw3-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 13px }
.cw3-meta .cw-loc, .cw3-tel { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; max-width: 100% }
.cw3-meta .cw-loc b { font-weight: 600; color: var(--accent-text, var(--accent)) }
.cw3-meta svg { width: 14px; height: 14px; color: var(--muted); flex: none }
.cw3-meta a:hover { color: var(--ink) }
.cw3-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px }
.cw3-tools { display: flex; align-items: center; gap: 4px }
.cw3-tools .icon-btn { width: 34px; height: 34px; border-color: transparent; background: none; color: var(--muted) }
.cw3-tools .icon-btn:hover { background: var(--hover, var(--surface-2)); color: var(--ink) }
.cw3-tools .icon-btn svg { width: 16px; height: 16px }
.cw3-days { list-style: none; margin: 0 22px 0 104px; padding: 0 0 8px }
.cw3-day { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line) }
.cw3-dd { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.cw3-dl { min-width: 0 }
.cw3-dl b { display: block; font-size: 14px; font-weight: 600; color: var(--ink) }
.cw3-dl small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cw3-who { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px }
.cw3-p { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap }
.cw3-p b { font-weight: 600; color: var(--ink) }
.cw3-p i { font-style: normal; color: var(--muted) }
.cw3-add { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--warn, #b45309); cursor: pointer }
.cw3-add svg { width: 14px; height: 14px }
.cw3-add:hover { color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 3px }
.cw3-none { font-size: 13px; color: var(--muted) }
.cw3-empty { margin-top: 4px }
@media (max-width: 1100px) { .cw3-day { grid-template-columns: 56px minmax(0, 1fr) } .cw3-who { grid-column: 2; justify-content: flex-start } }
@media (max-width: 760px) {
  .cw3-head { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 16px 10px; gap: 12px }
  .cw3-when small, .dv-due small { white-space: normal; line-height: 1.3 }
  .cw3-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center }
  .cw3-days { margin: 0 16px 0 16px }
  .cw3-day { grid-template-columns: 48px minmax(0, 1fr) }
  .cw3-who { grid-column: 2; justify-content: flex-start }
}
/* Deliverables, quiet list (7.4.66): same language as the Crew board */
.dv-sum { margin: -4px 0 18px; color: var(--muted); font-size: 14px }
.dv-group + .dv-group { margin-top: 28px }
.dv-group h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.dv-group h3 span { font-variant-numeric: tabular-nums; color: var(--ink-2) }
.dv-list { border: 1px solid var(--line); border-radius: var(--r-lg, 22px); background: var(--paper); overflow: hidden }
.dv-list > .dv-row + .dv-row, .dv-order + .dv-order { border-top: 1px solid var(--line) }
.dv-ohead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 12px }
.dv-otitle { min-width: 0 }
.dv-otitle b { font: 700 17px/1.3 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.02em; color: var(--ink) }
.dv-otitle small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted) }
.dv-otools { display: flex; align-items: center; gap: 4px; flex: none }
.dv-order .dv-row { margin-left: 22px; padding-left: 0; border-top: 1px solid var(--line) }
.dv-order .dv-row:last-child { padding-bottom: 16px }
.dv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 22px }
.dv-due { display: flex; flex-direction: column; gap: 3px }
.dv-due b { font: 700 22px/1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums }
.dv-due small { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap }
.dv-what { min-width: 0 }
.dv-what > b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; font-weight: 600; color: var(--ink) }
.dv-what > small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dv-row.is-done .dv-what > b, .dv-row.is-done .dv-due b { color: var(--muted) }
.dv-flag { font-size: 12.5px; font-weight: 600; color: var(--info, #3b5bdb) }
.dv-flag.warn { color: var(--warn, #b45309) }
.dv-flag.bad { color: var(--bad, #c2410c) }
.dv-tag { font-size: 12px; font-weight: 600; color: var(--muted) }
.dv-tag::before { content: '·'; margin-right: 10px; color: var(--line-2) }
.dv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; font-size: 13px }
.dv-line:empty { display: none }
.dv-crew { display: inline-flex; flex-wrap: wrap; gap: 4px 14px }
.dv-crew > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink-2) }
.dv-none { color: var(--muted) }
.dv-folder { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; text-decoration: none }
.dv-folder svg { width: 13px; height: 13px; color: var(--muted) }
.dv-folder:hover { color: var(--accent-text, var(--accent)) }
.dv-acts { display: flex; align-items: center; gap: 2px }
.dv-status { position: relative; display: inline-flex; align-items: center; margin-right: 6px; color: var(--ink-2) }
.dv-status::before { content: ''; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--line-2) }
.dv-status.info { color: var(--info, #3b5bdb) } .dv-status.info::before { background: currentColor }
.dv-status.ok { color: var(--ok, #15803d) } .dv-status.ok::before { background: currentColor }
.dv-status select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 6px 20px 6px 0; font: inherit; font-size: 13px; font-weight: 600; color: inherit; cursor: pointer }
.dv-status select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }
.dv-status svg { position: absolute; right: 0; width: 14px; height: 14px; pointer-events: none; opacity: .7 }
.dv-ib { width: 34px; height: 34px; border-color: transparent; background: none; color: var(--muted) }
.dv-ib:hover { background: var(--hover, var(--surface-2)); color: var(--ink) }
.dv-ib svg { width: 16px; height: 16px }
@media (max-width: 760px) {
  .dv-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 16px }
  .dv-acts { grid-column: 2 }
  .dv-due small { white-space: normal; line-height: 1.3 }
  .dv-order .dv-row { margin-left: 16px }
  .dv-ohead { flex-wrap: wrap; padding: 16px 16px 10px }
}
/* FaceFind AI (7.4.70): the glowing button on a gallery and its panel */
@property --ff-a { syntax: '<angle>'; inherits: false; initial-value: 0deg }
.ff-btn { position: relative; isolation: isolate; border: 0; padding: 0 20px 0 16px; color: #fff; font-weight: 700; letter-spacing: -.005em; background: transparent; box-shadow: 0 14px 30px -14px rgba(255, 79, 140, .7) }
/* A thin spinning colour ring, a soft glow of the same colours behind it, a dark glass fill and a shine that sweeps across (7.4.72). */
.ff-btn::before { content: ''; position: absolute; inset: -1.5px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--ff-a), #ff7a59, #ffcf6e, #ff4fa3, #9d7bff, #5ec8ff, #ff7a59); animation: ff-spin 4s linear infinite }
.ff-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat, radial-gradient(120% 140% at 50% -30%, #3a2a3e, #17151d 62%);
  animation: ff-shine 3.6s ease-in-out infinite }
.ff-aura { position: absolute; inset: -5px; z-index: -3; border-radius: inherit; background: conic-gradient(from var(--ff-a), #ff7a59, #ffcf6e, #ff4fa3, #9d7bff, #5ec8ff, #ff7a59); filter: blur(12px); opacity: .55; animation: ff-spin 4s linear infinite; pointer-events: none }
.ff-btn svg { width: 18px; height: 18px; color: #ffd36e; filter: drop-shadow(0 0 6px rgba(255, 207, 110, .7)) }
.ff-btn .ff-label { background: linear-gradient(90deg, #fff, #ffe1ea 55%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent }
.ff-btn:hover { transform: translateY(-1px) } .ff-btn:hover .ff-aura { opacity: .8 }
.ff-btn:focus-visible { outline: 2px solid #ff4fa3; outline-offset: 3px }
.ff-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 2px 8px 2px 7px; border-radius: 999px; background: rgba(52, 211, 153, .16); color: #6ee7b7; font-size: 11.5px; font-weight: 700 }
.ff-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25) }
@keyframes ff-spin { to { --ff-a: 360deg } }
@keyframes ff-shine { 0%, 55% { background-position: -160% 0, 0 0 } 100% { background-position: 260% 0, 0 0 } }
@media (prefers-reduced-motion: reduce) { .ff-btn::before, .ff-btn::after, .ff-aura { animation: none } }
.ff-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r, 16px); background: linear-gradient(135deg, color-mix(in srgb, #ff7a59 12%, var(--paper)), color-mix(in srgb, #ff4fa3 10%, var(--paper))); border: 1px solid var(--line) }
.ff-hero b { display: block; font: 700 17px/1.3 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.02em } .ff-hero small { color: var(--muted); font-size: 13px }
.ff-orb { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #ff7a59, var(--accent), #ff4fa3); box-shadow: 0 10px 22px -12px var(--accent) } .ff-orb svg { width: 22px; height: 22px }
.ff-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ok, #15803d); box-shadow: 0 0 0 5px var(--ok-bg, #e8f7ee) }
.ff-how { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: ff }
.ff-how li { position: relative; padding-left: 40px; counter-increment: ff } .ff-how li::before { content: counter(ff); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-weight: 700; font-size: 13px }
.ff-how b { display: block; font-size: 14.5px } .ff-how span { color: var(--muted); font-size: 13px }
.ff-price { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r, 16px); border: 1px solid var(--line) } .ff-price b { font: 800 30px/1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.03em } .ff-price span { margin-left: 8px; color: var(--muted); font-size: 14px }
.ff-pay svg { width: 18px; height: 18px }
.ff-qr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 18px }
.ff-qr > svg { width: 150px; height: 150px; border-radius: 14px; border: 1px solid var(--line) }
.ff-qr b { display: block; font-size: 15px } .ff-qr small { word-break: break-all }
.ff-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px }
.ff-stats div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2, #eef0f4) } .ff-stats b { display: block; font: 700 20px/1.2 'Bricolage Grotesque', Inter, sans-serif; font-variant-numeric: tabular-nums } .ff-stats span { font-size: 12.5px; color: var(--muted) }
.ff-extend { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line) }
@media (max-width: 560px) { .ff-qr { grid-template-columns: 1fr; justify-items: center; text-align: center } }