/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ======================================================
   SCHEME 1: Fight Club — dark sidebar + orange accent
   ====================================================== */
:root,
[data-scheme="1"] {
  /* T-687 (t600): shared type-scale token — brought over with F-172's de-monospace fix. */
  --text-xs: 12px;
  --sb-bg: #0f1117;
  --sb-logo: #ffffff;
  --sb-group: #9ca3af;
  --sb-link: #9ca3af;
  --sb-hover-bg: rgba(249,115,22,.10);
  --sb-hover: #f97316;
  --sb-active-bg: rgba(249,115,22,.15);
  --sb-active: #f97316;
  --sb-active-border: #f97316;
  --sb-footer: #1f2937;
  --sb-user-email: #d1d5db;
  --sb-user-role: #9ca3af;
  --sb-avatar-bg: #f97316;
  --sb-avatar: #ffffff;
  --scheme-dot: #f97316;
}

/* Scheme 1 — LIGHT */
[data-scheme="1"][data-theme="light"],
[data-scheme="1"]:not([data-theme="dark"]) {
  --bg: #f8fafc;
  --card: #ffffff;
  --t1: #111827;
  --t2: #4b5563;
  --t3: #6b7280;
  --border: #e5e7eb;
  --th-bg: #f9fafb;
  --bar-bg: #ffffff;
  --bar-border: #e5e7eb;
  --ok-bg: #dcfce7; --ok: #15803d;
  --warn-bg: #fef9c3; --warn: #a16207;
  --err-bg: #fee2e2; --err: #b91c1c;
  --blue-bg: #dbeafe; --blue: #1d4ed8;
  --gray-bg: #f3f4f6; --gray: #374151;
  --btn-p: #c2410c; --btn-p-t: #fff; --btn-p-h: #9a3412;
  --accent-text: #c2410c;
  --btn-s: #f3f4f6; --btn-s-t: #374151; --btn-s-h: #e5e7eb;
  --btn-d: #ef4444; --btn-d-t: #fff; --btn-d-h: #dc2626;
  --inp: #ffffff; --inp-b: #d1d5db;
  --tab-a: #f97316; --tab-ab: #f97316;
  --shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Scheme 1 — DARK */
[data-scheme="1"][data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --t1: #f1f5f9;
  --t2: #94a3b8;
  --t3: #8593a8;
  --border: #334155;
  --th-bg: #1e293b;
  --bar-bg: #1e293b;
  --bar-border: #334155;
  --ok-bg: #14532d; --ok: #86efac;
  --warn-bg: #422006; --warn: #fcd34d;
  --err-bg: #450a0a; --err: #fca5a5;
  --blue-bg: #1e3a5f; --blue: #93c5fd;
  --gray-bg: #1f2937; --gray: #d1d5db;
  --btn-p: #c2410c; --btn-p-t: #fff; --btn-p-h: #9a3412;
  --accent-text: #fb923c;
  --btn-s: #334155; --btn-s-t: #f1f5f9; --btn-s-h: #475569;
  --btn-d: #ef4444; --btn-d-t: #fff; --btn-d-h: #dc2626;
  --inp: #334155; --inp-b: #475569;
  --tab-a: #f97316; --tab-ab: #f97316;
  --shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ======================================================
   SCHEME 2: Slate + Indigo — modern SaaS
   ====================================================== */
[data-scheme="2"] {
  --sb-bg: #1e293b;
  --sb-logo: #ffffff;
  --sb-group: #94a3b8;
  --sb-link: #94a3b8;
  --sb-hover-bg: rgba(129,140,248,.10);
  --sb-hover: #a5b4fc;
  --sb-active-bg: rgba(129,140,248,.18);
  --sb-active: #818cf8;
  --sb-active-border: #818cf8;
  --sb-footer: #334155;
  --sb-user-email: #cbd5e1;
  --sb-user-role: #94a3b8;
  --sb-avatar-bg: #818cf8;
  --sb-avatar: #ffffff;
  --scheme-dot: #818cf8;
}

[data-scheme="2"][data-theme="light"],
[data-scheme="2"]:not([data-theme="dark"]) {
  --bg: #f1f5f9;
  --card: #ffffff;
  --t1: #0f172a;
  --t2: #475569;
  --t3: #5f6e84;
  --border: #e2e8f0;
  --th-bg: #f8fafc;
  --bar-bg: #ffffff;
  --bar-border: #e2e8f0;
  --ok-bg: #dcfce7; --ok: #15803d;
  --warn-bg: #fef9c3; --warn: #a16207;
  --err-bg: #fee2e2; --err: #b91c1c;
  --blue-bg: #e0e7ff; --blue: #4338ca;
  --gray-bg: #f1f5f9; --gray: #334155;
  --btn-p: #4f46e5; --btn-p-t: #fff; --btn-p-h: #4338ca;
  --accent-text: #4f46e5;
  --btn-s: #f1f5f9; --btn-s-t: #334155; --btn-s-h: #e2e8f0;
  --btn-d: #ef4444; --btn-d-t: #fff; --btn-d-h: #dc2626;
  --inp: #ffffff; --inp-b: #cbd5e1;
  --tab-a: #6366f1; --tab-ab: #6366f1;
  --shadow: 0 1px 4px rgba(0,0,0,.07);
}

[data-scheme="2"][data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --t1: #f1f5f9;
  --t2: #94a3b8;
  --t3: #8593a8;
  --border: #334155;
  --th-bg: #1e293b;
  --bar-bg: #1e293b;
  --bar-border: #334155;
  --ok-bg: #14532d; --ok: #86efac;
  --warn-bg: #422006; --warn: #fcd34d;
  --err-bg: #450a0a; --err: #fca5a5;
  --blue-bg: #312e81; --blue: #a5b4fc;
  --gray-bg: #1f2937; --gray: #d1d5db;
  --btn-p: #4f46e5; --btn-p-t: #fff; --btn-p-h: #4338ca;
  --accent-text: #a5b4fc;
  --btn-s: #334155; --btn-s-t: #f1f5f9; --btn-s-h: #475569;
  --btn-d: #ef4444; --btn-d-t: #fff; --btn-d-h: #dc2626;
  --inp: #334155; --inp-b: #475569;
  --tab-a: #818cf8; --tab-ab: #818cf8;
  --shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ======================================================
   SCHEME 3: Minimal — white sidebar + blue accent
   ====================================================== */
[data-scheme="3"] {
  --sb-bg: #ffffff;
  --sb-logo: #111827;
  --sb-group: #6b7280;
  --sb-link: #6b7280;
  --sb-hover-bg: #f3f4f6;
  --sb-hover: #111827;
  --sb-active-bg: #eff6ff;
  --sb-active: #2563eb;
  --sb-active-border: #2563eb;
  --sb-footer: #f3f4f6;
  --sb-user-email: #374151;
  --sb-user-role: #6b7280;
  --sb-avatar-bg: #2563eb;
  --sb-avatar: #ffffff;
  --scheme-dot: #2563eb;
}

[data-scheme="3"][data-theme="light"],
[data-scheme="3"]:not([data-theme="dark"]) {
  --bg: #f9fafb;
  --card: #ffffff;
  --t1: #111827;
  --t2: #4b5563;
  --t3: #6b7280;
  --border: #e5e7eb;
  --th-bg: #f9fafb;
  --bar-bg: #ffffff;
  --bar-border: #e5e7eb;
  --ok-bg: #dcfce7; --ok: #15803d;
  --warn-bg: #fef9c3; --warn: #a16207;
  --err-bg: #fee2e2; --err: #b91c1c;
  --blue-bg: #dbeafe; --blue: #1d4ed8;
  --gray-bg: #f3f4f6; --gray: #374151;
  --btn-p: #2563eb; --btn-p-t: #fff; --btn-p-h: #1d4ed8;
  --accent-text: #2563eb;
  --btn-s: #f3f4f6; --btn-s-t: #374151; --btn-s-h: #e5e7eb;
  --btn-d: #ef4444; --btn-d-t: #fff; --btn-d-h: #dc2626;
  --inp: #ffffff; --inp-b: #d1d5db;
  --tab-a: #2563eb; --tab-ab: #2563eb;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
}

[data-scheme="3"][data-theme="dark"] {
  --bg: #111827;
  --card: #1f2937;
  --t1: #f9fafb;
  --t2: #9ca3af;
  --t3: #8b94a1;
  --border: #374151;
  --th-bg: #1f2937;
  --bar-bg: #1f2937;
  --bar-border: #374151;
  --ok-bg: #14532d; --ok: #86efac;
  --warn-bg: #422006; --warn: #fcd34d;
  --err-bg: #450a0a; --err: #fca5a5;
  --blue-bg: #1e3a5f; --blue: #93c5fd;
  --gray-bg: #1f2937; --gray: #d1d5db;
  --btn-p: #2563eb; --btn-p-t: #fff; --btn-p-h: #1d4ed8;
  --accent-text: #60a5fa;
  --btn-s: #374151; --btn-s-t: #f9fafb; --btn-s-h: #4b5563;
  --btn-d: #ef4444; --btn-d-t: #fff; --btn-d-h: #dc2626;
  --inp: #374151; --inp-b: #4b5563;
  --tab-a: #60a5fa; --tab-ab: #60a5fa;
  --shadow: 0 1px 4px rgba(0,0,0,.35);
  /* Dark-theme sidebar — the menu must follow the light/dark toggle, not stay white. */
  --sb-bg: #1f2937;
  --sb-logo: #f9fafb;
  --sb-group: #9ca3af;
  --sb-link: #9ca3af;
  --sb-hover-bg: #374151;
  --sb-hover: #f9fafb;
  --sb-active-bg: #1e3a5f;
  --sb-active: #60a5fa;
  --sb-active-border: #60a5fa;
  --sb-footer: #374151;
  --sb-user-email: #d1d5db;
  --sb-user-role: #9ca3af;
  --sb-avatar-bg: #2563eb;
  --sb-avatar: #ffffff;
}

/* ======================================================
   LAYOUT
   ====================================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--t1);
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.layout {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ======================================================
   SIDEBAR
   ====================================================== */
.sidebar {
  width: 228px;
  min-width: 228px;
  background: var(--sb-bg);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
  transition: background .2s;
}

[data-scheme="3"] .sidebar {
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 var(--border);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 18px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-logo);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sidebar-logo-icon { font-size: 22px; flex-shrink: 0; }

.sidebar-nav { flex: 1; min-height: 0; padding: 4px 0 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }

.nav-group { margin-bottom: 2px; }
/* Separate sections from their items: hairline divider + breathing room above each group.
   Uses --border (theme-adaptive) so it stays visible on both the light (white) and dark sidebar. */
.nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sb-group);
  padding: 14px 18px 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--sb-link);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  cursor: pointer;
}

.nav-link:hover {
  background: var(--sb-hover-bg);
  color: var(--sb-hover);
}

.nav-link svg {
  width: 15px;
  height: 15px;
  opacity: .65;
  flex-shrink: 0;
  transition: opacity .12s;
}

.nav-link:hover svg { opacity: 1; }

/* Active states — each page sets data-page on <html> */
.nav-link.active {
  background: var(--sb-active-bg);
  color: var(--sb-active);
  border-left-color: var(--sb-active-border);
  font-weight: 600;
}
.nav-link.active svg { opacity: 1; }

.sidebar-footer {
  border-top: 1px solid var(--sb-footer);
  padding: 14px 16px;
  margin-top: 8px;
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sb-avatar-bg);
  color: var(--sb-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.sb-user-info { flex: 1; min-width: 0; }
.sb-user-email { font-size: 12px; color: var(--sb-user-email); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--sb-user-role); }

.sb-logout {
  color: var(--sb-group);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color .12s;
}
.sb-logout:hover { color: var(--sb-hover); }
.sb-logout svg { width: 15px; height: 15px; }

/* T-511: scheme×theme switcher (sidebar footer). Redesigned 2026-06-27:
   no light pill on the dark sidebar; theme toggle + 3 accent-color dots (pick by
   colour, not "1/2/3"). Active state + theme handled by base.html JS via [data-*]. */
.scheme-switcher {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.theme-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-hover-bg);
  border: 1px solid var(--border);
  color: var(--sb-hover);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color .14s, border-color .14s, background .14s;
}
.theme-toggle:hover { border-color: var(--sb-active); color: var(--sb-active); }
.theme-toggle:hover { color: var(--sb-hover); border-color: var(--sb-hover); background: var(--sb-hover-bg); }
.theme-toggle:focus-visible { outline: 2px solid var(--sb-hover); outline-offset: 2px; }
.scheme-dots { display: inline-flex; gap: 16px; align-items: center; }

/* ======================================================
   MAIN AREA
   ====================================================== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* TOPBAR */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  min-height: 56px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-border);
  gap: 16px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
}

/* T-702: favorite-star toggle, inserted by base.html's JS right after the title's own text
   (before any existing child element — e.g. dashboard.html/reports.html's inline .topbar-sub
   date span — so it lands next to the TITLE, not after the subtitle). Deliberately plain
   inline flow (both <button> and <span> are inline-level by default) rather than flexing
   .topbar-title itself: Diablo caught an earlier draft that used inline-flex there, which
   re-centered and double-gapped the two pages' existing inline subtitle span. */
.fav-star-form { display: inline; }
.fav-star-btn {
  background: none; border: none; cursor: pointer; padding: 0; margin-left: 6px;
  font-size: 18px; line-height: 1; color: var(--warn); vertical-align: middle;
}
.fav-star-btn[aria-pressed="false"] { color: var(--t3); }
.fav-star-btn:hover { color: var(--warn); }

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Scheme accent dots (sidebar switcher) — pick a scheme by its accent colour.
   Resting ring keeps the dot visible on both dark and white (scheme 3) sidebars;
   active ring uses sidebar bg + logo colour so it contrasts in every scheme. */
.scheme-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(148, 163, 184, .4);
  transition: transform .14s, box-shadow .14s;
  flex-shrink: 0;
}
.scheme-dot::after { content: ""; position: absolute; inset: -8px; } /* 32px touch target, no overlap (16px gap) */
.scheme-dot:hover { transform: scale(1.18); }
.scheme-dot:focus-visible { outline: 2px solid var(--sb-hover); outline-offset: 3px; }
.scheme-dot.active { box-shadow: 0 0 0 2px var(--sb-bg), 0 0 0 3.5px var(--sb-logo); }
.scheme-dot-1 { background: #f97316; }
.scheme-dot-2 { background: #818cf8; }
.scheme-dot-3 { background: #2563eb; }

/* CONTENT SCROLL */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ======================================================
   COMMON COMPONENTS
   ====================================================== */

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.kpi-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}

.kpi-delta {
  font-size: 12px;
  font-weight: 600;
}
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--err); }
.kpi-delta.neutral { color: var(--t3); }

/* Cards / Panels */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}

.panel-body { padding: 0; }
.panel-body-padded { padding: 20px; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th {
  background: var(--th-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--t3);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--t2);
  vertical-align: middle;
}

td.primary { color: var(--t1); font-weight: 500; }

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-gray { background: var(--gray-bg); color: var(--gray); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--btn-p); color: var(--btn-p-t); }
.btn-primary:hover { background: var(--btn-p-h); }
.btn-secondary { background: var(--btn-s); color: var(--btn-s-t); }
.btn-secondary:hover { background: var(--btn-s-h); }
.btn-danger { background: var(--btn-d); color: var(--btn-d-t); }
.btn-danger:hover { background: var(--btn-d-h); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 5px; }
.btn svg { width: 14px; height: 14px; }

/* Inputs */
input, select, textarea {
  background: var(--inp);
  border: 1px solid var(--inp-b);
  color: var(--t1);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .12s;
}
input:focus, select:focus { border-color: var(--btn-p); box-shadow: 0 0 0 2px rgba(var(--btn-p-rgb, 249,115,22),.12); }

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}
.tab-btn {
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  font-family: inherit;
}
.tab-btn:hover { color: var(--t1); border-color: var(--t3); }
.tab-btn.active { background: var(--btn-p); color: #fff; border-color: var(--btn-p); }

/* Two-level report nav: categories = underline tabs (top level), reports = pills (.tab-btn,
   below). Distinct shapes make the hierarchy read at a glance; one category panel shows at a time. */
.report-cats {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.report-cat {
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--t2); background: transparent;
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.report-cat:hover { color: var(--t1); }
.report-cat.active { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.report-cat:focus-visible { outline: 2px solid var(--btn-p); outline-offset: 2px; }
.report-cat-panels { margin-bottom: 20px; }
.report-cat-panel { display: none; }
.report-cat-panel.open { display: flex; flex-wrap: wrap; gap: 6px; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Section title */
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

/* Flash messages */
.flash-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 10px 16px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 16px;
}
.flash-err {
  background: var(--err-bg);
  color: var(--err);
  border: 1px solid var(--err);
  padding: 10px 16px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Progress bar */
.progress-wrap { background: var(--border); border-radius: 4px; height: 6px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 4px; background: var(--btn-p); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--t3);
}
.empty-state-icon { font-size: 36px; margin-bottom: 12px; }
.empty-state-text { font-size: 14px; }

/* Form group */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--t2); }

/* Form select — styled dropdown (all pages, overrides native chrome) */
.form-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--t1);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .12s;
}
.form-select:focus { border-color: var(--btn-p); box-shadow: 0 0 0 2px rgba(249,115,22,.12); }
.form-select-sm {
  padding: 4px 28px 4px 8px;
  font-size: 12px;
  border-radius: 5px;
}

/* Focus-visible (accessibility) */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--btn-p);
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
.btn:focus-visible, .nav-link:focus-visible, .tab-btn:focus-visible {
  outline: 2px solid var(--btn-p);
  outline-offset: 2px;
}

/* Spinner (shared, used in modal overlays for async actions) */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal box (canonical — use everywhere, do not redefine in page <style>) */
.modal-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--t1); margin-bottom: 10px; }
.modal-text { font-size: 14px; color: var(--t2); line-height: 1.6; margin-bottom: 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    height: 100vh;
    z-index: 300;
    transition: left .2s ease;
  }
  .sidebar.open { left: 0; }
  .layout { flex-direction: column; }
  .main { width: 100%; min-height: 100vh; }
  .content { padding: 14px; }
  /* extra left padding clears the fixed hamburger (lives in base.html, not the topbar). */
  .topbar { padding: 0 14px 0 60px; }
  .topbar-mobile-toggle {
    display: flex;
    position: fixed; top: 8px; left: 12px; z-index: 298; /* below backdrop(299)+sidebar(300) when open */
    width: 44px; height: 44px; /* WCAG 2.5.5 touch target */
    align-items: center; justify-content: center;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; color: var(--t1);
  }
  .topbar-mobile-toggle svg { width: 20px; height: 20px; }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 299;
  }
  .sidebar-backdrop.open { display: block; }
  /* T-515: WCAG 2.5.5 — ≥44px touch targets for the now-reachable mobile nav. */
  .nav-link { min-height: 44px; }
  .scheme-switcher .theme-toggle { width: 40px; height: 40px; }
  /* .scheme-dot keeps its 16px visual; the ::after gives it a 44px touch target */
}
@media (min-width: 769px) {
  .topbar-mobile-toggle { display: none; }
  .sidebar-backdrop { display: none !important; }
}
/* T-690: standalone pages (no base.html, no hamburger to clear) reuse .topbar but must
   not inherit the 60px left-pad meant for the fixed hamburger button above. */
@media (max-width: 768px) {
  .reception-shell .topbar { padding-left: 14px; }
}

/* T-690 follow-up: admin pages stack .topbar above .content via .main's own
   `flex-direction: column` (.layout > .sidebar + .main > .topbar + .content). This standalone
   shell has no .layout/.main wrapper (no sidebar to size against), so .topbar and .content
   land directly under `body` — which is flex row by default (see body{} above) — putting them
   SIDE BY SIDE instead of stacked, squeezing .content into a sliver on whatever's left of the
   topbar's own content-width. Missed originally because none of the T-690 regression specs
   assert actual rendered width/position, only CSS property values (flex-basis, overflow) that
   stay correct even when the parent box is wrongly narrow. */
body.reception-shell { flex-direction: column; }

/* Desktop collapsible + pinned sidebar. State persists (localStorage) and is restored
   pre-paint by the <head> IIFE → no flash. Collapsing frees the full width for content
   (wide tables, report panels). ≤768px keeps the off-canvas hamburger drawer instead. */
.sidebar-collapse-toggle { display: none; }
@media (min-width: 769px) {
  .sidebar { transition: width .2s ease, min-width .2s ease, background .2s; }
  .sidebar-collapse-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 13px; left: 192px; z-index: 310;
    width: 28px; height: 28px; padding: 0;
    background: var(--card); color: var(--t2);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); cursor: pointer;
    transition: left .2s ease, background .12s, color .12s, border-color .12s;
  }
  .sidebar-collapse-toggle:hover { color: var(--t1); border-color: var(--t3); }
  .sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--btn-p); outline-offset: 2px; }
  .sidebar-collapse-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }

  html.sidebar-collapsed .sidebar { width: 0; min-width: 0; border-right: none; }
  html.sidebar-collapsed .sidebar-collapse-toggle { left: 10px; }
  html.sidebar-collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }
  /* When collapsed, the toggle floats over the content's top-left — pad the page header
     (.topbar, shared by every migrated page) so the title clears it (mirrors the mobile
     hamburger's .topbar left-padding). */
  html.sidebar-collapsed .topbar { padding-left: 52px; }
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
/* Retired duplicate `.modal` box — all modals now use `.modal-box` (single canonical box). */
.modal-actions { display: flex; gap: 8px; }

/* Utility */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-muted { color: var(--t3); }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }

/* === Club Switcher === */
.cs-select-wrap { padding: 6px 12px 8px; position: relative; }
.cs-select-wrap::after {
  content: '';
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,.45);
  pointer-events: none;
}
[data-scheme="3"] .cs-select-wrap::after { border-top-color: var(--t3); }
.cs-select {
  width: 100%; padding: 8px 28px 8px 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px; color: var(--sb-user-email);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
}
.cs-select:hover { background: rgba(255,255,255,.11); }
.cs-select:focus { border-color: rgba(255,255,255,.3); }
[data-scheme="3"] .cs-select { background: var(--bg); border-color: var(--border); color: var(--t2); }
[data-scheme="3"] .cs-select:hover { background: var(--card); }
.cs-select option { background: #1e1e2e; color: #fff; font-weight: 600; }

/* ============================================================
   Dashboard (T-513) — token-driven. Demo components from
   design-system/reference-index.html + dashboard-only classes
   (sortable headers, phone copy, info tooltip, summary table).
   NOTE: .tabs/.tab-btn/.tab-pane already defined above — not re-added.
   ============================================================ */

/* Section heading above a tab group */
.dash-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--t3); margin: 20px 0 8px;
}

/* Pane container under a .tabs row */
.tab-panes {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 20px; overflow: hidden;
}
.tab-filter {
  display: flex; gap: 8px; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--bg);
}
.tab-filter label { font-size: 12px; color: var(--t3); font-weight: 600; }
.tab-count { font-size: 12px; color: var(--t2); padding: 10px 14px; border-bottom: 1px solid var(--border); }
.tab-stub { padding: 32px 14px; text-align: center; color: var(--t3); font-size: 13px; }

/* /reports Summary — two wide columns filling the panel (was one 480px table with a dead
   right half). Groups split in half server-side; a divider keeps it reading as one panel. */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.summary-grid .summary-table { width: 100%; }
.summary-grid .summary-table:first-child { border-right: 1px solid var(--border); }
@media (max-width: 768px) {
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid .summary-table:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* Dashboard data table (demo .tab-table) */
.tab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--t3); padding: 8px 12px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap; background: var(--th-bg);
}
.tab-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--t1); }
.tab-table tr:last-child td { border-bottom: none; }
.tab-table tr:hover td { background: var(--bg); }
.tab-table .td-num { color: var(--t3); font-size: 11px; }
.tab-table .td-name { font-weight: 500; color: var(--accent-text); }
.tab-table .td-days-hi { color: var(--err); font-weight: 600; }
.tab-table .td-days-mid { color: var(--warn); font-weight: 600; }

/* Summary metrics grid */
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.metrics-grid .m-row { background: var(--card); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.metrics-grid .m-label { font-size: 12px; color: var(--t2); }
.metrics-grid .m-val { font-size: 15px; font-weight: 700; color: var(--t1); }

/* --- Dashboard-only (no demo equivalent) --- */
/* /stats report fix: wide reports (e.g. /stats campaign table) overflow .table-wrap horizontally by
   design — overflow-x:auto DOES let you scroll to the hidden columns, but on macOS (and
   any OS set to "show scrollbars only while scrolling") the default overlay scrollbar is
   invisible at rest, so the cut-off columns look permanently lost with zero visual cue
   that more content exists. Force a persistent, visible scrollbar instead of relying on
   the OS/browser's overlay default. */
.table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--t3) var(--card);
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--card); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--t3); border-radius: 5px; }
.detail-count { font-size: 12px; color: var(--t2); padding: 10px 14px; }

/* Sortable headers (client-side sortTable) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--t1); }
th.sortable::after { content: ' ⇅'; color: var(--t3); font-size: .8em; }
th.sort-asc::after { content: ' ↑'; color: var(--t1); }
th.sort-desc::after { content: ' ↓'; color: var(--t1); }

/* Content links — bare <a> (no class) used inline / in tables, e.g. campaign names. Without a
   token they fall back to the browser's dark navy, which is unreadable on dark themes. Use the
   theme+scheme-aware --accent-text (contrast-verified ≥4.5 on bg AND card in all 6 combos).
   Classed anchors (.btn, .nav-link, …) keep their own colour. */
.content a:not([class]) { color: var(--accent-text); }
.content a:not([class]):hover { text-decoration: underline; }

/* Phone cell + copy button + toast */
.phone-cell { white-space: nowrap; position: relative; min-width: 150px; }
.phone-cell a { text-decoration: none; color: inherit; }
.phone-cell a:hover { text-decoration: underline; }
.copy-btn { cursor: pointer; float: right; font-size: .65em; opacity: .4; margin-left: 6px; }
.copy-btn:hover { opacity: .9; }
.copy-toast {
  position: fixed; top: 16px; right: 16px; background: var(--t1); color: var(--card);
  padding: 8px 16px; border-radius: 6px; font-size: 13px; opacity: 0;
  transition: opacity .3s; pointer-events: none; z-index: 9999;
}
.copy-toast.show { opacity: 1; }

/* Info tooltip (ⓘ logic explainer) */
.info-icon { cursor: pointer; font-size: 1.05em; margin-left: 6px; color: var(--t3); }
.info-icon:hover { color: var(--t2); }
.info-tooltip {
  display: block; font-size: 12px; color: var(--t2); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; margin: 6px 14px; line-height: 1.4;
}
.info-tooltip.hidden { display: none; }

/* Summary table group header + count cells (legacy summary tab) */
.group-header td { background: var(--bg); font-weight: 700; color: var(--t1); border-top: 1px solid var(--border); }
.count { text-align: right; font-weight: 700; min-width: 60px; }
.zero { color: var(--t3); }

/* Whole-page error fallback (maps old .error) */
.error { color: var(--err); font-style: italic; padding: 12px 0; }

/* ======================================================
   T-558 — «Обзор» widget dashboard
   ====================================================== */

.topbar-sub {
  font-size: 12px; font-weight: 500; color: var(--t3); margin-left: 8px;
}

.ov-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--t3); margin: 4px 0 12px;
}

/* Two-column responsive row for visits-by-type + segments */
.ov-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* Per-panel message states (empty / error) */
.panel-msg {
  font-size: 13px; color: var(--t2); padding: 16px 20px;
}
.panel-msg-err { color: var(--err); }

/* Visits-by-type horizontal bars */
.ov-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ov-bar-row:last-child { margin-bottom: 0; }
.ov-bar-label {
  font-size: 13px; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-bar-track {
  background: var(--bg); border-radius: 6px; height: 18px; overflow: hidden;
}
.ov-bar-fill {
  background: var(--tab-a); height: 100%; border-radius: 6px; min-width: 2px;
}
.ov-bar-count {
  font-size: 13px; font-weight: 700; color: var(--t1); text-align: right;
}

/* Attention composite */
.ov-attention {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.ov-attention-total { text-align: center; }
.ov-attention-breakdown {
  display: flex; flex-direction: column; gap: 8px;
}
.ov-chip {
  font-size: 13px; color: var(--t2); display: flex; align-items: center; gap: 8px;
}

/* ── T-545: Финансы report tables (weekly/monthly) ───────────────────────────
   Dense matrix with a sticky first column + collapsible accordion rows. Fully
   token-driven so dark theme + the 3 schemes apply (no hardcoded colours). */
.fin-note { color: var(--t3); font-size: 12px; margin-bottom: 10px; max-width: 880px; }
.fin-reset-link { margin-left: 8px; font-size: 11px; color: var(--t3); }
.fin-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.fin-toolbar label { font-size: 0.85em; color: var(--t2); }
.fin-toolbar select, .fin-toolbar input { margin-left: 4px; }
.fin-spacer { margin-left: auto; display: flex; gap: 8px; }

.fin-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
.fin-table { border-collapse: collapse; font-size: 13px; width: 100%; color: var(--t1); }
.fin-table th { padding: 6px 10px; border-bottom: 2px solid var(--border); white-space: nowrap;
  font-weight: normal; color: var(--t2); text-align: right; min-width: 70px; }
.fin-table td { padding: 5px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border); }
.fin-colsub { font-size: 10px; color: var(--t3); }

/* sticky first column — opaque token bg so scrolled cells never bleed through */
.fin-table th.fin-sticky { position: sticky; left: 0; z-index: 3; background: var(--card);
  text-align: left; border-right: 1px solid var(--border); min-width: 230px; }
.fin-table td.fin-sticky { position: sticky; left: 0; z-index: 1; background: var(--card);
  text-align: left; border-right: 1px solid var(--border); }

.fin-sec-row td { background: var(--bg); border-bottom: 1px solid var(--border); }
.fin-sec-row td.fin-sticky { z-index: 2; font-weight: 700; color: var(--t1); }
.fin-acc-hdr { cursor: pointer; }
.fin-acc-hdr td.fin-sticky { white-space: nowrap; user-select: none; }
.fin-arr { font-size: 0.8em; margin-right: 4px; color: var(--t3); }
.fin-lbl { cursor: help; border-bottom: 1px dotted var(--t3); }
.fin-sub td.fin-sticky { padding-left: 28px; color: var(--t2); }

.fin-pos { color: var(--ok); font-weight: 600; }
.fin-accent { color: var(--accent-text); }
.fin-muted { color: var(--t3); }
.fin-err { color: var(--err); }

/* T-545 Step B: weekly report — expense-entry forms + WA-entries table (token-driven). */
.fin-details { margin-bottom: 12px; }
.fin-expense-toggle { cursor: pointer; font-size: 13px; color: var(--accent-text); }
.fin-expense-box { margin-top: 10px; border: 1px solid var(--border); border-radius: 4px;
  padding: 10px; background: var(--bg); }
.fin-sub-title { font-size: 0.82em; font-weight: 600; color: var(--t2); margin: 0 0 6px; }
.fin-hint { font-size: 0.78em; color: var(--t3); }
.fin-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0 10px; }
.fin-range-err { color: var(--err); font-size: 0.8em; }
.fin-del-btn { background: none; border: none; color: var(--err); cursor: pointer;
  font-size: 1em; padding: 0 4px; }
.fin-num { width: 110px; }
.fin-wa-table { width: 100%; border-collapse: collapse; font-size: 0.82em; color: var(--t1); }
.fin-wa-table th { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border);
  color: var(--t2); font-weight: normal; }
.fin-wa-table td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.fin-wa-table .fin-num-cell { text-align: right; }
.fin-inline-form { display: inline; }

/* T-597: PnL/cashbox/heatmap finance views */
.fin-total-row td { border-top: 2px solid var(--t1); font-weight: 700; }
.fin-chart-block { margin-top: 16px; }
.fin-chart-frame { position: relative; height: 220px; border: 1px solid var(--border);
  border-radius: 6px; padding: 6px; background: var(--card); }
.fin-warn { color: var(--warn); }
.cb-bucket td { font-weight: 600; }
.cb-sig td { font-weight: normal; }
.cb-sig-cell { padding-left: 28px; }

/* T-597: heatmap (hour × day-of-week) — cell heat colour is set inline by JS (data-viz, allowed) */
.hm-controls { margin-top: 8px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.hm-subtabs, .hm-period { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hm-sep { color: var(--t3); }
table.hm { border-collapse: collapse; font-size: 12px; color: var(--t1); }
table.hm th { padding: 4px 8px; background: var(--bg); border: 1px solid var(--border);
  text-align: center; white-space: nowrap; font-weight: normal; color: var(--t2); }
table.hm th.hm-hour { text-align: right; min-width: 52px; }
table.hm td { width: 58px; height: 26px; border: 1px solid var(--border); text-align: center;
  position: relative; cursor: default; }
table.hm td:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%);
  background: var(--t1); color: var(--card); padding: 3px 7px; border-radius: 4px;
  white-space: nowrap; font-size: 11px; z-index: 10; pointer-events: none;
}
.hm-caption { color: var(--t3); font-size: 11px; margin-top: 6px; }

/* ======================================================
   T-538: Birthday mailing page (migrated to base.html shell)
   ====================================================== */
/* WhatsApp-brand colors for the message preview — theme-independent on purpose: the
   bubble mimics the WhatsApp client UI, which does not follow our scheme/theme. Confined
   to these named vars so theme tokens above stay the single source for app chrome. */
:root {
  --wa-panel: #e5ddd5;
  --wa-bubble: #dcf8c6;
  --wa-bubble-t: #111b21;
  --wa-sender: #075e54;
  --wa-mark: #fff176;
}

.bday-intro { color: var(--t2); font-size: 14px; margin-bottom: 16px; }

.bday-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: 640px; padding: 12px 16px; margin-bottom: 16px;
  border-radius: 8px; border: 1px solid var(--border);
}
.bday-banner-on { background: var(--ok-bg); border-color: var(--ok); }
.bday-banner-off { background: var(--err-bg); border-color: var(--err); }
.bday-banner-text { display: flex; align-items: center; gap: 8px; color: var(--t1); font-size: 14px; }
.bday-banner-state { font-size: 16px; font-weight: 700; }
.bday-banner-on .bday-banner-state { color: var(--ok); }
.bday-banner-off .bday-banner-state { color: var(--err); }
.bday-inline-form { margin: 0; display: inline; }

/* Confirm dialog (replaces JS alert) */
.bday-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.bday-confirm-overlay.visible { display: flex; }
.bday-confirm-box {
  background: var(--card); border: 1px solid var(--err); border-radius: 8px;
  padding: 22px 26px; max-width: 380px; width: 90%; box-shadow: var(--shadow);
}
.bday-confirm-title { margin: 0 0 8px; font-size: 15px; color: var(--err); }
.bday-confirm-msg { margin: 0 0 18px; font-size: 13px; color: var(--t2); line-height: 1.5; }
.bday-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* WhatsApp preview */
.bday-wa-wrap {
  background: var(--wa-panel); border-radius: 8px; padding: 12px;
  max-width: 320px; margin-bottom: 16px;
}
.bday-wa-sender { font-size: 12px; font-weight: 700; color: var(--wa-sender); margin-bottom: 4px; }
.bday-wa-bubble {
  background: var(--wa-bubble); color: var(--wa-bubble-t);
  border-radius: 0 8px 8px 8px; padding: 8px 12px; font-size: 13px;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.bday-wa-bubble mark { background: var(--wa-mark); color: var(--wa-bubble-t); border-radius: 2px; padding: 0 2px; }

/* Settings form */
.bday-form { max-width: 640px; }
.bday-field { margin: 4px 0; }
.bday-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--t2); }
.bday-tpl-input { width: 100%; max-width: 280px; box-sizing: border-box; }
.bday-hint { font-size: 12px; color: var(--t3); margin-top: 4px; }
.bday-tpl-err { color: var(--err); font-size: 12px; margin-top: 4px; }
.bday-seg-caption { font-size: 13px; margin: 12px 0 8px; color: var(--t2); }
.bday-seg-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
.bday-seg-label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--t1); cursor: pointer; }
.bday-seg-count { color: var(--t3); }
.bday-run-note { margin: 8px 0 14px; }

/* ======================================================
   T-536: Переписки — incoming chat (two-pane)
   ====================================================== */
/* Chat-bubble colors are semantic (incoming / campaign / reply), not accent-driven, so they
   track theme only (light/dark), not the scheme. Defined once + a dark override. */
:root {
  --msg-in: #eceff1; --msg-camp: #e3f2fd; --msg-reply: #e8f5e9; --msg-bubble-t: #1f2937;
  --msg-active: #e6f0ff;
}
[data-theme="dark"] {
  --msg-in: #334155; --msg-camp: #1e3a5f; --msg-reply: #14532d; --msg-bubble-t: #e5e7eb;
  --msg-active: #1e293b;
}

/* Sub-tabs (Исходящие / Входящие / Заблокированные) */
.msg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.msg-tab {
  padding: 6px 13px; font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--t2); background: var(--card); border: 1px solid var(--border); border-radius: 6px;
}
.msg-tab:hover { color: var(--t1); border-color: var(--t3); }
.msg-tab.active { background: var(--btn-p); color: var(--btn-p-t); border-color: var(--btn-p); }

.msg-empty { color: var(--t3); }

/* Flashes */
.msg-flash { padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 13px; }
.msg-flash-dup { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.msg-flash-optout { background: var(--err-bg); color: var(--err); border: 1px solid var(--err); }

/* Two-pane layout */
.msg-chat { display: flex; gap: 12px; height: 70vh; min-height: 420px; }
.msg-pane-list {
  flex: 0 0 280px; overflow-y: auto; overflow-x: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.msg-pane-thread {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}

/* Dialog rows — each field on its own line → uniform 4-row height */
.msg-dialog {
  display: block; padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--t1);
}
.msg-dialog:hover { background: var(--bg); }
.msg-dialog.active { background: var(--msg-active); }
.msg-dialog .name { font-weight: 700; }
.msg-dialog .phone, .msg-dialog .time, .msg-dialog .wtimer {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-dialog .phone { color: var(--t2); font-size: 0.85em; }
.msg-dialog .unknown { color: var(--warn); font-size: 0.8em; }
.msg-dialog .time { color: var(--t3); font-size: 0.75em; }
.msg-dialog .wtimer { margin-top: 2px; font-size: 0.75em; }
.wtimer.open { color: var(--ok); }
.wtimer.soon { color: var(--warn); font-weight: 700; }
.wtimer.closed { color: var(--t3); }

/* Thread pane */
.msg-thread-head { padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--t1); }
.msg-thread-head .phone { color: var(--t2); font-weight: 400; font-size: 0.85em; }
.msg-thread-head .unknown { color: var(--warn); font-weight: 400; font-size: 0.8em; }
.msg-thread-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }

.msg-bubble {
  max-width: 70%; padding: 8px 12px; border-radius: 10px; white-space: pre-wrap;
  word-break: break-word; font-size: 0.9em; color: var(--msg-bubble-t);
}
.msg-bubble .meta { display: block; font-size: 0.72em; color: var(--t3); margin-top: 4px; }
.msg-b-in { align-self: flex-start; background: var(--msg-in); }
.msg-b-campaign { align-self: flex-end; background: var(--msg-camp); }
.msg-b-reply { align-self: flex-end; background: var(--msg-reply); }
.msg-tag { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.03em; color: var(--t3); }

.msg-reply-box { border-top: 1px solid var(--border); padding: 10px 14px; }
.msg-reply-box textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; }
.msg-reply-box button { margin-top: 6px; }
.msg-closed { color: var(--err); padding: 12px 14px; border-top: 1px solid var(--border); }
.msg-placeholder { margin: auto; color: var(--t3); }

/* Outgoing message log (/messages) */
.msg-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.msg-reset { color: var(--accent-text); text-decoration: none; font-size: 13px; }
.msg-reset:hover { text-decoration: underline; }
.msg-empty { color: var(--t3); font-style: italic; padding: 20px 0; }

.msg-table-scroll { overflow-x: auto; }
.msg-log-table { border-collapse: collapse; width: 100%; font-size: 0.85em; color: var(--t1); }
.msg-log-table th, .msg-log-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.msg-log-table th { background: var(--bg); color: var(--t2); font-weight: 600; }
.msg-log-table tbody tr:nth-child(even) { background: var(--bg); }
.msg-log-table a { color: var(--accent-text); }
.msg-cell { font-size: 0.8em; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2); cursor: pointer; }
.error-cell { color: var(--err); font-size: 0.8em; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recon-badge { color: var(--warn); font-size: 0.85em; font-style: italic; }
.cta-url { color: var(--accent-text); font-size: 0.78em; white-space: normal; word-break: break-all; margin-top: 2px; }
.msg-manual-fix { font-size: 0.8em; color: var(--t3); }
.msg-inline-form { display: inline; margin-right: 4px; }

/* Status colors — scoped to the log table so they can't leak elsewhere. */
.msg-log-table .status-sent { color: var(--ok); }
.msg-log-table .status-failed { color: var(--warn); }
.msg-log-table .status-dead { color: var(--err); font-weight: 700; }
.msg-log-table .status-queued { color: var(--t3); }
.msg-log-table .status-sending { color: var(--accent-text); }
.msg-log-table .status-delivered { color: var(--ok); }
.msg-log-table .status-read { color: var(--ok); font-style: italic; }
.msg-log-table .status-unsubscribed { color: var(--accent-text); }

.msg-pagination { margin-top: 12px; font-size: 13px; color: var(--t2); }
.msg-pagination a { margin-right: 6px; text-decoration: none; color: var(--accent-text); }
.msg-pagination a.active { font-weight: 700; text-decoration: underline; }

/* T-555 (ported from chat_reception.html's own page-local style during T-690): mobile —
   show list OR thread, not both squished. Gated on the .reception-chat modifier (added
   only by chat_reception.html) so this is a true no-op on messages_incoming.html, which
   reuses the same .msg-chat/.msg-pane-* base classes but never emits .has-selected. */
.back-mobile { display: none; }
@media (max-width: 640px) {
  .reception-chat.msg-chat { flex-direction: column; min-height: 100dvh; height: auto; gap: 0; }
  .reception-chat .msg-pane-list, .reception-chat .msg-pane-thread { flex: 1 1 auto; }
  .reception-chat.msg-chat:not(.has-selected) .msg-pane-thread { display: none; }
  .reception-chat.msg-chat.has-selected .msg-pane-list { display: none; }
  .reception-chat .msg-pane-thread { min-height: 0; }
  .reception-chat .msg-thread-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .back-mobile { display: inline-block; margin-right: 8px; text-decoration: none; color: var(--accent-text); }
  .reception-chat .msg-bubble { max-width: 88%; }

  /* T-708: `.msg-chat` here is `height: auto` (grows with content, see above) so
     `.msg-thread-body`'s own `overflow-y: auto` never actually triggers — `.content` (the
     page's real scroll container on this layout) is what scrolls. Pin the thread head (holds
     the back-to-contacts link) to the top of THAT scroll, with a solid background so message
     bubbles don't visually pass through it as the operator reads down a long thread. */
  .reception-chat .msg-thread-head {
    position: sticky; top: 0; z-index: 2; background: var(--card);
  }
}

.msg-clear-wrap { margin-top: 20px; }
.msg-gdpr-note { margin-top: 30px; color: var(--t3); font-size: 0.75em; }

/* Full-text message modal */
.msg-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .45);
}
.msg-modal.open { display: flex; }
.msg-modal-box {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px 28px; max-width: min(640px, 90vw);
  max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow);
}
.msg-modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 1.4em; cursor: pointer; color: var(--t3); line-height: 1;
}
.msg-modal-title { font-size: 0.95em; color: var(--t2); }
.msg-modal-body { white-space: pre-wrap; font-size: 1rem; line-height: 1.6; margin-top: 8px; color: var(--t1); }

/* Blocked-clients list (/messages/blocked) */
.msg-note { color: var(--t2); font-size: 0.85em; margin-bottom: 14px; }
.msg-unblock { background: transparent; border: 1px solid var(--err); color: var(--err); }
.msg-unblock:hover { background: var(--err-bg); }

/* ======================================================
   T-536: AI chat (/chat) — full-height inside .main
   ====================================================== */
.chat-badge {
  font-size: 11px; background: var(--btn-p); color: var(--btn-p-t);
  padding: 2px 8px; border-radius: 4px; letter-spacing: 0.03em;
}
.clear-btn {
  padding: 4px 12px; background: none; border: 1px solid var(--border);
  border-radius: 6px; color: var(--t3); cursor: pointer; font: inherit; font-size: 12px;
  transition: border-color .15s, color .15s;
}
.clear-btn:hover { border-color: var(--err); color: var(--err); }

.chat-shell {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  width: 100%; max-width: 900px; margin: 0 auto; padding: 16px 20px;
}

.error-banner {
  background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn);
  padding: 8px 14px; border-radius: 6px; margin-bottom: 10px; font-size: 13px; flex-shrink: 0;
}
.error-banner a { color: var(--warn); font-weight: 700; }

.chat-messages {
  flex: 1; overflow-y: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px 8px 0 0; padding: 16px; display: flex; flex-direction: column;
  gap: 12px; min-height: 0;
}

.empty-state { margin: auto; text-align: center; color: var(--t3); font-size: 13px; line-height: 1.8; padding: 20px; }
.empty-state .hint-title { font-size: 1em; color: var(--t2); margin-bottom: 12px; }
.empty-hints { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.hint-chip {
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 5px 14px; font-size: 13px; color: var(--t2); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hint-chip:hover { background: var(--card); border-color: var(--t3); color: var(--t1); }

.message { max-width: 78%; font-size: 13.5px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.message.user {
  align-self: flex-end; background: var(--btn-p); color: var(--btn-p-t);
  padding: 9px 14px; border-radius: 14px 14px 3px 14px;
}
.message.assistant {
  align-self: flex-start; background: var(--bg); color: var(--t1);
  padding: 9px 14px; border-radius: 14px 14px 14px 3px; border: 1px solid var(--border);
  white-space: normal;
}
.message.assistant p { margin: 0 0 6px; }
.message.assistant p:last-child { margin-bottom: 0; }
.message.assistant table { border-collapse: collapse; margin: 8px 0; font-size: 0.95em; min-width: 200px; }
.message.assistant th, .message.assistant td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.message.assistant th { background: var(--card); font-weight: 700; }
.message.assistant tr:nth-child(even) td { background: var(--card); }
.message.assistant hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.chat-code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
.message-meta { font-size: 0.7em; color: var(--t3); margin-top: 4px; text-align: right; }
.message.assistant .message-meta { text-align: left; }

.loading-indicator {
  display: none; align-self: flex-start; color: var(--t3); font-size: 13px;
  padding: 9px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px 14px 14px 3px;
}
.loading-indicator.visible { display: block; }
.loading-indicator .dot { display: inline-block; animation: chat-blink 1.2s infinite; }
.loading-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.loading-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-blink { 0%,80%,100% { opacity: 0.2; } 40% { opacity: 1; } }

.chat-error {
  align-self: flex-start; color: var(--err); font-size: 13px; padding: 8px 12px;
  background: var(--err-bg); border: 1px solid var(--err); border-radius: 6px;
}

.input-bar {
  background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px; padding: 10px 12px; display: flex; align-items: flex-end;
  gap: 8px; flex-shrink: 0;
}
.input-bar-disabled {
  background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px; padding: 12px; color: var(--t3); font-size: 13px; flex-shrink: 0;
}
.chat-input {
  flex: 1; font: inherit; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--inp-b);
  border-radius: 6px; resize: none; min-height: 38px; max-height: 120px; overflow-y: auto;
  line-height: 1.4; background: var(--inp); color: var(--t1); transition: border-color .15s;
}
.chat-input:focus { outline: none; border-color: var(--btn-p); }
.chat-input:disabled { opacity: 0.5; }
.send-btn {
  padding: 8px 18px; background: var(--btn-p); color: var(--btn-p-t); border: none;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 13.5px; white-space: nowrap;
  flex-shrink: 0; height: 38px; line-height: 1; transition: background .15s;
}
.send-btn:hover:not(:disabled) { background: var(--btn-p-h); }
.send-btn:disabled { background: var(--border); color: var(--t3); cursor: not-allowed; }
.input-hint { font-size: 0.7em; color: var(--t3); padding: 0 2px 2px; flex-shrink: 0; align-self: flex-end; }

/* Clear-history modal — namespaced .chat-modal-* so it does NOT clobber the shared .modal-*
   component (lines ~766/850) used by users.html etc. JS toggles by id #clear-modal + .visible. */
.chat-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .35);
}
.chat-modal-overlay.visible { display: flex; }
.chat-modal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 24px 28px; max-width: 340px; width: 90%; box-shadow: var(--shadow);
}
.chat-modal-title { font-size: 0.95em; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.chat-modal-text { font-size: 0.82em; color: var(--t2); margin-bottom: 20px; line-height: 1.5; }
.chat-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.chat-modal-cancel {
  padding: 7px 16px; background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--t2); cursor: pointer; font: inherit; font-size: 0.82em;
}
.chat-modal-cancel:hover { border-color: var(--t3); color: var(--t1); }
.chat-modal-confirm {
  padding: 7px 16px; background: var(--btn-p); border: 1px solid var(--btn-p); border-radius: 6px;
  color: var(--btn-p-t); cursor: pointer; font: inherit; font-size: 0.82em;
}
.chat-modal-confirm:hover { background: var(--btn-p-h); border-color: var(--btn-p-h); }

/* === T-535: Цепочки + Шаблоны (chains / templates) — token-driven, namespaced .chain-*/.tpl-*.
   Reuses shared .topbar/.content/.tab-table/.btn*/.badge*/.flash-*/.modal-overlay/.modal-box/
   .spinner/.form-select. Only page-specific bits live here. === */

/* — chains list + create form — */
.chain-errors { background: var(--err-bg); border: 1px solid var(--err); border-radius: 7px;
  padding: 8px 14px; margin-bottom: 14px; list-style: none; }
.chain-errors li { color: var(--err); font-size: 13px; }
.chain-zero { color: var(--t3); }
.chain-empty { color: var(--t3); font-size: 13px; margin: 12px 0; }
.chain-warn { color: var(--warn); font-size: 13px; }
.chain-hint { color: var(--t3); font-size: 12px; }
.chain-section-title { font-size: 15px; font-weight: 700; color: var(--t1); margin: 24px 0 10px; }
.chain-form-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; max-width: 720px; }
.chain-form-row { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chain-form-row > label:first-child { min-width: 150px; font-size: 13px; color: var(--t2); }
.chain-input-name { width: 300px; max-width: 100%; }
.chain-input-date { width: 170px; }
.chain-step-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13px;
  flex-wrap: wrap; }
.step-date-hint { color: var(--t3); font-size: 12px; margin-left: 6px; }
.chain-step-delay { width: 64px; }
.chain-form-inline { display: inline; }

/* — chain_detail — */
.chain-meta { font-size: 13px; color: var(--t2); margin-bottom: 12px; }
.chain-edit-bar { display: inline-flex; gap: 16px; align-items: center; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px;
  font-size: 13px; flex-wrap: wrap; }
.chain-edit-name { width: 280px; max-width: 100%; }
.chain-details { margin-bottom: 16px; }
.chain-details > summary { cursor: pointer; list-style: none; margin: 16px 0 8px; }
.chain-details > summary::-webkit-details-marker { display: none; }
.chain-details > summary::marker { content: ""; }
.chain-details-title { display: inline; font-size: 15px; font-weight: 700; color: var(--t1); }
.chain-arrow { display: inline-block; transition: transform .15s; }
.chain-details[open] > summary .chain-arrow { transform: rotate(90deg); }
.chain-steps-fieldset { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 12px;
  margin-top: 6px; }
.chain-steps-fieldset legend { font-size: 13px; color: var(--t3); }
.chain-funnel-row { margin-bottom: 6px; font-size: 13px; color: var(--t1); }
.chain-funnel-label { display: inline-block; width: 260px; }
.chain-funnel-bar { background: var(--blue); height: 22px; border-radius: 3px; display: inline-block;
  vertical-align: middle; min-width: 2px; }
.chain-metric { font-size: 13px; margin-bottom: 4px; color: var(--t1); }
.chain-note { color: var(--t3); font-size: 12px; margin: 0 0 8px; }
.chain-row-exited td { background: var(--bg); }
.chain-overdue { color: var(--err); }
.chain-back { display: inline-block; margin-top: 16px; }
.chain-input-num { width: 64px; }
.chain-field-block { margin-top: 12px; }
.chain-step-strong { font-size: 13px; font-weight: 700; color: var(--t1); }
.chain-remove-hidden { display: none; }
.chain-add-step { margin-top: 6px; }
.chain-submit-row { margin-top: 12px; }
.chain-nowrap { white-space: nowrap; }
.chain-click-table { max-width: 600px; }
.chain-click-rows { max-width: 500px; }
.chain-tpl-code { color: var(--t2); }
.chain-num { text-align: right; }
.chain-strong { font-weight: 700; }
.chain-center { text-align: center; }
.chain-subtitle { font-size: 14px; font-weight: 700; margin-top: 8px; color: var(--t1); }

/* — templates list + new/edit forms — */
.tpl-toolbar { margin-bottom: 12px; }
.tpl-count { font-weight: normal; color: var(--t3); }
.tpl-status-APPROVED { color: var(--ok); font-weight: 700; }
.tpl-status-PENDING { color: var(--warn); font-weight: 700; }
.tpl-status-REJECTED { color: var(--err); font-weight: 700; }
.tpl-status-UNKNOWN { color: var(--t3); font-weight: 700; }
.tpl-codes { font-size: 12px; color: var(--accent-text); }
.tpl-body-preview { font-size: 12px; color: var(--t2); max-width: 300px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tpl-actions { white-space: nowrap; }
.tpl-name { font-weight: 700; color: var(--t1); }
.tpl-form { max-width: 640px; }
.tpl-form label { display: block; margin-top: 12px; font-weight: 600; font-size: 13px; color: var(--t1); }
.tpl-form textarea { width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box; }
.tpl-hint { font-size: 12px; color: var(--t3); margin-top: 2px; }
.tpl-hint-warn { color: var(--warn); }
.tpl-warning { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--t1);
  padding: 10px 14px; font-size: 13px; margin: 12px 0; border-radius: 7px; max-width: 640px; }
.tpl-blocked { background: var(--err-bg); border: 1px solid var(--err); color: var(--t1);
  padding: 10px 14px; font-size: 13px; margin: 12px 0; border-radius: 7px; max-width: 640px; }
.tpl-blocked ul { margin: 4px 0 0; padding-left: 20px; }
.tpl-cta-fields { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); }
.tpl-cta-box { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); max-width: 640px; }
.tpl-info-row { font-size: 13px; margin-bottom: 6px; color: var(--t1); }
.tpl-info-row strong { display: inline-block; width: 120px; color: var(--t2); }
.tpl-var-hint { font-size: 12px; color: var(--t3); margin: 4px 0 12px; }
.tpl-audit-table { margin-top: 20px; max-width: 720px; }
.tpl-input { width: 100%; box-sizing: border-box; }
.tpl-input-cta { width: 100%; max-width: 580px; box-sizing: border-box; }
.tpl-example-fields { margin-top: 8px; }
.tpl-example-fields input { margin-top: 4px; }
.tpl-field-block { margin-top: 16px; }
.tpl-cta-heading { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--t1); }

/* — async busy overlay (reuses .modal-overlay backdrop + .spinner; white text on dark scrim
   like the shared .spinner, theme-independent on purpose) — */
.tpl-busy-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tpl-busy-text { color: #fff; font-size: 14px; }
.tpl-empty { color: var(--t3); font-size: 13px; font-style: italic; margin: 12px 0; }
.tpl-cta-warn { margin-bottom: 8px; color: var(--warn); }
.tpl-cta-example-wrap { margin-top: 6px; }
.tpl-audit-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-body-label { font-size: 13px; font-weight: 700; color: var(--t1); display: block; }
.tpl-form-textarea { width: 100%; max-width: 640px; min-height: 120px; box-sizing: border-box; resize: vertical; }
.tpl-cta-label { font-size: 13px; font-weight: 700; display: block; margin-top: 8px; color: var(--t1); }
.tpl-cta-example-block { margin-top: 8px; }

/* === T-533: Сегменты (segments) — token-driven, namespaced .seg-*. Reuses shared
   .topbar/.content/.tab-table/.btn*/.badge*. JS-set chat/chip colors moved to classes here so
   dark theme works. === */
.seg-errors { background: var(--err-bg); border: 1px solid var(--err); border-radius: 7px;
  padding: 8px 14px; margin-bottom: 14px; list-style: none; }
.seg-errors li { color: var(--err); font-size: 13px; }
.seg-tabs { display: flex; gap: 0; margin-bottom: 16px; }
.seg-tab { padding: 8px 16px; border: 1px solid var(--border); background: var(--bg); cursor: pointer;
  font-size: 13px; text-decoration: none; color: var(--t2); }
.seg-tab:first-child { border-radius: 6px 0 0 6px; }
.seg-tab:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg-tab.active { background: var(--card); font-weight: 700; color: var(--t1); }
.seg-tab-content { display: none; }
.seg-tab-content.active { display: block; }
.seg-row-archived { opacity: .5; }
.seg-desc-cell { max-width: 300px; font-size: 12px; }
.seg-dsl-preview { font-size: 12px; color: var(--t3); max-width: 400px; white-space: pre-wrap;
  word-break: break-all; font-family: monospace; }
.seg-actions { white-space: nowrap; }
.seg-inline { display: inline; }
.seg-form-row { margin-bottom: 8px; }
.seg-form-row label { display: inline-block; width: 140px; font-size: 13px; color: var(--t2); }
.seg-inp-name { width: 300px; max-width: 100%; }
.seg-inp-desc { width: 400px; max-width: 100%; }
.seg-inp-dsl { width: 400px; max-width: 100%; font-family: monospace; }
.seg-inp-slug { width: 200px; max-width: 100%; }
.seg-edit-actions { display: flex; gap: 8px; margin-top: 4px; }
.seg-create-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.seg-col { flex: 1; min-width: 300px; }
.seg-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; }
.seg-card-gap { margin-top: 8px; }
.seg-card-title { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.seg-hint { font-size: 12px; color: var(--t3); margin-bottom: 8px; }
.seg-chat-box { border: 1px solid var(--border); border-radius: 6px; padding: 8px; height: 200px;
  overflow-y: auto; background: var(--bg); margin-bottom: 8px; font-size: 13px; }
.seg-chat-row { display: flex; gap: 4px; align-items: flex-end; }
.seg-chat-input { flex: 1; font-size: 13px; resize: vertical; }
.seg-chat-msg { margin-bottom: 6px; padding: 4px 8px; border-radius: 4px; color: var(--t1); }
.seg-chat-user { background: var(--blue-bg); }
.seg-chat-ai { background: var(--ok-bg); }
.seg-search-wrap { position: relative; }
.seg-client-search { width: 100%; box-sizing: border-box; font-size: 13px; }
.seg-search-results { display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card); border: 1px solid var(--border); border-top: none; max-height: 200px;
  overflow-y: auto; z-index: 10; font-size: 13px; }
.seg-search-item { padding: 4px 8px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--t1); }
.seg-search-item:hover { background: var(--bg); }
.seg-selected-clients { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.seg-picker-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.seg-selected-count { font-size: 12px; color: var(--t3); }
.seg-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-bg);
  border: 1px solid var(--blue); border-radius: 3px; padding: 2px 8px; font-size: 12px; color: var(--t1); }
.seg-chip-x { cursor: pointer; color: var(--err); font-weight: bold; }
.seg-dsl-editor { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 13px;
  resize: vertical; }
.seg-preview { margin-top: 16px; display: none; }
.seg-preview-errors { color: var(--err); font-size: 13px; }
.seg-preview-table { margin-top: 8px; }
.seg-predicates { margin-top: 16px; }
.seg-predicates-summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--t1); }
.seg-predicates-table { margin-top: 8px; }

/* === T-533: Карточка клиента (client_card) — token-driven, namespaced .cc-*/.tl-*. Reuses shared
   .topbar/.content/.tab-table/.badge*. Chart.js vendored. === */
.cc-back { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 6px; text-decoration: none; color: var(--t2); font-size: 13px; background: var(--card); }
.cc-back:hover { background: var(--bg); color: var(--t1); }
.cc-profile { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; margin-bottom: 20px; max-width: 700px; }
.cc-profile-title { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--t1); }
.cc-name-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--t3); }
.cc-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 13px; }
.cc-profile-grid dt { color: var(--t3); }
.cc-profile-grid dd { margin: 0; font-weight: 700; color: var(--t1); }
.cc-segments { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-seg-badge { display: inline-block; padding: 2px 10px; background: var(--gray-bg); border-radius: 12px;
  font-size: 12px; color: var(--gray); }
.cc-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 0; }
.cc-tab-btn { padding: 7px 16px; font-size: 13px; cursor: pointer; border: 1px solid var(--border);
  border-bottom: none; border-radius: 6px 6px 0 0; background: var(--bg); color: var(--t2); font-family: inherit; }
.cc-tab-btn.active { background: var(--card); border-color: var(--border); color: var(--t1); font-weight: 700; }
.cc-tab-btn:hover:not(.active) { color: var(--t1); }
.cc-tab-body { border: 1px solid var(--border); border-radius: 0 8px 8px 8px; background: var(--card);
  padding: 16px; min-height: 120px; }
.cc-tab-panel { display: none; }
.cc-tab-panel.active { display: block; }
.cc-tab-freq { overflow-x: hidden; }
.cc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cc-page-note { font-size: 12px; color: var(--t3); margin: 0 0 10px 0; }
.cc-pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; }
.cc-pager a { padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none;
  color: var(--t1); background: var(--card); }
.cc-pager a:hover { background: var(--bg); }
.cc-pager-info { color: var(--t3); }
.cc-truncate { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-truncate-wide { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tscroll { overflow-x: auto; }
.cc-section-empty { color: var(--t3); font-style: italic; font-size: 13px; margin: 0; }
.cc-empty-center { color: var(--t3); font-style: italic; font-size: 14px; text-align: center; margin-top: 40px; }
.cc-freq-note { color: var(--t3); font-size: 12px; margin: 0 0 6px 0; }
.cc-freq-canvas { max-height: 320px; width: 100%; }

/* Timeline */
.tl-item { border-left: 3px solid var(--border); padding: 8px 0 8px 16px; margin-bottom: 2px;
  font-size: 13px; position: relative; color: var(--t1); }
.tl-item::before { content: ''; position: absolute; left: -6px; top: 14px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--t3); }
.tl-visit { border-left-color: var(--ok); }
.tl-visit::before { background: var(--ok); }
.tl-date { color: var(--t3); font-size: 12px; }
.tl-title { font-weight: 700; }
.tl-detail { color: var(--t2); margin-top: 2px; }
.tl-empty { color: var(--t3); font-style: italic; padding: 20px 0; }
.tl-chip { padding: 4px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--card);
  cursor: pointer; font-size: 12px; color: var(--t2); font-family: inherit; }
.tl-chip.active { border-color: var(--btn-p); background: var(--btn-p); color: var(--btn-p-t); }
.tl-badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600;
  margin-right: 6px; }
.tl-badge-visit { background: var(--ok-bg); color: var(--ok); }
.tl-badge-payment { background: var(--blue-bg); color: var(--blue); }
.tl-badge-membership { background: var(--gray-bg); color: var(--gray); }
.tl-badge-promo { background: var(--warn-bg); color: var(--warn); }
.tl-badge-msg-sent { background: var(--err-bg); color: var(--err); }
.tl-badge-msg-in { background: var(--blue-bg); color: var(--blue); }
.tl-badge-utility { background: var(--gray-bg); color: var(--gray); }
.tl-badge-cancelled { background: var(--err-bg); color: var(--err); }

/* === T-534: Кампании (campaigns list/detail/chain-edit) — token-driven, namespaced .camp-*.
   Reuses shared .topbar/.content/.tab-table/.btn*/.badge/.flash-*/.modal-overlay/.form-select.
   Status/mode/recipient-badge colors use token bg+fg pairs so dark theme adapts. === */
.camp-form-block { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 24px; max-width: 480px; }
.camp-label { display: block; font-size: 13px; color: var(--t2); margin-bottom: 4px; }
.camp-input { width: 100%; box-sizing: border-box; margin-bottom: 16px; }
.camp-uppercase { text-transform: uppercase; }
.camp-req { color: var(--err); }
.camp-hint { font-size: 12px; color: var(--t3); margin: -12px 0 16px; }
.camp-cancel-link { display: inline-block; margin-left: 12px; color: var(--t2); text-decoration: none; font-size: 13px; }
.camp-backline { font-size: 13px; margin-bottom: 8px; }
.camp-meta { font-size: 13px; color: var(--t2); margin-bottom: 18px; }
.camp-meta span { margin-right: 16px; }
.camp-chain-tag { background: var(--blue-bg); color: var(--blue); padding: 2px 8px; border-radius: 3px; }
.camp-cost-box { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--t1); border-radius: 7px;
  padding: 8px 14px; margin-bottom: 14px; font-size: 13px; }
.camp-cost-note { color: var(--t2); font-size: 12px; }
.camp-muted { color: var(--t3); }
.camp-h2 { margin-top: 28px; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--t1); }
.camp-note { font-size: 12px; color: var(--t3); margin-bottom: 6px; }
.camp-funnel { display: flex; gap: 0; margin-bottom: 28px; align-items: stretch; }
.camp-funnel-stage { flex: 1; background: var(--card); border: 1px solid var(--border); padding: 14px 10px;
  text-align: center; }
.camp-funnel-stage + .camp-funnel-stage { border-left: none; }
.camp-funnel-stage:first-child { border-radius: 8px 0 0 8px; }
.camp-funnel-stage:last-child { border-radius: 0 8px 8px 0; }
.camp-funnel-label { font-size: 12px; color: var(--t3); margin-bottom: 4px; }
.camp-funnel-value { font-size: 24px; font-weight: bold; color: var(--t1); }
.camp-funnel-pct { font-size: 12px; color: var(--t2); margin-top: 2px; }
.camp-funnel-stage.highlight { background: var(--blue-bg); }
.camp-chart-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; margin-bottom: 24px; }
.camp-ftabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.camp-ftabs a { padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none;
  font-size: 13px; color: var(--t2); background: var(--card); }
.camp-ftabs a.active { border-color: var(--btn-p); font-weight: 700; color: var(--t1); background: var(--bg); }
.camp-yes { color: var(--ok); font-weight: 600; }
.camp-no { color: var(--t3); }
.camp-pager { margin: 10px 0; display: flex; gap: 6px; align-items: center; font-size: 13px; }
.camp-pager a { padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none;
  color: var(--t1); background: var(--card); }
.camp-pager-info { color: var(--t3); }
.camp-cap-warn { color: var(--err); }
.camp-empty { color: var(--t3); font-style: italic; padding: 12px 0; }
.camp-stale-table td:first-child { width: 1%; white-space: nowrap; }
.camp-badge-sent { background: var(--ok-bg); color: var(--ok); }
.camp-badge-dead { background: var(--err-bg); color: var(--err); }
.camp-badge-pending { background: var(--warn-bg); color: var(--warn); }
.camp-badge-delivered { background: var(--blue-bg); color: var(--blue); }
.camp-badge-read { background: var(--ok-bg); color: var(--ok); }
.camp-badge-rejected { background: var(--err-bg); color: var(--err); }
.camp-badge-processing { background: var(--gray-bg); color: var(--gray); }
.camp-viewtabs { margin-bottom: 14px; display: flex; gap: 6px; }
.camp-viewtab { text-decoration: none; padding: 6px 14px; border: 1px solid var(--border); color: var(--t2);
  background: var(--card); border-radius: 6px; }
.camp-viewtab.active { border-color: var(--btn-p); color: var(--t1); font-weight: 700; }
.camp-new { margin-bottom: 12px; }
.camp-hint-block { margin: 8px 0 12px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; color: var(--t2); line-height: 1.5; }
.camp-sent-bar { margin: -4px 0 12px; font-size: 13px; color: var(--t2); }
.camp-filter { margin-bottom: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.camp-reset { font-size: 13px; color: var(--accent-text); text-decoration: none; }
.camp-nowrap { width: 1%; white-space: nowrap; }
.camp-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-recur { color: var(--t3); font-size: 12px; }
.camp-segments { font-size: 12px; color: var(--t2); max-width: 160px; }
.camp-num { text-align: right; }
.camp-inline { display: inline; }
.camp-status-draft { color: var(--t3); }
.camp-status-scheduled { color: var(--blue); font-weight: bold; }
.camp-status-running { color: var(--warn); font-weight: bold; }
.camp-status-completed { color: var(--ok); }
.camp-status-cancelled { color: var(--t3); text-decoration: line-through; }
.camp-status-paused { color: var(--warn); font-weight: bold; }
.camp-mode-form { display: inline; }
.camp-mode-select { font-size: 12px; padding: 1px 4px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--inp); color: var(--t1); }
.camp-mode-default { color: var(--t3); font-size: 11px; display: block; }
.camp-mode-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px;
  font-weight: 600; white-space: nowrap; }
.camp-mode-moderation { background: var(--warn-bg); color: var(--warn); }
.camp-mode-notification { background: var(--ok-bg); color: var(--ok); }
.camp-mode-silent { background: var(--gray-bg); color: var(--gray); }
.camp-act { display: inline-block; padding: 3px 8px; font-size: 12px; border-radius: 4px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; font-family: inherit; }
.camp-act-schedule { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }
.camp-act-pause { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.camp-act-resume { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.camp-act-cancel { background: var(--card); color: var(--t2); border-color: var(--border); }
.camp-act-restore { background: var(--card); color: var(--t2); border-color: var(--t3); }
.camp-act-edit { background: var(--card); color: var(--t1); border-color: var(--t3); }
.camp-act-archive { background: var(--gray-bg); color: var(--gray); border-color: var(--gray); }

/* === T-534 (4/4): campaigns_new.html (create/edit campaign form) — token-driven, namespaced.
   Reuses shared input/select/textarea base + .btn*/.camp-form-block + --wa-* preview tokens.
   .camp-warn also fixes campaigns_chain_edit.html which referenced it before it existed. === */
.camp-warn { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--t1);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }

/* new/edit form shell — keeps .campaign (JS hook) class on the <form> */
.camp-new-form { max-width: 680px; margin: 0 auto; }
.camp-new-form label { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--t1); }
.camp-new-form .camp-sub { font-weight: normal; color: var(--t3); }
.camp-new-form input[type=text], .camp-new-form input[type=datetime-local],
.camp-new-form input[type=time], .camp-new-form textarea, .camp-new-form select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.camp-new-form textarea { min-height: 70px; resize: vertical; }
.camp-new-form .hint { font-size: 12px; color: var(--t3); margin-top: 4px; display: block; font-weight: normal; }
.camp-new-form .actions { margin-top: 20px; }
.camp-new-form .back { margin-left: 14px; text-decoration: none; color: var(--t2); font-size: 13px; }

/* template picker trigger button */
.camp-tpl-btn { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; text-align: left;
  background: var(--inp); border: 1px solid var(--inp-b); color: var(--t1); cursor: pointer;
  border-radius: 6px; font-size: 13.5px; }
.camp-tpl-btn:hover { border-color: var(--t3); }
.camp-tpl-btn .btn-name { font-weight: 700; }
.camp-tpl-btn .btn-hint { color: var(--t3); font-size: 0.85em; margin-left: 6px; }

/* template picker modal (JS toggles display:block/none on #tpl-modal) */
.camp-tpl-modal { display: none; position: fixed; inset: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.5); z-index: 999; overflow-y: auto; }
.camp-tpl-modal-inner { background: var(--card); max-width: 660px; margin: 30px auto; padding: 20px;
  border: 1px solid var(--border); border-radius: 8px; max-height: calc(100vh - 60px); overflow-y: auto; }
.camp-tpl-modal-inner h3 { margin: 0 0 14px; font-size: 16px; color: var(--t1); }
.camp-tpl-modal-close { float: right; border: none; background: none; font-size: 1.4em;
  cursor: pointer; line-height: 1; color: var(--t2); }
.camp-tpl-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 8px; cursor: pointer; align-items: flex-start; }
.camp-tpl-item:hover { border-color: var(--t3); background: var(--bg); }
.camp-tpl-item.selected { border-color: var(--btn-p); background: var(--bg); }
.camp-tpl-item input[type=radio] { margin-top: 3px; flex-shrink: 0; width: auto; }
.camp-tpl-item-name { font-weight: 700; font-size: 13px; color: var(--t1); }
.camp-tpl-item-lang { color: var(--t3); font-size: 12px; margin-left: 6px; }
.camp-tpl-item-body { margin-top: 5px; font-size: 12px; color: var(--t2); line-height: 1.5;
  white-space: pre-wrap; }
.camp-tpl-item-body mark { background: var(--wa-mark); color: var(--wa-bubble-t); padding: 0 2px;
  border-radius: 2px; font-style: italic; }
.camp-tpl-confirm { margin-top: 14px; }

/* WhatsApp bubble preview — reuses shared --wa-* tokens (same as birthday page) */
.camp-wa-wrap { display: none; margin-top: 10px; background: var(--wa-panel);
  padding: 12px; border-radius: 6px; }
.camp-wa-bubble { background: var(--wa-bubble); color: var(--wa-bubble-t);
  border-radius: 8px 8px 8px 0; padding: 8px 12px; max-width: 85%;
  font-size: 14px; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,.15); word-break: break-word; }
.camp-wa-sender { font-size: 12px; font-weight: 700; color: var(--wa-sender); margin-bottom: 3px; }
.camp-wa-note { font-size: 11px; color: var(--t3); margin-top: 5px; }

/* segment checkbox picker */
.camp-seg-boxes { margin-top: 4px; border: 1px solid var(--inp-b); padding: 8px; background: var(--inp);
  max-height: 200px; overflow-y: auto; border-radius: 6px; }
/* label.camp-seg-row must beat the generic ".camp-new-form label{display:block}" rule */
.camp-new-form label.camp-seg-row { display: flex; gap: 8px; align-items: flex-start;
  margin-top: 0; margin-bottom: 6px; font-weight: normal; }
.camp-seg-row input[type=checkbox] { margin-top: 2px; flex-shrink: 0; width: auto; }
.camp-seg-count { color: var(--t3); font-size: 0.85em; }
.camp-seg-desc { display: block; color: var(--t2); font-size: 0.80em; }
.camp-seg-missing { color: var(--warn); font-size: 13px; margin: 4px 0; }

/* template param fields (JS-built — replaces old inline border/color cssText) */
.camp-param-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.camp-param-label { font-size: 0.85em; color: var(--t3); width: 60px; flex-shrink: 0; }
/* 3-class selector beats the generic ".camp-new-form input[type=text]" (0-2-1) so the row stays flex */
.camp-new-form .camp-param-row .camp-param-input { flex: 1; width: auto; margin-top: 0; }
.tpl-param-error-input { border-color: var(--err) !important; }
.tpl-param-inline-error { color: var(--err); font-size: 0.8em; margin-top: 4px; display: block; }

/* === T-537: Настройки (settings.html — 4 tabs, ~18 forms) — token-driven, namespaced .set-*.
   Reuses shared .tab-pane/.section-title/.btn*/.flash-ok/.flash-err/.tab-table. Underline tab-bar
   uses element selectors (.set-tabbar button[.active]) because the page JS rewrites button.className
   wholesale to 'active'/''. JS-built rows (tg-ops/pay-override/group-tier/unlimited-norms) use these
   classes instead of inline hex so dark theme adapts. Layout-only inline styles (width/grid/flex)
   are left in the template — the gate only forbids hardcoded COLORS + <style> blocks. === */
.set-section { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; max-width: 640px; }

.set-tabbar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--border);
  max-width: 640px; }
.set-tabbar button { background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 7px 18px; font-family: inherit; font-size: 13px;
  color: var(--t2); cursor: pointer; }
.set-tabbar button:hover { color: var(--t1); }
.set-tabbar button.active { border-bottom-color: var(--accent-text); color: var(--t1); font-weight: 700; }

/* compact density for all settings form controls (overrides the roomier global input padding) */
.set-section input[type=text], .set-section input[type=number], .set-section input[type=password],
.set-section select, .set-section textarea {
  padding: 3px 6px; font-size: 12.5px; }
.set-section textarea { resize: vertical; }

.set-note { font-size: 12px; color: var(--t3); margin-bottom: 12px; line-height: 1.5; }
.set-subhead { font-weight: 600; font-size: 12.5px; color: var(--t2); margin-bottom: 8px; }
.set-fieldlabel { font-size: 12px; color: var(--t2); display: block; margin-bottom: 2px; }
.set-muted { color: var(--t3); }
.set-ok { color: var(--ok); }
.set-warn { color: var(--warn); }
.set-current { font-size: 12px; color: var(--t3); }
.set-saved { color: var(--ok); font-size: 12px; font-weight: 700; }
.set-link { color: var(--accent-text); }

/* dense editable tables */
.set-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.set-table th { text-align: left; color: var(--t3); font-weight: normal; padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--border); }
.set-table td { padding: 4px 8px 4px 0; color: var(--t1); vertical-align: middle; }
.set-table .set-dash { color: var(--t3); }
.set-stale { background: var(--warn-bg); }
.set-stale-mark { color: var(--warn); font-size: 0.8em; }

/* read-only diagnostic tables (auto-staff, orphaned visits) */
.set-diag-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.set-diag-table th { padding: 4px 10px; text-align: left; color: var(--t2);
  border-bottom: 1px solid var(--border); background: var(--bg); }
.set-diag-table td { padding: 3px 10px; border-bottom: 1px solid var(--border); color: var(--t1); }

/* row card used by the per-trainer group-tier overrides */
.set-rowcard { margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); }

/* delete / remove ✕ button */
.set-del { background: none; border: none; color: var(--err); cursor: pointer;
  font-size: 1em; line-height: 1; padding: 0 4px; }

/* monospace token chip (system ignored tokens) */
.set-tag { font-family: var(--mono, monospace); background: var(--bg); padding: 2px 6px;
  border-radius: 3px; color: var(--t2); }

/* service-classification select with an active manual override (darker border cue) */
.set-overridden { border-color: var(--t2) !important; }

/* === T-532: Графики (charts.html — 17 tabs, ~8 Chart.js canvases) — token-driven. Scoped under
   .charts-page so the folder-style .tab-btn/.tab-content DON'T inherit the shared pill .tab-btn /
   .tab-pane. Chart.js config colors stay literal inside <script> (canvas colors allowed). The page
   JS selects .tab-btn/.tab-content globally — fine, one page rendered at a time. === */
.charts-page .tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 0;
  border-bottom: 2px solid var(--t1); padding-bottom: 0; }
.charts-page .tab-btn { padding: 5px 10px; border: 1px solid var(--border); border-bottom: none;
  background: var(--bg); color: var(--t2); cursor: pointer; font-family: inherit; font-size: 12px;
  border-radius: 4px 4px 0 0; white-space: nowrap; }
.charts-page .tab-btn:hover { color: var(--t1); }
.charts-page .tab-btn.active { background: var(--t1); color: var(--card); border-color: var(--t1); }
.charts-page .tab-content { display: none; }
.charts-page .tab-content.active { display: block; }
.charts-page .detail-count { font-size: 0.8em; color: var(--t3); margin: 8px 0; }

/* === T-538: legacy /weekly KPI table — token-driven. Reuses shared .section-title/.set-table/
   .btn*/.flash-*. Only the diff-cell colours + card are page-specific. === */
.wk-section { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; max-width: 720px; }
.wk-sub { font-size: 0.82em; color: var(--t3); margin-top: -8px; margin-bottom: 16px; }
/* placeholder row: grey the whole row — .set-table td colour would otherwise beat .wk-zero on the tr */
.set-table tr.wk-zero td { color: var(--t3); }
.wk-pos { color: var(--ok); font-weight: 700; }
.wk-neg { color: var(--err); font-weight: 700; }
.wk-zero { color: var(--t3); }
.wk-ph { color: var(--t3); font-size: 0.85em; }
.wk-dash { color: var(--t3); }

/* === T-538: public token-standalone pages (login, cancel_booking, 404) — NOT the app shell
   (no sidebar for unauthenticated visitors). They link reference-styles.css + run the no-flash
   theme IIFE so dark theme works, then use these .auth-* classes. === */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 24px; box-sizing: border-box; flex: 1; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 40px; width: 360px; max-width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; color: var(--t1); }
.auth-sub { font-size: 13px; color: var(--t3); margin-bottom: 28px; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 6px; }
.auth-card input[type=email], .auth-card input[type=password] { width: 100%; margin-bottom: 16px; }
.auth-err { background: var(--err-bg); border: 1px solid var(--err); color: var(--err);
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.auth-ok { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok);
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.auth-btn { width: 100%; padding: 11px; font-size: 15px; font-weight: 600; margin-top: 4px; }
/* centered public notice (cancel booking result, 404) */
.auth-center { text-align: center; max-width: 420px; }
.auth-center p { color: var(--t2); line-height: 1.5; margin: 0 0 24px; }
.auth-hint { margin-top: 16px; font-size: 0.85em; color: var(--t3); }