/* ============================================================
   RESET & VARIABLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #0d1117;
  --surface:       #161c27;
  --surface-2:     #1e2535;
  --surface-hover: #232c3d;
  --border:        #313d54;
  --border-light:  #1e2535;

  --primary:       #004ef9;
  --primary-hover: #0041d4;
  --primary-dim:   rgba(0, 78, 249, 0.12);

  --accent:        #004ef9;
  --accent-hover:  #0041d4;
  --accent-dim:    rgba(0, 78, 249, 0.12);

  --chart-1:       #004ef9;
  --chart-2:       #7ac943;

  --success:       #22c55e;
  --success-dim:   rgba(34, 197, 94, 0.12);
  --warning:       #f59e0b;
  --warning-dim:   rgba(245, 158, 11, 0.12);
  --danger:        #ef4444;
  --danger-dim:    rgba(239, 68, 68, 0.12);
  --info:          #3b82f6;
  --info-dim:      rgba(59, 130, 246, 0.12);

  --text:          #e8edf5;
  --text-primary:  #e8edf5;
  --text-muted:    #9aaabe;
  --text-secondary:#9aaabe;
  --text-subtle:   #7a8fa8;

  --input-bg:      rgba(255,255,255,0.06);
  --row-border:    rgba(255,255,255,0.04);
  --hover-overlay: rgba(255,255,255,0.07);

  --sidebar-w:     220px;
  --radius:        6px;
  --radius-sm:     4px;
  --shadow:        0 2px 8px rgba(0,0,0,0.2);

  /* ── Type Scale ──────────────────────────────────────────── */
  --fs-xs:         12px;   /* floor — caps labels, timestamps, muted meta */
  --fs-sm:         13px;   /* secondary text, table cells, badges */
  --fs-base:       14px;   /* primary body, buttons, form inputs */
  --fs-md:         15px;   /* emphasized body, card descriptions */
  --fs-lg:         16px;   /* section titles, card headers */
  --fs-xl:         18px;   /* page sub-headings */
  --fs-2xl:        20px;   /* page headings */
  --fs-3xl:        24px;   /* large display values */
  --fs-4xl:        32px;   /* hero / dashboard KPIs */
}

/* ── Light Theme ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:             #f1f4f9;
  --surface:        #ffffff;
  --surface-2:      #f5f7fb;
  --surface-hover:  #edf1f7;
  --border:         #dde3ed;
  --border-light:   #edf1f7;

  --text:           #1e293b;
  --text-primary:   #1e293b;
  --text-muted:     #64748b;
  --text-secondary: #64748b;
  --text-subtle:    #94a3b8;

  --input-bg:       #ffffff;
  --row-border:     rgba(0,0,0,0.06);
  --hover-overlay:  rgba(0,0,0,0.05);

  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --primary-dim:    rgba(0, 78, 249, 0.10);
  --success-dim:    rgba(34, 197, 94, 0.10);
  --warning-dim:    rgba(245, 158, 11, 0.10);
  --danger-dim:     rgba(239, 68, 68, 0.10);
  --info-dim:       rgba(59, 130, 246, 0.10);
  --accent-dim:     rgba(0, 78, 249, 0.08);
}

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.5; overflow-x: hidden; color-scheme: dark; font-variant-numeric: tabular-nums; }

/* ── Weight hierarchy — headings and display values get 600, everything else 500 baseline ── */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; }
.stat-value, .prog-stat-value, .prog-vol-value { font-weight: 600; letter-spacing: -0.03em; }
.view-header h1 { font-weight: 600; letter-spacing: -0.03em; }
.card-header h2 { font-weight: 600; letter-spacing: -0.01em; }
.ph-name, .ph-metric-value { font-weight: 600; letter-spacing: -0.02em; }
.prog-ctrl-title, .prog-section-title { font-weight: 600; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease, min-width 0.2s ease;
  flex-shrink: 0;
}

/* Collapsed state — icon-only strip */
.sidebar.collapsed {
  width: 72px !important;
  min-width: 72px !important;
  overflow: visible;
}
.sidebar.collapsed .sidebar-label { display: none; }
.sidebar.collapsed .nav-btn span  { display: none; }
.sidebar.collapsed .brand-text    { display: none; }
.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 16px 0;
}
.sidebar.collapsed .nav-btn        { justify-content: center; padding: 12px 0; position: relative; }
.sidebar.collapsed .nav-btn svg    { width: 22px; height: 22px; opacity: 0.8; }
.sidebar.collapsed .btn-add-client { position: relative; }
.sidebar.collapsed .btn-logout     { position: relative; }
.sidebar.collapsed .mode-badge     { position: relative; }
.sidebar.collapsed .nav-badges     { display: none; }
.sidebar.collapsed .sidebar-add-wrap { padding: 10px 8px 12px; }
.sidebar.collapsed .btn-add-client { padding: 12px 0; justify-content: center; }
.sidebar.collapsed .sidebar-footer { padding: 12px 0 16px; }
.sidebar.collapsed .mode-badge     { padding: 6px 0; justify-content: center; }
.sidebar.collapsed .btn-logout     { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .sidebar-resize-handle { display: none; }

/* Tooltips — visible only in collapsed mode */
.sidebar.collapsed [data-tooltip] { position: relative; }
.sidebar.collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.sidebar.collapsed [data-tooltip]:hover::after { opacity: 1; }

/* Sidebar edge toggle — circle chevron on sidebar right edge */
.sidebar-edge-toggle {
  position: absolute;
  left: calc(var(--sidebar-w) - 15px);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  transition: left 0.2s ease, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sidebar-edge-toggle:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,78,249,0.4);
}
.sidebar-edge-toggle svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sidebar-edge-toggle.is-collapsed svg {
  transform: rotate(180deg);
}

/* Drag-to-resize handle */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--primary);
  opacity: 0.5;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.brand-logo {
  width: 38px;
  height: 38px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--fs-base);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  overflow: hidden;
}
.brand-logo.has-custom-logo { background: transparent; }
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}

.brand-name {
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--text);
}

.brand-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }

.nav-btn:hover { background: var(--surface-hover); color: var(--text); }
.nav-btn:hover svg { opacity: 1; }

.nav-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 500;
}
.nav-btn.active svg { opacity: 1; }

.nav-badges {
  margin-left: auto;
  display: flex;
  gap: 3px;
  align-items: center;
}
.nav-badge {
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.nav-badge--blue {
  background: #3b82f6;
}

.sidebar-add-wrap {
  padding: 10px 10px 12px;
}

.sidebar-footer {
  padding: 14px 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-add-client {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 14px 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-add-client svg { width: 16px; height: 16px; }
.btn-add-client:hover { background: var(--primary-hover); }

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

.views-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.view {
  padding: 28px 32px 40px;
  min-height: 100%;
}

.view.hidden { display: none; }

/* ============================================================
   VIEW HEADER
   ============================================================ */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.view-header h1 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text);
}
.view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Global Search Bar (inline on dashboard) ─────────────────── */
.view-header > div:first-child { flex: 1; }
.view-header-actions { flex: 1; justify-content: flex-end; }
.global-search-bar {
  position: relative; flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 14px; height: 38px; transition: border-color 0.15s;
}
.global-search-bar:focus-within { border-color: var(--primary); }
.gs-icon { color: var(--text-muted); flex-shrink: 0; }
.gs-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: var(--fs-sm); color: var(--text); font-family: inherit;
}
.gs-input::placeholder { color: var(--text-subtle); }
.gs-shortcut {
  font-size: 10px; font-weight: 600; color: var(--text-subtle);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}

/* ── Search Results Dropdown ─────────────────────────────────── */
.gs-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 200;
  max-height: 420px; overflow-y: auto;
}
.gs-results.hidden { display: none; }
.gs-results::-webkit-scrollbar { width: 4px; }
.gs-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.gs-category {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-subtle); padding: 10px 16px 4px;
}
.gs-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; transition: background 0.1s;
}
.gs-result:hover, .gs-result.gs-active { background: rgba(255,255,255,0.04); }
.gs-result-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0;
}
.gs-result-icon--client { background: rgba(0,78,249,0.12); color: var(--primary); }
.gs-result-icon--message { background: rgba(34,197,94,0.12); color: var(--success); }
.gs-result-icon--checkin { background: rgba(245,158,11,0.12); color: var(--warning); }
.gs-result-info { flex: 1; min-width: 0; }
.gs-result-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-badge { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.gs-match { background: rgba(0,78,249,0.2); color: var(--text); border-radius: 2px; padding: 0 1px; }
.gs-no-results { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.gs-searching { padding: 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Global Search Modal (⌘K) ────────────────────────────────── */
.gs-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6); display: flex; align-items: flex-start;
  justify-content: center; padding-top: 15vh;
}
.gs-modal-overlay.hidden { display: none; }
.gs-modal {
  width: 560px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5); overflow: hidden;
}
.gs-modal-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.gs-modal-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: var(--fs-md); color: var(--text); font-family: inherit;
}
.gs-modal-input::placeholder { color: var(--text-subtle); }
.gs-shortcut-modal {
  font-size: 10px; font-weight: 600; color: var(--text-subtle);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px; padding: 2px 8px;
}
.gs-modal-results { max-height: 400px; overflow-y: auto; }
.gs-modal-results:empty::after {
  content: 'Start typing to search...'; display: block;
  padding: 24px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm);
}
.view-header-actions .btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 3px;
}

.view-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}


/* ── Rotating gradient border (default / uncolored cards) ── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-spin {
  to { --border-angle: 360deg; }
}
/* Hover: subtle border brightening only */
.stat-card:hover,
.chart-card:hover {
  border-color: rgba(255,255,255,0.12);
}

/* ── Base stat card ─────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 130px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.stat-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
/* Suppress the spin animation on all neutral stat-card hovers — colored cards override this with their own rules */
.stat-card:hover::before { opacity: 0 !important; animation: none; }

/* ── Header row: label + period badge ── */
.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: auto;
}

/* ── KPI status — communicated via full border color, not value color ── */
/* 3-tier KPI: blue (on target), yellow (caution), red (below target) */
.stat-card--great   { border-color: rgba(0,78,249,0.6); }
.stat-card--warning { border-color: rgba(234,179,8,0.6); }
.stat-card--danger  { border-color: rgba(220,38,38,0.6); }

/* Values stay neutral — status is the border, not the number */
.stat-card--warning .stat-value,
.stat-card--danger .stat-value,
.stat-card--great .stat-value { color: var(--text) !important; }

/* Hover: border brightens */
.stat-card--great:hover   { border-color: rgba(0,78,249,0.8); }
.stat-card--warning:hover { border-color: rgba(234,179,8,0.8); }
.stat-card--danger:hover  { border-color: rgba(220,38,38,0.8); }


.stat-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.stat-value {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

.stat-sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: auto;
  min-height: 16px;
}

/* ============================================================
   CHARTS GRID
   ============================================================ */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  padding: 16px 20px 20px;
  position: relative;
}

/* Card glare/sweep disabled — premium = restraint */
.glare-wrap {
  display: none;
}

/* Glare beam — real width with a center-bright gradient so it's
   properly clipped by the overflow:hidden wrap.
   Resting state: parked 120px off the left edge, invisible. */
/* Resting state: invisible. transform/opacity driven by Web Animations API. */
.glare-sweep {
  position: absolute;
  top: -60%;
  left: 0;
  width: 40px;
  height: 220%;
  transform: translateX(-60px) rotate(-20deg);
  opacity: 0;

  /* Very subtle bell-curve — this should catch your eye just barely,
     like peripheral light on glass, not a visible beam. Dark-mode
     cards are near-black so even 0.09 reads clearly. */
  background: linear-gradient(
    to right,
    transparent             0%,
    rgba(255,255,255,0.01)  20%,
    rgba(255,255,255,0.07)  42%,
    rgba(255,255,255,0.09)  50%,
    rgba(255,255,255,0.07)  58%,
    rgba(255,255,255,0.01)  80%,
    transparent             100%
  );

  pointer-events: none;
  will-change: transform, opacity;
}

/* Light mode — surface is lighter so peak needs to be a bit stronger
   to register as a reflection at all */
[data-theme="light"] .glare-sweep {
  background: linear-gradient(
    to right,
    transparent             0%,
    rgba(255,255,255,0.02)  20%,
    rgba(255,255,255,0.14)  42%,
    rgba(255,255,255,0.18)  50%,
    rgba(255,255,255,0.14)  58%,
    rgba(255,255,255,0.02)  80%,
    transparent             100%
  );
}

.chart-container {
  position: relative;
  height: 220px;
}

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

/* ============================================================
   DASHBOARD LOWER ROW — 3-column card grid
   ============================================================ */
.dashboard-lower {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1100px) {
  .dashboard-lower { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dashboard-lower { grid-template-columns: 1fr; }
}

/* ============================================================
   DASHBOARD CONTENT-SWAP — drag handles & slot highlights
   ============================================================ */

/* .dash-content fills its card slot */
.dash-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Swap handle — shown on card hover */
.dash-swap-handle {
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  margin-right: 8px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.card:hover .dash-swap-handle { opacity: 1; }
.dash-swap-handle:hover { color: var(--text); }
.dash-swap-handle:active { cursor: grabbing; }

/* Card being dragged */
.dash-slot-dragging {
  opacity: 0.35;
  pointer-events: none;
}

/* Drop target highlight — dashed primary border */
.dash-swap-target {
  outline: 2px dashed var(--primary) !important;
  outline-offset: -2px;
}


/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-header h2 {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}

.card-link {
  font-size: var(--fs-xs);
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}
.card-link:hover { text-decoration: underline; }

/* Renewal alert rows */
.renewal-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.renewal-item:last-child { border-bottom: none; }
.ra-group-rows .renewal-item:last-child { border-bottom: none; }
.renewal-item:hover .renewal-name { color: var(--primary); }

/* Left block: name + service/billing */
.renewal-item-left { flex: 1; min-width: 0; }
.renewal-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renewal-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }

/* Middle block: continuity info */
.renewal-item-cont {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.ri-cont-check {
  color: var(--success);
  font-weight: 500;
  margin-right: 2px;
}
.ri-no-cont {
  color: var(--text-muted);
  font-style: italic;
}

/* Right block: days badge */
.renewal-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text-muted);
}
.renewal-badge.warning { background: var(--warning-dim); color: var(--warning); }
.renewal-badge.urgent  { background: var(--danger-dim);  color: var(--danger); }

/* Renewal alert group headers & divider */
.ra-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
}
.ra-group-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ra-group-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 1px 7px;
}
.ra-divider {
  border: none;
  border-top: 2px solid var(--border);
  margin: 12px 0 4px;
}

/* Milestone alerts */
.milestone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.milestone-item:last-child { border-bottom: none; }
.milestone-item:hover .milestone-name { color: var(--primary); }
.milestone-icon { font-size: var(--fs-lg); flex-shrink: 0; }
.milestone-info { flex: 1; min-width: 0; }
.milestone-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.milestone-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.milestone-days {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.milestone-days--today   { background: rgba(34,197,94,0.12);  color: var(--success); }
.milestone-days--soon    { background: var(--warning-dim);    color: var(--warning); }
.milestone-days--upcoming{ background: var(--surface-2);      color: var(--text-secondary); }
.milestone-empty { font-size: var(--fs-sm); color: var(--text-muted); padding: 16px 0; text-align: center; font-style: italic; }

/* Breakdown */
.breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.breakdown-label {
  font-size: var(--fs-xs);
  width: 90px;
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.breakdown-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 3px;
}

.breakdown-bar--billing { background: var(--info); }
.breakdown-bar--source  { background: #a78bfa; }

.breakdown-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.breakdown-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  padding: 2px 0 4px;
}

.breakdown-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  width: 24px;
  text-align: right;
}

.breakdown-divider { height: 2px; background: var(--border); margin: 12px 0; }

/* ============================================================
   INPUTS & FILTERS
   ============================================================ */
.search-input,
.filter-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 11px;
  font-size: var(--fs-sm);
  outline: none;
}

.search-input { width: 200px; }
.search-input::placeholder { color: var(--text-subtle); }
.search-input:focus,
.filter-select:focus { border-color: var(--primary); }

.filter-select option { background: var(--surface-2); color: var(--text); }

/* ── Clients view: frozen header + toolbar, only rows scroll ── */
#view-clients {
  height: 100%;
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view-clients .view-header {
  margin-bottom: 0;
  padding: 0 24px 16px;
}
#view-clients .table-wrapper {
  flex: 1;
  min-height: 0;
}
#view-clients .table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ── Clients view master search layout ─────────────────────── */
.clients-view-header {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.clients-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clients-header-row h1 { flex: 1; flex-shrink: 0; }
.clients-header-row .clients-search-wrap { flex: 0 1 400px; }
.clients-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.clients-search-wrap {
  position: relative;
}

/* ── Filter Panel (Linear-style dropdown) ────────────────────── */
.cl-filter-wrap { position: relative; }
.cl-filter-toggle { display: flex; align-items: center; gap: 5px; }
.cl-filter-toggle.cl-filter-active { border-color: var(--primary); color: var(--primary); }
.cl-filter-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 12px 14px;
  min-width: 240px;
}
.cl-filter-panel.hidden { display: none; }
.cl-fp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cl-fp-row:last-child { margin-bottom: 0; }
.cl-fp-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); width: 60px; flex-shrink: 0; }
.cl-fp-row .filter-select { flex: 1; }
.cl-fp-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ── Active Filter Pills ─────────────────────────────────────── */
.cl-active-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.cl-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; padding: 2px 8px 2px 6px;
  background: var(--primary-dim); color: var(--primary); border-radius: 20px;
  cursor: default;
}
.cl-filter-pill-x {
  cursor: pointer; opacity: 0.6; font-size: 12px; line-height: 1;
}
.cl-filter-pill-x:hover { opacity: 1; }
.clients-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  pointer-events: none;
}
.clients-master-search {
  width: 100%;
  height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0 36px 0 42px;
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.clients-master-search::placeholder { color: var(--text-subtle); }
.clients-master-search:focus {
  border-color: var(--primary);
}
.clients-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.1s, background 0.1s;
}
.clients-search-clear:hover { color: var(--text); background: var(--surface-3, var(--border)); }
.clients-search-clear.hidden { display: none; }

.filter-select.filter-active {
  border-color: var(--primary);
  color: var(--primary);
}
.filter-clear-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.filter-clear-btn:hover { color: var(--text); border-color: var(--text-muted); }
.filter-clear-btn.hidden { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active, .btn-secondary:active, .btn:active { transform: scale(0.98); }
.btn-primary:disabled,
.btn-primary:disabled:hover {
  background: var(--surface-2);
  background-image: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: default;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--surface-hover); }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.btn-danger:hover { background: #dc2626; }

.btn-danger-subtle {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger-subtle:hover { background: rgba(239, 68, 68, 0.2); }

.btn-edit {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.btn-edit:hover {
  background: var(--info-dim);
  color: var(--info);
  border-color: var(--info);
}

.btn-delete {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.btn-delete:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Multi-select checkbox column ────────────────────────────── */
.col-check {
  width: 40px;
  min-width: 40px;
  padding: 0 8px !important;
  text-align: center;
  vertical-align: middle;
}
.col-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary);
  border-radius: 3px;
  transition: opacity 0.15s;
}
/* Header checkbox always visible */
.clients-table thead .col-check input[type="checkbox"] { opacity: 1; }
/* Row checkboxes: hidden until hover or checked */
.client-row .col-check input[type="checkbox"] { opacity: 0; }
.client-row:hover .col-check input[type="checkbox"],
.client-row .col-check input[type="checkbox"]:checked { opacity: 1; }
/* Selected row highlight */
.client-row.row-selected { background: var(--primary-dim) !important; box-shadow: inset 3px 0 0 var(--primary) !important; }

/* ── Bulk action bar ─────────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  margin: 0;
  background: var(--primary-dim);
  border: 1px solid rgba(0,78,249,0.35);
  border-radius: var(--radius);
  animation: bulkBarIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.bulk-bar.hidden { display: none; }
@keyframes bulkBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bulk-count {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap;
}
.bulk-actions { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.bulk-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.bulk-btn:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--primary); }
.bulk-btn--danger:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
.bulk-clear {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
  margin-left: auto;
  white-space: nowrap;
}
.bulk-clear:hover { color: var(--danger); }

/* ── Bulk action modal ───────────────────────────────────────── */
.bulk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.bulk-modal-overlay.hidden { display: none; }
.bulk-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 420px;
  padding: 0;
  animation: modalIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.bulk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.bulk-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Tag delete warning modal */
.tag-delete-warning {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tag-delete-tag-preview {
  font-size: var(--fs-sm);
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-delete-client-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface-2);
}
.tag-delete-client-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}
.tag-delete-client-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tag-delete-client-name {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}

.bulk-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.bulk-form-group { display: flex; flex-direction: column; gap: 8px; }
.bulk-form-group label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bulk-tag-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-tag-preset { padding: 4px 10px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; border: 1px solid; transition: opacity 0.15s, box-shadow 0.15s; }
.bulk-tag-preset.selected { box-shadow: 0 0 0 2px var(--primary); }
.bulk-tag-remove-preset.selected { box-shadow: 0 0 0 2px var(--danger); opacity: 0.85; }
.bulk-tag-sections { display: flex; flex-direction: column; gap: 0; }
.bulk-tag-section { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.bulk-tag-section-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.bulk-tag-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ── Bulk primary button ─────────────────────────────────────── */
.bulk-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.bulk-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

/* ── Compose message modal ───────────────────────────────────── */
.compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.compose-overlay.hidden { display: none; }
.compose-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  animation: modalIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.compose-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.compose-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compose-mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.compose-mode-btn {
  flex: 1;
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.compose-mode-btn.active {
  background: var(--primary);
  color: #fff;
}
.compose-mode-btn:not(.active):hover {
  background: var(--surface-hover);
  color: var(--text);
}
.compose-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compose-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.compose-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 120px;
  overflow-y: auto;
}
.compose-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.compose-input {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.compose-input:focus { border-color: var(--primary); }
.compose-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  padding: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.compose-textarea:focus { border-color: var(--primary); }
.compose-info {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.compose-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}

/* Hover-reveal: hide action icons until the row is hovered */
.client-row .btn-edit,
.client-row .btn-delete,
.client-row .btn-action-icon    { opacity: 0; transition: opacity 0.15s, color 0.15s; }
.client-row:hover .btn-edit,
.client-row:hover .btn-delete,
.client-row:hover .btn-action-icon { opacity: 1; }

.btn-action-icon {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s;
}
.btn-action-icon:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.btn-action-icon--danger:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

.col-actions { display: flex; gap: 4px; }

.cell-link { color: var(--text-secondary); text-decoration: none; }
.cell-link:hover { color: var(--primary); text-decoration: underline; }

/* ── Quick Compose Modal ─────────────────────────────────────── */
.qc-modal { display: flex; flex-direction: column; gap: 10px; }
.qc-channel-row { display: flex; gap: 4px; }
.qc-channel-btn {
  padding: 5px 14px; font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.qc-channel-btn:hover { border-color: var(--primary); color: var(--text); }
.qc-channel-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.qc-subject-row { }
.qc-meta { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ── Client Hover Card ───────────────────────────────────────── */
.client-hover-card {
  position: fixed; z-index: 9999; width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 14px 16px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.client-hover-card.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.chc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chc-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: 600; color: #fff; flex-shrink: 0;
}
.chc-info { flex: 1; min-width: 0; }
.chc-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chc-stat { text-align: center; }
.chc-stat-val { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.chc-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.chc-meta { display: flex; gap: 8px; margin-top: 10px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Saved Views (Smart Lists) ────────────────────────────────── */
.saved-views-wrap { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.saved-views-select { min-width: 130px; }
.btn-save-view {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.btn-save-view:hover { border-color: var(--primary); color: var(--primary); }

/* ── Name column avatar ──────────────────────────────────────── */
.cl-name-wrap { display: flex; align-items: center; gap: 0; }
.cl-dot-slot { width: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cl-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; flex-shrink: 0;
  margin: 0 8px;
}

/* ── Summary strip ───────────────────────────────────────────── */
.cl-summary-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 24px; font-size: var(--fs-xs); color: var(--text-subtle);
}
.cl-strip-dot { opacity: 0.4; }
.cl-strip-active { color: var(--success); font-weight: 500; }

/* ── Column Resize ───────────────────────────────────────────── */
.clients-table th { position: relative; border-right: 1px solid rgba(255,255,255,0.12); }
.clients-table th:last-child { border-right: none; }
.clients-table th::after {
  content: ''; position: absolute; right: -3px; top: 0; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 2;
}

.btn-save-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrapper {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.table-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.clients-table thead tr {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.clients-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.clients-table td {
  padding: 11px 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.clients-table tbody tr                              { background: transparent; }
.clients-table tbody tr:nth-child(even)              { background: rgba(255,255,255,0.02); }
[data-theme="light"] .clients-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.clients-table tbody tr.client-row                   { cursor: pointer; }
.clients-table tbody tr:hover,
.clients-table tbody tr:nth-child(even):hover,
[data-theme="light"] .clients-table tbody tr:nth-child(even):hover { background: rgba(255,255,255,0.04); box-shadow: inset 3px 0 0 var(--primary); }
.clients-table tbody tr.row-cancelled                { opacity: 0.55; }

/* ── Clients summary strip ───────────────────────────────────── */
.clients-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0 2px 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 34px;
}
.cs-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.cs-pill-val {
  font-weight: 500;
  color: var(--text);
}
.cs-pill-val--ok     { color: var(--success); }
.cs-pill-val--warn   { color: var(--warning); }
.cs-pill-val--muted  { color: var(--text-muted); }
.cs-divider {
  color: var(--border);
  font-size: var(--fs-lg);
  line-height: 1;
  user-select: none;
}

/* ============================================================
   CHECK-INS VIEW & FORM BUILDER
   ============================================================ */

/* Sticky top bar: Check-Ins title + tab buttons */
.checkins-sticky-top {
  position: sticky;
  top: 0;
  z-index: 32;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Bleed to cover the .view side and top padding */
  margin: -28px -32px 0;
  padding: 28px 32px 0;
}
.checkins-sticky-top .view-header {
  margin-bottom: 16px;
}

.checkins-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
/* Remove double border when tabs are inside sticky top */
.checkins-sticky-top .checkins-tabs {
  margin-bottom: 0;
}
.checkins-tab-btn {
  padding: 10px 20px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.checkins-tab-btn:hover { color: var(--text); }
.checkins-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.checkins-tab-panel { display: none; }
.checkins-tab-panel.active { display: block; }

.checkins-forms-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* ── Forms list ────────────────────────────────────────────── */
.checkins-forms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.form-card-name {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.form-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}
.form-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.form-card-actions button {
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.form-card-actions button:hover { color: var(--text); border-color: var(--text-muted); }
.form-card-actions .btn-delete:hover { color: var(--error); border-color: var(--error); }

/* ── Form builder overlay ──────────────────────────────────── */
.form-builder {
  background: var(--surface);
  width: calc(100vw - 48px);
  min-width: 960px;
  margin: 12px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  min-height: calc(100vh - 32px);
}
.form-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light, var(--border));
  gap: 12px;
  flex-shrink: 0;
  background: var(--surface-2);
}
.fb-form-name-input {
  font-size: var(--fs-xl);
  font-weight: 500;
  background: none;
  border: none;
  color: var(--text);
  outline: none;
  flex: 1;
  min-width: 0;
}
.fb-form-name-input::placeholder { color: var(--text-subtle); }
.form-builder-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.fb-mode-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fb-mode-select {
  font-size: var(--fs-xs);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.fb-mode-select option { background: var(--surface-2); }
.fb-icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-icon-btn:hover { color: var(--text); border-color: var(--text-subtle); }
.fb-auto-advance-wrap { font-size: var(--fs-xs); white-space: nowrap; }
.fb-auto-advance-wrap.hidden { display: none; }
.fb-mode-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ── Two-panel layout: palette + canvas ───────────────────── */
.form-builder-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left palette ─────────────────────────────────────────── */
.fb-palette {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.fb-palette-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.fb-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fb-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  user-select: none;
  position: relative;
  min-height: 72px;
}
.fb-palette-item:hover {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fb-palette-item:active { cursor: grabbing; }
.fb-palette-item.fb-palette-dragging {
  opacity: 0.4;
  border-color: var(--primary);
}
.fb-palette-icon {
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--primary);
}
.fb-palette-svg {
  width: 28px;
  height: 28px;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.fb-palette-item:hover .fb-palette-svg {
  opacity: 1;
  color: var(--primary);
}
/* Palette tooltip — global element positioned via JS to avoid overflow clipping */
/* ═══════════════════════════════════════════════════════════
   AGREEMENT BUILDER
   ═══════════════════════════════════════════════════════════ */
.ag-builder {
  background: var(--surface);
  width: calc(100vw - 48px);
  min-width: 960px;
  margin: 12px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  min-height: calc(100vh - 32px);
}
.ag-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
  gap: 12px;
}
.ag-name-input {
  font-size: var(--fs-xl);
  font-weight: 500;
  background: none;
  border: none;
  color: var(--text);
  outline: none;
  flex: 1;
  min-width: 0;
}
.ag-name-input::placeholder { color: var(--text-subtle); }
.ag-builder-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Layout: sidebar + canvas */
.ag-builder-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar */
.ag-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.ag-sidebar-section { margin-bottom: 16px; }
.ag-sidebar-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ag-element-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ag-element-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  font-family: inherit;
}
.ag-element-btn:hover {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.ag-element-btn svg { color: var(--text); opacity: 0.7; }
.ag-element-btn:hover svg { opacity: 1; color: var(--primary); }
.ag-element-btn[draggable="true"] { cursor: grab; }
.ag-element-btn[draggable="true"]:active { cursor: grabbing; }
.ag-drop-target {
  outline: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 3%, #fff) !important;
}

/* Merge field button */
.ag-merge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ag-merge-btn:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* Merge field picker popup */
.ag-merge-picker {
  position: absolute;
  top: 40px;
  left: 0;
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100;
  padding: 8px;
}
.ag-merge-picker-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text); padding: 8px 8px 4px; }
.ag-merge-cat { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-subtle); padding: 10px 8px 4px; }
.ag-merge-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.ag-merge-item:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.ag-merge-key { font-size: var(--fs-xs); color: var(--text-subtle); font-family: monospace; }

/* Canvas */
.ag-canvas {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 60vh 24px;
}

/* Floating toolbar */
.ag-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.ag-tb-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 4px;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.ag-tb-btn:hover { background: var(--surface-2); color: var(--text); }
.ag-tb-sep { width: 1px; background: var(--border); margin: 0 4px; }
.ag-tb-select { font-size: var(--fs-xs); font-weight: 500; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; outline: none; margin-right: 4px; }
.ag-tb-select:focus { border-color: var(--accent); }
.ag-tb-font-select { min-width: 120px; }
.ag-tb-size-select { width: 76px; }
.ag-tb-lh-select { width: 60px; }

/* Document page */
.ag-document {
  width: 100%;
  max-width: 860px;
  min-height: 1056px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 48px 56px;
  position: relative;
  font-size: var(--fs-base);
  line-height: 1.7;
}
[data-theme="dark"] .ag-document { background: #1c1f2e; }

/* TipTap editor content */
.ag-prosemirror {
  outline: none;
  min-height: 400px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.7;
}
.ag-prosemirror h1 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  margin: 20px 0 12px;
  line-height: 1.3;
}
.ag-prosemirror h2 {
  font-size: var(--fs-xl);
  font-weight: 500;
  margin: 18px 0 10px;
  line-height: 1.3;
}
.ag-prosemirror h3 {
  font-size: var(--fs-md);
  font-weight: 500;
  margin: 14px 0 8px;
}
.ag-prosemirror p { margin: 0 0 10px; }
.ag-prosemirror ul, .ag-prosemirror ol { padding-left: 24px; margin: 0 0 10px; }
.ag-prosemirror li { margin: 4px 0; }
.ag-prosemirror hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.ag-prosemirror a { color: var(--primary); text-decoration: underline; }
.ag-prosemirror img { max-width: 100%; border-radius: 4px; }
.ag-prosemirror .is-editor-empty::before {
  content: attr(data-placeholder);
  color: var(--text-subtle);
  pointer-events: none;
  float: left;
  height: 0;
}

/* ── Block list + blocks ──────────────────────────────────── */
.ag-blocks-list { min-height: 200px; }
.ag-empty-hint { color: var(--text-subtle); text-align: center; padding: 60px 20px; font-size: var(--fs-sm); }
.ag-block {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color 0.12s, box-shadow 0.12s;
  cursor: default;
}
.ag-block:hover { border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.ag-block-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Block handle (6-dot grid on left) */
.ag-block-handle {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: var(--text-subtle);
  opacity: 0;
  transition: opacity 0.15s;
  padding: 4px;
}
.ag-block-handle:active { cursor: grabbing; }
.ag-block:hover .ag-block-handle,
.ag-block-selected .ag-block-handle { opacity: 1; }

/* Block action buttons (top-right) */
.ag-block-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 5;
}
.ag-block:hover .ag-block-actions,
.ag-block-selected .ag-block-actions { opacity: 1; }
.ag-block-actions button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 4px; color: var(--text-muted); cursor: pointer; padding: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.ag-block-actions button:hover { color: var(--primary); border-color: var(--primary); background: var(--surface); }
.ag-block-actions button:last-child:hover { color: var(--error); border-color: var(--error); }

/* Block content area */
.ag-block-content { min-height: 20px; }

/* TipTap editor inside blocks */
.ag-block-editor {
  outline: none;
  min-height: 24px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.7;
}
.ag-block-editor h1 { font-size: var(--fs-3xl); font-weight: 500; margin: 0; }
.ag-block-editor h2 { font-size: var(--fs-xl); font-weight: 500; margin: 0; }
.ag-block-editor h3 { font-size: var(--fs-md); font-weight: 500; margin: 0; }
.ag-block-editor p { margin: 0 0 10px; }
.ag-block-editor ul, .ag-block-editor ol { padding-left: 24px; margin: 0 0 10px; }
.ag-block-editor a { color: var(--primary); }
.ag-block-editor .is-editor-empty::before {
  content: attr(data-placeholder);
  color: var(--text-subtle);
  pointer-events: none;
  float: left;
  height: 0;
}

/* ── Field preview elements ──────────────────────────────── */
.ag-field-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.ag-fp-signature { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.ag-fp-initials { border-color: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); background: color-mix(in srgb, var(--error) 6%, transparent); }
.ag-fp-textfield { border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--text); background: color-mix(in srgb, var(--warning) 6%, transparent); }
.ag-fp-date { border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 6%, transparent); }
.ag-fp-checkbox { border-color: color-mix(in srgb, var(--text-muted) 30%, transparent); color: var(--text); background: color-mix(in srgb, var(--text-muted) 4%, transparent); }
.ag-fp-req { color: var(--error); font-size: var(--fs-lg); margin-left: auto; }
.ag-fp-ini-box {
  width: 28px; height: 28px; border: 2px solid var(--error);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 500; color: var(--error);
}
.ag-fp-input-mock {
  flex: 1; padding: 6px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: var(--fs-xs); color: var(--text-subtle); font-weight: 400;
}
.ag-fp-check-box {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-radius: 3px; flex-shrink: 0;
}
.ag-divider-line { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.ag-page-break {
  text-align: center; padding: 8px; color: var(--text-subtle);
  font-size: var(--fs-xs); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
}
.ag-image-preview { max-width: 100%; border-radius: 4px; }
.ag-image-placeholder {
  padding: 24px; text-align: center; color: var(--text-subtle); font-size: var(--fs-xs);
  border: 1px solid var(--border); border-radius: 4px; background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

/* ── SortableJS states for agreement blocks ──────────────── */
.ag-sort-ghost {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)) !important;
  border-radius: 2px;
}
.ag-sort-ghost * { visibility: hidden !important; }
.ag-sort-chosen { cursor: grabbing !important; }
.ag-sort-fallback {
  opacity: 0.92 !important;
  border: 1px solid var(--primary) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  background: var(--surface) !important;
  z-index: 100000 !important;
}

/* ── Floating fillable fields (Moveable.js overlay layer) ─ */
.ag-floating-field {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 2px solid;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: move;
  z-index: 20;
  user-select: none;
  box-sizing: border-box;
  overflow: visible;
  white-space: nowrap;
  transition: box-shadow 0.12s;
}
.ag-floating-field:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.ag-ff-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent), 0 2px 8px rgba(0,0,0,0.12) !important;
}
/* Type colors */
.ag-ff-signature { border-color: color-mix(in srgb, var(--primary) 50%, transparent); color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.ag-ff-initials { border-color: color-mix(in srgb, var(--error) 50%, transparent); color: var(--error); background: color-mix(in srgb, var(--error) 5%, transparent); }
.ag-ff-text_field { border-color: color-mix(in srgb, #f59e0b 50%, transparent); color: #92400e; background: color-mix(in srgb, #f59e0b 5%, transparent); }
.ag-ff-date_field { border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 5%, transparent); }
.ag-ff-checkbox { border-color: color-mix(in srgb, var(--text-muted) 40%, transparent); color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.ag-ff-icon { display: flex; align-items: center; flex-shrink: 0; }
.ag-ff-label { font-size: var(--fs-xs); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ag-ff-req { color: var(--error); font-size: var(--fs-base); margin-left: auto; line-height: 1; }

/* Signature/initials preview for alignment */
.ag-ff-preview-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; }
.ag-ff-sig-preview { width: 85%; height: auto; opacity: 0.25; }
.ag-ff-ini-preview { font-family: 'Dancing Script', 'Brush Script MT', cursive; font-size: var(--fs-4xl); font-weight: 500; opacity: 0.25; line-height: 1; text-align: center; width: 100%; }
.ag-ff-ini-preview-svg { width: 100%; height: 100%; opacity: 0.25; }
.ag-ff-date-preview { font-size: var(--fs-sm); font-weight: 500; opacity: 0.3; }
.ag-ff-check-preview { width: 18px; height: 18px; opacity: 0.3; }
.ag-ff-text-preview { font-size: var(--fs-xs); font-style: italic; opacity: 0.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
.ag-ff-preview-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Duplicate button on signature/initials fields */
.ag-ff-dup-btn { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; z-index: 5; padding: 0; }
.ag-floating-field:hover .ag-ff-dup-btn, .ag-ff-selected .ag-ff-dup-btn { opacity: 1; }
.ag-ff-dup-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Moveable.js overrides */
.moveable-control-box .moveable-line { background: var(--primary) !important; }
.moveable-control-box .moveable-control { background: var(--primary) !important; border-color: #fff !important; }
.moveable-control-box .moveable-direction { width: 10px !important; height: 10px !important; border-radius: 2px !important; }
/* Dark theme adjustments */
[data-theme="dark"] .ag-ff-signature { background: color-mix(in srgb, var(--primary) 8%, transparent); }
[data-theme="dark"] .ag-ff-initials { background: color-mix(in srgb, var(--error) 8%, transparent); }
[data-theme="dark"] .ag-ff-text_field { background: color-mix(in srgb, #f59e0b 8%, transparent); }
[data-theme="dark"] .ag-ff-date_field { background: color-mix(in srgb, var(--success) 8%, transparent); }
[data-theme="dark"] .ag-ff-checkbox { background: color-mix(in srgb, var(--text-muted) 8%, transparent); }

/* ── Properties panel ────────────────────────────────────── */
.ag-properties {
  width: 300px; flex-shrink: 0; border-left: 1px solid var(--border);
  overflow-y: auto; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  display: flex; flex-direction: column;
}
.ag-props-empty {
  display: flex; align-items: center; justify-content: center; flex: 1;
  padding: 40px 20px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm);
}
.ag-props-content { display: flex; flex-direction: column; flex: 1; }
.ag-props-content.hidden { display: none; }
.ag-props-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ag-props-title {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.ag-props-body { flex: 1; overflow-y: auto; padding: 16px; }

/* Color input in toolbar */
.ag-tb-color {
  width: 28px; height: 28px; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; padding: 0; background: none;
}

/* Fillable field badges (inline in editor) */
.ag-field-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: default;
  vertical-align: middle;
  line-height: 1;
  position: relative;
}
.ag-field-signature {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border: 1px dashed var(--primary);
}
.ag-field-initials {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
  border: 1px dashed var(--error);
}
.ag-field-date {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  border: 1px dashed var(--success);
}
.ag-field-text_field {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  border: 1px dashed var(--warning);
}
.ag-field-checkbox {
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
  border: 1px dashed var(--text-muted);
}
.ag-field-badge[data-required="true"]::after {
  content: '*';
  color: var(--error);
  font-size: var(--fs-base);
  position: absolute;
  top: -4px;
  right: -6px;
}

/* Templates list table */
.ag-templates-table { width: 100%; border-collapse: collapse; }
.ag-templates-table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.ag-template-row {
  cursor: pointer;
  transition: background 0.1s;
}
.ag-template-row:hover { background: var(--surface); }
.ag-template-row td { padding: 14px; border-bottom: 1px solid var(--border); }
.ag-template-name { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.ag-template-date { font-size: var(--fs-xs); color: var(--text-muted); }
.ag-template-actions { text-align: right; }
.ag-action-btn {
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 4px;
}
.ag-action-btn:hover { color: var(--text); border-color: var(--text-muted); }
.ag-action-test { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.ag-action-test:hover { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); }
.ag-action-delete:hover { color: var(--error); border-color: var(--error); }

/* ── Custom confirm dialog ─────────────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: confirmFadeIn 0.15s ease;
}
.confirm-overlay.hidden { display: none; }
@keyframes confirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: confirmSlideIn 0.15s ease;
}
@keyframes confirmSlideIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-body {
  padding: 24px 24px 16px;
}
.confirm-message {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}
.confirm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 20px;
  gap: 12px;
}
.confirm-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.confirm-cancel {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  border-radius: 6px;
}
.confirm-ok {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 6px;
}
.confirm-ok--danger {
  background: var(--error);
  border-color: var(--error);
}
.confirm-ok--danger:hover {
  background: color-mix(in srgb, var(--error) 85%, #000);
}

.fb-tooltip {
  position: fixed;
  background: #1a1d27;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #e4e6f0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.fb-tooltip.visible {
  opacity: 1;
}

/* ── Right canvas ─────────────────────────────────────────── */
.form-builder-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-height: 0;
  background: var(--surface);
}

/* ── Field cards in builder ────────────────────────────────── */
.fb-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}
.fb-field-card {
  display: block;
  padding: 16px 18px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.fb-field-card:hover:not(.fb-field-selected) {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
/* ── Canvas field card layout ─────────────────────────────── */
.fb-card-preview {
  padding: 0;
}
.fb-card-actions-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.fb-field-card:hover .fb-card-actions-bar,
.fb-field-card.fb-field-selected .fb-card-actions-bar {
  opacity: 1;
}
.fb-card-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fb-card-action svg { width: 14px; height: 14px; }
.fb-card-action:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.fb-card-action--delete:hover { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, var(--surface)); }

/* ── Canvas live preview elements ─────────────────────────── */
.fcp-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.fcp-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.fcp-help a { color: var(--primary); }
.fcp-help strong { color: var(--text); }
.fcp-input-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.fcp-number-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  width: 140px;
}
.fcp-textarea-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  min-height: 64px;
  resize: vertical;
  overflow: auto;
  cursor: text;
}
.fcp-select-mock {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fcp-chevron { color: var(--text-subtle); font-size: var(--fs-xs); }
.fcp-opts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fcp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.fcp-bubble .fcp-opt {
  border-radius: 12px;
  padding: 10px 16px;
  width: auto;
  display: inline-flex;
}
.fcp-bubble { display: flex; flex-direction: column; align-items: flex-start; }
.fcp-radio {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}
.fcp-check {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
}
.fcp-label-edit {
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
}
.fcp-label-edit::placeholder { color: var(--text-subtle); }
.fcp-label-edit:focus { border-bottom: 1px solid var(--primary); }
.fcp-section-edit {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  width: 100%;
  padding: 0 0 6px;
}
.fcp-section-edit::placeholder { color: var(--text-subtle); }
.fcp-section-edit:focus { border-bottom-color: var(--primary); }
.fcp-text-edit {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-family: inherit;
  outline: none;
  width: 100%;
  padding: 4px;
  min-height: 40px;
  resize: vertical;
  line-height: 1.5;
}
.fcp-text-edit::placeholder { color: var(--text-subtle); }
.fcp-text-edit:focus { border-color: var(--primary); border-radius: 4px; }
.fcp-opts-wrap { margin-top: 2px; }
.fcp-opt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.fcp-opt-row .fcp-opt { flex: 1; min-width: 0; }
.fcp-opt-drag {
  cursor: grab;
  color: var(--text-subtle);
  font-size: var(--fs-base);
  user-select: none;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1;
}
.fcp-opt-drag:active { cursor: grabbing; }
.fcp-opt-row:hover .fcp-opt-drag { opacity: 1; }
.fcp-opt-delete {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  cursor: pointer;
  padding: 5px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  line-height: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.fcp-opt-row:hover .fcp-opt-delete { opacity: 1; }
.fcp-opt-delete:hover { color: var(--error); border-color: var(--error); }
.fcp-opt-row.fcp-canvas-drag-over { outline: 1px dashed var(--primary); border-radius: 4px; }
.fcp-opt-row.fcp-canvas-dragging { opacity: 0.4; }
.fcp-add-opt {
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
  font-family: inherit;
}
.fcp-add-opt:hover { opacity: 0.8; }
.fcp-opt-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-family: inherit;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.fcp-opt-edit:focus {
  color: var(--text);
}
.fcp-opt-edit::placeholder { color: var(--text-subtle); }
.fcp-empty-opts {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-style: italic;
  padding: 4px 0;
}
.fcp-more {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  padding: 2px 0;
}
.fcp-scale-wrap { display: inline-block; }
.fcp-scale {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.fcp-scale-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.fcp-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: 3px;
}
.fcp-photo {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 80px;
  height: 50px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  justify-content: center;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.fcp-photo-icon { font-size: var(--fs-lg); }
.fcp-media-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}
.fcp-media-icon { color: var(--text-subtle); }
.fcp-media-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.fcp-media-hint { font-size: var(--fs-xs); color: var(--text-subtle); }
/* Calculation field preview */
.fcp-calc-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: 8px;
}
.fcp-calc-icon {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--primary);
  flex-shrink: 0;
}
.fcp-calc-label { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.fcp-calc-value { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.fcp-calc-hint { font-size: var(--fs-xs); color: var(--text-subtle); }

/* Signature field preview */
.fcp-sig-zone {
  padding: 20px 0 8px;
}
.fcp-sig-line {
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
}
.fcp-sig-label {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* Field width grid — half-width fields sit side by side */
.fb-fields-list.fb-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fb-fields-list.fb-grid-layout .fb-field-card[data-width="full"] {
  grid-column: 1 / -1;
}
.fb-fields-list.fb-grid-layout .fb-field-card[data-width="half"] {
  grid-column: span 1;
}

.fcp-video-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: 4px;
}
.fcp-section {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fcp-text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.fcp-text a { color: var(--primary); }
.fcp-text strong { color: var(--text); }

.fb-field-card.fb-field-display {
  border-style: dashed;
  opacity: 0.85;
}
/* ── SortableJS drag states (matches GHL pattern) ─────────── */
/* Ghost: the in-place placeholder shown where the item will land */
.fb-sort-ghost {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-2)) !important;
  border: 2px dashed color-mix(in srgb, var(--primary) 25%, var(--border)) !important;
  border-radius: 8px !important;
  min-height: 50px;
}
.fb-sort-ghost * { visibility: hidden !important; }
.fb-sort-ghost .fb-card-actions-bar { display: none !important; }

/* Chosen: the element being picked up (before drag starts) */
.fb-sort-chosen {
  cursor: grabbing !important;
}

/* Fallback: the floating clone that follows the cursor */
.fb-sort-fallback {
  opacity: 0.92 !important;
  border: 2px solid var(--primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
  background: var(--surface) !important;
  transform: rotate(1deg) scale(1.02);
  z-index: 100000 !important;
}
.fb-sort-fallback .fb-card-actions-bar { display: none !important; }
/* drag handle hidden — entire card is draggable */
.fb-field-type {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fb-field-label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-field-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fb-field-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.fb-badge-required { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.fb-badge-metric   { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.fb-badge-cond     { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.fb-field-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fb-field-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--fs-base);
  line-height: 1;
  border-radius: 4px;
}
.fb-field-actions button:hover { color: var(--text); background: var(--surface-2); }
.fb-field-actions .fb-btn-delete:hover { color: var(--error); }

/* ── Selected field card ──────────────────────────────────── */
.fb-field-card {
  cursor: grab;
  position: relative;
}
.fb-field-card:active { cursor: grabbing; }
.fb-field-card.fb-field-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

/* ── Right properties panel ──────────────────────────────── */
.fb-properties {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  display: flex;
  flex-direction: column;
}
.fb-props-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-subtle);
}
.fb-props-empty-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 12px;
  opacity: 0.4;
}
.fb-props-empty p {
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.fb-props-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fb-props-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fb-props-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fb-props-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

/* ── Inline field editor controls (matches CRM .form-group) ── */
.fe-group {
  margin-bottom: 18px;
}
.fe-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.fe-hint {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.fe-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.fe-input:focus { border-color: var(--primary); }
.fe-input::placeholder { color: var(--text-subtle); }
textarea.fe-input { resize: vertical; min-height: 72px; }
select.fe-input { cursor: pointer; }
select.fe-input option { background: var(--surface-2); }
.fe-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fe-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.fe-half { flex: 1; min-width: 0; }
.fe-divider {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-subtle);
  padding: 14px 0 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Box model spacing control (agreement builder) ─────────── */
.ag-box-model { user-select: none; }
.ag-box-outer { position: relative; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px; padding: 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ag-box-inner { position: relative; background: var(--surface); border: 1px dashed var(--border); border-radius: 4px; padding: 18px 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.ag-box-center { width: 36px; height: 18px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); }
.ag-box-mid-row { display: flex; align-items: center; gap: 4px; width: 100%; justify-content: center; }
.ag-box-label { position: absolute; top: 3px; left: 6px; font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-subtle); pointer-events: none; }
.ag-box-input { width: 42px; text-align: center; font-size: var(--fs-xs); font-weight: 500; padding: 2px 2px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--text-muted); outline: none; transition: border-color 0.15s, background 0.15s; }
.ag-box-input:hover { border-color: var(--border); background: var(--surface); }
.ag-box-input:focus { border-color: var(--accent); background: var(--surface); color: var(--text); }
.ag-box-top, .ag-box-bottom { display: block; margin: 0 auto; }
.ag-box-left, .ag-box-right { flex-shrink: 0; }

/* ── Style picker (Standard / Bubble) ─────────────────────── */
.fe-style-picker {
  display: flex;
  gap: 8px;
}
.fe-style-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.fe-style-btn:hover { border-color: var(--text-subtle); }
.fe-style-btn.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--text);
}

/* ── Interactive options list ─────────────────────────────── */
.fe-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.fe-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fe-option-drag {
  cursor: grab;
  color: var(--text-subtle);
  font-size: var(--fs-base);
  user-select: none;
  flex-shrink: 0;
  padding: 2px;
  line-height: 1;
}
.fe-option-drag:active { cursor: grabbing; }
.fe-option-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.fe-option-input:focus { border-color: var(--primary); }
.fe-option-input::placeholder { color: var(--text-subtle); }
.fe-option-delete {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.fe-option-delete:hover { color: var(--error); border-color: var(--error); }
.fe-option-delete svg { width: 16px; height: 16px; }
.fe-add-option-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  font-family: inherit;
  text-align: left;
  transition: opacity 0.15s;
}
.fe-add-option-btn:hover { opacity: 0.8; }
.fe-option-row.fe-option-dragging { opacity: 0.4; }
.fe-option-row.fe-option-drag-over .fe-option-input { border-color: var(--primary); }

.fe-actions {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.fe-save-btn {
  width: 100%;
  padding: 12px;
  font-size: var(--fs-base);
}

/* ── Form card mode badge ─────────────────────────────────── */
.form-card-mode-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
}

/* ── Checkbox styling fix (Item 8) ────────────────────────── */
.fe-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}
.fe-toggle-label {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.fe-checkbox-grid .form-group {
  display: flex;
  align-items: center;
}

/* ── Form Preview overlay ─────────────────────────────────── */
.form-preview-container {
  background: var(--bg);
  width: 100%;
  max-width: 680px;
  margin: 40px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.form-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.form-preview-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.form-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ── Classic preview ──────────────────────────────────────── */
.fp-classic {
  padding: 24px 28px 32px;
}
.fp-header {
  text-align: center;
  margin-bottom: 24px;
}
.fp-header h2 { font-size: var(--fs-2xl); font-weight: 500; margin-bottom: 4px; }
.fp-header p { font-size: var(--fs-xs); color: var(--text-muted); }
.fp-field {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.fp-label { font-size: var(--fs-base); font-weight: 500; margin-bottom: 4px; }
.fp-label .fp-req { color: var(--error); margin-left: 2px; }
.fp-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.fp-help a { color: var(--primary); text-decoration: underline; }
.fp-help strong { font-weight: 500; color: var(--text); }
.fp-help em { font-style: italic; }
.fp-input, .fp-textarea, .fp-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
}
.fp-textarea { resize: vertical; min-height: 70px; }
.fp-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-scale-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface-2);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
}
.fp-scale-labels { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px; }
.fp-multi { display: flex; flex-direction: column; gap: 6px; }
.fp-multi-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.fp-multi-check {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-radius: 3px; flex-shrink: 0;
}
.fp-radio-dot {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-bubble { align-items: flex-start; }
.fp-bubble .fp-multi-opt { border-radius: 12px; padding: 10px 16px; width: auto; display: inline-flex; }
.fp-photo-grid { display: flex; gap: 8px; }
.fp-photo-add {
  width: 80px; height: 80px; border: 2px dashed var(--border);
  border-radius: 6px; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); font-size: var(--fs-2xl);
}
.fp-section-header {
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.fp-section-header h3 {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
}
.fp-text-element {
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.fp-text-element a { color: var(--primary); text-decoration: underline; }
.fp-text-element strong { font-weight: 500; color: var(--text); }
.fp-submit {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-md);
  font-weight: 500;
  margin-top: 8px;
  opacity: 0.5;
}

/* ── Focused preview ──────────────────────────────────────── */
.fp-focused {
  padding: 24px 28px 32px;
  min-height: 400px;
  position: relative;
}
.fp-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 32px;
  overflow: hidden;
}
.fp-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.fp-slide {
  display: none;
}
.fp-slide.fp-slide-active {
  display: block;
  animation: fpSlideIn 0.3s ease;
}
@keyframes fpSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fp-focused-q-num {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-bottom: 10px;
}
.fp-focused-q-title {
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 6px;
}
.fp-focused-q-help {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.fp-focused-q-help a { color: var(--primary); text-decoration: underline; }
.fp-focused-q-help strong { font-weight: 500; color: var(--text); }
.fp-focused-section {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.fp-focused-text {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.6;
}
.fp-focused-text a { color: var(--primary); }
.fp-focused-text strong { color: var(--text); }
.fp-slide-nav {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.fp-nav-btn {
  padding: 10px 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fp-nav-btn:hover { border-color: var(--primary); color: var(--text); }
.fp-nav-next { background: var(--primary); border-color: var(--primary); color: #fff; }
.fp-nav-next:hover { opacity: 0.9; }
.fp-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Empty forms state ─────────────────────────────────────── */
.checkins-forms-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  grid-column: 1 / -1;
}
.checkins-forms-empty p { font-size: var(--fs-base); margin-bottom: 16px; }

/* ── Check-in review ───────────────────────────────────────── */
/* ── Pending tab count bubble ────────────────────────────────── */
.ci-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  background: var(--primary);
  color: #fff;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

/* ── Amber nav badge for check-ins ──────────────────────────── */
.nav-badge--amber {
  background: #f59e0b;
}

/* ── Pending cards ───────────────────────────────────────────── */
.cr-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cr-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}
.cr-card:active { transform: translateY(0); }
.cr-card--warn  { border-left: 3px solid #f59e0b; }
.cr-card--overdue { border-left: 3px solid #ef4444; }

.cr-card-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-size: var(--fs-lg);
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.cr-card-avatar--sm {
  width: 32px; height: 32px;
  font-size: var(--fs-sm);
}
.cr-card-body { flex: 1; min-width: 0; }
.cr-card-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-card-week {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.cr-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cr-card-wait {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.cr-card--warn  .cr-card-wait { color: #f59e0b; font-weight: 500; }
.cr-card--overdue .cr-card-wait { color: #ef4444; font-weight: 500; }

/* Returned + snoozed card variants */
.cr-card--returned { border-left: 3px solid #f59e0b; opacity: 0.85; }
.cr-card--snoozed { border-left: 3px solid var(--text-subtle); opacity: 0.6; }
.cr-card-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 500; padding: 2px 7px;
  border-radius: 99px; margin-left: 6px; vertical-align: middle;
}
.cr-card-badge--returned { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #92400e; }
.cr-card-badge--snoozed { background: color-mix(in srgb, var(--text-subtle) 12%, transparent); color: var(--text-subtle); }

/* Section labels in pending list */
.cr-section-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); padding: 12px 0 6px;
}
.cr-section-returned { color: #92400e; }

/* Snoozed section (collapsed) */
.cr-snoozed-section { margin-top: 12px; }
.cr-snoozed-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle);
  background: none; border: none; cursor: pointer; padding: 8px 0;
  font-family: inherit;
}
.cr-snoozed-toggle:hover { color: var(--text-muted); }
.cr-snoozed-chevron { transition: transform 0.2s; }
.cr-snoozed-section.expanded .cr-snoozed-chevron { transform: rotate(180deg); }
.cr-snoozed-list { display: none; }
.cr-snoozed-section.expanded .cr-snoozed-list { display: block; }

/* Snooze popover */
.cr-snooze-popover {
  position: absolute; top: 100%; right: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 4px; min-width: 180px; margin-top: 4px;
}
.cr-snooze-popover.hidden { display: none; }
.cr-snooze-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; font-size: var(--fs-sm); font-weight: 500;
  background: none; border: none; cursor: pointer;
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.cr-snooze-opt:hover { background: var(--surface-2); }

/* Template picker (in review editor) */
.cr-editor-notes-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cr-template-picker-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.cr-template-picker-btn:hover { color: var(--primary); border-color: var(--primary); }
.cr-template-picker {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 4px; margin-bottom: 8px; max-height: 200px; overflow-y: auto;
}
.cr-template-picker.hidden { display: none; }
.cr-tmpl-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; font-size: var(--fs-sm); font-weight: 500;
  background: none; border: none; cursor: pointer;
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.cr-tmpl-item:hover { background: var(--surface-2); }
.cr-tmpl-empty {
  padding: 12px; font-size: var(--fs-xs); color: var(--text-subtle); text-align: center;
}

/* Return to client modal chips */
.cr-return-chip {
  font-size: var(--fs-xs); font-weight: 500; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; font-family: inherit;
}
.cr-return-chip:hover { border-color: var(--primary); color: var(--primary); }

/* Response template items in settings */
.s-rt-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.s-rt-item:last-child { border-bottom: none; }
.s-rt-item-body { flex: 1; min-width: 0; }
.s-rt-item-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.s-rt-item-text { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; white-space: pre-wrap; }
.s-rt-delete {
  background: none; border: none; cursor: pointer; color: var(--text-subtle);
  padding: 4px; border-radius: 4px; flex-shrink: 0;
}
.s-rt-delete:hover { color: var(--error); }
.cr-card-arrow { color: var(--text-muted); flex-shrink: 0; }

/* ── Empty state ────────────────────────────────────────────── */
.cr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  text-align: center;
  gap: 10px;
}
.cr-empty-icon {
  color: var(--success);
  margin-bottom: 4px;
  opacity: 0.7;
}
.cr-empty-title {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
}
.cr-empty-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 340px;
}

/* ── History tab ────────────────────────────────────────────── */
.cr-history-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cr-history-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cr-history-search-wrap svg {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}
.cr-history-search-input {
  width: 280px;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 0.15s;
}
.cr-history-search-input:focus { outline: none; border-color: var(--primary); }
.cr-history-search-input::placeholder { color: var(--text-muted); }

.cr-history-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cr-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.cr-history-row:last-child { border-bottom: none; }
.cr-history-row:hover { background: var(--surface-2); }
.cr-history-info { flex: 1; min-width: 0; }
.cr-history-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-history-week {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.cr-history-tags {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.cr-htag {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-muted);
}
.cr-htag--video   { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.cr-htag--notes   { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #d97706; }
.cr-htag--actions { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.cr-history-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
}

/* ── Legacy .cr-row / .cr-badge (kept for any other usage) ──── */
.cr-section-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-section-count {
  font-size: var(--fs-xs);
  background: var(--primary);
  color: #fff;
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 500;
}
.cr-list { display: flex; flex-direction: column; gap: 4px; }
.cr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.cr-row:hover { border-color: var(--primary); }
.cr-row-name { font-weight: 500; font-size: var(--fs-sm); min-width: 140px; }
.cr-row-week { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.cr-row-time { font-size: var(--fs-xs); color: var(--text-subtle); }
.cr-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.cr-badge-pending { color: var(--warning, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); }
.cr-badge-reviewed { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }

/* ── Focus Mode — entered during screen recording ─────────────
   Hides sidebar, header, drawer so check-in data fills the screen */
body.cr-focus-mode-active .sidebar,
body.cr-focus-mode-active .sidebar-edge-toggle {
  display: none !important;
}
.cr-focus-mode .cr-view-header   { display: none; }
.cr-focus-mode .cr-response-drawer,
.cr-focus-mode .cr-drawer-backdrop { display: none !important; }

/* ── Focus Mode — controls now live on the camera bubble ──────
   The focus pill is removed; only the action items overlay remains. */

/* ── Single check-in view ─────────────────────────────────── */

/* Two-column layout for completed (responded) check-ins */
.cr-view--completed { /* natural flow — .views-container is the scroll parent */ }

/* Check-in detail rows appended into .checkins-sticky-top */
.cr-checkin-frozen-ext {
  border-top: 1px solid var(--border);
  /* bleed to match sticky top's padding */
  margin-left: -32px;
  margin-right: -32px;
  padding: 12px 32px 0;
}

/* Page header row inside frozen extension */
.cr-view-header--completed {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: none;
  flex-wrap: nowrap;
  gap: 12px;
}
.cr-view-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--success);
  white-space: nowrap;
  margin-left: auto;
}
.cr-view-header--completed .cr-view-actions { margin-left: 0; }

/* Column label bar inside frozen extension */
.cr-completed-col-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  margin-left: -32px;
  margin-right: -32px;
}
.cr-completed-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 32px;
}
.cr-completed-col-header--right {
  border-left: 1px solid var(--border);
}
.cr-col-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.cr-col-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Two-column content — natural height, scrolls with the page */
.cr-completed-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  /* bleed to cover .view side padding so column border aligns */
  margin-left: -32px;
  margin-right: -32px;
}
.cr-submission-col {
  border-left: 1px solid var(--border);
  padding: 20px 32px 60px;
  background: var(--surface);
}
.cr-submission-trends {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cr-submission-trends > .cr-drawer-section-label { display: none; }

/* Response column */
.cr-response-col {
  padding: 20px 32px 60px;
  background: var(--surface);
}
.cr-response-col .cr-view-meta-bar { display: none; }
.cr-response-col .cr-view-footer   { display: none; }
.cr-response-col .cr-response-video-section { margin-bottom: 0; }
.cr-response-col .cr-response-notes-section,
.cr-response-col .cr-response-focus-section,
.cr-response-col .cr-response-insight-section {
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (max-width: 900px) {
  .cr-view-header--completed { flex-wrap: wrap; }
  .cr-view-header-status { margin-left: 0; order: 3; flex-basis: 100%; }
  .cr-view-header--completed .cr-view-actions { margin-left: auto; }
}
@media (max-width: 768px) {
  .checkins-sticky-top  { margin: -28px -20px 0; padding: 28px 20px 0; }
  .cr-checkin-frozen-ext { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .cr-completed-col-headers { grid-template-columns: 1fr; margin-left: -20px; margin-right: -20px; }
  .cr-completed-col-header--right { border-left: none; border-top: 1px solid var(--border); }
  .cr-completed-layout { grid-template-columns: 1fr; margin-left: -20px; margin-right: -20px; }
  .cr-submission-col   { border-left: none; border-top: 1px solid var(--border); padding: 20px 20px 40px; }
  .cr-response-col     { padding: 20px 20px 32px; }
}

.cr-view-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cr-view-title h2 { font-size: var(--fs-2xl); font-weight: 500; }
.cr-view-week { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.cr-view-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cr-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  font-size: var(--fs-xs);
}
.cr-delete-btn:hover {
  color: var(--error, #ef4444) !important;
  border-color: var(--error, #ef4444) !important;
  background: color-mix(in srgb, var(--error, #ef4444) 8%, transparent) !important;
}

/* ── Check-in content grid ─────────────────────────── */
.cr-checkins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  max-width: 50%;
  margin: 0 auto;
  /* Leave room for the fixed drawer on the right when it's open */
  transition: padding-right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cr-checkins-grid.cr-grid-split {
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
}
.cr-checkins-grid.cr-grid-merged {
  max-width: 75%;
}
@media (max-width: 900px) {
  .cr-checkins-grid.cr-grid-split { grid-template-columns: 1fr; }
}

/* Check-in panel (previous + current) */
.cr-checkin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cr-panel-label-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cr-panel-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cr-panel-label--prev { color: var(--text-subtle); }
.cr-panel-meta {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-left: auto;
}

/* ── Compare selector ─────────────────────────────── */
.cr-compare-wrap { position: relative; }
.cr-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.cr-compare-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--text);
}
.cr-compare-btn--active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}
.cr-compare-btn--disabled { opacity: 0.45; cursor: not-allowed; }
.cr-compare-chevron { transition: transform 0.15s; }
.cr-compare-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  z-index: 800;
  overflow: hidden;
  padding: 4px 0;
}
.cr-compare-dd-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 8px 14px 4px;
}
.cr-compare-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
.cr-compare-option:hover { background: var(--surface-hover); }
.cr-compare-option--clear { border-bottom: 1px solid var(--border); }
.cr-compare-option-week {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.cr-compare-option-age {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ── Respond button ────────────────────────────────── */
.cr-respond-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ── Response drawer (slides in from right) ──────── */
.cr-response-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: calc(100vw - 48px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 32px rgba(0,0,0,0.22);
  z-index: 700;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cr-response-drawer.open { transform: translateX(0); }

.cr-drawer-bar {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.cr-drawer-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  flex: 1;
}
.cr-drawer-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.cr-drawer-close:hover { color: var(--text); background: var(--surface-hover); }

.cr-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* ── Drawer view (responded state) ─────────────────── */
.cr-drawer-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Meta bar */
.cr-view-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cr-view-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  flex-wrap: wrap;
}
.cr-view-meta-date {
  color: var(--success);
}
.cr-edit-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.cr-edit-inline-btn:hover {
  color: var(--text);
  border-color: var(--border-light);
}

/* Video section */
.cr-response-video-section {
  margin-bottom: 18px;
}

/* Notes section */
.cr-response-notes-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cr-response-notes-text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Focus points section */
.cr-response-focus-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cr-response-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 10px;
}
.cr-response-focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: focus-counter;
}
.cr-response-focus-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
  counter-increment: focus-counter;
}
.cr-response-focus-list li::before {
  content: counter(focus-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 1px;
}

/* AI insight section */
.cr-response-insight-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cr-response-insight-section .cr-ai-insight-section { margin: 0; }

/* Collapsible sections (photos, trends) */
.cr-response-collapse {
  border-top: 1px solid var(--border);
}
.cr-response-collapse-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  user-select: none;
  outline: none;
}
.cr-response-collapse-summary::-webkit-details-marker { display: none; }
.cr-response-collapse-summary::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-subtle);
  border-bottom: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
  margin-left: auto;
  margin-right: 2px;
  transition: transform 0.2s;
}
details[open] .cr-response-collapse-summary::after {
  transform: rotate(-135deg);
}
.cr-response-collapse-body {
  padding-bottom: 14px;
}
.cr-response-collapse-body .cr-drawer-section-label { display: none; }

/* Footer */
.cr-view-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Legacy — kept for editor use */
.cr-drawer-responded-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* View tracking status badges */
.cr-view-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
}
.cr-view-status--none {
  color: var(--text-muted);
  background: var(--surface-alt);
}
.cr-view-status--opened {
  color: #eab308;
  background: rgba(234,179,8,0.1);
}
.cr-view-status--played {
  color: #3b82f6;
  background: rgba(59,130,246,0.1);
}
.cr-view-status--partial {
  color: #3b82f6;
  background: rgba(59,130,246,0.1);
}
.cr-view-status--full {
  color: var(--success);
  background: rgba(34,197,94,0.1);
}
.cr-view-progress-bar {
  display: inline-block;
  width: 48px;
  height: 4px;
  background: rgba(59,130,246,0.2);
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.cr-view-progress-fill {
  display: block;
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s;
}
/* Transcript / summary */
.cr-transcript-block {
  margin-top: 10px;
  margin-bottom: 4px;
}
.cr-transcript-summary {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 8px;
}
.cr-transcript-toggle { font-size: var(--fs-xs); }
.cr-transcript-toggle summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  user-select: none;
  outline: none;
  transition: color 0.15s;
}
.cr-transcript-toggle summary::-webkit-details-marker { display: none; }
.cr-transcript-toggle summary::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-right: 1px;
}
.cr-transcript-toggle[open] summary::before { transform: rotate(45deg); }
.cr-transcript-toggle summary:hover { color: var(--text-muted); }
.cr-transcript-text {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-alt);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}
.cr-transcript-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cr-drawer-view-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ── Drawer editor ──────────────────────────────────── */
.cr-drawer-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cr-drawer-video-section {}
.cr-drawer-notes-section {}
.cr-drawer-editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Backdrop ───────────────────────────────────────── */
.cr-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.30);
  z-index: 699;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ── Recorder countdown overlay ─────────────────────── */
.vr-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  pointer-events: none;
}
.vr-countdown-num {
  font-size: 130px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 48px rgba(0,0,0,0.5);
  line-height: 1;
  animation: vr-cd-pop 0.9s ease forwards;
}
@keyframes vr-cd-pop {
  0%   { transform: scale(1.5); opacity: 0; }
  20%  { transform: scale(1.0); opacity: 1; }
  75%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

/* Two-column layout */
.cr-layout {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .cr-layout { grid-template-columns: 1fr; }
}

/* Left column: client check-in */
.cr-col-checkin {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* When compare is active, split the left column */
.cr-col-checkin.cr-col-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cr-compare-slot.hidden { display: none; }

/* Shared card shell */
.cr-col-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* Column header (shared left + right) */
.cr-col-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cr-col-label-text {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cr-col-meta {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-left: auto;
}

/* Check-in response fields */
.cr-responses { display: flex; flex-direction: column; }
.cr-response-row {
  display: flex; flex-direction: row; align-items: baseline;
  justify-content: space-between; gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.cr-response-row:last-child { border-bottom: none; }
.cr-response-row:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.cr-response-label-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
  max-width: 50%;
}
.cr-response-label-text[data-tip] {
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
  display: inline-block;
  position: relative;
}
.cr-response-label-text[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cr-response-value { font-size: var(--fs-base); font-weight: 500; line-height: 1.5; text-align: right; flex: 1; color: var(--text); }
.cr-val-text { white-space: pre-wrap; color: var(--text); }
.cr-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  padding: 3px 9px;
  border-radius: 4px;
  margin: 2px 4px 2px 0;
}

/* Scale display */
.cr-scale-display { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.cr-scale-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.cr-scale-dot.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Photos */
.cr-photos-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cr-photo-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.cr-photo-thumb:hover { border-color: var(--primary); }

/* ── AI Insight section ───────────────────────────────────── */
.cr-ai-insight-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cr-insight-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 11px 16px;
  background: color-mix(in srgb, #9f67ff 6%, var(--surface-2));
  border: 1.5px dashed color-mix(in srgb, #9f67ff 40%, var(--border));
  border-radius: 8px;
  color: #9f67ff;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.cr-insight-btn:hover {
  background: color-mix(in srgb, #9f67ff 12%, var(--surface-2));
  border-color: #9f67ff;
}
.cr-insight-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: 8px 0;
}
.cr-insight-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: #9f67ff;
  border-radius: 50%;
  animation: cr-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-insight-block {
  background: color-mix(in srgb, #9f67ff 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, #9f67ff 25%, var(--border));
  border-radius: 8px;
  padding: 14px 16px;
}
.cr-insight-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9f67ff;
  margin-bottom: 10px;
}
.cr-insight-text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}
.cr-insight-regen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}
.cr-insight-regen:hover { color: #9f67ff; }

/* AI-populated action item fields */
.cr-action-ai-filled {
  border-color: rgba(99, 102, 241, 0.5) !important;
  background: rgba(99, 102, 241, 0.04) !important;
}
.cr-action-ai-filled:focus {
  border-color: var(--primary) !important;
  background: var(--surface-2) !important;
}

/* ── Drawer section divider ──────────────────────────────── */
.cr-drawer-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cr-drawer-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cr-drawer-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Drawer: Progress Photos ─────────────────────────────── */
.cr-drawer-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cr-drawer-photo-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.cr-drawer-photo-item:hover { border-color: var(--primary); }
.cr-drawer-photo-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* Compare mode: two labeled columns */
.cr-drawer-photos-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cr-drawer-photos-col-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 6px;
  text-align: center;
}
.cr-drawer-photos-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-drawer-photo-placeholder {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  border: 1.5px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* ── Photo Lightbox ──────────────────────────────────────── */
.cr-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cr-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}
.cr-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: var(--fs-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cr-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.cr-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: var(--fs-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cr-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.cr-lightbox-nav--prev { left: 16px; }
.cr-lightbox-nav--next { right: 16px; }

/* ── Drawer: Data Trends ─────────────────────────────────── */
.cr-drawer-metric-row {
  margin-bottom: 12px;
}
.cr-drawer-metric-row:last-child { margin-bottom: 0; }
.cr-drawer-metric-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cr-drawer-metric-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
}
.cr-drawer-metric-value {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cr-drawer-metric-delta {
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-left: 4px;
}
.cr-drawer-metric-delta--up   { color: var(--success); }
.cr-drawer-metric-delta--down { color: var(--danger); }
.cr-drawer-metric-delta--flat { color: var(--text-subtle); }
.cr-drawer-trend-wrap {
  height: 48px;
  position: relative;
}
.cr-drawer-trend-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Check-In Analytics Panel ────────────────────────────── */
.cr-analytics-loading {
  text-align: center; padding: 20px; color: var(--text-muted);
  font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center; gap: 8px;
}
#cr-analytics-weight-chart { width: 100% !important; }

/* Delta badges (used on form fields and analytics rows) */
.cr-delta { font-size: var(--fs-xs); font-weight: 500; margin-left: 4px; }
.cr-delta--up { color: var(--success); }
.cr-delta--down { color: var(--danger); }

/* Colorblind overrides for deltas */

/* Metric field visual hierarchy — same as regular values */
.cr-response-value--metric { font-size: var(--fs-base); font-weight: 500; }

/* Compliance score — same as regular values */
.cr-compliance-score { font-size: var(--fs-base); font-weight: 500; }

/* Prior week context text */
.cr-analytics-prior { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-left: 4px; }

/* Flags / alerts */
.cr-flag {
  padding: 8px 12px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 500;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.cr-flag::before { content: ''; width: 6px; height: 6px; border-radius: 3px; flex-shrink: 0; }
.cr-flag--danger { background: var(--danger-dim); color: var(--danger); }
.cr-flag--danger::before { background: var(--danger); }
.cr-flag--warn { background: rgba(245,158,11,0.1); color: var(--warning); }
.cr-flag--warn::before { background: var(--warning); }

/* Compact scale display */
.cr-scale-compact { display: inline-flex; align-items: center; gap: 6px; }
.cr-scale-num { font-size: var(--fs-md); font-weight: 500; color: var(--primary); }
.cr-scale-bar { width: 80px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.cr-scale-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s; }
.cr-scale-max { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }

/* Caution icon for single data point */
.cr-caution-icon { vertical-align: -2px; margin-right: 4px; }

/* Weight source label (e.g. "3-day avg") */
.cr-weight-source { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-top: 1px; }

/* Clickable analytics rows */
.cr-response-row--clickable { cursor: pointer; }
.cr-response-row--clickable:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.cr-drill-icon { opacity: 0.7; vertical-align: -1px; margin-left: 3px; transition: opacity 0.15s; }
.cr-response-row--clickable:hover .cr-drill-icon { opacity: 1; }

/* Drill-down modal */
.cr-drilldown-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.cr-drilldown-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); width: 540px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.cr-drilldown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.cr-drilldown-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.cr-drilldown-close {
  background: none; border: none; font-size: var(--fs-2xl); color: var(--text-muted);
  cursor: pointer; padding: 0; line-height: 1;
}
.cr-drilldown-close:hover { color: var(--text); }
.cr-drilldown-chart { padding: 20px 24px 24px; }
.cr-drill-stats {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
}
.cr-drill-stat {
  flex: 1; text-align: center; padding: 12px 8px;
  border-right: 1px solid var(--border);
}
.cr-drill-stat:last-child { border-right: none; }
.cr-drill-stat-val { display: block; font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.cr-drill-stat-label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Drill-down list (workouts/cardio) */
.cr-drill-list { padding: 8px 0; }
.cr-drill-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.cr-drill-item:last-child { border-bottom: none; }
.cr-drill-item-icon { flex-shrink: 0; display: flex; }
.cr-drill-item-title { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.cr-drill-item--missed .cr-drill-item-title { color: var(--danger); }
.cr-drill-item-duration { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.cr-drill-item-date { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.cr-drill-empty { padding: 20px 18px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* Drill-down habit grid */
.cr-drill-grid-wrap { padding: 14px 18px; overflow-x: auto; }
.cr-drill-grid { width: 100%; border-collapse: collapse; }
.cr-drill-grid th {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase;
  padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border);
}
.cr-drill-grid td { padding: 8px; text-align: center; border-bottom: 1px solid var(--border); }
.cr-drill-grid tr:last-child td { border-bottom: none; }
.cr-drill-grid-habit {
  text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  white-space: nowrap; padding-right: 12px;
}
.cr-drill-grid-check, .cr-drill-grid-miss { display: inline-flex; }
.cr-drill-grid-na { color: var(--border); font-size: var(--fs-xs); }

/* ── Merged comparison table ─────────────────────────────── */
.cr-merged-table { display: flex; flex-direction: column; }
.cr-merged-header-row {
  display: grid; grid-template-columns: 40% 30% 30%;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}
.cr-merged-header-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.cr-merged-header-label:not(:first-child) { text-align: right; }
.cr-merged-row {
  display: grid; grid-template-columns: 40% 30% 30%;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.cr-merged-row:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.cr-merged-row:last-child { border-bottom: none; }
.cr-merged-row--clickable { cursor: pointer; }
.cr-merged-label {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
}
.cr-merged-val {
  font-size: var(--fs-base); font-weight: 500; color: var(--text); text-align: right; white-space: nowrap;
}
.cr-merged-val .cr-delta { margin-right: 6px; }
.cr-merged-val--prev { color: var(--text-muted); }
.cr-merged-val--empty { color: var(--border); font-weight: 400; }
.cr-merged-category {
  grid-column: 1 / -1;
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text);
  padding: 14px 14px 6px; margin-top: 6px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  border-top: 2px solid var(--border); border-bottom: 1px solid var(--border);
}
.cr-merged-category:first-of-type { margin-top: 0; border-top: none; }
.cr-merged-header-row + .cr-merged-category { margin-top: 0; border-top: none; }
.cr-merged-row:has(+ .cr-merged-category) { border-bottom: none; }

/* Photos comparison row */
.cr-merged-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 14px; border-top: 1px solid var(--border); margin-top: 4px;
}
.cr-merged-photos-col-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px;
}
.cr-merged-photos-grid { display: flex; gap: 8px; flex-wrap: wrap; }

/* Weight chart hover dots */
.cr-weight-chart-wrap { position: relative; }
.cr-weight-dot {
  position: absolute; width: 16px; height: 16px;
  transform: translate(-50%, -50%); cursor: pointer;
  border-radius: 50%; z-index: 2;
}
.cr-weight-dot[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--text); color: var(--bg);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.3;
  padding: 5px 9px; border-radius: 4px;
  z-index: 100; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cr-weight-dot:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }

/* Category group headers */
.cr-category-header {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  padding: 14px 14px 6px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cr-responses--grouped .cr-category-header:first-child { margin-top: 0; border-top: none; }
.cr-responses--grouped .cr-response-row:has(+ .cr-category-header) { border-bottom: none; }
.cr-responses--grouped .cr-response-row:last-child { border-bottom: none; }

/* Sticky badges (injected into existing sticky tab area) */
.cr-sticky-badges {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 12px;
}
.cr-sticky-badge {
  font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px;
  border-radius: 6px; background: var(--surface); border: 1px solid var(--border);
  white-space: nowrap;
}
.cr-sticky-badge--score { font-size: var(--fs-xs); font-weight: 500; }

/* Analytics: Quick Plan Edits */
.cr-analytics-edits { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 4px; }
.cr-analytics-edits-summary {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  cursor: pointer; padding: 8px 0; letter-spacing: 0.5px; user-select: none;
}
.cr-analytics-edits-summary:hover { color: var(--text); }
.cr-analytics-edits-body { padding: 8px 0 4px; }
.cr-edit-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.cr-edit-label {
  width: 100px; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
}
.cr-edit-input {
  flex: 1; min-width: 80px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text);
  font-size: var(--fs-xs); font-weight: 500;
}
.cr-edit-input:focus { border-color: var(--primary); outline: none; }
.cr-edit-save-btn {
  padding: 5px 12px; border-radius: 6px; border: none;
  background: var(--primary); color: #fff; font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.cr-edit-save-btn:hover { opacity: 0.9; }

/* ── Drawer: Quick Action Items ──────────────────────────── */
.cr-action-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cr-action-item-row:last-child { margin-bottom: 0; }
.cr-action-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cr-action-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 0.15s;
}
.cr-action-input::placeholder { color: var(--text-subtle); }
.cr-action-input:focus { outline: none; border-color: var(--primary); }
/* Saved view */
.cr-action-items-view {
  background: color-mix(in srgb, var(--success) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border));
  border-radius: 8px;
  padding: 12px 14px;
}
.cr-action-items-view-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--success);
  margin-bottom: 8px;
}
.cr-action-item-view {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.cr-action-item-view:last-child { margin-bottom: 0; }

/* ── Action items overlay during recording ──────────────── */
.vr-focus-actions {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9600;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 14px 22px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width: 320px;
  max-width: 520px;
  width: max-content;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  text-align: center;
}
.vr-focus-actions-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}
.vr-focus-action-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
  margin-bottom: 6px;
}
.vr-focus-action-item:last-child { margin-bottom: 0; }
.vr-focus-action-num {
  font-weight: 500;
  color: var(--primary, #6366f1);
  flex-shrink: 0;
  font-size: var(--fs-sm);
}

/* ── Right column: response view ─────────────────────────── */
.cr-response-view,
.cr-response-editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* Video thumbnail card — click to open lightbox */
.cr-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  border: none;
  cursor: pointer;
  margin-bottom: 18px;
  padding: 0;
}
.cr-video-thumb-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cr-video-thumb-bg iframe {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: none;
  pointer-events: none;
}
.cr-video-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0,0,0,0.35);
  transition: background 0.2s;
}
.cr-video-thumb:hover .cr-video-thumb-overlay { background: rgba(0,0,0,0.18); }
.cr-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cr-play-btn svg { color: #111; margin-left: 3px; }
.cr-video-thumb:hover .cr-play-btn {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(0,0,0,0.45);
}
.cr-video-thumb-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  letter-spacing: 0.02em;
}

/* Written feedback block */
.cr-feedback-block {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cr-feedback-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
  margin-bottom: 8px;
}
.cr-feedback-text {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
  margin: 0;
}

/* Action row at bottom of response view */
.cr-response-meta-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cr-response-meta-actions .btn-primary { margin-left: auto; }

/* ── Right column: inline editor ─────────────────────────── */
.cr-editor-video-area { margin-bottom: 20px; }

.cr-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 20px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  border: 1.5px dashed color-mix(in srgb, var(--primary) 60%, var(--border));
  border-radius: 8px;
  color: var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 12px;
  font-family: inherit;
}
.cr-record-btn:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  border-color: var(--primary);
}

/* Native video in editor preview slot */
.cr-native-video-preview { margin-top: 12px; }
.cr-native-video-inline {
  width: 100%;
  border-radius: 8px;
  background: #000;
  display: block;
  max-height: 260px;
}

/* Native video in response view (display mode) */
.cr-native-video-wrap { margin-bottom: 16px; }
.cr-native-video {
  width: 100%;
  border-radius: 6px;
  background: #000;
  display: block;
  margin-bottom: 10px;
}

/* Video wrap with play overlay (dashboard response view) */
.cr-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}
.cr-video-wrap .cr-native-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin-bottom: 0;
}
.cr-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0d0f1e 0%, #090b14 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  z-index: 4;
}
.cr-video-poster-logo {
  max-width: 220px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.cr-video-subtitle {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
}
.cr-video-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  border: 2px solid rgba(99, 102, 241, 0.4);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  outline: none;
}
.cr-video-play-btn:hover,
.cr-video-overlay:hover .cr-video-play-btn {
  background: rgba(99, 102, 241, 0.28);
  border-color: #6366f1;
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.55), 0 0 60px rgba(99, 102, 241, 0.2);
  transform: scale(1.08);
}
.cr-video-play-btn:active { transform: scale(0.97); }
.cr-video-play-btn svg { transform: translateX(2px); }

/* ============================================================
   VIDEO RECORDER (.vr-*)
   ============================================================ */

/* Setup panel */
.vr-setup-section {
  margin-bottom: 16px;
}
.vr-setup-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.vr-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.vr-close-btn:hover { color: var(--text); }

/* Mode / size pills */
.vr-pill-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vr-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.vr-pill:hover { border-color: var(--primary); color: var(--text); }
.vr-pill--active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 500;
}

/* Mic dropdown */
.vr-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.vr-select:focus { outline: none; border-color: var(--primary); }

/* Start button */
.vr-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.vr-start-btn:hover:not(:disabled) { opacity: 0.88; }
.vr-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Setup preview ─────────────────────────────────────── */
.vr-preview-section { margin-bottom: 0; }

.vr-cam-preview-wrap {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  aspect-ratio: 16 / 9;
}
.vr-cam-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  border-radius: 8px;
}
.vr-cam-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Audio meter */
.vr-audio-meter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.vr-meter-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.vr-meter-fill {
  height: 100%;
  width: 0%;
  background: #22c55e;
  border-radius: 3px;
  transition: width 0.08s ease-out, background 0.15s;
}
.vr-meter-level {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  min-width: 40px;
  text-align: right;
}

/* Volume control row */
.vr-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.vr-vol-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.vr-vol-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.vr-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.vr-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.vr-vol-pct {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
}
.vr-vol-auto-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.vr-vol-auto-btn:hover { border-color: var(--primary); color: var(--primary); }
.vr-vol-auto-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Countdown GO flash */
.vr-countdown-go {
  color: #22c55e !important;
  animation: vr-go-pulse 0.35s ease-out;
}
@keyframes vr-go-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Setup hint */
.vr-setup-hint {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: 1.5;
}

/* Active recording panel */
.vr-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.vr-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  animation: vr-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.vr-rec-dot--paused {
  background: var(--text-muted);
  animation: none;
}
@keyframes vr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.vr-rec-label {
  font-size: var(--fs-xs);
  color: var(--danger, #ef4444);
  font-weight: 500;
}
.vr-rec-timer {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.vr-recording-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: 1.5;
  margin-top: 8px;
}

/* Floating camera bubble — appears in recording as the camera overlay */
.vr-bubble {
  position: fixed;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 9500;
  cursor: grab;
  user-select: none;
  border: 2px solid rgba(255,255,255,0.2);
  background: #000;
  transition: border-radius 0.2s ease;
}
.vr-bubble:active { cursor: grabbing; }
.vr-bubble-cam-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: border-radius 0.2s ease, width 0.25s ease, height 0.25s ease;
}
.vr-bubble-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Circle variant */
.vr-bubble--circle { border-radius: 50%; }
.vr-bubble--circle .vr-bubble-cam-wrap { border-radius: 50%; }

/* ── Loom-style control bar on camera bubble ───────────────── */
.vr-bubble-controls {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  background: rgba(12, 14, 22, 0.82);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  cursor: default;
}
.vr-bubble-controls-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.vr-bubble-controls-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.vr-bubble-controls-btn--stop {
  background: #ef4444;
  color: #fff;
}
.vr-bubble-controls-btn--stop:hover { background: #dc2626; }
.vr-bubble-controls-timer {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  min-width: 38px;
  text-align: center;
  padding: 0 2px;
}
.vr-bubble-controls-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: vr-pulse 1.2s ease-in-out infinite;
}
.vr-bubble-controls-dot--paused {
  background: rgba(255,255,255,0.4);
  animation: none;
}
.vr-bubble-controls-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Timer warning — last 30 seconds */
.vr-timer-warning {
  color: #ef4444 !important;
  animation: vr-timer-flash 0.8s ease-in-out infinite;
}
@keyframes vr-timer-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Size/shape popover — appears on hover above the bubble ── */
.vr-bubble-options {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 12px;          /* extra bottom padding bridges the gap to the bubble */
  background: transparent;         /* transparent wrapper; inner bar has the bg */
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.vr-bubble-options-inner {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: rgba(12, 14, 22, 0.88);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  backdrop-filter: blur(14px);
}
.vr-bubble:hover .vr-bubble-options {
  opacity: 1;
  pointer-events: auto;
}
.vr-bubble-opt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.vr-bubble-opt-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vr-bubble-opt-btn--active { background: rgba(255,255,255,0.15); color: #fff; }

/* Drawing toolbar — below the bubble */
.vr-bubble-draw-bar {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.vr-bubble:hover .vr-bubble-draw-bar {
  opacity: 1;
  pointer-events: auto;
}
.vr-draw-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.vr-draw-color:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.5); }
.vr-draw-color--active {
  border-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
}

/* Full-viewport drawing overlay canvas — always visible, pointer-events toggled by JS */
.vr-drawing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  pointer-events: none;
  touch-action: none;
}

/* Voice recording indicator */
.vr-voice-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 16px;
  gap: 14px;
}
.vr-voice-waves {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
}
.vr-wave {
  width: 4px;
  border-radius: 3px;
  background: var(--danger, #ef4444);
  animation: vr-wave-pulse 0.75s ease-in-out infinite;
}
.vr-wave:nth-child(1) { height: 14px; animation-delay: 0s; }
.vr-wave:nth-child(2) { height: 26px; animation-delay: 0.12s; }
.vr-wave:nth-child(3) { height: 44px; animation-delay: 0.24s; }
.vr-wave:nth-child(4) { height: 26px; animation-delay: 0.36s; }
.vr-wave:nth-child(5) { height: 14px; animation-delay: 0.48s; }
@keyframes vr-wave-pulse {
  0%, 100% { transform: scaleY(0.45); opacity: 0.45; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* Voice audio preview */
.vr-preview-audio {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 4px;
}

/* Camera bubble — full bubble is draggable, no separate handle */

/* Inline recording controls (inside the right-column panel) */
.vr-inline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.vr-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vr-toolbar-btn:hover { background: var(--surface-3, #2a2e3d); }
.vr-btn-stop {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
  color: #fff;
}
.vr-btn-stop:hover { opacity: 0.88; background: var(--danger, #ef4444); }
.vr-btn-cancel {
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}
.vr-btn-cancel:hover { color: var(--text); background: var(--surface-2); }

/* Inline camera preview for camera-only mode */
.vr-inline-cam-wrap {
  margin: 12px 0 4px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
}
.vr-inline-cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Preview panel */
.vr-preview-video-wrap {
  margin-bottom: 14px;
}
.vr-preview-video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  display: block;
  max-height: 280px;
}
.vr-preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.vr-preview-actions .btn-primary { margin-left: auto; }

/* Upload progress */
.vr-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
}
.vr-upload-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.vr-upload-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}
.vr-upload-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
}

.cr-editor-notes-area { margin-bottom: 20px; }
.cr-editor-notes-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cr-optional {
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-subtle);
}
.cr-editor-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.15s;
}
.cr-editor-textarea::placeholder { color: var(--text-subtle); }
.cr-editor-textarea:focus { outline: none; border-color: var(--primary); }

.cr-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── Clients view entrance animation ────────────────────────── */
@keyframes clientFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* View header (h1 + action bar) slides up first */
#view-clients.view-enter .view-header {
  animation: clientFadeUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Table header row comes in slightly after */
#view-clients.view-enter #clients-thead tr {
  animation: clientFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.09s both;
}
/* Each body row staggers in, capped so large lists don't drag */
#view-clients.view-enter .client-row {
  animation: clientFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--row-i, 0) * 28ms + 150ms);
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #view-clients.view-enter .view-header,
  #view-clients.view-enter #clients-thead tr,
  #view-clients.view-enter .client-row { animation: none; }
}

/* Name cell — larger, heavier weight to lead the row */
.col-name { min-width: 140px; }
.col-name .client-name-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.col-actions { display: flex; gap: 6px; }

.empty-cell {
  text-align: center;
  color: var(--text-subtle);
  padding: 40px !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: capitalize;
}

.badge-active              { background: var(--success-dim); color: var(--success); }
.badge-cancelled           { background: var(--danger-dim);  color: var(--danger); }
.badge-pending_cancellation { background: rgba(245,158,11,0.15); color: rgb(245,158,11); }
.badge-paused              { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge-lead                { background: var(--surface-2); color: var(--text-muted); }

.badge-service {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.badge-service--online     { background: var(--primary-dim); color: var(--primary); }
.badge-service--hybrid     { background: rgba(245,158,11,0.12); color: #f59e0b; }
.badge-service--in-person  { background: rgba(34,197,94,0.12); color: #22c55e; }

.renewal-flag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--warning-dim);
  color: var(--warning);
}
.renewal-flag.urgent      { background: var(--danger-dim);  color: var(--danger); }
.renewal-flag.continuity  { background: var(--primary-dim); color: var(--primary); }
.renewal-flag.cancels     { background: var(--warning-dim); color: var(--warning); }

.cell-empty { color: var(--text-subtle); font-weight: 400; }

.text-ok      { color: var(--success); font-size: var(--fs-sm); font-weight: 500; }
.text-cancel  { color: var(--danger);  font-size: var(--fs-sm); font-weight: 500; }
.text-muted-c { color: var(--text-muted); }

/* ============================================================
   RENEWALS VIEW
   ============================================================ */
.renewals-summary {
  color: var(--text-muted);
  margin-bottom: 20px;
  font-size: var(--fs-sm);
}

.renewals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.renewal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.renewal-card--urgent { border-color: var(--danger); }

.renewal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.renewal-card-name {
  font-size: var(--fs-lg);
  font-weight: 500;
}

.renewal-days {
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}

.text-warning { color: var(--warning); }
.text-urgent  { color: var(--danger); }

.renewal-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.renewal-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
}

.detail-label { color: var(--text-muted); }
.detail-value { font-weight: 500; }

.renewal-card-actions { display: flex; gap: 8px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  padding: 16px 0;
  text-align: center;
}

.empty-state-large {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-subtle);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.modal-header h2 { font-size: var(--fs-xl); font-weight: 500; }

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-3xl);
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--surface-hover); color: var(--text); }

.modal-form { padding: 14px 24px 20px; }

.form-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-subtle);
  margin: 18px 0 10px;
}
.form-section-label:first-child { margin-top: 0; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Full-width row that uses flex so columns can have fixed/variable widths */
.form-row-flex {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin-top: 22px;
}
.form-row-flex .form-group { flex: 1; min-width: 0; margin-top: 0; }
.form-row-flex .form-group.col-state { flex: 0 0 76px; }
.form-row-flex .form-group.col-zip   { flex: 0 0 100px; }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.form-col-2 { grid-column: 1 / -1; }

.form-group label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
}

.required { color: var(--primary); }

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 13px;
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary); }

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-subtle); }

.form-group select option { background: var(--surface-2); }

.form-group textarea { resize: vertical; min-height: 56px; }

/* Currency prefix input */
.input-currency-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-currency-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  pointer-events: none;
  flex-shrink: 0;
}
.input-currency-wrap input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  flex: 1;
  min-width: 0;
}
.input-currency-wrap:focus-within .input-currency-prefix {
  border-color: var(--primary);
}

.hidden { display: none !important; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* Modal form actions row (Cancel + Submit inside the form) */
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

#btn-save {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 18px 18px;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 0.15s;
  order: -1; /* submit above cancel */
}
#btn-save:hover { background: var(--primary-hover); }
#btn-save:disabled { background: var(--primary-hover); opacity: 0.6; cursor: not-allowed; }

#btn-cancel {
  width: 100%;
  text-align: center;
}

/* ============================================================
   STRIPE ELEMENTS
   ============================================================ */
.stripe-card-element {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 16px;
  min-height: 60px;
  margin-top: 28px;
  transition: border-color 0.15s;
}

.stripe-card-element:focus-within {
  border-color: var(--primary);
}

.stripe-error {
  color: var(--danger);
  font-size: var(--fs-xs);
  margin-top: 6px;
}

.stripe-card-errors {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: var(--radius-sm);
  color: #f87171;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}
.stripe-card-errors::before {
  content: '⚠';
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-top: 1px;
}

.charge-summary {
  background: var(--primary-dim);
  border: 1px solid rgba(0, 78, 249, 0.2);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 78, 249, 0.08);
}
.charge-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.charge-summary .amount {
  color: var(--primary);
  font-size: var(--fs-4xl);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 2px;
}
.charge-amount-sub {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}
.charge-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 78, 249, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.toast {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  animation: fadeInUp 0.25s ease;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  max-width: 400px;
}

.toast-success { background: var(--success); color: #fff; }
.toast-error   { background: var(--danger);  color: #fff; }
.toast-warning { background: #eab308; color: #18181b; }
.toast-info    { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CONFIRM DIALOG
   ============================================================ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.confirm-overlay.hidden { display: none; }

.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow);
}

.confirm-dialog p {
  margin-bottom: 20px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ============================================================
   MODE BADGE (sidebar)
   ============================================================ */
.mode-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  width: 100%;
}

.mode-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mode-badge--live { background: var(--success-dim); color: var(--success); }
.mode-badge--live .mode-badge-dot { background: var(--success); }

.mode-badge--test { background: var(--warning-dim); color: var(--warning); }
.mode-badge--test .mode-badge-dot { background: var(--warning); }

/* ============================================================
   TEST MODE BANNER (modal)
   ============================================================ */
.test-mode-banner {
  background: var(--warning-dim);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 9px 14px;
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ============================================================
   SETTINGS VIEW
   ============================================================ */
/* ── Settings tabs ─────────────────────────────────────────── */
.settings-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  gap: 0;
}
.settings-tab-btn {
  padding: 10px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.settings-tab-btn:hover { color: var(--text-primary); }
.settings-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}
.settings-tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.settings-tab-panel.active { display: flex; }

/* ── Toggle switch ─────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Force off-state appearance (overrides :checked) — used when a
   parent master toggle is off to visually disable children while
   preserving their underlying checked state. */
.toggle-switch.force-off .toggle-slider {
  background: var(--border) !important;
}
.toggle-switch.force-off .toggle-slider::before {
  transform: translateX(0) !important;
}
.toggle-switch.force-off {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Phone verify quota bar ────────────────────────────────── */
.phone-verify-quota { margin-top: 14px; }
.quota-bar-wrap {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.quota-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--success);
  transition: width 0.4s, background 0.3s;
}
.quota-bar.warn   { background: var(--warning); }
.quota-bar.danger { background: var(--danger);  }
#phone-verify-quota-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ── Persistent alert banner ───────────────────────────────── */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin: 0 0 16px;
}
.alert-banner--warning {
  background: var(--warning-dim);
  border: 1px solid rgba(245,158,11,0.4);
  color: var(--warning);
}
.alert-banner span { flex: 1; line-height: 1.5; }
.alert-banner-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: 0 2px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.alert-banner-close:hover { opacity: 1; }

/* legacy grid no longer used but kept for safety */
.settings-grid { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.settings-col  { display: flex; flex-direction: column; gap: 16px; }

.settings-card { padding: 20px 24px; }

.settings-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 4px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-toggle-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.settings-note code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--fs-xs);
  color: var(--text);
}

.settings-actions {
  margin-top: 16px;
}

/* ── Settings Metrics Editor (sme-*) ─────────────────────────── */
.sme-list { display: flex; flex-direction: column; gap: 6px; }
.sme-row { background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.sme-main {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
}
.sme-label { flex: 1; font-size: var(--fs-sm); min-width: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); }
.sme-target { width: 64px; font-size: var(--fs-sm); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); text-align: center; }
.sme-streak { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.sme-streak input { accent-color: var(--primary); }
.sme-expand {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.15s;
}
.sme-expand:hover { background: var(--surface-3); }
.sme-remove, .sme-sub-remove {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.sme-remove:hover, .sme-sub-remove:hover { background: var(--danger-dim); color: var(--danger); }

.sme-subs { padding: 4px 10px 8px 32px; display: flex; flex-direction: column; gap: 4px; }
.sme-sub-row { display: flex; align-items: center; gap: 6px; }
.sme-sub-label { flex: 1; font-size: var(--fs-xs); min-width: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); }
.sme-sub-target { width: 52px; font-size: var(--fs-xs); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); text-align: center; }
.sme-sub-add { display: flex; gap: 6px; margin-top: 4px; }
.sme-sub-add input { flex: 1; font-size: var(--fs-xs); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); }

.sme-add-row { display: flex; gap: 8px; margin-top: 10px; }
.sme-add-row input { flex: 1; font-size: var(--fs-sm); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; color: var(--text); }

.sme-divider { height: 1px; background: var(--border); margin: 14px 0 10px; }
.sme-section-label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }

.sme-sync-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.sme-sync-label { font-size: var(--fs-sm); color: var(--text); min-width: 180px; }
.sme-sync-arrow { color: var(--text-muted); font-size: var(--fs-base); }
.sme-sync-select {
  flex: 1; max-width: 180px; font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; color: var(--text); cursor: pointer;
}

[data-theme="light"] .sme-row { background: #f1f5f9; }

/* ── Logo Upload ─────────────────────────────────────────────── */
.logo-upload-area {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 14px;
}
.logo-preview-wrap { flex-shrink: 0; }
.logo-preview-box {
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--fs-2xl);
  color: #fff;
  overflow: hidden;
  letter-spacing: 0.5px;
}
.logo-preview-box.has-custom-logo { background: var(--surface-2); border: 1px solid var(--border); }
.logo-upload-details { flex: 1; }
.logo-upload-specs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.logo-upload-specs li {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
}
.logo-upload-specs li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-subtle);
}
.logo-upload-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.logo-section-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-top: 18px;
}
.logo-section-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.logo-section-divider {
  border-top: 1px solid var(--border);
  margin: 20px 0 0;
}

/* Logo dark/light mode toggle */
.logo-mode-toggle {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.logo-mode-btn {
  padding: 4px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.logo-mode-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.logo-mode-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* Show/hide logo upload panels based on selected mode */
#logo-card[data-logo-mode="dark"]  .logo-light-only { display: none !important; }
#logo-card[data-logo-mode="light"] .logo-dark-only  { display: none !important; }

.logo-variant-ph {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* Full logo preview box (wide/horizontal) */
.logo-full-preview-box {
  width: 160px;
  height: 48px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-full-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#logo-full-preview-placeholder {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-weight: 500;
}

/* Sidebar full logo (expanded state) */
.sidebar-brand-full {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-full-logo-img {
  width: 100%;
  height: auto;
  display: block;
}
.sidebar-full-logo-name {
  font-size: clamp(10px, calc(var(--sidebar-w) * 0.052), 18px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.13);
  line-height: 1;
  text-align: center;
}
[data-theme="light"] .sidebar-full-logo-name {
  border-top-color: rgba(0,0,0,0.15);
}

/* Hide in expanded sidebar only (still visible when collapsed) */
.sidebar:not(.collapsed) .hide-when-expanded { display: none !important; }

/* Always hide full logo in collapsed mode */
.sidebar.collapsed .sidebar-brand-full { display: none !important; }

.code-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--fs-xs);
  color: var(--success);
  margin-top: 12px;
  line-height: 1.8;
}

/* ============================================================
   MODE TOGGLE (settings page)
   ============================================================ */
.mode-toggle-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mode-toggle-group {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: fit-content;
  gap: 3px;
}

.mode-btn {
  padding: 7px 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.mode-btn:hover { color: var(--text); }

.mode-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.mode-btn[data-mode="live"].active { color: var(--success); }
.mode-btn[data-mode="test"].active { color: var(--warning); }

.mode-description { font-size: var(--fs-sm); }

.mode-status { font-weight: 500; }
.mode-status--live { color: var(--success); }
.mode-status--test { color: var(--warning); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-btn {
  width: 100%;
  padding: 11px;
  font-size: var(--fs-base);
  margin-top: 4px;
}

.login-error {
  background: var(--danger-dim);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--fs-sm);
  padding: 10px 13px;
  line-height: 1.5;
}
.login-success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-size: var(--fs-sm);
  padding: 10px 13px;
  line-height: 1.5;
}
.login-forgot {
  text-align: center;
  margin-top: 12px;
}
.login-forgot button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.login-forgot button:hover { color: var(--primary); }

/* ============================================================
   SIGNUP PAGE
   ============================================================ */
.signup-container {
  width: 100%;
  max-width: 520px;
  padding: 20px;
  margin: 0 auto;
}
.signup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}
.signup-plan-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.plan-btn {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text-muted);
}
.plan-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--text);
}
.plan-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.plan-price {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
}
.plan-price span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}
.plan-save {
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  margin-top: 3px;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.signup-card-input {
  background: #1e2535;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  min-height: 40px;
}
@media (max-width: 480px) {
  .signup-row { grid-template-columns: 1fr; }
  .signup-card { padding: 28px 20px; }
}

/* ============================================================
   LOGOUT BUTTON (sidebar)
   ============================================================ */
.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.15s;
}

.btn-logout:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.4);
}

/* ============================================================
   DATE RANGE BAR
   ============================================================ */
.date-range-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.preset-group {
  display: flex;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 6px;
}

.preset-btn {
  padding: 6px 0;
  width: 90px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.preset-btn:hover { color: var(--text); background: var(--surface-hover); }

.preset-btn.active {
  background: rgba(0, 78, 249, 0.25);
  border-color: var(--primary);
  color: var(--primary);
}

.custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  outline: none;
}
.range-input:focus { border-color: var(--primary); }

/* Calendar icon — all date inputs, light mode matches --text-secondary (#64748b) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(49%) sepia(10%) saturate(620%) hue-rotate(184deg) brightness(89%) contrast(90%);
  cursor: pointer;
  opacity: 1;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) brightness(1.4);
  cursor: pointer;
  opacity: 0.85;
}

.range-sep { color: var(--text-muted); font-size: var(--fs-xs); }

.btn-sm {
  padding: 8px 16px;
  font-size: var(--fs-xs);
}

/* ============================================================
   STAT COMPARISON INDICATORS
   ============================================================ */
.stat-comparison {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
}

/* ── Stat card tooltip ──────────────────────────────── */
.stat-tooltip {
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-sizing: border-box;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: tip-in 0.15s ease;
  width: max-content;
  min-width: 300px;
  max-width: 480px;
}
@keyframes tip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Row 1: rating badge + tier tag on same row */
.stat-tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.stat-tip-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}
.stat-tip-badge.tip-great   { background: rgba(0,78,249,0.15);    color: var(--primary); }
.stat-tip-badge.tip-poor    { background: rgba(220,38,38,0.15);   color: #dc2626;  }
.stat-tip-badge.tip-warning { background: rgba(234,179,8,0.15);   color: #eab308; }
.stat-tip-badge.tip-okay    { background: rgba(100,116,139,0.15); color: var(--text-muted); }
.stat-tip-tier-tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-subtle);
  background: rgba(100,116,139,0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
/* Rated-on explainer — sits between header and context */
.stat-tip-rated {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-bottom: 8px;
}
/* Row 2: context — hero numbers */
.stat-tip-context {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.stat-tip-ctx-sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  margin-top: 3px;
}
/* Row 3: benchmarks — compact inline row */
.stat-tip-bench {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.stat-tip-bench-line {
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.stat-tip-bench-line::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stat-tip-bench-line.tip-great-line { color: var(--primary); }
.stat-tip-bench-line.tip-great-line::before { background: var(--primary); }
.stat-tip-bench-line.tip-okay-line  { color: var(--text-muted); }
.stat-tip-bench-line.tip-okay-line::before  { background: rgba(100,116,139,0.45); }
.stat-tip-bench-line.tip-poor-line  { color: #dc2626; }
.stat-tip-bench-line.tip-poor-line::before  { background: #dc2626; }
.stat-tip-bench-line.tip-warn-line  { color: #eab308; }
.stat-tip-bench-line.tip-warn-line::before  { background: #eab308; }
/* Row 4: vs previous period */
.stat-tip-vs-prev {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.stat-tip-vs-prev.tip-vs-up   { color: var(--primary); }
.stat-tip-vs-prev.tip-vs-down { color: #dc2626;  }

/* ── Stat legend ─────────────────────────────────────── */
.stat-legend {
  display: none; /* KPI status communicated via card borders — legend not needed */
  padding-left: 2px;
  flex-wrap: wrap;
}
.stat-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.stat-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.stat-legend-item--great   .stat-legend-dot { background: var(--success); }
.stat-legend-item--poor    .stat-legend-dot { background: var(--danger); }
.stat-legend-item--warning .stat-legend-dot { background: var(--warning); }
.stat-legend-item--neutral .stat-legend-dot { background: rgba(100,116,139,0.45); }

/* Colorblind overrides removed — will rebuild later */

.comp-up   { color: rgba(0,78,249,0.8); }
.comp-down { color: rgba(220,38,38,0.8); }

.stat-period-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
[data-theme="dark"] .stat-period-label {
  color: rgba(180,195,220,0.90);
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.28);
}

/* ============================================================
   SECTION DIVIDER (Hormozi metrics label)
   ============================================================ */
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   WIDE CHART CARD (Contracted vs Collected spans full width)
   ============================================================ */
.chart-card--wide {
  grid-column: 1 / -1;
}

/* ============================================================
   CARD BADGE (count pill in card header)
   ============================================================ */
.card-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 8px;
}

/* ============================================================
   AGREEMENT COMPLETION BAR
   ============================================================ */
.completion-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.completion-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}

.completion-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.completion-bar-bg--lg { height: 12px; border-radius: 6px; }
.completion-bar-bg--lg .completion-bar-fill { border-radius: 6px; }
.billing-progress-sub { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }

.completion-pct {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ============================================================
   CLIENT PROFILE
   ============================================================ */

/* Back button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-back:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.btn-danger {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.btn-cancel-client {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: #f59e0b;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-cancel-client:hover { background: rgba(245,158,11,0.22); }


.edit-stripe-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.edit-stripe-warning.hidden { display: none; }
.edit-warning-steps {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 158, 11, 0.25);
}
.edit-warning-steps ol {
  margin: 6px 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-warning-link {
  color: var(--warning);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  font-family: monospace;
  font-size: var(--fs-xs);
}
.edit-warning-link:hover {
  color: #fbbf24;
}

.btn-undo-cancel {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #818cf8;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-undo-cancel:hover { background: rgba(99, 102, 241, 0.22); }
.btn-undo-cancel.hidden { display: none; }

.btn-save-attempt {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-save-attempt:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
.btn-save-attempt.hidden { display: none; }

.btn-resume-pause {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #22c55e;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-resume-pause:hover { background: rgba(34, 197, 94, 0.22); }
.btn-resume-pause.hidden { display: none; }

.profile-header-actions { display: flex; gap: 8px; align-items: center; }

/* Options dropdown */
.profile-options-wrap {
  position: relative;
}
.profile-options-wrap .btn-secondary {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: all 0.2s;
}
.profile-options-wrap .btn-secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
}
.profile-options-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
.profile-options-dropdown.hidden { display: none; }
.profile-options-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.profile-options-item:hover { background: var(--surface-hover); }
.profile-options-item--cancel { color: #f59e0b; }
.profile-options-item--cancel:hover { background: rgba(245,158,11,0.08); }
.profile-options-item--danger { color: #ef4444; }
.profile-options-item--danger:hover { background: rgba(239,68,68,0.08); }
.profile-options-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Hero */
/* ── Compact Profile Header ──────────────────────────────────── */
.profile-header-compact {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 20px;
  margin-bottom: 14px;
}
.profile-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-hero { display: none; }
.profile-avatar { display: none; }
.profile-name-row { display: contents; }
.profile-name {
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}
.profile-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 5px;
}
.profile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Client tags */
.profile-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 0;
  color: inherit;
  opacity: 0.6;
  margin-left: 1px;
}
.tag-chip-remove:hover { opacity: 1; }
.tag-add-wrap { position: relative; }
.tag-add-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.tag-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.tag-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 10px;
  min-width: 220px;
}
.tag-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.tag-preset {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tag-preset:hover { opacity: 0.75; }
.tag-picker-custom {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tag-custom-input {
  flex: 1;
  font-size: var(--fs-xs);
  padding: 5px 8px;
  height: auto;
}
.tag-picker-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 6px 4px;
}

/* Tag settings management */
.tag-def-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag-def-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none; /* chip already shows the color */
}
.tag-def-color-picker {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}
.tag-def-chip {
  cursor: default;
}
.tag-def-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.tag-def-remove:hover { opacity: 1; color: var(--danger); }
.tag-settings-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tag-settings-add input[type="text"] {
  flex: 1;
  min-width: 140px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 13px;
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.tag-settings-add input[type="text"]:focus { border-color: var(--primary); }
.tag-settings-add input[type="text"]::placeholder { color: var(--text-subtle); }
.tag-settings-add input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 2px 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}

/* Cancellation reason */
.cancellation-reason-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-xs);
}
.cr-label {
  font-weight: 500;
  color: var(--danger);
  white-space: nowrap;
}
.cr-text { color: var(--text-secondary); }
.badge-billing {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.badge-renewal {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Agreement status badges */
.agreement-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.agreement-badge--signed {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.28);
}
.agreement-badge--pending {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.28);
}
.agreement-badge--voided {
  background: rgba(239,68,68,0.12);
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.28);
}
.agreement-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: var(--fs-xs);
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.agreement-doc-link:hover { opacity: 1; text-decoration: underline; }

/* Onboarding status card */
.onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.onb-card--done { padding: 10px 20px; }
.onb-done-badge { font-size: var(--fs-xs); font-weight: 500; color: var(--success, #48bb78); }
.onb-header { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 14px; }
.onb-steps { display: flex; align-items: center; gap: 0; }
.onb-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.onb-step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: 500; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface); transition: all 0.2s; }
.onb-step--done .onb-step-icon { background: var(--success, #48bb78); color: #fff; border-color: var(--success, #48bb78); }
.onb-step--active .onb-step-icon { background: var(--primary); color: #fff; border-color: var(--primary); animation: onb-pulse 1.5s ease-in-out infinite; }
.onb-step--error .onb-step-icon { background: var(--danger, #e53e3e); color: #fff; border-color: var(--danger, #e53e3e); }
.onb-step-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-align: center; }
.onb-step--done .onb-step-label { color: var(--success, #48bb78); }
.onb-step--active .onb-step-label { color: var(--primary); font-weight: 500; }
.onb-step-line { flex: 0 0 auto; width: 24px; height: 2px; background: var(--border); margin: 0 -4px; margin-bottom: 18px; }
@keyframes onb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } }
.onb-action, .onb-error { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.onb-waiting { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.onb-waiting.warning { color: #d97706; }
.onb-waiting.urgent { color: var(--danger, #e53e3e); font-weight: 500; }
.onb-error { color: var(--danger, #e53e3e); font-size: var(--fs-xs); }
.onb-error span { flex: 1; }

/* Quick stats row */
.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) { .profile-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .profile-stats-row { grid-template-columns: repeat(2, 1fr); } }

.profile-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Next-payment status pill — top-right corner of card */
.profile-pay-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  pointer-events: none;
}
.profile-pay-badge--paid      { background: rgba(34, 197, 94, 0.15);  color: var(--success); }
.profile-pay-badge--upcoming  { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.profile-pay-badge--due-soon  { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.profile-pay-badge--due-today { background: rgba(239, 68, 68, 0.15);  color: var(--danger); }
.profile-pay-badge--overdue   { background: rgba(239, 68, 68, 0.15);  color: var(--danger); }

/* Card border + outward glow matches status color */
.profile-stat--pay-paid      { border-color: var(--success) !important; box-shadow: 0 0 18px 5px rgba(34, 197, 94, 0.40); }
.profile-stat--pay-upcoming  { border-color: var(--info)    !important; box-shadow: 0 0 18px 5px rgba(59, 130, 246, 0.40); }
.profile-stat--pay-due-soon  { border-color: var(--warning) !important; box-shadow: 0 0 18px 5px rgba(245, 158, 11, 0.40); }
.profile-stat--pay-due-today { border-color: var(--danger)  !important; box-shadow: 0 0 18px 5px rgba(239, 68, 68, 0.40); }
.profile-stat--pay-overdue   { border-color: var(--danger)  !important; box-shadow: 0 0 18px 5px rgba(239, 68, 68, 0.40); }

/* LTV stat — highlighted with brand accent border (all four sides, overrides dark-theme top-color rule) */
.profile-stat--ltv {
  border-color: var(--accent) !important;
  background: var(--accent-dim);
}

.profile-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.profile-stat-value {
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--text-primary);
}

/* Two-column profile grid */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-col { display: flex; flex-direction: column; gap: 16px; }

/* Card drag-to-reorder */
.card-press-pending {
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 0 0 2px var(--accent), 0 4px 20px rgba(0,0,0,0.25);
  transform: scale(1.005);
  cursor: grab;
}
.card-dragging {
  opacity: 0.93;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 2px var(--accent);
  transform: rotate(0.6deg) scale(1.01);
  transition: none !important;
}
.card-drag-placeholder {
  border: 2px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  opacity: 0.5;
  pointer-events: none;
}
[data-card-key] .card-header {
  cursor: grab;
  user-select: none;
}
.profile-card { padding: 0; }
.profile-card .card-header { padding: 16px 20px 12px; }

/* Detail rows */
.profile-details { padding: 0 20px 16px; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--text-muted); }
.detail-val { color: var(--text-primary); font-weight: 500; text-align: right; }

/* Program start date — inline edit */
#cp-ps-row { align-items: center; }
.ps-display-wrap { display: flex; align-items: center; gap: 6px; }
.ps-empty { color: var(--text-muted); font-weight: 400; }
.ps-edit-btn {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--text-muted); border-radius: 4px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
  display: flex; align-items: center;
}
#cp-ps-row:hover .ps-edit-btn { opacity: 1; }
.ps-edit-btn:hover { color: var(--primary); }
.ps-set-link { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--primary); }
.ps-edit-inline {
  display: none; align-items: center; gap: 6px;
}
.ps-edit-inline input[type="date"] {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 4px 8px;
  font-size: var(--fs-xs); font-family: inherit; outline: none;
}
.ps-edit-inline input[type="date"]:focus { border-color: var(--primary); }
.btn-xs {
  font-size: var(--fs-xs); font-weight: 500; padding: 4px 10px;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  transition: background 0.15s;
}
.btn-xs.btn-primary  { background: var(--primary); color: #fff; }
.btn-xs.btn-primary:hover  { background: var(--primary-dark, #5b21b6); }
.btn-xs.btn-ghost    { background: var(--surface-3, var(--surface-2)); color: var(--text-muted); }
.btn-xs.btn-ghost:hover    { background: var(--surface-hover); color: var(--text); }
.detail-mono { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--text-secondary); }
.stripe-dashboard-link { font-size: var(--fs-xs); font-weight: 500; color: #635bff; text-decoration: none; letter-spacing: 0.01em; }
.stripe-dashboard-link:hover { color: #7a73ff; text-decoration: underline; }
.stripe-id-link { color: var(--primary); text-decoration: none; transition: color 0.15s; }
.stripe-id-link:hover { color: var(--text); text-decoration: underline; }
.copy-on-click { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; position: relative; }
.copy-on-click:hover { color: var(--accent); }
.copy-icon { opacity: 0; font-size: var(--fs-xs); transition: opacity 0.15s; }
.copy-on-click:hover .copy-icon { opacity: 1; }
.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 99;
}
.copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}
.copy-on-click.copied .copy-tooltip { opacity: 1; }

/* Financial summary */
.profile-financial { padding: 0 20px 16px; }
.fin-row { display: flex; gap: 16px; margin-bottom: 16px; }
.fin-item { flex: 1; }
.fin-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.fin-value { font-size: var(--fs-xl); font-weight: 500; color: var(--text-primary); }
.fin-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Payment failure alert — on client profile */
.payment-failure-alert {
  margin: 0 20px 16px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.pf-alert-title  { font-size: var(--fs-sm); font-weight: 500; color: #ef4444; margin-bottom: 4px; }
.pf-alert-detail { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 2px; }
.pf-alert-reason { font-size: var(--fs-xs); color: var(--text-muted); }

/* Payment history — on client profile */
.payment-history { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.ph-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin-bottom: 8px; }
.ph-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ph-add-entry-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; padding: 2px 8px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.ph-add-entry-btn:hover { border-color: var(--primary); color: var(--primary); }
.ph-empty { padding: 10px 20px; font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }
.ph-item  { display: flex; align-items: center; gap: 10px; padding: 7px 20px; font-size: var(--fs-xs); border-bottom: 1px solid var(--border); }
.ph-item:last-child { border-bottom: none; }
.ph-date   { color: var(--text-muted); width: 90px; flex-shrink: 0; }
.ph-desc   { color: var(--text-secondary); flex: 1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ph-period { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; white-space: nowrap; font-weight: 500; }
.ph-amount { font-weight: 500; flex-shrink: 0; }
.ph-late { font-size: var(--fs-xs); font-weight: 500; color: var(--danger, #ef4444); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.ph-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.ph-item:hover .ph-delete-btn { opacity: 1; }
.ph-delete-btn:hover { color: var(--danger, #ef4444); }
.ph-overdue-info { font-size: var(--fs-xs); font-weight: 500; color: var(--danger); margin-top: 4px; }

/* Payment failures — on dashboard */
.payment-failure-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.payment-failure-item:hover { background: var(--surface-hover); }
.payment-failure-item:last-child { border-bottom: none; }
.pf-name   { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); }
.pf-meta   { display: flex; gap: 12px; }
.pf-amount { font-size: var(--fs-sm); font-weight: 500; color: #ef4444; }
.pf-date   { font-size: var(--fs-xs); color: var(--text-muted); }
.pf-reason { font-size: var(--fs-xs); color: var(--text-muted); }

/* Danger badge variant */
.card-badge--danger { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Notes */
.profile-notes {
  padding: 0 20px 16px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Timeline */
.profile-timeline {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}
.tl-line {
  position: absolute;
  left: 4px;
  top: 14px;
  width: 2px;
  height: calc(100% + 8px);
  background: var(--border);
}
.tl-content { padding-bottom: 16px; }
.tl-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.tl-date  { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.tl-signup      .tl-dot { background: var(--accent); }
.tl-paid        .tl-dot { background: #a855f7; }
.tl-signed      .tl-dot { background: #22c55e; }
.tl-start       .tl-dot { background: #3b82f6; }
.tl-continuity  .tl-dot { background: #06b6d4; }
.tl-end         .tl-dot { background: #3b82f6; }
.tl-urgent      .tl-dot { background: #ef4444; }
.tl-cancelled   .tl-dot { background: #6b7280; }
.tl-sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-weight: 500;
  margin-left: 4px;
}

/* Pending / future timeline steps */
.tl-pending .tl-dot {
  background: transparent !important;
  border: 2px solid var(--border-strong, #475569);
}
.tl-pending .tl-label { color: var(--text-muted); }
.tl-pending .tl-date  { color: var(--text-subtle); }
.tl-pending .tl-line  { background: var(--border); opacity: 0.5; }
.tl-awaiting {
  font-style: italic;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}

/* Clickable client name in table */
.client-name-link {
  cursor: pointer;
  color: var(--text-primary);
  transition: color 0.15s;
}
.client-name-link:hover { color: var(--accent); text-decoration: underline; }

/* Color helpers used in profile */
.text-success { color: #22c55e !important; }
.text-warning { color: #f59e0b !important; }
.text-danger  { color: #ef4444 !important; }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }

/* ============================================================
   SORTABLE COLUMNS + COLUMN PANEL
   ============================================================ */

.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sortable:hover { color: var(--text-primary); }

.sort-arrow {
  font-size: 10px;
  margin-left: 3px;
  color: var(--primary);
}
.sort-arrow--inactive {
  opacity: 0.3;
  color: var(--text-muted);
}
.th-sortable:hover .sort-arrow--inactive { opacity: 0.5; }
th[data-sorted="true"] { color: var(--text); }

/* Centered column headers: arrow sits inline next to label */
.th-label-centered { display: inline; }
.sort-arrow-abs { display: inline; margin-left: 3px; }

/* Column panel wrapper (relative positioned for dropdown) */
.col-panel-wrap {
  position: relative;
}

/* Dropdown panel */
.col-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 200;
  min-width: 200px;
  padding-bottom: 8px;
}
.col-panel.open { display: block; }

.col-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.col-panel-reset {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 2px 4px;
}
.col-panel-reset:hover { text-decoration: underline; }

.col-panel-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.col-panel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
}
.col-panel-item:hover { background: var(--surface-hover); color: var(--text); }
.col-panel-item input[type=checkbox] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ============================================================
   NOTES FEED
   ============================================================ */

.notes-add-form {
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notes-add-form .btn-primary {
  padding: 10px 18px !important;
}

.notes-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 60px;
  transition: border-color 0.15s;
}
.notes-textarea:focus { border-color: var(--primary); }
.notes-textarea::placeholder { color: var(--text-subtle); }

.notes-feed { padding: 4px 0; }

.note-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.note-item:last-child { border-bottom: none; }
.note-item:hover { background: var(--surface); }

.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.note-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.note-delete {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: var(--fs-xl);
  line-height: 1;
  padding: 0 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  opacity: 0;
}
.note-item:hover .note-delete { opacity: 1; }
.note-delete:hover { color: var(--danger); background: var(--danger-dim); }

.note-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-dim);
  color: var(--primary);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ============================================================
   CUSTOMIZE STATS PANEL
   ============================================================ */

.customize-section-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-left: 4px;
}

.customize-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.customize-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface);
  cursor: grab;
  user-select: none;
  transition: background 0.1s, border-color 0.15s, opacity 0.15s;
}
.customize-item:active { cursor: grabbing; }
.customize-item:hover  { background: var(--surface-hover); }
.customize-item--hidden { opacity: 0.45; }
.customize-item.stat-drag-source  { opacity: 0.3; }
.customize-item.stat-drop-target  { border-color: var(--primary); background: var(--primary-dim); }

.drag-handle {
  color: var(--text-subtle);
  font-size: var(--fs-md);
  line-height: 1;
  flex-shrink: 0;
}

.customize-item input[type=checkbox] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.customize-item-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  flex: 1;
}

/* ============================================================
   FORM SECTION TITLES
   ============================================================ */
.form-section-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  margin-top: 22px;
}
.form-section-title:first-child,
.form-section-title--first {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Existing client toggle */
/* ── CSV Import Modal ─────────────────────────────────────────── */
.csv-import-step { }
.csv-import-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.csv-import-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 32px 20px; border: 2px dashed var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s; color: var(--text-muted); font-size: var(--fs-sm);
}
.csv-import-drop:hover, .csv-drop-zone--active { border-color: var(--primary); background: rgba(124,58,237,0.06); }
.csv-drop-icon { color: var(--text-muted); }
.csv-import-notes { margin-top: 14px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.8; }
.csv-import-notes p { margin: 0; }
.csv-import-summary { display: flex; gap: 8px; margin-bottom: 14px; }
.csv-badge { font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px; border-radius: 4px; }
.csv-badge--ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.csv-badge--warn { background: rgba(234,179,8,0.15); color: #eab308; }
.csv-badge--err { background: rgba(239,68,68,0.15); color: #ef4444; }
.csv-import-table-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.csv-import-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.csv-import-table th { position: sticky; top: 0; background: var(--surface-2); padding: 8px 10px; text-align: left; font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.csv-import-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.csv-row--skip { opacity: 0.4; }
.csv-row-icon { margin-right: 6px; }
.csv-row-icon--ok { color: #22c55e; }
.csv-row-icon--warn { color: #eab308; }
.csv-row-icon--err { color: #ef4444; }
.csv-action-select { font-size: var(--fs-xs); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--text); margin-left: 4px; }
.csv-import-footer { display: flex; justify-content: space-between; margin-top: 16px; }
.csv-progress-bar { width: 100%; height: 6px; background: var(--surface-2); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.csv-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.2s; width: 0; }
[data-theme="light"] .csv-import-drop:hover, [data-theme="light"] .csv-drop-zone--active { background: rgba(124,58,237,0.04); }

/* ── Notification Bell ─────────────────────────────────────────── */
.sidebar-notif-section {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 0 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s; border-radius: var(--radius-sm);
}
.sidebar-notif-section:hover { background: var(--surface-hover); }
.sidebar-notif-section .sidebar-label {
  font-size: 13.5px; color: var(--text-muted); font-weight: 500;
}
.sidebar.collapsed .sidebar-notif-section { padding: 10px 0; margin: 0; justify-content: center; }
.notif-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: none;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0;
}
.notif-bell svg { width: 18px; height: 18px; opacity: 0.7; }
.sidebar-notif-section:hover .notif-bell svg { opacity: 1; }
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px;
  background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 500;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}
/* "What's new" indicator — a pure dot, no number */
.whats-new-dot {
  position: absolute; top: 6px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface, var(--bg));
  pointer-events: none;
}
.sidebar.collapsed .whats-new-dot { top: 4px; right: 6px; }
.notif-panel {
  position: fixed; top: 100px; left: calc(var(--sidebar-w) + 8px); width: 340px; max-height: 460px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35); overflow-y: auto; z-index: 1000;
}
.notif-panel-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xl); line-height: 1; padding: 2px 6px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.notif-panel-close:hover { color: var(--text); background: var(--surface-2); }
.notif-overlay { position: fixed; inset: 0; z-index: 999; }
.notif-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.notif-panel-header button { background: none; border: none; color: var(--primary); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.notif-item {
  display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item--unread { background: rgba(124,58,237,0.06); }
.notif-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); flex-shrink: 0; }
.notif-icon--fail { background: rgba(239,68,68,0.15); color: #ef4444; }
.notif-icon--ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.notif-icon--warn { background: rgba(234,179,8,0.15); color: #eab308; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text); }
.notif-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.notif-time { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.notif-empty { padding: 24px; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════
   PROFILE V2 — Premium Dark Glass
   ══════════════════════════════════════════════════════════════════ */

/* ── Glass card overrides for profile ─────────────────────────── */
/* Profile cards — match dashboard card aesthetic */
.profile-tab-panel .card.profile-card,
.p-action-items {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.profile-tab-panel .card.profile-card .card-header {
  border-bottom: 1px solid var(--border);
}
.profile-tab-panel .card.profile-card .card-header h2 {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.profile-tab-panel .detail-row {
  border-bottom-color: rgba(255,255,255,0.06);
}
.profile-tab-panel .detail-key {
  font-weight: 400; color: var(--text-subtle);
}
.profile-tab-panel .detail-val {
  font-weight: 500;
}

/* ── Header V2 ──────────────────────────────────────────────────── */
.profile-header-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px 0; margin-bottom: 14px;
  position: relative;
}
/* Header shimmer border removed */

.ph-identity {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.ph-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-lg); font-weight: 500; color: #fff;
  flex-shrink: 0; text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.ph-name-block { flex: 1; min-width: 0; }
.ph-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-name { font-size: var(--fs-3xl); font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.ph-status { font-size: var(--fs-xs); }
.ph-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Banners */
.ph-banner {
  padding: 10px 16px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 500;
  margin-bottom: 12px;
}
.ph-banner--danger { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.12); }
.ph-banner--info { background: rgba(59,130,246,0.08); color: #60a5fa; border: 1px solid rgba(59,130,246,0.12); }
.ph-banner--success { background: rgba(34,197,94,0.08); color: #4ade80; border: 1px solid rgba(34,197,94,0.12); }
.ph-banner-label { font-weight: 500; margin-right: 4px; }

/* Metric pills row */
.ph-metrics {
  display: flex; gap: 10px; margin-bottom: 16px; overflow-x: auto;
}
.ph-metric {
  flex: 1; min-width: 0; padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  transition: border-color 0.15s;
}
/* Metric pill — clean border, no shimmer */
.ph-metric { border-color: var(--border); }
.ph-metric:hover { border-color: #4a5568; }
.ph-metric--accent {
  background: rgba(0,78,249,0.03);
}
.ph-metric--accent::before {
  background: linear-gradient(135deg, rgba(0,78,249,0.45) 0%, rgba(0,78,249,0.05) 25%, rgba(0,78,249,0.02) 50%, rgba(0,78,249,0.02) 75%, rgba(0,78,249,0.35) 100%);
}
.ph-metric-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle); margin-bottom: 4px;
}
.ph-metric-value { font-size: var(--fs-xl); font-weight: 500; color: var(--text); line-height: 1.2; }
.ph-metric-sub { font-size: var(--fs-xs); font-weight: 500; margin-top: 2px; }

/* ── Metric Pill Tooltips ─────────────────────────────────────── */
.ph-metric-tip {
  position: fixed; z-index: 9999;
  width: 320px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.ph-metric-tip.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pmt-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pmt-body { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }

/* ── Engagement Score Tooltip ────────────────────────────────── */
.ph-metric--engagement { position: relative; }
.engagement-info-icon {
  display: inline-flex; vertical-align: middle; margin-left: 4px;
  color: var(--text-subtle); cursor: help; opacity: 0.6; transition: opacity 0.15s;
}
.ph-metric--engagement:hover .engagement-info-icon { opacity: 1; }
.engagement-tooltip {
  position: fixed; z-index: 9999;
  width: 460px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.engagement-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.et-header { margin-bottom: 10px; }
.et-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.et-subtitle { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }
.et-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.et-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-subtle);
  margin-bottom: 6px; text-transform: uppercase;
}
.et-signals { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.et-signal {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400;
}
.et-signal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.et-signal-window {
  margin-left: auto; font-size: 10px; font-weight: 500; color: var(--text-subtle);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px; padding: 0 5px; line-height: 1.6;
}
.et-ranges { display: flex; flex-direction: column; gap: 6px; }
.et-range { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.et-range-bar { width: 3px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.et-bar-healthy { background: var(--success); }
.et-bar-watch { background: #eab308; }
.et-bar-atrisk { background: #f97316; }
.et-bar-critical { background: var(--danger); }
.et-range-label { width: 56px; flex-shrink: 0; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-range-desc { color: var(--text-muted); font-weight: 400; }

/* Tab bar */
.ph-tab-bar {
  display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,0.05);
  margin: 0 -24px; padding: 0 24px;
}
.profile-tab-btn {
  padding: 12px 20px; background: none; border: none; border-bottom: 2px solid transparent;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-subtle); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.profile-tab-btn:hover { color: var(--text); }
.profile-tab-btn.active {
  color: var(--text); border-bottom-color: var(--primary);
}

/* Tab panels */
.profile-tab-panel { padding: 0; }
.profile-tab-panel > .card:first-child { margin-top: 0; }
.profile-tab-panel .card.profile-card { margin-bottom: 16px; }
.tab-loading { padding: 48px 20px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm); font-weight: 400; }

/* Two-column grid for tab content */
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.p-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p-col > .card.profile-card { margin-bottom: 0; }
@media (max-width: 900px) { .p-grid { grid-template-columns: 1fr; } }

/* ── Quick Stats Row ──────────────────────────────────────────── */
.overview-quick-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.qs-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; text-align: center;
}
.qs-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px; }
.qs-value { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
@media (max-width: 900px) { .overview-quick-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Skeleton Feed ───────────────────────────────────────────── */
.skeleton-feed { padding: 16px 20px; }

/* ── Action Items ─────────────────────────────────────────────── */
.p-action-items { margin-bottom: 16px; }
.p-action-list { padding: 0; }
.p-action-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--text-subtle); font-size: var(--fs-sm); font-weight: 400;
}
.p-action-item:last-child { border-bottom: none; }
.p-action-item--danger { border-left-color: var(--danger); }
.p-action-item--warning { border-left-color: var(--warning); }
.p-action-item--info { border-left-color: var(--info); }
.p-action-msg { flex: 1; font-weight: 500; color: var(--text); }

/* ── Activity Feed ────────────────────────────────────────────── */
.activity-feed { padding: 4px 0; }
.activity-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--fs-sm);
  transition: background 0.1s;
}
.activity-item:hover { background: rgba(255,255,255,0.03); }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
  opacity: 0.8;
}
.activity-date {
  flex-shrink: 0; width: 80px; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.activity-label { flex: 1; color: var(--text-muted); font-weight: 400; }

/* ── Activity Feed Scroll Container ──────────────────────────── */
.activity-feed-scroll { max-height: 420px; overflow-y: auto; }
.activity-feed-scroll::-webkit-scrollbar { width: 4px; }
.activity-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.activity-feed-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.activity-feed-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.af-hidden { display: none !important; }
.af-load-more {
  display: block; width: 100%; padding: 12px 20px; background: none; border: none;
  border-top: 1px solid rgba(255,255,255,0.06); color: var(--primary); font-size: var(--fs-xs);
  font-weight: 500; cursor: pointer; text-align: center; transition: background 0.15s;
}
.af-load-more:hover { background: rgba(255,255,255,0.03); }
.af-search {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: var(--fs-xs); color: var(--text); width: 160px;
  transition: border-color 0.15s;
}
.af-search:focus { outline: none; border-color: var(--primary); }
.af-search::placeholder { color: var(--text-subtle); }

/* ── This Week Summary Card ──────────────────────────────────── */
.tw-grid { padding: 0; }
.tw-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-sm);
}
.tw-row:last-child { border-bottom: none; }
.tw-label { font-weight: 400; color: var(--text-muted); }
.tw-value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Quick Links ──────────────────────────────────────────────── */
.p-quick-links {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 0;
}
.p-quick-link {
  padding: 9px 18px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
  transition: all 0.2s;
}
.p-quick-link:hover {
  color: var(--text); border-color: var(--primary);
  background: var(--surface-hover, rgba(255,255,255,0.04));
}

/* ── Billing Alert ────────────────────────────────────────────── */
.p-alert {
  padding: 14px 20px; border-radius: var(--radius); margin-bottom: 16px;
}
.p-alert--danger {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.12);
}
.p-alert-title { font-size: var(--fs-sm); font-weight: 500; color: var(--danger); }
.p-alert-detail { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; font-weight: 400; }
.p-alert-reason { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; font-weight: 400; }

/* ── Payment entry (billing tab) ──────────────────────────────── */
.payment-entry {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--fs-sm);
  transition: background 0.1s;
}
.payment-entry:hover { background: rgba(255,255,255,0.03); }
.payment-entry:last-child { border-bottom: none; }
.pe-date { width: 90px; flex-shrink: 0; color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.pe-desc { flex: 1; font-weight: 400; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pe-period { font-size: var(--fs-xs); color: var(--text-subtle); }
.pe-late { font-size: var(--fs-xs); font-weight: 500; color: var(--danger); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 3px; padding: 1px 5px; }
.pe-amount { font-weight: 500; flex-shrink: 0; }
.pe-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.payment-entry:hover .pe-actions { opacity: 1; }
.pe-action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; }
.pe-action-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.pe-action-btn--danger:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

/* ── Referral list ────────────────────────────────────────────── */
.referral-list { padding: 0; }
.referral-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px; width: 100%;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; text-align: left; color: var(--text); font-size: var(--fs-sm);
  transition: background 0.15s;
}
.referral-item:hover { background: rgba(255,255,255,0.03); }
.referral-item:last-child { border-bottom: none; }
.referral-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); flex-shrink: 0;
}
.referral-name { flex: 1; font-weight: 500; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ph-metrics { flex-wrap: wrap; }
  .ph-metric { min-width: calc(33% - 8px); }
  .ph-tab-bar { overflow-x: auto; }
}
@media (max-width: 600px) {
  .ph-metric { min-width: calc(50% - 8px); }
  .profile-tab-btn { padding: 12px 14px; font-size: var(--fs-xs); }
  .profile-header-v2 { padding: 16px 16px 0; }
  .ph-tab-bar { margin: 0 -16px; padding: 0 16px; }
}

/* ── Card badge danger variant ────────────────────────────────── */
.card-badge--danger { background: var(--danger); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   PROFILE V2 — Premium Polish Pass
   ══════════════════════════════════════════════════════════════════ */

/* 1. Add Note button — glass, right-aligned, compact */
.profile-tab-panel .notes-add-form {
  flex-direction: column; align-items: stretch; gap: 8px;
}
.profile-tab-panel .notes-add-form .btn-primary {
  background: rgba(0,78,249,0.08);
  border: 1px solid rgba(0,78,249,0.18);
  color: var(--primary);
  font-weight: 500; font-size: var(--fs-xs);
  padding: 7px 18px !important;
  align-self: flex-end;
  width: auto;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.profile-tab-panel .notes-add-form .btn-primary:hover {
  background: rgba(0,78,249,0.15);
  border-color: rgba(0,78,249,0.3);
}
.profile-tab-panel .notes-textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  transition: border-color 0.2s;
}
.profile-tab-panel .notes-textarea:focus {
  border-color: rgba(255,255,255,0.12);
  outline: none;
}

/* 2. Session tracker buttons — glass */
.profile-tab-panel .btn-record-payment {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important; font-size: var(--fs-xs) !important;
  padding: 6px 14px !important;
  transition: all 0.2s;
}
.profile-tab-panel .btn-record-payment:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
}

/* 3. Back to Clients — refined */
#btn-back-to-clients {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle);
  letter-spacing: 0.02em; transition: color 0.2s;
  text-decoration: none;
}
#btn-back-to-clients:hover { color: var(--text); }

/* 4. Card interior hierarchy — nested sections */
.profile-tab-panel .profile-details {
  padding: 2px 20px 14px;
}
.profile-tab-panel .detail-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.profile-tab-panel .detail-row:last-child { border-bottom: none; }

/* Session stats row — subtle glass nested cards */
.profile-tab-panel .session-stats,
.profile-tab-panel .ss-grid {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius);
}
.profile-tab-panel .ss-item {
  border-color: rgba(255,255,255,0.04) !important;
}

/* 5. Metric pill sub-label */
.ph-metric-sub {
  font-size: var(--fs-xs); font-weight: 400; margin-top: 3px;
  color: var(--text-subtle);
}

/* 7. Header presence — subtle gradient bg */
.profile-header-v2 {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
}

/* 8. Activity feed — bolder layout */
.activity-dot { width: 8px; height: 8px; }
.activity-date { font-weight: 500; font-size: var(--fs-xs); color: var(--text-muted); width: 85px; }
.activity-label { font-weight: 400; color: var(--text); }
.activity-item { padding: 11px 20px; }

/* 9. Card hover states */
.profile-tab-panel .card.profile-card {
  transition: box-shadow 0.25s, transform 0.25s;
}
.profile-tab-panel .card.profile-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

/* 10. Tab panel fade-in */
.profile-tab-panel {
  animation: profileTabFadeIn 0.2s ease;
}
@keyframes profileTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 11. Session tracker inner stat boxes */
.profile-tab-panel .ss-item,
.profile-tab-panel .session-stat-box {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}

/* 12. Card header weight refinement */
.profile-tab-panel .card.profile-card .card-header h2 {
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

/* Engagement score empty state — styled placeholder */
.profile-tab-panel #overview-churn-content .empty-state,
.profile-tab-panel .empty-state {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 400;
  font-style: italic;
  opacity: 0.6;
  padding: 12px 20px;
}

/* Collapsible sections in session tracker */
.profile-tab-panel .sess-section {
  border-color: rgba(255,255,255,0.05) !important;
}
.profile-tab-panel .sess-section-head {
  background: rgba(255,255,255,0.025) !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
  font-weight: 500 !important;
  font-size: var(--fs-xs) !important;
}
.profile-tab-panel .sess-section-head:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Session summary strip — glass nested */
.profile-tab-panel .sess-summary-strip {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
}
.profile-tab-panel .sess-summary-tile {
  border-color: var(--border) !important;
}

/* Profile action buttons — refined sizing */
.profile-header-actions .btn-save-attempt,
.profile-header-actions .btn-renew,
.profile-header-actions .btn-resume-pause,
.profile-header-actions .btn-undo-cancel {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
}

/* ── Template Editor ───────────────────────────────────────────── */
.tpl-btn-row { display: flex; gap: 10px; margin-top: 10px; }
.tpl-btn-row .btn-secondary { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 16px; flex: 1; text-align: left; }
.tpl-btn-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tpl-btn-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.tpl-var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tpl-var-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  font-family: monospace; font-size: var(--fs-xs); color: var(--primary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tpl-var-chip:hover { background: rgba(124,58,237,0.1); border-color: var(--primary); }
.tpl-var-chip.copied { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #22c55e; }
.tpl-editor-section { margin-bottom: 16px; }
.tpl-editor-section label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.tpl-editor-section textarea,
.tpl-editor-section input[type="text"] {
  width: 100%; font-size: var(--fs-sm); font-family: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.tpl-editor-section textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.tpl-editor-section textarea:focus,
.tpl-editor-section input[type="text"]:focus { border-color: var(--primary); }
.tpl-editor-section textarea::placeholder,
.tpl-editor-section input[type="text"]::placeholder { color: var(--text-muted); }
.tpl-editor-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.tpl-editor-actions .btn-test { display: flex; align-items: center; gap: 6px; }

/* ── Email Domain Setup ────────────────────────────────────────── */
.email-domain-divider { height: 1px; background: var(--border); margin: 18px 0 14px; }
.email-domain-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.email-domain-title { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.email-domain-status { font-size: var(--fs-xs); font-weight: 500; padding: 2px 8px; border-radius: 4px; }
.email-domain-status--none { background: var(--surface-2); color: var(--text-muted); }
.email-domain-status--pending { background: rgba(234,179,8,0.15); color: #eab308; }
.email-domain-status--verified { background: rgba(34,197,94,0.15); color: #22c55e; }
.email-domain-setup-row { display: flex; gap: 8px; margin-top: 10px; }
.email-domain-setup-row input { flex: 1; }
.email-domain-records { margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.email-domain-records table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.email-domain-records th { background: var(--surface-2); padding: 8px 10px; text-align: left; font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.email-domain-records td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text); word-break: break-all; }
.email-domain-records td:last-child { text-align: center; width: 60px; }
.dns-copy-cell { cursor: pointer; position: relative; transition: background 0.15s; }
.dns-copy-cell:hover { background: rgba(124,58,237,0.08); }
.dns-copy-cell.copied { background: rgba(34,197,94,0.12); }
.dns-copy-cell.copied::after { content: 'Copied'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: var(--fs-xs); font-weight: 500; color: #22c55e; pointer-events: none; }
.email-domain-verified { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); color: var(--success, #22c55e); font-weight: 500; }
.email-domain-actions { display: flex; gap: 8px; margin-top: 12px; }

.existing-client-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface-2); border-radius: 6px; border: 1px solid var(--border);
}
.existing-client-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; margin-top: 4px; }

/* Installment amount read-only display */
.installment-amount-display {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 11px;
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* ── Chart Labels ────────────────────────────────────────────── */
.chart-period-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* ── Footer ──────────────────────────────────────────────────── */
.crm-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  background: var(--bg);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.crm-footer-dot { opacity: 0.4; }
.crm-footer.cw-active { padding-top: 26px; padding-bottom: 26px; }

/* ── Settings generic row ────────────────────────────────────── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.settings-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-primary);
}
.settings-row-sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.settings-row-control { flex-shrink: 0; }

/* ── Theme Toggle ────────────────────────────────────────────── */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.theme-toggle-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-toggle-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); }
.theme-toggle-sub   { font-size: var(--fs-xs); color: var(--text-secondary); }

.theme-seg-control {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.theme-seg-btn {
  padding: 5px 11px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.theme-seg-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.theme-seg-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* Session format toggle */
.session-fmt-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
}
.session-fmt-btn {
  padding: 5px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.session-fmt-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.session-fmt-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* Continuity rate suggestion hint */
.continuity-suggest {
  margin-top: 6px;
  margin-bottom: -10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.continuity-suggest strong {
  color: #d97706;
  font-weight: 500;
}
.continuity-suggest-use {
  background: none;
  border: 1px solid rgba(217,119,6,0.35);
  border-radius: 4px;
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.continuity-suggest-use:hover { background: rgba(217,119,6,0.1); }

/* Continuity note in charge summary */
.charge-continuity-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Contact Info Card ───────────────────────────────────────────── */
.contact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-card-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}
.contact-info-card:hover .btn-card-edit { opacity: 1; }
.btn-card-edit:hover { color: var(--text-primary); background: var(--hover-overlay); }

/* Contact info view rows */
.contact-info-view { padding: 6px 0; }

.ci-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--row-border);
}
.ci-row:last-child { border-bottom: none; }
.ci-row--addr { align-items: flex-start; }

.ci-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  width: 18px;
}
.ci-icon--top { margin-top: 2px; }

.ci-val {
  font-size: var(--fs-base);
  color: var(--text-primary);
  flex: 1;
}
.ci-addr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.6;
}
.ci-addr span { font-size: var(--fs-base); color: var(--text-primary); }
.ci-empty { color: var(--text-secondary); }
.ci-age {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-left: 6px;
}

.ci-link {
  color: var(--text-primary);
  text-decoration: none;
}
.ci-link:hover { text-decoration: underline; }
.ci-link--accent { color: var(--accent); }
.ci-link--accent:hover { text-decoration: underline; }
.ci-ig-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  color: var(--accent);
  opacity: 0.75;
  transition: opacity 0.15s;
  vertical-align: middle;
}
.ci-ig-arrow:hover { opacity: 1; }
.ci-acquisition { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.ci-label { font-size: var(--fs-xs); color: var(--text-muted); min-width: 88px; }
.ci-client-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
}
.ci-client-link:hover { opacity: 0.8; }

/* Client autocomplete search */
.client-search-wrap { position: relative; }
.client-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 200;
  overflow: hidden;
}
.cs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.cs-item:hover { background: var(--hover, rgba(255,255,255,0.06)); }
.cs-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}
.cs-name { font-size: var(--fs-sm); flex: 1; }

/* Referrals card */
.referral-count-badge {
  background: var(--primary-dim);
  color: var(--primary);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.referrals-list { padding: 0; }
.referral-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.12s;
}
.referral-row:last-child { border-bottom: none; }
.referral-row:hover { background: var(--hover, rgba(255,255,255,0.06)); }
.referral-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}
.referral-name { flex: 1; font-size: var(--fs-sm); }

/* Contact inline edit form */
.contact-edit-form { padding: 16px 20px 20px; }

.ce-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.ce-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.ce-field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ce-field input,
.ce-field select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-base);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ce-field input:focus,
.ce-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.ce-field--full { margin-bottom: 10px; }
.ce-field--grow { flex: 1; }
.ce-field--state { flex: 0 0 76px; }
.ce-field--zip { flex: 0 0 100px; }
.ce-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.btn-ce-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: color 0.15s, border-color 0.15s;
}
.btn-ce-cancel:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.btn-ce-save {
  background: var(--primary);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.btn-ce-save:hover { background: var(--primary-hover); }

/* ============================================================
   BRAND COLOR PICKERS (settings)
   ============================================================ */
.brand-colors-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
}

.color-swatch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--row-border);
}
.color-swatch-row:last-child { border-bottom: none; }

.color-swatch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.color-swatch-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.color-swatch-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-picker-input {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  background: none;
  flex-shrink: 0;
}
.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-hex-input {
  width: 84px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: 'SF Mono', 'Fira Code', monospace;
  padding: 7px 10px;
  text-transform: uppercase;
}
.color-hex-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ============================================================
   LEADS BOARD
   ============================================================ */

.leads-layout-wrap {
  overflow-x: auto;
  padding-bottom: 16px;
}

/* Stat sections (volume + rate) — centered, fixed width */
.leads-stat-section {
  width: 960px;
  max-width: 100%;
  margin: 0 auto 36px;
}
.leads-stat-section:last-of-type { margin-bottom: 50px; }

/* Filter pill rows */
.leads-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.leads-filter-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: 6px;
  white-space: nowrap;
}
.leads-filter-pill {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 13px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.leads-filter-pill:hover { border-color: var(--primary); color: var(--primary); }
.leads-filter-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Count stat cards — normal rectangular cards */
.leads-count-bar { display: flex; gap: 16px; }
.leads-count-bar .stat-card { flex: 1; }

/* Rate/chevron funnel bar */
.leads-funnel-bar {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
}
/* Arrow/chevron pipeline shape — all middle cards */
.leads-funnel-bar .stat-card {
  flex: 1;
  min-width: unset;
  padding: 12px 34px 12px 30px;
  border-radius: 0;
  border: none;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}
/* First card — flat left edge, pointed right */
.leads-funnel-bar .stat-card:first-child {
  padding-left: 18px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}
/* Last card — pointed left indent, flat right edge */
.leads-funnel-bar .stat-card:last-child {
  padding-right: 18px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%);
}
.leads-funnel-bar .stat-label { font-size: var(--fs-xs); margin-bottom: 3px; }
.leads-funnel-bar .stat-value { font-size: var(--fs-xl); margin-bottom: 2px; }
.leads-funnel-bar .stat-sub   { font-size: var(--fs-xs); }
.leads-funnel-stat .stat-value { color: var(--primary); }
.rate-sample { opacity: 0.55; font-style: italic; }

/* Board — centered, scrolls independently */
.leads-board-wrap {
  width: max-content;
  margin: 0 auto;
  overflow-x: unset;
  padding-bottom: 0;
}
.leads-board {
  display: flex;
  gap: 12px;
  min-width: max-content;
  align-items: flex-start;
}

/* Column */
.leads-col {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.leads-col.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; }

.leads-col-header {
  padding: 12px 14px 10px;
  background: var(--stage-dim);
  border-bottom: 1px solid var(--border);
}
.lch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.lch-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--stage-accent);
}
.lch-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 20px;
  padding: 1px 8px;
}
.lch-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.leads-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 80px;
}
.leads-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}

/* Lead card */
.lead-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
  user-select: none;
}
.lead-card:hover { background: var(--surface-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.lead-card.dragging { opacity: 0.4; }

.lc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.lc-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-days {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.lc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.lc-source {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
}
.lc-value {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--success);
}
.lc-call-date {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 4px;
}
.lc-note-count {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.lc-convert-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--success);
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.lc-convert-btn:hover { background: rgba(34,197,94,0.2); }

.lc-verif-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.lc-verif-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--success);
  background: var(--success-dim);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: default;
  user-select: none;
}

/* Lead modal */
.lead-modal {
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.lead-modal-body { padding-bottom: 0; }
.lead-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  gap: 10px;
  flex-shrink: 0;
}
.lead-modal-footer-left,
.lead-modal-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Notes section */
.lead-notes-section {
  border-top: 1px solid var(--border);
  padding: 16px 24px 20px;
}
.lead-notes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.lead-notes-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.lead-notes-add-btn {
  align-self: flex-end;
}
.lead-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.ln-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.ln-text {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: pre-wrap;
}
.ln-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.ln-timestamp {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.ln-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-base);
  padding: 0 2px;
  line-height: 1;
}
.ln-delete:hover { color: var(--danger); }
.ln-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}

/* Forecast lead badge */
.fc-pipe-lead-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(99,102,241,0.15);
  color: #6366f1;
  border-radius: 20px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ============================================================
   REVENUE FORECAST
   ============================================================ */

/* ============================================================
   INBOX — coach messaging
   ============================================================ */

/* Inbox view override — no padding, fill the container exactly */
#view-inbox {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#view-inbox .view-header {
  padding: 20px 24px 0;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.inbox-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 800px) {
  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-list-pane.conv-open { display: none; }
  .inbox-chat-pane { border-left: none !important; }
}

.inbox-list-pane {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-search-wrap {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.inbox-search {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  outline: none;
}
.inbox-search:focus { border-color: var(--primary); }
.inbox-search::placeholder { color: var(--text-muted); }

.inbox-conversations {
  flex: 1;
  overflow-y: auto;
}
.inbox-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.inbox-conv-item:hover { background: var(--surface-2); }
.inbox-conv-item.active {
  background: var(--primary-bg, rgba(99,102,241,0.08));
  border-left: 3px solid var(--primary);
  padding-left: 13px;
}

.inbox-conv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-bg, rgba(99,102,241,0.1));
  color: var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inbox-conv-info { flex: 1; min-width: 0; }
.inbox-conv-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-conv-preview {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.inbox-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.inbox-conv-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.inbox-conv-unread {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  background: var(--primary);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.inbox-conv-avatar--group {
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.inbox-conv-member-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}
.inbox-group-member-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 8px;
}
.inbox-group-delete {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inbox-group-delete:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: var(--danger);
}
.inbox-msg-sender {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 2px 4px;
}
.inbox-conv-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.inbox-chat-pane {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}
.inbox-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.inbox-chat-back {
  display: none;
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
@media (max-width: 800px) {
  .inbox-chat-back { display: inline-flex; }
}
.inbox-chat-name {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.inbox-chat-name--link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.inbox-chat-name--link:hover { color: var(--primary); }
.inbox-call-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.inbox-call-btn:hover { color: #22c55e; background: rgba(34,197,94,0.1); }

/* ── Filter tabs ──────────────────────────────────────── */
.inbox-filter-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.inbox-filter-tabs::-webkit-scrollbar { display: none; }
.inbox-filter-tab {
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.inbox-filter-tab:hover { background: var(--surface-2); color: var(--text); }
.inbox-filter-tab.active {
  background: var(--primary-bg, rgba(99,102,241,0.08));
  color: var(--primary);
  border-color: rgba(99,102,241,0.2);
}

/* ── Chat header action buttons ───────────────────────── */
.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.inbox-ha-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inbox-ha-btn:hover { background: var(--surface-2); color: var(--text); }
.inbox-ha-btn.active { color: #eab308; }
.inbox-ha-btn.active:hover { color: #ca8a04; }
.inbox-ha-btn--danger:hover { color: var(--danger); background: var(--danger-dim, rgba(239,68,68,0.08)); }

/* ── Conversation list indicators ─────────────────────── */
.inbox-conv-star {
  color: #eab308;
  margin-right: 4px;
  vertical-align: -1px;
  flex-shrink: 0;
}
.inbox-conv-ch {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: 1px;
}
.inbox-conv-ch--sms { background: rgba(34,197,94,0.1); color: #22c55e; }
.inbox-conv-ch--email { background: rgba(99,102,241,0.1); color: var(--primary); }
.inbox-conv-ch--call { background: rgba(234,179,8,0.1); color: #eab308; }

/* ── Scheduled button in inbox header ──────────────────── */
.inbox-scheduled-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.inbox-scheduled-btn:hover { color: var(--text); border-color: var(--primary); }

/* ── Scheduled queue modal ────────────────────────────── */
.sched-queue-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.sched-queue-tab {
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.sched-queue-tab:hover { color: var(--text); background: var(--surface-2); }
.sched-queue-tab.active {
  color: var(--primary);
  background: var(--primary-bg, rgba(99,102,241,0.08));
  border-color: rgba(99,102,241,0.2);
}
.sched-queue-body {
  overflow-y: auto;
  max-height: 420px;
}
.sched-queue-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.sched-queue-item:last-child { border-bottom: none; }
.sched-queue-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-queue-client {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.sched-queue-time {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sched-queue-item-body {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-queue-item-actions {
  margin-top: 6px;
}
.sched-queue-cancel {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--danger, #ef4444);
  cursor: pointer;
  transition: all 0.15s;
}
.sched-queue-cancel:hover { background: var(--danger-dim, rgba(239,68,68,0.08)); border-color: var(--danger); }

/* ── Inline scheduled (GHL-style) ─────────────────────── */
.inbox-sched-inline {
  margin: 8px 0;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.inbox-sched-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(99,102,241,0.08);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
}
.inbox-sched-time {
  font-weight: 500;
  color: var(--text-muted);
}
.inbox-sched-cancel {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.inbox-sched-cancel:hover { color: var(--danger); }
.inbox-sched-preview {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Group read-by count — shown on coach's sent group messages */
.inbox-msg-group-read {
  font-size: 11px;
  color: var(--text-muted, #71717a);
  margin-left: 4px;
  font-weight: 500;
}
.inbox-msg-group-read--all {
  color: var(--primary, #6366f1);
}

/* Typing indicator — dots while the client is composing */
.inbox-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 10px 14px;
  margin-top: 4px;
  background: var(--panel, #18181b);
  border: 1px solid var(--border, #27272a);
  border-radius: 16px 16px 16px 4px;
  max-width: 60px;
}
.inbox-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #71717a);
  animation: inbox-typing-bounce 1.2s infinite ease-in-out;
}
.inbox-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.inbox-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes inbox-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.inbox-date-sep {
  text-align: center;
  margin: 12px 0 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.inbox-date-sep span {
  background: var(--surface-2);
  padding: 3px 10px;
  border-radius: 8px;
}
.inbox-msg {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 2px;
}
.inbox-msg--coach {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.inbox-msg--coach.inbox-first { border-top-right-radius: 18px; }
.inbox-msg--coach.inbox-mid { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.inbox-msg--coach.inbox-last { border-top-right-radius: 6px; border-bottom-right-radius: 18px; }
.inbox-msg--coach.inbox-solo { border-radius: 18px; border-bottom-right-radius: 6px; }
.inbox-msg--client {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}
.inbox-msg--client.inbox-first { border-top-left-radius: 18px; }
.inbox-msg--client.inbox-mid { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.inbox-msg--client.inbox-last { border-top-left-radius: 6px; border-bottom-left-radius: 18px; }
.inbox-msg--client.inbox-solo { border-radius: 18px; border-bottom-left-radius: 6px; }
.inbox-msg-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  margin-bottom: 4px;
}
.inbox-msg-time--coach { justify-content: flex-end; padding-right: 4px; }
.inbox-msg-time--client { justify-content: flex-start; padding-left: 4px; }
.inbox-msg-check {
  display: inline-flex;
  color: var(--primary);
}
.inbox-msg-check--pending { color: #b0b5cc; }
[data-theme="light"] .inbox-msg-check--pending { color: #c5c9de; }
.inbox-msg-check svg { width: 14px; height: 14px; }

.inbox-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.inbox-chat-input {
  flex: 1;
  padding: 10px 14px;
  font-size: var(--fs-base);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--text);
  outline: none;
  resize: none;
  max-height: 100px;
  overflow-y: auto;
  font-family: inherit;
}
.inbox-chat-input:focus { border-color: var(--primary); }
.inbox-chat-input::placeholder { color: var(--text-muted); }
.inbox-chat-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.inbox-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.inbox-schedule-msg-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.inbox-schedule-msg-btn:hover { color: var(--accent); }

/* ── Unified Composer ─────────────────────────────────── */
.uc-wrap {
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: rgba(99,102,241,0.03);
  flex-shrink: 0;
  position: relative;
}
/* Inline row: dropdown + textarea + voice + send */
.uc-inline-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
}
.uc-channel-dropdown { position: relative; }
.uc-channel-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.uc-channel-trigger:hover { border-color: var(--accent); }
.uc-channel-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 50;
  min-width: 150px;
  padding: 4px;
  backdrop-filter: blur(12px);
}
.uc-channel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.uc-channel-option:hover { background: var(--bg-hover); }
.uc-channel-option.active { color: var(--accent); font-weight: 500; }
/* Channel fields */
.uc-fields { padding: 0 12px; border-bottom: 1px solid var(--border); }
.uc-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.uc-field-row:last-child { border-bottom: none; }
.uc-field-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-xs);
  min-width: 48px;
  flex-shrink: 0;
}
.uc-field-value {
  color: var(--text);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-field-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 2px 0;
  outline: none;
}
.uc-field-input::placeholder { color: var(--text-muted); }
.uc-textarea {
  flex: 1;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  outline: none;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  overflow-y: auto;
  font-family: inherit;
}
.uc-textarea:focus { border-color: var(--accent); }
.uc-textarea::placeholder { color: var(--text-muted); }
/* Expanded textarea for SMS/email */
.uc-wrap[data-channel="sms"] .uc-textarea,
.uc-wrap[data-channel="email"] .uc-textarea {
  border-radius: 8px;
  min-height: 80px;
  padding: 10px 14px;
}
.uc-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.uc-voice-btn:hover { color: var(--text); }
.uc-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.uc-attach-btn:hover { color: var(--primary); }
.uc-wrap[data-channel="sms"] .uc-voice-btn,
.uc-wrap[data-channel="email"] .uc-voice-btn { display: none; }

/* Attachment pills */
.uc-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 0;
}
.uc-attachment-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text);
}
.uc-attachment-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-attachment-size { color: var(--text-muted); font-size: var(--fs-xs); }
.uc-attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.uc-attachment-remove:hover { color: var(--danger); background: var(--danger-dim, rgba(239,68,68,0.08)); }

/* Email card attachment list */
.inbox-ecard-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.inbox-ecard-att {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* Email/SMS: push send button to the right */
.uc-wrap[data-channel="sms"] .uc-inline-row,
.uc-wrap[data-channel="email"] .uc-inline-row {
  justify-content: space-between;
}
.uc-wrap[data-channel="email"] .uc-textarea { display: none; }
/* Split send button */
.uc-send-split {
  display: flex;
  position: relative;
  margin-left: auto;
}
.uc-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
}
.uc-send-btn:hover { opacity: 0.9; }
.uc-send-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 0 6px 6px 0;
  border-left: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
}
.uc-send-drop:hover { opacity: 0.9; }
.uc-send-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 50;
  min-width: 140px;
  padding: 4px;
  backdrop-filter: blur(12px);
}
.uc-send-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.uc-send-option:hover { background: var(--bg-hover); }

/* Voice recording */
.inbox-voice-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inbox-voice-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--text-muted); }
.inbox-voice-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.inbox-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--danger-dim);
  border-top: 1px solid var(--danger);
}
.inbox-voice-bar.hidden { display: none; }
.inbox-voice-indicator {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: voicePulse 1.2s ease-in-out infinite;
}
.inbox-voice-timer {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.inbox-voice-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex: 1;
}
.inbox-voice-cancel {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.inbox-voice-cancel:hover { color: var(--danger); }
/* Voice attachment pill */
.inbox-voice-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 0;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  width: fit-content;
}
.inbox-voice-attachment-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.inbox-voice-attachment-play:hover { opacity: 0.85; }
.inbox-voice-attachment-play svg { margin-left: 1px; }
.inbox-voice-attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--surface-3, #2a2e3d);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.inbox-voice-attachment-remove:hover { background: var(--danger); color: #fff; }

.inbox-voice-stop-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inbox-voice-stop-rec:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.5); }
.inbox-voice-stop-rec::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ef4444;
  flex-shrink: 0;
}
.inbox-voice-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.inbox-voice-send:hover { opacity: 0.9; }

/* Voice message bubbles */
.inbox-msg--voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.voice-play-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  color: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.inbox-msg--client .voice-play-btn { background: rgba(255,255,255,0.2); }
.inbox-msg--coach .voice-play-btn { background: var(--surface-hover); }
.voice-play-btn:hover { opacity: 0.8; }
.voice-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.voice-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.inbox-msg--coach .voice-progress-bar { background: var(--border); }
.voice-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.2s linear;
}
.inbox-msg--client .voice-progress-fill { background: rgba(255,255,255,0.6); }
.inbox-msg--coach .voice-progress-fill { background: var(--primary); }
.voice-duration {
  font-size: var(--fs-xs);
  opacity: 0.7;
}

.inbox-chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ============================================================
   CHAT WIDGET (.cw-*)
   ============================================================ */

/* Footer slot for minimized pill — pushed to far right, accounts for scrollbar */
#cw-footer-slot {
  position: absolute;
  right: 0;
  padding-right: calc(32px + 8px);
}
#cw-footer-slot.cw-hidden { display: none; }

/* Expanded panel — fixed above footer, right-aligned with card edge */
#chat-widget {
  position: fixed;
  bottom: 54px;
  right: calc(32px + 8px);
  z-index: 9000;
  font-family: inherit;
}
#chat-widget.cw-hidden { display: none; }

/* Minimized pill (inside footer) */
.cw-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(0, 78, 249, 0.08);
  border: 1px solid rgba(0, 78, 249, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.cw-pill:hover { background: rgba(0, 78, 249, 0.14); border-color: rgba(0, 78, 249, 0.35); }
.cw-pill-icon { color: var(--primary); flex-shrink: 0; opacity: 0.8; }
.cw-pill-name { font-size: var(--fs-xs); font-weight: 500; color: var(--primary); letter-spacing: 0.02em; }
.cw-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
}

/* Expanded panel */
.cw-panel {
  width: 380px;
  height: 520px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}

.cw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cw-header-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cw-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cw-btn-minimize, .cw-btn-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cw-btn-minimize:hover, .cw-btn-close:hover { background: var(--surface-2); color: var(--text); }

/* Messages area */
.cw-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cw-messages .inbox-date-sep { margin: 12px 0 8px; }
.cw-messages .inbox-msg { max-width: 85%; font-size: var(--fs-sm); }
.cw-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 20px;
}

/* Voice attachment pill */
.cw-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  width: fit-content;
}
.cw-attachment.cw-hidden { display: none; }
.cw-attachment-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.cw-attachment-play:hover { opacity: 0.85; }
.cw-attachment-play svg { margin-left: 1px; }
.cw-attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--surface-3, #2a2e3d);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.cw-attachment-remove:hover { background: var(--danger, #ef4444); color: #fff; }

/* Composer */
.cw-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cw-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  max-height: 80px;
  line-height: 1.4;
}
.cw-input:focus { border-color: var(--primary); }
.cw-input::placeholder { color: var(--text-muted); }

.cw-voice-btn, .cw-send-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.cw-voice-btn:hover, .cw-send-btn:hover { color: var(--text); background: var(--surface-2); }
.cw-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cw-voice-btn.recording { color: #ef4444; animation: cw-pulse 1s infinite; }
@keyframes cw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Composer action buttons (attach, template) */
.cw-composer-btn {
  background: none; border: none; color: var(--text-subtle); cursor: pointer;
  padding: 6px; border-radius: 6px; display: flex; align-items: center;
}
.cw-composer-btn:hover { color: var(--text); background: var(--surface-2); }

/* File attachment pill */
.cw-file-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 0 12px 4px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 8px; font-size: var(--fs-xs); color: var(--text);
}
.cw-file-pill-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* Chat template picker */
.cw-chat-templates {
  border-top: 1px solid var(--border); padding: 4px 8px;
  max-height: 160px; overflow-y: auto; background: var(--surface);
}
.cw-tmpl-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; font-size: var(--fs-xs); font-weight: 500;
  background: none; border: none; cursor: pointer;
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.cw-tmpl-item:hover { background: var(--surface-2); }
.cw-tmpl-empty { padding: 10px; font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; }

/* Message attachment rendering */
.inbox-msg-attachment-img { margin-top: 4px; }
.inbox-msg-attachment-img img { max-width: 220px; max-height: 180px; border-radius: 8px; cursor: pointer; }
.inbox-msg-attachment-file {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 6px 12px;
  background: rgba(0,0,0,0.05); border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--primary);
  text-decoration: none;
}
.inbox-msg-attachment-file:hover { background: rgba(0,0,0,0.08); }

/* Voice transcript */
.inbox-msg-transcript {
  font-size: var(--fs-xs); color: var(--text-subtle); padding: 2px 12px 6px;
  max-width: 280px; line-height: 1.4; font-style: italic;
}
.inbox-msg-transcript--coach { margin-left: auto; text-align: right; }

/* Message search results */
.inbox-search-results {
  border-bottom: 1px solid var(--border);
  max-height: 300px; overflow-y: auto;
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}
.inbox-search-results.hidden { display: none; }
.inbox-search-header {
  padding: 8px 14px; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.inbox-search-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.inbox-search-item:hover { background: var(--surface-2); }
.inbox-search-item-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.inbox-search-item-date { font-size: var(--fs-xs); font-weight: 400; color: var(--text-subtle); margin-left: 6px; }
.inbox-search-item-body {
  font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-search-item-body mark { background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--text); border-radius: 2px; padding: 0 1px; }
.inbox-search-empty { padding: 16px; text-align: center; font-size: var(--fs-xs); color: var(--text-subtle); }

/* Pinned messages section */
.inbox-pinned-section {
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  background: color-mix(in srgb, #f59e0b 4%, var(--surface));
}
.inbox-pinned-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  color: #92400e; display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px; letter-spacing: 0.3px;
}
.inbox-pinned-msg {
  padding: 8px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  margin-bottom: 4px;
}
.inbox-pinned-msg-body { font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.inbox-pinned-msg-meta {
  font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.inbox-pinned-unpin {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); font-size: var(--fs-lg); padding: 0 4px;
}
.inbox-pinned-unpin:hover { color: var(--error); }

/* Pin button on message meta */
.inbox-pin-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); padding: 0 2px; margin-left: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.inbox-msg-time:hover .inbox-pin-btn { opacity: 1; }
.inbox-pin-btn.pinned { opacity: 1; color: #f59e0b; }
.inbox-pin-btn:hover { color: var(--primary); }

/* ── Reply micro-floater (above a bubble that replied to another) ── */
.inbox-msg-wrap { position: relative; display: flex; flex-direction: column; }
.inbox-msg-wrap--coach { align-items: flex-end; }
.inbox-msg-wrap--client { align-items: flex-start; }
.inbox-msg-wrap.inbox-msg-wrap--highlight .inbox-msg,
.inbox-msg-wrap.inbox-msg-wrap--highlight .inbox-reply-floater {
  box-shadow: 0 0 0 2px rgba(91,84,235,0.45);
  transition: box-shadow 400ms ease;
}

.inbox-reply-floater {
  max-width: 70%;
  opacity: 0.68;
  margin-bottom: 0;
  padding: 4px 11px;
  font-size: 12px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  user-select: none;
  transition: opacity 150ms ease;
}
.inbox-reply-floater:hover { opacity: 0.9; }
.inbox-reply-floater--coach {
  background: var(--primary); color: #fff;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 14px;
}
.inbox-reply-floater--client {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 14px;
}
.inbox-reply-connector {
  width: 1px; height: 7px;
  background: rgba(140,145,170,0.4);
  align-self: flex-end;
  margin-right: 14px;
  margin-bottom: -1px;
}
.inbox-msg-wrap--client .inbox-reply-connector {
  align-self: flex-start;
  margin-right: 0;
  margin-left: 14px;
}

/* ── Reactions row (below bubble) ── */
.inbox-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -2px;
  margin-bottom: 4px;
  padding: 0 4px;
}
.inbox-reactions--coach { align-self: flex-end; }
.inbox-reactions--client { align-self: flex-start; }
.inbox-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease;
  user-select: none;
}
.inbox-reaction-chip:hover { background: rgba(255,255,255,0.08); }
.inbox-reaction-chip--mine {
  background: rgba(91,84,235,0.18);
  border-color: rgba(91,84,235,0.5);
  color: var(--text);
}
.inbox-reaction-emoji { font-size: 12px; line-height: 1; }

/* ── Hover-action strip on messages ── */
.inbox-msg-actions {
  position: absolute;
  top: -14px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: rgba(22,24,35,0.98);
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
[data-theme="light"] .inbox-msg-actions {
  background: #fff;
  border-color: #e4e4e7;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.inbox-msg-wrap--coach .inbox-msg-actions { right: 4px; }
.inbox-msg-wrap--client .inbox-msg-actions { left: 4px; }
.inbox-msg-wrap:hover .inbox-msg-actions {
  opacity: 1;
  pointer-events: auto;
}
.inbox-msg-action-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  transition: background 100ms ease;
  padding: 0;
}
.inbox-msg-action-btn:hover {
  background: rgba(255,255,255,0.08);
}
[data-theme="light"] .inbox-msg-action-btn:hover { background: rgba(0,0,0,0.05); }

/* Quick emoji set rendered inline in the strip */
.inbox-msg-action-emoji {
  font-size: 16px; line-height: 1;
}

/* ── Reply composer chip ── */
.inbox-reply-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 14px 6px;
  border-left: 2px solid var(--primary);
  background: rgba(91,84,235,0.08);
  border-radius: 8px;
}
.inbox-reply-chip-body {
  flex: 1;
  min-width: 0;
}
.inbox-reply-chip-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.inbox-reply-chip-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-reply-chip-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.inbox-reply-chip-close:hover { color: var(--text); }

/* ── Emoji picker popover ── */
.inbox-emoji-popover {
  position: absolute;
  z-index: 1000;
  width: 320px;
  max-height: 380px;
  background: rgba(22,24,35,0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-theme="light"] .inbox-emoji-popover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}
.inbox-emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
.inbox-emoji-tab {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-emoji-tab.active {
  color: var(--text);
  background: rgba(91,84,235,0.18);
}
.inbox-emoji-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.inbox-emoji-cell {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-size: 22px;
  padding: 0;
  transition: background 80ms ease;
}
.inbox-emoji-cell:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .inbox-emoji-cell:hover { background: rgba(0,0,0,0.04); }

/* ── System Health event modal ── */
.sh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: shFadeIn 150ms ease-out;
}
@keyframes shFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sh-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: shSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes shSlideIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.sh-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.sh-modal-header-left {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.sh-modal-sev {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 3px;
}
.sh-modal-title-wrap { flex: 1; min-width: 0; }
.sh-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.sh-modal-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.sh-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  flex-shrink: 0;
}
.sh-modal-close:hover { color: var(--text); }

.sh-modal-status {
  margin: 0 22px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 14px;
}
.sh-modal-status--resolved {
  background: rgba(18,165,88,0.1);
  color: #12a558;
  border: 1px solid rgba(18,165,88,0.3);
}
.sh-modal-status--ongoing {
  background: rgba(229,72,77,0.1);
  color: #e5484d;
  border: 1px solid rgba(229,72,77,0.3);
}
.sh-modal-status--stale {
  background: rgba(107,112,144,0.1);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.sh-modal-status--info {
  background: rgba(91,84,235,0.1);
  color: var(--primary);
  border: 1px solid rgba(91,84,235,0.3);
}
.sh-modal-section {
  padding: 14px 22px 0;
}
.sh-modal-section:last-of-type { padding-bottom: 10px; }
.sh-modal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.sh-modal-body {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.sh-modal-body--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-all;
}
.sh-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}
.sh-modal-detail {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
}
.sh-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.sh-modal-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.sh-modal-copy-btn:hover { opacity: 0.88; }
.sh-modal-ok-btn {
  padding: 8px 14px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.sh-modal-ok-btn:hover { background: var(--bg); }

/* Hover state on log rows */
.sh-row:hover td { background: var(--bg); }
.sh-ongoing-dot {
  animation: shDotPulse 1.4s ease-in-out infinite;
}
@keyframes shDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Admin Panel button — health badge (owner only) ── */
#btn-admin-panel {
  position: relative;
}
.admin-health-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef8f1f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 8px rgba(239,143,31,0.45);
  pointer-events: none;
  letter-spacing: 0.2px;
  z-index: 2;
  animation: adminBadgePulse 1.8s ease-in-out infinite;
}
.admin-health-badge--error {
  background: #e5484d;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 10px rgba(229,72,77,0.55);
  animation: adminBadgePulseError 1.4s ease-in-out infinite;
}
#btn-admin-panel.admin-health-active {
  box-shadow: 0 0 0 1px rgba(239,143,31,0.5);
}
#btn-admin-panel.admin-health-active:has(.admin-health-badge--error) {
  box-shadow: 0 0 0 1px rgba(229,72,77,0.6);
}
@keyframes adminBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes adminBadgePulseError {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--surface), 0 2px 10px rgba(229,72,77,0.55); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--surface), 0 4px 18px rgba(229,72,77,0.85); }
}

/* ── Realtime-degraded banner ── */
.inbox-realtime-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0;
  background: rgba(239,143,31,0.1);
  border-bottom: 1px solid rgba(239,143,31,0.3);
  color: #ef8f1f;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  animation: rtBannerIn 180ms ease-out;
}
@keyframes rtBannerIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Voice recording bar */
.cw-voice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cw-voice-bar.cw-hidden { display: none; }
.cw-voice-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: cw-pulse 1s infinite;
}
.cw-voice-timer { font-size: var(--fs-xs); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-voice-label { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.cw-voice-cancel, .cw-voice-stop {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.cw-voice-cancel { background: var(--surface-2); color: var(--text-muted); }
.cw-voice-cancel:hover { background: var(--surface-3, #2a2e3d); color: var(--text); }
.cw-voice-stop-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cw-voice-stop-rec:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.5); }
.cw-voice-stop-rec::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #ef4444;
  flex-shrink: 0;
}
.cw-voice-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cw-voice-send:hover { opacity: 0.88; }
.cw-voice-send.cw-hidden, .cw-voice-stop-rec.cw-hidden { display: none; }

/* Light theme overrides */
[data-theme="light"] .cw-pill { background: var(--primary); }
[data-theme="light"] .cw-pill:hover { opacity: 0.88; }
[data-theme="light"] .cw-panel { box-shadow: 0 8px 32px rgba(0,0,0,0.15); }

/* ============================================================
   FORECAST
   ============================================================ */

.forecast-stats-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.forecast-stats-bar .stat-card {
  flex: 1;
  min-width: 140px;
}

/* Chart card */
.forecast-chart-card {
  margin-bottom: 20px;
  padding: 20px 24px;
}
.forecast-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.forecast-chart-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
}
.forecast-chart-sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.forecast-chart-wrap {
  height: 220px;
  position: relative;
}
.forecast-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.fc-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

/* Lower two-column section */
.forecast-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 860px) {
  .forecast-lower { grid-template-columns: 1fr; }
}
.forecast-lower-card {
  display: flex;
  flex-direction: column;
}
.forecast-lower-card .card-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}
.forecast-lower-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: auto;
  padding-top: 2px;
  text-align: right;
}

/* At-risk list */
.fc-risk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.fc-risk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.15s;
}
.fc-risk-row:hover { background: var(--surface-hover); }
.fc-risk-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-risk-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-risk-days {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}
.fc-risk-days--urgent {
  color: var(--warning);
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.08);
}
.fc-risk-billing {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fc-risk-value {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--danger);
  white-space: nowrap;
}

/* Pipeline list */
.fc-pipe-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.fc-pipe-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.fc-pipe-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.15s;
}
.fc-pipe-row:hover { background: var(--surface-hover); }
.fc-pipe-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-pipe-stage {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}
.fc-pipe-value {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--success);
  white-space: nowrap;
  text-align: right;
  min-width: 80px;
}
.fc-pipe-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 0;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.fc-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 16px 12px;
  text-align: center;
  font-style: italic;
}

/* ============================================================
   RENEWAL PIPELINE BOARD
   ============================================================ */

/* Stats bar */
.pipeline-stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pipeline-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pipeline-stat:hover {
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18), 0 4px 20px rgba(124,58,237,0.15);
}
.ps-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ps-value {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.ps-label--urgent { color: var(--warning); }
.ps-value--urgent { color: var(--warning); }

/* Centering shell — sizes to board content, then centers on page */
.pipeline-center-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* Board wrapper — horizontal scroll */
.pipeline-board-wrap {
  overflow-x: auto;
  padding-bottom: 16px;
}
.pipeline-board {
  display: flex;
  gap: 12px;
  min-width: max-content;
  align-items: flex-start;
}

/* Column */
.pipeline-col {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pipeline-col.drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim);
}

/* Column header */
.pipeline-col-header {
  padding: 12px 14px 10px;
  background: var(--stage-dim);
  border-bottom: 1px solid var(--border);
}
.pch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.pch-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stage-accent, var(--text-muted));
}
.pch-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 6px;
  line-height: 1.6;
}
.pch-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Cards list */
.pipeline-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}
.pipeline-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* PIF opportunity badge on card */
.pc-pif-badge {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(217,119,6,0.15); color: #d97706;
  border: 1px solid rgba(217,119,6,0.3);
}

/* Renewal Queue — auto-stage combined column */
.pipeline-col--auto { cursor: default; }
.pipeline-group-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 4px;
  margin-top: 4px;
}
.pipeline-group-hdr:first-child { margin-top: 0; }
.pgh-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pgh-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 6px;
}
.pipeline-empty--sm {
  padding: 10px 8px;
  font-size: var(--fs-xs);
}

/* Card */
.pipeline-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: grab;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
}
.pipeline-card:hover {
  background: var(--surface-hover);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.pipeline-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(1.5deg);
}
.pipeline-card--reach-out {
  border-left: 3px solid var(--warning);
}
.pipeline-card--renewed {
  border-left: 3px solid var(--success);
}
.pipeline-card--not-renewing {
  border-left: 3px solid var(--danger);
  opacity: 0.75;
}
.pipeline-card--pif {
  border-left: 3px solid #d97706;
  background: rgba(217,119,6,0.04);
}

/* Card header row */
.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}
.pc-name {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}
.pc-name:hover { color: var(--primary); text-decoration: underline; }
.pc-header-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Days badge */
.pc-days {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.pc-days--ok      { background: var(--success-dim);  color: var(--success); }
.pc-days--caution { background: var(--info-dim);      color: var(--info); }
.pc-days--warn    { background: var(--warning-dim);   color: var(--warning); }
.pc-days--urgent  { background: var(--danger-dim);    color: var(--danger); }

/* Note button */
.pc-btn-note {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 7px;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.pc-btn-note:hover { color: var(--primary); border-color: var(--primary); }

/* Single info line: End Date · Service · Value */
.pc-info-line {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PIF banner across card top */
.pc-pif-banner {
  margin: -14px -16px 12px;
  padding: 5px 16px;
  background: rgba(217,119,6,0.13);
  border-bottom: 1px solid rgba(217,119,6,0.22);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #d97706;
  text-align: center;
}

/* PIF section — continuity + pitch value rows */
.pc-pif-section {
  border-top: 1px solid rgba(217,119,6,0.2);
  padding-top: 10px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-pif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pc-pif-row-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
.pc-pif-rate {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #d97706;
}

/* Last contact + note */
.pc-last-contact {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pc-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 7px;
  line-height: 1.4;
  font-style: italic;
}

/* Card action buttons */
.pc-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pc-actions--full .pc-btn { flex: 1; justify-content: center; }
.pc-btn {
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.pc-btn:hover { opacity: 0.85; }
.pc-btn--primary  { background: var(--primary-dim);  color: var(--primary); }
.pc-btn--urgent   { background: var(--warning-dim);  color: var(--warning); }
.pc-btn--purple   { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.pc-btn--success  { background: var(--success-dim);  color: var(--success); }
.pc-btn--danger   { background: var(--danger-dim);   color: var(--danger); }
.pc-btn--ghost    { background: var(--surface-2);    color: var(--text-muted); border: 1px solid var(--border); }
.pc-btn--pif      { background: rgba(217,119,6,0.14); color: #d97706; font-weight: 500; }

/* Badge service small variant */
.badge-service--sm {
  font-size: var(--fs-xs);
  padding: 1px 6px;
}

/* ── Pipeline Note Modal ───────────────────────────── */
.pipeline-note-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.pipeline-note-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 500px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: width 0.28s ease;
}
.pipeline-note-modal.pnm-expanded {
  width: min(1080px, calc(100vw - 32px));
  flex-direction: row;
  align-items: stretch;
  max-height: calc(100vh - 40px);
}
/* Left column — form + log */
.pnm-left-col {
  display: flex;
  flex-direction: column;
  flex: 1; /* fills full width when not expanded */
  min-width: 0;
  overflow-y: auto;
}
.pipeline-note-modal.pnm-expanded .pnm-left-col {
  width: 480px;
  min-width: 480px;
  flex: 0 0 480px;
  border-right: 1px solid var(--border);
}
/* Right column — talking points */
.pnm-tp-panel {
  border-top: 2px solid rgba(217,119,6,0.3);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pipeline-note-modal.pnm-expanded .pnm-tp-panel {
  flex: 1;
  border-top: none;
  border-left: 2px solid rgba(217,119,6,0.3);
  max-height: none;
  overflow: hidden; /* children scroll internally */
}
.pnm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.pnm-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
}
.pnm-close {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.pnm-close:hover { color: var(--text-primary); }
.pnm-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
}
.pnm-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pnm-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-family: inherit;
  padding: 8px 10px;
  width: 100%;
}
.pnm-input:focus { outline: none; border-color: var(--primary); }
.pnm-textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  padding: 9px 10px;
  width: 100%;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.pnm-textarea:focus { outline: none; border-color: var(--primary); }
.pnm-actions {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.pnm-save-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Ghost/outline save button for secondary action */
#pnm-save-secondary {
  font-size: var(--fs-xs);
  padding: 7px 12px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#pnm-save-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Pipeline window filter ──────────────────────────────── */
.pipeline-controls-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.pw-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}
.pw-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pw-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.pw-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: var(--primary);
}

/* ── PIF stats in stats bar ──────────────────────────────── */
.ps-value--pif  { color: #d97706; }
.ps-label--pif  { color: #d97706; }

/* ── PIF potential value input on card ──────────────────── */
.pc-pif-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  gap: 8px;
}
.pc-pif-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(217,119,6,0.3);
  border-radius: 4px;
  overflow: hidden;
  width: 110px;
  flex-shrink: 0;
}
.pc-pif-currency {
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: rgba(217,119,6,0.12);
  border-right: 1px solid rgba(217,119,6,0.3);
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  user-select: none;
}
.pc-pif-value-input {
  background: rgba(217,119,6,0.06);
  border: none;
  border-radius: 0;
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 6px 7px;
  flex: 1;
  min-width: 0;
  text-align: right;
}
.pc-pif-value-input::placeholder { color: rgba(217,119,6,0.5); font-weight: 400; }
.pc-pif-value-input:focus { outline: none; }
.pc-pif-input-wrap:focus-within { border-color: #d97706; }

/* ── Note count badge on pipeline card ───────────────────── */
.pc-note-count {
  display: inline-block;
  background: var(--surface-hover);
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 5px;
  color: var(--text-muted);
  margin-right: 5px;
  vertical-align: middle;
}

/* ── Pipeline note log (modal history section) ───────────── */
.pnm-log {
  border-top: 1px solid var(--border);
  max-height: 220px;
  overflow-y: auto;
  padding: 12px 20px 14px;
}
.pnm-log-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pnm-log-entry {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--row-border);
}
.pnm-log-entry:last-child { border-bottom: none; }
.pnm-log-date {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}
.pnm-log-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Method pills ────────────────────────────────────── */
.pnm-method-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.pnm-method-pill {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pnm-method-pill:hover { border-color: var(--primary); color: var(--primary); }
.pnm-method-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Method badge in log entries */
.pnm-log-method {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--primary-dim, rgba(124,58,237,0.12));
  color: var(--primary);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Talking Points toggle button ────────────────────── */
.pnm-tp-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(217,119,6,0.06);
  border: 1px solid rgba(217,119,6,0.25);
  border-radius: var(--radius-sm);
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.pnm-tp-toggle:hover { background: rgba(217,119,6,0.12); }

/* ── Talking Points Panel ────────────────────────────── */
.pnm-tp-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pnm-tp-panel-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: #d97706;
}

/* Stats summary bar */
.pnm-tp-summary {
  display: flex;
  gap: 6px;
  padding: 14px 20px;
  overflow-x: auto;
}
.tp-stat {
  flex: 1;
  min-width: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
}
.tp-stat-val {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.tp-stat-lbl {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Tab bar ─────────────────────────────────────────── */
.pnm-tp-accordion { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tp-tab-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.tp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px 10px;
  flex: 1;
  min-width: 60px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tp-tab:hover { background: var(--surface-2); }
.tp-tab.active {
  border-bottom-color: #d97706;
  background: rgba(217,119,6,0.05);
}
.tp-tab-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 2px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.tp-tab.active .tp-tab-letter {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}
.tp-tab-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.15s;
}
.tp-tab.active .tp-tab-label { color: #d97706; }

/* Active section content */
.tp-active-content {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

/* ── Accordion sections (legacy — replaced by tabs) ──── */
.tp-section { border-bottom: 1px solid var(--border); }
.tp-section:last-child { border-bottom: none; }
.tp-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}
.tp-section-header:hover .tp-section-title { color: #d97706; }
.tp-section-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(217,119,6,0.14);
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}
.tp-section-title {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.15s;
}
.tp-section-chevron {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Section body content (accordion legacy) */
.tp-section-body {
  padding: 0 0 12px 36px;
}
/* Active section heading */
.tp-section-active-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #d97706;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(217,119,6,0.2);
}
/* Shared content styles used by both old accordion + new tabs */
.tp-prompt {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
.tp-points {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.tp-points li {
  position: relative;
  padding: 4px 0 4px 14px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.tp-points li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--text-subtle, var(--text-muted));
}

/* Math comparison box */
.tp-math-box {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.tp-math-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.tp-math-row strong { color: var(--text-primary); }
.tp-math-savings strong { color: #16a34a; }

/* Objection blocks */
.tp-objection { margin-bottom: 10px; }
.tp-objection:last-child { margin-bottom: 0; }
.tp-objection-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* ============================================================
   RENEW CLIENT MODAL
   ============================================================ */

/* Renew button — profile header + pipeline board */
.btn-renew {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn-renew:hover  { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.35); }
.btn-renew:active { opacity: 0.85; }
.btn-renew.hidden { display: none; }

/* Larger renew button inside modal footer */
.btn-renew--lg {
  padding: 9px 22px;
  font-size: var(--fs-base);
}

/* Modal width override — slightly wider than default */
.renew-modal {
  max-width: 580px;
}

/* Context bar — current agreement summary at top of modal */
.renew-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
}
.rcb-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 16px 4px 0;
  margin-right: 16px;
  border-right: 1px solid var(--border);
}
.rcb-item:last-child { border-right: none; margin-right: 0; }
.rcb-item--warn .rcb-label { color: var(--danger); }
.rcb-item--warn .rcb-val   { color: var(--danger); }
.rcb-log-warning {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}
.rcb-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-subtle);
}
.rcb-val {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

/* Subscription cancellation notice */
.renew-sub-notice {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  color: var(--warning);
  line-height: 1.4;
}
.renew-sub-notice.hidden { display: none; }

/* ============================================================
   DUPLICATE CLIENT WARNING MODAL
   ============================================================ */

/* Sits above the Add Client modal (z-index: 100) */
#duplicate-warning-overlay {
  z-index: 150;
}

.dupe-warning-modal {
  max-width: 480px;
}
.dupe-warning-modal .modal-header {
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.06);
}
.dupe-warning-modal .modal-header h2 {
  color: var(--warning);
}
.dupe-warning-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}
.dupe-warning-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 14px 0 0;
  line-height: 1.5;
}
.dupe-match {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.dupe-match-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dupe-match-info {
  flex: 1;
  min-width: 0;
}
.dupe-match-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.dupe-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.dupe-match--inactive {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.05);
}
.dupe-match-tip {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--warning);
  line-height: 1.4;
}
.btn-goto-existing {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-goto-existing:hover {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   MANUAL CONTINUITY DUE — Dashboard section + profile
   ============================================================ */
.mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.mc-row:last-child { border-bottom: none; }
.mc-client { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.mc-name:hover { text-decoration: underline; }
.mc-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.mc-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mc-collect-btn {
  white-space: nowrap;
  background: rgba(0, 78, 249, 0.18) !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: 4px !important;
  font-size: var(--fs-sm) !important;
}
.mc-collect-btn:hover {
  background: rgba(0, 78, 249, 0.30) !important;
}

/* Status badges — shared between dashboard list + profile stat */
.mc-status {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mc-status--overdue   { background: rgba(220, 38, 38, 0.15); color: var(--danger); }
.mc-status--due-today { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.mc-status--due-soon  { background: rgba(234, 179, 8, 0.12); color: var(--warning); }
.mc-status--upcoming  { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); }

/* Profile continuity due row */
.profile-continuity-due {
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-continuity-date { font-size: var(--fs-md); font-weight: 500; color: var(--text-primary); }
.profile-pay-btn-row {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.profile-pay-btn-row .btn-xs { width: 100%; padding-top: 8px; padding-bottom: 8px; }

/* Profile pay button — color matches status badge */
.profile-pay-btn { color: #fff; }
.profile-pay-btn--paid      { background: var(--success); }
.profile-pay-btn--paid:hover      { background: #16a34a; }
.profile-pay-btn--upcoming  { background: var(--info); }
.profile-pay-btn--upcoming:hover  { background: #2563eb; }
.profile-pay-btn--due-soon  { background: var(--warning); }
.profile-pay-btn--due-soon:hover  { background: #d97706; }
.profile-pay-btn--due-today { background: var(--danger); }
.profile-pay-btn--due-today:hover { background: #dc2626; }
.profile-pay-btn--overdue   { background: var(--danger); }
.profile-pay-btn--overdue:hover   { background: #dc2626; }
.profile-pay-auto { font-size: var(--fs-xs); color: var(--text-secondary); font-style: italic; opacity: 0.8; }

/* ============================================================
   RECORD MANUAL PAYMENT MODAL
   ============================================================ */
.record-payment-modal {
  max-width: 460px;
}

/* Record Payment button in Financial Summary card header */
.btn-record-payment {
  margin-left: auto;
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-record-payment:hover {
  background: var(--accent);
  color: #fff;
}

/* Error message inside record payment modal */
.rp-error {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: 4px;
}

/* ============================================================
   SURFACE SYSTEM — premium depth via elevation, not gradients
   ============================================================ */

/* Sidebar — flat surface */
.sidebar {
  background: var(--surface);
}

/* Active nav item — subtle primary tint */
.nav-btn.active {
  background: rgba(0,78,249,0.12);
}

/* Primary action buttons — solid primary */
.btn-primary,
.btn-add-client,
#btn-save {
  background: var(--primary);
}
.btn-primary:hover,
.btn-add-client:hover,
#btn-save:hover {
  background: var(--primary-hover);
}

/* Active filter pills — solid primary */
.leads-filter-pill.active,
.filter-pill.active {
  background: var(--primary);
  border-color: transparent;
}

/* Card hover — subtle border + soft glow */
.card:hover,
.profile-stat:hover,
.pipeline-stat:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Light theme overrides ──────────────────────────────────── */
[data-theme="light"] .sidebar {
  background: #f8f8fa;
}
[data-theme="light"] .nav-btn.active {
  background: rgba(0,78,249,0.08);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .profile-stat:hover,
[data-theme="light"] .pipeline-stat:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ============================================================
   ANALYTICS LIBRARY
   ============================================================ */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

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

/* Metric card */
.analytics-metric-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.analytics-metric-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.analytics-metric-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.analytics-metric-icon {
  font-size: var(--fs-3xl);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.analytics-metric-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

.analytics-metric-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* Pin button */
.analytics-pin-btn {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.analytics-pin-btn:hover {
  border-color: rgba(124,58,237,0.55);
  color: #9f67ff;
}
.analytics-pin-btn.pinned {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.analytics-pin-btn.pinned:hover {
  background: var(--primary-hover);
  color: #fff;
}

/* Metric body */
.analytics-metric-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Inline stats row */
.analytics-stat-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.analytics-stat-row--4col .analytics-inline-stat { flex: 1; }

.analytics-inline-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.analytics-inline-stat:last-child { border-right: none; }

.analytics-inline-val {
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.analytics-inline-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

/* Chart containers */
.analytics-chart-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}
.analytics-chart-wrap--hbar {
  height: 180px;
}

/* Donut chart */
.analytics-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.analytics-chart-wrap--donut {
  height: 200px;
  width: 200px;
  flex-shrink: 0;
}
.analytics-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.analytics-donut-val {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.analytics-donut-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* Referral list */
.analytics-referrer-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.analytics-referrer-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.analytics-referrer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.analytics-referrer-row:last-child { border-bottom: none; }
.analytics-referrer-row:hover { background: rgba(124,58,237,0.07); }
.analytics-referrer-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.analytics-referrer-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(124,58,237,0.13);
  color: #9f67ff;
  border: 1px solid rgba(124,58,237,0.25);
}

/* Revenue per call hero */
.analytics-rev-hero {
  text-align: center;
  padding: 8px 0 4px;
}
.analytics-rev-hero-val {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.analytics-rev-hero-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
}
.analytics-rev-note {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-align: center;
  padding: 6px 0 0;
  line-height: 1.5;
}

/* ── Pinned Analytics Charts (Dashboard) ────────────────────── */
.pinned-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.pcard-dragging {
  opacity: 0.45;
  box-shadow: 0 8px 32px rgba(124,58,237,0.25) !important;
  cursor: grabbing;
}
.pcard-drag-over {
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.28), 0 4px 20px rgba(124,58,237,0.12) !important;
}

.pinned-drag-handle {
  cursor: grab;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.35;
  flex-shrink: 0;
  margin-right: 2px;
  user-select: none;
  transition: opacity 0.15s;
}
.analytics-metric-card:hover .pinned-drag-handle {
  opacity: 0.75;
}

/* Analytics repository — "pinned to dashboard" notice */
.analytics-pinned-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.analytics-pinned-notice-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #7c3aed;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.analytics-pinned-notice-btn:hover { text-decoration: underline; }

/* ── Whop Checkout ─────────────────────────────────────────── */
.whop-checkout-hint {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 8px 0 12px;
  line-height: 1.5;
}
.whop-launch-btn {
  width: 100%;
}
.whop-checkout-pending {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.whop-pending-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.whop-pending-spinner {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.whop-pending-msg {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.whop-cancel-btn {
  align-self: flex-start;
  font-size: var(--fs-xs);
}
.whop-checkout-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--success-dim);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-size: var(--fs-base);
  font-weight: 500;
}
.whop-checkout-success svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.whop-test-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  background: #f59e0b;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* ── Email / Phone verification ────────────────────────────── */
.verify-field-wrap {
  position: relative;
}
.verify-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.verify-input-wrap input { flex: 1; }
.btn-verify {
  flex-shrink: 0;
  padding: 0 14px;
  height: 38px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-verify:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--primary);
}
.verify-status {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.verify-valid    { color: var(--success); }
.verify-invalid  { color: var(--danger);  }
.verify-unknown  { color: var(--warning); }
.verify-checking { color: var(--text-secondary); font-weight: 400; }

/* ── Google Places Autocomplete dropdown ───────────────────── */
.pac-container {
  z-index: 99999 !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  font-family: inherit !important;
  margin-top: 2px !important;
}
.pac-container::after { display: none !important; } /* hide "powered by Google" logo row */
.pac-item {
  padding: 8px 12px !important;
  cursor: pointer !important;
  color: var(--text-primary) !important;
  border-top: 1px solid var(--border) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover,
.pac-item-selected { background: var(--surface-hover) !important; }
.pac-item-query {
  color: var(--text-primary) !important;
  font-size: var(--fs-sm) !important;
}
.pac-matched { font-weight: 500 !important; }
.pac-icon,
.pac-icon-markerWithDot { display: none !important; } /* hide broken pin icons */

/* ── Address autocomplete wrapper ────────────────────────────── */
.address-autocomplete-wrap {
  display: block;
  width: 100%;
}
.address-autocomplete-wrap input {
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   SESSION TRACKER
   ============================================================ */

/* ── Arrangement banner ──────────────────────────────────────── */
/* ── Card body wrapper ───────────────────────────────────────── */
.sess-body {
  padding: 0 20px 20px;
}

.sess-arrangement {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sess-arrangement-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Header actions ──────────────────────────────────────────── */
.sess-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Summary strip ───────────────────────────────────────────── */
.sess-summary-strip {
  display: flex;
  gap: 0;
  margin: 12px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sess-summary-tile {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
}
.sess-summary-tile:last-child { border-right: none; }
.sess-summary-val {
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.2;
}
.sess-summary-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* color helpers */
.sess-green  { color: var(--success); }
.sess-yellow { color: var(--warning); }
.sess-red    { color: var(--danger); }
.sess-blue   { color: var(--accent); }
.sess-purple { color: #8b5cf6; }
.sess-muted  { color: var(--text-muted); }

/* ── Alert banners ───────────────────────────────────────────── */
.sess-alert {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: 10px;
}
.sess-alert-red    { background: var(--danger-dim);  color: var(--danger);  border: 1px solid rgba(239,68,68,0.2); }
.sess-alert-yellow { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); }
.sess-alert-purple { background: rgba(139,92,246,0.10); color: #8b5cf6;    border: 1px solid rgba(139,92,246,0.2); }

/* ── Collapsible sections ────────────────────────────────────── */
.sess-section {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sess-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.sess-section-head:hover { background: var(--surface-hover); }
.sess-chevron {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  transition: transform 0.15s;
  width: 12px;
  display: inline-block;
  text-align: center;
}
.sess-section-title { color: var(--text); }
.sess-section-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sess-section-body.hidden { display: none; }

/* ── Row cards ───────────────────────────────────────────────── */
.sess-row-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.sess-row-card:hover { background: var(--surface-hover); }
.sess-row-card.sess-row-dimmed { opacity: 0.55; }
.sess-row-card.sess-row-urgent { border-color: var(--danger); }
.sess-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.sess-row-body { flex: 1; min-width: 0; }
.sess-row-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-row-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.sess-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Progress bar ────────────────────────────────────────────── */
.sess-prog-bg {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.sess-prog-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s;
}

/* ── Badges ──────────────────────────────────────────────────── */
.sess-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.sess-green-badge  { background: var(--success-dim);          color: var(--success); }
.sess-yellow-badge { background: var(--warning-dim);          color: var(--warning); }
.sess-danger-badge { background: var(--danger-dim);           color: var(--danger); }
.sess-blue-badge   { background: var(--accent-dim);           color: var(--accent); }
.sess-purple-badge { background: rgba(139,92,246,0.12);       color: #8b5cf6; }
.sess-muted-badge  { background: var(--surface-2);            color: var(--text-muted); border: 1px solid var(--border); }

/* ── Icon button ─────────────────────────────────────────────── */
.sess-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  transition: background 0.15s, color 0.15s;
}
.sess-icon-btn:hover { background: var(--danger-dim); color: var(--danger); }

/* ── Empty state ─────────────────────────────────────────────── */
.sess-empty {
  text-align: center;
  padding: 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Log Session Modal — outcome grid ────────────────────────── */
.sess-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.sess-outcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.sess-outcome-card:hover { border-color: var(--accent); background: var(--surface-hover); }
.sess-outcome-icon  { font-size: var(--fs-2xl); }
.sess-outcome-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text); }
.sess-outcome-sub   { font-size: var(--fs-xs); color: var(--text-muted); }

.sess-outcome-sel-completed { border-color: var(--success) !important; background: var(--success-dim) !important; }
.sess-outcome-sel-resched   { border-color: var(--warning) !important; background: var(--warning-dim) !important; }
.sess-outcome-sel-forfeit   { border-color: var(--danger)  !important; background: var(--danger-dim)  !important; }

/* Who cancelled — two-up picker inside log modal */
.sess-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sess-who-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.sess-who-btn:hover { border-color: var(--accent); background: var(--surface-hover); }
.sess-who-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text); }
.sess-who-sub   { font-size: var(--fs-xs); color: var(--text-muted); }
.sess-who-sel   { border-color: var(--accent) !important; background: rgba(124,58,237,0.10) !important; }

/* ── Session preview box ─────────────────────────────────────── */
.sess-preview-box {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-preview-green  { background: var(--success-dim); color: var(--success); border-color: rgba(34,197,94,0.2); }
.sess-preview-yellow { background: var(--warning-dim); color: var(--warning); border-color: rgba(245,158,11,0.2); }
.sess-preview-red    { background: var(--danger-dim);  color: var(--danger);  border-color: rgba(239,68,68,0.2); }
.sess-preview-src {
  display: block;
  opacity: 0.75;
  font-size: var(--fs-xs);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .sess-summary-strip { flex-wrap: wrap; }
  .sess-summary-tile  { flex: 1 1 30%; border-bottom: 1px solid var(--border); }
  .sess-outcome-grid  { grid-template-columns: 1fr; }
  .sess-header-actions { gap: 6px; }
}


/* ============================================================
   SESSIONS OVERVIEW VIEW
   ============================================================ */
.sess-ov-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 8px;
  gap: 16px;
}
.sess-ov-left { flex: 1; min-width: 0; }
.sess-ov-name { font-weight: 500; font-size: var(--fs-md); }
.sess-ov-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.sess-ov-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-ov-expiring-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--warning-dim);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.2);
}
.sess-ov-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.sess-ov-bal {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.sess-ov-bal-num  { font-size: var(--fs-4xl); font-weight: 500; line-height: 1; }
.sess-ov-bal-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.sess-ov-bal--ok   .sess-ov-bal-num { color: var(--success); }
.sess-ov-bal--warn .sess-ov-bal-num { color: var(--warning); }
.sess-ov-bal--zero .sess-ov-bal-num { color: var(--danger); }

/* ============================================================
   SESSIONS DETAIL VIEW (desktop)
   ============================================================ */
/* Sessions is a direct flex child of .main-content — full viewport height */
#view-sessions {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}
/* When hidden, display:none must override the flex display */
#view-sessions.hidden { display: none; }

/* Permanent client list panel — always visible, no open/close */
.sv-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sv-panel-header {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Search */
.sv-panel-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sv-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.sv-search-input:focus        { border-color: var(--primary); }
.sv-search-input::placeholder { color: var(--text-muted); }
.sv-panel-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1;
}
.sv-panel-total {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 2px 8px;
}
.sv-panel-list { overflow-y: auto; flex: 1; padding: 0; }

/* Accordion groups inside the panel */
.sv-group { border-bottom: 1px solid var(--border); }
.sv-group:last-child { border-bottom: none; }

.sv-group-header {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  gap: 8px;
}
.sv-group-header:hover { background: var(--surface-hover); color: var(--text); }
.sv-group:not(.collapsed) > .sv-group-header { color: var(--text); }

.sv-group-label { flex: 1; }
.sv-group-count {
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 22px;
  text-align: center;
  transition: background 0.15s;
}
.sv-group:not(.collapsed) > .sv-group-header .sv-group-count {
  background: var(--primary-dim);
  color: var(--primary);
}
.sv-group.collapsed > .sv-group-header .sv-group-count {
  background: var(--surface-hover);
  color: var(--text-muted);
}

.sv-group-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.15s;
}
.sv-group-header:hover .sv-group-chevron { opacity: 0.9; }
.sv-group.collapsed .sv-group-chevron { transform: rotate(-90deg); }
.sv-group.collapsed .sv-group-items   { display: none; }

/* List items */
.sv-drawer-empty { padding: 12px 16px; font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
.sv-drawer-item {
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  padding: 10px 14px 10px 13px;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  gap: 9px;
  transition: background 0.12s, border-color 0.12s;
}
.sv-drawer-item:hover  { background: var(--surface-hover); border-left-color: var(--border); }
.sv-drawer-item.active { background: var(--primary-dim); border-left-color: var(--primary); }
.sv-drawer-item.active .sv-drawer-item-name { font-weight: 500; }

/* Avatar circle */
.sv-item-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  opacity: 0.88;
}

/* Name + last-session body */
.sv-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sv-drawer-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-item-last {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline issue button (No Credits items, desktop only) */
.sv-issue-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
  white-space: nowrap;
}
.sv-drawer-item:hover .sv-issue-btn { opacity: 1; }
.sv-issue-btn:hover { background: var(--primary); color: #fff; }

.sv-drawer-bal {
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
}
.sv-drawer-bal--ok   { background: var(--success-dim); color: var(--success); }
.sv-drawer-bal--warn { background: var(--warning-dim); color: var(--warning); }
.sv-drawer-bal--zero { background: var(--danger-dim);  color: var(--danger);  }

.sv-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 28px 32px 40px;
}

/* No-client placeholder */
.sv-no-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  gap: 8px;
  text-align: center;
  color: var(--text-muted);
}
.sv-no-client-icon  { font-size: 40px; margin-bottom: 4px; }
.sv-no-client-title { font-size: var(--fs-xl); font-weight: 500; color: var(--text); }
.sv-no-client-sub   { font-size: var(--fs-base); }

/* Client detail */
.sv-client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sv-client-name { font-size: var(--fs-2xl); font-weight: 500; }

.sv-summary-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sv-summary-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
}
.sv-summary-num   { font-size: var(--fs-4xl); font-weight: 500; line-height: 1; color: var(--text); }
.sv-summary-label { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.sv-bal--ok   { color: var(--success); }
.sv-bal--warn { color: var(--warning); }
.sv-bal--zero { color: var(--danger);  }

/* Sections */
.sv-section { margin-bottom: 12px; overflow: hidden; }
.sv-section-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sv-section-header:hover { background: var(--surface-hover); }
.sv-section-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  margin-left: 8px;
  vertical-align: middle;
}
.sv-section-chev { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; }
.sv-collapsed { display: none; }

.sv-sec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
}
.sv-sec-row--dim { opacity: 0.4; }
.sv-sec-row-icon { font-size: var(--fs-xl); flex-shrink: 0; }
.sv-sec-row-body { flex: 1; min-width: 0; }
.sv-sec-row-title { font-size: var(--fs-base); font-weight: 500; }
.sv-sec-row-sub   { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.sv-sec-empty     { padding: 14px 18px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ── AI Insights Card ─────────────────────────────────────── */
.ai-insights-card { position: relative; }
.ai-insights-header-left { display: flex; align-items: center; gap: 8px; }
.ai-insights-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ai-insights-badge {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 3px; padding: 1px 5px;
}
.ai-insights-idle { padding: 20px 20px 24px; }
.ai-insights-idle-text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

.ai-insights-loading { display: flex; align-items: center; gap: 12px; padding: 28px 20px; color: var(--text-muted); font-size: var(--fs-sm); }
.ai-insights-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  animation: ai-spin 0.7s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-insights-results { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }

.ai-insight-section { display: flex; flex-direction: column; gap: 6px; }
.ai-insight-section-label {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}

.ai-going-well-list { display: flex; flex-direction: column; gap: 4px; }
.ai-going-well-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.5;
}
.ai-going-well-icon { flex-shrink: 0; font-size: var(--fs-base); margin-top: 1px; }

.ai-bottleneck-box {
  background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.55;
}

.ai-solutions-list { display: flex; flex-direction: column; gap: 6px; counter-reset: solutions; }
.ai-solution-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.5;
}
.ai-solution-num {
  counter-increment: solutions;
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary); font-size: var(--fs-xs); font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.ai-insights-footer {
  border-top: 1px solid var(--border); padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.ai-insights-footer-note { font-size: var(--fs-xs); color: var(--text-muted); }
.ai-insights-refresh {
  font-size: var(--fs-xs); color: var(--text-muted); background: none; border: none;
  cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.ai-insights-refresh:hover { color: var(--text-primary); background: var(--hover-bg); }

.ai-insights-error {
  padding: 16px 20px; font-size: var(--fs-sm); color: var(--danger, #ef4444);
  background: rgba(239,68,68,0.07); border-top: 1px solid rgba(239,68,68,0.15);
}

/* ── AI Insights History Panel ──────────────────────────────── */
.ai-history-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; justify-content: flex-end;
}
.ai-history-overlay.hidden { display: none; }
.ai-history-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.ai-history-panel {
  position: relative; z-index: 1;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: ai-hist-slide-in 0.22s ease;
  overflow: hidden;
}
@keyframes ai-hist-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.ai-history-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-history-panel-header h2 { margin: 0 0 2px; font-size: var(--fs-lg); }
.ai-history-panel-sub { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.ai-history-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-xl); line-height: 1;
  padding: 2px 4px; border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.ai-history-close:hover { color: var(--text); background: var(--hover-bg); }

.ai-history-panel-body {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 24px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Individual history entry */
.ai-hist-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ai-hist-item--current { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

.ai-hist-item-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: none; border: none;
  cursor: pointer; text-align: left;
  background: var(--surface-2);
  transition: background 0.15s;
}
.ai-hist-item-header:hover { background: var(--hover-bg); }
.ai-hist-item-date { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.ai-hist-item-badge {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 3px; padding: 1px 6px; flex-shrink: 0;
}
.ai-hist-item-chevron {
  color: var(--text-muted); font-size: var(--fs-lg); flex-shrink: 0;
  transition: transform 0.2s;
}
.ai-hist-item.open .ai-hist-item-chevron { transform: rotate(90deg); }

.ai-hist-item-body {
  display: none;
  border-top: 1px solid var(--border);
}
.ai-hist-item.open .ai-hist-item-body { display: block; }

/* ============================================================
   CALENDAR MODULE
   ============================================================ */

/* ── Profile Tab Bar (legacy overridden by V2) ────────────────── */

/* ── Program Tab Layout ──────────────────────────────────────── */
.prog-container { }
.prog-section { margin-bottom: 16px; }
.prog-section-title {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 10px;
}

/* ── Program Stat Cards (top row) ────────────────────────────── */
.prog-stat-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) { .prog-stat-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .prog-stat-cards { grid-template-columns: repeat(2, 1fr); } }

.prog-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}
.prog-stat-card--placeholder { opacity: 0.5; }
.prog-stat-label {
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.prog-stat-value {
  font-size: var(--fs-3xl); font-weight: 500;
  color: var(--text); line-height: 1.1;
  margin-bottom: 2px; letter-spacing: -0.5px;
}
.prog-stat-sub {
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted); line-height: 1.3;
}

/* Health Metrics Row */
.prog-metrics-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 768px) { .prog-metrics-row { grid-template-columns: 1fr; } }

.prog-metric-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px; display: flex; flex-direction: column;
  transition: border-color 0.15s;
}
.prog-metric-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

.prog-metric-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.prog-metric-title {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
}
.prog-metric-body { flex: 1; }
.prog-metric-value {
  font-size: var(--fs-3xl); font-weight: 500; color: var(--text);
  line-height: 1.1; margin-bottom: 2px; letter-spacing: -0.5px;
}
.prog-metric-sub {
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500;
  margin-bottom: 10px;
}
.prog-metric-bar {
  height: 6px; border-radius: 3px; background: var(--border);
  overflow: hidden; margin-bottom: 4px;
}
.prog-metric-bar-fill { height: 6px; border-radius: 3px; transition: width 0.3s ease; }
.prog-metric-pct { font-size: var(--fs-xs); font-weight: 500; text-align: right; }

.prog-metric-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.prog-metric-footer-label {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.prog-step-input-wrap { display: flex; align-items: center; }

/* Step target input inside stat card */
.prog-stat-target-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.prog-stat-target-input {
  width: 100%; padding: 4px 6px; text-align: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-xs); font-weight: 500; outline: none;
  -moz-appearance: textfield; transition: border-color 0.15s;
}
.prog-stat-target-input::-webkit-inner-spin-button,
.prog-stat-target-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prog-stat-target-input:focus { border-color: var(--primary); }
.prog-stat-target-input::placeholder { font-weight: 400; color: var(--text-muted); }

/* Sleep stages */
.prog-sleep-stages {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.prog-sleep-stage {
  font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}
.prog-sleep-stage strong { color: var(--text); font-weight: 500; }
.prog-sleep-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Check-In Settings Grid */
.prog-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px;
}
@media (max-width: 768px) { .prog-settings-grid { grid-template-columns: 1fr; } }

.prog-setting { display: flex; flex-direction: column; gap: 6px; }
.prog-setting-label {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.prog-setting-select {
  font-size: var(--fs-sm); padding: 7px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.prog-setting-select:focus { border-color: var(--primary); }
.prog-setting-value { font-size: var(--fs-sm); font-weight: 500; padding: 7px 0; }

/* ── Daily Habits ────────────────────────────────────────────── */
.prog-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.habit-list { display: flex; flex-direction: column; gap: 6px; }
.habit-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px;
  transition: border-color 0.15s;
}
.habit-row:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.habit-row-color {
  width: 4px; height: 24px; border-radius: 2px; flex-shrink: 0;
}
.habit-row-name {
  flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text);
}
.habit-row-freq {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-2); border-radius: 4px; padding: 3px 8px;
}
.habit-empty {
  font-size: var(--fs-xs); color: var(--text-muted); padding: 12px 0;
}

/* Habit Modal */
.habit-color-picker { display: flex; align-items: center; gap: 10px; }
.habit-color-picker input[type="color"] {
  width: 32px; height: 32px; border: 1px solid var(--border);
  border-radius: 6px; padding: 2px; cursor: pointer;
  background: var(--surface);
}
.habit-color-swatches { display: flex; gap: 6px; }
.habit-swatch {
  width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; transition: border-color 0.15s;
}
.habit-swatch:hover { border-color: var(--text-muted); }

.cal-habit-days { display: flex; gap: 6px; margin-top: 6px; }
.cal-habit-day-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.cal-habit-day-btn:hover { border-color: var(--primary); color: var(--text); }
.cal-habit-day-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.form-label-sm {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  margin-bottom: 4px; display: block;
}

/* ── Weight Tracking Config ─────────────────────────────────── */
.wt-mode-row {
  display: flex; gap: 6px; margin-top: 8px;
}
.wt-mode-btn {
  flex: 1; padding: 7px 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.wt-mode-btn:hover { border-color: rgba(255,255,255,0.15); color: var(--text); background: rgba(255,255,255,0.06); }
.wt-mode-btn.active {
  background: rgba(0, 78, 249, 0.12);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(0, 78, 249, 0.2);
}
.wt-day-picker {
  display: flex; gap: 6px; margin-top: 8px;
}

/* ── Calendar Container ──────────────────────────────────────── */
.cal-container { padding: 0; }

.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.cal-nav {
  display: flex; align-items: center; gap: 8px;
}
.cal-nav-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; cursor: pointer;
  color: var(--text); display: flex; align-items: center;
  transition: background 0.15s;
}
.cal-nav-btn:hover { background: var(--border); }
.cal-month-label {
  font-size: var(--fs-xl); font-weight: 500; min-width: 180px;
  text-align: center; color: var(--text);
}
.cal-today-btn {
  font-size: var(--fs-xs); font-weight: 500; padding: 4px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; color: var(--text-muted);
  transition: all 0.15s;
}
.cal-today-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.cal-toolbar-right {
  display: flex; align-items: center; gap: 16px;
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.cal-filter-bar { display: flex; gap: 6px; }
.cal-filter-btn {
  font-size: var(--fs-xs); font-weight: 500; padding: 5px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.cal-filter-btn:hover { border-color: rgba(255,255,255,0.15); color: var(--text); background: rgba(255,255,255,0.06); }
.cal-filter-btn.active { color: #fff; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
.cal-filter-btn--workout.active { color: #818cf8; border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.12); }
.cal-filter-btn--cardio.active  { color: #34d399; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.12); }
.cal-filter-btn--custom.active  { color: #c084fc; border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,0.12); }

/* ── Permission Row ──────────────────────────────────────────── */
.cal-perm-row { display: flex; align-items: center; gap: 6px; }
.cal-perm-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.cal-perm-select {
  font-size: var(--fs-xs); padding: 3px 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}

/* ── Step Target Row ─────────────────────────────────────────── */
/* (Health metrics moved to .prog-metric-card styles above) */

/* Day cell health indicators */
.cal-day-health {
  display: flex; gap: 3px; justify-content: center;
  font-size: var(--fs-xs); font-weight: 500; margin-top: 1px;
}
.cal-day-steps { font-size: var(--fs-xs); font-weight: 500; }
.cal-day-sleep { font-size: var(--fs-xs); opacity: 0.7; }

/* ── Calendar Grid ───────────────────────────────────────────── */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.cal-day-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  text-align: center; padding: 6px 4px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cal-day {
  min-height: 96px; padding: 4px; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.1s; position: relative;
  background: var(--surface);
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--surface-2); }
.cal-day--today {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.cal-day--today .cal-day-num {
  background: var(--primary); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; font-weight: 500;
}
.cal-day--other { opacity: 0.35; }
.cal-day--past:not(.cal-day--today) { opacity: 0.55; }
.cal-day--past:hover { opacity: 0.8; }
.cal-day--drag-over {
  background: color-mix(in srgb, var(--primary) 15%, var(--surface)) !important;
  outline: 2px dashed var(--primary); outline-offset: -2px;
  opacity: 1 !important;
}
.cal-day-num {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  margin-bottom: 2px; padding: 2px 4px;
}
.cal-day-items { display: flex; flex-direction: column; gap: 2px; }

/* ── Check-in day marker ─────────────────────────────────────── */
.cal-checkin-marker {
  position: absolute; top: 3px; right: 4px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--primary); opacity: 0.7;
  text-transform: uppercase;
}

/* ── Week view cells ─────────────────────────────────────────── */
.cal-day--week { min-height: 200px; }

/* ── View toggle ─────────────────────────────────────────────── */
.cal-view-toggle {
  display: flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.cal-view-btn {
  padding: 4px 12px; font-size: var(--fs-xs); font-weight: 500;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  transition: all 0.15s;
}
.cal-view-btn.active { background: var(--primary); color: #fff; }
.cal-view-btn:hover:not(.active) { color: var(--text); }

/* ── Summary card section dividers ───────────────────────────── */
/* ── Check-in day toggle ──────────────────────────────────── */
.ci-day-toggle { display: flex; gap: 3px; }
.ci-day-btn {
  padding: 4px 8px; font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.ci-day-btn:hover { border-color: var(--primary); color: var(--text); }
.ci-day-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.prog-section-divider {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-subtle);
  text-transform: uppercase; padding: 8px 16px 4px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.prog-section-divider:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.prog-ctrl-body--meta { border-top: 1px solid rgba(255,255,255,0.06); }

/* ── Pills ───────────────────────────────────────────────────── */
.cal-pill {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; padding: 2px 6px;
  border-radius: 4px; cursor: grab; transition: opacity 0.15s;
  white-space: nowrap; overflow: hidden; line-height: 1.4;
}
.cal-pill:active { cursor: grabbing; }
.cal-pill--workout {
  background: color-mix(in srgb, #6366f1 15%, var(--surface));
  color: #6366f1; border-left: 3px solid #6366f1;
}
.cal-pill--cardio {
  background: color-mix(in srgb, #10b981 15%, var(--surface));
  color: #10b981; border-left: 3px solid #10b981;
}
.cal-pill--custom {
  background: color-mix(in srgb, #a855f7 15%, var(--surface));
  color: #a855f7; border-left: 3px solid #a855f7;
}
.cal-pill--completed {
  opacity: 0.5; text-decoration: line-through;
}
.cal-pill--dragging { opacity: 0.4; }
.cal-pill-text {
  overflow: hidden; text-overflow: ellipsis;
}
.cal-pill-recur {
  font-size: var(--fs-xs); opacity: 0.7; margin-left: auto; flex-shrink: 0;
}
.cal-pill:hover { filter: brightness(0.95); }

/* ── Calendar Modal ───────────────────────────────────────────── */
.cal-modal-date-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 6px; padding: 6px 12px;
}

/* ── Cardio Presets ───────────────────────────────────────────── */
.cal-preset-row {
  display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap;
}
.cal-preset-btn {
  font-size: var(--fs-xs); font-weight: 500; padding: 5px 14px;
  border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.cal-preset-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-preset-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.cal-add-recur-toggle { margin: 8px 0 4px; }
.cal-recur-check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); cursor: pointer; color: var(--text);
}
.cal-recur-check-label input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--primary);
}
.cal-add-days-row {
  display: flex; gap: 4px; margin-top: 8px;
}
.cal-add-day-btn {
  width: 40px; height: 32px; font-size: var(--fs-xs); font-weight: 500;
  border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.cal-add-day-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-add-day-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* btn-danger already defined above */

/* ============================================================
   BUILDER VIEW
   ============================================================ */
/* Overlay z-index stacking */
#exercise-editor-overlay { z-index: 120; }
.ex-editor-row { display: flex; gap: 12px; }
.ex-editor-row .form-group { margin-bottom: 0; }
#exercise-search-overlay { z-index: 120; }

/* ── Builder View ─────────────────────────────────────────── */
.builder-sticky-top { position: sticky; top: 0; z-index: 10; background: transparent; padding: 0 0 0 0; }
.builder-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.builder-tab-btn {
  padding: 10px 20px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.builder-tab-btn:hover { color: var(--text); }
.builder-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.builder-tab-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.builder-tab-panel { display: none; }
.builder-tab-panel.active { display: block; }
.builder-workout-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }

/* Program cards */
.builder-program-list { }
.program-section-label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.program-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.program-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 16px; cursor: pointer; transition: border-color .15s;
}
.program-card:hover { border-color: var(--primary); }
.program-card-name { font-size: var(--fs-base); font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.program-card-meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: 12px; margin-bottom: 10px; }
.program-card-actions { display: flex; gap: 6px; }

/* Template & experience badges */
.program-template-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; background: var(--primary); color: #fff;
}
.program-exp-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border);
}
.program-exp-beginner { color: #10b981; border-color: #10b981; }
.program-exp-advanced { color: #f59e0b; border-color: #f59e0b; }

/* Editor header controls */
.pe-exp-select {
  font-size: var(--fs-xs); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.pe-template-toggle {
  display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); cursor: pointer; user-select: none;
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface);
}
.pe-template-toggle input { margin: 0; }
.pe-template-label { font-weight: 500; color: var(--text); }

/* Day tab add buttons wrap */
.pe-day-add-wrap { display: flex; gap: 2px; }
.pe-day-tab--saved { font-size: var(--fs-xs); padding: 4px 8px; }

/* Custom volume inputs */
.vol-custom-inputs {
  display: flex; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border);
}
.vol-custom-inputs label { font-size: var(--fs-xs); font-weight: 500; display: flex; align-items: center; gap: 3px; color: var(--text-muted); }
.vol-custom-input {
  width: 40px; padding: 2px 4px; font-size: var(--fs-xs); text-align: center;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text);
}

/* Saved days overlay */
.saved-day-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.saved-day-card:last-child { border-bottom: none; }
.saved-day-name { font-size: var(--fs-sm); font-weight: 500; }
.saved-day-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.saved-day-actions { display: flex; gap: 6px; align-items: center; }

/* ── Progression Editor ──────────────────────────────────── */
#progression-overlay { align-items: flex-start; }
.progression-editor {
  background: var(--surface); border-radius: 8px; width: 96vw; max-width: 1400px;
  max-height: 90vh; display: flex; flex-direction: column; margin-top: 3vh;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.progression-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.progression-header h3 { margin: 0; font-size: var(--fs-lg); }
.progression-header-actions { display: flex; align-items: center; gap: 10px; }
.progression-weeks-label { font-size: var(--fs-xs); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.progression-weeks-input {
  width: 48px; padding: 4px 6px; font-size: var(--fs-xs); text-align: center;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text);
}
.progression-day-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px;
}
.progression-body { flex: 1; overflow: auto; padding: 16px 20px; }

/* Progression grid */
.prog-grid {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  min-height: 200px;
}
.prog-week-col {
  min-width: 200px; max-width: 240px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.prog-week-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); text-align: center; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.prog-week-cards { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.prog-week-cards.prog-drop-target { background: rgba(var(--primary-rgb, 0,78,249), 0.08); border-radius: 4px; }

/* Progression cards */
.prog-card {
  border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px;
  background: var(--surface); font-size: var(--fs-xs);
}
.prog-card--base { cursor: grab; border-left: 3px solid var(--primary); opacity: 0.85; }
.prog-card--base.dragging { opacity: 0.4; }
.prog-card--override { border-left: 3px solid #10b981; }
.prog-card--empty {
  border: 1px dashed var(--border); background: transparent; text-align: center;
  padding: 6px 8px;
}
.prog-card-name {
  font-weight: 500; font-size: var(--fs-xs); margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.prog-card-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-base); line-height: 1; padding: 0 2px;
}
.prog-card-remove:hover { color: var(--danger); }
.prog-card-fields { display: flex; gap: 8px; }
.prog-card-val { font-size: var(--fs-xs); color: var(--text-muted); }
.prog-card-field {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 2px;
}
.prog-card-input {
  width: 52px; padding: 3px 4px; font-size: var(--fs-xs); text-align: center;
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--text);
}
.prog-empty-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 3px; }
.prog-copy-btn {
  font-size: var(--fs-xs); padding: 2px 6px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.prog-copy-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Workout Schedules (client profile) ──────────────────── */
.workout-schedules-list { margin-top: 8px; }
.workout-schedules-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; text-align: center; }
.workout-schedules-loading { font-size: var(--fs-xs); color: var(--text-muted); }
.ws-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.ws-row:last-child { border-bottom: none; }
.ws-name { font-size: var(--fs-sm); font-weight: 500; }
.ws-dates { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ws-status {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px;
}
.ws-active { background: #10b981; color: #fff; }
.ws-scheduled { background: var(--border); color: var(--text-muted); }
.ws-completed { background: var(--bg); color: var(--text-muted); opacity: 0.6; }
.ws-actions { display: flex; gap: 4px; }

/* ── Assignment Modal ────────────────────────────────────── */
.assign-program-name { font-size: var(--fs-base); font-weight: 500; margin-bottom: 12px; }
.assign-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.assign-day-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.assign-day-row:last-child { border-bottom: none; }
.assign-day-name { font-size: var(--fs-xs); font-weight: 500; min-width: 100px; }
.assign-day-checks { display: flex; gap: 4px; }
.assign-wd-check {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.assign-wd-check input { margin: 0; }
.assign-wd-check input:checked + span { color: var(--primary); }
.assign-preview { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; }

/* ── Workout Detail View ─────────────────────────────────── */
.wd-week-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; background: var(--primary); color: #fff;
}
.wd-section { margin-bottom: 16px; }
.wd-section-name {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.wd-exercise {
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.wd-exercise:last-child { border-bottom: none; }
.wd-exercise--edit { background: var(--bg); border-radius: 4px; padding: 8px; margin-bottom: 4px; border: 1px solid var(--border); }
.wd-ex-name { font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.wd-ex-muscle { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.wd-ss-badge {
  font-size: var(--fs-xs); font-weight: 500; padding: 1px 4px; border-radius: 3px;
  background: var(--primary); color: #fff;
}
.wd-ex-stats {
  display: flex; gap: 10px; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-muted);
}
.wd-ex-notes { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-top: 3px; }
.wd-ex-fields { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.wd-field {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 2px;
}
.wd-field-input {
  width: 60px; padding: 4px 6px; font-size: var(--fs-xs);
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text);
}
.wd-field-sm { width: 44px; }

/* Workout log banner (coach view) */
.wd-log-banner {
  display: flex; gap: 16px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg); border-radius: 6px; border: 1px solid var(--border);
}
.wd-log-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wd-log-stat-val { font-size: var(--fs-base); font-weight: 500; }
.wd-log-stat-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; }

/* Client set log table (coach view) */
.wd-set-logs { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.wd-set-log-header { display: flex; gap: 4px; margin-bottom: 3px; }
.wd-set-log-header .wd-set-log-col { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.wd-set-log-row { display: flex; gap: 4px; padding: 2px 0; }
.wd-set-log-col { flex: 1; font-size: var(--fs-xs); text-align: center; }

/* ── Program Editor ───────────────────────────────────────── */
#program-editor-overlay { align-items: flex-start; }
.program-editor {
  background: var(--bg); width: 96vw; max-width: 1440px;
  margin: 16px auto; border-radius: 6px; display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); border: 1px solid var(--border);
}
.program-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0;
}
.program-editor-header-actions { display: flex; gap: 8px; }
.program-editor-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.pe-layout { display: flex; flex: 1; overflow: hidden; }
.pe-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Day tabs */
.pe-day-tabs {
  display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
}
.pe-day-tab {
  padding: 8px 18px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer;
  color: var(--text-muted); transition: all .15s; white-space: nowrap;
}
.pe-day-tab:hover { border-color: var(--primary); color: var(--text); }
.pe-day-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pe-day-tab.rest { border-style: dashed; }
.pe-day-tab--add { background: none; border-style: dashed; font-size: var(--fs-xl); line-height: 1; padding: 6px 14px; }
.pe-day-tab--add:hover { border-color: var(--primary); color: var(--primary); }
.pe-day-rest-badge {
  font-size: var(--fs-xs); background: var(--warning-dim); color: var(--warning);
  padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}

/* Week schedule */
.pe-schedule-wrap { flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.pe-schedule-toggle {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px; cursor: pointer;
  user-select: none;
}
.pe-schedule-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted);
}
.pe-schedule-grid {
  display: flex; gap: 4px; padding: 0 16px 10px; overflow-x: auto;
}
.pe-schedule-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 90px; }
.pe-schedule-day-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted);
}
.pe-schedule-select {
  width: 100%; padding: 5px 4px; font-size: var(--fs-xs); font-weight: 500;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); text-align: center; cursor: pointer;
}
.pe-schedule-select:focus { border-color: var(--primary); outline: none; }

/* Day content */
.pe-day-content { flex: 1; overflow-y: auto; padding: 16px 20px; }
.pe-day-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.pe-day-name-input {
  font-size: var(--fs-xl); font-weight: 500; background: none; border: none;
  color: var(--text); border-bottom: 1px solid transparent; padding: 4px 0;
}
.pe-day-name-input:focus { border-bottom-color: var(--primary); outline: none; }
.pe-day-header-actions { display: flex; gap: 6px; }
.pe-rest-message {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
  font-size: var(--fs-base); font-style: italic;
}

/* Sections */
.pe-section { margin-bottom: 24px; }
.pe-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light);
}
.pe-section-name {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); background: none; border: none; padding: 4px 0;
}
.pe-section-name:focus { color: var(--text); outline: none; border-bottom: 1px solid var(--primary); }
.pe-section-actions { display: flex; gap: 6px; align-items: center; }
.pe-empty-section { padding: 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); font-style: italic; }

/* Collapsed sections (empty warm up / cool down) */
.pe-section-collapsed { margin-bottom: 8px; }
.pe-section-collapsed .pe-section-header {
  cursor: pointer; padding: 6px 0; border-bottom: none; opacity: 0.5;
  transition: opacity .15s;
}
.pe-section-collapsed .pe-section-header:hover { opacity: 1; }
.pe-section-collapsed .pe-section-actions { opacity: 0; }
.pe-section-collapsed .pe-section-header:hover .pe-section-actions { opacity: 1; }
.pe-section-chevron { flex-shrink: 0; color: var(--text-muted); }

/* ── Exercise Rows (two-row card layout) ──────────────────── */
.pe-exercise-row {
  display: flex; flex-direction: column; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 6px; transition: border-color .15s, box-shadow .15s;
}
.pe-exercise-row:hover { border-color: color-mix(in srgb, var(--border) 60%, var(--primary)); }
.pe-exercise-row.dragging { opacity: 0.4; border-color: var(--primary); }
.pe-exercise-row.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }

/* Superset connectors */
.pe-exercise-row.superset-a { border-left: 4px solid var(--primary); }
.pe-exercise-row.superset-b { border-left: 4px solid var(--success); }
.pe-exercise-row.superset-c { border-left: 4px solid var(--warning); }
.pe-exercise-row.superset-d { border-left: 4px solid #a855f7; }

.pe-row-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.pe-drag-handle { cursor: grab; padding: 2px 4px; flex-shrink: 0; }
.pe-drag-handle:active { cursor: grabbing; }
.pe-ex-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-md); font-weight: 500; overflow: hidden;
}
.pe-ex-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-row-top-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pe-ex-delete { opacity: 0.3; }
.pe-exercise-row:hover .pe-ex-delete { opacity: 1; }

/* Superset badge */
.pe-ss-badge {
  font-size: var(--fs-xs); font-weight: 500; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pe-ss-a { color: var(--primary); background: var(--primary-dim); }
.pe-ss-b { color: var(--success); background: var(--success-dim); }
.pe-ss-c { color: var(--warning); background: var(--warning-dim); }
.pe-ss-d { color: #a855f7; background: rgba(168,85,247,0.12); }

/* Notes button */
.pe-notes-btn { opacity: 0.3; }
.pe-notes-btn.has-notes { opacity: 1; color: var(--primary); }
.pe-exercise-row:hover .pe-notes-btn { opacity: 0.8; }

/* Field row */
.pe-row-fields { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pe-field { display: flex; flex-direction: column; gap: 3px; }
.pe-field-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted);
}
.pe-field-input {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: var(--fs-base); font-weight: 500; text-align: center;
  padding: 6px 8px; height: 36px; width: 56px;
}
.pe-field-input:focus { border-color: var(--primary); outline: none; }
.pe-field-reps { width: 80px; }
.pe-field-rir { width: 56px; }
.pe-field-tempo { width: 84px; }
.pe-field-rest { width: 52px; }
.pe-field-unit { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.pe-rest-wrap { display: flex; align-items: center; gap: 3px; }

/* Superset link between exercises */
.pe-superset-link { display: flex; justify-content: center; padding: 2px 0; }
.pe-superset-btn {
  display: flex; align-items: center; gap: 5px; padding: 3px 10px;
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); background: none; border: 1px dashed var(--border);
  border-radius: 4px; cursor: pointer; transition: all .15s;
}
.pe-superset-btn:hover { border-color: var(--primary); color: var(--primary); }
.pe-superset-btn.active {
  border-style: solid; border-color: var(--primary); color: var(--primary);
  background: var(--primary-dim);
}

/* Notes area */
.pe-notes-wrap { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.pe-notes-wrap.hidden { display: none; }
.pe-notes-input {
  width: 100%; min-height: 48px; padding: 8px 10px; font-size: var(--fs-xs); line-height: 1.5;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); resize: vertical; font-family: inherit;
}
.pe-notes-input::placeholder { color: var(--text-muted); font-style: italic; }
.pe-notes-input:focus { border-color: var(--primary); outline: none; }

/* ── Volume Panel ─────────────────────────────────────────── */
.pe-volume-panel {
  width: 280px; border-left: 1px solid var(--border); padding: 14px;
  overflow-y: auto; flex-shrink: 0; background: var(--surface);
}
.vol-header-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.pe-volume-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); margin: 0;
}
.vol-info-btn {
  width: 20px; height: 20px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.vol-info-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Volume legend */
.vol-legend {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 12px; font-size: var(--fs-xs); line-height: 1.7;
}
.vol-legend-row { display: flex; align-items: center; gap: 6px; }
.vol-legend-row strong { min-width: 50px; }
.vol-legend-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-xs); font-style: italic; }
.vol-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.vol-dot.vol-under { background: var(--danger); }
.vol-dot.vol-mv { background: var(--warning); }
.vol-dot.vol-optimal { background: var(--success); }
.vol-dot.vol-high { background: var(--info); }
.vol-dot.vol-over { background: var(--danger); }

/* Volume table */
.vol-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.vol-table th {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--border);
}
.vol-table td { padding: 6px; border-bottom: 1px solid var(--border-light); }
.vol-muscle { font-weight: 500; font-size: var(--fs-xs); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.vol-eye { background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; }
.vol-eye:hover svg { opacity: 0.8 !important; }
.vol-day { color: var(--text-muted); font-weight: 500; }
.vol-dimmed { opacity: 0.35; }
.vol-hidden-row td { border-bottom-style: dashed; }
.vol-week-cell { padding: 6px 6px; }

/* Volume progress bars */
.vol-bar-wrap {
  position: relative; height: 20px; background: var(--surface-2);
  border-radius: 3px; overflow: hidden; min-width: 60px;
}
.vol-bar {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px;
  transition: width .2s;
}
.vol-bar.vol-none { background: transparent; }
.vol-bar.vol-under { background: var(--danger-dim); }
.vol-bar.vol-mv { background: var(--warning-dim); }
.vol-bar.vol-optimal { background: var(--success-dim); }
.vol-bar.vol-high { background: var(--info-dim); }
.vol-bar.vol-over { background: var(--danger-dim); }
.vol-bar-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: var(--fs-xs); font-weight: 500; z-index: 1;
}
.vol-bar-num.vol-none { color: var(--text-muted); }
.vol-bar-num.vol-under { color: var(--danger); }
.vol-bar-num.vol-mv { color: var(--warning); }
.vol-bar-num.vol-optimal { color: var(--success); }
.vol-bar-num.vol-high { color: var(--info); }
.vol-bar-num.vol-over { color: var(--danger); }

.vol-untrained { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }

/* ── Exercise Library Overlay ─────────────────────────────── */
.exercise-library {
  background: var(--bg); width: calc(100vw - 48px); min-width: 960px;
  margin: 12px auto; border-radius: 6px; display: flex; flex-direction: column;
  max-height: calc(100vh - 24px); border: 1px solid var(--border); position: relative;
}
.el-close-btn { position: absolute; top: 10px; right: 12px; z-index: 15; font-size: var(--fs-3xl); }
.exercise-library-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0;
}
.exercise-library-header h3 { font-size: var(--fs-lg); font-weight: 500; white-space: nowrap; }
.el-header-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; }
.el-header-controls .form-group input,
.el-header-controls .form-group select { padding: 7px 10px; font-size: var(--fs-xs); }
.el-header-controls .form-group input#el-search {
  padding: 9px 14px; font-size: var(--fs-base); font-weight: 500;
  border: 2px solid var(--primary); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.el-header-controls .form-group input#el-search::placeholder { color: var(--text-subtle); }
.el-header-controls .form-group input#el-search:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.exercise-library-body { flex: 1; overflow-y: auto; padding: 0 20px 16px; }

/* Exercise table */
.el-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.el-table thead { position: sticky; top: 0; z-index: 10; }
.el-table th {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); text-align: left; padding: 10px 10px;
  border-bottom: 2px solid var(--border); background: var(--bg);
}
.el-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; font-size: var(--fs-xs); white-space: nowrap; }
.el-table tr:hover td { background: var(--surface-hover); }
.el-name-cell { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--fs-sm); }
.el-thumb { width: 44px; height: 26px; border-radius: 3px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.el-thumb-clickable { cursor: pointer; transition: opacity 0.15s, box-shadow 0.15s; }
.el-thumb-clickable:hover { opacity: 0.8; box-shadow: 0 0 0 2px var(--accent); }
.el-thumb-placeholder { width: 44px; height: 26px; border-radius: 3px; background: var(--surface-2); flex-shrink: 0; }

/* Quick video preview modal */
.el-quick-video-box { width: 640px; max-width: 90vw; background: var(--surface); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.el-quick-video-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.el-quick-video-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-quick-video-player { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.el-quick-video-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.el-sys-badge { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); margin-left: 4px; vertical-align: middle; }
.el-override-badge { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, #f59e0b 12%, transparent); color: #92400e; margin-left: 4px; vertical-align: middle; }
.el-brand-badge { font-size: var(--fs-xs); font-weight: 500; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); }
.el-row-system td { opacity: 0.85; }

/* Clickable exercise name */
.el-name-link { color: var(--text); text-decoration: none; font-weight: 500; }
.el-name-link:hover { color: var(--primary); text-decoration: underline; }

/* Exercise view modal */
/* System Edit mode — inline video URL column */
.el-inline-video { display: flex; align-items: center; gap: 6px; }
.el-inline-video-input { width: 100%; font-size: var(--fs-xs); font-family: 'SF Mono', 'Consolas', monospace; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s, background 0.3s; }
.el-inline-video-input:focus { border-color: var(--accent); }
.el-inline-video-input::placeholder { color: var(--text-subtle); font-family: inherit; }
.el-inline-video-saved { background: rgba(72, 187, 120, 0.1) !important; border-color: rgba(72, 187, 120, 0.5) !important; }
.el-inline-video-error { background: rgba(229, 62, 62, 0.1) !important; border-color: rgba(229, 62, 62, 0.5) !important; }
.el-inline-video-ok { color: var(--success, #48bb78); font-size: var(--fs-base); font-weight: 500; flex-shrink: 0; }
.el-inline-video.has-video .el-inline-video-input { border-color: rgba(72, 187, 120, 0.3); }

/* View modal tabs */
.el-view-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px; }
.el-view-tab { padding: 8px 16px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.el-view-tab:hover { color: var(--text); }
.el-view-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Alternatives tab */
.el-alt-loading { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; gap: 8px; }
.el-alt-section { margin-bottom: 20px; }
.el-alt-section-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.el-alt-count { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); background: var(--surface-2); padding: 1px 6px; border-radius: 99px; }
.el-alt-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; transition: background 0.1s; }
.el-alt-row:hover { background: var(--surface-2); }
.el-alt-info { flex: 1; min-width: 0; }
.el-alt-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-alt-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.el-alt-score { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); background: var(--surface-2); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.el-alt-variant { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: rgba(99, 102, 241, 0.1); color: var(--accent); }
.el-alt-pinned { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: rgba(72, 187, 120, 0.15); color: var(--success, #48bb78); }
.el-alt-notes { font-size: var(--fs-xs); color: var(--text-subtle); font-style: italic; }
.el-alt-pin-btn { width: 24px !important; height: 24px !important; flex-shrink: 0; }

/* System Edit toggle button */
.el-sys-edit-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Exercise actions row — horizontal layout */
.el-actions-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.el-actions-row .btn-icon { width: 28px; height: 28px; padding: 0; }

.el-view-video { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.el-view-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.el-view-no-video { padding: 40px; text-align: center; color: var(--text-subtle); background: var(--surface-2); font-size: var(--fs-sm); }
.el-view-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; background: var(--surface); }
#el-view-modal .modal-box { background: var(--surface); }
.el-view-meta-item { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-base); font-weight: 500; }
.el-view-meta-item .muscle-badge { font-size: var(--fs-base); font-weight: 500; padding: 3px 10px; }
.el-view-meta-item .el-brand-badge { font-size: var(--fs-base); font-weight: 500; padding: 3px 10px; }
.el-view-meta-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.el-view-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.el-view-section-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px; }
.el-view-instructions { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.el-view-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.el-view-tag { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); }

/* Muscle badges */
.muscle-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 500; padding: 2px 7px;
  border-radius: 3px; white-space: nowrap;
}
.muscle-primary { color: var(--primary); background: var(--primary-dim); }
.muscle-secondary { color: var(--text-muted); background: var(--surface-2); }

/* ── Exercise Search Modal (multi-select) ─────────────────── */
.es-result-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 6px; transition: all .15s; cursor: pointer; user-select: none;
}
.es-result-card:hover { background: var(--surface-hover); border-color: var(--primary); }
.es-result-card.es-selected { background: var(--primary-dim); border-color: var(--primary); }
.es-check { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.es-check-empty {
  width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 3px;
  transition: border-color .15s;
}
.es-result-card:hover .es-check-empty { border-color: var(--primary); }
.es-result-name { font-size: var(--fs-base); font-weight: 500; margin-bottom: 2px; }
.es-result-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.es-footer {
  padding: 12px 16px; border-top: 1px solid var(--border); display: flex;
  align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0;
}

/* Btn helpers */
.btn-sm { font-size: var(--fs-xs); padding: 5px 12px; border-radius: 4px; cursor: pointer; border: none; font-weight: 500; }
.btn-danger { background: var(--danger-dim); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 4px; }
.btn-icon:hover { background: var(--surface-hover); color: var(--text); }
.btn-icon--danger:hover { color: var(--danger); }

@media (max-width: 900px) {
  .pe-layout { flex-direction: column; }
  .pe-volume-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 200px; }
  .pe-row-fields { flex-wrap: wrap; }
  .exercise-library-header { flex-direction: column; align-items: stretch; }
  .pe-schedule-grid { flex-wrap: wrap; }
}

/* ============================================================
   TASKS — Power List Page (Overhauled)
   ============================================================ */

/* Loading / Error */
.tasks-loading, .tasks-error {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 60px 20px; color: var(--text-muted); font-size: var(--fs-base);
}
.tasks-error button { margin-left: 8px; }

/* ── Top Bar ──────────────────────────────────────────────────── */
.tasks-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 12px; flex-wrap: wrap;
}
.tasks-date-nav {
  display: flex; align-items: center; gap: 8px;
}
.tasks-nav-arrow {
  background: none; border: 1px solid var(--border); color: var(--text);
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.tasks-nav-arrow:hover { background: var(--surface-2); border-color: var(--text-muted); }
.tasks-date-label { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.tasks-today-btn {
  font-size: var(--fs-xs); font-weight: 500; background: var(--primary-dim); color: var(--primary);
  border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tasks-top-center { display: flex; align-items: center; gap: 10px; }
.tasks-yesterday-rate { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.tasks-plan-status {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 12px; border-radius: 4px;
}
.tasks-plan-status--planned { background: var(--success-dim); color: var(--success); }
.tasks-plan-status--unplanned { background: var(--warning-dim); color: var(--warning); animation: tasks-pulse 2s infinite; }
@keyframes tasks-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.tasks-top-actions { display: flex; align-items: center; gap: 8px; }
.tasks-pomo-count { font-size: var(--fs-xs); color: var(--text-muted); }
.btn-icon { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; position: relative; }
.btn-icon:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-muted); }
.tasks-backlog-badge { font-size: var(--fs-xs); font-weight: 500; background: var(--primary); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; position: absolute; top: -4px; right: -4px; }

/* ── Rich Tooltips ───────────────────────────────────────────── */
.tasks-tip-wrap { position: relative; }
.tasks-tip {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 600;
  width: 260px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.tasks-tip::before {
  content: ''; position: absolute; top: -5px; right: 14px;
  width: 8px; height: 8px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.tasks-tip-wrap:hover .tasks-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.tasks-tip-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text); margin-bottom: 4px; }
.tasks-tip-body { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); line-height: 1.5; }

[data-theme="light"] .tasks-tip { background: #fff; border-color: #dde3ed; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
[data-theme="light"] .tasks-tip::before { background: #fff; border-left-color: #dde3ed; border-top-color: #dde3ed; }
[data-theme="light"] .tasks-tip-title { color: #1e293b; }
[data-theme="light"] .tasks-tip-body { color: #64748b; }

/* Nudge banner */
.tasks-nudge {
  background: var(--warning-dim); color: var(--warning); padding: 10px 16px;
  border-radius: 6px; font-size: var(--fs-sm); display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.tasks-nudge-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Celebration message */
.tasks-celebration {
  font-size: var(--fs-sm); color: var(--success); font-weight: 500; padding: 8px 0;
  animation: tasks-fade-in 0.3s ease;
}
@keyframes tasks-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Calendar Strip ───────────────────────────────────────────── */
.tasks-cal-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px;
}
.tasks-cal-strip--collapsed { padding: 8px 16px; }
.tasks-cal-strip--collapsed .tasks-cal-header { margin-bottom: 0; }
.tasks-cal-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: flex; align-items: center; transition: color 0.15s; }
.tasks-cal-toggle:hover { color: var(--text); }
.tasks-cal-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px;
}
.tasks-cal-title {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted);
}
.tasks-cal-count { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-cal-empty { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-cal-allday {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.tasks-cal-allday-chip {
  font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px; border-radius: 4px;
  background: var(--primary-dim); color: var(--primary);
}
.tasks-cal-timeline {
  position: relative; height: 64px; background: var(--surface-2);
  border-radius: 4px; overflow: hidden;
}
.tasks-cal-hours {
  position: absolute; inset: 0; pointer-events: none;
}
.tasks-cal-hour {
  position: absolute; bottom: 2px; font-size: var(--fs-xs); color: var(--text-muted);
  transform: translateX(-50%); opacity: 0.6;
}
.tasks-cal-events {
  position: absolute; inset: 0; top: 2px; bottom: 16px;
}
.tasks-cal-event {
  position: absolute; top: 0; height: 100%; border-radius: 3px;
  background: var(--primary); opacity: 0.85; padding: 2px 6px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; cursor: default; min-width: 20px;
  transition: opacity 0.15s;
}
.tasks-cal-event:hover { opacity: 1; }
.tasks-cal-event--free { background: var(--success); opacity: 0.55; }
.tasks-cal-event-title {
  font-size: var(--fs-xs); font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tasks-cal-event-time {
  font-size: var(--fs-xs); color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.tasks-cal-now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--danger); z-index: 2; pointer-events: none;
}

/* ── Revenue Scoreboard (compact strip) ──────────────────────── */
.tasks-revenue-strip {
  display: flex; gap: 0; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.tasks-rev-cell {
  flex: 1; padding: 10px 14px; cursor: pointer; transition: background 0.15s, border-color 0.3s;
  border-right: 1px solid var(--border);
}
.tasks-rev-cell:last-child { border-right: none; }
.tasks-rev-cell:hover { background: var(--surface-2); }
.tasks-rev-cell--hit { background: var(--success-dim); }
.tasks-rev-cell--amber { background: var(--warning-dim); }
.tasks-rev-cell--red { background: var(--danger-dim); animation: tasks-pulse 1s infinite; }
.tasks-rev-cell--expanded { background: var(--surface-2); }
.tasks-rev-cell-row { display: flex; align-items: center; gap: 8px; }
.tasks-rev-cell-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap; }
.tasks-rev-cell-count { font-size: var(--fs-sm); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tasks-rev-cell-bar { width: 40px; height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.tasks-rev-cell-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.tasks-rev-streak-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tasks-rev-streak-dot--active { background: var(--success); }
.tasks-rev-streak-dot--lost { background: var(--danger); }
.tasks-rev-cell-expand { color: var(--text-muted); opacity: 0.4; transition: opacity 0.15s, transform 0.15s; flex-shrink: 0; display: flex; align-items: center; }
.tasks-rev-cell:hover .tasks-rev-cell-expand { opacity: 0.8; }
.tasks-rev-cell--expanded .tasks-rev-cell-expand { opacity: 1; }

/* Revenue expanded details */
.tasks-rev-expanded { padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }
.tasks-rev-detail-streak { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.tasks-rev-detail-actions { display: flex; gap: 6px; margin-top: 6px; }
.tasks-rev-subs { display: flex; flex-direction: column; gap: 4px; }
.tasks-rev-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text); padding: 3px 0;
}
.tasks-rev-sub--done { opacity: 0.5; }
.tasks-rev-sub--done .tasks-rev-sub-label { text-decoration: line-through; }
.tasks-rev-sub-check {
  width: 16px; height: 16px; min-width: 16px; border-radius: 3px;
  border: 1.5px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s; padding: 0;
}
.tasks-rev-sub-check:hover { border-color: var(--success); }
.tasks-rev-sub-check--done { background: var(--success); border-color: var(--success); color: #fff; }
.tasks-rev-sub-label { flex: 1; font-weight: 500; }
.tasks-rev-sub-count { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tasks-rev-inc {
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; transition: background 0.15s, border-color 0.15s;
}
.tasks-rev-inc:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
.tasks-rev-dec {
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; transition: background 0.15s, border-color 0.15s;
}
.tasks-rev-dec:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

/* ── Main Layout ──────────────────────────────────────────────── */
.tasks-main-layout { display: flex; gap: 16px; }
.tasks-center { flex: 1; min-width: 0; }

/* ── Momentum Indicator ──────────────────────────────────────── */
.tasks-momentum { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tasks-momentum-count { font-size: var(--fs-xl); font-weight: 500; color: var(--text); white-space: nowrap; }
.tasks-momentum-bar { display: flex; gap: 3px; flex: 1; }
.tasks-momentum-seg { height: 6px; flex: 1; border-radius: 3px; background: var(--surface-2); transition: background 0.3s; }
.tasks-momentum-seg--done { background: var(--seg-color, var(--success)); }

/* ── Power List ───────────────────────────────────────────────── */
.tasks-power-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.tasks-slot-section { }
.tasks-slot-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding: 0 2px;
}
.tasks-slot-title {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted);
}
.tasks-slot--big .tasks-slot-title { color: var(--warning); }
.tasks-slot-cap { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.tasks-slot-cards { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.tasks-slot-cards.tasks-slot-drop-target {
  outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 6px;
  background: var(--primary-dim);
}
.tasks-slot-empty {
  padding: 12px 16px; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer;
  text-align: center; transition: border-color 0.15s, color 0.15s;
}
.tasks-slot-empty:hover { border-color: var(--primary); color: var(--primary); }
.tasks-slot-empty-muted { padding: 12px 16px; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; opacity: 0.5; }

/* ── Task Card ────────────────────────────────────────────────── */
.tasks-card {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; cursor: grab; transition: border-color 0.15s, opacity 0.15s;
  gap: 10px;
}
.tasks-card:hover { border-color: var(--text-muted); }
.tasks-card--big {
  padding: 14px 16px; border-left: 3px solid var(--warning);
}

/* Racing glow on incomplete #1 Priority */
@property --frog-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.tasks-card--frog-glow {
  position: relative;
  border-color: #f59e0b;
  border-left-color: #f59e0b;
}
/* Glow border overlay — ~30% lit, rest transparent */
.tasks-frog-glow-wrap {
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
}
.tasks-frog-glow-spinner {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: conic-gradient(
    from var(--frog-angle),
    transparent 0%,
    rgba(251,191,36,0.15) 5%,
    rgba(251,191,36,0.5) 12%,
    #fbbf24 18%,
    #fde68a 23%,
    #fbbf24 28%,
    rgba(251,191,36,0.5) 33%,
    rgba(251,191,36,0.15) 38%,
    transparent 42%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  animation: frog-race 2.5s linear infinite;
}
/* Outer glow halo for the lit segment */
.tasks-frog-glow-spinner::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background: conic-gradient(
    from var(--frog-angle),
    transparent 0%,
    transparent 8%,
    rgba(251,191,36,0.25) 15%,
    rgba(253,230,138,0.45) 23%,
    rgba(251,191,36,0.25) 30%,
    transparent 38%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 7px;
  filter: blur(5px);
  animation: frog-race 2.5s linear infinite;
}
@keyframes frog-race {
  to { --frog-angle: 360deg; }
}
.tasks-card--frog-glow > *:not(.tasks-frog-glow-wrap) { position: relative; z-index: 4; }
/* Kill the glow when task is done or in progress */
.tasks-card--done .tasks-frog-glow-wrap,
.tasks-card--active .tasks-frog-glow-wrap { display: none; }

/* Frog nudge toast */
.tasks-frog-nudge {
  padding: 10px 16px; margin-bottom: 12px;
  background: var(--warning-dim); color: var(--warning);
  border-radius: 6px; font-size: var(--fs-sm); font-weight: 500;
  animation: tasks-fade-in 0.3s ease;
}
.tasks-card--done { opacity: 0.5; }
.tasks-card--active { border-color: var(--primary); background: var(--primary-dim); }
.tasks-card--dragging { opacity: 0.3; }
.tasks-card-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tasks-check {
  width: 20px; height: 20px; min-width: 20px; border-radius: 4px;
  border: 2px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.tasks-check:hover { border-color: var(--success); }
.tasks-check--done { background: var(--success); border-color: var(--success); }
.tasks-check--done svg { color: #fff; }
.tasks-card-body { flex: 1; min-width: 0; }
.tasks-card-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); display: block; }
.tasks-card-title--done { text-decoration: line-through; color: var(--text-muted); }
.tasks-card-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.tasks-card-cat { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.tasks-card-est, .tasks-card-elapsed { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-card-elapsed { color: var(--primary); font-weight: 500; }
.tasks-card-badge { font-size: var(--fs-xs); background: var(--surface-2); color: var(--text-muted); padding: 1px 5px; border-radius: 3px; }
.tasks-card-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.tasks-timer-btn:hover { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }
.tasks-timer-btn--active { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }
.tasks-pomo-btn:hover { background: rgba(220,80,60,0.1); border-color: #dc503c; }
.tasks-delete-btn:hover { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }

/* Unified action button base (Start, P, X all same size) */
.tasks-action-btn {
  width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0; flex-shrink: 0;
}

/* Start button override */
.tasks-start-btn {
  width: auto; padding: 0 10px; background: var(--primary); color: #fff;
  border-color: var(--primary); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tasks-start-btn:hover { filter: brightness(1.1); }
.tasks-start-btn:active { transform: scale(0.97); }

/* Reasoning hover tooltip on task title */
.tasks-card-title { position: relative; }
.tasks-card-reasoning-tip {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 600;
  width: 300px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease 0.5s, transform 0.2s ease 0.5s, visibility 0.2s ease 0.5s;
  font-weight: 400;
}
.tasks-card-title:hover .tasks-card-reasoning-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.tasks-card--expanded .tasks-card-reasoning-tip { display: none; }
[data-theme="light"] .tasks-card-reasoning-tip { background: #fff; border-color: #dde3ed; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

/* AI badge */
.tasks-card-badge--ai {
  background: var(--primary-dim); color: var(--primary); font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
}
.tasks-card-badge--ai svg { width: 10px; height: 10px; }

/* Expandable AI detail panel (inline below card content) */
.tasks-card--has-detail { cursor: pointer; }
.tasks-card-detail {
  flex-basis: 100%; width: 100%; padding: 12px 0 4px; margin-top: 2px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  animation: tasks-fade-in 0.2s ease;
}
.tasks-card-detail-section {}
.tasks-card-detail-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--primary); margin-bottom: 4px;
}
.tasks-card-detail-text {
  font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); line-height: 1.6;
}
.tasks-card--expanded { border-color: var(--primary-dim); }

/* Tooltip for action buttons — default: below, anchored right */
.tasks-tip--left { right: 0; }

/* When card is expanded, buttons shift — tooltip below, anchored left */
.tasks-card--expanded .tasks-tip--left {
  right: auto; left: 0;
  width: 280px;
}
.tasks-card--expanded .tasks-tip--left::before {
  right: auto; left: 14px;
}

/* Soft focus: dims non-active sections */
.tasks-soft-focus .tasks-revenue-strip,
.tasks-soft-focus .tasks-cal-strip { opacity: 0.3; pointer-events: none; transition: opacity 0.3s; }
.tasks-soft-focus .tasks-card:not(.tasks-card--active) { opacity: 0.4; }

/* ── Backlog Drawer ──────────────────────────────────────────── */
.tasks-backlog-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 799;
  animation: tasks-fade-in 0.2s ease;
}
.tasks-backlog-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; z-index: 800;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; padding: 16px;
  animation: tasks-slide-in-right 0.25s ease;
  overflow-y: auto;
}
@keyframes tasks-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
.tasks-backlog-drawer-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.tasks-backlog-drawer-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.tasks-backlog-drawer-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; }
.tasks-backlog-drawer-close:hover { color: var(--text); }

/* Google Calendar status badge */
.gcal-status-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 4px; background: var(--success-dim); color: var(--success);
}
.tasks-backlog-content {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; max-height: calc(100vh - 300px); overflow-y: auto;
}
.tasks-backlog-add { margin-bottom: 12px; }
.tasks-backlog-input {
  width: 100%; padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
  font-size: var(--fs-xs); outline: none;
}
.tasks-backlog-input:focus { border-color: var(--primary); }
.tasks-backlog-group { margin-bottom: 12px; }
.tasks-backlog-group-title {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px;
}
.tasks-backlog-group--overdue { color: var(--danger); }
.tasks-backlog-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; }
.tasks-backlog-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 4px; cursor: grab; font-size: var(--fs-xs); color: var(--text);
  transition: background 0.15s;
}
.tasks-backlog-item:hover { background: var(--surface-2); }
.tasks-backlog-item-cat { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tasks-backlog-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-backlog-item-due { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }
.tasks-backlog-item-due.overdue { color: var(--danger); font-weight: 500; }
.tasks-backlog-item-del {
  opacity: 0; font-size: var(--fs-base); color: var(--text-muted); cursor: pointer;
  background: none; border: none; transition: opacity 0.15s;
}
.tasks-backlog-item:hover .tasks-backlog-item-del { opacity: 1; }

/* ── Pomodoro Widget ──────────────────────────────────────────── */
.tasks-pomo-widget {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 16px; display: flex;
  align-items: center; gap: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tasks-pomo-widget--idle {
  cursor: default; opacity: 0.6; padding: 8px 14px;
}
.tasks-pomo-widget--active { border-color: var(--primary); }
.tasks-pomo-widget--break { border-color: var(--success); }
.tasks-pomo-icon { font-size: var(--fs-xl); }
.tasks-pomo-text { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.tasks-pomo-ring { width: 48px; height: 48px; position: relative; }
.tasks-pomo-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tasks-pomo-bg-ring { fill: none; stroke: var(--surface-2); stroke-width: 3; }
.tasks-pomo-fg-ring { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1s linear; }
.tasks-pomo-widget--break .tasks-pomo-fg-ring { stroke: var(--success); }
.tasks-pomo-time {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tasks-pomo-info { display: flex; flex-direction: column; gap: 2px; }
.tasks-pomo-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.tasks-pomo-task { font-size: var(--fs-xs); color: var(--text); font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-pomo-stop {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; transition: background 0.15s, color 0.15s;
}
.tasks-pomo-stop:hover { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }

/* ── Focus Mode ──────────────────────────────────────────────── */
.tasks-focus-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 120px); gap: 24px; padding: 40px 20px;
}
.tasks-focus-progress { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.tasks-focus-title { font-size: var(--fs-3xl); font-weight: 500; color: var(--text); text-align: center; max-width: 500px; line-height: 1.3; }
.tasks-focus-timer { font-size: 48px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--primary); letter-spacing: 2px; }
.tasks-focus-slot { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.tasks-focus-actions { display: flex; gap: 12px; margin-top: 8px; }
.tasks-focus-empty { text-align: center; }
.tasks-focus-done-title { font-size: var(--fs-2xl); font-weight: 500; color: var(--success); margin-bottom: 16px; }
.btn-lg { padding: 10px 24px; font-size: var(--fs-base); font-weight: 500; border-radius: 6px; }

/* ── Planning Wizard ─────────────────────────────────────────── */
.tasks-wizard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.tasks-wizard-title { margin: 0; font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.tasks-wizard-dots { display: flex; gap: 6px; }
.tasks-wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-2); transition: background 0.2s; }
.tasks-wizard-dot--active { background: var(--primary); }
.tasks-wizard-dot--done { background: var(--success); }
.tasks-wizard-step {}
.tasks-wizard-heading { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: 16px; }
.tasks-wizard-suggestions { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin-bottom: 16px; }
.tasks-wizard-group { margin-bottom: 8px; }
.tasks-wizard-group-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; padding: 0 4px; }
.tasks-wizard-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: var(--fs-sm); color: var(--text);
  transition: background 0.15s;
}
.tasks-wizard-option:hover { background: var(--surface-2); }
.tasks-wizard-option input { flex-shrink: 0; accent-color: var(--primary); }
.tasks-wizard-option-title { flex: 1; }
.tasks-wizard-custom { display: flex; gap: 8px; margin-bottom: 16px; }
.tasks-wizard-custom .form-input { flex: 1; }
.tasks-wizard-footer { display: flex; justify-content: space-between; align-items: center; }
.tasks-wizard-footer-right { display: flex; gap: 8px; margin-left: auto; }
.tasks-wizard-ai-loading { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; display: flex; align-items: center; gap: 8px; }
.spinner-sm { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }

/* ── Skeleton Loading ────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: var(--surface-2);
  background-image: linear-gradient(90deg, var(--surface-2) 0px, rgba(255,255,255,0.04) 40px, var(--surface-2) 80px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-text { height: 14px; width: 60%; margin-bottom: 8px; }
.skeleton-text--short { width: 35%; }
.skeleton-text--full { width: 100%; }
.skeleton-heading { height: 20px; width: 40%; margin-bottom: 12px; }
.skeleton-card { height: 80px; width: 100%; margin-bottom: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }

/* Wizard Review */
.tasks-wizard-review { display: flex; flex-direction: column; gap: 16px; }
.tasks-wizard-review-section {}
.tasks-wizard-review-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.tasks-wizard-review-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; margin-bottom: 4px; }
.tasks-wizard-review-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tasks-wizard-review-source { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface); padding: 2px 6px; border-radius: 3px; }
.tasks-wizard-review-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 4px 0; }

/* ── Brain Dump ──────────────────────────────────────────────── */
.tasks-braindump-items { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.tasks-braindump-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--surface-2); border-radius: 6px;
}
.tasks-braindump-item--assigned { background: var(--primary-dim); }
.tasks-braindump-item-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-braindump-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── First-Time Setup Modal ──────────────────────────────────── */
.tasks-setup-modal {
  max-width: 600px; margin: 40px auto; padding: 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.tasks-setup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.tasks-setup-title { margin: 0; font-size: var(--fs-xl); font-weight: 500; color: var(--text); }
.tasks-setup-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.tasks-setup-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.tasks-setup-step {}

/* Revenue targets grid */
.tasks-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tasks-setup-section {}
.tasks-setup-section-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 12px; }
.tasks-setup-sub-group { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--border); }
.tasks-setup-sub-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }
.tasks-setup-input-group { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.tasks-setup-input-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); flex: 1; }

/* Match CRM .form-group input styling for all setup inputs */
.tasks-setup-modal input[type="number"],
.tasks-setup-modal input[type="text"],
.tasks-setup-modal select,
.tasks-setup-modal textarea {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 10px 12px; font-size: var(--fs-base); font-family: inherit;
  outline: none; transition: border-color 0.15s;
}
.tasks-setup-modal input:focus,
.tasks-setup-modal select:focus,
.tasks-setup-modal textarea:focus { border-color: var(--primary); }
.tasks-setup-modal input::placeholder,
.tasks-setup-modal textarea::placeholder { color: var(--text-muted); }
.tasks-setup-modal select option { background: var(--surface-2); }
.tasks-setup-input { width: 80px !important; text-align: center; flex: none !important; }
.tasks-setup-modal input[type="number"]::-webkit-inner-spin-button,
.tasks-setup-modal input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tasks-setup-modal input[type="number"] { -moz-appearance: textfield; }

/* Typeform-style single-question slides */
.tasks-setup-step--typeform {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; text-align: center; gap: 24px; padding: 20px 0;
}
.tasks-setup-typeform-question {
  font-size: var(--fs-2xl); font-weight: 500; color: var(--text); line-height: 1.5; max-width: 440px;
}
.tasks-setup-typeform-select {
  width: 100%; max-width: 420px; padding: 14px 16px !important; font-size: var(--fs-md) !important;
  text-align: center; cursor: pointer;
}
.tasks-setup-content-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* Recurring templates */
.tasks-setup-templates { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tasks-setup-template-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 6px;
}
.tasks-setup-template-row--disabled { opacity: 0.4; }
.tasks-setup-template-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--primary); }
.tasks-setup-template-title { flex: 1; font-size: var(--fs-sm); min-width: 0; }
.tasks-setup-add-row { display: flex; gap: 8px; }
.tasks-setup-add-row .form-input { flex: 1; }

/* Plan choice cards */
.tasks-setup-plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tasks-setup-plan-card {
  padding: 20px 16px; border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.tasks-setup-plan-card:hover { border-color: var(--text-muted); background: var(--surface-2); }
.tasks-setup-plan-card--selected { border-color: var(--primary); background: var(--primary-dim); }
.tasks-setup-plan-card-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: 6px; }
.tasks-setup-plan-card-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

/* Welcome step */
.tasks-setup-welcome-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tasks-setup-welcome-item {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text); padding: 10px 14px;
  background: var(--surface-2); border-radius: 6px; border-left: 3px solid var(--primary);
}

/* Auto-fill benchmarks */
/* Funnel flow — horizontal card layout */
.tasks-setup-funnel-flow {
  display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 20px;
}
.tasks-funnel-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 20px; min-width: 110px; flex: 1;
}
.tasks-funnel-card-label {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.tasks-funnel-card-input {
  width: 64px !important; text-align: center; font-size: var(--fs-3xl) !important; font-weight: 500 !important;
  background: transparent !important; border: none !important; border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important; color: var(--text); padding: 2px 0 4px !important;
  outline: none; transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.tasks-funnel-card-input::-webkit-inner-spin-button,
.tasks-funnel-card-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tasks-funnel-card-input:focus { border-bottom-color: var(--primary) !important; }
.tasks-funnel-card-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-funnel-arrow-col {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 8px; flex-shrink: 0;
}
.tasks-funnel-arrow-icon { font-size: var(--fs-xl); color: var(--text-muted); }
.tasks-funnel-conv-pct { font-size: var(--fs-xs); font-weight: 500; color: var(--primary); }

.tasks-funnel-benchmark {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.tasks-funnel-autofill {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--primary); font-size: var(--fs-xs); font-weight: 500; padding: 4px 10px;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
}
.tasks-funnel-autofill:hover { background: var(--surface-2); border-color: var(--primary); }

[data-theme="light"] .tasks-funnel-card { background: #f1f5f9; }

/* Smart questionnaire */
.tasks-setup-questionnaire { margin-top: 16px; padding: 16px; background: var(--surface-2); border-radius: 6px; }
.tasks-setup-q-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-bottom: 12px; }

/* Summary */
.tasks-setup-summary { text-align: center; padding: 20px 0; }
.tasks-setup-summary-title { font-size: var(--fs-2xl); font-weight: 500; color: var(--success); margin-bottom: 20px; }
.tasks-setup-summary-items { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tasks-setup-summary-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tasks-setup-summary-item svg { color: var(--success); }

/* Metrics editor (setup wizard) */
.tasks-setup-metrics-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tasks-setup-metric-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 6px;
}
.tasks-setup-metric-label { flex: 1; font-size: var(--fs-sm); min-width: 0; }
.tasks-setup-metric-streak { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.tasks-setup-metric-streak input { accent-color: var(--primary); }
.tasks-setup-metric-remove {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.tasks-setup-metric-remove:hover { background: var(--danger-dim); color: var(--danger); }

[data-theme="light"] .tasks-setup-metric-row { background: #f1f5f9; }

/* Priority picker */
.tasks-setup-priority-list { display: flex; flex-direction: column; gap: 6px; }
.tasks-setup-priority-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.tasks-setup-priority-item:hover { border-color: var(--text-muted); }
.tasks-setup-priority-item--frog { border-color: #f59e0b; background: rgba(245,158,11,0.08); }
.tasks-setup-priority-radio {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.tasks-setup-priority-item--frog .tasks-setup-priority-radio {
  border-color: #f59e0b; background: #f59e0b; color: #fff;
}
.tasks-setup-priority-title { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tasks-setup-priority-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 3px; background: rgba(245,158,11,0.15); color: #f59e0b;
}

/* Light mode */
[data-theme="light"] .tasks-setup-modal { background: #fff; border-color: #dde3ed; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
[data-theme="light"] .tasks-setup-modal input[type="number"],
[data-theme="light"] .tasks-setup-modal input[type="text"],
[data-theme="light"] .tasks-setup-modal select { background: #f1f5f9; border-color: #dde3ed; color: #1e293b; }
[data-theme="light"] .tasks-setup-template-row { background: #f1f5f9; }
[data-theme="light"] .tasks-setup-plan-card { border-color: #dde3ed; }
[data-theme="light"] .tasks-setup-plan-card:hover { background: #f1f5f9; border-color: #94a3b8; }
[data-theme="light"] .tasks-setup-plan-card--selected { border-color: #7c5cfc; background: #f5f3ff; }
[data-theme="light"] .tasks-setup-questionnaire { background: #f1f5f9; }

/* ── Task card expand hint ───────────────────────────────────── */
.tasks-card-expand-hint { color: var(--text-muted); opacity: 0.3; transition: opacity 0.15s; flex-shrink: 0; display: inline-flex; align-items: center; margin-left: 4px; }
.tasks-card:hover .tasks-card-expand-hint { opacity: 0.6; }
.tasks-card--expanded .tasks-card-expand-hint { opacity: 1; }

/* ── Coach notes textarea ────────────────────────────────────── */
.tasks-card-notes {
  width: 100%; min-height: 60px; padding: 8px 10px; font-size: var(--fs-xs); font-family: inherit;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); outline: none; resize: vertical; line-height: 1.5;
  transition: border-color 0.15s;
}
.tasks-card-notes:focus { border-color: var(--primary); }
.tasks-card-notes::placeholder { color: var(--text-muted); }

/* Get tips button */
.tasks-card-get-tips { display: inline-flex; align-items: center; gap: 4px; }
.tasks-card-detail-loading { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 8px; padding: 4px 0; }

/* ── AI Suggestion Panel ─────────────────────────────────────── */
.tasks-ai-panel-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--text-muted); font-size: var(--fs-sm); }
.tasks-ai-panel-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.tasks-ai-panel-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 20px 0; text-align: center; }
.tasks-ai-panel-list { display: flex; flex-direction: column; gap: 8px; }
.tasks-ai-panel-item {
  padding: 10px 12px; background: var(--surface-2); border-radius: 6px;
  border: 1px solid var(--border); transition: border-color 0.15s;
}
.tasks-ai-panel-item:hover { border-color: var(--text-muted); }
.tasks-ai-panel-item-header { display: flex; align-items: center; gap: 8px; }
.tasks-ai-panel-item-slot {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
  background: var(--surface); color: var(--text-muted);
}
.tasks-ai-panel-item-slot--big { background: var(--warning-dim); color: var(--warning); }
.tasks-ai-panel-item-slot--medium { background: var(--primary-dim); color: var(--primary); }
.tasks-ai-panel-item-title { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); min-width: 0; }
.tasks-ai-panel-add {
  width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--primary); cursor: pointer;
  font-size: var(--fs-xl); font-weight: 500; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s; flex-shrink: 0;
}
.tasks-ai-panel-add:hover { background: var(--primary-dim); border-color: var(--primary); }
.tasks-ai-panel-item-reasoning { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* Light mode */
[data-theme="light"] .tasks-card-notes { background: #f1f5f9; border-color: #dde3ed; color: #1e293b; }
[data-theme="light"] .tasks-ai-panel-item { background: #f1f5f9; border-color: #dde3ed; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tasks-revenue-strip { flex-wrap: wrap; }
  .tasks-rev-cell { flex: 1 1 45%; }
}
@media (max-width: 768px) {
  .tasks-revenue-strip { flex-direction: column; }
  .tasks-rev-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .tasks-rev-cell:last-child { border-bottom: none; }
  .tasks-main-layout { flex-direction: column; }
  .tasks-backlog-drawer { width: 100%; }
  .tasks-setup-grid { grid-template-columns: 1fr; }
  .tasks-setup-plan-cards { grid-template-columns: 1fr; }
}

/* ── Tasks: Light Mode Overrides ──────────────────────────────── */
[data-theme="light"] .tasks-nav-arrow { border-color: #c8d0dc; color: #334155; }
[data-theme="light"] .tasks-nav-arrow:hover { background: #e8ecf2; border-color: #94a3b8; }
[data-theme="light"] .tasks-plan-status--unplanned { background: #fef3c7; color: #92400e; }
[data-theme="light"] .tasks-plan-status--planned { background: #dcfce7; color: #166534; }
[data-theme="light"] .tasks-nudge { background: #fef3c7; color: #92400e; }
[data-theme="light"] .tasks-revenue-strip { background: #fff; border-color: #dde3ed; }
[data-theme="light"] .tasks-rev-cell { border-right-color: #dde3ed; }
[data-theme="light"] .tasks-rev-cell:hover { background: #f1f5f9; }
[data-theme="light"] .tasks-rev-cell--hit { background: #dcfce7; }
[data-theme="light"] .tasks-rev-cell--amber { background: #fef3c7; }
[data-theme="light"] .tasks-rev-cell--red { background: #fef2f2; }
[data-theme="light"] .tasks-rev-cell-label { color: #475569; }
[data-theme="light"] .tasks-rev-cell-count { color: #1e293b; }
[data-theme="light"] .tasks-rev-cell-bar { background: #e2e8f0; }
[data-theme="light"] .tasks-rev-sub { color: #1e293b; }
[data-theme="light"] .tasks-rev-sub-check { border-color: #c8d0dc; }
[data-theme="light"] .tasks-rev-sub-check:hover { border-color: #22c55e; }
[data-theme="light"] .tasks-rev-sub-count { color: #64748b; }
[data-theme="light"] .tasks-rev-inc { border-color: #c8d0dc; color: #475569; }
[data-theme="light"] .tasks-rev-inc:hover { background: #ede9fe; border-color: #7c5cfc; color: #7c5cfc; }
[data-theme="light"] .tasks-slot-title { color: #475569; }
[data-theme="light"] .tasks-slot--big .tasks-slot-title { color: #b45309; }
[data-theme="light"] .tasks-slot-cap { color: #64748b; }
[data-theme="light"] .tasks-slot-empty { border-color: #a8b5c7; color: #64748b; }
[data-theme="light"] .tasks-slot-empty:hover { border-color: #7c5cfc; color: #7c5cfc; }
[data-theme="light"] .tasks-cal-event--free { opacity: 0.65; }
[data-theme="light"] .tasks-cal-event--free .tasks-cal-event-title { color: #1e293b; }
[data-theme="light"] .tasks-cal-event--free .tasks-cal-event-time { color: #475569; }
[data-theme="light"] .tasks-card { border-color: #dde3ed; background: #fff; }
[data-theme="light"] .tasks-card:hover { border-color: #94a3b8; }
[data-theme="light"] .tasks-card--big { border-left-color: #d97706; }
[data-theme="light"] .tasks-frog-nudge { background: #fef3c7; color: #92400e; }
[data-theme="light"] .tasks-card--active { border-color: #7c5cfc; background: #f5f3ff; }
[data-theme="light"] .tasks-card-title { color: #1e293b; }
[data-theme="light"] .tasks-card-cat { font-weight: 500; }
[data-theme="light"] .tasks-card-est { color: #64748b; }
[data-theme="light"] .tasks-card-elapsed { color: #6d28d9; }
[data-theme="light"] .tasks-card-badge { background: #f1f5f9; color: #64748b; }
[data-theme="light"] .tasks-check { border-color: #c8d0dc; }
[data-theme="light"] .tasks-check:hover { border-color: #22c55e; }
[data-theme="light"] .tasks-timer-btn,
[data-theme="light"] .tasks-pomo-btn,
[data-theme="light"] .tasks-delete-btn { border-color: #dde3ed; color: #64748b; }
[data-theme="light"] .tasks-momentum-seg { background: #e2e8f0; }
[data-theme="light"] .tasks-backlog-drawer { background: #fff; border-left-color: #dde3ed; box-shadow: -8px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .tasks-backlog-content { background: #fff; border-color: #dde3ed; }
[data-theme="light"] .tasks-backlog-input { background: #f1f5f9; border-color: #dde3ed; color: #1e293b; }
[data-theme="light"] .tasks-backlog-item:hover { background: #f1f5f9; }
[data-theme="light"] .tasks-cal-strip { background: #fff; border-color: #dde3ed; }
[data-theme="light"] .tasks-cal-title { color: #475569; }
[data-theme="light"] .tasks-cal-timeline { background: #f1f5f9; }
[data-theme="light"] .tasks-cal-hour { color: #64748b; }
[data-theme="light"] .tasks-pomo-widget { background: #fff; border-color: #dde3ed; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .tasks-pomo-bg-ring { stroke: #e2e8f0; }
[data-theme="light"] .tasks-pomo-stop { border-color: #dde3ed; color: #64748b; }
[data-theme="light"] .tasks-focus-timer { color: #6d28d9; }
[data-theme="light"] .tasks-wizard-option:hover { background: #f1f5f9; }
[data-theme="light"] .tasks-wizard-review-item { background: #f1f5f9; }
[data-theme="light"] .tasks-braindump-item { background: #f1f5f9; }
[data-theme="light"] .tasks-braindump-item--assigned { background: #ede9fe; }
[data-theme="light"] .tasks-card-ai-tip { background: #fff; border-color: #dde3ed; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
[data-theme="light"] .tasks-card-badge--ai { background: #ede9fe; color: #6d28d9; }
[data-theme="light"] .tasks-card-detail { border-top-color: #dde3ed; }
[data-theme="light"] .tasks-card-detail-text { color: #475569; }

/* ============================================================
   SAVE ATTEMPT MODAL
   ============================================================ */
/* ============================================================
   CUSTOM SELECT DROPDOWN
   ============================================================ */
/* Hide number input spinners globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
}

.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color 0.15s;
  text-align: left;
}
.custom-select-trigger:hover { border-color: var(--text-muted); }
.custom-select-trigger:focus { border-color: var(--primary); outline: none; }
.custom-select-trigger svg { color: var(--text-muted); flex-shrink: 0; }
.custom-select-text { flex: 1; }

.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 100;
  overflow: hidden;
}
.custom-select-dropdown.hidden { display: none; }

.custom-select-option {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.custom-select-option:hover {
  background: var(--primary-dim, rgba(0,78,249,0.1));
}
.custom-select-option.active {
  background: var(--primary-dim, rgba(0,78,249,0.15));
  color: var(--primary);
  font-weight: 500;
}

/* ============================================================
   SAVE ATTEMPT MODAL
   ============================================================ */
.save-attempt-modal {
  max-width: 520px;
}
.save-attempt-modal .modal-body {
  padding: 20px 24px;
  min-height: 200px;
}
.save-attempt-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.save-footer-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.save-step.hidden { display: none; }

/* Step label */
.save-step-label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
}

/* Mode selection cards */
.save-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.save-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.save-mode-card:hover {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.04);
}
.save-mode-icon { color: var(--text-muted); }
.save-mode-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.save-mode-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Reason grid */
.save-reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.save-reason-btn {
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.save-reason-btn:hover { border-color: var(--accent); }
.save-reason-btn.active {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.08);
  color: var(--accent);
}

.save-notes-input {
  width: 100%;
  resize: none;
  font-size: var(--fs-sm);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

/* Call mode panel */
.save-call-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.save-call-reason-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.save-call-section {}
.save-call-heading {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.save-call-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.save-call-point {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.save-call-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.save-call-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.save-call-action-btn:hover { border-color: var(--accent); }
.save-call-action-btn .action-tag {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 500;
}
.action-tag--discount { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.action-tag--pause { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.action-tag--call { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.action-tag--switch { background: rgba(168, 85, 247, 0.12); color: #a855f7; }

/* Message mode actions */
.save-msg-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.save-msg-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.save-msg-action:hover { border-color: var(--accent); }
.save-msg-action.active {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.04);
}
.save-msg-action-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.save-msg-action.active .save-msg-action-check {
  border-color: var(--accent);
  background: var(--accent);
}
.save-msg-action-check svg { display: none; }
.save-msg-action.active .save-msg-action-check svg { display: block; }
.save-msg-action-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.save-msg-action-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Action configs */
.save-action-config {
  margin-top: 12px;
  padding: 12px;
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.save-action-config.hidden { display: none; }
.save-config-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Preset buttons */
.save-discount-presets,
.save-pause-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.save-preset-btn {
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.save-preset-btn:hover { border-color: var(--accent); }
.save-preset-btn.active {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.08);
  color: var(--accent);
}
.save-preset-btn--custom { font-style: italic; }

.save-custom-discount.hidden { display: none; }
.save-inline-fields {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.save-field-group {
  flex: 1;
}
.save-field-group label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.save-field-group input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--text);
}

.save-discount-preview,
.save-switch-preview,
.save-pause-info {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 8px;
}

/* Message preview */
.save-message-input {
  width: 100%;
  resize: vertical;
  font-size: var(--fs-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
  min-height: 100px;
}
.save-email-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.save-email-toggle input { cursor: pointer; }

/* Status badges */
.badge-paused {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.badge-discount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.badge-pause-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* Save history */
.save-history {
  margin-top: 12px;
}
.save-history-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.save-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: var(--fs-xs);
}
.save-history-reason { font-weight: 500; color: var(--text); }
.save-history-outcome {
  padding: 2px 8px;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
}
.save-history-outcome--saved { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.save-history-outcome--failed { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.save-history-outcome--pending { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.save-history-date { color: var(--text-muted); }

/* ============================================================
   CHANNEL BADGES & SELECTOR (Unified Inbox)
   ============================================================ */
/* ============================================================
   COMMUNICATIONS SETUP WIZARD
   ============================================================ */
.comms-wizard-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comms-prog-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.comms-prog-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: all 0.2s;
}
.comms-prog-dot.done {
  border-color: #22c55e;
  background: #22c55e;
}
.comms-prog-dot.active {
  border-color: var(--accent);
  background: var(--accent);
}
.comms-prog-line {
  width: 24px;
  height: 2px;
  background: var(--border);
}

.comms-step {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.comms-step-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.comms-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comms-step-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.comms-step-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.comms-modal {
  max-width: 640px;
}
.comms-modal-body {
  padding: 24px 28px;
  min-height: 220px;
}
.comms-modal-desc {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.5;
}
.comms-modal-body input[type="text"],
.comms-modal-body input[type="email"],
.comms-modal-body input[type="tel"],
.comms-modal-body input[type="number"],
.comms-modal-body input[type="password"],
.comms-modal-body select,
.comms-modal-body textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.15s;
}
.comms-modal-body .custom-select-trigger {
  padding: 9px 12px;
  font-size: var(--fs-base);
}
.comms-modal-body input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.comms-modal-body input:focus,
.comms-modal-body select:focus,
.comms-modal-body textarea:focus {
  border-color: var(--primary);
}
.comms-modal-body input::placeholder {
  color: var(--text-subtle, var(--text-muted));
  opacity: 0.6;
}
.comms-modal-body label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.comms-wizard-body {
  padding: 0 24px 8px;
}
.comms-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}
.comms-wizard-step-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}
.comms-step.hidden { display: none; }
.comms-divider {
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* Channel selection cards */
.comms-channel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.comms-channel-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.comms-channel-card:hover { border-color: var(--accent); }
.comms-channel-card:has(.comms-channel-check:checked) {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.06);
}
.comms-channel-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.comms-channel-icon { color: var(--text-muted); }
.comms-channel-card:has(.comms-channel-check:checked) .comms-channel-icon { color: var(--accent); }
.comms-channel-check {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.comms-channel-check:disabled {
  accent-color: #22c55e;
  cursor: default;
  opacity: 0.7;
}
.comms-channel-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.comms-channel-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.comms-channel-status {
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.comms-why {
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 16px;
}
.comms-why-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.comms-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comms-why-list li {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}
.comms-why-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.comms-substep.hidden { display: none; }
.comms-substep-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.comms-substep-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* DNS record table */
.comms-dns-table {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.comms-dns-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.5fr 60px;
  gap: 12px;
  padding: 12px 14px;
  font-size: var(--fs-sm);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.comms-dns-row:last-child { border-bottom: none; }
.comms-dns-row--header {
  background: rgba(255,255,255,0.03);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
}
.comms-dns-type {
  font-weight: 500;
  color: var(--accent);
}
.comms-dns-name {
  font-family: monospace;
  font-size: var(--fs-xs);
  color: var(--text);
  word-break: break-all;
  cursor: pointer;
  transition: color 0.15s;
}
.comms-dns-name:hover { color: var(--accent); }
.comms-dns-val {
  font-family: monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: break-all;
  cursor: pointer;
  transition: color 0.15s;
}
.comms-dns-val:hover { color: var(--accent); }
.comms-dns-pri { text-align: center; color: var(--text-muted); }

.comms-dns-help {
  margin-top: 8px;
}
.comms-dns-help summary {
  font-size: var(--fs-xs);
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.comms-dns-instructions {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.comms-dns-instructions p { margin-bottom: 8px; }
.comms-dns-instructions code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--fs-xs);
}

/* Status summary */
.comms-summary {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.comms-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.comms-sum-icon {
  font-size: var(--fs-base);
  width: 20px;
  text-align: center;
}
.comms-sum--pending { color: var(--text-muted); }
.comms-sum--done { color: #22c55e; }
.comms-sum-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  width: 60px;
}
.comms-sum-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.inbox-ch-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 4px;
  vertical-align: middle;
}
.inbox-ch--sms { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.inbox-ch--email { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.inbox-ch--call { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* Email composer */
.inbox-email-composer {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.inbox-email-composer-fields {
  padding: 8px 14px 0;
}
.inbox-email-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.inbox-email-field-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-xs);
  min-width: 52px;
  flex-shrink: 0;
}
.inbox-email-field-value {
  color: var(--text);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-email-subject-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0;
  outline: none;
}
.inbox-email-subject-input::placeholder { color: var(--text-muted); font-weight: 400; }
.inbox-email-body-input {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  padding: 12px 14px;
  resize: none;
  outline: none;
  min-height: 120px;
  font-family: inherit;
}
.inbox-email-body-input::placeholder { color: var(--text-muted); }
.inbox-email-composer-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.ee-cc-toggle {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #9ca3af;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.ee-cc-toggle:hover { color: #374151; border-color: #9ca3af; }
.inbox-email-schedule-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.inbox-email-schedule-btn:hover { color: var(--accent); border-color: var(--accent); }
.inbox-email-discard-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.inbox-email-discard-btn:hover { color: var(--danger); border-color: var(--danger); }
.inbox-email-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 6px;
}

/* ── Email cards (GHL-style) ──────────────────────────── */
/* OLD classes removed — replaced by .inbox-ecard */
.inbox-email-card_DEPRECATED_DO_NOT_USE {
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  margin: 8px 0;
  overflow: hidden;
}
.inbox-email-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  gap: 12px;
}
.inbox-email-header:hover { background: var(--bg-hover); }
.inbox-email-subject {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 12px;
}
.inbox-email-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.inbox-email-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-email-chevron {
  transition: transform 0.2s;
}
.inbox-email-body {
  display: none;
  border-top: 1px solid var(--border);
  background: #fff;
}
.inbox-email-body.expanded {
  display: block;
  max-height: 500px;
  overflow-y: auto;
}
.inbox-email-chevron {
  transition: transform 0.15s;
}
.inbox-email-chevron.rotated {
  transform: rotate(180deg);
}
.inbox-email-meta {
  padding: 10px 14px 6px;
  font-size: var(--fs-xs);
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Peek section — always visible when collapsed, hidden when expanded */
.inbox-email-peek {
  padding: 6px 14px 10px;
  font-size: var(--fs-xs);
}
.inbox-email-peek-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.inbox-email-peek-line {
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 2px;
}
.inbox-email-card.is-expanded .inbox-email-peek { display: none; }
.inbox-email-full {
  padding: 6px 14px 14px;
  font-size: var(--fs-sm);
  color: #1f2937;
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-word;
}
/* Email card action buttons row */
.inbox-email-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inbox-email-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.inbox-email-action-btn:hover { background: var(--bg-hover); color: var(--text); }
/* Email popout modal */
.inbox-email-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-email-modal {
  background: var(--surface, var(--bg-card, #1e1e2e));
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.inbox-email-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.inbox-email-modal-subject {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
}
.inbox-email-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xl);
}
.inbox-email-modal-close:hover { background: var(--bg-hover); color: var(--text); }
.inbox-email-modal-meta {
  padding: 12px 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-email-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.7;
  white-space: pre-line;
  word-break: break-word;
}
.inbox-email-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.inbox-email-modal-reply-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.inbox-email-modal-reply-btn:hover { opacity: 0.9; }

/* ── New email cards (GHL-style) ─────────────────────── */
.inbox-ecard {
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin: 8px 0;
  overflow: hidden;
}
.inbox-ecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.inbox-ecard-header:hover { background: rgba(255,255,255,0.09); }
[data-theme="light"] .inbox-ecard-header { background: #eef1f6; }
[data-theme="light"] .inbox-ecard-header:hover { background: #e4e8ef; }
.inbox-ecard-subject {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.inbox-ecard-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inbox-ecard-chevron { transition: transform 0.15s; color: var(--text-muted); }
.inbox-ecard-chevron.rotated { transform: rotate(180deg); }
.inbox-ecard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.inbox-ecard-btn:hover { background: var(--bg-hover); color: var(--text); }
.inbox-ecard-collapsed {
  padding: 10px 14px;
}
.inbox-ecard-sender-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: 3px;
}
.inbox-ecard-preview {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 1px;
}
.inbox-ecard.expanded .inbox-ecard-collapsed { display: none; }
.inbox-ecard-expanded {
  display: none;
  flex-direction: column;
  max-height: 600px;
}
.inbox-ecard.expanded .inbox-ecard-expanded { display: flex; }
.inbox-ecard-sticky-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
.inbox-ecard-meta-left { min-width: 0; }
.inbox-ecard-meta-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.inbox-ecard-meta-to {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  padding-left: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-ecard-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inbox-ecard-meta-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-ecard-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  min-height: 60px;
  line-height: 1.65;
  white-space: pre-line;
  word-break: break-word;
}
.inbox-ecard-footer {
  padding: 10px 4px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  bottom: 0;
}
.inbox-ecard-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.inbox-ecard-reply-btn:hover { opacity: 0.9; }

/* Inline reply editor inside expanded card */
.ecard-inline-reply {
  margin: 10px;
  border: 1px solid rgba(99,102,241,0.4);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(99,102,241,0.04);
  overflow: hidden;
}
.ecard-inline-reply-fields {
  padding: 8px 12px 0;
}
.ecard-inline-reply-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.ecard-inline-reply-field:last-child { border-bottom: none; }
.ecard-inline-reply-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-xs);
  min-width: 50px;
  flex-shrink: 0;
}
.ecard-inline-reply-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 2px 0;
  outline: none;
}
.ecard-inline-reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
}
.ecard-inline-reply-body {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 10px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  min-height: 80px;
}
.ecard-inline-reply-body:focus { border-color: var(--accent); }
.ecard-inline-reply-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
}
.ecard-inline-reply-actions .inbox-ecard-reply-btn,
.ecard-inline-reply-actions .inbox-email-schedule-btn,
.ecard-inline-reply-actions .ecard-inline-reply-discard {
  height: 34px;
  font-size: var(--fs-xs);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ecard-inline-reply-actions .inbox-email-schedule-btn {
  width: 34px;
  padding: 0;
  justify-content: center;
}
.ecard-inline-reply-discard {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.ecard-inline-reply-discard:hover { color: #ef4444; border-color: #ef4444; }

.inbox-msg--call {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}
.inbox-call-icon { font-size: var(--fs-base); }
.inbox-call-label { font-weight: 500; }

/* Channel selector bar */
.inbox-channel-bar {
  display: flex;
  align-items: center;
  padding: 4px 12px 0;
}
.inbox-channel-selector {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.inbox-ch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inbox-ch-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.inbox-ch-btn.active { background: var(--accent); color: #fff; }
[data-theme="light"] .tasks-card--expanded { border-color: #c4b5fd; }

/* ── Cohort Analysis ───────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-bottom-row { grid-template-columns: 1fr !important; }
}
.cohort-table { margin-top: 8px; }
.cohort-header-row {
  display: grid;
  grid-template-columns: 90px 90px 90px 90px 1fr;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.cohort-header-row .cohort-cell {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 500;
}
.cohort-row {
  display: grid;
  grid-template-columns: 90px 90px 90px 90px 1fr;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.cohort-row:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] .cohort-row:hover { background: rgba(0,0,0,0.02); }
.cohort-row:last-child { border-bottom: none; }
.cohort-cell { font-size: var(--fs-xs); color: var(--text-secondary); display: flex; align-items: center; }
.cohort-label-cell { color: var(--text); }
.cohort-bar-cell { padding-right: 8px; }
.cohort-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.cohort-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ── Chart Drill-Down ──────────────────────────────────────── */
.drilldown-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  border-radius: 4px;
}
.drilldown-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="light"] .drilldown-row:hover { background: rgba(0,0,0,0.03); }
.drilldown-row:last-child { border-bottom: none; }

/* ── Benchmark Targets ─────────────────────────────────────── */
.benchmark-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.bt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-row label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
}
.bt-row input {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-xs);
  text-align: right;
}
.bt-row input::placeholder { color: var(--text-muted); }

/* ── Rate History ──────────────────────────────────────────── */
.profile-stat-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  cursor: help;
  text-decoration: underline dotted;
}

/* ── Churn Detection ───────────────────────────────────────── */

/* Risk dot on client list */
.churn-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Score breakdown card on profile */
.churn-breakdown { padding: 4px 0; }
.churn-breakdown-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 12px 20px;
}
.churn-loading {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 12px 0;
}
.churn-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.churn-score-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--churn-color, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.churn-score-num {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
}
.churn-score-meta { flex: 1; }
.churn-risk-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.churn-scored-at {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.churn-actions { flex-shrink: 0; }
.churn-velocity {
  font-size: var(--fs-xs);
  color: #f97316;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 12px;
}
.churn-snoozed {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 12px;
}
.churn-signals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.churn-signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.churn-signal-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.churn-signal-value {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-mono, 'SF Mono', monospace);
}
.churn-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.churn-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.churn-signal-detail {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   CHECK-INS TAB — Profile Inline Cards
   ══════════════════════════════════════════════════════════════ */

/* ── Metrics Strip ───────────────────────────────────────────── */
.ci-metrics-strip {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.ci-metric {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; text-align: center;
}
.ci-metric--pending { border-color: rgba(245,158,11,0.3); }
.ci-metric-value { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.ci-metric-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; }

/* ── Status Filter ───────────────────────────────────────────── */
.ci-header-right { display: flex; align-items: center; gap: 10px; }
.ci-status-filter {
  display: flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.ci-filter-btn {
  padding: 4px 12px; font-size: var(--fs-xs); font-weight: 500;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  transition: all 0.15s;
}
.ci-filter-btn.active { background: var(--primary); color: #fff; }
.ci-filter-btn:hover:not(.active) { color: var(--text); }

/* ── Delta Indicators ────────────────────────────────────────── */
.ci-delta {
  font-size: var(--fs-xs); font-weight: 500; margin-left: 6px;
  padding: 1px 5px; border-radius: 3px;
  color: var(--text-muted); background: rgba(255,255,255,0.04);
  cursor: help;
}

/* ── Review / Open Buttons ───────────────────────────────────── */
.ci-review-btn, .ci-open-btn { flex-shrink: 0; margin-left: auto; white-space: nowrap; }

/* ── Streak Dots (embedded in streak metric card) ────────────── */
.ci-metric--wide { min-width: 160px; }
.ci-streak-dots { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.ci-streak-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.12);
}
.ci-streak-dot--filled { background: var(--primary); border-color: var(--primary); }
.ci-streak-dot--current {
  width: 10px; height: 10px;
  background: none; border: 2px solid var(--text);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) { .ci-metrics-strip { flex-wrap: wrap; } .ci-metric { min-width: calc(50% - 8px); } }

.ci-loading { padding: 24px 20px; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; gap: 10px; }
.ci-empty { padding: 48px 20px; text-align: center; }
.ci-empty-icon { color: var(--text-muted); opacity: 0.4; margin-bottom: 12px; }
.ci-empty-title { font-size: var(--fs-md); font-weight: 500; margin-bottom: 6px; }
.ci-empty-sub { font-size: var(--fs-xs); color: var(--text-muted); max-width: 320px; margin: 0 auto; line-height: 1.5; }

.ci-list-header { padding: 0 20px !important; height: 48px; display: flex; align-items: center; border-bottom: none !important; }

.ci-card {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ci-card:first-child { border-top: 1px solid var(--border); }
.ci-card:last-child { border-bottom: none; }
.ci-card:hover { background: rgba(255,255,255,0.02); }

.ci-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 48px;
  max-height: 48px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.ci-week {
  font-weight: 500;
  font-size: var(--fs-sm);
  flex: 1;
  min-width: 0;
}

.ci-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ci-badge--approved  { background: rgba(34,197,94,0.12); color: #22c55e; }
.ci-badge--pending   { background: rgba(245,158,11,0.12); color: #f59e0b; }
.ci-badge--returned  { background: rgba(59,130,246,0.12); color: #3b82f6; }

.ci-submitted {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.ci-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  display: flex;
}
.ci-card.expanded .ci-chevron { transform: rotate(90deg); }

.ci-detail {
  display: none;
  padding: 0 20px 16px;
  animation: fadeIn 0.2s ease;
}
.ci-card.expanded .ci-detail { display: block; }

.ci-responses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ci-response-item--full { grid-column: 1 / -1; }

.ci-response-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.ci-response-value {
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.ci-scale-hint { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.ci-no-responses { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; }

.ci-coach-response {
  margin-top: 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 14px;
  border-left: 3px solid var(--primary);
}
.ci-coach-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 6px;
}
.ci-coach-notes { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }

.ci-action-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ci-action-tag {
  font-size: var(--fs-xs);
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(99,102,241,0.1);
  color: var(--primary);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS TAB — Stat Cards, Charts, Habit Grid
   ══════════════════════════════════════════════════════════════ */
.progress-tab-wrap { padding: 0; display: flex; flex-direction: column; gap: 16px; }
.progress-tab-wrap .p-grid { margin-bottom: 0; }

.prog-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.prog-stat-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.prog-stat-card--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.prog-stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.prog-stat-value {
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.prog-delta {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.prog-delta--good { color: #004ef9; }
.prog-delta--bad  { color: rgba(255,255,255,0.45); }

/* Period toggle */
.prog-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.prog-period-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border-radius: 6px; padding: 2px; border: 1px solid var(--border); }
.prog-period-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.5px;
  padding: 5px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.prog-period-btn:hover { color: var(--text); }
.prog-period-btn.active { background: var(--primary); color: #fff; }

.progress-tab-wrap .p-grid .card.profile-card { display: flex; flex-direction: column; }
.prog-chart-wrap {
  padding: 16px 20px;
  height: 220px;
  position: relative;
  flex: 1;
}
.prog-habit-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 220px; }
.prog-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  padding: 40px 20px;
}

.card-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 8px;
}

/* Habit Grid */
.prog-habit-wrap { padding: 12px 20px 16px; }
.prog-habit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.prog-habit-row:last-child { border-bottom: none; }
.prog-habit-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
}
.prog-habit-dots {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}
.prog-habit-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  transition: background 0.15s;
}
.prog-habit-dot--done {
  background: #004ef9;
  border-color: #003bcc;
}
.prog-habit-pct {
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 36px;
  text-align: right;
  color: var(--text-muted);
}

/* Sparklines in stat cards */
.prog-stat-card { position: relative; overflow: hidden; }
.prog-sparkline {
  display: block;
  width: 100% !important;
  height: 24px !important;
  max-height: 24px;
  margin-bottom: 6px;
}

/* Compliance row */
.prog-compliance-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.prog-compliance-row:empty { display: none; }
.prog-compliance-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.prog-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.prog-ring-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg, #0f0f19);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.prog-vol-value {
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.5px;
}
.prog-compliance-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.prog-compliance-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Check-In Metric Trends */
.prog-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 20px;
}
.prog-metric-item { }
.prog-metric-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.prog-metric-chart {
  height: 120px;
  position: relative;
}

/* Progress Photos */
.prog-photos { padding: 16px 20px; }
.prog-photo-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.prog-photo-select-wrap { flex: 1; }
.prog-photo-select-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
.prog-photo-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.prog-photo-vs {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 16px;
}
.prog-photo-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.prog-photo-col { }
.prog-photo-date {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}
.prog-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prog-photo-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.prog-photo-img:hover {
  border-color: var(--primary);
  transform: scale(1.02);
}

/* Trend Alert Badges */
.prog-alert {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: var(--warning);
  animation: progAlertPulse 2s ease-in-out infinite;
}
@keyframes progAlertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Annotation Button + Form */
.prog-ann-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.prog-ann-btn:hover { color: var(--text); border-color: var(--primary); }

.prog-ann-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
}
.prog-ann-date {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color-scheme: dark;
}
.prog-ann-text {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 12px;
  font-size: var(--fs-xs);
}
.prog-ann-text::placeholder { color: var(--text-muted); }
.prog-ann-save {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.prog-ann-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: var(--fs-xs);
  cursor: pointer;
}

/* Annotation List */
.prog-ann-list { padding: 8px 20px 16px; }
.prog-ann-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.prog-ann-item:last-child { border-bottom: none; }
.prog-ann-item-date {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  min-width: 60px;
}
.prog-ann-item-text { font-size: var(--fs-sm); flex: 1; }
.prog-ann-item-del {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.prog-ann-item-del:hover { color: #ef4444; }

/* Weight Goal */
.prog-goal-wrap { margin-left: auto; }
.prog-goal-display {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 500;
}
.prog-goal-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 0 4px;
}
.prog-goal-edit:hover { color: var(--text); }
.prog-goal-set {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  cursor: pointer;
}
.prog-goal-set:hover { color: var(--text); border-color: var(--primary); }
.prog-goal-input {
  width: 70px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 3px 8px;
  font-size: var(--fs-xs);
}
.prog-goal-save {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  margin-left: 4px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .prog-stats-row { grid-template-columns: repeat(2, 1fr); }
  .prog-compliance-row { grid-template-columns: 1fr; }
  .prog-metrics-grid { grid-template-columns: 1fr; }
  .prog-photo-compare { grid-template-columns: 1fr; }
  .ci-responses { grid-template-columns: 1fr; }
  .ci-submitted { display: none; }
  .prog-habit-name { min-width: 80px; font-size: var(--fs-xs); }
  .prog-habit-dot { width: 10px; height: 10px; }
  .prog-ann-form { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   PROGRAM TAB — Two-Column Layout
   ══════════════════════════════════════════════════════════════ */
.prog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0 16px;
  align-items: start;
}
.prog-layout-cal {
  min-width: 0;
}
.prog-layout-cal .cal-container { }
.prog-layout-cal .cal-toolbar { }
.prog-layout-cal .cal-grid { }
.prog-layout-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 60px;
}

/* Control Cards */
.prog-ctrl-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
}
.prog-ctrl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.prog-ctrl-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.prog-ctrl-body { padding: 12px 14px 14px; }

.prog-ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 8px;
}
.prog-ctrl-row + .prog-ctrl-row { border-top: 1px solid rgba(255,255,255,0.04); }
.prog-ctrl-row--muted { opacity: 0.5; }
.prog-ctrl-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.prog-ctrl-val {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: right;
}
.prog-ctrl-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 8px 0;
  text-align: center;
}
.prog-ctrl-input {
  width: 90px;
  text-align: right;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.prog-ctrl-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  cursor: pointer;
  min-width: 100px;
  text-align: right;
}

/* Compact weight mode toggle in control panel */
.wt-mode-row--compact {
  display: flex;
  gap: 2px;
}
.wt-mode-row--compact .wt-mode-btn {
  font-size: var(--fs-xs);
  padding: 3px 8px;
}

/* Habit rows in control panel */
.prog-habit-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prog-habit-ctrl-row:last-child { border-bottom: none; }
.prog-habit-ctrl-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prog-habit-ctrl-freq {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Workout schedules in control panel */
.prog-ws-list { padding: 12px 14px 14px; }
.prog-ws-list:empty { display: none; }

@media (max-width: 1024px) {
  .prog-layout {
    grid-template-columns: 1fr;
  }
  .prog-layout-panel {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .prog-layout-panel { grid-template-columns: 1fr; }
}

/* ============================================================
   NUTRITION TAB — client profile
   ============================================================ */
.nutrition-tab { display: flex; flex-direction: column; gap: 16px; padding: 0 0 24px; }

.nutrition-grid-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1080px) { .nutrition-grid-top { grid-template-columns: 1fr; } }
/* When Daily Targets is hidden (plan assigned), Today's Intake spans full width */
.nutrition-grid-top.nutrition-grid-top-single { grid-template-columns: 1fr; }

.nutrition-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.nutrition-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  position: relative;
}
.nutrition-card-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.nutrition-card-sub {
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.nutrition-card-controls {
  position: absolute;
  top: 0;
  right: 0;
}

.nutrition-loading,
.nutrition-placeholder {
  padding: 24px;
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.nutrition-error {
  padding: 16px;
  text-align: center;
  color: var(--danger, #ef4444);
  font-size: var(--fs-sm);
}

/* ── Mode toggle ─────────────────────────────────────────── */
.nutrition-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.nutrition-mode-btn {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nutrition-mode-btn:hover { color: var(--text); }
.nutrition-mode-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ── Macro field grid ────────────────────────────────────── */
.nutrition-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.nutrition-field {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.1s;
}
.nutrition-field:focus-within { border-color: var(--primary, #004ef9); }
.nutrition-field.disabled { opacity: 0.45; }
.nutrition-field > span:first-child {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nutrition-field input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  width: 100%;
  padding: 0;
  text-align: right;
}
.nutrition-field input::placeholder { color: var(--text-subtle); }
.nutrition-field input:disabled { cursor: not-allowed; }
.nutrition-unit {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  min-width: 24px;
  text-align: right;
}

/* ── Breakdown toggle ────────────────────────────────────── */
.nutrition-breakdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  padding: 8px 0;
  user-select: none;
}
.nutrition-breakdown-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--primary, #004ef9);
}

.nutrition-meal-breakdown { margin-bottom: 14px; }
.nutrition-meal-breakdown.hidden { display: none; }

.nutrition-meal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.nutrition-meal-table th {
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.nutrition-meal-table td {
  padding: 4px 4px;
  border-bottom: 1px solid var(--row-border);
}
.nutrition-meal-table input {
  width: 100%;
  padding: 6px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}
.nutrition-meal-table input:focus { border-color: var(--primary, #004ef9); }
.nutrition-meal-table input[type="number"] { text-align: right; }
.nutrition-meal-table input.nutrition-meal-name { font-weight: 500; }

/* ── Save row ────────────────────────────────────────────── */
.nutrition-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.nutrition-target-status {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.nutrition-target-status.success { color: var(--success, #22c55e); }
.nutrition-target-status.error { color: var(--danger, #ef4444); }

/* ── Day view ────────────────────────────────────────────── */
.nutrition-day-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.nutrition-day-nav-btn {
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nutrition-day-nav-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
}
.nutrition-day-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.nutrition-day-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.nutrition-macro-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
}
.nutrition-macro-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nutrition-macro-bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}
.nutrition-macro-bar-fill {
  height: 100%;
  background: var(--primary, #004ef9);
  border-radius: 3px;
  transition: width 0.2s;
}
.nutrition-macro-val {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nutrition-macro-val .actual { color: var(--text); font-weight: 600; }
.nutrition-macro-val .sep { color: var(--text-subtle); margin: 0 2px; }
.nutrition-macro-val .target { color: var(--text-muted); }
.nutrition-macro-val .unit { color: var(--text-subtle); margin-left: 3px; }

.nutrition-meal-block {
  padding: 10px 12px;
  border-top: 1px solid var(--row-border);
}
.nutrition-meal-block:first-child { border-top: none; padding-top: 0; }
.nutrition-meal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.nutrition-meal-head .nutrition-meal-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nutrition-meal-totals {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nutrition-meal-empty {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-style: italic;
  padding: 2px 0;
}
.nutrition-log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nutrition-log-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.nutrition-log-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nutrition-log-brand {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.nutrition-log-portion {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.nutrition-log-macros {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Range toggle (7/30/90) ──────────────────────────────── */
.nutrition-range-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nutrition-range-toggle button {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nutrition-range-toggle button:hover { color: var(--text); }
.nutrition-range-toggle button.active {
  background: var(--surface);
  color: var(--text);
}

.nutrition-compliance-body {
  min-height: 300px;
  position: relative;
}
.nutrition-compliance-body canvas {
  width: 100% !important;
  height: 300px !important;
}
.nutrition-compliance-body > .nutrition-placeholder,
.nutrition-compliance-body > .nutrition-loading,
.nutrition-compliance-body > .nutrition-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

/* ============================================================
   BUILDER → NUTRITION TAB
   ============================================================ */
.nut-builder-subnav {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  width: fit-content;
}
.nut-subnav-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.nut-subnav-btn:hover { color: var(--text); }
.nut-subnav-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.nut-subview { display: none; }
.nut-subview.active { display: block; }

.nut-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.nut-search-input {
  flex: 1;
  max-width: 340px;
  padding: 7px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
}
.nut-search-input:focus { border-color: var(--primary, #004ef9); }

.nut-loading, .nut-empty, .nut-placeholder, .nut-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.nut-error { color: var(--danger, #ef4444); }
.nut-empty-title { font-size: var(--fs-md); color: var(--text); margin-bottom: 4px; font-weight: 500; }
.nut-empty-sub { color: var(--text-subtle); }

/* Plans table */
.nut-plans-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--fs-sm);
}
.nut-plans-table th {
  padding: 10px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.nut-plans-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--row-border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.nut-plans-table tr:last-child td { border-bottom: none; }
.nut-plan-row { cursor: pointer; transition: background 0.1s; }
.nut-plan-row:hover { background: var(--hover-overlay); }
.nut-plan-name { font-weight: 500; }
.nut-plan-desc { color: var(--text-subtle); font-size: var(--fs-xs); margin-top: 2px; }
.nut-col-actions { text-align: right; width: 40px; }
.nut-row-action {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
}
.nut-row-action:hover { background: var(--hover-overlay); color: var(--danger, #ef4444); }

.nut-plan-type-pill, .nut-macro-pill, .nut-cal-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
}
.nut-macro-pill { margin-right: 4px; }
.nut-cal-pill { background: var(--surface); color: var(--text); }

/* ============================================================
   PLAN TYPE CHOOSER MODAL
   ============================================================ */
.nut-plan-type-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 90%;
  padding: 20px;
  box-shadow: var(--shadow);
}
.nut-plan-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.nut-plan-type-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.nut-plan-type-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
.nut-modal-close {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 3px;
}
.nut-modal-close:hover { background: var(--hover-overlay); color: var(--text); }
.nut-plan-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .nut-plan-type-options { grid-template-columns: 1fr; } }
.nut-plan-type-card {
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.1s, background 0.1s;
}
.nut-plan-type-card:hover {
  border-color: var(--primary, #004ef9);
  background: var(--surface);
}
.nut-plan-type-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.nut-plan-type-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

/* ============================================================
   PLAN EDITOR OVERLAY
   ============================================================ */
.nut-plan-editor {
  background: var(--bg);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nut-plan-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nut-editor-back {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-md);
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.nut-editor-back:hover { color: var(--text); background: var(--hover-overlay); }

.nut-plan-name-input {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-family: inherit;
  outline: none;
}
.nut-plan-name-input:hover { border-color: var(--border); }
.nut-plan-name-input:focus { border-color: var(--primary, #004ef9); background: var(--input-bg); }

.nut-plan-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nut-plan-save-status {
  font-size: var(--fs-xs);
  color: var(--success, #22c55e);
  min-width: 60px;
  text-align: right;
}
.nut-plan-save-status.error { color: var(--danger, #ef4444); }
.btn-danger-outline {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--danger, #ef4444);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.btn-danger-outline:hover { background: var(--danger-dim, rgba(239,68,68,0.1)); border-color: var(--danger, #ef4444); }

.nut-plan-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.nut-plan-loading, .nut-empty-day {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.nut-empty-day { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Day tabs */
.nut-day-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  overflow-x: auto;
}
/* Day tabs — uniform structure across active + inactive.
 * Active state communicated via fill + border only; every tab shows the same
 * name + color-coded macro line so coaches can compare days at a glance
 * without jarring shape differences. */
.nut-day-tab {
  position: relative;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: inherit;
  min-width: 0;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.nut-day-tab:hover { color: var(--text); }
.nut-day-tab.active {
  background: var(--primary-dim, rgba(0, 78, 249, 0.12));
  border-color: var(--primary, #004ef9);
  color: var(--text);
}
/* Tab line 1 — day name + delete */
.nut-day-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Delete × hidden on inactive by default, revealed on hover or active.
 * Follows the design-system pattern: action icons appear on hover. */
.nut-day-tab-delete {
  opacity: 0;
  transition: opacity 150ms ease;
}
.nut-day-tab.active .nut-day-tab-delete,
.nut-day-tab:hover .nut-day-tab-delete {
  opacity: 1;
}
/* Tab line 2 — compact color-coded totals on every tab (always visible) */
.nut-day-tab-totals {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.nut-day-tab-kcal { color: var(--text-muted); font-weight: 600; }
.nut-day-tab.active .nut-day-tab-kcal { color: var(--text); }
.nut-day-tab-sep { color: var(--text-subtle); opacity: 0.5; }
.nut-day-tab-macro.p { color: #10b981; }
.nut-day-tab-macro.c { color: #f59e0b; }
.nut-day-tab-macro.f { color: #3b82f6; }
.nut-day-tab-delete {
  color: var(--text-subtle);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 2px;
}
.nut-day-tab-delete:hover { color: var(--danger, #ef4444); background: var(--danger-dim, rgba(239,68,68,0.1)); }
.nut-day-tab-add {
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.nut-day-tab-add:hover { color: var(--primary, #004ef9); }

/* Day toolbar — grid matches the meal-items grid so KCAL/P/C/F columns line up.
 * Horizontal padding = meal-block padding (14px) + item-row padding (8px) = 22px
 * so the toolbar's content-box matches the item-row's content-box below. */
.nut-day-toolbar {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.4fr) 64px 100px 60px 64px 58px 50px 60px;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 22px;
}
.nut-day-name-input {
  padding: 6px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  min-width: 200px;
}
.nut-day-name-input:focus { border-color: var(--primary, #004ef9); }

/* Day totals wrapper — pass-through so children slot into the toolbar grid */
.nut-day-totals-pills { display: contents; }

/* Meal-level totals (kept for any remaining callers) */
.nut-meal-totals-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nut-tot-pill {
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nut-tot-pill b { color: var(--text); font-weight: 600; }

/* Day toolbar per-macro column — label stacked above value, color-coded */
.nut-day-toolbar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.nut-day-toolbar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
  line-height: 1;
}
.nut-day-toolbar-col.p .nut-day-toolbar-label { color: #10b981; }
.nut-day-toolbar-col.c .nut-day-toolbar-label { color: #f59e0b; }
.nut-day-toolbar-col.f .nut-day-toolbar-label { color: #3b82f6; }
.nut-day-toolbar-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Color-coded day totals — values match their label color so they're
 * distinguishable for colorblind users. KCAL stays white (it's the sum). */
.nut-day-toolbar-col.p .nut-day-toolbar-value { color: #10b981; }
.nut-day-toolbar-col.c .nut-day-toolbar-value { color: #f59e0b; }
.nut-day-toolbar-col.f .nut-day-toolbar-value { color: #3b82f6; }
/* Tiny muted "X% of kcal" line under each macro — replaces the full-width
 * macro distribution bar. Empty (&nbsp;) under KCAL to keep rows aligned. */
.nut-day-toolbar-pct {
  font-size: 10px;
  color: var(--text-subtle);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Meal blocks */
.nut-meals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nut-meal-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.nut-meal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.nut-meal-name-input {
  flex: 0 0 auto;
  min-width: 140px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
}
.nut-meal-name-input:hover { border-color: var(--border); }
.nut-meal-name-input:focus { border-color: var(--primary, #004ef9); background: var(--input-bg); }

.nut-meal-type-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-meal-type-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.nut-meal-type-btn:hover { color: var(--text); }
.nut-meal-type-btn.active { background: var(--surface); color: var(--text); }

.nut-meal-delete-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  margin-left: auto;
}
.nut-meal-delete-btn:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }

.nut-meal-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 6px;
}
@media (max-width: 640px) { .nut-meal-target-grid { grid-template-columns: 1fr 1fr; } }
.nut-meal-target-grid label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.nut-meal-target-grid label > span {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.nut-meal-target-grid input {
  padding: 6px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  text-align: right;
}
.nut-meal-target-grid input:focus { border-color: var(--primary, #004ef9); }

/* Items list */
.nut-meal-items-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.nut-meal-empty {
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  padding: 10px;
  font-style: italic;
}

.nut-item-row,
.nut-item-row-header {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.4fr) 64px 100px 60px 64px 58px 50px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* Inline food-name rename (hover edit pencil) */
.nut-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
}
.nut-item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text);
}
.nut-item-name-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  background: var(--input-bg);
  border: 1px solid var(--primary, #004ef9);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
}
.nut-item-name-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-subtle);
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transition: opacity 120ms ease 0ms, color 120ms ease, background 120ms ease;
  flex-shrink: 0;
}
.nut-item-name:hover .nut-item-name-edit {
  opacity: 0.7;
  transition: opacity 120ms ease 120ms, color 120ms ease, background 120ms ease;
}
.nut-item-name-edit:hover {
  opacity: 1 !important;
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
  transition: opacity 0ms, color 120ms ease, background 120ms ease;
}

/* Unit button — looks like plain centered text; opens custom popover on click */
.nut-item-unit-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 4px 6px;
  text-align: center;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.nut-item-unit-btn:hover {
  background-color: var(--surface-2);
}
.nut-item-unit-btn:focus-visible {
  outline: none;
  background-color: var(--surface-2);
  border-color: var(--primary, #004ef9);
}

/* Custom unit popover (CRM-styled dropdown) */
.nut-unit-popover {
  position: fixed;
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 10000;
  min-width: 180px;
  max-width: 280px;
  max-height: 340px;
  overflow-y: auto;
  font-family: inherit;
}
.nut-unit-popover-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  padding: 8px 12px 4px;
}
.nut-unit-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px 8px 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 80ms ease;
}
.nut-unit-option:hover {
  background: var(--surface-2);
}
.nut-unit-option.selected {
  background: rgba(0, 78, 249, 0.10);
  color: var(--primary, #004ef9);
}
.nut-unit-option.selected::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(-45deg);
}
.nut-unit-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nut-unit-option-grams {
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nut-unit-option.selected .nut-unit-option-grams {
  color: var(--primary, #004ef9);
  opacity: 0.7;
}
.nut-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.nut-item-row:hover .nut-item-actions { opacity: 1; }
.nut-item-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-subtle);
  cursor: pointer;
  font-family: inherit;
  transition: all 100ms ease;
}
.nut-item-action-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.nut-item-action-btn.danger:hover {
  color: var(--danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}
.nut-item-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  opacity: 0;
  cursor: grab;
  /* On-leave: fade out in 120ms with no delay */
  transition: opacity 120ms ease 0ms, color 120ms ease;
}
/* On hover: fade in after a 500ms delay */
.nut-item-row:hover .nut-item-drag-handle {
  opacity: 0.6;
  transition: opacity 120ms ease 500ms, color 120ms ease;
}
.nut-item-drag-handle:hover {
  opacity: 1 !important;
  color: var(--text);
  transition: opacity 0ms, color 120ms ease;
}
.nut-item-drag-handle:active { cursor: grabbing; }

/* SortableJS feedback classes */
.nut-sortable-ghost {
  opacity: 0.4;
  background: var(--surface-2) !important;
}
.nut-sortable-chosen {
  cursor: grabbing;
}
.nut-sortable-drag {
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  border-radius: 6px;
  background: var(--surface);
}
/* Target drop-zone highlight when an item is being dragged over a meal */
.nut-meal-items-table.nut-drop-target {
  background: rgba(0, 78, 249, 0.05);
  border-radius: 6px;
  outline: 1px dashed rgba(0, 78, 249, 0.35);
  outline-offset: -2px;
}
.nut-item-row:hover { background: var(--surface-2); }
.nut-item-col {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.nut-item-col b { font-weight: 600; color: var(--text); }
.nut-item-col.p b { color: #10b981; }
.nut-item-col.c b { color: #f59e0b; }
.nut-item-col.f b { color: #3b82f6; }

/* Header row above item rows — uses same grid so columns align perfectly */
.nut-item-row-header {
  padding-top: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}
.nut-item-row-header:hover { background: transparent; }
.nut-item-header-name { color: var(--text-subtle); }
.nut-item-header-qty,
.nut-item-header-unit { color: var(--text-subtle); text-align: center; }
.nut-item-unit { text-align: center; }

/* Target-only meal: inputs aligned to item-row grid columns */
.nut-meal-target-row {
  padding-top: 10px;
  padding-bottom: 10px;
}
.nut-meal-target-row:hover { background: transparent; }
.nut-target-row-label {
  color: var(--text);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.nut-target-input {
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  outline: none;
  text-align: center;
  width: 100%;
  min-width: 0;
}
.nut-target-input:focus {
  border-color: var(--primary, #004ef9);
}
.nut-target-input.p { color: #10b981; }
.nut-target-input.c { color: #f59e0b; }
.nut-target-input.f { color: #3b82f6; }
.nut-target-input.kcal { color: var(--text); }

/* Meal totals row at bottom of items table */
.nut-item-totals-row {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  padding-bottom: 6px;
  margin-top: 4px;
  background: transparent !important;
  cursor: default;
}
.nut-item-totals-row:hover { background: transparent; }
.nut-item-totals-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}
.nut-item-totals-row .nut-item-col b {
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Meal drag handle — hidden by default, reveals after a 500ms hover over the
 * meal header row (where the handle sits, at the left). Leaves instantly on mouseout. */
.nut-meal-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  cursor: grab;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  /* Default (on-leave): fade out in 120ms with no delay */
  transition: opacity 120ms ease 0ms, color 120ms ease, background 120ms ease;
  flex-shrink: 0;
  margin-right: 2px;
}
/* On hover: fade in after a 500ms delay */
.nut-meal-head:hover .nut-meal-drag-handle {
  opacity: 0.6;
  transition: opacity 120ms ease 500ms, color 120ms ease, background 120ms ease;
}
.nut-meal-drag-handle:hover {
  opacity: 1 !important;
  color: var(--text);
  background: var(--surface-2);
  transition: opacity 0ms, color 120ms ease, background 120ms ease;
}
.nut-meal-drag-handle:active {
  cursor: grabbing;
}
.nut-item-header-col { text-align: center; color: var(--text-subtle); }
.nut-item-header-col.p { color: #10b981; }
.nut-item-header-col.c { color: #f59e0b; }
.nut-item-header-col.f { color: #3b82f6; }
.nut-item-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nut-item-brand { color: var(--text-subtle); font-size: var(--fs-xs); margin-left: 6px; }
.nut-item-amount {
  padding: 4px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  text-align: right;
  width: 100%;
}
.nut-item-amount:focus { border-color: var(--primary, #004ef9); }
.nut-item-unit { color: var(--text-subtle); font-size: var(--fs-xs); }
.nut-item-macros {
  display: flex;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  white-space: nowrap;
}
.nut-item-delete-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-subtle);
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
  font-size: var(--fs-md);
}
.nut-item-delete-btn:hover { color: var(--danger, #ef4444); border-color: var(--border); }

.nut-meal-actions, .nut-add-meal-row {
  margin-top: 8px;
}
.nut-add-meal-row { margin-top: 16px; }

/* ============================================================
   FOOD SEARCH MODAL — redesigned
   ============================================================ */
.nut-food-search-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 780px;
  width: 92%;
  height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.nut-food-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.nut-food-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.nut-food-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-subtle);
  pointer-events: none;
}
.nut-food-search-kbd {
  position: absolute;
  right: 10px;
  font-size: 11px;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  pointer-events: none;
}
.nut-food-search-header input {
  flex: 1;
  padding: 10px 36px 10px 36px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  width: 100%;
}
.nut-food-search-header input:focus { border-color: var(--primary, #004ef9); }
.nut-food-search-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.nut-fs-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
}
.nut-fs-chip:hover { background: var(--surface-2); color: var(--text); }
.nut-fs-chip.active {
  background: rgba(0, 78, 249, 0.10);
  border-color: rgba(0, 78, 249, 0.40);
  color: var(--primary, #004ef9);
}
.nut-food-search-meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.nut-food-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 6px;
}
.nut-food-search-hint {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.nut-fs-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--primary, #004ef9);
  animation: nutFsSpin 0.6s linear infinite;
  display: inline-block;
}
@keyframes nutFsSpin { to { transform: rotate(360deg); } }
.nut-fs-section { padding: 4px 4px 8px; }
.nut-fs-section-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 8px 10px 4px;
}
/* Search result row — 5-column grid so macros line up vertically across rows */
.nut-food-search-result {
  display: grid;
  grid-template-columns: 1fr 64px 72px 64px 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 100ms ease;
}
.nut-food-search-result:hover,
.nut-food-search-result.selected {
  background: var(--surface-2);
  border-color: var(--border);
}
.nut-food-search-result.selected {
  border-color: rgba(0, 78, 249, 0.40);
  background: rgba(0, 78, 249, 0.06);
}
.nut-fsr-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.nut-fsr-check { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.nut-fsr-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nut-fsr-brand {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 400;
  flex-shrink: 0;
}
.nut-fsr-per {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 400;
  margin-left: auto;
  flex-shrink: 0;
}
.nut-fsr-col {
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}
.nut-fsr-col b {
  font-weight: 600;
  color: var(--text);
}
.nut-fsr-col.p b { color: #10b981; }
.nut-fsr-col.c b { color: #f59e0b; }
.nut-fsr-col.f b { color: #3b82f6; }

/* Frozen header bar at top of scrollable results */
.nut-fsr-header {
  display: grid;
  grid-template-columns: 1fr 64px 72px 64px 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}
.nut-fsr-header-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-subtle);
}
.nut-fsr-header-per {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-subtle);
  font-style: italic;
  opacity: 0.8;
}
.nut-fsr-header-col { text-align: center; }
.nut-fsr-header-col.p { color: #10b981; }
.nut-fsr-header-col.c { color: #f59e0b; }
.nut-fsr-header-col.f { color: #3b82f6; }
.nut-food-search-footer {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  justify-content: center;
}
.nut-food-search-footer[hidden] { display: none; }
.nut-food-search-footer .btn-secondary {
  min-width: 140px;
}

/* ============================================================
   PORTION PICKER MODAL
   ============================================================ */
.nut-portion-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 560px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nut-portion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.nut-portion-title {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nut-portion-brand {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-weight: 400;
  margin-left: 6px;
}
.nut-portion-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.nut-portion-preview {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.nut-portion-macro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nut-portion-macro b {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.nut-portion-macro.p b { color: #10b981; }
.nut-portion-macro.c b { color: #f59e0b; }
.nut-portion-macro.f b { color: #3b82f6; }
.nut-portion-macro span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-subtle);
}
.nut-portion-qs-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.nut-portion-qs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nut-portion-qs-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
}
.nut-portion-input {
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  outline: none;
  text-align: right;
  height: 44px;
}
.nut-portion-input:focus {
  border-color: var(--primary, #004ef9);
}
.nut-portion-select {
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.nut-portion-select:focus {
  border-color: var(--primary, #004ef9);
}
.nut-portion-select optgroup {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.nut-portion-select option {
  font-weight: 500;
  color: var(--text);
}
.nut-portion-grams-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nut-portion-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   CLIENT PROFILE — ASSIGNED PLAN section
   ============================================================ */
.assigned-plan-card { }
.assigned-plan-body { min-height: 60px; }

.nut-no-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}
.nut-no-plan-text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 540px;
  line-height: 1.5;
}
.nut-no-plan-actions {
  display: flex;
  gap: 8px;
}

.nut-plan-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.nut-plan-name-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nut-plan-totals-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nut-plan-day-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.nut-plan-day-label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 4px;
}
.nut-plan-day-hint { color: var(--text-subtle); font-style: italic; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.nut-plan-day-warn .nut-plan-day-hint { color: var(--warning, #f59e0b); font-style: normal; font-weight: 500; }
.nut-plan-day-btn {
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.nut-plan-day-btn:hover { color: var(--text); background: var(--surface-hover); }
.nut-plan-day-btn.active {
  background: var(--primary, #004ef9);
  color: white;
  border-color: var(--primary, #004ef9);
}

.nut-plan-meals-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--row-border);
}
.nut-plan-meal-preview {
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.nut-plan-meal-preview.target-only { border-left: 2px solid var(--warning, #f59e0b); }
.nut-plan-meal-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.nut-plan-meal-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.nut-plan-meal-tag {
  font-size: var(--fs-xs);
  color: var(--warning, #f59e0b);
  font-weight: 500;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nut-plan-meal-totals {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nut-plan-items-preview {
  margin: 4px 0 0 12px;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.nut-plan-items-preview li { list-style: disc; }
.nut-plan-no-items {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-style: italic;
  padding: 2px 0;
}
.nut-plan-empty {
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  padding: 16px;
  font-style: italic;
}

.nut-plan-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--row-border);
}

/* ============================================================
   PLAN SETTINGS MODAL + GEAR BUTTON
   ============================================================ */
.nut-plan-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.nut-plan-settings-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--hover-overlay);
}
.nut-plan-settings-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nut-plan-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.nut-plan-settings-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.nut-plan-settings-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.nut-settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nut-settings-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  line-height: 1;
}
.nut-settings-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
/* Settings-scoped override: make the day-selection-mode toggle fit the
 * narrower modal column width without horizontal scroll. */
#nut-plan-settings-body .nut-day-mode-toggle {
  flex-wrap: wrap;
  gap: 4px;
}
#nut-plan-settings-body .nut-day-mode-btn {
  flex: 1 1 auto;
}
.nut-settings-macro-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.nut-settings-macro-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}
.nut-settings-macro-row:hover {
  background: var(--hover-overlay, rgba(255,255,255,0.04));
}
.nut-settings-macro-cb {
  margin: 2px 0 0;
  accent-color: var(--primary, #004ef9);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.nut-settings-macro-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.nut-settings-macro-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.nut-settings-macro-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* ============================================================
   ASSIGN PLAN MODAL
   ============================================================ */
.nut-assign-plan-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: var(--shadow);
}
.nut-assign-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nut-assign-plan-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.nut-assign-plan-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.nut-assign-plan-options {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.nut-assign-plan-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  max-height: 420px;
}
.nut-assign-plan-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.1s;
}
.nut-assign-plan-option:hover {
  border-color: var(--primary, #004ef9);
}
.nut-assign-plan-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.nut-assign-plan-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.nut-assign-plan-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.nut-assign-plan-macros {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nut-assign-plan-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
}

/* Days library sub-page title */
.nut-sub-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}
.nut-sub-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   PLAN EDITOR — day-selection-mode + per-day rotate-tag controls
   ============================================================ */
.nut-day-mode-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-day-mode-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.nut-day-mode-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-day-mode-btn {
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.nut-day-mode-btn:hover { color: var(--text); }
.nut-day-mode-btn.active {
  background: var(--primary, #004ef9);
  color: white;
}

.nut-day-toolbar-main {
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.nut-day-rotate-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-day-rotate-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.nut-day-rotate-btn:hover { color: var(--text); }
.nut-day-rotate-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════════════════════
   MARKETING — Content Ideas
   ═══════════════════════════════════════════════════════════ */
.marketing-niche-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.marketing-niche-bar-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.marketing-niche-bar-text {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
  flex: 1;
  line-height: 1.5;
}
.marketing-niche-bar-text.marketing-niche-empty {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

.marketing-generate-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.marketing-generate-copy h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text);
}
.marketing-generate-copy p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  max-width: 560px;
  line-height: 1.5;
}
#btn-generate-ideas {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
#btn-generate-ideas:disabled { opacity: 0.55; cursor: not-allowed; }


.marketing-ideas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.marketing-idea-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.marketing-idea-card:hover { border-color: rgba(255,255,255,0.18); }
.marketing-idea-card.is-expanded { border-color: rgba(0,78,249,0.45); }
.marketing-idea-card.is-regen { opacity: 0.6; }

.marketing-idea-head {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.marketing-idea-rank {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  text-align: center;
}
.marketing-idea-card.is-expanded .marketing-idea-rank { color: var(--primary); }
.marketing-idea-meta { min-width: 0; }
.marketing-idea-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.marketing-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  white-space: nowrap;
}
.marketing-tag.is-reel     { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.35);  color: #fca5a5; }
.marketing-tag.is-carousel { background: rgba(234,179,8,0.12);  border: 1px solid rgba(234,179,8,0.35);  color: #fde68a; }
.marketing-tag.is-post     { background: rgba(0,78,249,0.14);   border: 1px solid rgba(0,78,249,0.40);   color: #93c5fd; }
.marketing-tag.is-hook        { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-muted); }
.marketing-tag.is-difficulty  { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-muted); }
.marketing-tag.is-perf        { background: rgba(122,201,67,0.10); border: 1px solid rgba(122,201,67,0.35); color: #86efac; }

.marketing-idea-hook {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 3px;
}
.marketing-idea-angle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.marketing-idea-chevron {
  color: var(--text-muted);
  transition: transform 0.15s ease;
  justify-self: end;
}
.marketing-idea-card.is-expanded .marketing-idea-chevron { transform: rotate(180deg); }

.marketing-idea-body {
  padding: 4px 18px 18px 68px;
  border-top: 1px solid var(--border);
  animation: fadeIn 0.2s ease;
}
.marketing-idea-section { margin-top: 14px; }
.marketing-idea-section-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.marketing-idea-section p {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.marketing-idea-slides {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}
.marketing-idea-slides li { margin-bottom: 4px; }

.marketing-idea-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.marketing-idea-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
}

.marketing-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.marketing-empty.hidden { display: none; }
.marketing-empty svg { margin-bottom: 14px; }
.marketing-empty h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.marketing-empty p {
  font-size: var(--fs-sm);
  margin: 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.spinner-sm {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spinnerRotate 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
}
@keyframes spinnerRotate { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Marketing tabs ───────────────────────────────────────── */
.marketing-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 20px 0 18px;
}
.marketing-tab-btn {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.marketing-tab-btn:hover { color: var(--text); }
.marketing-tab-btn.active { color: var(--text); border-bottom-color: var(--primary); }
.marketing-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.marketing-tab-btn.active .marketing-tab-count {
  background: rgba(0,78,249,0.2);
  color: var(--primary);
}
.marketing-tab-panel { display: none; animation: fadeIn 0.2s ease; }
.marketing-tab-panel.active { display: block; }

/* ── Quantity pickers (Generate tab) ──────────────────────── */
.marketing-quantity-group {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.marketing-qty {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.marketing-qty label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.marketing-qty input {
  width: 60px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.marketing-qty input:focus { outline: none; border-color: var(--primary); }

/* ── Save toggle on idea cards ────────────────────────────── */
.marketing-save-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.marketing-save-toggle:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.marketing-save-toggle input { display: none; }
.marketing-save-toggle.is-saved { color: var(--primary); }
.marketing-save-toggle.is-saved:hover { color: var(--primary); }

/* Update head grid to accommodate save toggle */
.marketing-idea-head {
  grid-template-columns: 38px 1fr 28px 18px;
}

.marketing-section-hint {
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  font-size: 10px;
}

/* Carousel slide structure */
.marketing-idea-slides li .slide-text {
  font-weight: 500;
  color: var(--text);
}
.marketing-idea-slides li .slide-visual {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
}

/* Reel core-message emphasis */
.marketing-idea-core-message {
  background: rgba(0,78,249,0.06);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Graphic copy + caption */
.marketing-idea-graphic-copy {
  background: rgba(255,255,255,0.04);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--primary);
  font-weight: 500;
}
.marketing-idea-caption {
  white-space: pre-wrap;
  background: rgba(255,255,255,0.02);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

/* Form controls — used inside the item modal sidebar */
.marketing-library-notes {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
}

/* Status tag colors */
.marketing-tag.is-status {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.marketing-tag.is-status-idea      { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.marketing-tag.is-status-scheduled { background: rgba(234,179,8,0.12);   border-color: rgba(234,179,8,0.35);   color: #fde68a; }
.marketing-tag.is-status-filmed    { background: rgba(59,130,246,0.12);  border-color: rgba(59,130,246,0.35);  color: #93c5fd; }
.marketing-tag.is-status-published { background: rgba(34,197,94,0.12);   border-color: rgba(34,197,94,0.35);   color: #86efac; }

/* ── Kanban ───────────────────────────────────────────────── */
.marketing-kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: 400px;
}
.marketing-kanban-board.hidden { display: none; }
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.kanban-col-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.kanban-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.kanban-col-body {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.15s;
  min-height: 120px;
}
.kanban-col-body.is-drop-target {
  background: rgba(0,78,249,0.06);
}
.kanban-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 0.15s, transform 0.15s;
}
.kanban-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.kanban-card.is-dragging { opacity: 0.4; cursor: grabbing; }

/* Item modal — full-detail view triggered by kanban card click.
   Centered overlay with backdrop blur, roomy layout, keyboard-dismissable. */
.marketing-item-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 25, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px;
  overflow-y: auto;
  animation: fadeIn 0.15s ease;
}
.marketing-item-modal-overlay.hidden { display: none; }
.marketing-item-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 1240px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4);
  animation: modalSlideUp 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.marketing-item-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  z-index: 2;
}
.marketing-item-modal-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.marketing-item-modal-content { padding: 28px 32px 28px; }
.marketing-modal-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.marketing-modal-hook {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 10px 0 4px;
  line-height: 1.3;
  padding-right: 44px;  /* space for close button */
}
.marketing-modal-angle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Two-column body: filming guide left, status/actions right */
.marketing-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  padding-top: 8px;
}
.marketing-modal-main .marketing-idea-section { margin-top: 22px; }
.marketing-modal-main .marketing-idea-section:first-child { margin-top: 8px; }

.marketing-modal-side {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.marketing-modal-side-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.marketing-modal-side-card > .marketing-idea-section-label {
  margin-bottom: 2px;
}
.marketing-modal-side-field { display: flex; flex-direction: column; gap: 5px; }
.marketing-modal-side-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.marketing-modal-side-field select,
.marketing-modal-side-field input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.marketing-modal-side-field textarea.marketing-library-notes {
  min-height: 90px;
  width: 100%;
}
.marketing-modal-side-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marketing-modal-side-actions button {
  width: 100%;
  text-align: center;
  padding: 8px 12px;
}

/* Collapse to single column below 960px — side card moves under the main content */
@media (max-width: 960px) {
  .marketing-modal-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .marketing-modal-side { position: static; }
}
@media (max-width: 640px) {
  .marketing-item-modal-content { padding: 20px 20px 18px; }
  .marketing-modal-hook { font-size: var(--fs-lg); padding-right: 40px; }
}
.kanban-card-tags { margin-bottom: 6px; }
.kanban-card-hook {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.kanban-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.kanban-card-link {
  display: inline-block;
  font-size: 11px;
  color: var(--primary);
  margin-top: 6px;
  text-decoration: none;
}
.kanban-card-link:hover { text-decoration: underline; }