/* ============================================================
   Bot UI — AP Engagement Dashboard
   Audited stylesheet · v10 · 2026-05-23

   Design system tokens:
     Spacing       4 / 8 / 12 / 16 / 24 / 32 / 48
     Radius        card 12 · control 8 · pill 999
     Control h     40px (every input, select, button, tab)
     Page padding  32px horizontal · 24px vertical
     Card padding  24px
     Section gap   24px (between cards inside a view)
     Section heading  12px uppercase 0.1em letter-spaced muted
     Field label      11px uppercase 0.1em letter-spaced muted
     Body             14px / 1.55
   ============================================================ */

:root {
  /* Surface palette ------------------------------------------- */
  --bg-0:    #E9F0FA;   /* page — soft pastel blue */
  --bg-1:    #DDE8F5;
  --panel:   #FFFFFF;   /* cards — white */
  --panel-2: #F3F8FE;   /* sub-cards — very light blue */
  --stroke:  #E1E9F4;
  --stroke-2:#CFDDEE;
  --text:    #1C2A45;   /* navy text */
  --muted:   #5E6E8C;
  --faint:   #93A1B8;

  --accent:      #3B82F6;
  --accent-glow: rgba(59, 130, 246, 0.22);
  --cyan:        #38BDF8;
  --cyan-dim:    rgba(56, 189, 248, 0.14);
  --cyan-glow:   rgba(56, 189, 248, 0.20);

  --ok:   #16A34A;
  --warn: #D97706;
  --bad:  #DC2626;

  /* Spacing scale --------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Shape ----------------------------------------------------- */
  --radius:    12px;   /* cards, panels                          */
  --radius-sm: 8px;    /* inputs, buttons, chips, sub-cards      */

  /* Controls -------------------------------------------------- */
  --control-h:    40px;
  --control-px:   14px;
  --control-py:   10px;

  /* Layout ---------------------------------------------------- */
  --page-x:       32px;
  --page-y:       24px;
  --card-pad:     24px;
  --section-gap:  24px;

  --shadow: 0 6px 24px rgba(28, 42, 69, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
    "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  font: 14px/1.55 var(--font);
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(59,130,246,0.06), transparent 60%),
    var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scrollbars — visible but subtle ----------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--stroke-2) var(--bg-0); }

.hidden { display: none !important; }
.muted  { color: var(--muted); }
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--faint);
  font-weight: 700;
}
.error { color: var(--bad); min-height: 1.2em; font-size: 13px; margin-top: var(--s-2); }

/* ============================================================
   Typography scale
   ============================================================ */
.t-page-title { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin: 0; }
.t-section,
.chart-card  > h2,
.list-card   h2,
.composer    > h2,
.ann-tab-panel .card > h2,
.dm-blast-head h2,
.recurring-head h2,
.sub-panel-head h2,
.modal-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.field > span,
.stat-label,
.cl-tag,
.cl-label,
small.counter,
.an-meta,
.hero-foot small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--faint);
}

/* ============================================================
   Form controls — every input, select, textarea, button share
   the same metrics so rows line up regardless of widget mix.
   ============================================================ */
input, select, textarea, button {
  font: inherit;
  color: var(--text);
}

input[type="password"],
input[type="text"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--control-py) var(--control-px);
  min-height: var(--control-h);
  outline: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea {
  resize: vertical;
  line-height: 1.5;
  min-height: calc(var(--control-h) * 2);
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  width: auto;
  min-height: 0;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}
select option { background: var(--bg-1); color: var(--text); }

/* Primary button --------------------------------------------- */
button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--control-py) var(--s-4);
  height: var(--control-h);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: box-shadow 0.15s, opacity 0.12s, transform 0.12s;
}
button:hover  { box-shadow: 0 0 0 1px var(--cyan), 0 4px 20px var(--cyan-glow); }
button:active { transform: translateY(1px); box-shadow: none; }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Secondary / ghost button ----------------------------------- */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--text);
  font-weight: 600;
}
.btn-ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: none;
  background: transparent;
}
.btn-ghost.full { width: 100%; }

/* Small variant — used in card headers (refresh, close, ✕)    */
.btn-ghost.sm, .btn-link.sm, button.sm {
  height: 32px;
  padding: 0 var(--s-3);
  font-size: 13px;
}

/* Destructive button ----------------------------------------- */
.btn-danger {
  background: var(--bad);
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background: #DC2626;
  box-shadow: 0 0 0 1px #FCA5A5, 0 4px 20px rgba(239,68,68,0.35);
}
.btn-danger.ghost {
  background: transparent;
  border: 1px solid var(--bad);
  color: var(--bad);
}
.btn-danger.ghost:hover { background: rgba(239,68,68,0.08); color: var(--bad); box-shadow: none; }

/* Anchor styled as a button ---------------------------------- */
.btn-link {
  height: var(--control-h);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0 var(--control-px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.btn-link:hover { border-color: var(--cyan); color: var(--cyan); }

/* ============================================================
   Login
   ============================================================ */
.centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--card-pad);
}
.login-card {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: center;
  box-shadow: var(--shadow), 0 0 0 1px var(--stroke-2), 0 0 80px rgba(59,130,246,0.1);
  padding: var(--s-6);
}
.login-mark {
  width: 52px; height: 52px;
  margin: 0 auto var(--s-1);
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: #fff; font-size: 22px;
  box-shadow: 0 10px 30px -6px var(--accent-glow);
}
.login-card h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.login-card p  { margin: 0 0 var(--s-1); font-size: 13px; color: var(--muted); }

/* ============================================================
   App shell
   ============================================================ */
#app {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--stroke);
  background: var(--bg-1);
}
.side-brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-2) var(--s-5);
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
}
.side-brand .logo {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: #fff; font-size: 15px;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.side-logo-img {
  width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
}
.side-brand .word { color: var(--text); }

.side-nav { display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  background: transparent; color: var(--muted);
  font-weight: 600; text-align: left;
  height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-sm);
  justify-content: flex-start;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.nav-item .ic { width: 18px; text-align: center; line-height: 1; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); box-shadow: none; }
.nav-item.active {
  background: var(--cyan-dim);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--cyan);
}
.nav-item.active .ic { color: var(--cyan); }

.side-foot { padding-top: var(--s-4); border-top: 1px solid var(--stroke); }

/* ── Main ────────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; }

.appbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-5) var(--page-x);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.appbar-title h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; }
.appbar-title p  { margin: var(--s-1) 0 0; font-size: 13px; color: var(--muted); }

.controls { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.controls > .control { height: var(--control-h); }
.control.hidden { display: none !important; }

/* Tab / range group ------------------------------------------ */
.range-group {
  display: inline-flex;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-0);
  height: var(--control-h);
}
.range-group button {
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  font-weight: 600;
  padding: 0 var(--s-4);
  height: 100%;
  box-shadow: none;
  white-space: nowrap;
}
.range-group button:hover { color: var(--text); box-shadow: none; }
.range-group button.active { background: var(--accent); color: #fff; }

.auto {
  color: var(--muted);
  display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13px;
  padding: 0 var(--s-3);
  height: var(--control-h);
  user-select: none;
}
select.control { width: auto; min-width: 140px; }

/* ---- Exclude channels dropdown ---- */
.exclude-ctrl { position: relative; }

.exclude-trigger {
  height: var(--control-h);
  padding: 0 var(--control-px);
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  min-width: 140px;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.exclude-trigger::after {
  content: "▾";
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}
.exclude-trigger:hover { border-color: var(--stroke-2); color: var(--text); box-shadow: none; }
.exclude-trigger.active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
  color: var(--text);
}

.exclude-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(28,42,69,0.10);
  z-index: 200;
  padding: var(--s-2) 0;
}
.exc-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.exc-row:hover { background: rgba(59,130,246,0.07); }
.exc-row input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }
.exc-empty { display: block; padding: var(--s-3) var(--s-3); color: var(--muted); font-size: 13px; }

/* ---- Reset modal actions ---- */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
}

/* Page scroll body — fixed page padding ---------------------- */
.scroll { padding: var(--page-y) var(--page-x) var(--s-7); }
.view   { display: flex; flex-direction: column; gap: var(--section-gap); }

/* ============================================================
   Hero score card
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: var(--s-6);
  align-items: center;
  box-shadow: var(--shadow);
}
.hero-gauge { position: relative; width: 230px; height: 230px; margin: 0 auto; }
.hero-gauge canvas, .hero-gauge svg { width: 100% !important; height: 100% !important; }
.hero-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-score {
  font-size: 56px; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cyan);
  text-shadow: 0 0 32px var(--cyan-glow);
}
.hero-out { font-size: 12px; color: var(--faint); margin-top: var(--s-1); letter-spacing: 0.1em; }

.hero-body { display: flex; flex-direction: column; gap: var(--s-4); }
.hero-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
}
.hero-head .kicker { margin-bottom: var(--s-1); }
.hero-headline { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }
.hero-note { margin: 0; font-size: 13px; max-width: 60ch; color: var(--muted); text-wrap: pretty; }

.trend {
  font-weight: 700; font-size: 13px;
  padding: 6px var(--s-3); border-radius: 999px;
  border: 1px solid var(--stroke-2);
  white-space: nowrap;
}
.trend.up   { color: var(--ok);  border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.1);  }
.trend.down { color: var(--bad); border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.1);  }
.trend.flat { color: var(--muted); }

.meters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); }
.meter  { display: flex; flex-direction: column; gap: var(--s-1); }
.meter-top {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted);
}
.meter-top b { color: var(--text); font-variant-numeric: tabular-nums; }
.meter-bar  { height: 5px; border-radius: 999px; background: var(--stroke); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.6s ease; }

.hero-foot {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-4);
  margin-top: var(--s-1);
  border-top: 1px solid var(--stroke);
}
.hero-foot div   { display: flex; flex-direction: column; gap: var(--s-1); }
.hero-foot span  { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.hero-foot small { font-size: 11px; }

/* ============================================================
   KPI cards
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.stat { display: flex; flex-direction: column; gap: var(--s-2); }
.stat-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}

/* ============================================================
   Chart cards
   ============================================================ */
.chart-card > h2,
.list-card  h2,
.composer   > h2 { margin: 0 0 var(--s-4); }
.list-head h2 { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.chart-card { display: flex; flex-direction: column; gap: var(--s-2); }
.chart-card canvas { max-width: 100%; }

/* ============================================================
   Leaderboard
   ============================================================ */
.list-card { box-shadow: var(--shadow); }
.list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.list-head h2 { margin: 0; }

.leaderboard { display: flex; flex-direction: column; }
.lb-row {
  display: grid;
  grid-template-columns: 32px 40px 1fr auto;
  align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--stroke);
  transition: background 0.12s;
}
.lb-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.lb-row:hover           { background: rgba(59,130,246,0.07); }
.lb-row:last-child      { border-bottom: none; }
.lb-rank {
  font-weight: 800; color: var(--faint); text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb-row.top1 .lb-rank { color: #FFD56B; }
.lb-row.top2 .lb-rank { color: #C8D0E0; }
.lb-row.top3 .lb-rank { color: #D4956A; }
.lb-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: 14px;
  flex-shrink: 0;
}
.lb-main  { min-width: 0; }
.lb-name  { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar   { height: 4px; border-radius: 999px; background: var(--stroke); margin-top: 6px; overflow: hidden; }
.lb-fill  { height: 100%; border-radius: 999px; background: var(--accent); }
.lb-meta  { text-align: right; }
.lb-count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cyan); }
.lb-share { font-size: 12px; color: var(--faint); }

/* ============================================================
   Call log
   ============================================================ */
.calllog { display: flex; flex-direction: column; gap: var(--s-4); }
.cl-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--card-pad);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}
.cl-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.cl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.cl-title { font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.cl-badges { display: flex; gap: var(--s-2); }
.badge {
  font-size: 12px; font-weight: 700;
  padding: 4px var(--s-3); border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--stroke);
  color: var(--muted);
}
.cl-meta { font-size: 0.78rem; color: var(--muted); margin: 2px 0 10px; }
.cl-card-actions { display: flex; align-items: center; gap: var(--s-2); }
.cl-avg-rating { font-size: 0.8rem; font-weight: 700; color: #FFD700; padding: 2px 6px; white-space: nowrap; }
.cl-avg-none { color: var(--faint); font-weight: 400; }
.cl-takeaway { font-size: 0.86rem; font-style: italic; color: var(--text); opacity: 0.8; margin-bottom: 10px; }
.cl-summary { color: var(--text); margin: var(--s-1) 0 var(--s-4); font-size: 0.85rem; line-height: 1.6; }
.cl-section-header { font-weight: 700; font-size: 0.85rem; margin: 10px 0 2px; color: var(--text); }
.cl-bullets { margin: 0 0 6px 18px; padding: 0; }
.cl-bullets li { margin-bottom: 2px; }
.cl-para { margin: 4px 0; }
.cl-block + .cl-block { margin-top: var(--s-4); }
.cl-label { margin-bottom: var(--s-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font-size: 13px; font-weight: 600;
  padding: 6px var(--s-3); border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--stroke);
  color: var(--text);
}
.chip small { color: var(--faint); margin-left: var(--s-1); font-weight: 600; }
.chip.rec {
  border-color: rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.12);
  color: #B3D4F5;
}
.empty { text-align: center; padding: var(--s-7) var(--s-5); color: var(--muted); }
.empty h3 { margin: 0 0 var(--s-2); color: var(--text); }

/* ============================================================
   Announcements
   ============================================================ */
.announce-toolbar {
  display: flex;
  align-items: center;
}
.ann-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.ann-post-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-gap);
  align-items: start;
}

.composer { display: flex; flex-direction: column; gap: var(--s-4); }
.field    { display: flex; flex-direction: column; gap: var(--s-2); }
.counter  { color: var(--faint); font-size: 11px; align-self: flex-end; }

/* When / schedule row ---------------------------------------- */
.when { display: flex; align-items: center; gap: var(--s-5); }
.radio { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--muted); cursor: pointer; }
.radio input { cursor: pointer; }
#a-time[disabled] { display: none; }
#a-time:not([disabled]) { margin-top: var(--s-2); display: block; width: 100%; }

/* Queue & history rows --------------------------------------- */
.announce-list { display: flex; flex-direction: column; gap: 0; }
.an-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--stroke);
  border-bottom: none;
  background: var(--bg-1);
  transition: background 0.12s;
}
.an-row:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.an-row:last-child  { border-bottom: 1px solid var(--stroke); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.an-row:only-child  { border-radius: var(--radius-sm); border-bottom: 1px solid var(--stroke); }
.an-row:hover       { background: rgba(59,130,246,0.05); }
.an-body  { min-width: 0; }
.an-meta  { font-size: 11px; margin-bottom: var(--s-1); }
.an-meta b { color: var(--muted); font-weight: 600; }
.an-msg   {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-err   { color: var(--bad); font-size: 12px; margin-top: var(--s-1); }
.an-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s-1); }
.an-role-tag {
  font-size: 11px; font-weight: 600;
  color: var(--accent); background: rgba(59,130,246,0.12);
  border-radius: 4px; padding: 1px 6px;
}
.an-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.an-delete  {
  color: var(--faint); font-size: 12px;
  height: 32px; padding: 0 var(--s-3);
  background: transparent; border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  font-weight: 600;
}
.an-delete:hover { color: var(--bad); border-color: var(--bad); box-shadow: none; }
.an-divider {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--faint);
  padding: var(--s-2) var(--s-4) var(--s-1);
  border: 1px solid var(--stroke); border-bottom: none;
  background: var(--panel-2);
}
.an-show-more {
  width: 100%; height: 36px;
  border: 1px solid var(--stroke); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--muted); font-size: 13px;
  background: transparent;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.an-show-more:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* DM Blast --------------------------------------------------- */
.dm-blast-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.dm-blast-head > div { display: flex; flex-direction: column; gap: var(--s-1); }
.dm-blast-head h2 { margin: 0; }
.dm-blast-head p  { margin: 0; }
.dm-blast-body { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-5); align-items: start; }
.dm-blast-left,
.dm-blast-right { display: flex; flex-direction: column; gap: var(--s-4); }

.role-checklist {
  display: flex; flex-direction: column;
  max-height: 160px; overflow-y: auto;
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  background: var(--bg-1);
}
.dm-role-list {
  display: flex; flex-direction: column;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  background: var(--bg-1);
}
.role-check-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); cursor: pointer;
  border-bottom: 1px solid var(--stroke);
  transition: background 0.12s;
}
.role-check-item:last-child { border-bottom: none; }
.role-check-item:hover { background: rgba(59,130,246,0.08); }
.role-check-name  { flex: 1; font-size: 13px; }
.role-check-count { font-size: 11px; color: var(--faint); flex-shrink: 0; }

.dm-preview {
  background: var(--bg-1); border: 1px solid var(--stroke-2);
  border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4);
  white-space: pre-wrap; font-size: 13px; color: var(--muted);
}
.dm-actions { display: flex; gap: var(--s-2); }
.dm-actions button { flex: 1; }
.dm-status-bar {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
}
.dm-status-bar.pending  { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: var(--warn); }
.dm-status-bar.sending  { background: var(--cyan-dim); border-color: rgba(56,189,248,0.4); color: var(--cyan); }
.dm-status-bar.done     { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: var(--ok); }
.dm-status-bar.failed   { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: var(--bad); }

/* Recurring schedules ---------------------------------------- */
.recurring-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.recurring-head > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.recurring-head p { margin: 0; }

.rec-warn {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--warn);
  background: rgba(245,158,11,0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}

.rec-list { display: flex; flex-direction: column; gap: 0; }
.rec-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--stroke);
  border-bottom: none;
  background: var(--bg-1);
  transition: background 0.12s;
}
.rec-row:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rec-row:last-child  { border-bottom: 1px solid var(--stroke); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.rec-row:only-child  { border-radius: var(--radius-sm); border-bottom: 1px solid var(--stroke); }
.rec-row:hover       { background: rgba(59,130,246,0.05); }
.rec-row-body   { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-row-title  { font-size: 13px; font-weight: 700; }
.rec-row-sub    { font-size: 11px; color: var(--faint); }
.rec-row-msg    { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

.rec-toggle-wrap { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.rec-toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.rec-toggle-track {
  display: block; width: 38px; height: 20px;
  background: var(--stroke-2); border-radius: 10px; position: relative;
  transition: background 0.2s;
}
.rec-toggle-track::after {
  content: ""; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); top: 3px; left: 3px;
  transition: transform 0.2s, background 0.2s;
}
.rec-toggle-wrap input:checked + .rec-toggle-track { background: var(--ok); }
.rec-toggle-wrap input:checked + .rec-toggle-track::after {
  transform: translateX(18px); background: #fff;
}

.rec-form-wrap  { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.rec-form-divider { border-top: 1px solid var(--stroke); margin: 0; }
.rec-form-title {
  margin: 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint);
}
.rec-form-actions {
  display: flex; gap: var(--s-2); justify-content: flex-end;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.deadline-row { display: flex; gap: var(--s-2); align-items: center; }
.deadline-row input { flex: 1; min-width: 0; }
.deadline-row .btn-ghost { white-space: nowrap; flex-shrink: 0; }

/* Status pills ----------------------------------------------- */
.pill {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 4px var(--s-3); border-radius: 999px;
  align-self: start; white-space: nowrap;
}
.pill.pending   { color: var(--warn); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); }
.pill.sent      { color: var(--ok);   background: rgba(34,197,94,0.12);  border: 1px solid rgba(34,197,94,0.35);  }
.pill.failed    { color: var(--bad);  background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.35);  }
.pill.cancelled { color: var(--faint); background: var(--panel-2);       border: 1px solid var(--stroke);         }

/* ============================================================
   Challenges
   ============================================================ */
.ch-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.btn-new-challenge {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  height: var(--control-h);
  padding: 0 var(--s-4);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  border: none;
}
.btn-new-challenge:hover {
  box-shadow: 0 0 0 1px var(--cyan), 0 4px 20px var(--cyan-glow);
}

.ch-panel { display: flex; flex-direction: column; gap: var(--s-4); }

.ch-card {
  position: relative; overflow: hidden;
  padding: var(--card-pad);
  transition: border-color 0.15s;
}
.ch-card:hover { border-color: var(--stroke-2); }
.ch-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ch-color, var(--accent));
}
.ch-card-head {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);
}
.ch-cat-dot {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; display: grid; place-items: center;
  font-size: 18px; opacity: 0.85;
}
.ch-card-meta  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.ch-card-title { font-size: 16px; font-weight: 750; }
.ch-card-sub   { font-size: 12px; color: var(--muted); }
.ch-card-desc  { margin: 0 0 var(--s-4); font-size: 13.5px; color: var(--muted); }
.ch-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--stroke);
  flex-wrap: wrap;
}
.ch-card-foot .left,
.ch-card-foot .right { display: flex; align-items: center; gap: var(--s-2); }

.pill.upcoming { color: var(--accent); background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); }
.pill.live     { color: var(--cyan);   background: var(--cyan-dim);        border: 1px solid rgba(56,189,248,0.4); }
.pill.past     { color: var(--faint);  background: var(--panel-2);         border: 1px solid var(--stroke); }

/* Submissions slide-over ------------------------------------- */
.sub-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(28,42,69,0.40); }
.sub-panel {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 45;
  width: min(480px, 100vw);
  background: var(--bg-1);
  border-left: 1px solid var(--stroke);
  display: flex; flex-direction: column;
  box-shadow: -16px 0 48px rgba(28,42,69,0.14);
  animation: slide-in-right 0.22s ease;
}
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.sub-panel-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.sub-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); padding: var(--card-pad) var(--card-pad) var(--s-4);
  border-bottom: 1px solid var(--stroke);
  flex-shrink: 0;
}
.sub-panel-head > div { display: flex; flex-direction: column; gap: var(--s-1); }
.sub-list {
  flex: 1; overflow-y: auto;
  padding: var(--s-4) var(--card-pad) var(--card-pad);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.sub-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--panel);
  transition: border-color 0.15s;
}
.sub-row:hover { border-color: var(--stroke-2); }
.sub-row.sub-winner { border-color: rgba(56,189,248,0.45); background: rgba(56,189,248,0.06); }
.sub-body   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.sub-name   { font-weight: 650; }
.sub-ts     { font-size: 12px; color: var(--faint); }
.sub-content {
  font-size: 14px; word-break: break-word;
  background: var(--bg-0);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3);
}
.sub-img {
  max-width: 100%; max-height: 240px;
  border-radius: var(--radius-sm); object-fit: cover;
  border: 1px solid var(--stroke);
}
.winner-badge { font-size: 11px; padding: 2px var(--s-2); }

/* Create challenge modal ------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28,42,69,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  animation: fade-in 0.18s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  width: 560px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 30px 70px rgba(28,42,69,0.18), 0 0 0 1px var(--stroke-2);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.ch-form        { display: flex; flex-direction: column; gap: var(--s-4); }
.radio-group    { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* ============================================================
   Footer & Toasts
   ============================================================ */
.foot {
  padding-top: var(--s-6);
  font-size: 12px; color: var(--faint);
}

.toasts {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 50;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.toast {
  min-width: 240px; max-width: 360px;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600;
  animation: toast-in 0.22s ease;
  color: var(--text);
}
.toast.ok  { border-left: 3px solid var(--ok); }
.toast.err { border-left: 3px solid var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hero             { grid-template-columns: 1fr; }
  .hero-gauge       { width: 200px; height: 200px; }
  .ann-post-layout  { grid-template-columns: 1fr; }
  .dm-blast-body    { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --page-x: 20px; }
  #app { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row;
    align-items: center; padding: var(--s-3) var(--s-4); gap: var(--s-3);
    border-right: none; border-bottom: 1px solid var(--stroke);
    overflow-x: auto;
    background: var(--bg-1);
  }
  .side-brand { padding: 0 var(--s-3) 0 0; }
  .side-nav   { flex-direction: row; flex: 1; gap: var(--s-1); }
  .nav-item   { white-space: nowrap; height: 36px; padding: 0 var(--s-3); }
  .nav-item.active {
    box-shadow: inset 0 -3px 0 var(--cyan);
    background: var(--cyan-dim);
  }
  .side-foot { padding: 0; border: none; }
  .side-foot .full { width: auto; }

  /* Appbar: keep title + controls on one row; controls scroll horizontally */
  .appbar {
    padding: var(--s-4) var(--page-x);
    flex-wrap: nowrap;
    align-items: center;
  }
  .appbar-title { flex-shrink: 0; }
  .controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  .controls::-webkit-scrollbar { height: 0; }
  select.control { min-width: 110px; }
}
@media (max-width: 760px) {
  .kpis   { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .meters { grid-template-columns: 1fr; }
  .hero-foot { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Modals & challenge cards */
  .modal-box { width: 100%; }
  .ch-card-foot { flex-direction: column; align-items: stretch; }

  /* Login card: fluid on tiny screens */
  .login-card { width: 100%; max-width: 360px; }

  /* Appbar: tighter padding, smaller title */
  .appbar { padding: var(--s-3) var(--page-x); gap: var(--s-2); }
  .appbar-title h1 { font-size: 20px; }
  .appbar-title p  { font-size: 12px; }

  /* Bot monitor log: narrow timestamp column */
  .bm-log-row { grid-template-columns: 70px 44px 1fr; font-size: 11px; }
  .bm-log-ts  { font-size: 10px; }

  /* Call log overview: remove fixed 3-col, stack score above chart */
  .cl-overview {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
  }
  .cl-ov-score  { grid-column: 1; grid-row: 1; border-right: 1px solid var(--stroke-2); }
  .cl-ov-chart  { grid-column: 2; grid-row: 1; }
  .cl-ov-footer { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--stroke); padding-top: 10px; margin-top: 4px; }

  /* Hero foot: go back to 3-col (was forced to 2-col at 760px) */
  .hero-foot { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .hero-foot span { font-size: 17px; }

  /* Poll past rows: allow the meta badge row to wrap */
  .polls-past-row-head { flex-wrap: wrap; gap: var(--s-2); }
  .polls-past-row-meta { flex-wrap: wrap; }

  /* XP action panel: remove the large left indent */
  .xp-action-row { padding-left: var(--s-4); }
}

/* ── Mobile nav drawer base styles (all viewports) ─────────── */
#nav-toggle { display: none; }

#nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: rgba(28,42,69,0.40);
}
#nav-overlay.open { display: block; animation: fade-in 0.18s ease; }

@keyframes drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── Phone ≤480px ───────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --page-x:      12px;
    --card-pad:    16px;
    --section-gap: 16px;
    --s-6: 24px;
    --s-7: 32px;
  }

  /* Hide horizontal nav bar entirely */
  .sidebar { display: none; }

  /* Hamburger button */
  #nav-toggle {
    display: flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    box-shadow: none;
  }
  #nav-toggle:hover { border-color: var(--accent); box-shadow: none; }

  /* Appbar: hamburger + title on one row, controls on second row */
  .appbar {
    flex-wrap: wrap;
    align-items: center;
    padding: var(--s-3) var(--page-x);
    gap: var(--s-2);
  }
  #nav-toggle { order: 0; }
  .appbar-title { order: 1; flex: 1; min-width: 0; }
  .appbar-title h1 { font-size: 17px; }
  .appbar-title p  { display: none; }
  .controls {
    order: 2;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    gap: var(--s-2);
    -webkit-overflow-scrolling: touch;
  }
  .controls::-webkit-scrollbar { height: 0; }

  /* ── Drawer (open) ── */
  .sidebar.open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    height: 100vh;
    z-index: 100;
    flex-direction: column;
    padding: var(--s-5) var(--s-4);
    background: var(--bg-1);
    border-right: 1px solid var(--stroke);
    border-bottom: none;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 8px 0 48px rgba(28,42,69,0.14);
    animation: drawer-in 0.22s ease;
    /* reset ≤900px horizontal overrides */
    align-items: stretch;
    gap: 0;
  }

  /* Brand row inside drawer */
  .sidebar.open .side-brand {
    padding: 0 0 var(--s-5) 0;
    border-bottom: 1px solid var(--stroke);
    margin-bottom: var(--s-3);
  }
  .sidebar.open .side-brand .word { display: inline; }

  /* Nav vertical inside drawer */
  .sidebar.open .side-nav {
    flex-direction: column;
    flex: 1;
    gap: var(--s-1);
    overflow: visible;
  }
  .sidebar.open .nav-item {
    height: 40px;
    padding: 0 var(--s-3);
    font-size: 14px;
    gap: var(--s-3);
    justify-content: flex-start;
    white-space: nowrap;
  }
  .sidebar.open .nav-item .ic { font-size: 16px; width: 18px; }
  .sidebar.open .nav-item.active {
    box-shadow: inset 3px 0 0 var(--cyan);
    background: var(--cyan-dim);
  }

  /* Sign-out at bottom of drawer */
  .sidebar.open .side-foot {
    display: block;
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--stroke);
    border-left: none;
    margin-top: auto;
  }
  .sidebar.open .side-foot .full { width: 100%; }

  /* Content adjustments */
  .bm-elapsed { font-size: 24px; }
  .ratings-big-score { font-size: 36px; }
  .ratings-score-block { gap: var(--s-3); padding: var(--s-3); }
  .xp-breakdown { flex-direction: column; gap: var(--s-2); }
  .xp-action-btns { flex-wrap: wrap; }
  .xp-summary-row { flex-direction: column; gap: var(--s-3); }
  .polls-page-sec { margin-bottom: var(--s-6); }
  .cl-title { font-size: 15px; }
  .ch-form { gap: var(--s-3); }
}

/* ── Very small phones ≤380px ──────────────────────────────── */
@media (max-width: 380px) {
  :root { --page-x: 10px; }
  .stat-value { font-size: 22px; }
  .appbar-title h1 { font-size: 15px; }
  .hero-foot { grid-template-columns: 1fr 1fr; }
  .hero-foot span { font-size: 15px; }
}

/* ============================================================
   Outreach
   ============================================================ */
.outreach-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--s-5);
  align-items: start;
}
.outreach-left  { display: flex; flex-direction: column; gap: var(--s-4); }
.outreach-right { display: flex; flex-direction: column; gap: var(--s-4); }

/* Campaign card */
.outreach-campaigns-card { padding: 0; overflow: hidden; }
.outreach-campaigns-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--stroke);
}
.outreach-campaigns-head h2 { font-size: 15px; margin: 0; }

/* New campaign form */
.oc-form-wrap {
  padding: var(--s-4);
  border-bottom: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.oc-form-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-2); }
.oc-sched-opts { display: flex; flex-direction: column; gap: var(--s-3); }

/* Campaign rows */
.oc-campaign-list { display: flex; flex-direction: column; }
.oc-camp-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--stroke);
  cursor: pointer; transition: background 0.15s;
}
.oc-camp-row:hover  { background: rgba(255,255,255,0.04); }
.oc-camp-row.active { background: rgba(124,108,255,0.12); }
.oc-camp-info { flex: 1; min-width: 0; }
.oc-camp-msg  { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-camp-meta { display: flex; align-items: center; gap: var(--s-2); margin-top: 2px; }
.oc-camp-sched { font-size: 11px; color: var(--accent); }
.oc-camp-del  { flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.oc-camp-row:hover .oc-camp-del { opacity: 1; }

/* Threads card */
.outreach-threads-card { padding: 0; overflow: hidden; }
.outreach-threads-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--stroke);
  gap: var(--s-3);
}
.outreach-threads-head h2 { font-size: 15px; margin: 0; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-thread-filters select { font-size: 12px; }

/* Thread rows */
.oc-thread-list { display: flex; flex-direction: column; }
.oc-thread-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--stroke);
  cursor: pointer; transition: background 0.15s;
}
.oc-thread-row:hover  { background: rgba(255,255,255,0.04); }
.oc-thread-row.active { background: rgba(124,108,255,0.12); }
.oc-thread-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.oc-thread-info { flex: 1; min-width: 0; }
.oc-thread-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.oc-thread-ts   { font-size: 11px; }
.oc-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 10px; font-weight: 700;
  padding: 0 4px;
}

/* Status badges */
.oc-status-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.oc-status-sent      { color: var(--muted);   border-color: var(--stroke-2); background: rgba(255,255,255,0.04); }
.oc-status-awaiting  { color: var(--warn);    border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.10); }
.oc-status-replied   { color: var(--cyan);    border-color: rgba(56,189,248,0.4);  background: var(--cyan-dim); }
.oc-status-completed { color: var(--ok);      border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.08); }

/* Conversation panel (reuses sub-panel shell) */
.oc-msg-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  max-height: calc(100vh - 340px);
  min-height: 200px;
}
.oc-msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.oc-msg-bot    { align-self: flex-start; }
.oc-msg-client { align-self: flex-end; }
.oc-msg-bubble {
  padding: var(--s-2) var(--s-3);
  border-radius: 12px; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.oc-msg-bot    .oc-msg-bubble { background: var(--bg-1); border: 1px solid var(--stroke); }
.oc-msg-client .oc-msg-bubble { background: rgba(124,108,255,0.18); border: 1px solid rgba(124,108,255,0.35); }
.oc-msg-ts { font-size: 10px; padding: 0 4px; }
.oc-msg-bot    .oc-msg-ts { text-align: left; }
.oc-msg-client .oc-msg-ts { text-align: right; }

/* Reply area */
.oc-reply-area {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.oc-reply-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.oc-reply-actions button:last-child { margin-left: auto; }

@media (max-width: 1100px) {
  .outreach-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   Bot Monitor
   ============================================================ */
.bm-offline-banner {
  padding: var(--s-3) var(--s-4);
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: var(--radius-sm);
  color: var(--bad);
  font-weight: 600;
  font-size: 13px;
}

/* Top row: status card + pipeline card side-by-side */
.bm-top-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--section-gap);
  align-items: start;
}

/* Status card */
.bm-status-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.bm-state-row  { display: flex; align-items: center; gap: var(--s-3); }
.bm-dot        { font-size: 18px; flex-shrink: 0; line-height: 1; }
.bm-state-text { font-size: 15px; font-weight: 700; }
.bm-elapsed {
  font-size: 32px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--cyan);
  text-shadow: 0 0 24px var(--cyan-glow);
  line-height: 1;
}
.bm-channel { font-size: 13px; }
.bm-state-msg {
  font-size: 13px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--stroke-2);
  background: var(--bg-1);
  line-height: 1.5;
}
.bm-state-msg.warn { border-left-color: var(--warn); color: var(--warn); }
.bm-state-msg.err  { border-left-color: var(--bad);  color: var(--bad);  }

/* Pipeline card */
.bm-pipeline-card .kicker { margin-bottom: var(--s-1); }
.bm-stages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-4);
}
.bm-stage-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
}
.bm-stage-done    { color: var(--ok);   background: rgba(34,197,94,0.07); }
.bm-stage-active  { color: var(--cyan); background: var(--cyan-dim); }
.bm-stage-pending { color: var(--faint); }
.bm-stage-failed  { color: var(--bad);  background: rgba(239,68,68,0.08); }
.bm-stage-icon    { width: 20px; text-align: center; flex-shrink: 0; font-size: 14px; }

.bm-pipeline-detail {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--muted);
}
.bm-pipeline-detail:empty { display: none; }

.bm-pipeline-ts { margin-top: var(--s-2); font-size: 11px; }

/* Log card */
.bm-log-card { padding: var(--card-pad); }
.bm-log-list {
  max-height: 380px;
  overflow-y: auto;
  margin-top: var(--s-3);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}
.bm-log-row {
  display: grid;
  grid-template-columns: 160px 56px 1fr;
  gap: 0 var(--s-3);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--stroke);
  font-size: 12px;
  transition: background 0.12s;
}
.bm-log-row:last-child { border-bottom: none; }
.bm-log-row:hover { background: rgba(59,130,246,0.05); }
.bm-log-ts  { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-log-lvl { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; color: var(--faint); }
.bm-log-msg { color: var(--text); word-break: break-word; }
.bm-log-warning .bm-log-lvl { color: var(--warn); }
.bm-log-error   .bm-log-lvl { color: var(--bad); }
.bm-log-warning .bm-log-msg { color: var(--warn); }
.bm-log-error   .bm-log-msg { color: var(--bad); }

@media (max-width: 900px) {
  .bm-top-grid { grid-template-columns: 1fr; }
}

/* ── Poll when-toggle ───────────────────────────────────────────────────────── */
.poll-when-toggle {
  display: flex;
  gap: 0;
  margin-top: var(--s-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}
.poll-when-btn {
  padding: 6px 18px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.poll-when-btn + .poll-when-btn { border-left: 1px solid var(--stroke); }
.poll-when-btn.active { background: var(--accent); color: #fff; }
.poll-when-btn:not(.active):hover { background: var(--bg-2); color: var(--text); }

.poll-schedule-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.poll-tz-note { font-size: 11px; color: var(--faint); }

/* ── Polls page sections ─────────────────────────────────────────────────────── */
.polls-page-sec { margin-bottom: var(--s-7); }
.polls-section-h2 {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--stroke);
}

/* Create form */
.polls-create-form { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--card-pad); }
.polls-options-stack { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.polls-form-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-1); }

/* Poll list */
.polls-list { display: flex; flex-direction: column; gap: var(--s-3); }

/* Poll card */
.poll-card {
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: border-color 0.15s;
}
.poll-card:hover { border-color: var(--accent); }
.poll-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.poll-question {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.poll-meta {
  font-size: 11px;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
}
.poll-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.poll-status-scheduled { color: var(--warn);  background: rgba(234,179,8,0.12); }
.poll-status-active    { color: var(--ok);    background: rgba(34,197,94,0.1);  }
.poll-status-closed    { color: var(--muted); background: var(--bg-2);          }

/* Options preview */
.poll-options-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-3);
}
.poll-option-pill {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 2px 10px;
}

/* Results */
.poll-results { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.poll-result-row { display: flex; flex-direction: column; gap: 4px; }
.poll-result-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text);
}
.poll-result-pct { color: var(--accent); font-weight: 700; }
.poll-result-bar-wrap {
  height: 6px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}
.poll-result-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.poll-total-votes {
  font-size: 11px;
  color: var(--faint);
  margin-top: var(--s-1);
}

/* Delete button */
.poll-del-btn {
  background: none;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.poll-del-btn:hover { color: var(--bad); background: rgba(239,68,68,0.08); }
.poll-del-btn.confirm { color: var(--bad); background: rgba(239,68,68,0.12); font-size: 12px; }

/* Live card footer */
.polls-live-card-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--stroke);
  justify-content: flex-end;
}

/* Past polls expandable rows */
.polls-past-list { display: flex; flex-direction: column; gap: var(--s-2); }
.polls-past-row {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
  transition: border-color 0.15s;
}
.polls-past-row:hover,
.polls-past-row.expanded { border-color: var(--accent); }
.polls-past-row-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  user-select: none;
}
.polls-past-row-head .poll-question { flex: 1; font-size: 13px; }
.polls-past-row-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.polls-past-expand-icon { font-size: 10px; color: var(--muted); }
.polls-past-row-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--stroke);
}

/* Poll winner badge */
.poll-winner {
  font-size: 11px;
  font-weight: 700;
  color: var(--ok);
  background: rgba(34,197,94,0.1);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Feedback settings */
.polls-feedback-settings {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-3);
}
.polls-feedback-settings-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.polls-setting-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 160px;
}
.polls-setting-sub {
  font-size: 12px;
  color: var(--faint);
  margin-top: 2px;
}

/* Feedback result card */
.poll-feedback-card {
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.poll-feedback-date {
  font-size: 11px;
  color: var(--faint);
  margin-bottom: var(--s-2);
}

/* Empty state */
.polls-empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--faint);
  font-size: 13px;
}

/* ===================== Improvement Insights ===================== */
.improvements-card {
  margin-top: 0;
}
.improvements-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.improvements-head h2 {
  margin: 0;
}
.imp-sub, .imp-badge, .imp-badge-good, .imp-badge-warning, .imp-badge-danger {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.imp-badge-good    { background: rgba(45,212,191,0.15); color: #2dd4bf; }
.imp-badge-warning { background: rgba(251,191,36,0.15); color: #fbbf24; }
.imp-badge-danger  { background: rgba(248,113,113,0.15); color: #f87171; }

.improvements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.imp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.imp-icon {
  font-size: 12px;
  margin-top: 1px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.imp-text { flex: 1; }

.imp-danger  { background: rgba(248,113,113,0.08); border-left: 3px solid #f87171; }
.imp-danger  .imp-icon { color: #f87171; }
.imp-warning { background: rgba(251,191,36,0.08);  border-left: 3px solid #fbbf24; }
.imp-warning .imp-icon { color: #fbbf24; }
.imp-info    { background: rgba(96,165,250,0.08);  border-left: 3px solid #60a5fa; }
.imp-info    .imp-icon { color: #60a5fa; }
.imp-good    { background: rgba(45,212,191,0.08);  border-left: 3px solid #2dd4bf; }
.imp-good    .imp-icon { color: #2dd4bf; }

@media (max-width: 700px) {
  .poll-card-head { flex-direction: column; gap: var(--s-2); }
  .polls-live-card-foot { justify-content: flex-start; }
}

/* Call log overview hero ---------------------------------- */
.cl-overview {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 0 20px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,215,0,0.04) 0%, var(--bg-1) 60%);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 16px;
}
.cl-ov-score {
  grid-column: 1; grid-row: 1 / 3;
  text-align: center;
  border-right: 1px solid var(--stroke-2);
  padding-right: 20px;
}
.cl-ov-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFD700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cl-ov-number.cl-ov-none { color: var(--faint); font-size: 1.8rem; }
.cl-ov-stars { font-size: 0.9rem; color: #FFD700; margin: 3px 0 2px; letter-spacing: 1px; }
.cl-ov-sub { font-size: 0.72rem; color: var(--muted); }
.cl-ov-chart {
  grid-column: 2; grid-row: 1 / 3;
  min-width: 0;
  padding: 2px 0;
}
.cl-ov-chart-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 6px;
}
.cl-ov-canvas-wrap {
  position: relative;
  height: 68px;
  width: 100%;
}
.cl-ov-footer {
  grid-column: 3; grid-row: 1 / 3;
  align-self: center;
}

/* Call log toolbar ---------------------------------------- */
.cl-toolbar {
  display: flex; justify-content: flex-end; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.cl-delete-btn { color: var(--faint); }
.cl-delete-btn:hover { color: #ef4444; }

/* Topic suggestion panel ---------------------------------- */
.cl-suggest-panel {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F8FE 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  position: relative;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.15), 0 4px 20px rgba(59,130,246,0.08);
}
.cl-suggest-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: var(--radius) 0 0 var(--radius);
}
.cl-suggest-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.cl-suggest-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.cl-suggest-close {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 0.85rem; padding: 2px 4px; line-height: 1;
  border-radius: 4px; transition: color 0.15s;
}
.cl-suggest-close:hover { color: var(--text); }
.cl-suggest-body { font-size: 0.88rem; line-height: 1.6; }
.cl-suggest-body .cl-section-header {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 4px;
}
.cl-suggest-body .cl-section-header:first-child {
  font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--text); margin-top: 0; margin-bottom: 10px;
}
.cl-suggest-body .cl-para { margin: 0 0 6px; color: var(--text); }
.cl-suggest-body .cl-bullets {
  margin: 4px 0 0 16px; padding: 0;
  color: var(--muted); display: flex; flex-direction: column; gap: 4px;
}

/* Call ratings ------------------------------------------- */
.ratings-score-block {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); background: var(--panel);
  border: 1px solid var(--stroke); border-radius: var(--radius);
  margin-bottom: var(--s-2);
}
.ratings-big-score {
  font-size: 48px; font-weight: 800; line-height: 1;
  color: #FFD700;
}
.ratings-meta { display: flex; flex-direction: column; gap: var(--s-1); }
.ratings-stars { font-size: 20px; letter-spacing: 2px; }
.ratings-count { font-size: 13px; color: var(--faint); }
.ratings-trend-block { margin-bottom: var(--s-3); }
.rating-card {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  background: var(--panel);
}
.rating-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.rating-card-name { font-weight: 650; }
.rating-card-stars { font-size: 16px; }
.rating-card-ts { font-size: 12px; color: var(--faint); }
.rating-card-feedback {
  font-size: 13px; word-break: break-word;
  background: var(--bg-0); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3);
  white-space: pre-wrap;
}

/* ============================================================
   XP Leaderboard & Settings
   ============================================================ */

/* Summary stat row */
.xp-summary-row {
  display: flex;
  gap: var(--section-gap);
  margin-bottom: var(--section-gap);
}
.xp-stat { flex: 1; min-width: 0; }

/* Leaderboard rows */
.xp-lb-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--stroke);
  cursor: default;
  transition: background 0.12s;
}
.xp-lb-row:last-of-type { border-bottom: none; }
.xp-lb-row:hover { background: var(--panel-2); }
.xp-lb-rank { width: 28px; text-align: center; font-size: 18px; flex-shrink: 0; }
.xp-rank-num { font-size: 13px; font-weight: 700; color: var(--faint); }
.xp-lb-main { flex: 1; min-width: 0; }
.xp-lb-name { font-weight: 650; font-size: 14px; }
.xp-lb-meta { font-size: 12px; color: var(--muted); margin: 2px 0 5px; }

/* XP progress bar */
.xp-prog-wrap {
  height: 4px;
  background: var(--stroke);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 3px;
}
.xp-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  border-radius: 99px;
  transition: width 0.3s;
}
.xp-prog-label { font-size: 11px; color: var(--faint); }

/* Expand / action row */
.xp-action-row {
  background: var(--bg-1);
  border-bottom: 1px solid var(--stroke);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(28px + var(--s-3) + 36px + var(--s-3));
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.xp-breakdown {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.xp-breakdown strong { color: var(--text); }
.xp-action-btns {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.xp-amt-input {
  width: 90px;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 13px;
}
.xp-expand-btn { margin-left: auto; flex-shrink: 0; }

/* Settings — tabs */
.xp-tabs { margin-bottom: var(--section-gap); }
.xp-tab-panel { }
.xp-settings-card { max-width: 760px; }

/* Toggle list (channels / roles) */
.xp-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.xp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.xp-toggle-row:hover { background: var(--panel-2); }

/* Notification settings */
.xp-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--stroke);
  gap: var(--s-4);
}
.xp-notif-row:last-of-type { border-bottom: none; }
.xp-notif-label { font-weight: 650; font-size: 14px; margin-bottom: 2px; }

/* Level-up embed preview */
.xp-preview-card {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}
.xp-preview-embed {
  border-left: 4px solid #FFD700;
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.xp-preview-title { font-weight: 750; font-size: 15px; margin-bottom: var(--s-1); }
.xp-preview-desc { font-size: 13px; color: var(--muted); margin-bottom: var(--s-3); }
.xp-preview-fields {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.xp-pf-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  font-weight: 700;
  margin-bottom: 2px;
}
.xp-pf-val { font-size: 14px; font-weight: 650; }

/* XP info modal content */
.xp-info-body { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.xp-info-rule {
  background: var(--panel-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
}
.xp-info-rule-title { font-weight: 700; font-size: 14px; margin-bottom: var(--s-1); }
.xp-info-rule-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }
.xp-info-rule-desc strong { color: var(--text); }
.xp-info-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--faint); padding-top: var(--s-2);
}

/* Thresholds table */
.xp-thresh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.xp-thresh-table th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--stroke);
}
.xp-thresh-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--stroke);
  color: var(--text);
}
.xp-thresh-table tr:last-child td { border-bottom: none; }
.xp-thresh-table code {
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
}
.cl-ratings-btn { margin-left: var(--s-2); }

/* ============================================================
   LIGHT REFINE  —  premium polish (white + pastel blue)
   ============================================================ */
:root{
  --radius:18px;
  --radius-sm:10px;
  --shadow:0 4px 22px rgba(28,42,69,0.06);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
}
body{font-family:var(--font);}
#app{background:var(--bg-0);}

/* Sidebar — clean white */
.sidebar{background:#FFFFFF;border-right:1px solid #EAF0F7;padding:22px 16px;}
.side-brand{font-weight:800;letter-spacing:-.02em;}
.side-brand .word{color:var(--text);}
.kicker{color:#9AA7BF;letter-spacing:.12em;}
.nav-item{color:#66768F;font-weight:600;border-radius:11px;height:42px;}
.nav-item .ic{color:#9AA7BF;}
.nav-item:hover{background:#F2F6FC;color:var(--text);box-shadow:none;}
.nav-item:hover .ic{color:#66768F;}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong);box-shadow:none;font-weight:700;}
.nav-item.active .ic{color:var(--accent-strong);}
.side-foot{border-top:1px solid #EAF0F7;}
.side-brand .logo{box-shadow:0 6px 16px rgba(59,130,246,.28);}

/* App bar — light (fixes the dark header) */
.appbar{background:rgba(255,255,255,0.82);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid #EAF0F7;padding:18px 32px;}
.appbar-title h1{font-weight:800;letter-spacing:-.025em;color:var(--text);}
.appbar-title p{color:var(--muted);}

/* Cards — soft, rounded, airy */
.card{background:#fff;border:1px solid #EAF0F7;border-radius:18px;box-shadow:0 4px 22px rgba(28,42,69,0.05);padding:26px;}
.list-card{box-shadow:0 4px 22px rgba(28,42,69,0.05);}

/* Range toggle + selects — pill */
.range-group{background:#fff;border:1px solid #E2E9F4;border-radius:999px;padding:3px;}
.range-group button{color:#66768F;border-radius:999px;font-weight:600;}
.range-group button:hover{color:var(--text);}
.range-group button.active{background:var(--accent);color:#fff;}

/* Stat cards */
.stat-label{color:#9AA7BF;letter-spacing:.08em;font-weight:700;text-transform:uppercase;}
.stat-value{color:var(--text);font-weight:800;}

/* Section labels */
.t-section,.chart-card>h2,.list-card h2,.composer>h2,
.ann-tab-panel .card>h2,.dm-blast-head h2,.recurring-head h2,
.sub-panel-head h2,.modal-head h2{color:#9AA7BF;letter-spacing:.1em;font-weight:700;}

/* Headings */
.t-page-title,.appbar-title h1{font-weight:800;color:var(--text);}
.hero-headline{font-weight:800;color:var(--text);font-size:24px;letter-spacing:-.01em;}
.hero-note{color:var(--muted);}
.hero-score{color:var(--accent);font-weight:800;}
.hero-out{color:#9AA7BF;}

/* Login modal mark / primary actions keep blue */
.login-mark,.side-brand .logo{background:linear-gradient(135deg,var(--accent),var(--accent-strong));}

/* Light scrollbars */
::-webkit-scrollbar-thumb{background:#CFDDEE;}
::-webkit-scrollbar-thumb:hover{background:#3B82F6;}

/* ============================================================
   TONAL ZONES — add depth, reduce glare (3 distinct surfaces)
   ============================================================ */
:root{
  --bg-0:#E5ECF6;   /* main content — soft blue-grey ambient */
  --bg-1:#DBE5F2;
}
#app{background:var(--bg-0);}

/* Sidebar = its own calm near-white zone */
.sidebar{background:#F7FAFE;border-right:1px solid #E1E9F4;}

/* App bar tied to the sidebar tone, sits above the deeper main area */
.appbar{background:rgba(247,250,254,0.85);border-bottom:1px solid #E1E9F4;}

/* Cards = brightest surface, lifted off the deeper ambient */
.card{background:#FFFFFF;box-shadow:0 6px 26px rgba(28,42,69,0.07);}
.list-card{box-shadow:0 6px 26px rgba(28,42,69,0.07);}

/* Inset sub-surfaces a touch tinted so nested panels read as nested */
.range-group{background:#FFFFFF;}

/* nav line-icons */
.nav-item .ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;}
.nav-item .ic svg{width:17px;height:17px;display:block;}

/* ============================================================
   THEME TOKENS — accent vars, insight vars, dark mode, density
   ============================================================ */
:root{
  --accent-strong:#2563EB;
  --accent-soft:rgba(59,130,246,.12);
  --imp-good:#16A34A;   --imp-good-bg:rgba(16,163,74,.07);
  --imp-warn:#D97706;   --imp-warn-bg:rgba(217,119,6,.08);
  --imp-danger:#DC2626; --imp-danger-bg:rgba(220,38,38,.06);
  --imp-info:#3B82F6;   --imp-info-bg:rgba(59,130,246,.07);
}

/* Improvement Insights — theme-aware, fits the palette */
.imp-danger{background:var(--imp-danger-bg);border-left:3px solid var(--imp-danger);}
.imp-danger .imp-icon{color:var(--imp-danger);}
.imp-warning{background:var(--imp-warn-bg);border-left:3px solid var(--imp-warn);}
.imp-warning .imp-icon{color:var(--imp-warn);}
.imp-info{background:var(--imp-info-bg);border-left:3px solid var(--imp-info);}
.imp-info .imp-icon{color:var(--imp-info);}
.imp-good{background:var(--imp-good-bg);border-left:3px solid var(--imp-good);}
.imp-good .imp-icon{color:var(--imp-good);}
.imp-badge-good{background:var(--imp-good-bg);color:var(--imp-good);}
.imp-badge-warning{background:var(--imp-warn-bg);color:var(--imp-warn);}
.imp-badge-danger{background:var(--imp-danger-bg);color:var(--imp-danger);}

/* ── DARK THEME ── */
[data-theme="dark"]{
  --bg-0:#0A0A0A; --bg-1:#0E1119; --panel:#141720; --panel-2:#191C26;
  --stroke:#232B3B; --stroke-2:#2C3450; --text:#F2F4F8; --muted:#9AA6BC; --faint:#5A6480;
  --shadow:0 8px 40px rgba(0,0,0,.6);
  --imp-good:#34D399;   --imp-good-bg:rgba(52,211,153,.10);
  --imp-warn:#FBBF24;   --imp-warn-bg:rgba(251,191,36,.10);
  --imp-danger:#F87171; --imp-danger-bg:rgba(248,113,113,.10);
  --imp-info:#60A5FA;   --imp-info-bg:rgba(96,165,250,.10);
}
[data-theme="dark"] #app{background:var(--bg-0);}
[data-theme="dark"] .sidebar{background:#0C0F16;border-right:1px solid #1B2230;}
[data-theme="dark"] .appbar{background:rgba(12,15,22,0.82);border-bottom:1px solid #1B2230;}
[data-theme="dark"] .card{background:#141720;border:1px solid #232B3B;box-shadow:0 8px 30px rgba(0,0,0,.45);}
[data-theme="dark"] .list-card{box-shadow:0 8px 30px rgba(0,0,0,.45);}
[data-theme="dark"] .nav-item{color:#9AA6BC;}
[data-theme="dark"] .nav-item .ic{color:#5A6480;}
[data-theme="dark"] .nav-item:hover{background:rgba(255,255,255,0.05);color:#fff;}
[data-theme="dark"] .nav-item:hover .ic{color:#9AA6BC;}
[data-theme="dark"] .nav-item.active{background:var(--accent-soft);color:#fff;}
[data-theme="dark"] .nav-item.active .ic{color:var(--accent);}
[data-theme="dark"] .range-group{background:#141720;border-color:#232B3B;}
[data-theme="dark"] .range-group button{color:#9AA6BC;}
[data-theme="dark"] .stat-label,[data-theme="dark"] .t-section,
[data-theme="dark"] .chart-card>h2,[data-theme="dark"] .list-card h2,
[data-theme="dark"] .composer>h2{color:#6B7689;}
[data-theme="dark"] .appbar-title h1,[data-theme="dark"] .t-page-title,
[data-theme="dark"] .hero-headline,[data-theme="dark"] .stat-value,
[data-theme="dark"] .side-brand .word{color:#F2F4F8;}
[data-theme="dark"] .side-foot{border-top:1px solid #1B2230;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2C3450;}

/* ── DENSITY ── */
html[data-density="compact"] .card{padding:16px;}
html[data-density="compact"] .kpis{gap:12px;}
html[data-density="compact"] .grid-2{gap:12px;}
html[data-density="compact"] .appbar{padding:12px 24px;}
html[data-density="compact"] .nav-item{height:38px;}

/* ── Settings view ── */
.settings-card{max-width:680px;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:18px 0;border-top:1px solid var(--stroke);}
.set-row:first-of-type{border-top:none;}
.set-label{font-weight:700;color:var(--text);font-size:14px;}
.set-desc{color:var(--muted);font-size:12.5px;margin-top:2px;}
.set-toggle{display:inline-flex;background:var(--panel-2);border:1px solid var(--stroke);border-radius:999px;padding:3px;gap:2px;}
.set-toggle .seg{background:transparent;border:none;color:var(--muted);font-weight:600;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;font-family:inherit;}
.set-toggle .seg.active{background:var(--accent);color:#fff;}
.set-swatches{display:inline-flex;gap:10px;}
.set-swatches .sw{width:26px;height:26px;border-radius:50%;background:var(--c);border:none;cursor:pointer;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s;}
.set-swatches .sw.active{outline-color:var(--c);}

/* ── Reduce motion ── */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}
/* ── Collapsed sidebar (icons only) ── */
html[data-sidebar="collapsed"] #app{grid-template-columns:72px 1fr;}
html[data-sidebar="collapsed"] .sidebar{padding:22px 8px;}
html[data-sidebar="collapsed"] .side-brand{justify-content:center;padding:0 0 18px;gap:0;}
html[data-sidebar="collapsed"] .side-brand .word{display:none;}
html[data-sidebar="collapsed"] .side-nav .kicker{display:none;}
html[data-sidebar="collapsed"] .nav-item{justify-content:center;padding:0;gap:0;font-size:0;}
html[data-sidebar="collapsed"] .nav-item .ic{font-size:initial;}
html[data-sidebar="collapsed"] .side-foot .full{font-size:0;padding-left:0;padding-right:0;}

/* ── Settings layout polish ── */
#view-settings{padding-top:8px;}
#view-settings .settings-card{max-width:760px;margin:0 auto;}
/* hide the "updated · AEST" footer on config pages */
html[data-view="settings"] .foot,
html[data-view="billing"]  .foot,
html[data-view="aiconfig"] .foot,
html[data-view="xpsettings"] .foot{display:none;}

/* ── Dynamic brand mark + settings input ── */
.side-brand-mark{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;font-weight:800;font-size:15px;flex-shrink:0;overflow:hidden;}
.side-brand-mark.has-logo{background:transparent;}
.side-brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.set-input{background:var(--panel-2);border:1px solid var(--stroke);border-radius:8px;color:var(--text);padding:7px 11px;font-size:13px;font-family:inherit;outline:none;width:230px;max-width:46vw;}
.set-input:focus{border-color:var(--accent);}

/* ── Sidebar banner + account chip (reference style) ── */
.side-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 20px;}
.side-brand-mark svg{width:18px;height:18px;color:#fff;}
.side-brand-text{min-width:0;line-height:1.15;}
.side-brand-name{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--text);}
.side-brand-name .accent{color:var(--accent);}
.side-brand-sub{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.side-account{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px;}
.side-acct-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;color:var(--accent);background:transparent;border:2px solid var(--accent);flex-shrink:0;overflow:hidden;}
.side-acct-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.side-acct-av.has-logo{border-color:transparent;}
.side-acct-text{min-width:0;flex:1;line-height:1.2;}
.side-acct-name{font-weight:700;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-acct-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-acct-logout{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;}
.side-acct-logout svg{width:17px;height:17px;}
.side-acct-logout:hover{color:var(--text);background:var(--panel-2);}

/* Collapsed sidebar — show only marks */
html[data-sidebar="collapsed"] .side-brand-text,
html[data-sidebar="collapsed"] .side-acct-text,
html[data-sidebar="collapsed"] .side-acct-logout{display:none;}
html[data-sidebar="collapsed"] .side-brand{justify-content:center;padding:2px 0 20px;}
html[data-sidebar="collapsed"] .side-account{justify-content:center;padding:6px 0;}

/* ── Improvement Insights — numbered-badge style (match AI Suggestions) ── */
.improvements-list{counter-reset:imp;gap:10px;}
.imp-item{
  counter-increment:imp;
  align-items:center;gap:14px;
  padding:14px 18px;border-radius:12px;
  background:var(--panel-2);
  border:1px solid var(--stroke);
}
.imp-item:hover{border-color:var(--stroke-2);}
/* drop the old severity tints / 3px left borders */
.imp-danger,.imp-warning,.imp-info,.imp-good{
  background:var(--panel-2);border:1px solid var(--stroke);
}
/* circular numbered badge */
.imp-icon{
  width:26px;height:26px;min-width:26px;margin-top:0;
  border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0;
}
.imp-icon::before{content:counter(imp);font-size:12px;line-height:1;}
/* badge colour follows the insight severity */
.imp-danger  .imp-icon{border-color:var(--imp-danger);color:var(--imp-danger);}
.imp-warning .imp-icon{border-color:var(--imp-warn);color:var(--imp-warn);}
.imp-info    .imp-icon{border-color:var(--imp-info);color:var(--imp-info);}
.imp-good    .imp-icon{border-color:var(--imp-good);color:var(--imp-good);}
.imp-text{color:var(--muted);font-size:13px;}