/* QuickHelp dashboards (admin + customer). Mirrors the app: navy header,
   electric indigo accent, quiet neutral surfaces. CSP forbids inline styles and
   external fonts, so everything lives here and uses the system font stack. */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --border: #e1e4e8;
  --ink: #12162e;
  --text: #12162e;
  --muted: #5a6178;
  --faint: #646b82;
  --accent: #4457f5;
  --accent-press: #3646d8;
  --accent-weak: #eaedff;
  --on-accent: #ffffff;
  --ok: #12773a;
  --ok-weak: #e3f4ea;
  --warn: #8a5600;
  --warn-weak: #fff4da;
  --bad: #c52d27;
  --bad-weak: #fff0ee;
  --violet: #6d28d9;
  --violet-weak: #efe9fd;
  --wa: #087f3f;
  --shadow: 0 1px 2px rgba(18, 22, 46, 0.06), 0 8px 24px rgba(18, 22, 46, 0.06);
  --radius: 14px;
  color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0d1020;
    --surface: #161a2e;
    --surface-2: #1d2238;
    --border: #2a3050;
    --text: #e9ecf8;
    --muted: #a3aac2;
    --faint: #7f87a3;
    --accent: #8e9bff;
    --accent-press: #a7b1ff;
    --accent-weak: #242a52;
    --on-accent: #0d1020;
    --ok: #6fd39a;
    --ok-weak: #15301f;
    --warn: #f3c465;
    --warn-weak: #33280f;
    --bad: #ff8a80;
    --bad-weak: #3a1a1a;
    --violet: #c4b1ff;
    --violet-weak: #2b2146;
    --wa: #6fd39a;
    --shadow: none;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Gujarati", sans-serif;
}
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 0.86rem; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--surface); padding: 10px 14px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- Top bar ---- */
.topbar {
  background: #12162e;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
}
.brand-mark img { width: 58px; height: 58px; margin: -13px; display: block; }
.ws-wordmark { display: block; height: 50px; width: auto; margin: -12px 0 -5px -8px; }
.brand small { display: block; font-weight: 500; color: #b9c0e0; font-size: 0.78rem; line-height: 1; }
.topnav { display: flex; gap: 4px; margin-left: 12px; overflow-x: auto; scrollbar-width: none; }
.topnav a {
  color: #c9cfee; text-decoration: none; padding: 8px 12px; border-radius: 10px;
  font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.topnav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.topnav a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); color: #fff; }
.topbar .spacer { flex: 1; }
.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #d92d20; color: #fff; font-size: 0.72rem; font-weight: 700;
}

/* ---- Layout ---- */
.page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; display: grid; gap: 20px; }
.page.narrow { max-width: 760px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head p { margin-top: 4px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card > * + * { margin-top: 12px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---- KPI tiles ---- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: grid; gap: 4px; align-content: start; text-align: left; color: var(--text);
  font: inherit; cursor: default; box-shadow: var(--shadow);
}
button.kpi { cursor: pointer; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; font-weight: inherit; }
.kpi-inner { display: grid; gap: 4px; width: 100%; text-align: left; }
button.kpi:hover { background: var(--surface); color: var(--text); }
button.kpi .stack, .kpi .stack { width: 100%; gap: 6px; }
button.kpi:hover { border-color: var(--accent); }
.kpi-label { color: var(--muted); font-size: 0.84rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 1.9rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-sub { color: var(--faint); font-size: 0.82rem; }
.kpi.warn .kpi-value { color: var(--warn); }
.kpi.bad .kpi-value { color: var(--bad); }
.kpi.ok .kpi-value { color: var(--ok); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: 0; }

/* ---- Pills / status ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 650; white-space: nowrap; background: var(--surface-2); color: var(--muted);
}
.pill.active { background: var(--ok-weak); color: var(--ok); }
.pill.expiring { background: var(--warn-weak); color: var(--warn); }
.pill.expired, .pill.cancelled, .pill.declined { background: var(--bad-weak); color: var(--bad); }
.pill.paused, .pill.in_progress { background: var(--violet-weak); color: var(--violet); }
.pill.open { background: var(--accent-weak); color: var(--accent); }
.pill.resolved { background: var(--ok-weak); color: var(--ok); }
.pill.none { background: var(--surface-2); color: var(--muted); }
.pill.update { background: var(--warn-weak); color: var(--warn); }

/* ---- Buttons & fields ---- */
button, .button {
  font: inherit; font-weight: 650; border: 0; border-radius: 12px; padding: 10px 16px; min-height: 44px;
  background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:hover, .button:hover { background: var(--accent-press); color: var(--on-accent); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button.secondary, .button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
button.secondary:hover, .button.secondary:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); }
button.ghost { background: transparent; color: var(--accent); padding: 8px 10px; }
button.ghost:hover { background: var(--accent-weak); color: var(--accent); }
button.danger { background: var(--bad); color: var(--on-accent); }
button.danger:hover { background: #a3241f; }
button.wa, .button.wa { background: var(--wa); color: var(--on-accent); }
button.small, .button.small { min-height: 36px; padding: 6px 12px; font-size: 0.88rem; border-radius: 10px; }
button.full { width: 100%; }
label { display: block; font-weight: 650; font-size: 0.88rem; margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-weak); border-color: var(--accent); }
.hint { color: var(--faint); font-size: 0.84rem; margin-top: 6px; }
.form-error { color: var(--bad); font-size: 0.88rem; min-height: 1.2em; margin-top: 8px; }
fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 14px; margin: 14px 0 0; }
legend { font-weight: 650; padding: 0 6px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 12px 0 0; }
.check input { width: 20px; min-height: 20px; }

/* ---- Chips / segmented filters ---- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--surface); color: var(--muted); border: 1px solid var(--border); min-height: 36px;
  padding: 6px 14px; border-radius: 999px; font-size: 0.88rem;
}
.chip:hover { background: var(--surface); color: var(--text); border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--accent); color: #0d1020; border-color: var(--accent); }
.chip .count { color: inherit; opacity: 0.75; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ---- Tables / lists ---- */
.table-wrap { overflow-x: auto; margin: -8px -18px -18px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 18px; text-align: left; border-top: 1px solid var(--border); vertical-align: middle; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 700; border-top: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
td .sub { display: block; color: var(--faint); font-size: 0.84rem; }
.list { display: grid; }
.list > .item { padding: 12px 0; border-top: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.list > .item:first-child { border-top: 0; padding-top: 0; }
.item .grow { flex: 1; min-width: 0; }
.item .title { font-weight: 650; }
.item .link { padding: 0; min-height: 0; background: none; color: var(--accent); font-weight: 650; text-align: left; border-radius: 4px; }
.item .link:hover { background: none; color: var(--accent-press); text-decoration: underline; }
.item .sub { display: block; }
.icon {
  width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-weak); color: var(--accent);
}
.icon svg { width: 18px; height: 18px; }
.icon.ok { background: var(--ok-weak); color: var(--ok); }
.icon.warn { background: var(--warn-weak); color: var(--warn); }
.icon.bad { background: var(--bad-weak); color: var(--bad); }
.icon.violet { background: var(--violet-weak); color: var(--violet); }
.empty { color: var(--muted); padding: 18px 0; text-align: center; }

/* ---- Bars (usage + rollout) ---- */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 3px; height: 120px; }
.bars .bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars .bar span { display: block; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; height: 0; }
.bars .bar span.second { background: #5cd6ba; border-radius: 0; }
.bars-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 0.78rem; margin-top: 6px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 0.84rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-right: 6px; vertical-align: -1px; }
.legend i.second { background: #5cd6ba; }
.hbar { display: grid; grid-template-columns: 110px 1fr 56px; gap: 10px; align-items: center; padding: 6px 0; }
.hbar .track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.hbar .track span { display: block; height: 100%; background: var(--accent); width: 0; }
.hbar.latest .track span { background: var(--ok); }
.hbar.below .track span { background: var(--bad); }

/* ---- Notices / toast ---- */
.notice { padding: 12px 14px; border-radius: 12px; background: var(--accent-weak); color: var(--text); }
.notice.warn { background: var(--warn-weak); }
.notice.bad { background: var(--bad-weak); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: #12162e; color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow); border: 1px solid #2a3050;
  max-width: calc(100vw - 32px);
}
.toast.bad { background: var(--bad); }

/* ---- Dialogs / drawer ---- */
dialog {
  border: 0; padding: 0; border-radius: 18px; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
dialog::backdrop { background: rgba(13, 16, 32, 0.55); }
dialog form, dialog .dialog-body { padding: 22px; }
dialog h2 { margin-bottom: 4px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
dialog.drawer {
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(760px, 100vw); border-radius: 0;
}
.drawer-head {
  position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 16px 22px; display: flex; gap: 12px; align-items: flex-start;
}
.drawer-head .grow { flex: 1; min-width: 0; }
.drawer-body { padding: 18px 22px 40px; display: grid; gap: 18px; }
.drawer-body .card { box-shadow: none; }
.close { background: var(--surface-2); color: var(--text); border-radius: 50%; width: 40px; min-height: 40px; padding: 0; }
.close:hover { background: var(--border); color: var(--text); }

/* ---- Auth ---- */
.auth { max-width: 420px; margin: 8vh auto 0; padding: 0 20px; }
.auth .card { padding: 24px; }
.auth h1 { margin: 16px 0 6px; }

/* ---- Customer plan hero ---- */
.plan-hero {
  background: #12162e; color: #fff; border-radius: 18px; padding: 22px; display: grid; gap: 14px;
  position: relative; overflow: hidden;
}
.plan-hero::before {
  content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(68, 87, 245, 0.55), transparent);
}
.plan-hero > * { position: relative; }
.plan-hero .big { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-hero .muted { color: #b9c0e0; }
.plan-hero .meter { background: rgba(255, 255, 255, 0.14); }
.plan-hero .meter > span { background: #5cd6ba; }
.plan-hero .pill { background: rgba(255, 255, 255, 0.14); color: #fff; }
.plan-hero .pill.active { color: #a6e9d8; }
.plan-hero .pill.expiring { color: #ffcf73; }
.plan-hero .pill.expired, .plan-hero .pill.cancelled { color: #ffb3aa; }

.steps { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.steps li { margin: 4px 0; }
.timeline .item .when { color: var(--faint); font-size: 0.82rem; white-space: nowrap; }
.request-reply { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.saved-replies { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .meter > span, .hbar .track span, .bars .bar span { transition: width 0.4s ease, height 0.4s ease; }
}
@media (max-width: 640px) {
  .topnav { margin-left: 0; }
  .brand small { display: none; }
  th:nth-child(n+5), td:nth-child(n+5) { display: none; }
  .hbar { grid-template-columns: 80px 1fr 44px; }
}
/* A field sharing a row with a button (e.g. password + Generate) takes the remaining width. */
.row > input, .row > select { flex: 1; width: auto; min-width: 0; }
.row > .ghost + .ghost { margin-left: -4px; }
[data-view] { scroll-margin-top: 80px; }
button, .button { white-space: nowrap; }
@media (max-width: 640px) {
  /* Brand and sign-out on the first row; the section menu scrolls on its own row. */
  .topbar-inner { flex-wrap: wrap; row-gap: 6px; padding: 10px 16px; }
  .topnav { order: 3; width: calc(100% + 16px); margin: 0 -8px; padding-bottom: 2px; }
  .page { padding: 18px 16px 48px; }
  table:not(.team-table) th:nth-child(n+4), table:not(.team-table) td:nth-child(n+4) { display: none; }
  .team-table:not(.staff-calls) th:nth-child(n+3):not(:nth-child(7)), .team-table:not(.staff-calls) td:nth-child(n+3):not(:nth-child(7)) { display: none; }
  th, td { padding: 12px; }
  .table-wrap { margin: -8px -18px -18px; }
  #search-form, #search-form input { width: 100%; }
  .kpi-value { font-size: 1.6rem; }
}

/* ---- Workspace (/app) ---- */
.live { display: inline-flex; align-items: center; gap: 6px; color: #a6e9d8; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.live .dot { background: #5cd6ba; }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid-2.wide-left { grid-template-columns: 1fr; } }
.item .actions { flex-wrap: wrap; justify-content: flex-end; }
/* Follow-ups carry five actions: keep the reason readable and put the actions on their own line. */
.list > .item.followup { flex-wrap: wrap; }
.item.followup .grow { flex-basis: calc(100% - 48px); }
.item.followup .actions { flex-basis: 100%; justify-content: flex-start; padding-left: 48px; }
.split { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.list-pane { position: sticky; top: 76px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; gap: 12px; }
.list-pane .list { overflow-y: auto; margin: 0 -10px; }
.list.selectable > .item, button.item.select {
  width: 100%; background: transparent; color: var(--text); border: 0; border-radius: 10px; padding: 10px; text-align: left;
  min-height: 0; font-weight: 400; justify-content: flex-start; white-space: normal;
}
.list > button.item { border-top: 0; }
button.item.select:hover { background: var(--surface-2); color: var(--text); }
button.item.select.selected { background: var(--accent-weak); }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--violet-weak); color: var(--violet); font-weight: 700; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail-pane { min-height: 320px; }
.hours { display: grid; gap: 6px; }
.hours-row { display: grid; grid-template-columns: 90px 1fr 16px 1fr; gap: 8px; align-items: center; }
.hours-row .check { margin: 0; }
.hours-row input[type=time] { min-height: 40px; }
input.search { max-width: 280px; }
.dialog-actions .spacer { flex: 1; }
.notice-card { border-color: var(--accent); }
#template-list > .card .list > button.item { border-top: 1px solid var(--border); border-radius: 0; }
#template-list > .card .list > button.item:first-child { border-top: 0; }
.hours { max-width: 560px; }

/* Reminder dialog: repeat, alerts, typed dates */
dialog.wide-dialog { width: min(640px, calc(100vw - 32px)); }
.parsed { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--accent-weak); color: var(--accent); font-weight: 600; font-size: 0.9rem; width: fit-content; max-width: 100%; }
.custom-repeat { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px; margin: 14px 0 0; display: grid; gap: 12px; }
.custom-repeat legend { font-weight: 700; padding: 0 6px; }
.custom-repeat .row { flex-wrap: wrap; }
label.inline { margin: 0; }
.custom-repeat .num-input { width: 5.5em; flex: none; }
.custom-repeat .row select, .custom-repeat .row input[type=date] { width: auto; flex: 1 1 10em; max-width: 18em; }
.weekday-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.day-toggle { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-weight: 700; }
.day-toggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.stack-tight { display: grid; gap: 2px; }
.stack-tight .check { margin: 0; }
.alert-toggles { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.alert-toggles .check { margin: 4px 0; font-weight: 500; }
.summary-line { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 600; }
.summary-line:empty { display: none; }
.list > .item.overdue .title { color: var(--bad); }

/* =====================================================================
   Workspace v2 (body.ws): colourful sidebar layout, analytics and charts.
   Palette: indigo #4457F5 · violet #8B5CF6 · amber #F59E0B · emerald #10B981
            sky #0EA5E9 · rose #F43F5E · teal #14B8A6
   ===================================================================== */
.ws {
  --c-indigo: #4457f5; --c-violet: #8b5cf6; --c-amber: #f59e0b; --c-emerald: #10b981;
  --c-sky: #0ea5e9; --c-rose: #f43f5e; --c-teal: #14b8a6;
  --t-indigo: #eaedff; --t-violet: #f1ebff; --t-amber: #fff4dc; --t-emerald: #e3f8ef; --t-sky: #e2f4fd; --t-rose: #ffe8ec; --t-teal: #ddf7f3;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(18, 22, 46, 0.05), 0 10px 30px rgba(18, 22, 46, 0.06);
}
:root[data-theme="dark"] .ws { --t-indigo: #232a55; --t-violet: #2b2150; --t-amber: #3a2c10; --t-emerald: #0f3326; --t-sky: #0e2e42; --t-rose: #3d1822; --t-teal: #0f3431; }
.ws-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.ws-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 22px;
  padding: 20px 14px; color: #c9cfee;
  background: radial-gradient(120% 60% at 0% 0%, rgba(68, 87, 245, 0.35), transparent 60%), linear-gradient(180deg, #151b3d 0%, #0e1230 100%);
}
.ws-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 750; font-size: 1.05rem; padding: 4px 8px; }
.ws-brand small { display: block; font-weight: 500; color: #9aa3cc; font-size: 0.76rem; line-height: 1.1; }
.ws-nav { display: grid; gap: 4px; }
.ws-nav a {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: #c9cfee;
  text-decoration: none; font-weight: 600; position: relative;
}
.ws-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.ws-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.11); color: #fff; }
.ws-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--nc); }
.ws-nav .nl { flex: 1; }
.ni { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); color: var(--nc, #c9cfee); flex: none; }
.ni svg { width: 18px; height: 18px; }
.ws-nav a[aria-current="page"] .ni { background: var(--nc); color: #fff; box-shadow: 0 6px 18px -6px var(--nc); }
.c-indigo { --nc: #6c7bff; } .c-violet { --nc: #a37bff; } .c-amber { --nc: #f5a524; } .c-emerald { --nc: #22c38e; } .c-sky { --nc: #38b6f0; } .c-rose { --nc: #fb5a78; }
.ws-nav .count-pill { font-size: 0.75rem; color: #9aa3cc; font-variant-numeric: tabular-nums; }
.badge.amber { background: #f59e0b; color: #1b1300; }
.badge.rose { background: #be123c; }
.ws-side-foot { margin-top: auto; display: grid; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ws-account { display: flex; align-items: center; gap: 10px; color: #c9cfee; text-decoration: none; font-weight: 600; border-radius: 12px; padding: 6px 4px; }
.ws-account:hover { color: #fff; }
.ws-account .ni { width: 30px; height: 30px; }

.ws-main { min-width: 0; display: flex; flex-direction: column; }
.ws-top {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.ws-top .spacer { flex: 1; }
.ws-search { position: relative; width: min(520px, 100%); }
.ws-search input { padding-left: 38px; border-radius: 14px; background: var(--surface); }
.ws-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(18, 22, 46, 0.18); padding: 6px; max-height: 60vh; overflow-y: auto; z-index: 30;
}
.ws-results button { width: 100%; justify-content: flex-start; background: transparent; color: var(--text); font-weight: 500; min-height: 48px; border-radius: 10px; text-align: left; }
.ws-results button:hover, .ws-results button:focus-visible { background: var(--surface-2); color: var(--text); }
button.ghost-light { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
button.ghost-light:hover { background: var(--surface-2); color: var(--text); }
.ws .page { max-width: 1320px; width: 100%; padding: 26px 28px 64px; gap: 22px; margin: 0; }
.ws .card { border-radius: var(--radius); padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ws .card > .card-head + * { margin-top: 14px; }

/* Hero */
.hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 26px 28px; color: #fff; display: flex; align-items: center; gap: 24px;
  background: linear-gradient(120deg, #4457f5 0%, #7b5cf6 48%, #0ea5e9 100%);
  box-shadow: 0 18px 40px -18px rgba(68, 87, 245, 0.7);
}
.hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.hero-text { flex: 1; position: relative; z-index: 1; display: grid; gap: 6px; }
.hero h1 { font-size: 1.9rem; }
.hero-date { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; opacity: 0.85; }
.hero p { color: rgba(255, 255, 255, 0.9); }
.hero-ring { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; }
.hero-ring svg { width: 124px; height: 124px; }
.hero-ring .ring-track { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 10; }
.hero-ring .ring-value { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.hero-ring .ring-num { fill: #fff; font-size: 26px; font-weight: 800; }
.hero-ring .ring-cap { fill: rgba(255, 255, 255, 0.85); font-size: 10px; font-weight: 600; }

/* KPI v2 */
.ws .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ws .kpi { border-radius: var(--radius); padding: 16px 18px; gap: 8px; position: relative; overflow: hidden; }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-badge { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.kpi-badge svg { width: 19px; height: 19px; }
.ws .kpi-value { font-size: 2rem; }
.kpi-trend { font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kpi-trend.up { background: var(--t-emerald); color: #067a50; }
.kpi-trend.down { background: var(--t-rose); color: #c01d3c; }
:root[data-theme="dark"] .kpi-trend.up { color: #6fe0b5; }
:root[data-theme="dark"] .kpi-trend.down { color: #ff9aae; }
.spark { width: 100%; height: 34px; display: block; }
.spark polyline { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spark path { stroke: none; opacity: 0.14; }
.tone-indigo .kpi-badge { background: linear-gradient(135deg, #4457f5, #7b8cff); } .tone-indigo .spark polyline { stroke: var(--c-indigo); } .tone-indigo .spark path { fill: var(--c-indigo); }
.tone-violet .kpi-badge { background: linear-gradient(135deg, #8b5cf6, #b794ff); } .tone-violet .spark polyline { stroke: var(--c-violet); } .tone-violet .spark path { fill: var(--c-violet); }
.tone-amber .kpi-badge { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .tone-amber .spark polyline { stroke: var(--c-amber); } .tone-amber .spark path { fill: var(--c-amber); }
.tone-emerald .kpi-badge { background: linear-gradient(135deg, #10b981, #34d399); } .tone-emerald .spark polyline { stroke: var(--c-emerald); } .tone-emerald .spark path { fill: var(--c-emerald); }
.tone-rose .kpi-badge { background: linear-gradient(135deg, #f43f5e, #fb7185); } .tone-rose .spark polyline { stroke: var(--c-rose); } .tone-rose .spark path { fill: var(--c-rose); }
.tone-sky .kpi-badge { background: linear-gradient(135deg, #0ea5e9, #38bdf8); } .tone-sky .spark polyline { stroke: var(--c-sky); } .tone-sky .spark path { fill: var(--c-sky); }
.small-kpis .kpi-value { font-size: 1.6rem; }

/* Charts */
.chart { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-size: 10px; }
.chart .b-in { fill: var(--c-emerald); } .chart .b-out { fill: var(--c-indigo); } .chart .b-miss { fill: var(--c-rose); }
.chart .b-now { fill: var(--c-amber); }
.chart .val { fill: var(--muted); font-size: 10px; font-weight: 700; }
.legend .l-in::before, .legend .l-out::before, .legend .l-miss::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l-in::before { background: var(--c-emerald); } .legend .l-out::before { background: var(--c-indigo); } .legend .l-miss::before { background: var(--c-rose); }
.legend span { font-size: 0.8rem; color: var(--muted); }
.rankbar { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.rankbar:first-child { border-top: 0; }
.rankbar .rb-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankbar .rb-track { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.rankbar .rb-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-violet), var(--c-indigo)); width: 0; }
.rankbar .rb-count { font-weight: 750; font-variant-numeric: tabular-nums; }

/* Avatars */
.av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 750; color: #fff; font-size: 0.95rem; }
.av.lg { width: 58px; height: 58px; font-size: 1.35rem; }
.av-0 { background: linear-gradient(135deg, #4457f5, #7b8cff); } .av-1 { background: linear-gradient(135deg, #8b5cf6, #b794ff); }
.av-2 { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .av-3 { background: linear-gradient(135deg, #10b981, #34d399); }
.av-4 { background: linear-gradient(135deg, #0ea5e9, #38bdf8); } .av-5 { background: linear-gradient(135deg, #f43f5e, #fb7185); }
.av-6 { background: linear-gradient(135deg, #14b8a6, #2dd4bf); } .av-7 { background: linear-gradient(135deg, #6366f1, #a78bfa); }

/* Lists */
.ws .list { grid-auto-rows: max-content; }
.ws .list > .item { padding: 12px 0; align-items: center; }
.attn { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.attn .attn-actions { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.attn .why { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.why.missed { background: var(--t-rose); color: #c01d3c; } .why.promise { background: var(--t-violet); color: #6d28d9; } .why.reminder { background: var(--t-amber); color: #8a5600; }
:root[data-theme="dark"] .why.missed { color: #ff9aae; }
:root[data-theme="dark"] .why.promise { color: #c4b1ff; }
:root[data-theme="dark"] .why.reminder { color: #f7c86b; }
.sched { display: grid; grid-template-columns: 64px 12px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.sched:first-child { border-top: 0; }
.sched .t { font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.sched .pin { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--c-amber); box-shadow: 0 0 0 4px var(--t-amber); }
.sched.overdue .pin { background: var(--c-rose); box-shadow: 0 0 0 4px var(--t-rose); }
.sched.overdue .t { color: var(--bad); }

/* Customers: list rows must keep their own height inside the scrolling pane. */
.ws .list-pane { top: 90px; max-height: calc(100vh - 116px); }
.ws .list-pane .list { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.ws .list-pane .list > * { flex: none; }
.ws .list.selectable > button.item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.ws .list.selectable > button.item .grow { display: grid; gap: 1px; }
.ws .list.selectable > button.item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws .list.selectable > button.item .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws .list.selectable > button.item .count { font-size: 0.78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.cust-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cust-head .grow { flex: 1; min-width: 200px; }
.cust-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cust-stat { border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.cust-stat b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cust-stat span { color: var(--muted); font-size: 0.82rem; }
.cust-stat.s-indigo { background: var(--t-indigo); } .cust-stat.s-rose { background: var(--t-rose); } .cust-stat.s-emerald { background: var(--t-emerald); } .cust-stat.s-amber { background: var(--t-amber); }
.tag-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--t-violet); color: var(--violet); font-weight: 650; font-size: 0.82rem; }
details.edit-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
details.edit-box summary { cursor: pointer; font-weight: 700; }

/* Calls */
.day-head { position: sticky; top: 70px; z-index: 2; background: var(--surface); padding: 12px 0 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; border-top: 0 !important; }
.call-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.call-type { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.call-type.incoming { background: var(--t-emerald); color: #0b8a5c; } .call-type.outgoing { background: var(--t-indigo); color: #3646d8; } .call-type.missed { background: var(--t-rose); color: #c01d3c; } .call-type.rejected, .call-type.declined { background: var(--t-amber); color: #8a5600; }
:root[data-theme="dark"] .call-type.incoming { color: #6fe0b5; }
:root[data-theme="dark"] .call-type.outgoing { color: #a7b1ff; }
:root[data-theme="dark"] .call-type.missed { color: #ff9aae; }
:root[data-theme="dark"] .call-type.rejected, :root[data-theme="dark"] .call-type.declined { color: #f7c86b; }
.dup-note { color: var(--faint); font-size: 0.78rem; }

/* Templates */
.tpl-group-head { display: flex; align-items: center; gap: 10px; }
.tpl-dot { width: 12px; height: 12px; border-radius: 4px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tpl-card {
  display: grid; gap: 8px; align-content: start; text-align: left; white-space: normal; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; padding: 16px; min-height: 150px; font-weight: 400; position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.tpl-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--tc, var(--c-indigo)); }
.tpl-card:hover { border-color: var(--tc); background: var(--surface); color: var(--text); transform: translateY(-1px); }
.tpl-card .title { font-weight: 750; }
.tpl-card .clamp { -webkit-line-clamp: 4; color: var(--muted); font-size: 0.9rem; }
.cat-branch_info { --tc: var(--c-indigo); } .cat-departments { --tc: var(--c-emerald); } .cat-people { --tc: var(--c-violet); } .cat-quick_replies { --tc: var(--c-amber); }
.tpl-dot.cat-branch_info, .tpl-dot.cat-departments, .tpl-dot.cat-people, .tpl-dot.cat-quick_replies { background: var(--tc); }

/* Business */
.branch-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; }
.branch-card > .full { grid-column: 1 / -1; }
.branch-title { display: flex; align-items: center; gap: 12px; }
.branch-title .ni { background: var(--t-rose); color: var(--c-rose); }
.hours-preview { padding: 10px 12px; border-radius: 12px; background: var(--t-emerald); color: var(--text); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 1000px) { .branch-card { grid-template-columns: 1fr; } }

/* Reminder rows */
.ws #reminder-list > .item { padding: 14px 0; }

@media (prefers-reduced-motion: no-preference) {
  .rankbar .rb-track span { transition: width 0.5s ease; }
  .tpl-card { transition: transform 0.15s ease, border-color 0.15s ease; }
}
@media (max-width: 1100px) { .ws .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.row > textarea { flex: 1; width: auto; min-width: 0; min-height: 48px; }
.ws-results .grow { display: grid; text-align: left; }
.ws .empty.stack { justify-items: center; padding: 40px 0; }
.ws button.link { padding: 0; min-height: 0; background: none; color: var(--accent); font-weight: 650; text-align: left; border-radius: 4px; white-space: normal; justify-content: flex-start; }
.ws button.link:hover { background: none; color: var(--accent-press); text-decoration: underline; }
.ws .page { max-width: 1560px; margin: 0 auto; }
@media (min-width: 1700px) { .ws .grid-3 { grid-template-columns: 1.2fr 1fr 1fr; } }
.ws .split { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); }
@media (max-width: 900px) { .ws .split { grid-template-columns: 1fr; } }

/* Account: the "numbers appear once…" note spans the whole row under the weekly tiles. */
#week > p, #week > .hint, #week > .muted { grid-column: 1 / -1; }

/* Admin + account on the workspace shell */
.ws-signout { background: transparent; color: #c9cfee; justify-content: flex-start; padding: 6px 4px; min-height: 40px; gap: 10px; font-weight: 600; }
.ws-signout:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.ws-signout .ni { width: 30px; height: 30px; }
.ws .page.narrow { max-width: 880px; }
.ws .plan-hero {
  background: linear-gradient(120deg, #4457f5 0%, #7b5cf6 50%, #14b8a6 100%); border-radius: 24px; padding: 24px 26px;
  box-shadow: 0 18px 40px -18px rgba(68, 87, 245, 0.7);
}
.ws .plan-hero::before { background: rgba(255, 255, 255, 0.12); right: -60px; top: -90px; width: 260px; height: 260px; }
.ws .plan-hero .muted { color: rgba(255, 255, 255, 0.85); }
.ws .plan-hero .meter > span { background: #fff; }
.ws .plan-hero .pill { background: rgba(255, 255, 255, 0.2); }
.ws .plan-hero button.small { background: #fff; color: #3646d8; }
.ws .plan-hero button.small:hover { background: #eef0ff; color: #3646d8; }
.ws .bars .bar span { background: linear-gradient(180deg, var(--c-indigo), var(--c-violet)); }
.ws .bars .bar span.second { background: var(--c-teal); }
.ws .legend i { background: var(--c-indigo); } .ws .legend i.second { background: var(--c-teal); }
.ws .hbar .track span { background: linear-gradient(90deg, var(--c-violet), var(--c-indigo)); }
.ws .hbar.latest .track span { background: linear-gradient(90deg, var(--c-teal), var(--c-emerald)); }
.ws .hbar.below .track span { background: linear-gradient(90deg, var(--c-rose), #fb7185); }
.ws table { border-collapse: separate; border-spacing: 0; }
.ws tbody tr:hover { background: var(--t-indigo); }
.ws .auth { margin-top: 10vh; }
.ws .drawer-head { background: linear-gradient(120deg, var(--t-indigo), var(--t-violet)); }

.ws .plan-hero .pill, .ws .plan-hero .pill.active, .ws .plan-hero .pill.expiring, .ws .plan-hero .pill.expired { color: #fff; background: rgba(255, 255, 255, 0.22); }

/* ---- Theme switch ---- */
.ws-theme { background: transparent; color: #c9cfee; justify-content: flex-start; padding: 6px 4px; min-height: 40px; gap: 10px; font-weight: 600; }
.ws-theme:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.ws-theme .ni { width: 30px; height: 30px; }
.ws-theme[aria-pressed="true"] .ni { background: #f5a524; color: #1b1300; }

/* ---- Responsive shell ----
   > 1100px  full sidebar
   761-1100  icon rail
   <= 760    top header + bottom tab bar (like the phone app) */
@media (max-width: 1100px) and (min-width: 761px) {
  .ws-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .ws-side { padding: 16px 10px; align-items: center; }
  .ws-brand > span:last-child, .ws-nav .nl, .ws-nav .count-pill, .tt-label, .live #live-text { display: none; }
  .ws-account { font-size: 0; gap: 0; padding: 4px; justify-content: center; }
  .ws-brand { padding: 4px 0; }
  .ws-nav a { padding: 6px; justify-content: center; }
  .ws-nav a[aria-current="page"]::before { left: -10px; }
  .ws-nav .badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; font-size: 0.66rem; padding: 0 4px; }
  .ws-side-foot { padding: 10px 0 0; justify-items: center; }
  .ws-theme { padding: 4px; min-height: 38px; }
  .ws-side-foot .ws-signout { display: flex; font-size: 0; gap: 0; padding: 4px; }
}
@media (max-width: 1100px) {
  .ws .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws .grid-2.wide-left, .ws .grid-3, .ws .grid-2 { grid-template-columns: 1fr; }
  .cust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ws .split { grid-template-columns: 1fr; }
  .ws .list-pane { position: static; max-height: 46vh; }
}
@media (max-width: 760px) {
  .ws-shell { display: block; }
  .ws-side {
    position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; gap: 8px;
    padding: 10px 12px; overflow: visible;
  }
  .ws-brand small { display: none; }
  .ws-side-foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 4px; }
  .ws-side-foot .live { display: none; }
  .tt-label { display: none; }
  .ws-theme, .ws-signout, .ws-account { font-size: 0; gap: 0; padding: 4px; min-height: 40px; }
  .ws-theme .ni, .ws-signout .ni, .ws-account .ni { width: 34px; height: 34px; }
  .ws-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #12162e; border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ws-nav a { flex-direction: column; gap: 2px; padding: 4px 2px; border-radius: 12px; font-size: 0.68rem; text-align: center; }
  .ws-nav .ni { width: 30px; height: 30px; }
  .ws-nav .nl { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .ws-nav .count-pill { display: none; }
  .ws-nav .badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 0.64rem; padding: 0 4px; }
  .ws-nav a[aria-current="page"]::before { display: none; }
  .ws-main { padding-bottom: 76px; }
  .ws-top { top: 58px; padding: 10px 12px; gap: 8px; }
  .ws-search { width: auto; flex: 1; }
  .ws-top .spacer, #top-refresh { display: none; }
  .ws .page { padding: 16px 12px 28px; gap: 16px; }
  .ws .card { padding: 16px; border-radius: 16px; }
  .ws .kpis { gap: 10px; }
  .ws .kpi { padding: 12px 14px; }
  .ws .kpi-value { font-size: 1.5rem; }
  .spark { height: 26px; }
  .hero { padding: 20px; border-radius: 20px; flex-direction: row; gap: 12px; }
  .hero h1 { font-size: 1.4rem; }
  .hero-ring svg { width: 92px; height: 92px; }
  .section-head { align-items: flex-start; }
  .section-head h1 { font-size: 1.35rem; }
  .attn { grid-template-columns: 36px minmax(0, 1fr); }
  .attn .attn-actions { grid-column: 1 / -1; }
  .call-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .call-row .when { grid-column: 3; grid-row: 1; }
  .call-row > button { grid-column: 2 / -1; justify-self: start; }
  .day-head { top: 118px; }
  .cust-head .row { width: 100%; }
  .tpl-grid { grid-template-columns: 1fr; }
  .branch-card { gap: 12px; }
  .hours-row { grid-template-columns: 70px 1fr 10px 1fr; gap: 6px; }
  .ws .auth { margin-top: 4vh; }
  dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }
  dialog form, dialog .dialog-body { padding: 18px; }
  dialog.drawer { width: 100vw; }
  .dialog-actions button { flex: 1; }
  .table-wrap { margin: -8px -16px -16px; }
}
@media (max-width: 400px) {
  .ws .kpis { grid-template-columns: 1fr 1fr; }
  .hero-ring { display: none; }
  .ws-nav .nl { font-size: 0.62rem; }
}
/* Needs-attention rows: text first; actions sit on the right when there is room and wrap below when not. */
.ws .list > .item.attn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ws .list > .item.attn > .grow { flex: 1 1 260px; min-width: 0; }
.ws .list > .item.attn .attn-actions { margin: 0 0 0 auto; }
@media (max-width: 760px) {
  .ws .list > .item.attn > .av, .ws .list > .item.attn > .icon { align-self: flex-start; }
  .ws .list > .item.attn > .grow { flex-basis: calc(100% - 52px); }
  .ws .list > .item.attn .attn-actions { margin: 0; padding-left: 50px; }
}

/* ---- Loading ---- */
.boot { display: grid; justify-items: center; gap: 14px; padding: 18vh 20px; color: var(--muted); font-weight: 600; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 0.8s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Snooze menu ---- */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 36px rgba(18, 22, 46, 0.18);
}
.menu-pop button { justify-content: flex-start; background: transparent; color: var(--text); min-height: 40px; font-weight: 600; }
.menu-pop button:hover { background: var(--surface-2); color: var(--text); }
.list-foot { padding-top: 12px; }
.ws #fu-count .chip { min-height: 32px; padding: 4px 12px; font-size: 0.82rem; }

/* ---- Response / callers analytics ---- */
.resp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.resp { border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.resp b { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.resp span { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resp.s-wait { background: var(--t-rose); } .resp.s-wait b { color: #c01d3c; }
.resp.s-fast { background: var(--t-emerald); } .resp.s-fast b { color: #0b8a5c; }
.resp.s-ok { background: var(--t-sky); } .resp.s-ok b { color: #0369a1; }
.resp.s-slow { background: var(--t-amber); } .resp.s-slow b { color: #8a5600; }
.resp.s-ind { background: var(--t-indigo); } .resp.s-ind b { color: #3646d8; }
.resp.s-vio { background: var(--t-violet); } .resp.s-vio b { color: #6d28d9; }
:root[data-theme="dark"] .resp b { color: var(--text) !important; }
.segbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.seg { flex: 0 0 auto; flex-grow: 1; min-width: 6px; }
.seg.s-fast, .legend .k.s-fast::before { background: var(--c-emerald); }
.seg.s-ok, .legend .k.s-ok::before { background: var(--c-sky); }
.seg.s-slow, .legend .k.s-slow::before { background: var(--c-amber); }
.seg.s-msg, .legend .k.s-msg::before { background: var(--c-violet); }
.seg.s-wait, .legend .k.s-wait::before { background: var(--c-rose); }
.legend .k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ws .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1400px) { .ws .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ws .grid-4 { grid-template-columns: 1fr; } .ws #fu-count { width: 100%; } }

/* ---- Team (organizations) ---- */
.c-teal { --nc: #2cc5b4; }
.tone-teal .kpi-badge { background: linear-gradient(135deg, #14b8a6, #5eead4); }
.me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); max-width: 280px; border: 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.me-chip > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.me-chip:hover { filter: brightness(.97); }
.me-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.me-chip .av { width: 28px; height: 28px; font-size: 12px; }
.me-chip > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.me-chip b, .me-chip small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-chip small { color: var(--muted); font-size: 11px; }
.team-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.team-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.team-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.team-table td .sub { display: block; font-size: 12px; }
.team-table tbody tr { cursor: pointer; transition: background 0.15s; }
.team-table tbody tr:hover { background: var(--surface-2); }
.team-table tbody tr:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.team-table tbody tr.selected { background: color-mix(in srgb, var(--c-teal) 12%, transparent); }
.team-table .rb-track { height: 5px; border-radius: 999px; background: var(--surface-2); margin-top: 4px; overflow: hidden; min-width: 60px; }
.team-table .rb-track span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-teal), var(--c-indigo)); transition: width 0.5s ease; }
.team-table .spark { width: 90px; height: 28px; }
.item.person { flex-wrap: wrap; }
.item.person.off { opacity: 0.6; }
.item.person .actions { gap: 8px; flex-wrap: wrap; margin-left: auto; }
.item.person select.compact, select.compact { flex: 0 0 auto; max-width: 140px; padding: 6px 28px 6px 10px; font-size: 13px; min-height: 0; width: auto; }
#team-seat-meter > span { background: linear-gradient(90deg, var(--c-teal), var(--c-indigo)); }
.invite-box { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.invite-box > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.invite-box .faint { font-size: 13px; }
.invite-box b { font-variant-numeric: tabular-nums; }
.invite-box .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: 0.04em; user-select: all; }
.chip.scope[aria-pressed="true"] { background: var(--c-teal); border-color: var(--c-teal); color: #fff; }
@media (max-width: 760px) {
  .me-chip > span { display: none; } .me-chip { padding: 4px; }
  .item.person .grow { flex: 1 1 calc(100% - 60px); }
  .item.person .actions { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
}

/* ---- Live desk: call panel + wallboard ---- */
.call-panel { position: fixed; right: 20px; bottom: 16px; z-index: 60; width: min(400px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 96px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); overflow: hidden; animation: cp-in 0.25s ease-out; }
.call-panel[hidden] { display: none; }
@keyframes cp-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.cp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #3b4ae0, #7c3aed); color: #fff; }
.call-panel.is-ringing .cp-head { background: linear-gradient(135deg, #047857, #0f766e); }
.cp-state { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.cp-state::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.cp-state.ringing::before { animation: cp-pulse 1s ease-in-out infinite; }
.cp-state.missed::before { background: #fecdd3; }
@keyframes cp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
.cp-timer { margin-left: auto; opacity: 0.92; font-size: 14px; }
.cp-head .icon-btn { background: rgba(255, 255, 255, 0.18); color: #fff; border: 0; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.cp-head .icon-btn svg { width: 16px; height: 16px; }
.cp-body { overflow-y: auto; padding: 14px; display: grid; gap: 12px; }
.cp-who { display: flex; gap: 12px; align-items: center; }
.cp-who h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.cp-who p { margin: 2px 0 0; font-size: 13px; }
.cp-open { display: grid; gap: 6px; }
.cp-flag { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--t-violet, var(--surface-2)); font-size: 13px; }
.cp-flag.bad { background: color-mix(in srgb, var(--c-rose) 14%, transparent); }
.cp-flag svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cp-sec h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cp-note { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); margin-bottom: 6px; }
.cp-note p { margin: 0 0 2px; white-space: pre-wrap; font-size: 14px; }
.cp-note span { font-size: 12px; }
.cp-calls { display: grid; gap: 4px; font-size: 13px; }
.cp-call { display: flex; align-items: center; gap: 8px; }
.cp-call .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-indigo); }
.cp-call .dot.missed, .cp-call .dot.rejected { background: var(--c-rose); }
.cp-call .dot.incoming { background: var(--c-emerald); }
.row.wrap { flex-wrap: wrap; }
.chip.small { padding: 4px 10px; font-size: 12.5px; min-height: 0; }
.cp-allow { font-size: 13px; justify-self: start; }
.tag-chip.warn { background: color-mix(in srgb, var(--c-rose) 16%, transparent); color: var(--c-rose); }
.live-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.live-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.live-person .sub { display: block; font-size: 12.5px; color: var(--muted); }
.live-person.ringing { border-color: #10b981; background: color-mix(in srgb, #10b981 10%, var(--surface)); }
.live-person.ringing .av { animation: cp-ring 1s ease-in-out infinite; }
.live-person.ringing { border-width: 2px; }
.live-person.ringing .sub { color: #047857; font-weight: 700; }
:root[data-theme="dark"] .live-person.ringing .sub { color: #6ee7b7; }
.live-person.offhook { border-color: var(--c-indigo); background: color-mix(in srgb, var(--c-indigo) 9%, var(--surface)); }
.live-time { font-weight: 700; font-size: 14px; }
@keyframes cp-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .call-panel, .cp-state.ringing::before, .live-person.ringing .avatar { animation: none; } }
@media (max-width: 760px) {
  .call-panel { right: 8px; left: 8px; width: auto; bottom: 76px; max-height: calc(100dvh - 150px); }
}
.cat-pick { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.cat-pick select { padding: 4px 26px 4px 8px; font-size: 13px; min-height: 0; width: auto; }
.promise-form { gap: 8px; align-items: center; }
.promise-form select { width: auto; flex: 0 0 auto; }
.promise-form input { flex: 1 1 200px; min-width: 0; }

/* ---- Developers ---- */
.c-sky { --nc: #38b6f0; }
.icon.sky { background: var(--t-sky); color: var(--c-sky); }
.scope { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; color: var(--muted); font-weight: 600; }
.item.off { opacity: 0.6; }
.item.hook { flex-wrap: wrap; }
.item.hook .url { word-break: break-all; }
.item.hook .actions { gap: 6px; margin-left: auto; }
.deliveries { flex-basis: 100%; display: grid; gap: 6px; padding: 10px 0 0 52px; }
.delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-top: 1px dashed var(--border); }
.delivery .grow { flex: 1 1 200px; min-width: 0; }
.payload, pre.code { flex-basis: 100%; margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; }
.example h3 { margin: 0; font-size: 15px; }
.example { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.example:last-child { border-bottom: 0; }
dialog.modal form { display: grid; gap: 8px; width: min(560px, calc(100vw - 48px)); }
dialog.modal h2 { margin: 0 0 4px; }
.options { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.check.option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.check.option input { margin-top: 3px; }
.check.option .sub { display: block; font-size: 12.5px; }
.secret-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-radius: 10px; background: var(--surface-2); }
.secret-row code.secret { flex: 1 1 260px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
button.ghost.danger-text, button.link.danger-text { color: var(--bad); }
button.ghost.danger-text:hover { background: var(--bad-weak); color: var(--bad); }
@media (max-width: 760px) { #nav-dev { display: none; } .deliveries { padding-left: 0; } }

/* ---- Accessibility pass ---- */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-side :focus-visible { outline-color: #fff; }
:root[data-theme="dark"] .ws { --shadow: none; }
button.danger:hover { background: var(--bad); filter: brightness(0.9); }
.tag-chip.warn { color: #be123c; }
:root[data-theme="dark"] .tag-chip.warn { color: #fda4af; }
.cp-save { display: flex; gap: 6px; margin-top: 6px; }
.cp-save input { flex: 1; min-width: 0; padding: 6px 10px; }
.cp-who .av.phone-av svg { width: 24px; height: 24px; }
@media (max-width: 760px), (pointer: coarse) {
  button.small, .chip, .chip.small, .cat-pick select, select.compact, .ws #fu-count .chip { min-height: 44px; }
  .cp-head .icon-btn { width: 44px; height: 44px; }
  .ws button.link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .team-table .rb-track span, .team-table tbody tr, .meter > span { transition: none; }
}
.kpi-trend.flat { background: var(--surface-2); color: var(--muted); }
.av.phone-av { display: inline-grid; place-items: center; background: var(--t-indigo); color: var(--c-indigo); }

/* ---- Phone bottom bar: four tabs + More ---- */
.nav-more { display: none; }
dialog.sheet { width: min(420px, calc(100vw - 24px)); padding: 18px 16px; }
dialog.sheet h2 { margin: 0 0 8px; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; min-height: 48px; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 650; }
.more-item:hover, .more-item[aria-current="page"] { background: var(--surface-2); }
.more-item .ni { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--nc, var(--accent)); }
.more-item .ni svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .ws-nav .nav-extra { display: none !important; }
  .ws-nav .nav-more { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 12px; font-size: 0.68rem; background: none; border: 0; color: inherit; min-height: 0; font-weight: 600; }
  .ws-nav .nav-more .ni { width: 30px; height: 30px; display: grid; place-items: center; }
  .ws-nav .nav-more[aria-current="page"] { color: #fff; }
  dialog.sheet { margin: auto auto 0; border-radius: 20px 20px 0 0; width: 100vw; max-width: 100vw; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ---- Template editor (web) ---- */
dialog.tpl-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tpl-head h2 { margin: 0; }
.tpl-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.tpl-form { gap: 8px; }
.tpl-form textarea { font-size: 15px; line-height: 1.5; min-height: 170px; }
.tpl-count { justify-self: end; font-size: 12px; }
.tpl-preview { position: sticky; top: 0; display: grid; gap: 8px; }
.tpl-format { display: inline-flex; gap: 4px; }
.tpl-format .fmt-B { font-weight: 800; } .tpl-format .fmt-I { font-style: italic; } .tpl-format .fmt-S { text-decoration: line-through; }
.label { font-weight: 650; font-size: 0.9rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip[aria-checked="true"] { background: var(--tc, var(--accent)); border-color: var(--tc, var(--accent)); color: #fff; }
.detail-chip { background: var(--t-indigo); border-color: transparent; color: var(--c-indigo); font-weight: 650; }
.blank-chip { background: var(--t-violet); border-color: transparent; color: #6d28d9; font-weight: 650; }
.chip[role="radio"][aria-checked="true"]:not(.cat-chip) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tpl-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px; margin: 6px 0 0; display: grid; gap: 8px; min-width: 0; }
.tpl-box legend { font-weight: 700; padding: 0 6px; }
.tpl-field-form { border-radius: 12px; background: var(--surface-2); padding: 12px; display: grid; gap: 8px; }
.file-btn { position: relative; overflow: hidden; justify-self: start; cursor: pointer; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.tpl-starters { display: grid; gap: 8px; margin-top: 10px; }
.tpl-starters:empty { display: none; }
.starter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.starter { display: grid; gap: 4px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); white-space: normal; min-height: 0; font-weight: 400; align-content: start; }
.starter:hover { border-color: var(--accent); background: var(--t-indigo); color: var(--text); }
.starter .faint { font-size: 12.5px; line-height: 1.4; }
.wa-chat { background: #ece5dd; border-radius: 16px; padding: 14px; min-height: 160px; }
:root[data-theme="dark"] .wa-chat { background: #0b141a; }
.wa-bubble { margin-left: auto; max-width: 94%; background: #dcf8c6; color: #111b21; border-radius: 12px 2px 12px 12px; padding: 10px 12px 6px; display: grid; gap: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
:root[data-theme="dark"] .wa-bubble { background: #005c4b; color: #e9edef; }
.wa-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.wa-empty { color: #667781; font-style: italic; font-size: 14px; }
.wa-blank { background: #ede8fc; color: #6d28d9; font-weight: 700; border-radius: 4px; padding: 0 3px; }
.wa-file { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.55); border-radius: 8px; padding: 8px; font-weight: 600; font-size: 13.5px; }
:root[data-theme="dark"] .wa-file { background: rgba(255, 255, 255, 0.1); }
.wa-file svg { width: 18px; height: 18px; flex: none; }
.wa-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-time { justify-self: end; font-size: 11px; color: #667781; }
:root[data-theme="dark"] .wa-time { color: #8696a0; }
.icon.violet { background: var(--t-violet); color: #6d28d9; }
@media (max-width: 860px) {
  .tpl-body { grid-template-columns: 1fr; }
  .tpl-preview { position: static; order: -1; }
}
.reply-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; }
.reply-files .label, .reply-files .hint { flex-basis: 100%; margin: 0; }
.reply-app { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.reply-app select { width: auto; min-width: 200px; }
.reply-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 13px; }
.reply-file svg { width: 16px; height: 16px; }

/* ---- Dropdowns (combobox.js): searchable, icons, keyboard; sheet on phones ---- */
select.qs-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.qs { position: relative; display: block; width: 100%; min-width: 0; }
.qs[hidden] { display: none; }
.qs-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; white-space: normal; justify-content: flex-start; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.qs-trigger:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface); color: var(--text); }
.qs-trigger:focus-visible, .qs.open .qs-trigger { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.qs-trigger:disabled { opacity: .6; cursor: not-allowed; }
.qs-value { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.qs-text { display: grid; min-width: 0; line-height: 1.25; }
.qs-main, .qs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.qs-placeholder { color: var(--muted); }
.qs-chevron { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.qs.open .qs-chevron { transform: rotate(180deg); }
.qs-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--t-indigo, var(--surface-2)); color: var(--c-indigo, var(--accent)); }
.qs-ic svg { width: 16px; height: 16px; }
.qs-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 48px rgba(15, 23, 42, .18); overflow: hidden; display: flex; flex-direction: column; max-height: min(360px, 60vh); min-width: 240px; animation: qs-in .12s ease-out; }
.qs-pop.qs-up { top: auto; bottom: calc(100% + 6px); }
@keyframes qs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qs-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); }
.qs-search svg { width: 18px; height: 18px; flex: none; }
.qs-search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 4px 0; min-height: 0; font-size: 15px; color: var(--text); box-shadow: none; }
.qs-search input:focus-visible { outline: none; }
.qs-list { overflow-y: auto; padding: 6px; outline: none; }
.qs-group { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.qs-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; min-height: 42px; color: var(--text); }
.qs-opt.active { background: var(--surface-2); }
.qs-opt[aria-selected="true"] { color: var(--accent); font-weight: 650; }
.qs-opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.qs-opt .qs-text { flex: 1; }
.qs-opt mark { background: color-mix(in srgb, var(--c-amber, #f59e0b) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.qs-check { color: var(--accent); width: 18px; height: 18px; flex: none; }
.qs-check svg { width: 18px; height: 18px; }
.qs-empty, .qs-more { padding: 14px 12px; color: var(--muted); font-size: 13.5px; text-align: center; }
.qs-more { padding: 8px 12px 10px; font-size: 12.5px; }
.qs-compact { width: auto; display: inline-block; }
.qs-compact .qs-trigger { min-height: 36px; padding: 4px 8px 4px 10px; border-radius: 10px; font-size: 14px; }
.qs-compact .qs-pop { min-width: 200px; }
.qs-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .45); }
.qs-pop.qs-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 91; max-height: 72dvh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: qs-up .18s ease-out; }
.qs-sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 8px auto 2px; }
.qs-sheet .qs-opt { min-height: 48px; }
@keyframes qs-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qs-pop, .qs-sheet { animation: none; } .qs-chevron { transition: none; } }
.qs-ic.tone-emerald { background: var(--t-emerald); color: var(--c-emerald); }
.qs-ic.tone-rose { background: var(--t-rose); color: var(--c-rose); }
.qs-ic.tone-amber { background: var(--t-amber); color: #b45309; }
.qs-ic.tone-violet { background: var(--t-violet); color: #6d28d9; }
.qs-ic.tone-sky { background: var(--t-sky); color: #0369a1; }

/* ---- Icons & consistency pass ---- */
/* Only icon-carrying controls become icon+label rows; card-like buttons keep their own layout. */
button:where(:has(> svg):not(.tpl-card, .starter, .item, .qs-trigger)), .button:where(:has(> svg)), summary.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button > svg, .button > svg { width: 18px; height: 18px; flex: none; }
button.small > svg, .button.small > svg { width: 16px; height: 16px; }
button.small, .button.small { gap: 6px; }
button.icon-only, .button.icon-only { width: 40px; min-width: 40px; padding: 0; }
button.small.icon-only { width: 36px; min-width: 36px; height: 36px; }
button.wa-soft { background: var(--ok-weak); color: var(--wa); border: 1px solid transparent; }
button.wa-soft:hover { background: var(--ok-weak); border-color: var(--wa); color: var(--wa); }
:root[data-theme="dark"] button.wa-soft { color: #4ade80; }
.ch-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; background: var(--t-indigo); color: var(--c-indigo); }
.ch-icon svg { width: 16px; height: 16px; }
.ch-icon.tone-rose { background: var(--t-rose); color: var(--c-rose); }
.ch-icon.tone-amber { background: var(--t-amber); color: #b45309; }
.ch-icon.tone-violet { background: var(--t-violet); color: #6d28d9; }
.ch-icon.tone-emerald { background: var(--t-emerald); color: #047857; }
.ch-icon.tone-sky { background: var(--t-sky); color: #0369a1; }
.ch-icon.tone-teal { background: var(--t-teal); color: #0f766e; }
.card-head { gap: 10px; }
.card-head > h2 { margin-right: auto; }
.card-head .ch-icon + h2 { margin-left: 0; }
.ws-search { position: relative; }
.field-wrap { position: relative; }
.field-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); pointer-events: none; display: grid; z-index: 1; }
.field-ic svg { width: 18px; height: 18px; }
.field-wrap input { padding-left: 40px; width: 100%; }
.ws-search input { padding-left: 40px; }
summary.button svg:last-child { width: 14px; height: 14px; opacity: .7; }
/* Dialog footers stay in view while the form scrolls. */
dialog > :is(form, .dialog-body) > .dialog-actions { position: sticky; bottom: 0; margin: 18px -22px -22px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); z-index: 2; }
dialog.sheet .dialog-actions, dialog.modal .dialog-actions { position: static; margin: 12px 0 0; padding: 0; border: 0; }
@media (max-width: 760px) {
  dialog > :is(form, .dialog-body) > .dialog-actions { bottom: 0; margin: 16px -18px -18px; padding-inline: 18px; }
  .reply-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .reply-actions .wa { grid-column: 1 / -1; order: -1; }
  #top-add-reminder .lbl { display: none; }
  #top-add-reminder { width: 44px; padding: 0; }
}
/* Callback row: one aligned line. */
.promise-form { display: grid; grid-template-columns: minmax(190px, auto) 1fr auto; gap: 8px; align-items: center; }
.promise-form > * { min-height: 44px; }
@media (max-width: 760px) { .promise-form { grid-template-columns: 1fr; } }
/* Customer edit section. */
details.edit-box summary { list-style: none; display: flex; gap: 8px; align-items: center; }
details.edit-box summary::-webkit-details-marker { display: none; }
/* Period pickers look like a segmented control, not filters. */
#call-range, #team-range, .chips.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); flex-wrap: nowrap; }
#call-range .chip, #team-range .chip, .chips.seg .chip { border: 0; background: transparent; min-height: 34px; border-radius: 9px; color: var(--muted); box-shadow: none; }
#call-range .chip[aria-pressed="true"], #team-range .chip[aria-pressed="true"], .chips.seg .chip[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(18, 22, 46, .12); }
#call-range .chip.scope[aria-pressed="true"] { background: var(--c-teal); color: #fff; }
:root[data-theme="dark"] #call-range .chip[aria-pressed="true"]:not(.scope), :root[data-theme="dark"] #team-range .chip[aria-pressed="true"] { background: var(--surface-2); filter: brightness(1.4); }
/* Filter chips scroll sideways on phones instead of wrapping. */
@media (max-width: 760px) {
  #customer-filters, #fu-count, #call-filter, #reminder-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #customer-filters::-webkit-scrollbar, #fu-count::-webkit-scrollbar { display: none; }
  #call-range, #team-range { overflow-x: auto; max-width: 100%; }
}
/* Template cards. */
.tpl-grid { align-items: start; }
.tpl-card .clamp { white-space: pre-line; }
.tpl-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--faint); align-items: center; margin-top: 4px; }
.tpl-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tpl-meta svg { width: 14px; height: 14px; }
.tpl-pin { color: var(--accent); display: inline-grid; }
.tpl-pin svg { width: 16px; height: 16px; }
.kpi-trend { display: inline-flex; align-items: center; gap: 4px; }
/* Nothing inside the split view may force it wider than the screen. */
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) !important; } }
.cust-head { flex-wrap: wrap; }
.cust-head > .row { flex-wrap: wrap; gap: 8px; }
.promise-form > * { min-width: 0; }
details.edit-box summary > svg:last-child { margin-left: auto; width: 18px; height: 18px; transition: transform .15s; color: var(--muted); }
details.edit-box[open] summary > svg:last-child { transform: rotate(90deg); }
details.edit-box summary > svg:first-child { width: 18px; height: 18px; color: var(--accent); }

/* Mine/Team is its own choice, separate from the period. */
#call-range .chip.scope:last-of-type { margin-right: 10px; position: relative; }
#call-range .chip.scope:last-of-type::after { content: ''; position: absolute; right: -7px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.kpi-trend svg { width: 14px; height: 14px; }
.kpi-trend.flat { background: var(--surface-2); color: var(--muted); }
/* Card-like buttons: content fills the card (buttons centre their content by default). */
.tpl-card, .starter { grid-template-columns: minmax(0, 1fr); justify-content: stretch; text-align: left; }

/* Icon tints readable on dark backgrounds. */
:root[data-theme="dark"] :is(.qs-ic, .ch-icon).tone-violet { color: #c4b5fd; }
:root[data-theme="dark"] :is(.qs-ic, .ch-icon).tone-amber { color: #fcd34d; }
:root[data-theme="dark"] :is(.qs-ic, .ch-icon).tone-sky { color: #7dd3fc; }
:root[data-theme="dark"] :is(.qs-ic, .ch-icon).tone-emerald { color: #6ee7b7; }
:root[data-theme="dark"] :is(.qs-ic, .ch-icon).tone-teal { color: #5eead4; }
:root[data-theme="dark"] :is(.qs-ic, .ch-icon).tone-rose { color: #fda4af; }
@media (prefers-reduced-motion: reduce) { .qs-trigger, details.edit-box summary > svg { transition: none; } }
.qs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Dropdowns inside flex rows (custom repeat, ends) share the row instead of wrapping. */
.row > .qs { flex: 1; width: auto; min-width: 0; }
.row > .qs-compact { flex: 0 0 auto; }
.cat-pick { display: inline-flex; align-items: center; gap: 8px; }
.cat-pick .qs { width: auto; min-width: 150px; }
.cat-pick .qs-trigger { min-height: 34px; padding: 2px 8px 2px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; }
/* Scrollable chip rows keep their own height inside flex columns. */
#customer-filters, #fu-count, #call-range, #team-range { flex: none; min-height: max-content; }

/* Templates page v2: search, filters, icon cards with quick actions */
.tpl-toolbar { display: grid; gap: 12px; }
.tpl-toolbar[hidden] { display: none; }
.tpl-toolbar .field-wrap { max-width: 520px; }
.tpl-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: none; min-height: max-content; padding-bottom: 2px; }
.tpl-filters::-webkit-scrollbar { display: none; }
.tpl-filters .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.tpl-filters .chip svg { width: 15px; height: 15px; }
.tpl-section { gap: 12px; }
.tpl-group-head h2 { margin: 0; font-size: 1.05rem; }
.tpl-count { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, rgba(120,120,140,.12)); color: var(--muted); font-size: .78rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.tpl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
article.tpl-card { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px; cursor: pointer; }
article.tpl-card::before { height: 3px; }
article.tpl-card:hover { box-shadow: 0 8px 24px rgba(18, 22, 46, .10); }
article.tpl-card:focus-within { border-color: var(--tc); }
.tpl-card .tpl-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.tpl-card .tpl-head .ch-icon { width: 38px; height: 38px; border-radius: 11px; }
.tpl-card .tpl-head .ch-icon svg { width: 19px; height: 19px; }
.tpl-title { display: grid; min-width: 0; flex: 1; gap: 1px; }
.tpl-title .faint { font-size: .78rem; }
button.tpl-open { all: unset; font-weight: 750; font-size: 1rem; line-height: 1.3; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
button.tpl-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
button.tpl-open:focus-visible { outline: none; }
article.tpl-card:has(.tpl-open:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.tpl-card .tpl-pin, .tpl-actions button { position: relative; z-index: 1; }
.tpl-card .tpl-pin { color: var(--faint); flex: none; }
.tpl-card .tpl-pin.on { color: var(--c-rose); }
.tpl-card button.tpl-pin.on svg { fill: currentColor; }
.tpl-bubble { background: #e7f7ec; color: #14261b; border-radius: 4px 14px 14px 14px; padding: 10px 12px; font-size: .9rem; line-height: 1.45; flex: 1; }
.tpl-bubble .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; white-space: pre-line; color: inherit; font-size: inherit; overflow-wrap: anywhere; }
:root[data-theme="dark"] .tpl-bubble { background: #173326; color: #dff3e6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tpl-bubble { background: #173326; color: #dff3e6; } }
.tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tpl-foot .tpl-meta { margin: 0; }
.tpl-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.tpl-actions button, .tpl-head button.tpl-pin { min-height: 36px; min-width: 36px; padding: 0; border-radius: 10px; color: var(--muted); }
.tpl-actions button:hover, .tpl-head button.tpl-pin:hover { color: var(--text); background: var(--surface-2, rgba(120,120,140,.12)); }
.tpl-actions svg, .tpl-head button.tpl-pin svg { width: 17px; height: 17px; }
.tpl-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; }
.tpl-empty .ch-icon { width: 52px; height: 52px; border-radius: 16px; }
.tpl-empty .ch-icon svg { width: 26px; height: 26px; }
.tpl-empty h2 { margin: 0; }
.tpl-empty p { max-width: 440px; margin: 0; }
@media (max-width: 760px) { .tpl-actions button, .tpl-head button.tpl-pin { min-height: 44px; min-width: 44px; width: 44px; height: 44px; } }

/* Finished reminders: dates, timeliness, outcome and history */
.rem-done-tools { display: grid; gap: 10px; }
.rem-done-tools[hidden] { display: none; }
.rem-done-tools .field-wrap { max-width: 520px; }
.rem-done-summary { margin: 0; font-weight: 650; font-size: .9rem; }
.item.rem-done { align-items: flex-start; }
.rem-done .grow { gap: 6px; }
.rem-done-top { gap: 8px; align-items: center; font-size: .82rem; }
.rem-timing { font-weight: 700; font-size: .8rem; }
.rem-timing.t-ok { color: var(--ok, #12773a); }
.rem-timing.t-late { color: var(--bad); }
.rem-timing.t-early { color: var(--accent); }
.rem-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .86rem; align-items: center; }
.link-btn { all: unset; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 650; cursor: pointer; border-radius: 6px; }
.link-btn svg { width: 14px; height: 14px; }
.link-btn:hover { text-decoration: underline; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.rem-outcome { all: unset; display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 12px; background: var(--t-indigo); color: var(--text); font-size: .9rem; line-height: 1.4; cursor: pointer; max-width: 640px; }
button.rem-outcome svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
button.rem-outcome:focus-visible { outline: 2px solid var(--accent); }
.rem-done > .grow > button.ghost.small { justify-self: start; }
.rem-history-box summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); font-weight: 650; min-height: 32px; list-style: none; }
.rem-history-box summary::-webkit-details-marker { display: none; }
.rem-history-box summary svg { width: 14px; height: 14px; }
.rem-history { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 8px; }
.rem-history li { display: grid; gap: 1px; position: relative; font-size: .86rem; }
.rem-history li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); border: 2px solid var(--surface); }
.rem-history li.rh-done::before { background: var(--ok, #12773a); }
.rem-history li.rh-snoozed::before { background: var(--c-amber); }
.rem-history li.rh-reopened::before, .rem-history li.rh-created::before { background: var(--accent); }
.rh-note { font-style: italic; color: var(--muted); }
#done-suggest { margin-bottom: 8px; }
@media (max-width: 760px) { .item.rem-done { flex-wrap: wrap; } .item.rem-done > .actions { width: 100%; } }
.item.rem-done > .ni, .item.rem-done > span:first-child { align-self: flex-start; }

/* Notes about one call */
button.call-note-snippet { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 6px 52px; padding: 8px 12px; border-radius: 12px; background: var(--t-violet); color: var(--text); font-size: .88rem; line-height: 1.4; cursor: pointer; max-width: calc(100% - 52px); overflow-wrap: anywhere; }
.timeline button.call-note-snippet { margin: 6px 0 0; max-width: 100%; }
button.call-note-snippet svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #6d28d9; }
:root[data-theme="dark"] button.call-note-snippet svg { color: #c4b5fd; }
button.call-note-snippet:hover { filter: brightness(.97); }
button.call-note-snippet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.has-note { color: #6d28d9; }
:root[data-theme="dark"] button.has-note { color: #c4b5fd; }
#callnote-tags { margin-bottom: 10px; }
.call-actions { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 760px) {
  .call-row > .call-actions { grid-column: 2 / -1; justify-self: start; }
  button.call-note-snippet { margin-left: 46px; max-width: calc(100% - 46px); }
}

/* =====================================================================
   Design system v3 — tokens + screen polish (Customers, Reminders dialog,
   Templates, template editor, Business, Account). Later rules win.
   ===================================================================== */
.ws {
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --el-1: 0 1px 2px rgba(18, 22, 46, .05);
  --el-2: 0 1px 2px rgba(18, 22, 46, .04), 0 8px 24px rgba(18, 22, 46, .06);
  --el-3: 0 2px 6px rgba(18, 22, 46, .06), 0 18px 48px rgba(18, 22, 46, .14);
  --ink-amber: #92400e; --ink-emerald: #047857; --ink-rose: #be123c; --ink-violet: #6d28d9; --ink-indigo: #3442c9; --ink-sky: #0369a1;
}
:root[data-theme="dark"] .ws { --el-1: none; --el-2: none; --el-3: 0 18px 48px rgba(0, 0, 0, .45); --ink-amber: #fcd34d; --ink-emerald: #6ee7b7; --ink-rose: #fda4af; --ink-violet: #c4b5fd; --ink-indigo: #a5b4fc; --ink-sky: #7dd3fc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws { --ink-amber: #fcd34d; --ink-emerald: #6ee7b7; --ink-rose: #fda4af; --ink-violet: #c4b5fd; --ink-indigo: #a5b4fc; --ink-sky: #7dd3fc; } }

.ws .page { max-width: 1400px; margin-inline: auto; }
.ws .card { border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--el-2); }
.card-head > .faint:last-child, .card-head > button:last-child { margin-left: auto; }
.card-head h2, .card-head h3 { margin-block: 0; }
.card-head > h2, .card-head > h3 { margin-right: auto; }
.dlg-title { display: flex; align-items: center; gap: 10px; }
.dlg-title h2 { margin: 0; }
.ws dialog { border-radius: var(--r-xl); box-shadow: var(--el-3); }

/* ---- Customers ---- */
.cust-head h2 { font-size: var(--fs-xl); }
.cust-stats { gap: 12px; }
.cust-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface) !important; border: 1px solid var(--border); }
.cust-stat b { font-size: 1.25rem; line-height: 1.15; }
.cust-stat span:not(.cs-ic) { font-size: var(--fs-sm); }
.cs-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.cs-ic svg { width: 18px; height: 18px; }
.cust-stat.s-indigo .cs-ic { background: var(--t-indigo); color: var(--ink-indigo); }
.cust-stat.s-rose .cs-ic { background: var(--t-rose); color: var(--ink-rose); }
.cust-stat.s-emerald .cs-ic { background: var(--t-emerald); color: var(--ink-emerald); }
.cust-stat.s-amber .cs-ic { background: var(--t-amber); color: var(--ink-amber); }

.composer { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); padding: 6px; }
.composer-tabs { display: inline-flex; gap: 4px; padding: 2px; }
.composer-tabs button { min-height: 36px; padding: 6px 14px; border-radius: 10px; background: transparent; color: var(--muted); border: 0; font-weight: 650; box-shadow: none; }
.composer-tabs button svg { width: 16px; height: 16px; }
.composer-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--el-1); }
.composer-body { padding: 8px 8px 6px; }
.composer textarea { min-height: 84px; background: var(--surface); }
.composer .promise-form { display: grid; grid-template-columns: 1fr; gap: 4px; }
.composer .promise-form .grid-2 { gap: 10px; }
.composer .promise-form select, .composer .promise-form input { width: 100%; background: var(--surface); }
.composer-foot { justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; }

.tl { display: grid; }
.tl-day { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 16px 0 6px 46px; }
.tl-day:first-child { margin-top: 4px; }
.tl-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 8px 6px 8px 0; border-radius: 12px; }
.tl-item::before { content: ""; position: absolute; left: 15px; top: -8px; bottom: -8px; width: 2px; background: var(--border); }
.tl-day + .tl-item::before { top: 50%; }
.tl-item:hover { background: var(--surface-2); }
.tl-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--surface); }
.tl-dot svg { width: 15px; height: 15px; }
.tl-item.tone-ok .tl-dot { background: var(--t-emerald); color: var(--ink-emerald); }
.tl-item.tone-bad .tl-dot { background: var(--t-rose); color: var(--ink-rose); }
.tl-item.tone-indigo .tl-dot { background: var(--t-indigo); color: var(--ink-indigo); }
.tl-item.tone-violet .tl-dot { background: var(--t-violet); color: var(--ink-violet); }
.tl-item.tone-warn .tl-dot { background: var(--t-amber); color: var(--ink-amber); }
.tl-item .title { font-weight: 650; }
.tl-item .when { font-size: var(--fs-sm); color: var(--faint); font-variant-numeric: tabular-nums; }
.tl-item .call-note-snippet { margin: 6px 0 0; max-width: 100%; }
@media (hover: hover) { .tl-item > button:not(.has-note) { opacity: 0; transition: opacity .15s; } .tl-item:hover > button, .tl-item > button:focus-visible { opacity: 1; } }
.cat-pick .qs-trigger { border: 1px solid var(--border); }

/* ---- Templates: no coloured top strip; colour lives in the icon tile ---- */
article.tpl-card::before { display: none; }
article.tpl-card { border-radius: var(--r-xl); box-shadow: var(--el-1); }
article.tpl-card:hover { border-color: color-mix(in srgb, var(--tc) 45%, var(--border)); box-shadow: var(--el-2); }
.tpl-bubble { background: color-mix(in srgb, #25d366 9%, var(--surface)); border: 1px solid color-mix(in srgb, #25d366 22%, var(--border)); color: var(--text); }
:root[data-theme="dark"] .tpl-bubble { background: color-mix(in srgb, #25d366 10%, var(--surface)); color: var(--text); }
.tpl-group-head h2 { font-size: var(--fs-lg); }

/* ---- Template editor ---- */
.tpl-box { border-radius: var(--r-lg); background: var(--surface-2); border-color: transparent; padding: 14px 16px; }
.tpl-box legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); }
.tpl-box legend .ch-icon { width: 28px; height: 28px; border-radius: 9px; }
.tpl-box legend + * { clear: both; }
.tpl-box .hint { margin: 0; }
.cat-chip { border-width: 1.5px; }
.cat-chip svg { width: 15px; height: 15px; }
.cat-chip[aria-checked="true"] { background: color-mix(in srgb, var(--tc) 14%, var(--surface)); border-color: var(--tc); color: var(--text); font-weight: 700; }
.cat-chip[aria-checked="true"] svg { color: var(--tc); }
.switch-list { display: grid; gap: 8px; margin-top: 6px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); cursor: pointer; margin: 0; font-weight: 400; }
.switch-row .grow { display: grid; gap: 1px; }
.switch-row b { font-weight: 650; }
.switch-row small { color: var(--muted); font-size: var(--fs-sm); }
.switch-row .ch-icon { width: 32px; height: 32px; }
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; min-width: 46px; height: 28px; min-height: 28px; margin: 0; padding: 0; border-radius: 999px; background: var(--border); border: 0; position: relative; cursor: pointer; transition: background .15s; }
input.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::before { transform: translateX(18px); }
input.switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input.switch:disabled { opacity: .5; cursor: not-allowed; }
.wa-phone { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--el-2); }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #075e54; color: #fff; }
.wa-top b { display: block; font-size: var(--fs-md); }
.wa-top small { opacity: .8; font-size: var(--fs-xs); }
.wa-av { width: 34px; height: 34px; border-radius: 50%; background: #dfe5e7; color: #54656f; display: grid; place-items: center; font-weight: 700; }
.wa-phone .wa-chat { border-radius: 0; min-height: 220px; }
:root[data-theme="dark"] .wa-top { background: #202c33; }

/* ---- Reminder dialog ---- */
.quick-when { margin-top: 10px; gap: 6px; }
.quick-when .chip, .hour-presets .chip { min-height: 34px; padding: 4px 12px; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.quick-when .chip svg, .hour-presets .chip svg { width: 14px; height: 14px; }
.alert-toggles { gap: 8px; }
.alert-toggles .check { position: relative; margin: 0; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; background: var(--surface); }
.alert-toggles .check input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.alert-toggles .check:has(input:checked) { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.alert-toggles .check { min-width: 0; }
.alert-toggles .check:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
#reminder-dialog .summary-line { background: var(--t-indigo); color: var(--ink-indigo); }

/* ---- Business ---- */
.branch-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px 28px; }
.branch-title { gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.branch-title .ch-icon { width: 42px; height: 42px; border-radius: 13px; }
.branch-title .ch-icon svg { width: 20px; height: 20px; }
.branch-title h2 { margin: 0; font-size: var(--fs-xl); }
.branch-title .faint { margin-top: 2px; }
.open-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
.open-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.open-pill.is-open { background: var(--t-emerald); color: var(--ink-emerald); }
.open-pill.is-closed { background: var(--t-rose); color: var(--ink-rose); }
.sub-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); margin: 0 0 4px; }
.sub-head svg { width: 16px; height: 16px; color: var(--accent); }
.branch-details { display: grid; align-content: start; }
.map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; }
.map-link svg { width: 14px; height: 14px; }
.branch-hours { gap: 12px; }
.hour-presets { gap: 6px; }
.hours { max-width: none; gap: 6px; }
.hours-row { grid-template-columns: 62px minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; padding: 4px 6px; border-radius: var(--r-md); }
.hours-row:hover { background: var(--surface-2); }
.hours-row input[type=time] { min-height: 38px; }
.hours-day { width: auto; height: auto; min-height: 36px; min-width: 0; padding: 0 8px; border-radius: 10px; font-weight: 700; font-size: var(--fs-sm); box-shadow: none; }
.hours-day[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.hours-day[aria-pressed="false"] { background: var(--surface-2); color: var(--faint); border: 1.5px solid var(--border); text-decoration: line-through; }
.hours-day:disabled { opacity: 1; cursor: default; }
.switch-row:has(input:disabled) { cursor: default; }
.hours-row.closed .closed-label { grid-column: 2 / -1; color: var(--faint); font-style: italic; font-size: var(--fs-sm); }
.hours-preview { border-radius: var(--r-md); }
.branch-foot { align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.dirty-note { color: var(--ink-amber); font-weight: 650; font-size: var(--fs-sm); }
button.pulse { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 1000px) { .branch-card { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .hours-row { grid-template-columns: 56px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; } .branch-title { flex-wrap: wrap; } }

/* ---- Account ---- */
.ws .page.acct-page { max-width: 1200px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.acct-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.acct-col .card { margin: 0; }
@media (max-width: 1100px) { .acct-grid { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .tpl-preview { position: sticky; top: 0; align-self: start; } }
.switch-row .grow { flex: 1; min-width: 0; }

.tl-spacer { width: 36px; }
.hours-row.invalid { background: var(--bad-weak); }
.hours-row.invalid input { border-color: var(--bad); }
.hours-preview.warn { background: var(--bad-weak); color: var(--bad); }
:root[data-theme="dark"] .quick-when .chip[aria-pressed="true"], :root[data-theme="dark"] .hour-presets .chip[aria-pressed="true"] { background: var(--accent); color: #0d1020; }
#history { margin-top: 4px; }
#support-form + h3 { margin-top: 18px; }

/* ---- Loading screen: status card + skeleton of the dashboard ---- */
.boot { display: grid; justify-items: stretch; align-content: start; gap: 18px; padding: 26px 28px 40px; max-width: 1400px; margin-inline: auto; width: 100%; color: var(--text); font-weight: 400; }
.boot-status { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-xl, 20px); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--el-2, var(--shadow)); max-width: 640px; }
.boot-logo { width: 46px; height: 46px; flex: none; display: block; }
.boot-status b { font-size: 1.05rem; }
.boot-status p { color: var(--muted); font-size: .9rem; margin: 2px 0 10px; }
.boot-pct { font-weight: 750; color: var(--accent); min-width: 3ch; text-align: right; }
.boot-progress { position: relative; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.boot-progress span { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: inherit; background: linear-gradient(90deg, #4457f5, #8b5cf6, #14b8a6); transition: width .35s ease; }
.boot-progress.indeterminate span { width: 35%; }
.boot-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0 4px; font-size: .85rem; color: var(--faint); }
.boot-steps li { display: inline-flex; align-items: center; gap: 8px; }
.boot-steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); }
.boot-steps li.on { color: var(--text); font-weight: 650; }
.boot-steps li.on::before { border-color: var(--accent); background: var(--accent-weak); }
.boot-steps li.done { color: var(--muted); }
.boot-steps li.done::before { border-color: #10b981; background: #10b981; }
.boot-skel { display: grid; gap: 18px; }
.sk-head { display: grid; gap: 10px; }
.sk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sk-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.sk-card { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--r-xl, 20px); background: var(--surface); border: 1px solid var(--border); }
.sk-card.big { min-height: 260px; }
.sk { display: block; border-radius: 8px; background: var(--surface-2); position: relative; overflow: hidden; }
.sk-ic { width: 34px; height: 34px; border-radius: 10px; }
.sk-num { width: 45%; height: 30px; }
.sk-line { height: 12px; }
.sk-line.tall { height: 26px; }
.sk-chart { height: 190px; border-radius: 12px; }
.sk-row { height: 44px; border-radius: 12px; }
.w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w70 { width: 70%; }
.nav-skel { display: none; gap: 10px; padding: 4px 8px; }
.nav-skel .sk { height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
body:has(#boot:not([hidden])) .nav-skel { display: grid; }
@media (prefers-reduced-motion: no-preference) {
  .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: sk-shimmer 1.4s ease-in-out infinite; }
  .nav-skel .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
  .boot-progress.indeterminate span { animation: boot-slide 1.3s ease-in-out infinite; }
  .boot-status { animation: boot-in .35s ease-out both; }
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }
@keyframes boot-slide { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes boot-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 900px) { .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-grid { grid-template-columns: 1fr; } .boot { padding: 18px 16px; } }

/* ---- Interactive charts ---- */
.chart-tip { position: fixed; z-index: 1000; pointer-events: none; min-width: 170px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: #12162e; color: #eef0fb; box-shadow: 0 12px 32px rgba(10, 14, 40, .28); font-size: .82rem; display: grid; gap: 4px; }
.chart-tip[hidden] { display: none; }
.chart-tip b { font-size: .86rem; margin-bottom: 2px; }
.tip-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.tip-row strong { font-variant-numeric: tabular-nums; }
.tip-key { width: 10px; height: 10px; border-radius: 3px; background: #8e9bff; }
.tip-key.b-in { background: #10b981; } .tip-key.b-out { background: #4457f5; } .tip-key.b-miss { background: #f43f5e; }
.tip-key.s-fast { background: #10b981; } .tip-key.s-ok { background: #0ea5e9; } .tip-key.s-slow { background: #f59e0b; } .tip-key.s-msg { background: #8b5cf6; } .tip-key.s-wait { background: #f43f5e; }
.tip-foot { color: #a9b0d6; font-size: .76rem; margin-top: 2px; }
:root[data-theme="dark"] .chart-tip { background: #f4f5fb; color: #12162e; }
:root[data-theme="dark"] .tip-foot { color: #5a6178; }
.chart.interactive .col-hit { fill: transparent; cursor: pointer; outline: none; }
.chart.interactive .col-hit:focus-visible { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.chart.interactive .col rect:not(.col-hit) { transition: opacity .15s; }
.chart.interactive.hovering .col:not(.active) rect:not(.col-hit), .chart.interactive.hovering .col:not(.active) .bar-total { opacity: .3; }
.chart.interactive .col.active .col-hit { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
.bar-total { font-size: 11px; font-weight: 700; fill: var(--muted); font-variant-numeric: tabular-nums; }
.spark { cursor: crosshair; }
.spark-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.segbar .seg { cursor: pointer; transition: filter .15s; }
.segbar .seg:hover, .segbar .seg:focus-visible { filter: brightness(1.12) saturate(1.1); outline: none; }
.rankbar { border-radius: 10px; }
.rankbar:hover { background: var(--surface-2); }
/* Template library cards */
.starter-groups { margin: 6px 0 10px; }
.starter-groups .chip { min-height: 36px; }
.starter-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); max-height: 330px; overflow-y: auto; padding: 2px; }
.starter { gap: 8px; padding: 14px; transition: border-color .15s, box-shadow .15s; }
.starter:hover { border-color: var(--accent); box-shadow: var(--el-2, var(--shadow)); background: var(--surface); }
.starter-top { display: flex; align-items: center; gap: 10px; }
.starter-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--t-violet); color: var(--ink-violet, #6d28d9); }
.starter-ic svg { width: 17px; height: 17px; }
.starter .faint { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Period picker (Calls, Team) ---- */
.period-menu { position: relative; }
.period-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.period-menu > summary::-webkit-details-marker { display: none; }
.period-menu > summary svg { width: 14px; height: 14px; }
#call-range .period-menu > summary, #team-range .period-menu > summary { border: 0; background: transparent; min-height: 34px; border-radius: 9px; color: var(--muted); box-shadow: none; padding: 6px 12px; }
#call-range .period-menu > summary.on, #team-range .period-menu > summary.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(18, 22, 46, .12); font-weight: 650; }
.period-pop { right: 0; left: auto; min-width: 280px; padding: 8px; display: grid; gap: 2px; z-index: 30; }
.period-pop > button { justify-content: flex-start; text-align: left; }
.period-pop > button.on { background: var(--accent-weak); color: var(--accent); font-weight: 650; }
.period-custom { display: grid; gap: 8px; margin-top: 6px; padding: 10px 6px 4px; border-top: 1px solid var(--border); }
.period-custom .row { gap: 8px; align-items: center; flex-wrap: nowrap; }
.period-custom input[type=date] { min-width: 0; flex: 1; min-height: 38px; }
.period-custom .form-error:empty { display: none; }

/* ---- Reminder cards ---- */
#reminder-list { display: grid; gap: 10px; }
#view-reminders .card:has(#reminder-list) { background: transparent; border: 0; box-shadow: none; padding: 0; }
.rem-group { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: var(--fs-xs, .75rem); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rem-group:first-child { margin-top: 0; }
.rem-group .count { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); letter-spacing: 0; }
.rem-group.g-overdue { color: var(--bad); }
.rem-group.g-overdue .count { background: var(--bad-weak); color: var(--bad); }
.rem-card { --kc: var(--c-indigo); --kt: var(--t-indigo); display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg, 16px); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--el-1); transition: box-shadow .15s, border-color .15s; }
.rem-card:hover { box-shadow: var(--el-2); border-color: color-mix(in srgb, var(--kc) 35%, var(--border)); }
.rem-card.is-late { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); background: linear-gradient(90deg, var(--bad-weak), var(--surface) 30%); }
.rem-card.tone-violet { --kc: var(--c-violet); --kt: var(--t-violet); } .rem-card.tone-sky { --kc: var(--c-sky); --kt: var(--t-sky); }
.rem-card.tone-emerald { --kc: var(--c-emerald); --kt: var(--t-emerald); } .rem-card.tone-amber { --kc: var(--c-amber); --kt: var(--t-amber); }
.rem-card.tone-rose { --kc: var(--c-rose); --kt: var(--t-rose); } .rem-card.tone-teal { --kc: var(--c-teal); --kt: var(--t-teal); }
.rem-date { display: grid; justify-items: center; align-content: center; gap: 0; height: 64px; border-radius: 14px; background: var(--kt); color: var(--text); line-height: 1.1; }
.rem-date b { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.rd-day { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--kc) 75%, var(--text)); }
.rd-time { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rem-main { display: grid; gap: 4px; min-width: 0; }
.rem-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rem-kind, .rem-badge, .rem-meta { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 650; }
.rem-kind svg, .rem-badge svg, .rem-meta svg { width: 13px; height: 13px; }
.rem-kind { color: color-mix(in srgb, var(--kc) 80%, var(--text)); }
.rem-meta { color: var(--muted); font-weight: 550; }
.rem-badge { padding: 2px 9px; border-radius: 999px; }
.rem-badge.late { background: var(--bad-weak); color: var(--bad); }
.rem-badge.soon { background: var(--t-amber); color: var(--ink-amber, #92400e); }
.rem-badge.snoozed { background: var(--t-violet); color: var(--ink-violet, #6d28d9); }
.rem-badge.muted { background: var(--surface-2); color: var(--muted); }
.rem-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.rem-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .84rem; }
.rem-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rem-actions details.menu .menu-pop { right: 0; left: auto; }
.rem-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; border-radius: var(--r-xl, 20px); background: var(--surface); border: 1px dashed var(--border); }
.rem-empty .ch-icon { width: 46px; height: 46px; border-radius: 14px; }
.rem-empty p { max-width: 420px; margin: 0; }
@media (max-width: 760px) { .rem-card { grid-template-columns: 54px minmax(0, 1fr); } .rem-date { height: 58px; } .rem-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.rem-notify { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg, 16px); background: var(--t-amber); border: 1px solid color-mix(in srgb, var(--c-amber) 35%, transparent); }
.rem-notify[hidden] { display: none; }
.rem-notify p { margin: 2px 0 0; font-size: .86rem; }

/* ---- Reminder due popup ---- */
dialog.rem-alert { --kc: var(--c-indigo); width: min(520px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 0; }
dialog.rem-alert.tone-violet { --kc: var(--c-violet); } dialog.rem-alert.tone-sky { --kc: var(--c-sky); } dialog.rem-alert.tone-emerald { --kc: var(--c-emerald); }
dialog.rem-alert.tone-amber { --kc: var(--c-amber); } dialog.rem-alert.tone-rose { --kc: var(--c-rose); } dialog.rem-alert.tone-teal { --kc: var(--c-teal); }
dialog.rem-alert::backdrop { background: rgba(13, 16, 32, .55); backdrop-filter: blur(2px); }
.ra-band { display: flex; align-items: center; gap: 14px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg, var(--kc), color-mix(in srgb, var(--kc) 55%, #12162e)); }
.ra-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .2); }
.ra-icon svg { width: 24px; height: 24px; }
.ra-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.ra-band h2 { margin: 2px 0 0; font-size: 1.2rem; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.ra-count { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ra-body { display: grid; gap: 14px; padding: 18px 22px 6px; }
.ra-when { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-weight: 600; }
.ra-when svg { width: 16px; height: 16px; }
.ra-customer { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.ra-customer .grow { display: grid; min-width: 120px; }
.ra-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; }
.ra-actions details.menu .menu-pop { bottom: calc(100% + 6px); top: auto; }
@media (prefers-reduced-motion: no-preference) { dialog.rem-alert[open] { animation: ra-in .28s cubic-bezier(.2, .9, .3, 1.2); } }
@keyframes ra-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
:is(.rem-actions, .rem-done-row .actions) details.more-menu > summary { background: transparent; color: var(--muted); border: 1px solid transparent; box-shadow: none; display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: 10px; }
:is(.rem-actions, .rem-done-row .actions) details.more-menu > summary:hover, :is(.rem-actions, .rem-done-row .actions) details.more-menu[open] > summary { background: var(--surface-2); color: var(--text); }
:is(.rem-actions, .rem-done-row .actions) details.more-menu > summary svg { width: 18px; height: 18px; }

/* ---- Floating hub ---- */
.hub-fab { position: fixed; z-index: 900; width: 64px; height: 64px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid #fff; background: #4457f5; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(68, 87, 245, .45); cursor: grab; touch-action: none; transition: transform .15s, background .15s; }
.hub-fab[hidden] { display: none; }
.hub-fab:hover { transform: scale(1.05); background: #3646d8; color: #fff; }
.hub-fab.dragging { cursor: grabbing; transform: scale(1.08); transition: none; }
.hub-fab.open { background: #12162e; box-shadow: 0 12px 30px rgba(18, 22, 46, .4); }
.hub-fab-ic svg { width: 26px; height: 26px; }
.hub-badge { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px; background: #e11d48; color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.hub-badge[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .hub-fab:not(.open):has(.hub-badge:not([hidden])) { animation: hub-pulse 2.4s ease-in-out infinite; } }
@keyframes hub-pulse { 0%, 100% { box-shadow: 0 12px 30px rgba(68, 87, 245, .45), 0 0 0 0 rgba(225, 29, 72, .35); } 50% { box-shadow: 0 12px 30px rgba(68, 87, 245, .45), 0 0 0 10px rgba(225, 29, 72, 0); } }
.hub-panel { position: fixed; z-index: 899; right: 20px; bottom: var(--hub-bottom, 100px); width: min(430px, calc(100vw - 24px)); max-height: min(680px, calc(100vh - 140px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 24px 64px rgba(18, 22, 46, .28); overflow: hidden; color: var(--text); }
.hub-panel.left { right: auto; left: 20px; }
.hub-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .hub-panel:not([hidden]) { animation: hub-in .22s cubic-bezier(.2, .9, .3, 1.1); } }
@keyframes hub-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.hub-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.hub-head .grow { display: grid; gap: 1px; min-width: 0; }
.hub-head b { font-size: 1rem; }
.hub-head .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-ring { --p: 0%; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#10b981 0 var(--p), var(--surface-2) var(--p) 100%); }
.hub-ring span { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: .74rem; font-weight: 800; }
.hub-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 12px 14px 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); }
.hub-tabs button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 650; font-size: .86rem; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; }
.hub-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--el-1, 0 1px 3px rgba(18, 22, 46, .12)); }
.hub-tabs .count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; font-size: .72rem; display: inline-grid; place-items: center; background: var(--border); color: var(--muted); }
.hub-tabs button[aria-selected="true"] .count { background: var(--accent); color: var(--on-accent); }
.hub-body { flex: 1; overflow-y: auto; padding: 8px 14px 12px; display: grid; gap: 6px; align-content: start; }
.hub-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--surface-2); }
.hub-row.late { background: var(--bad-weak); }
.hub-check { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 2.5px solid var(--c-indigo); background: transparent; box-shadow: none; flex: none; }
.hub-row.late .hub-check { border-color: var(--bad); }
.hub-check:hover { background: color-mix(in srgb, var(--c-emerald) 25%, transparent); border-color: var(--c-emerald); }
.hub-main { all: unset; display: grid; gap: 1px; min-width: 0; cursor: pointer; }
.hub-main b { font-size: .9rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-main span { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-main:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.hub-late { color: var(--bad); font-weight: 650; }
.hub-row details.menu > summary { min-height: 32px; padding: 0 10px; font-size: .78rem; }
.hub-row details.menu .menu-pop { right: 0; left: auto; }
.hub-call { width: 34px !important; min-width: 34px !important; height: 34px; padding: 0 !important; font-size: 0; }
.hub-call svg { width: 16px; height: 16px; }
.hub-empty { text-align: center; color: var(--muted); padding: 28px 8px; margin: 0; }
.hub-slot { all: unset; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: stretch; cursor: pointer; }
.hub-slot.past { opacity: .55; }
.hub-time { font-size: .78rem; font-weight: 700; color: var(--muted); padding-top: 10px; font-variant-numeric: tabular-nums; }
.hub-slot-card { display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--t-indigo); }
.hub-slot.tone-violet .hub-slot-card { background: var(--t-violet); } .hub-slot.tone-sky .hub-slot-card { background: var(--t-sky); }
.hub-slot.tone-amber .hub-slot-card { background: var(--t-amber); } .hub-slot.tone-emerald .hub-slot-card { background: var(--t-emerald); }
.hub-slot.tone-rose .hub-slot-card { background: var(--t-rose); } .hub-slot.tone-teal .hub-slot-card { background: var(--t-teal); }
.hub-kind { font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hub-slot b { font-size: .9rem; }
.hub-slot:focus-visible .hub-slot-card { outline: 2px solid var(--accent); }
.hub-now { display: flex; align-items: center; gap: 8px; color: var(--bad); font-size: .74rem; font-weight: 750; }
.hub-now::after { content: ""; flex: 1; height: 2px; background: var(--bad); border-radius: 2px; }
.hub-foot { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.hub-add { flex: 1; display: grid; gap: 3px; min-width: 0; }
.hub-add-in { min-height: 40px; }
.hub-add-preview { font-size: .74rem; color: var(--ok); font-weight: 650; min-height: 1em; }
@media (max-width: 760px) { .hub-panel, .hub-panel.left { left: 12px; right: 12px; width: auto; bottom: 88px !important; } }

/* ---- Reminder upgrades: priority, assignee, checklist, notes ---- */
.rem-prio .chip { min-height: 38px; }
.rem-prio .chip.prio-high[aria-checked="true"] { background: var(--bad-weak); border-color: var(--bad); color: var(--bad); }
.rem-prio .chip.prio-normal[aria-checked="true"] { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.rem-prio .chip.prio-low[aria-checked="true"] { background: var(--surface-2); border-color: var(--muted); color: var(--muted); }
.rem-more { margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.rem-more > summary { cursor: pointer; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; list-style: none; min-height: 32px; }
.rem-more > summary::-webkit-details-marker { display: none; }
.rem-more > summary svg { width: 16px; height: 16px; color: var(--accent); }
.rem-more[open] > summary { margin-bottom: 6px; }
.rem-checklist { display: grid; gap: 4px; margin: 6px 0; }
.rem-check-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; background: var(--surface-2); }
.rem-check-row .check { flex: 1; margin: 0; font-weight: 500; }
.rem-check-row .check:has(input:checked) span { text-decoration: line-through; color: var(--muted); }
.rem-more .row input { flex: 1; min-width: 0; }
.rem-badge.prio-high { background: var(--bad); color: #fff; }
.rem-assignee { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 650; color: var(--text); }
.ra-av { width: 20px; height: 20px; border-radius: 50%; background: var(--t-violet); color: var(--ink-violet, #6d28d9); font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.rem-notes { margin: 2px 0 0; font-size: .84rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Company setup wizard + Business cards ---- */
dialog.setup-dialog { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; display: none; flex-direction: column; overflow: hidden; }
dialog.setup-dialog[open] { display: flex; }
.su-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; }
.su-head h2 { margin: 0; }
.su-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0 22px 12px; counter-reset: su; }
.su-steps li { counter-increment: su; }
.su-steps button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-weight: 650; font-size: .82rem; cursor: pointer; }
.su-steps button::before { content: counter(su); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--border); color: var(--muted); font-size: .74rem; flex: none; }
.su-steps li.on button { background: var(--accent-weak); color: var(--accent); }
.su-steps li.on button::before { background: var(--accent); color: var(--on-accent); }
.su-steps li.done button::before { content: "✓"; background: var(--c-emerald); color: #fff; }
.su-steps button:focus-visible { outline: 2px solid var(--accent); }
.su-body { flex: 1; overflow-y: auto; padding: 6px 22px 16px; display: grid; gap: 12px; align-content: start; }
.su-field { display: grid; gap: 6px; font-weight: 650; font-size: .88rem; margin: 0; }
.su-field input, .su-field select { font-weight: 400; }
.su-chips .chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.su-new { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.su-new > button { justify-self: start; }
.su-dept input { width: 180px; min-height: 36px; }
.su-group { display: grid; gap: 8px; }
.su-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.su-tpl { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; margin: 0; font-weight: 400; }
.su-tpl.on { border-color: var(--accent); background: var(--accent-weak); }
.su-tpl input { width: 18px; min-height: 18px; margin-top: 3px; flex: none; }
.su-tpl .grow { display: grid; gap: 2px; min-width: 0; }
.su-tpl small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.su-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px 0; }
.su-done .ch-icon { width: 54px; height: 54px; border-radius: 16px; }
.su-done .ch-icon svg { width: 26px; height: 26px; }
.su-summary { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-weight: 600; }
.su-foot { padding: 12px 22px 18px; border-top: 1px solid var(--border); margin: 0; }
.su-foot button svg { width: 16px; height: 16px; }
.su-samples { margin-top: 6px; }
@media (max-width: 700px) { .su-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .su-steps button { font-size: 0; justify-content: center; padding: 8px 4px; } .su-steps button::before { font-size: .74rem; } .su-dept input { width: 120px; } }
.company-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; }
.company-facts > div { display: grid; gap: 2px; min-width: 0; }
.company-facts b { overflow-wrap: anywhere; }
.detail-code { font-size: .74rem; color: var(--ink-violet, #6d28d9); background: var(--t-violet); padding: 1px 6px; border-radius: 6px; justify-self: start; }
.push-right { margin-left: auto; }
#company-card, #dept-card, #contacts-card { display: grid; }

/* Call-history sharing is off: one clear line and the fix */
.share-banner:not([hidden]) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }

/* Set up a phone: QR + pair code */
.invite-dialog { width: min(640px, calc(100vw - 32px)); }
.invite-grid { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.invite-qr { background: #fff; border-radius: 16px; padding: 8px; border: 1px solid var(--border, #e3e6ef); aspect-ratio: 1; }
.invite-qr svg { display: block; width: 100%; height: 100%; }
.invite-steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; line-height: 1.5; }
.pair-code { margin-top: 8px; font-size: 30px; font-weight: 800; letter-spacing: 0.12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
.invite-dialog.expired .invite-qr, .invite-dialog.expired .pair-code { opacity: 0.25; filter: grayscale(1); }
.invite-expiry { display: flex; gap: 8px; align-items: center; margin: 0; }
.invite-password summary { cursor: pointer; color: var(--muted); }
@media (max-width: 560px) { .invite-grid { grid-template-columns: 1fr; } .invite-qr { max-width: 220px; } }
/* Sign in with the phone (QR first, like WhatsApp Web) */
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 6px 0; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--border, #e3e6ef); }
.auth.auth-wide { max-width: 880px; }
.auth-wide #login { max-width: 420px; margin: 0 auto; }
.qr-login { display: grid; grid-template-columns: 1fr 280px; gap: 32px 40px; align-items: center; padding: 36px 40px !important; }
.qr-login h1 { margin-top: 0; }
.qr-steps { margin: 20px 0 16px; padding-left: 22px; display: grid; gap: 12px; font-size: 16px; line-height: 1.5; }
.qr-login-code { display: grid; gap: 10px; justify-items: center; text-align: center; }
.qr-login-code .invite-qr { width: 264px; transition: opacity .2s, filter .2s; }
.qr-login-code .invite-qr.stale { opacity: .2; filter: blur(2px); }
.qr-login-alt { grid-column: 1 / -1; justify-self: start; border-top: 1px solid var(--border, #e3e6ef); padding-top: 18px !important; width: 100%; text-align: left; }
@media (max-width: 720px) {
  .qr-login { grid-template-columns: 1fr; padding: 24px !important; }
  .qr-login-code .invite-qr { width: 220px; }
}
/* Join / approve landing page */
.join-page .card { gap: 14px; }
.join-steps { margin: 0; padding-left: 20px; display: grid; gap: 18px; line-height: 1.5; }
.join-steps li { display: grid; gap: 8px; }

/* ---- Team reports and the staff page ---- */
.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; border-radius: 6px; }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.th-sort.on { color: var(--text); }
.th-sort svg { width: 13px; height: 13px; }
.delta { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.delta.good { color: var(--ok); } .delta.bad { color: var(--bad); }
.team-table tr.plain { cursor: default; }
.team-table a.link { font-weight: 650; }
.team-reports { margin-top: 0; }
.heat { border-collapse: separate; border-spacing: 3px; font-size: 12px; width: 100%; }
.heat th { font-weight: 600; color: var(--muted); text-align: left; white-space: nowrap; padding: 2px 6px 2px 0; }
.heat thead th { text-align: center; padding: 0 0 4px; font-size: 11px; }
.heat-cell { position: relative; height: 26px; min-width: 18px; border-radius: 6px; background: color-mix(in srgb, var(--accent) calc(var(--a, 0) * 100%), var(--surface-2)); }
.heat-cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.heat-cell.has-missed::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.heat-gap th { color: var(--bad); }
.heat-miss { text-align: center; font-weight: 700; color: var(--bad); font-size: 11.5px; }
.staff-head { display: grid; gap: 14px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--accent); text-decoration: none; width: fit-content; }
.back-link svg { width: 16px; height: 16px; }
.staff-id h1 { margin: 0; font-size: 1.6rem; }
.staff-id p { margin: 2px 0 0; }
.staff-tools { gap: 10px; flex-wrap: wrap; }
.ws .kpis.kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .ws .kpis.kpis-6 { grid-template-columns: 1fr 1fr; } }
.staff-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); overflow-x: auto; scrollbar-width: none; }
.staff-tabs button { flex: 1 0 auto; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 650; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; white-space: nowrap; }
.staff-tabs button svg { width: 16px; height: 16px; }
.staff-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--el-1, 0 1px 3px rgba(18, 22, 46, .12)); }
.staff-panel { display: grid; gap: 14px; }
.staff-panel h3 { margin: 6px 0 0; font-size: 1rem; }
.staff-filters { gap: 10px; flex-wrap: wrap; }
.outcome { font-weight: 600; } .outcome.ok { color: var(--ok); } .outcome.bad { color: var(--bad); } .outcome.muted { color: var(--muted); font-weight: 500; }
.load-more { justify-self: center; }
.item .right { display: grid; justify-items: end; text-align: right; gap: 2px; }
.note-item p { margin: 4px 0; }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.hbar-label { color: var(--muted); }
.hbar-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hbar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .5s ease; }
.hbars.tone-amber .hbar-fill { background: #f59e0b; } .hbars.tone-violet .hbar-fill { background: #8b5cf6; }
.hbar-n { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.heat th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.heat th a.link { font-weight: 650; text-decoration: none; }
.staff-actions { flex-wrap: wrap; gap: 8px; }
.ws-phone { background: none; border: 0; box-shadow: none; width: 100%; text-align: left; font: inherit; font-weight: 600; cursor: pointer; min-height: 0; padding: 6px 4px; margin: 0; justify-content: flex-start; }

/* ---- Team / staff / contacts polish (design review, Oct 2026) ---- */
/* Wide content must never widen the page (phones). */
.ws .page { grid-template-columns: minmax(0, 1fr); }
.ws .page > *, .ws .card { min-width: 0; }
/* Tables and the heatmap run edge to edge inside cards, with the card's own padding. */
.ws .card > .table-wrap { margin: 6px -20px -20px; }
.ws .card > .table-wrap .team-table th:first-child, .ws .card > .table-wrap .team-table td:first-child { padding-left: 20px; }
.ws .card > .table-wrap .team-table th:last-child, .ws .card > .table-wrap .team-table td:last-child { padding-right: 20px; }
.ws .card > .table-wrap.heat-wrap, .staff-panel .heat-wrap { margin: 4px 0 0; padding: 0 0 6px; }
.perf-table td:first-child { min-width: 200px; }
.perf-table td:first-child .row { flex-wrap: nowrap; }
.team-table a.link, .item.person .link, .heat a.link { text-decoration: none; }
.team-table a.link:hover, .item.person .link:hover { text-decoration: underline; }
/* One pill style for statuses everywhere (it only had padding inside Today's list). */
.why { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/* Missed calls nobody returned */
.wait-item .why { flex: none; }
.show-all { justify-self: start; margin-top: 4px; }
/* A bare number gets a phone glyph, not its first digit */
.av.av-num { background: var(--accent-weak); color: var(--accent); }
.av.av-num svg { width: 46%; height: 46%; }
/* Heatmap legend */
.heat-legend { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--muted); }
.heat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-cell { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg-cell.few { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.lg-cell.many { background: var(--accent); }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); display: inline-block; }
.heat-cell.has-missed::after { box-shadow: 0 0 0 1.5px var(--surface); }
/* Person actions: one main action, the rest in a menu */
.icon-only { width: 36px; padding: 0 !important; justify-content: center; }
.icon-only svg { width: 18px; height: 18px; }
.person-menu .menu-pop { right: 0; left: auto; min-width: 200px; display: grid; gap: 2px; padding: 6px; }
.person-menu .menu-pop button { justify-content: flex-start; background: transparent; box-shadow: none; border: 0; color: var(--text); min-height: 40px; padding: 0 12px; border-radius: 8px; font-weight: 600; }
.person-menu .menu-pop button:hover { background: var(--surface-2); }
.person-menu .menu-pop button.danger-text { color: var(--bad); }
/* Staff page */
.staff-head .chips.seg { max-width: 100%; overflow-x: auto; }
.sub-head { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.sub-head:first-child { margin-top: 0; }
.sub-head h3 { margin: 0; font-size: 1rem; }
.ch-icon.sm { width: 26px; height: 26px; border-radius: 8px; }
.ch-icon.sm svg { width: 14px; height: 14px; }
.ch-icon.lg { width: 52px; height: 52px; border-radius: 15px; }
.ch-icon.lg svg { width: 24px; height: 24px; }
/* Contacts to share: multi-select */
.ct-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.ct-toolbar .search { flex: 1 1 220px; max-width: 320px; margin-left: auto; }
.ct-toolbar.picking { position: sticky; top: 72px; z-index: 5; background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--shadow); }
.ct-toolbar .bulk-actions { margin-left: auto; gap: 8px; }
.sel-all { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; color: var(--text); cursor: pointer; min-height: 40px; }
.sel-all input, .sel-hit input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.sel-hit { width: 32px; height: 40px; display: grid; place-items: center; flex: none; cursor: pointer; }
.item.contact.picked { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-radius: 10px; }
.empty-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 24px 12px 8px; }
.empty-state p { max-width: 460px; margin: 0; }
.toast.has-action { display: flex; align-items: center; gap: 14px; }
.toast-action { background: transparent; border: 0; color: #a7b1ff; font-weight: 800; padding: 0; min-height: 0; box-shadow: none; }
@media (max-width: 760px) {
  /* Touch targets */
  button.small, .button.small, select.compact, .icon-only { min-height: 44px; }
  .icon-only { width: 44px; }
  .staff-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scroll-snap-type: x proximity; }
  .staff-tabs button { scroll-snap-align: start; }
  .ct-toolbar.picking { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; }
  /* Staff call log: each call becomes a small card */
  .staff-calls thead { display: none; }
  .staff-calls tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .staff-calls td { padding: 0 !important; border: 0 !important; display: block !important; }
  .staff-calls td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .staff-calls td:nth-child(1) { grid-column: 2; grid-row: 1; text-align: right; }
  .staff-calls td:nth-child(3), .staff-calls td:nth-child(4) { display: inline-block !important; grid-row: 2; }
  .staff-calls td:nth-child(5) { grid-column: 1 / -1; }
  .staff-calls td:nth-child(6) { grid-column: 1 / -1; }
  .wait-item { flex-wrap: wrap; }
}

/* ---- QA fixes + colour (Team / staff) ---- */
@media (max-width: 760px) {
  .ws-phone { font-size: 0; gap: 0; padding: 4px; justify-content: center; width: auto; }
  /* Period chips scroll inside their row instead of widening the page */
  #team-range, .chips.seg { display: flex; width: 100%; max-width: 100%; overflow-x: auto; }
  .section-head > .row, .staff-tools, .staff-tools > * { min-width: 0; max-width: 100%; }
  .staff-id { flex-wrap: wrap; }
  .staff-actions { flex-wrap: wrap; }
}
/* Gradient hero header, like Today's hero (Team and a person's page) */
.hero-head { border-radius: 22px; padding: 22px 24px; color: #fff; background: linear-gradient(120deg, #3b4ef0 0%, #6d3df0 55%, #0ea5e9 100%); box-shadow: 0 16px 36px rgba(68, 87, 245, 0.25); border: 0; }
.hero-head h1, .hero-head .muted, .hero-head p, .hero-head .faint { color: #fff; }
.hero-head .muted, .hero-head p { opacity: .9; }
.hero-head #team-range, .hero-head .chips.seg { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); }
.hero-head #team-range .chip, .hero-head .chips.seg .chip, .hero-head .chips.seg summary.chip { color: #fff; }
.hero-head #team-range .chip[aria-pressed="true"], .hero-head .chips.seg .chip[aria-pressed="true"] { background: #fff; color: #3b4ef0; }
.hero-head .period-menu > summary.chip { color: #fff; }
.hero-head .period-menu > summary.chip.on { background: #fff; color: #3b4ef0; }
.hero-head .button.secondary, .hero-head button.secondary { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; }
.hero-head button.small:not(.secondary):not(.ghost), .hero-head #add-staff { background: #fff; color: #3b4ef0; box-shadow: 0 6px 16px rgba(18, 22, 46, .18); }
.hero-head .back-link { color: #fff; opacity: .9; }
.hero-head .av { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.hero-head select.compact { background-color: rgba(255, 255, 255, .95); }
.hero-head .person-menu summary { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
/* Colourful section icons and KPI grounds on Team pages */
#view-team .ch-icon, #view-staff .ch-icon:not(.sm) { color: #fff; box-shadow: 0 6px 14px rgba(18, 22, 46, .12); }
#view-team .ch-icon.tone-rose { background: linear-gradient(135deg, #fb5d7a, #e11d48); }
#view-team .ch-icon.tone-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
#view-team .ch-icon.tone-indigo, #view-staff .ch-icon.tone-indigo:not(.sm) { background: linear-gradient(135deg, #5b6cff, #3b4ef0); }
#view-team .kpi.tone-indigo, #view-staff .kpi.tone-indigo { background: linear-gradient(180deg, #f1f3ff, var(--surface) 70%); }
#view-team .kpi.tone-rose, #view-staff .kpi.tone-rose { background: linear-gradient(180deg, #fff1f4, var(--surface) 70%); }
#view-team .kpi.tone-amber, #view-staff .kpi.tone-amber { background: linear-gradient(180deg, #fff7e8, var(--surface) 70%); }
#view-team .kpi.tone-violet, #view-staff .kpi.tone-violet { background: linear-gradient(180deg, #f5f0ff, var(--surface) 70%); }
#view-team .kpi.tone-emerald, #view-staff .kpi.tone-emerald { background: linear-gradient(180deg, #ecfbf3, var(--surface) 70%); }
#view-team .kpi.tone-teal, #view-staff .kpi.tone-teal { background: linear-gradient(180deg, #e9fbf8, var(--surface) 70%); }
:root[data-theme="dark"] #view-team .kpi, :root[data-theme="dark"] #view-staff .kpi { background: var(--surface); }
#team-seat-meter span { background: linear-gradient(90deg, #14b8a6, #4457f5, #8b5cf6); }
.heat-cell { background: color-mix(in srgb, #5b4cf0 calc(var(--a, 0) * 100%), var(--surface-2)); }
#team-coverage .heat-wrap { margin: 4px 0 0; padding: 0 0 6px; }
.heat-legend i.lg-cell { width: 14px; height: 14px; border-radius: 4px; }
.heat-legend i.lg-cell.few { background: #dbe2ff; }
.heat-legend i.lg-cell.many { background: linear-gradient(135deg, #4457f5, #7c3aed); }
.heat-legend i.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
@media (max-width: 760px) {
  /* Summary tiles: labels and change pills wrap inside the tile */
  .kpi { min-width: 0; overflow: hidden; }
  .kpi-inner, .kpi-top, .kpi .row.spread { min-width: 0; flex-wrap: wrap; }
  .kpi-label { white-space: normal; line-height: 1.25; }
  .kpi-trend { white-space: normal; max-width: 100%; }
  .kpi-value { font-size: 1.7rem; }
}
@media (max-width: 760px) {
  .kpi-sub { white-space: normal; }
  .wait-item { flex-wrap: wrap; row-gap: 8px; }
  .wait-item .grow { flex: 1 1 calc(100% - 56px); }
  .wait-item .why { margin-left: 50px; }
  .wait-item > :last-child { margin-left: auto; }
}

/* Unsaved number: reveal in place, small arrow opens the customer */
.cust-number { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; color: var(--accent, #4457f5); }
.cust-number .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; box-shadow: none; }
.cust-number .icon-link:hover { background: var(--accent-weak, #eaedff); }
.cust-number .icon-link svg { width: 16px; height: 16px; }
.cust-number > .private-phone { margin-left: -8px; }

/* ---- Period dock: the page's period follows you down the page ---- */
.period-dock {
  position: fixed; z-index: 14; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 10px 8px 18px; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, #3b4ef0 0%, #6d3df0 55%, #0ea5e9 100%);
  box-shadow: 0 14px 30px rgba(68, 87, 245, .28);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.period-dock.in { opacity: 1; transform: none; pointer-events: auto; }
.period-dock .dock-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.period-dock .dock-title b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.period-dock .dock-title span { font-size: .9rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.period-dock .dock-chips { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); flex-wrap: nowrap; }
.period-dock .dock-chips .chip, .period-dock .dock-chips summary.chip { color: #fff; min-height: 36px; }
.period-dock .dock-chips .chip[aria-pressed="true"], .period-dock .dock-chips summary.chip.on { background: #fff; color: #3646d8; }
.period-dock .period-pop { right: 0; left: auto; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .period-dock { transition: none; } }
@media (max-width: 760px) {
  .period-dock { gap: 6px; padding: 6px 8px 6px 12px; border-radius: 14px; }
  .period-dock .dock-title { flex-basis: 100%; }
  .period-dock .dock-chips { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 760px) {
  /* The chip row scrolls sideways, so the "More" menu opens as a full-width panel under the dock. */
  .period-dock .period-pop { position: fixed; left: 10px; right: 10px; top: var(--dock-bottom, 140px); width: auto; max-height: 60vh; overflow-y: auto; }
}

/* ---- Who covers when: colourful hour-by-person heatmap ---- */
:root { --c0: var(--surface-2); --c1: #d5f5ec; --c2: #8fe3cf; --c3: #38bdf8; --c4: #4f6bf5; --c5: linear-gradient(135deg, #5b4cf0, #8b5cf6); }
:root[data-theme="dark"] { --c1: #12463c; --c2: #1f7a66; }
.cov-insights { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 16px; }
.cov-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
.cov-chip svg { width: 16px; height: 16px; flex: none; }
.cov-chip b { font-weight: 750; }
.cov-chip.tone-indigo { background: color-mix(in srgb, #4457f5 10%, var(--surface)); border-color: color-mix(in srgb, #4457f5 25%, transparent); }
.cov-chip.tone-indigo svg { color: #4457f5; }
.cov-chip.tone-violet { background: color-mix(in srgb, #8b5cf6 10%, var(--surface)); border-color: color-mix(in srgb, #8b5cf6 25%, transparent); }
.cov-chip.tone-violet svg { color: #8b5cf6; }
.cov-chip.tone-rose { background: color-mix(in srgb, #e11d48 9%, var(--surface)); border-color: color-mix(in srgb, #e11d48 25%, transparent); }
.cov-chip.tone-rose svg { color: #e11d48; }
.cov-chip.tone-emerald { background: color-mix(in srgb, #10b981 10%, var(--surface)); border-color: color-mix(in srgb, #10b981 25%, transparent); }
.cov-chip.tone-emerald svg { color: #10b981; }

.cov-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.cov-grid { display: grid; gap: 4px; min-width: 760px; }
.cov-row { display: grid; gap: 4px; align-items: center; border-radius: 12px; }
.cov-person:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cov-name { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 4px 4px; background: var(--surface); border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 650; font-size: 13.5px; }
.cov-person:hover .cov-name { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
a.cov-name:hover .cov-who { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cov-name .av { width: 30px; height: 30px; font-size: 12px; flex: none; }
.cov-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cov-head .cov-name, .cov-head .cov-total { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cov-hour { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 2px 0 4px; font-variant-numeric: tabular-nums; }
.cov-hour.now { color: #fff; background: linear-gradient(120deg, #f43f5e, #f97316); border-radius: 999px; padding: 2px 0; }

.cov-cell { position: relative; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums; background: var(--c0); color: #0f3d33; transition: transform .12s ease, box-shadow .12s ease; }
.cov-cell.l1 { background: var(--c1); }
.cov-cell.l2 { background: var(--c2); }
.cov-cell.l3 { background: var(--c3); color: #fff; }
.cov-cell.l4 { background: var(--c4); color: #fff; }
.cov-cell.l5 { background: var(--c5); color: #fff; box-shadow: 0 6px 14px rgba(91, 76, 240, .35); }
.cov-cell.now { outline: 2px dashed color-mix(in srgb, #f43f5e 55%, transparent); outline-offset: 1px; }
.cov-cell[tabindex="0"]:hover, .cov-cell:focus-visible { transform: translateY(-1px) scale(1.06); box-shadow: 0 8px 18px rgba(18, 22, 46, .18); z-index: 2; }
.cov-cell:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cov-cell.missed::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 2px var(--surface); }

.cov-total { display: flex; flex-direction: column; align-items: flex-end; padding-right: 6px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cov-total b { font-size: 15px; }
.cov-total small { font-size: 11.5px; color: var(--faint); }
.cov-miss { color: #e11d48 !important; font-weight: 700; }

.cov-team { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); border-radius: 0; }
.cov-badge { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #14b8a6, #4457f5); flex: none; }
.cov-badge.rose { background: linear-gradient(135deg, #f43f5e, #f97316); }
.cov-badge svg { width: 16px; height: 16px; }
.cov-bar { height: 44px; display: flex; align-items: flex-end; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cov-bar i { display: block; width: 62%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #8b5cf6, #4457f5 55%, #14b8a6); }
.cov-bar.now { box-shadow: inset 0 0 0 2px color-mix(in srgb, #f43f5e 45%, transparent); }
.cov-gap { height: 30px; display: grid; place-items: center; }
.cov-gap em { font-style: normal; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 4px 10px rgba(225, 29, 72, .28); }

.cov-legend { margin-left: auto; display: inline-flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--muted); }
.cov-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cov-scale i { width: 16px; height: 12px; border-radius: 4px; display: inline-block; }
.cov-scale small { font-size: 12px; color: var(--muted); }
.cov-scale i.l1 { background: var(--c1); } .cov-scale i.l2 { background: var(--c2); } .cov-scale i.l3 { background: var(--c3); }
.cov-scale i.l4 { background: var(--c4); } .cov-scale i.l5 { background: var(--c5); }
.cov-legend i.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: #e11d48; display: inline-block; }

:root[data-theme="dark"] .cov-cell, :root[data-theme="dark"] .cov-cell.l1, :root[data-theme="dark"] .cov-cell.l2 { color: #e9fff8; }
@media (max-width: 760px) {
  .cov-legend { margin-left: 0; flex-basis: 100%; }
  .cov-grid { min-width: 640px; }
  .cov-name { padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cov-cell { transition: none; } }

/* ---- Team members: compact card + live dialog ---- */
.members-card .card-head #open-members { margin-left: 12px; }
.members-card .card-head #open-members svg { order: 2; }
.members-summary {
  width: 100%; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; text-align: left;
  padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); cursor: pointer; color: var(--text);
  background: linear-gradient(120deg, color-mix(in srgb, #14b8a6 7%, var(--surface)), color-mix(in srgb, #8b5cf6 7%, var(--surface)));
  box-shadow: none; font: inherit;
}
.members-summary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 8px 22px rgba(68, 87, 245, .12); }
.members-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ms-stack { display: flex; align-items: center; }
.ms-stack .ms-av { margin-left: -8px; }
.ms-stack .ms-av:first-child { margin-left: 0; }
.ms-av { position: relative; display: inline-grid; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--surface); }
.ms-av .av { width: 34px; height: 34px; font-size: 13px; }
.ms-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); background: #cbd2e1; }
.ms-av.st-on::after { background: #10b981; }
.ms-av.st-today::after { background: #38bdf8; }
.ms-av.st-call::after, .ms-av.st-ring::after { background: #6d3df0; animation: ms-pulse 1.4s ease-in-out infinite; }
.ms-av.st-none::after { background: #f59e0b; }
.ms-av.st-off::after { background: #94a3b8; }
.ms-av.st-off .av { filter: grayscale(1); opacity: .6; }
@keyframes ms-pulse { 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px rgba(109, 61, 240, .25); } }
.ms-more { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ms-meter { display: block; height: 6px; width: 180px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ms-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #4457f5, #8b5cf6); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.ms-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--surface); border: 1px solid var(--border); }
.ms-chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ms-chip.tone-emerald { color: #047857; border-color: color-mix(in srgb, #10b981 35%, transparent); }
.ms-chip.tone-indigo { color: #3646d8; border-color: color-mix(in srgb, #4457f5 35%, transparent); }
.ms-chip.tone-amber { color: #a16207; border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.ms-chip.tone-rose { color: #be123c; border-color: color-mix(in srgb, #e11d48 35%, transparent); }
.ms-chip.tone-teal { color: #0f766e; border-color: color-mix(in srgb, #14b8a6 35%, transparent); }
:root[data-theme="dark"] .ms-chip.tone-emerald { color: #6ee7b7; } :root[data-theme="dark"] .ms-chip.tone-indigo { color: #a5b4fc; }
:root[data-theme="dark"] .ms-chip.tone-amber { color: #fcd34d; } :root[data-theme="dark"] .ms-chip.tone-rose { color: #fda4af; }
:root[data-theme="dark"] .ms-chip.tone-teal { color: #5eead4; }
.ms-open { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ms-open svg { width: 18px; height: 18px; }

dialog.members-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog.members-dialog .dialog-body { display: grid; gap: 12px; }
.members-head { display: flex; align-items: flex-start; gap: 12px; }
.members-head h2 { margin: 0; }
.members-head p { margin: 2px 0 0; }
.members-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.members-tools input[type="search"] { flex: 1 1 240px; min-width: 0; }
#members-dialog .list { max-height: calc(100vh - 290px); overflow-y: auto; }
.ms-status { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ms-status.st-on { background: color-mix(in srgb, #10b981 14%, var(--surface)); color: #047857; }
.ms-status.st-today { background: color-mix(in srgb, #38bdf8 14%, var(--surface)); color: #0369a1; }
.ms-status.st-call, .ms-status.st-ring { background: linear-gradient(120deg, #4457f5, #8b5cf6); color: #fff; }
.ms-status.st-none { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #a16207; }
@media (max-width: 760px) {
  .members-summary { gap: 12px; }
  .ms-meter { width: 140px; }
  .ms-open { margin-left: 0; }
  .members-card .card-head #open-members { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ms-av.st-call::after, .ms-av.st-ring::after { animation: none; } }

/* ---- Sidebar groups: daily work above, administration below ---- */
.ws-nav .nav-group { display: block; margin: 14px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
@media (max-width: 760px) { .ws-nav .nav-group { display: none !important; } }
.members-page { display: grid; gap: 12px; }
.members-page .mm-list { max-height: none; }

/* ---- Performance table: colourful, scannable ---- */
.perf-table thead th { background: var(--surface-2); border-bottom: 0; padding-top: 10px; padding-bottom: 10px; }
.perf-table thead th:first-child { border-radius: 12px 0 0 12px; }
.perf-table thead th:last-child { border-radius: 0 12px 12px 0; }
.perf-table .th-sort.on { color: var(--accent); }
.perf-table tbody td { padding-top: 12px; padding-bottom: 12px; }
.perf-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.perf-table tbody tr.pf-top td:first-child { box-shadow: inset 3px 0 0 var(--pf-medal, transparent); }
.pf-person { gap: 10px; }
.pf-rank { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; }
.pf-rank:empty { background: transparent; }
.pf-rank.m1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 8px rgba(245, 158, 11, .35); }
.pf-rank.m2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.pf-rank.m3 { background: linear-gradient(135deg, #fdba74, #ea580c); }
tr.pf-top:has(.m1) { --pf-medal: #f59e0b; } tr.pf-top:has(.m2) { --pf-medal: #94a3b8; } tr.pf-top:has(.m3) { --pf-medal: #ea580c; }
.pf-calls { display: flex; align-items: baseline; gap: 6px; }
.pf-calls b { font-size: 16px; }
.pf-track { margin-top: 6px; width: 92px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pf-split { height: 100%; display: flex; border-radius: inherit; overflow: hidden; }
.pf-split i { display: block; min-width: 3px; }
.pf-split i.in { background: #10b981; } .pf-split i.out { background: #4457f5; } .pf-split i.miss { background: #f43f5e; }
.pf-rate { display: flex; align-items: center; gap: 8px; }
.pf-ring { width: 22px; height: 22px; border-radius: 50%; flex: none; background: conic-gradient(var(--pf-c) calc(var(--p, 0) * 1%), var(--surface-2) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 6.5px); mask: radial-gradient(circle, transparent 6px, #000 6.5px); }
.pf-ring.good { --pf-c: #10b981; } .pf-ring.fair { --pf-c: #f59e0b; } .pf-ring.poor { --pf-c: #f43f5e; } .pf-ring.none { --pf-c: transparent; }
.pf-cell { display: inline-flex; align-items: center; gap: 6px; }
.pf-pill { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pf-pill.tone-rose { background: color-mix(in srgb, #f43f5e 14%, var(--surface)); color: #be123c; }
.pf-pill.tone-emerald { background: color-mix(in srgb, #10b981 15%, var(--surface)); color: #047857; }
.pf-pill.tone-amber { background: color-mix(in srgb, #f59e0b 17%, var(--surface)); color: #a16207; }
.pf-pill.tone-violet { background: color-mix(in srgb, #8b5cf6 14%, var(--surface)); color: #6d28d9; }
.pf-pill.tone-sky { background: color-mix(in srgb, #0ea5e9 14%, var(--surface)); color: #0369a1; }
:root[data-theme="dark"] .pf-pill.tone-rose { color: #fda4af; } :root[data-theme="dark"] .pf-pill.tone-emerald { color: #6ee7b7; }
:root[data-theme="dark"] .pf-pill.tone-amber { color: #fcd34d; } :root[data-theme="dark"] .pf-pill.tone-violet { color: #c4b5fd; }
:root[data-theme="dark"] .pf-pill.tone-sky { color: #7dd3fc; }
.pf-zero { color: var(--faint); opacity: .7; font-variant-numeric: tabular-nums; }
.pf-good { color: #047857 !important; font-weight: 650; }
:root[data-theme="dark"] .pf-good { color: #6ee7b7 !important; }
.pf-talk { display: grid; gap: 5px; }
.pf-talkbar { width: 72px; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pf-talkbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #38bdf8); }
.hour-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 30px; width: 120px; }
.hour-bars i { flex: 1; min-width: 3px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #8b5cf6, #4457f5); }
.hour-bars i.miss { background: linear-gradient(180deg, #fb7185, #f43f5e); }
.hour-bars i.later { background: var(--surface-2); }
.hour-bars i[style*="6%"] { opacity: .55; }
/* Fit all eleven columns in the card at laptop widths. */
.perf-table th, .perf-table td { padding-left: 7px; padding-right: 7px; }
.perf-table thead th { letter-spacing: .04em; }
.perf-table .pf-track { width: 80px; }
.perf-table .pf-talkbar { width: 62px; }
.perf-table .hour-bars { width: 104px; }
.perf-table .delta { font-size: 11px; }
.pf-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; }
.pf-stack .delta { margin: 0; }
/* Narrower laptops: the person column stays put while the numbers scroll sideways. */
.perf-table th:first-child, .perf-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.perf-table thead th:first-child { background: var(--surface-2); z-index: 2; }
.perf-table tbody tr:hover td:first-child { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }

/* ---- Who handles a customer ---- */
.handlers-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 2px; }
.handlers-row:empty { display: none; }
.hr-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.handler-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; }
.handler-chip .av { width: 22px; height: 22px; font-size: 10px; }
.handler-chip.me { background: color-mix(in srgb, #10b981 12%, var(--surface)); border-color: color-mix(in srgb, #10b981 30%, transparent); }
.handler-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #f59e0b, #f97316); }
.handler-flag svg { width: 14px; height: 14px; }
.tl-who { margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #8b5cf6 13%, var(--surface)); color: #6d28d9; vertical-align: 1px; }
.tl-who.me { background: color-mix(in srgb, #10b981 13%, var(--surface)); color: #047857; }
:root[data-theme="dark"] .tl-who { color: #c4b5fd; } :root[data-theme="dark"] .tl-who.me { color: #6ee7b7; }
.cust-of { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #b45309; background: color-mix(in srgb, #f59e0b 15%, var(--surface)); }
:root[data-theme="dark"] .cust-of { color: #fcd34d; }
.handler-chip { white-space: nowrap; }
.handlers-row { margin: 4px 0 12px; }
.cp-flag.handled { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); border-radius: 10px; padding: 6px 10px; font-weight: 700; }

/* Struck-out notes stay in the timeline, crossed out. */
.tl-item.is-struck .muted, button.call-note-snippet.struck span { text-decoration: line-through; opacity: .65; }
.note-meta { margin: 2px 0 0; font-size: 12px; }
#callnote-meta, #callnote-lock { margin: 0; font-size: 13px; }

/* Customer timeline filter and the call a note belongs to. */
.tl-filter { margin: 0 0 8px; }
.note-call-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--t-violet); color: #6d28d9; font-size: 12.5px; font-weight: 600; }
.note-call-chip svg { width: 13px; height: 13px; }
:root[data-theme="dark"] .note-call-chip { color: #c4b5fd; }

/* Person menu (top right): account, phone, theme, sign out. */
.me-menu { position: relative; }
.me-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line, var(--border)); box-shadow: 0 16px 40px rgba(15, 23, 42, .18); display: flex; flex-direction: column; }
.me-pop[hidden] { display: none; }
.me-pop-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px; border-bottom: 1px solid var(--line, var(--border)); margin-bottom: 4px; }
.me-pop-head .faint { font-size: 12px; }
.me-pop [role^="menuitem"] { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--text); cursor: pointer; }
.me-pop [role^="menuitem"][hidden] { display: none; }
.me-pop [role^="menuitem"] svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.me-pop [role^="menuitem"]:hover, .me-pop [role^="menuitem"]:focus-visible { background: var(--surface-2); }
.me-pop [role^="menuitem"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.me-pop .danger-text, .me-pop .danger-text svg { color: #dc2626; }
.me-pop hr { border: 0; border-top: 1px solid var(--line, var(--border)); margin: 4px 0; }
.me-pop .ws-theme .ni { display: inline-flex; }
@media (max-width: 760px) { .me-pop { position: fixed; right: 12px; left: 12px; top: 64px; } }

/* Hub: recent calls, like a chat list; a row opens to a note box and quick actions. */
.hub-call-wrap { display: flex; flex-direction: column; border-radius: 14px; }
.hub-call-wrap:has(.hub-callrow.open) { background: var(--surface-2); }
.hub-call-state { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; color: var(--muted); flex: none; }
.hub-call-state svg { width: 15px; height: 15px; }
.hub-call-state.ok { color: #059669; background: color-mix(in srgb, #10b981 14%, transparent); }
.hub-call-state.todo { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.hub-call-more { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 12px 52px; }
.hub-call-more textarea { width: 100%; min-height: 72px; resize: vertical; }
.hub-call-more .row { gap: 6px; }
@media (max-width: 520px) { .hub-call-more { padding-left: 10px; } }

/* Reminder alert: details, pick-a-time snooze. */
.rem-alert .ra-notes { margin: 8px 0 0; white-space: pre-wrap; color: var(--text); }
.rem-alert .ra-check { margin: 8px 0 0; padding-left: 20px; }
.rem-alert .ra-check li.done { text-decoration: line-through; color: var(--muted); }
.rem-alert .ra-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rem-alert .ra-pick-in { flex: 1 1 180px; min-width: 0; }

/* Reminders: toolbar, lists/tags, flags, calendar. */
.rem-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 4px; }
.rem-toolbar .rem-search { flex: 1 1 260px; min-width: 0; }
.rem-lists { align-items: center; margin-top: 4px; }
.rem-lists-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 2px 0 6px; }
.rem-lists .chip svg { width: 13px; height: 13px; }
button.rem-meta { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--surface-2); }
button.rem-meta:hover { color: var(--text); }
.rem-tag { color: #6d28d9; }
.rem-badge.flag { color: #c2410c; background: color-mix(in srgb, #f97316 14%, transparent); }
.rem-flag-btn.on svg { color: #ea580c; fill: color-mix(in srgb, #f97316 35%, transparent); }
.rem-flag { margin: 4px 0 2px; }
.rem-template { margin-bottom: 8px; }
.rem-cal { margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; }
.rc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.rc-head b { font-size: 16px; min-width: 160px; text-align: center; }
.rc-hint { margin-left: auto; font-size: 12px; }
.rc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.rc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rc-day { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; }
.rc-grid.week .rc-day { min-height: 300px; }
.rc-day.today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.rc-day.other { opacity: .5; }
.rc-day.past .rc-add { display: none; }
.rc-day.drop { border-color: var(--accent); border-style: dashed; }
.rc-grid.month .rc-day { cursor: pointer; }
.rc-date { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); }
.rc-date b { font-size: 14px; color: var(--text); }
.rc-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 8px; background: var(--surface); border-left: 3px solid var(--accent); font-size: 12px; line-height: 1.25; overflow: hidden; }
.rc-item[draggable="true"] { cursor: grab; }
.rc-item.late { border-left-color: #e11d48; }
.rc-item.flagged .rc-title::before { content: '⚑ '; color: #ea580c; }
.rc-item .rc-time { color: var(--muted); font-size: 11px; }
.rc-item .rc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rc-grid.week .rc-item .rc-title { white-space: normal; }
.rc-item:focus-visible, .rc-more:focus-visible, .rc-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rc-more { all: unset; cursor: pointer; font-size: 11.5px; color: var(--accent); padding: 0 4px; }
.rc-add { all: unset; cursor: pointer; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 6px; display: none; align-items: center; justify-content: center; color: var(--muted); }
.rc-add svg { width: 14px; height: 14px; }
.rc-day:hover .rc-add, .rc-add:focus-visible { display: inline-flex; }
@media (max-width: 760px) {
  .rc-grid.week { grid-template-columns: 1fr; }
  .rc-grid.week .rc-day { min-height: 0; }
  .rc-grid.month .rc-day { min-height: 56px; padding: 4px; cursor: pointer; }
  .rc-grid.month .rc-item { height: 6px; padding: 0; border-left: 0; background: var(--accent); font-size: 0; }
  .rc-grid.month .rc-item.late { background: #e11d48; }
  .rc-grid.month .rc-add, .rc-grid.month .rc-more { display: none; }
  .rc-grid.week .rc-add { display: inline-flex; }
  .rc-hint { display: none; }
}

/* Reminder card checklist: tick steps in place. */
.rem-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rem-step { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: 14px; }
.rem-step input { width: 18px; height: 18px; accent-color: #059669; }
.rem-step.done span { text-decoration: line-through; color: var(--muted); }

.rem-nag-row { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

/* Reminder editor v2: two columns with a live preview */
dialog.rem-dialog { width: min(1040px, calc(100vw - 32px)); }
dialog.rem-dialog form { padding: 0; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.rem-dlg-head { padding: 18px 22px 10px; display: flex; align-items: center; gap: 10px; }
.rem-dlg-head h2 { margin: 0; flex: 1; }
.rem-start { padding: 0 22px 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rem-start[hidden] { display: none; }
.rem-start .label { margin: 0; }
.rem-start .chips { gap: 6px; }
.rem-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; overflow: auto; flex: 1; min-height: 0; border-top: 1px solid var(--border); }
.rem-ed-main, .rem-ed-side { padding: 14px 22px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rem-ed-side { background: var(--surface-2); border-left: 1px solid var(--border); }
.rem-editor label, .rem-editor .label { margin-top: 12px; }
.rem-block { margin-top: 2px; }
.rem-when-sum { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 650; font-size: .88rem; color: var(--accent); }
.rem-when-sum:empty { display: none; }
.rem-when-sum svg { width: 15px; height: 15px; flex: none; }
.kind-chips { gap: 6px; }
.kind-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; font-size: var(--fs-sm, .86rem); }
.kind-chip svg { width: 14px; height: 14px; }
.kind-chip[aria-checked="true"] { background: var(--t-indigo); border-color: var(--c-indigo); color: var(--text); font-weight: 700; }
.kind-chip.tone-violet[aria-checked="true"] { background: var(--t-violet); border-color: var(--c-violet); }
.kind-chip.tone-sky[aria-checked="true"] { background: var(--t-sky); border-color: var(--c-sky); }
.kind-chip.tone-emerald[aria-checked="true"] { background: var(--t-emerald); border-color: var(--c-emerald); }
.kind-chip.tone-amber[aria-checked="true"] { background: var(--t-amber); border-color: var(--c-amber); }
.kind-chip.tone-rose[aria-checked="true"] { background: var(--t-rose); border-color: var(--c-rose); }
.kind-chip.tone-teal[aria-checked="true"] { background: var(--t-teal); border-color: var(--c-teal); }
.rem-field { display: flex; flex-direction: column; }
.rem-field[hidden] { display: none; }
.rem-cust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: .86rem; }
.rem-cust:empty { display: none; }
.rem-cust-facts { color: var(--muted); margin-right: auto; }
.rem-preview .rem-card { grid-template-columns: 64px minmax(0, 1fr); box-shadow: var(--el-1); }
.rem-preview .rem-title.faint { color: var(--muted); font-weight: 600; }
.rem-rings { display: flex; align-items: flex-start; gap: 6px; margin: 8px 2px 0; font-size: .8rem; color: var(--muted); }
.rem-rings svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent); }
.rem-side-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.chip-check { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill, 999px); background: var(--surface); font-weight: 600; font-size: var(--fs-sm, .86rem); cursor: pointer; }
.chip-check:has(input:checked) { border-color: #ea580c; color: #c2410c; background: color-mix(in srgb, #f97316 12%, var(--surface)); }
.chip-check input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: #ea580c; }
.rem-suggest { gap: 6px; margin-top: 6px; }
.rem-suggest:empty { display: none; }
.rem-ed-side .rem-more { background: var(--surface); }
.mic-field { display: flex; gap: 8px; align-items: flex-start; }
.mic-field > input, .mic-field > textarea { flex: 1; min-width: 0; }
.mic-slot:empty { display: none; }
.mic-group { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.mic-btn { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 12px; display: grid; place-items: center; background: var(--accent-weak); color: var(--accent); border: 1px solid transparent; }
.mic-btn svg { width: 18px; height: 18px; }
.mic-btn.listening { background: var(--bad); color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.listening { animation: none; } }
.mic-lang { min-height: 0; padding: 2px 6px; font-size: .72rem; font-weight: 800; background: transparent; color: var(--muted); border: 0; }
.rem-actions-bar { margin: 0; padding: 12px 22px; border-top: 1px solid var(--border); align-items: center; background: var(--surface); }
.rem-actions-bar .rem-keys { margin-right: auto; font-size: .8rem; }
.rem-dialog .form-error { margin: 0; padding: 0 22px; }
.rem-dialog .form-error:empty { display: none; }
@media (max-width: 860px) {
  .rem-editor { grid-template-columns: minmax(0, 1fr); }
  .rem-ed-side { border-left: 0; border-top: 1px solid var(--border); }
  .rem-ed-main, .rem-ed-side { padding: 12px 16px 16px; }
  .rem-dlg-head, .rem-start { padding-left: 16px; padding-right: 16px; }
  .rem-actions-bar { padding: 12px 16px; }
  .rem-actions-bar .rem-keys { display: none; }
}

/* Completed reminders v2: stats, filters, day groups, compact rows */
.rem-done-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rem-done-bar .field-wrap { flex: 1 1 260px; max-width: 460px; }
.rem-done-bar #rem-done-export { margin-left: auto; }
.rem-done-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; }
.rds { all: unset; box-sizing: border-box; display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
button.rds { cursor: pointer; }
button.rds:hover { border-color: var(--accent); }
button.rds:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rds b { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rds-label { font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rds .faint { font-size: .78rem; }
.rds.tone-emerald b { color: var(--ok, #12773a); } .rds.tone-rose b { color: var(--bad); } .rds.tone-amber b { color: #b45309; } .rds.tone-violet b { color: var(--c-violet); }
:root[data-theme="dark"] .rds.tone-amber b { color: #fcd34d; }
.rds-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: 6px; }
.rds-bar { flex: 1; min-width: 3px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--c-violet) 55%, transparent); }
.rds-bar.today { background: var(--c-violet); }
#rem-done-filters { gap: 6px; }
.rem-done-day { margin-top: 14px; }
.rem-done-day:first-child { margin-top: 2px; }
.rem-done-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 4px; border-top: 1px solid var(--border); }
.rem-done-day + .rem-done-row { border-top: 0; }
.rdr-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.rdr-ic.ok { background: var(--ok-weak); color: var(--ok); }
.rdr-ic svg { width: 16px; height: 16px; }
.rdr-main { display: grid; gap: 6px; min-width: 0; }
.rdr-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rdr-title b { font-size: 1rem; }
.rem-done-row .rem-facts { gap: 4px 14px; font-size: .84rem; }
.rem-done-row .rem-history-box summary { min-height: 24px; font-size: .8rem; }
.rem-done-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rdo-input { flex: 1 1 240px; max-width: 420px; min-height: 36px; padding: 6px 12px; font-size: .88rem; }
.rem-done-row .actions { gap: 6px; align-items: center; }
@media (max-width: 1100px) { .rem-done-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rds-chart { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .rem-done-row { grid-template-columns: 32px minmax(0, 1fr); }
  .rem-done-row .actions { grid-column: 2; }
  .rem-done-bar #rem-done-export { margin-left: 0; }
}
dialog.rem-dialog > form > .dialog-actions { position: static; margin: 0; padding: 12px 22px; }
@media (max-width: 860px) { dialog.rem-dialog > form > .dialog-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } }
@media (max-width: 860px) {
  .rem-start { flex-wrap: nowrap; }
  .rem-start .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; min-width: 0; }
  .rem-start .chips .chip { flex: none; }
}
.rem-start .label { white-space: nowrap; }

/* 🎤 beside notes, outcomes, callbacks and quick add */
.rem-done-outcome > .mic-field { flex: 1 1 260px; max-width: 480px; align-items: center; }
.rem-done-outcome > .mic-field > .rdo-input { max-width: none; }
.hub-add > .mic-field, .promise-form .mic-field { align-items: center; }
.cp-body .mic-field .mic-btn, .hub-call-more .mic-field .mic-btn { width: 38px; height: 38px; min-height: 38px; }

/* Whose: Mine / Everyone / a colleague (Reminders, hub follow-ups) */
.scope-wrap { display: inline-flex; align-items: center; gap: 8px; }
.scope-label { font-size: .8rem; font-weight: 650; }
.scope-wrap .qs-trigger, .scope-wrap select { min-width: 170px; }
.hub-body > .scope-wrap { margin: 2px 2px 6px; }
.hub-main b .hub-owner { margin-left: 8px; vertical-align: middle; font-size: .72rem; }
.hub-tabs button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-tabs { gap: 2px; margin-inline: 10px; }
.hub-tabs button { font-size: .82rem; padding: 0 4px; gap: 4px; }
.hub-tabs .count { min-width: 18px; height: 18px; padding: 0 5px; }
@media (max-width: 640px) { .scope-wrap { width: 100%; } .scope-wrap .qs-trigger, .scope-wrap select { flex: 1; } }
.hub-tabs { display: flex; }
.hub-tabs button { flex: 1 1 auto; min-width: 0; }

/* Call panel: compact, fits without scrolling on a normal screen */
.call-panel { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
body.cp-open #hub-fab, body.cp-open #hub-panel { display: none !important; }
.cp-head { padding: 10px 12px 10px 14px; }
.cp-body { padding: 12px 14px 14px; gap: 10px; }
.cp-who { gap: 10px; }
.cp-who .av.lg { width: 44px; height: 44px; font-size: 18px; }
.cp-who h3 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-who .grow { min-width: 0; }
.cp-meta { font-size: 12.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sec h4 { margin-bottom: 5px; font-size: 11px; }
.cp-note { margin-bottom: 4px; padding: 6px 10px; }
.cp-note p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.cp-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text); }
.cp-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-indigo); }
.cp-pill .dot.incoming { background: var(--c-emerald); }
.cp-pill .dot.missed, .cp-pill .dot.rejected { background: var(--c-rose); }
.cp-pill.missed, .cp-pill.rejected { background: color-mix(in srgb, var(--c-rose) 12%, transparent); color: var(--bad); }
.cp-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-strip .chip.small { min-height: 30px; padding: 3px 10px; font-size: .78rem; }
.cp-strip button.small { min-height: 34px; }
#cp-form { gap: 8px; }
#cp-form .mic-field { position: relative; }
#cp-form .mic-field textarea { min-height: 58px; padding-right: 56px; resize: vertical; }
#cp-form .mic-slot { position: absolute; right: 6px; top: 6px; }
#cp-form .mic-group { flex-direction: column; gap: 0; }
#cp-form .mic-btn { width: 34px; height: 34px; min-height: 34px; border-radius: 10px; }
#cp-form .mic-lang { padding: 0 4px; font-size: .68rem; }
.cp-actions { gap: 6px; flex-wrap: nowrap; }
.cp-actions .ghost { margin-left: auto; }
.cp-allow { font-size: 12px; }
#cp-form > label { margin: 0; font-size: 13px; }
.cp-note span { display: inline; }
@media (max-height: 760px) { .cp-sec .cp-note:nth-of-type(n+2), .cp-allow { display: none; } }

/* Bell panel: opens up or down from the button, always inside the window */
.hub-panel { max-height: var(--hub-max, min(680px, calc(100vh - 140px))); }
.hub-panel.down { bottom: auto; top: var(--hub-top, 100px); }
@media (max-width: 760px) { .hub-panel.down { top: auto; } .hub-panel, .hub-panel.down { max-height: calc(100dvh - 120px); } }

/* Call recordings */
.rec-play { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-rose) 30%, transparent); background: color-mix(in srgb, var(--c-rose) 10%, var(--surface)); color: var(--text); font-size: .8rem; font-weight: 700; }
.rec-play svg { width: 12px; height: 12px; color: var(--c-rose); }
.rec-play.wide { margin-top: 6px; }
.rec-player { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.rec-audio { height: 36px; max-width: min(340px, 100%); }
.rec-cust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .88rem; }
.rec-cust > svg { width: 16px; height: 16px; color: var(--c-rose); }
.rec-cust .check { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.rec-hero { display: flex; gap: 16px; align-items: flex-start; }
.rec-hero h2 { margin: 0 0 6px; }
.rec-points { margin: 10px 0 16px; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }
.rec-switch { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.rec-switch .sub { display: block; font-size: .8rem; margin-top: 2px; }
.rec-switch input { width: 20px; height: 20px; accent-color: var(--accent); }
.rec-switch.off { cursor: default; opacity: .75; }
.rec-set { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rec-row .rec-play { flex: none; }
.rec-log { display: grid; gap: 2px; max-height: 360px; overflow: auto; font-size: .86rem; }
.rec-log-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.rec-log-row .faint { flex: none; width: 120px; }
.rec-consent { max-width: 520px; }
.rec-say { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 4px; font-size: .9rem; }
.rec-say p { margin: 0; }
#rec-page input[type=search] { width: 100%; margin: 4px 0 8px; }
@media (max-width: 640px) { .rec-hero { flex-direction: column; } .rec-log-row { flex-direction: column; gap: 0; } .rec-row { flex-wrap: wrap; } }
.rec-switch > .grow { flex: 1; min-width: 0; }
.rec-switch input[role=switch] { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.rec-switch input[role=switch]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.rec-switch input[role=switch]:checked { background: var(--accent); }
.rec-switch input[role=switch]:checked::after { transform: translateX(18px); }
.rec-switch input[role=switch]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rec-switch input[role=switch]:disabled { cursor: not-allowed; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .rec-switch input[role=switch], .rec-switch input[role=switch]::after { transition: none; } }
.rec-switch input[role=switch] { min-height: 0 !important; min-width: 0; height: 26px !important; width: 44px !important; padding: 0 !important; border: 0 !important; box-shadow: none; }

/* Browser helper */
.helper-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-indigo) 12%, var(--surface)), color-mix(in srgb, var(--c-violet) 12%, var(--surface))); border: 1px solid color-mix(in srgb, var(--c-indigo) 22%, transparent); }
.helper-banner[hidden] { display: none; }
.helper-banner b { display: block; }
.helper-banner .grow span { color: var(--muted); font-size: .88rem; }
.helper-logo { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4457f5, #7c3aed); }
.helper-logo svg { width: 20px; height: 20px; }
.helper-dialog { max-width: 560px; }
.helper-hero { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.helper-hero h2 { margin: 0; }
.helper-hero p { margin: 4px 0 0; }
.helper-code { font: 800 1.6rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; padding: 12px; border-radius: 14px; background: var(--surface-2); margin: 8px 0 12px; }
.helper-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.helper-status .pill.ok { background: color-mix(in srgb, var(--c-emerald) 16%, transparent); color: #067647; }
.helper-status .pill.warn { background: color-mix(in srgb, var(--c-amber) 18%, transparent); color: #92400e; }
.helper-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.helper-step { display: flex; gap: 12px; }
.helper-step p { margin: 4px 0 0; }
.helper-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--accent-weak); color: var(--accent); }
.helper-body code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-size: .85em; }
.helper-body h3 { margin: 16px 0 8px; }
@media (max-width: 640px) { .helper-banner { flex-wrap: wrap; } }

/* Browser helper dialog layout */
.helper-dialog { max-height: calc(100dvh - 32px); }
.helper-wrap { display: grid; gap: 14px; max-height: calc(100dvh - 32px); overflow: auto; }
.helper-wrap .tpl-head { margin: 0; }
.helper-wrap .tpl-head h2 { margin: 0; }
.helper-body { display: grid; gap: 14px; }
.helper-body > * { margin: 0; }
.helper-hero.tinted { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-indigo) 10%, var(--surface)), color-mix(in srgb, var(--c-violet) 10%, var(--surface))); border: 1px solid color-mix(in srgb, var(--c-indigo) 18%, transparent); margin: 0; }
.helper-hero.tinted b { font-size: 1rem; }
.helper-status { margin: 0; }
.helper-status .pill { font-size: .8rem; padding: 4px 10px; }
.helper-steps { margin: 0; gap: 10px; }
.helper-step { padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.helper-step > div > b:first-child { display: block; margin-top: 2px; }
.helper-step .button { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.helper-sec { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.helper-sec h3 { margin: 0; font-size: 1rem; }
.helper-body .list { display: grid; gap: 8px; }
.helper-empty { margin: 0; padding: 14px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; color: var(--muted); }
.helper-owner { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; border-bottom: 1px solid var(--border); }

/* Integrations: GoLead */
.gl-logo { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #f97316, #e11d48); }
.gl-card .card-head h2 { margin: 0; }
.gl-card .card-head p { margin: 2px 0 0; }
.gl-connect { display: flex; gap: 8px; margin: 12px 0; }
.gl-connect input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.gl-what { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.gl-what ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }
.gl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.gl-stat { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 2px; }
.gl-stat b { font-size: 1.3rem; }
.gl-stat span { font-size: .78rem; color: var(--muted); }
.gl-stat.tone-rose b { color: var(--bad); } .gl-stat.tone-emerald b { color: #059669; } .gl-stat.tone-amber b { color: #b45309; }
.gl-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.gl-map-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: .88rem; }
.gl-log .sub { display: block; }
.pill.ok { background: color-mix(in srgb, var(--c-emerald) 16%, transparent); color: #067647; }
.pill.warn { background: color-mix(in srgb, var(--c-amber) 18%, transparent); color: #92400e; }
.pill.bad { background: color-mix(in srgb, var(--c-rose) 14%, transparent); color: var(--bad); }
@media (max-width: 760px) { .gl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl-map { grid-template-columns: 1fr; } .gl-connect { flex-direction: column; } }

.copy-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; margin-left: 6px; vertical-align: middle; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.done { color: #059669; border-color: #059669; }
.note-line { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.cp-flag.gl { background: color-mix(in srgb, #f97316 12%, var(--surface)); font-weight: 600; align-items: center; }
.gl-dot { flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f97316, #e11d48); }
.gl-card > .card-head { display: flex; align-items: center; gap: 12px; }
.gl-card > .card-head .grow { flex: 1; min-width: 0; }

button.copy-btn { display: inline-grid !important; place-items: center; width: 28px !important; height: 28px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; margin-left: 6px; border-radius: 8px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--muted) !important; box-shadow: none !important; flex: none; }
button.copy-btn svg { width: 14px; height: 14px; stroke: currentColor; }
button.copy-btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
button.copy-btn.done { color: #059669 !important; border-color: #059669 !important; }

/* Integrations catalogue */
.int-sec h2 { font-size: 1rem; margin: 4px 0 10px; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.int-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--el-1, 0 1px 3px rgba(18,22,46,.06)); }
.int-card.soon { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.int-card p { margin: 0; }
.int-top { display: flex; align-items: center; gap: 12px; }
.int-top .grow { display: grid; gap: 3px; justify-items: start; }
.int-top b { font-size: 1rem; }
.int-logo { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.05rem; }
.int-actions { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; }
.int-err { color: var(--bad); font-size: .85rem; }
.int-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.int-back svg { width: 16px; height: 16px; }
input.int-switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px !important; height: 26px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; margin: 0; }
input.int-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
input.int-switch:checked { background: var(--accent); }
input.int-switch:checked::after { transform: translateX(18px); }
input.int-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.int-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 6px; }
.int-top > .grow { flex: 1; min-width: 0; }

/* Sidebar: permanent Browser helper button */
.nav-new { margin-left: auto; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #22c38e, #10b981); color: #fff; }
.ws-nav .nav-group[hidden] { display: none; }

/* Add-on pitch (Leads / AI notes not bought yet) */
.addon-pitch { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.addon-hero { display: flex; gap: 16px; align-items: flex-start; }
.addon-hero h2 { margin: 6px 0 4px; }
.addon-hero p { margin: 0; }
.addon-badge { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c-violet), var(--c-indigo)); }
.addon-badge svg { width: 26px; height: 26px; }
.addon-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.addon-points li { display: flex; gap: 10px; align-items: flex-start; }
.addon-points svg { flex: none; width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }
.addon-pitch > .button { align-self: flex-start; }

/* AI note card on a customer */
.ai-card { padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-violet) 30%, var(--border)); background: color-mix(in srgb, var(--c-violet) 6%, var(--surface)); display: flex; flex-direction: column; gap: 6px; }
.ai-card p { margin: 0; }
.ai-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--c-violet), var(--c-indigo)); }
.ai-mark svg { width: 14px; height: 14px; }
.ai-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ai-facts span { display: flex; flex-direction: column; min-width: 0; }
.ai-facts small { color: var(--faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }

/* Daily summary */
.sum-day { font-weight: 700; white-space: nowrap; }
.sum-table td, .sum-table th { white-space: nowrap; }

/* Team: phone health + alerts */
.health-row { align-items: flex-start; }
.health-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 14px; background: var(--c-emerald); }
.health-dot.warn { background: var(--c-amber); }
.health-dot.bad { background: var(--c-rose); }
.health-issues { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; }
.health-issues li.critical { color: var(--bad); }
.health-issues li.warn { color: var(--warn); }
.watch-hours, .watch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0; }
.watch-row { padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.watch-hours { border-bottom: 1px solid var(--border); }
.watch-hours .faint { flex-basis: 100%; font-size: .8rem; }
.watch-feed { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.watch-feed .item { align-items: center; }
.watch-feed .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* Plan & add-ons */
.plan-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan-strip > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.bill-card { display: flex; flex-direction: column; gap: 12px; }
.bill-card p { margin: 0; }
.bill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bill-row > b { min-width: 80px; }
.bill-row input[type=number] { width: 90px; }
.bill-addons { display: flex; flex-direction: column; gap: 6px; }
.bill-check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.bill-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.bill-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.bill-total > span { display: flex; flex-direction: column; }
.bill-total b.num { font-size: 1.4rem; }
.addon-card.focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-logo.sheets { background: linear-gradient(135deg, #16a34a, #15803d); }
.sh-email { font-size: .82rem; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .plan-strip { grid-template-columns: 1fr; }
  .bill-grid { grid-template-columns: 1fr; }
  .lead-board { grid-auto-columns: minmax(78vw, 1fr); }
  .lead-search { width: 100%; }
  #leads-actions, #summary-actions { flex-wrap: wrap; }
}
.price-grid { display: grid; gap: 8px; margin: 8px 0; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; }
@media (max-width: 640px) { .price-row { grid-template-columns: 1fr auto; } .price-row > span { grid-column: 1 / -1; } }
.watch-hours input, .watch-row input, .watch-row select, .bill-row input, .bill-row select, .lead-recent button { width: auto; flex: none; }
.watch-feed .item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.watch-feed .item .grow { flex: 1; min-width: 0; }
.watch-feed .item .sub { display: block; }
.watch-row .qs, .bill-row .qs { display: inline-block; width: auto; min-width: 110px; flex: none; }
.lead-card .qs, .cat-pick .qs-stage-select { min-width: 0; }
.lead-recent .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.lead-recent .row .grow { flex: 1; min-width: 0; }
.bill-row:has(.bill-addons) { align-items: flex-start; }
.req-status { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--c-amber); }
.req-status.ok { border-left-color: var(--c-emerald); }
.req-status.bad { border-left-color: var(--c-rose); }
.req-status .grow { flex: 1; min-width: 0; }
.req-status .sub { display: block; }
.req-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-amber) 16%, transparent); color: #92400e; }
.req-status.ok .req-ic { background: var(--ok-weak); color: var(--ok); }
.req-status.bad .req-ic { background: var(--bad-weak); color: var(--bad); }
.req-ic svg { width: 18px; height: 18px; }

/* Admin: purchase requests */
#request-list { display: flex; flex-direction: column; gap: 14px; }
.pr-card { --tone: var(--c-indigo); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.pr-card.tone-violet { --tone: var(--c-violet); }
.pr-card.tone-teal { --tone: var(--c-teal); }
.pr-card.is-open::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 40%, transparent)); }
.pr-top { display: flex; align-items: flex-start; gap: 14px; }
.pr-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #12162e)); }
.pr-icon .icon { background: none; color: #fff; width: auto; height: auto; }
.pr-icon svg { width: 24px; height: 24px; }
.pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; }
.pr-kind { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--tone); }
.pr-title { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.pr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pr-tag { font-size: .82rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, transparent); color: color-mix(in srgb, var(--tone) 75%, var(--text)); }
.pr-price { flex: none; text-align: right; display: flex; flex-direction: column; }
.pr-price b { font-size: 1.7rem; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pr-price small { color: var(--faint); font-size: .75rem; }
.pr-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.pr-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.pr-chip small { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.pr-chip b { font-size: .9rem; overflow-wrap: anywhere; }
.pr-chip.next { background: var(--ok-weak); }
.pr-chip.next small, .pr-chip.next b { color: var(--ok); }
.pr-answer { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; }
.pr-answer.resolved { background: var(--ok-weak); color: var(--ok); }
.pr-answer.declined { background: var(--bad-weak); color: var(--bad); }
.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-actions .faint { font-size: .82rem; }
.ok-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.ok-btn:hover { filter: brightness(1.08); }
.pr-panel { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.pr-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pr-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .8rem; }
.pr-form label.grow { flex: 1; min-width: 200px; }
.pr-form input[type=number] { width: 150px; }
@media (max-width: 640px) {
  .pr-top { flex-wrap: wrap; }
  .pr-price { width: 100%; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
}

/* Admin drawer: waiting requests and add-on rows */
.waiting-card { border: 1px solid color-mix(in srgb, var(--c-amber) 45%, var(--border)); background: color-mix(in srgb, var(--c-amber) 6%, var(--surface)); }
.waiting-card .pr-card { box-shadow: none; }
.addon-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.addon-row:first-child { border-top: 0; }
.addon-info { display: flex; flex-direction: column; gap: 2px; min-width: 180px; flex: 1; }
.addon-info .row { gap: 8px; align-items: center; }
.addon-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.addon-until { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; }
.addon-until input { width: 160px; min-height: 36px; padding: 6px 8px; }
.card:has(> #request-list) { background: none; border: 0; box-shadow: none; padding: 0; }
#request-list > .item { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- Leads */
:root { --c-orange: #f97316; --c-slate: #64748b; }
.ws .page.page-wide { max-width: none; }
.st-indigo { --st: var(--c-indigo); } .st-sky { --st: var(--c-sky); } .st-teal { --st: var(--c-teal); } .st-emerald { --st: var(--c-emerald); }
.st-amber { --st: var(--c-amber); } .st-orange { --st: var(--c-orange); } .st-rose { --st: var(--c-rose); } .st-violet { --st: var(--c-violet); } .st-slate { --st: var(--c-slate); }
.st-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--c-slate)); }
.lead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lead-search { width: 280px; max-width: 100%; }
.lead-tools select.compact { max-width: 190px; }
#leads-actions .chips .chip svg { width: 15px; height: 15px; }
.lead-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.lead-col { display: flex; flex-direction: column; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); min-height: 220px; max-height: calc(100vh - 230px); transition: box-shadow .12s, background .12s; }
.lead-col.drop { background: color-mix(in srgb, var(--st, var(--c-slate)) 10%, var(--surface-2)); box-shadow: 0 0 0 2px var(--st, var(--c-slate)) inset; }
.lead-col-head { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; border-top: 4px solid var(--st, var(--c-slate)); border-radius: 16px 16px 0 0; background: inherit; }
.lead-col-head .row { gap: 8px; align-items: center; }
.lead-col-head b { font-size: .95rem; }
.lead-col-head .count { margin-left: auto; font-size: .78rem; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.lead-col-sum { font-size: .82rem; font-weight: 700; color: var(--muted); min-height: 1.1em; }
.lead-col.type-won .lead-col-sum { color: var(--ok); }
.lead-col-body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; overflow-y: auto; }
.lead-empty { margin: 4px 0; padding: 16px 8px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; color: var(--faint); font-size: .85rem; }
.lead-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--st, var(--c-slate)); box-shadow: var(--shadow); cursor: grab; text-align: left; }
.lead-card:hover { border-color: color-mix(in srgb, var(--st, var(--c-slate)) 50%, var(--border)); }
.lead-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead-card.dragging { opacity: .5; }
.lead-card.stuck { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-rose) 45%, transparent), var(--shadow); }
.lc-top { display: flex; align-items: baseline; gap: 8px; }
.lc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-value { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok); }
.lc-product { font-size: .84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.lc-meta:empty { display: none; }
.lc-temp, .lc-tag, .lc-cb { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.lc-cb svg { width: 12px; height: 12px; }
.lc-cb.late { background: var(--bad-weak); color: var(--bad); }
.t-hot { background: var(--bad-weak); color: var(--bad); }
.t-warm { background: var(--warn-weak); color: var(--warn); }
.t-cold { background: color-mix(in srgb, var(--c-sky) 14%, transparent); color: #0369a1; }
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .78rem; }
.lc-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lc-who .avatar { width: 22px; height: 22px; font-size: .62rem; }
.lc-days { font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.lc-days.stuck, .stuck-text { color: var(--bad); }
.lead-recent { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface); }
.lead-recent .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.lead-recent .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.lead-recent .avatar { width: 24px; height: 24px; font-size: .62rem; }
.lead-recent button { width: auto; flex: none; }
.stage-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--st, var(--c-slate)) 14%, transparent); color: color-mix(in srgb, var(--st, var(--c-slate)) 70%, var(--text)); }
.lead-table tr.clickable { cursor: pointer; }
.lead-table tr.clickable:hover td { background: var(--surface-2); }
.lead-table td { white-space: nowrap; }
.lead-table .sub { display: block; font-size: .78rem; }
.rb-list { display: flex; flex-direction: column; gap: 10px; }
.rb-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; gap: 10px; align-items: center; }
.rb-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; min-width: 0; }
.rb-track { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rb { display: block; height: 100%; border-radius: 999px; background: var(--st, var(--accent)); }
.rb-num { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stuck-row { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; display: flex; gap: 10px; align-items: center; padding: 10px 0; min-height: 0; color: inherit; font-weight: inherit; }
.stuck-row .sub { display: block; }
/* lead panel and settings */
dialog.lead-dialog { width: min(720px, 100vw); }
dialog.lead-dialog.wide { width: min(900px, 100vw); }
.lead-dialog .drawer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-dialog .drawer-head .grow { flex: 1; min-width: 200px; }
.lead-dialog .drawer-head h2 { margin: 0; }
.lead-dialog .drawer-head p { margin: 2px 0 0; }
.lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lf { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: .84rem; }
.lf.span2 { grid-column: 1 / -1; }
.seg { display: inline-flex; gap: 6px; }
.seg-b { min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-weight: 700; }
.seg-b[aria-pressed=true].t-hot { background: var(--bad); color: #fff; border-color: var(--bad); }
.seg-b[aria-pressed=true].t-warm { background: var(--c-amber); color: #fff; border-color: var(--c-amber); }
.seg-b[aria-pressed=true].t-cold { background: var(--c-sky); color: #fff; border-color: var(--c-sky); }
.lf-closed:empty { display: none; }
.lf-history ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lf-history li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: .88rem; }
.lead-actions { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }
.lead-actions .spacer { flex: 1; }
.ls-stages, .ls-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--st, var(--c-slate)); }
.ls-row > input[type=text] { flex: 1; min-width: 150px; min-height: 38px; padding: 6px 10px; }
.ls-row select.compact { max-width: 130px; }
.ls-stuck { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 600; }
.ls-stuck input { width: 70px; min-height: 36px; padding: 4px 8px; }
.ls-count { font-size: .78rem; min-width: 56px; }
.ls-row button { width: auto; }
.lead-close-dialog form { display: flex; flex-direction: column; gap: 12px; padding: 20px; min-width: min(380px, 90vw); }
.lead-close-dialog label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
@media (max-width: 640px) {
  .lead-board { grid-auto-columns: minmax(82vw, 1fr); }
  .lead-col { max-height: none; }
  .lf-grid { grid-template-columns: 1fr; }
  .rb-row { grid-template-columns: 1fr auto; }
  .rb-row .rb-track { grid-column: 1 / -1; grid-row: 2; }
  .lead-search { width: 100%; }
}

/* Leads: lead + call work (Today, next steps, timeline, closing facts) */
.lc-temp small { margin-left: 3px; opacity: .75; font-weight: 800; }
.lc-next { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); color: var(--muted); }
.lc-next svg { width: 12px; height: 12px; }
.lc-next.n-overdue { background: var(--bad-weak); color: var(--bad); }
.lc-next.n-today { background: var(--warn-weak); color: var(--warn); }
.lc-next.n-later { background: color-mix(in srgb, var(--c-sky) 12%, transparent); color: #0369a1; }
.lc-log { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.lc-log li { display: flex; flex-direction: column; }
.lc-log li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-lost { margin: 0; font-size: .8rem; padding: 6px 8px; border-radius: 8px; background: var(--bad-weak); color: var(--bad); }
.lc-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.lc-actions button { min-height: 30px; padding: 4px 8px; width: auto; }
.lc-actions .icon-only { padding: 4px 6px; }
.lc-foot .lc-actions { margin-left: 6px; }
.today-kpis { margin-bottom: 4px; }
.today-group .list { display: flex; flex-direction: column; }
.today-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border); cursor: pointer; border-radius: 10px; }
.today-row:first-child { border-top: 0; }
.today-row:hover { background: var(--surface-2); }
.today-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.today-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.today-row .row { gap: 8px; align-items: center; }
.tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .82rem; color: var(--muted); }
.tr-last { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-group.g-overdue { border-left: 4px solid var(--c-rose); }
.today-group.g-today { border-left: 4px solid var(--c-amber); }
.lead-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--st, var(--c-indigo)) 14%, var(--surface)), var(--surface)); }
.hero-chips { gap: 6px; margin-top: 6px; }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.stat-strip > span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.stat-strip small { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.stat-strip b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.known-tip { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-violet) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-violet) 25%, var(--border)); font-weight: 600; font-size: .9rem; }
.known-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.known-box[hidden] { display: none; }
.known-box button { align-self: flex-start; }
.next-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.next-card .grow { flex: 1; display: flex; flex-direction: column; }
.next-card small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.next-card.n-overdue { background: var(--bad-weak); border-color: color-mix(in srgb, var(--c-rose) 40%, var(--border)); }
.next-card.n-overdue b { color: var(--bad); }
.next-card.n-today { background: var(--warn-weak); }
.next-card.n-none { border-style: dashed; }
.next-card button { width: auto; }
.product-chips { margin-top: 6px; }
.product-chips .chip { font-size: .8rem; }
.close-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; }
.close-box.won { background: var(--ok-weak); }
.close-box.lost { background: var(--bad-weak); }
.close-form .chips .chip { font-size: .82rem; }
.form-error { margin: 0; color: var(--bad); font-weight: 600; font-size: .88rem; }
.lf-timeline { display: flex; flex-direction: column; gap: 10px; }
.lf-timeline .row.spread { flex-wrap: wrap; gap: 8px; }
.lf-timeline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-day { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-top: 6px; }
.tl-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: .88rem; }
.tl-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.tl-ic svg { width: 14px; height: 14px; }
.tl-text { overflow-wrap: anywhere; }
.lead-close-dialog form { max-height: 90vh; overflow-y: auto; }
.lead-close-dialog .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .today-row { flex-wrap: wrap; }
  .today-row .lc-actions { margin-left: 52px; }
  .tr-last { max-width: 100%; }
  .lead-close-dialog .lf-grid { grid-template-columns: 1fr; }
}

.tl-ic.tone-indigo { background: color-mix(in srgb, var(--c-indigo) 14%, transparent); color: var(--c-indigo); }
.tl-ic.tone-sky { background: color-mix(in srgb, var(--c-sky) 14%, transparent); color: var(--c-sky); }
.tl-ic.tone-teal { background: color-mix(in srgb, var(--c-teal) 14%, transparent); color: var(--c-teal); }
.tl-ic.tone-emerald { background: color-mix(in srgb, var(--c-emerald) 14%, transparent); color: var(--c-emerald); }
.tl-ic.tone-amber { background: color-mix(in srgb, var(--c-amber) 14%, transparent); color: var(--c-amber); }
.tl-ic.tone-orange { background: color-mix(in srgb, var(--c-orange) 14%, transparent); color: var(--c-orange); }
.tl-ic.tone-rose { background: color-mix(in srgb, var(--c-rose) 14%, transparent); color: var(--c-rose); }
.tl-ic.tone-violet { background: color-mix(in srgb, var(--c-violet) 14%, transparent); color: var(--c-violet); }
.tl-ic.tone-slate { background: color-mix(in srgb, var(--c-slate) 14%, transparent); color: var(--c-slate); }
.lead-close-dialog label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.lead-close-dialog label.check input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--accent); }
.stuck-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }