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

:root {
  --bg:           #0E0E22;
  --bg-card:      #161630;
  --bg-card-2:    #1C1C3A;
  --bg-input:     #1E1E42;
  --border:       rgba(140, 120, 255, 0.20);
  --border-hover: rgba(160, 140, 255, 0.55);
  --border-glow:  rgba(139, 111, 254, 0.35);
  --purple:       #9B7FFF;
  --purple-mid:   #7C5CFC;
  --purple-dim:   rgba(155, 127, 255, 0.13);
  --purple-glow:  rgba(155, 127, 255, 0.25);
  --cyan:         #00E5FF;
  --cyan-dim:     rgba(0, 229, 255, 0.1);
  --green:        #3DD68C;
  --yellow:       #FFD060;
  --red:          #FF6B6B;
  --orange:       #FF9F43;
  --text:         #F0F0FA;
  --text-dim:     #9898C0;
  --text-muted:   #6060A0;
  --font:         'Outfit', -apple-system, sans-serif;
  --shadow-card:  0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow:  0 0 30px rgba(155,127,255,0.15);
}

body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; height: 100vh; overflow: hidden; background-image: radial-gradient(ellipse at 15% 0%, rgba(139,111,254,0.08) 0%, transparent 50%), radial-gradient(ellipse at 85% 100%, rgba(0,229,255,0.04) 0%, transparent 50%); }
.hidden { display: none !important; }
.screen { width: 100vw; height: 100vh; }

/* ─── LOGIN ──────────────────────────────────────────────────────────────────── */
#loginScreen { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 25% 40%, rgba(155,127,255,0.14) 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(0,229,255,0.07) 0%, transparent 50%); }
.login-box { width: 380px; background: linear-gradient(160deg, var(--bg-card-2) 0%, var(--bg-card) 100%); border: 1px solid var(--border-glow); border-radius: 20px; padding: 36px; box-shadow: var(--shadow-card), var(--shadow-glow); }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-title { font-size: 18px; font-weight: 700; }
.login-sub   { font-size: 12px; color: var(--text-dim); }

/* ─── LAYOUT ─────────────────────────────────────────────────────────────────── */
#appScreen { display: flex; overflow: hidden; }

.sidebar {
  width: 230px; flex-shrink: 0;
  background: linear-gradient(180deg, #141430 0%, #0F0F28 60%, #0C0C22 100%);
  border-right: 1px solid rgba(155,127,255,0.15);
  display: flex; flex-direction: column; padding: 0; height: 100vh;
  box-shadow: 4px 0 32px rgba(0,0,0,0.5), 1px 0 0 rgba(155,127,255,0.08);
  position: relative; overflow: hidden;
}
.sidebar::before {
  content: '';
  position: absolute; top: -80px; left: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,127,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.sidebar::after {
  content: '';
  position: absolute; bottom: 40px; right: -80px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-logo {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 22px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(155,127,255,0.06) 0%, transparent 100%);
  position: relative; z-index: 1;
}
.sidebar-logo::after {
  content: '';
  position: absolute; bottom: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,127,255,0.4), rgba(0,229,255,0.2), transparent);
}

.sidebar-brand {
  font-size: 15px; font-weight: 800; letter-spacing: 0.2px;
  background: linear-gradient(135deg, #F0F0FA 0%, #C4B0FF 50%, #9B7FFF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; position: relative; z-index: 1; }

.sidebar-footer {
  padding: 16px 20px;
  position: relative; z-index: 1;
}
.sidebar-footer::before {
  content: '';
  position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,127,255,0.25), transparent);
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--text-dim); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none; position: relative; overflow: hidden;
  border: 1px solid transparent; letter-spacing: 0.1px;
}
.nav-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(155,127,255,0.06) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform 0.4s ease;
}
.nav-item:hover::before { transform: translateX(100%); }
.nav-item:hover {
  background: linear-gradient(90deg, rgba(155,127,255,0.1) 0%, rgba(155,127,255,0.03) 100%);
  color: var(--text); border-color: rgba(155,127,255,0.12); transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(155,127,255,0.22) 0%, rgba(155,127,255,0.06) 80%, transparent 100%);
  color: #E0D4FF; border-color: rgba(155,127,255,0.25);
  box-shadow: 0 2px 16px rgba(155,127,255,0.12), inset 0 0 24px rgba(155,127,255,0.06);
  font-weight: 600;
}
.nav-item.active::after {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cyan) 0%, var(--purple) 100%);
  box-shadow: 0 0 10px rgba(155,127,255,0.9), 0 0 20px rgba(155,127,255,0.4);
}
.nav-icon {
  font-size: 16px; width: 20px; text-align: center; flex-shrink: 0;
  transition: transform 0.2s;
}
.nav-item:hover .nav-icon  { transform: scale(1.15); }
.nav-item.active .nav-icon { transform: scale(1.1); }

.main { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 32px; height: 100vh; min-width: 0; }
.page { width: 100%; min-width: 0; box-sizing: border-box; }
.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.page-header h1 { font-size: 22px; font-weight: 800; flex: 1; letter-spacing: -0.3px; }

/* ─── STATS ──────────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; max-width: 100%; }
.stat-card { background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-card); transition: border-color 0.2s, box-shadow 0.2s; }
.stat-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-card), 0 0 20px rgba(155,127,255,0.1); }
.stat-card.green  { border-color: rgba(61,214,140,0.35); background: linear-gradient(145deg, rgba(61,214,140,0.06) 0%, var(--bg-card) 100%); }
.stat-card.yellow { border-color: rgba(255,208,96,0.35); background: linear-gradient(145deg, rgba(255,208,96,0.06) 0%, var(--bg-card) 100%); }
.stat-card.gray   { border-color: rgba(100,100,140,0.35); }
.stat-label { font-size: 12px; color: var(--text-dim); font-weight: 500; margin-bottom: 8px; }
.stat-value { font-size: 32px; font-weight: 700; }

/* ─── TABLE ──────────────────────────────────────────────────────────────────── */
.section-title { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.broker-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.broker-table { width: 100%; border-collapse: collapse; }
.broker-table th { text-align: left; padding: 13px 16px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(155,127,255,0.06) 0%, rgba(255,255,255,0.01) 100%); }
.broker-table td { padding: 11px 16px; border-bottom: 1px solid rgba(120,100,255,0.08); font-size: 13px; vertical-align: middle; }
.broker-table tr:last-child td { border-bottom: none; }
.broker-table tr:hover td { background: rgba(155,127,255,0.06); }
.loading-row { text-align: center; color: var(--text-dim); padding: 24px !important; }

/* ─── BADGES ─────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-live    { background: rgba(61,214,140,0.15); color: #3DD68C; border: 1px solid rgba(61,214,140,0.2); }
.badge-sandbox { background: rgba(255,208,96,0.12); color: #FFD060; border: 1px solid rgba(255,208,96,0.2); }
.badge-off     { background: rgba(100,100,140,0.12); color: #9898C0; border: 1px solid rgba(100,100,140,0.2); }
.channel-pill { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; margin-right: 3px; }
.channel-on  { background: rgba(124,92,252,0.2); color: var(--purple); }
.channel-off { background: rgba(100,100,120,0.1); color: #555566; }

/* ─── CHECKLIST ──────────────────────────────────────────────────────────────── */
.checklist-card { background: linear-gradient(135deg, rgba(155,127,255,0.06) 0%, var(--bg-card) 100%); border: 1px solid var(--border-glow); border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.checklist-title { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.checklist-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.checklist-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.checklist-item.done    { background: rgba(34,197,94,0.12);  color: #22C55E; border: 1px solid rgba(34,197,94,0.2); }
.checklist-item.pending { background: rgba(234,179,8,0.1);   color: #EAB308; border: 1px solid rgba(234,179,8,0.2); }
.checklist-actions { display: flex; gap: 10px; }

/* ─── DETAIL PAGE ────────────────────────────────────────────────────────────── */
.btn-back { background: none; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.btn-back:hover { color: var(--text); background: var(--purple-dim); }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; max-width: 100%; }
.detail-card { background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-card); transition: border-color 0.2s; }
.detail-card:hover { border-color: var(--border-glow); }
.detail-card-wide { grid-column: 1 / -1; }

.carrier-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}
.carrier-check-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.carrier-check-row:hover {
  border-color: var(--border-glow);
  background: rgba(155,127,255,0.04);
}
.carrier-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--purple);
  cursor: pointer;
}
.carrier-check-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.carrier-check-meta {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.detail-section-title { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.field-row { margin-bottom: 12px; }
.field-row label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; font-weight: 500; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(120,100,255,0.08); }
.toggle-row:last-of-type { border-bottom: none; }
.toggle-label { font-size: 13px; font-weight: 500; }
.toggle-sub   { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.status-display { margin-top: 16px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; }
.detail-actions { display: flex; align-items: center; gap: 16px; }
.save-msg { font-size: 13px; color: var(--green); }

/* ─── ONBOARD ────────────────────────────────────────────────────────────────── */
.onboard-form { max-width: min(800px, 100%); }
.form-section { background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.form-section-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row:last-child { margin-bottom: 0; }
.field-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.onboard-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.onboard-error { font-size: 13px; color: var(--red); }

/* ─── PROGRESS ───────────────────────────────────────────────────────────────── */
.progress-overlay { position: fixed; inset: 0; background: rgba(8,8,20,0.85); display: flex; align-items: center; justify-content: center; z-index: 100; }
.progress-box { background: linear-gradient(160deg, var(--bg-card-2) 0%, var(--bg-card) 100%); border: 1px solid var(--border-glow); border-radius: 20px; padding: 32px; width: 460px; box-shadow: var(--shadow-card), var(--shadow-glow); }
.progress-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.progress-steps { display: flex; flex-direction: column; gap: 10px; }
.progress-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
.progress-step.done    { color: var(--green); }
.progress-step.failed  { color: var(--red); }
.progress-step.warning { color: var(--yellow); }
.progress-step.manual  { color: var(--cyan); }
.step-icon { font-size: 16px; width: 20px; }

/* ─── KB MANAGER ─────────────────────────────────────────────────────────────── */
.kb-list { width: 260px; min-width: 260px; flex-shrink: 0; background: linear-gradient(180deg, var(--bg-card-2) 0%, var(--bg-card) 100%); border: 1px solid var(--border); border-radius: 12px; overflow-y: auto; padding: 8px; box-shadow: var(--shadow-card); align-self: stretch; min-height: 0; }
.kb-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text-dim); transition: all 0.15s; margin-bottom: 2px; }
.kb-item:hover { background: var(--purple-dim); color: var(--text); }
.kb-item.active { background: linear-gradient(90deg, rgba(155,127,255,0.18) 0%, rgba(155,127,255,0.06) 100%); color: var(--text); border-left: 3px solid var(--purple); box-shadow: inset 0 0 20px rgba(155,127,255,0.05); }
.kb-item-id { font-weight: 600; font-size: 11px; color: var(--text); }
.kb-item-name { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.kb-editor { flex: 1; min-width: 0; overflow-y: auto; height: 100%; padding-bottom: 120px; scrollbar-width: none; -ms-overflow-style: none; }
.kb-editor::-webkit-scrollbar { display: none; }
.kb-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); font-size: 14px; }
/* Sticky save bar — z-index above sibling sections, solid background so nothing
   bleeds through, will-change forces a compositor layer so Chromium on Windows
   doesn't drop the sticky render mid-scroll. Backdrop-filter removed — it
   interacts badly with sticky on some Chromium builds and the solid bg is fine. */
.kb-editor-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: sticky; top: 0; z-index: 100; background: var(--bg-card); will-change: transform; }
.kb-editor-header.has-changes { border-bottom-color: var(--purple-mid); box-shadow: 0 2px 12px rgba(124,92,252,0.15); }
.kb-editor-header .unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.upload-zone { padding: 12px 16px; background: rgba(124,92,252,0.04); border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: center; }
.upload-zone:hover { border-color: var(--purple); background: rgba(124,92,252,0.08); }
.upload-zone.dragover { border-color: var(--purple-mid); background: rgba(124,92,252,0.12); }
.kb-editor-title { font-size: 14px; font-weight: 600; }
.kb-editor-body { flex: 1; overflow: hidden; min-height: 0; }
.kb-textarea { width: 100%; min-height: calc(100vh - 200px); background: transparent; border: none; color: var(--text); font-size: 12px; font-family: 'Courier New', monospace; padding: 16px 20px; resize: vertical; outline: none; line-height: 1.6; }

/* ─── FORMS ──────────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
select {
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(155,127,255,0.12); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"] { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-family: var(--font); padding: 9px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(155,127,255,0.12); }
input[readonly] { opacity: 0.6; cursor: default; }
input::placeholder { color: var(--text-dim); }

/* ─── TOGGLE ─────────────────────────────────────────────────────────────────── */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #2a2a4a; border-radius: 24px; cursor: pointer; transition: 0.2s; }
.slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.toggle input:checked + .slider { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-mid) 100%); box-shadow: 0 0 10px rgba(155,127,255,0.4); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

/* Mini toggle for table */
.mini-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.mini-toggle input { opacity: 0; width: 0; height: 0; }
.mini-slider { position: absolute; inset: 0; background: #2a2a4a; border-radius: 20px; cursor: pointer; transition: 0.2s; }
.mini-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.mini-toggle input:checked + .mini-slider { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-mid) 100%); box-shadow: 0 0 8px rgba(155,127,255,0.35); }
.mini-toggle input:checked + .mini-slider::before { transform: translateX(16px); }

/* ─── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--purple) 0%, #6B4FE8 100%); color: white; box-shadow: 0 4px 16px rgba(155,127,255,0.35); letter-spacing: 0.2px; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(155,127,255,0.5); filter: brightness(1.08); }
.btn-secondary { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); transition: all 0.2s; }
.btn-secondary:hover { color: var(--text); border-color: var(--border-glow); background: var(--bg-card-2); }
.btn-success { background: linear-gradient(135deg, #16a34a, #15803d); color: white; }
.btn-warning { background: linear-gradient(135deg, #d97706, #b45309); color: white; }
.btn-danger  { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.btn-sm  { padding: 7px 14px; font-size: 12px; }
.btn-lg  { padding: 12px 28px; font-size: 15px; }
.btn-ghost-sm { background: none; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font); width: 100%; transition: all 0.15s; }
.btn-ghost-sm:hover { color: var(--text); border-color: var(--border-hover); }
.copy-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; padding: 2px 6px; font-size: 12px; cursor: pointer; transition: all 0.15s; font-family: var(--font); }
.copy-btn:hover { color: var(--purple); border-color: var(--purple); }
.table-link { color: var(--purple); cursor: pointer; font-size: 12px; text-decoration: none; background: none; border: none; font-family: var(--font); padding: 0; }
.table-link:hover { text-decoration: underline; }
.error-msg { margin-top: 10px; font-size: 12px; color: var(--red); display: none; }

/* ─── LOGO ───────────────────────────────────────────────────────────────────── */
.logo-img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(155,127,255,0.4) 0%, rgba(0,229,255,0.2) 100%); border-radius: 2px; }

/* ─── TABS ───────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(155,127,255,0.15);
  padding-bottom: 0;
  position: relative;
}
.tab-bar::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(155,127,255,0.3) 30%, rgba(0,229,255,0.15) 70%, transparent 100%);
  pointer-events: none;
}

.tab {
  padding: 9px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: -1px;
  position: relative;
  letter-spacing: 0.1px;
  border-radius: 8px 8px 0 0;
}
.tab::before {
  content: '';
  position: absolute; inset: 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(155,127,255,0.07) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.2s;
}
.tab:hover { color: var(--text); }
.tab:hover::before { opacity: 1; }
.tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
  font-weight: 700;
  text-shadow: 0 0 20px rgba(155,127,255,0.5);
  background: linear-gradient(180deg, rgba(155,127,255,0.08) 0%, transparent 100%);
}
.tab.active::after {
  content: '';
  position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 50%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent);
  box-shadow: 0 0 8px rgba(155,127,255,0.6);
}

.tab-content { display: block; }
.tab-content.hidden { display: none !important; }

.tab-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

/* ─── DASHBOARD LAYOUT ───────────────────────────────────────────────────────── */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}

.dashboard-left { display: flex; flex-direction: column; gap: 16px; }

/* ─── BRAND PANEL ────────────────────────────────────────────────────────────── */
.dashboard-right { position: sticky; top: 0; }

.brand-panel {
  background: linear-gradient(160deg, var(--bg-card-2) 0%, var(--bg-card) 50%, rgba(0,229,255,0.02) 100%);
  border: 1px solid var(--border-glow);
  border-radius: 18px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.brand-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 4px; }
.brand-name { font-size: 16px; font-weight: 700; color: var(--text); }
.brand-tagline { font-size: 11px; color: var(--text-dim); }
.brand-divider { width: 100%; height: 1px; background: var(--border); margin: 8px 0; }
.brand-product-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

.brand-ainstein {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin-top: 4px;
}

.ainstein-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.brand-product-name { font-size: 13px; font-weight: 600; color: var(--text); }
.brand-product-sub  { font-size: 11px; color: var(--text-dim); }

.brand-stats-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.brand-stat {
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.brand-stat span {
  font-weight: 700;
  color: var(--purple);
}

/* ─── ACTIVITY FEED ──────────────────────────────────────────────────────────── */
.activity-feed {
  background: linear-gradient(180deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(120,100,255,0.07);
  font-size: 13px;
}

.activity-item:last-child { border-bottom: none; }
.activity-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.activity-text { flex: 1; color: var(--text); }
.activity-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.activity-empty { padding: 20px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* ─── REAL STATE-CHANGE ACTIVITY ROWS ──────────────────────────────────────
   Replaces the old placeholder activity-item rows. Each row pulls directly
   from broker_state_log + platform_state_log merged by timestamp.
   Left border color signals risk: red = alert (kill engaged, master pause
   engaged, account paused, going live), green = info (safe direction).
─────────────────────────────────────────────────────────────────────────── */
.activity-row {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(120,100,255,0.07);
  border-left: 3px solid transparent;
  transition: background 160ms ease;
}
.activity-row:last-child { border-bottom: none; }
.activity-row:hover { background: rgba(155,127,255,0.03); }
.activity-row.risk-alert { border-left-color: #FF6B6B; }
.activity-row.risk-warn  { border-left-color: #FFD060; }
.activity-row.risk-info  { border-left-color: #3DD68C; }

.activity-row-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.activity-row .activity-icon { font-size: 14px; width: auto; }

.activity-scope {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.activity-scope-broker {
  background: rgba(155,127,255,0.12);
  color: #9B7FFF;
  border: 1px solid rgba(155,127,255,0.35);
  cursor: pointer;
  transition: all 140ms ease;
}
.activity-scope-broker:hover {
  background: rgba(155,127,255,0.20);
  border-color: rgba(155,127,255,0.55);
}
.activity-scope-platform {
  background: rgba(255,107,107,0.12);
  color: #FF6B6B;
  border: 1px solid rgba(255,107,107,0.40);
}

.activity-flag {
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.activity-transition {
  font-size: 12px; color: var(--text);
  font-weight: 500;
  flex: 1; min-width: 0;
}
.activity-row .activity-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
}
.activity-reason {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
  margin-left: 28px;
}
.activity-by {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-left: 28px;
  letter-spacing: 0.04em;
}

/* Paginator bar at the bottom of the activity feed. Shows how many of the
   total rows are currently visible, plus the show-more / collapse controls. */
.activity-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(120,100,255,0.12);
  background: rgba(0,0,0,0.15);
  gap: 12px;
  flex-wrap: wrap;
}
.activity-count {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.activity-buttons {
  display: flex;
  gap: 8px;
}
.activity-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(155,127,255,0.35);
  background: rgba(155,127,255,0.08);
  color: #9B7FFF;
  cursor: pointer;
  transition: all 140ms ease;
}
.activity-btn:hover {
  background: rgba(155,127,255,0.18);
  border-color: rgba(155,127,255,0.55);
}
.activity-btn-secondary {
  border-color: var(--border);
  background: transparent;
  color: var(--text-dim);
}
.activity-btn-secondary:hover {
  background: var(--bg-input);
  color: var(--text);
}

/* ─── PAGINATION ─────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 16px 0 0;
}

.page-btn {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}

.page-btn:hover { color: var(--text); border-color: var(--border-hover); }
.page-btn.active { background: var(--purple-dim); color: var(--purple); border-color: var(--purple); }
.page-btn:disabled { opacity: 0.3; cursor: default; }
/* ─── CARRIER MULTI-SELECT ───────────────────────────────────────────────────── */
.carrier-multiselect { position: relative; }

.carrier-multiselect-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text);
  transition: all 0.2s; min-height: 38px; user-select: none;
}
.carrier-multiselect-trigger:hover { border-color: var(--border-glow); box-shadow: 0 0 0 3px rgba(155,127,255,0.08); }

.carrier-multiselect-menu {
  position: fixed; background: linear-gradient(160deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-glow); border-radius: 10px; z-index: 9999;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(155,127,255,0.1);
  max-height: 320px; overflow-y: auto; min-width: 300px;
}

.carrier-checkbox-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  cursor: pointer; transition: background 0.1s;
  border-bottom: 1px solid rgba(140,120,255,0.07);
}
.carrier-checkbox-item:last-child { border-bottom: none; }
.carrier-checkbox-item:hover { background: var(--purple-dim); }
.carrier-checkbox-item input[type="checkbox"] { accent-color: var(--purple); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.carrier-checkbox-label { font-size: 13px; color: var(--text); cursor: pointer; }

/* ─── CARRIER EDITOR ─────────────────────────────────────────────────────────── */

.carrier-section {
  background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s;
}
.carrier-section:hover { border-color: var(--border-glow); }

.carrier-section-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  opacity: 0.85;
}

/* ─── PLAN GROUPS ────────────────────────────────────────────────────────────── */

.group-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: all 0.2s;
  background: var(--bg-card);
}
.group-card:hover { border-color: var(--border-glow); box-shadow: 0 4px 20px rgba(155,127,255,0.08); }

.group-header {
  padding: 11px 14px;
  background: linear-gradient(90deg, rgba(155,127,255,0.1) 0%, rgba(155,127,255,0.03) 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-phone-badge {
  font-size: 11px; color: var(--cyan);
  background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.2);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}

/* ─── PLAN ROWS ──────────────────────────────────────────────────────────────── */

.plan-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 7px; border: 1px solid transparent;
  transition: all 0.15s; gap: 8px;
}
.plan-row:hover {
  background: linear-gradient(90deg, rgba(155,127,255,0.07) 0%, transparent 100%);
  border-color: rgba(155,127,255,0.15);
}

/* ─── KB SESSION STATUS ──────────────────────────────────────────────────────── */

.kb-session-status {
  font-size: 12px; font-weight: 700; padding: 5px 14px;
  border-radius: 20px; white-space: nowrap; letter-spacing: 0.2px;
}
.kb-session-status.locked {
  background: rgba(100,100,140,0.15); color: var(--text-dim);
  border: 1px solid rgba(100,100,140,0.25);
}
.kb-session-status.unlocked {
  background: linear-gradient(90deg, rgba(61,214,140,0.15) 0%, rgba(61,214,140,0.08) 100%);
  color: var(--green); border: 1px solid rgba(61,214,140,0.3);
  box-shadow: 0 0 12px rgba(61,214,140,0.15);
}

/* ─── SECTION TITLE ACCENT ───────────────────────────────────────────────────── */

.section-title {
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px;
}

/* ─── PAGE HEADER GLOW ───────────────────────────────────────────────────────── */

.page-header h1 {
  background: linear-gradient(135deg, var(--text) 0%, rgba(155,127,255,0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── SIDEBAR LOGO GLOW ──────────────────────────────────────────────────────── */

.sidebar-brand {
  font-size: 14px; font-weight: 800; letter-spacing: 0.3px;
  background: linear-gradient(135deg, var(--text) 0%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── STAT VALUE GLOW ────────────────────────────────────────────────────────── */

.stat-value { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }

/* ─── TABLE TOOLBAR ──────────────────────────────────────────────────────────── */

.tab-bar { border-bottom: 1px solid var(--border); }
.tab-bar::after {
  content: ''; display: block; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,127,255,0.3), transparent);
  margin-top: -1px;
}

/* ─── COPY BUTTON ────────────────────────────────────────────────────────────── */

.copy-btn:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px rgba(0,229,255,0.2); }

/* ─── PAGE BTN ───────────────────────────────────────────────────────────────── */

.page-btn.active {
  background: linear-gradient(135deg, rgba(155,127,255,0.2) 0%, rgba(155,127,255,0.08) 100%);
  color: var(--purple); border-color: var(--purple);
  box-shadow: 0 0 12px rgba(155,127,255,0.2);
}

/* ─── PROGRESS STEPS ─────────────────────────────────────────────────────────── */

.progress-step.done    { color: var(--green); }
.progress-step.failed  { color: var(--red); }
.progress-step.warning { color: var(--yellow); }
.progress-step.manual  { color: var(--cyan); }

/* ─── CHECKLIST ITEMS ────────────────────────────────────────────────────────── */

.checklist-item.done    { background: rgba(61,214,140,0.1); color: var(--green); border: 1px solid rgba(61,214,140,0.25); }
.checklist-item.pending { background: rgba(255,208,96,0.08); color: var(--yellow); border: 1px solid rgba(255,208,96,0.2); }

/* ─── ERROR MSG ──────────────────────────────────────────────────────────────── */

.error-msg { color: var(--red); }

/* ─── ONBOARDING WIZARD ──────────────────────────────────────────────────────── */

.wizard-progress { margin-bottom: 28px; max-width: 720px; }
.wizard-steps { display: flex; align-items: center; }
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }

.wizard-step-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-input); border: 2px solid var(--border);
  color: var(--text-dim); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.wizard-step.active    .wizard-step-dot {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-mid) 100%);
  border-color: var(--purple); color: white;
  box-shadow: 0 0 24px rgba(155,127,255,0.5), 0 0 48px rgba(155,127,255,0.2);
}
.wizard-step.completed .wizard-step-dot {
  background: linear-gradient(135deg, var(--green) 0%, #2AAA6E 100%);
  border-color: var(--green); color: white;
  box-shadow: 0 0 16px rgba(61,214,140,0.3);
}

.wizard-step-label { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; transition: color 0.25s; letter-spacing: 0.3px; }
.wizard-step.active    .wizard-step-label { color: var(--purple); font-weight: 700; }
.wizard-step.completed .wizard-step-label { color: var(--green); }

.wizard-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 8px; margin-bottom: 18px; transition: background 0.4s; }
.wizard-step-line.completed { background: linear-gradient(90deg, var(--green), rgba(61,214,140,0.4)); }

.wizard-viewport { max-width: 720px; overflow: visible; position: relative; }

.wizard-card {
  display: none;
  background: linear-gradient(160deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: visible;
  box-shadow: var(--shadow-card);
}
.wizard-card.active {
  display: flex; flex-direction: column;
  animation: wizardSlideIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

@keyframes wizardSlideIn     { from { opacity:0; transform:translateX(28px) scale(0.98); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes wizardSlideInBack { from { opacity:0; transform:translateX(-28px) scale(0.98); } to { opacity:1; transform:translateX(0) scale(1); } }

.wizard-card-header {
  padding: 24px 28px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(155,127,255,0.06) 0%, transparent 100%);
  border-radius: 18px 18px 0 0;
}
.wizard-card-title  { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 5px; letter-spacing: -0.2px; }
.wizard-card-sub    { font-size: 13px; color: var(--text-dim); }
.wizard-card-body   { padding: 24px 28px; flex: 1; overflow: visible; }
.wizard-card-footer {
  padding: 16px 28px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.01); border-radius: 0 0 18px 18px;
}
.wizard-error { font-size: 12px; color: var(--red); font-weight: 600; }

.wizard-review { display: flex; flex-direction: column; gap: 12px; }
.wizard-review-section {
  background: rgba(255,255,255,0.015); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.wizard-review-section-title {
  padding: 10px 16px; font-size: 10px; font-weight: 800; color: var(--purple);
  text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.85;
  background: linear-gradient(90deg, rgba(155,127,255,0.08) 0%, rgba(155,127,255,0.02) 100%);
  border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
}
.wizard-review-edit { font-size: 11px; color: var(--cyan); cursor: pointer; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.9; }
.wizard-review-edit:hover { text-decoration: underline; opacity: 1; }
.wizard-review-grid { display: grid; grid-template-columns: 1fr 1fr; }
.wizard-review-field { padding: 10px 16px; border-bottom: 1px solid rgba(140,120,255,0.07); border-right: 1px solid rgba(140,120,255,0.07); }
.wizard-review-field:nth-child(even)      { border-right: none; }
.wizard-review-field:nth-last-child(-n+2) { border-bottom: none; }
.wizard-review-label { font-size: 10px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.wizard-review-value { font-size: 13px; color: var(--text); font-weight: 500; }
.wizard-review-value.empty { color: var(--text-dim); font-style: italic; font-weight: 400; }

.req { color: var(--red); margin-left: 2px; }

.sidebar-kb-status {
  font-size: 11px; font-weight: 700; padding: 6px 12px;
  border-radius: 8px; text-align: center; margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(61,214,140,0.15) 0%, rgba(61,214,140,0.08) 100%);
  color: var(--green); border: 1px solid rgba(61,214,140,0.3);
  box-shadow: 0 0 12px rgba(61,214,140,0.15);
}

/* ═══ AINSTEIN LEARNING — suggestion review queue ═══════════════════════ */
.suggestion-list { display: flex; flex-direction: column; gap: 12px; }
.suggestion-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.suggestion-card.scope-platform { border-left: 3px solid var(--cyan); }
.suggestion-card.scope-broker   { border-left: 3px solid var(--purple); }
.suggestion-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px;
}
.suggestion-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.012em; line-height: 1.3;
}
.suggestion-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.suggestion-scope-pill {
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.suggestion-scope-pill.platform { background: rgba(0,229,255,0.12); color: var(--cyan); }
.suggestion-scope-pill.broker   { background: rgba(155,127,255,0.12); color: var(--purple); }
.suggestion-confidence {
  font-size: 11px; color: var(--text-dim);
  background: var(--bg-input);
  padding: 2px 8px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.suggestion-body {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.55; white-space: pre-wrap;
  background: var(--bg-input);
  padding: 12px 14px; border-radius: 8px;
  margin: 10px 0 12px;
}
.suggestion-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.suggestion-actions .btn { font-size: 12px; padding: 6px 12px; }

.count-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 8px; font-size: 10px; font-weight: 700;
  background: var(--purple); color: white;
  border-radius: 10px; vertical-align: middle;
}

/* Sidebar outstanding-ticket badge — red pill pinned to the right of the nav
   item, hidden when the count is 0 (set via .hidden). Draws the operator's eye
   to support tickets that still need a reply. */
.nav-badge {
  margin-left: auto; flex-shrink: 0;
  min-width: 18px; padding: 1px 6px;
  font-size: 10px; font-weight: 800; line-height: 16px;
  text-align: center; color: #fff;
  background: var(--red); border-radius: 10px;
  box-shadow: 0 0 8px rgba(255,107,107,0.45);
}
.nav-badge.hidden { display: none; }

.validation-list, .lesson-list { display: flex; flex-direction: column; gap: 8px; }
.validation-card, .lesson-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px; color: var(--text-dim);
}
.validation-severity-blocking { border-left: 3px solid var(--red); }
.validation-severity-minor    { border-left: 3px solid var(--yellow); }
.validation-severity-none     { border-left: 3px solid var(--green); }
.validation-head, .lesson-head {
  display: flex; justify-content: space-between;
  margin-bottom: 8px; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ─── PLATFORM USAGE ─────────────────────────────────────────────────────── */
.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 780px;
  line-height: 1.55;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.pu-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.pu-summary-card {
  background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pu-summary-card.engaged  { border-color: rgba(61,214,140,0.35); }
.pu-summary-card.cautious { border-color: rgba(255,208,96,0.35); }
.pu-summary-card.at-risk  { border-color: rgba(255,159,67,0.40); }
.pu-summary-card.dormant  { border-color: rgba(255,107,107,0.35); }
.pu-summary-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pu-summary-card.engaged  .pu-summary-value { color: var(--green); }
.pu-summary-card.cautious .pu-summary-value { color: var(--yellow); }
.pu-summary-card.at-risk  .pu-summary-value { color: #FF9F43; }
.pu-summary-card.dormant  .pu-summary-value { color: var(--red); }
.pu-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.pu-summary-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.pu-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pu-table thead th {
  background: var(--bg-card-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pu-table tbody td {
  padding: 14px;
  border-bottom: 1px solid rgba(140, 120, 255, 0.08);
  color: var(--text);
  vertical-align: middle;
}
.pu-table tbody tr:last-child td { border-bottom: none; }
.pu-table tbody tr { transition: background 0.12s; }
.pu-table tbody tr:hover { background: rgba(155,127,255,0.04); }

.pu-col-broker   { min-width: 220px; }
.pu-col-tier     { width: 80px; text-align: center; }
.pu-col-num      { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.pu-col-num .pu-icon {
  display: inline-block;
  margin-right: 4px;
  opacity: 0.7;
  font-size: 14px;
}
.pu-col-total    { width: 90px; text-align: right; font-weight: 700; }
.pu-col-trend    { width: 80px; text-align: center; }
.pu-col-status   { width: 110px; }

.pu-broker-name {
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pu-broker-loc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: 'SF Mono', Consolas, monospace;
}

.pu-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 5px;
}
.pu-tier-badge.tier-core  { background: rgba(100,100,140,0.18); color: #B4B4D0; }
.pu-tier-badge.tier-pro   { background: var(--purple-dim); color: var(--purple); }
.pu-tier-badge.tier-elite {
  background: linear-gradient(135deg, rgba(155,127,255,0.22) 0%, rgba(0,229,255,0.15) 100%);
  color: var(--purple);
}

.pu-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.pu-count.zero { color: var(--text-muted); opacity: 0.55; }

.pu-total-big {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pu-total-big.zero { color: var(--text-muted); opacity: 0.55; font-weight: 500; }

.pu-trend {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.pu-trend.up    { background: rgba(61,214,140,0.14); color: var(--green); }
.pu-trend.flat  { background: rgba(100,100,140,0.18); color: #B4B4D0; }
.pu-trend.down  { background: rgba(255,107,107,0.14); color: var(--red); }
.pu-trend.none  { color: var(--text-muted); opacity: 0.4; font-size: 16px; }

.pu-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid;
}
.pu-status-pill.engaged  { background: rgba(61,214,140,0.12); color: var(--green); border-color: rgba(61,214,140,0.40); }
.pu-status-pill.cautious { background: rgba(255,208,96,0.12); color: var(--yellow); border-color: rgba(255,208,96,0.40); }
.pu-status-pill.at-risk  { background: rgba(255,159,67,0.15); color: #FF9F43; border-color: rgba(255,159,67,0.40); }
.pu-status-pill.dormant  { background: rgba(255,107,107,0.12); color: var(--red); border-color: rgba(255,107,107,0.40); }

.pu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.pu-meta {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.pu-legend {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pu-legend .pu-status-pill { margin-left: 8px; }
.pu-legend .pu-status-pill:first-child { margin-left: 0; }

.pu-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.pu-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .pu-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── AINSTEIN GRADE ─────────────────────────────────────────────────────── */
.ag-hero {
  background: linear-gradient(135deg, rgba(155,127,255,0.10) 0%, rgba(0,229,255,0.05) 100%), linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-glow);
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-card), 0 0 32px rgba(155,127,255,0.08);
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 32px;
  align-items: center;
}
.ag-hero-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 30px;
  font-size: 13px;
}
.ag-grade-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(92px, 12vw, 144px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: center;
  padding: 0 8px;
  text-shadow: 0 0 40px currentColor;
}
.ag-grade-letter.A { color: #3DD68C; }
.ag-grade-letter.B { color: #7FE0B8; }
.ag-grade-letter.C { color: #FFD060; }
.ag-grade-letter.D { color: #FF9F43; }
.ag-grade-letter.F { color: #FF6B6B; }
.ag-grade-letter.blank { color: var(--text-muted); font-size: 72px; text-shadow: none; opacity: 0.5; }

.ag-grade-meta { text-align: center; margin-top: 8px; }
.ag-grade-avg {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ag-grade-avg-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-top: 2px;
}

.ag-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.ag-kpi {
  background: rgba(14, 14, 34, 0.35);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
}
.ag-kpi:hover { border-color: var(--border-strong, var(--border-glow)); }
.ag-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
}
.ag-kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ag-kpi-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.ag-kpi-value.good { color: var(--green); }
.ag-kpi-value.warn { color: var(--yellow); }
.ag-kpi-value.bad  { color: var(--red); }

.ag-section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 24px 0 4px;
}
.ag-section-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.ag-segments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.ag-segment-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 28px;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.ag-segment-card {
  background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ag-segment-card:hover { border-color: var(--border-glow); }
.ag-segment-card.full_auto  { border-color: rgba(61,214,140,0.40); }
.ag-segment-card.draft_mode { border-color: rgba(255,208,96,0.40); }
.ag-segment-card.no_csa     { border-color: rgba(100,100,140,0.30); }
.ag-segment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ag-segment-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-muted);
}
.ag-segment-card.full_auto  .ag-segment-name { color: var(--green); }
.ag-segment-card.draft_mode .ag-segment-name { color: var(--yellow); }
.ag-segment-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ag-segment-score {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ag-segment-score-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -4px;
}
.ag-segment-detail {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.ag-segment-detail strong { color: var(--text); font-weight: 600; }

.ag-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ag-table thead th {
  background: var(--bg-card-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ag-table tbody td {
  padding: 14px;
  border-bottom: 1px solid rgba(140, 120, 255, 0.08);
  color: var(--text);
  vertical-align: middle;
}
.ag-table tbody tr:last-child td { border-bottom: none; }
.ag-table tbody tr { transition: background 0.12s; }
.ag-table tbody tr:hover { background: rgba(155,127,255,0.04); }

.ag-col-broker { min-width: 220px; }
.ag-col-tier   { width: 80px; text-align: center; }
.ag-col-seg    { width: 100px; }
.ag-col-num    { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.ag-col-grade  { width: 70px; text-align: center; }

.ag-seg-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid;
}
.ag-seg-pill.full_auto  { background: rgba(61,214,140,0.12); color: var(--green);  border-color: rgba(61,214,140,0.35); }
.ag-seg-pill.draft_mode { background: rgba(255,208,96,0.12); color: var(--yellow); border-color: rgba(255,208,96,0.35); }
.ag-seg-pill.no_csa     { background: rgba(100,100,140,0.18); color: #B4B4D0;      border-color: rgba(100,100,140,0.35); }

.ag-grade-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 28px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid;
  letter-spacing: -0.02em;
}
.ag-grade-pill.A { background: rgba(61,214,140,0.14); color: #3DD68C; border-color: rgba(61,214,140,0.40); }
.ag-grade-pill.B { background: rgba(127,224,184,0.14); color: #7FE0B8; border-color: rgba(127,224,184,0.40); }
.ag-grade-pill.C { background: rgba(255,208,96,0.14); color: var(--yellow); border-color: rgba(255,208,96,0.40); }
.ag-grade-pill.D { background: rgba(255,159,67,0.14); color: #FF9F43; border-color: rgba(255,159,67,0.40); }
.ag-grade-pill.F { background: rgba(255,107,107,0.14); color: var(--red); border-color: rgba(255,107,107,0.40); }
.ag-grade-pill.blank { background: rgba(100,100,140,0.12); color: var(--text-muted); border-color: rgba(100,100,140,0.30); opacity: 0.6; }

.ag-score-cell { color: var(--text); font-weight: 600; }
.ag-score-cell.zero { color: var(--text-muted); opacity: 0.5; font-weight: 500; }

.ag-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.ag-meta {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.ag-legend {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ag-legend .ag-grade-pill { width: 28px; height: 22px; font-size: 16px; margin-left: 4px; }

.ag-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .ag-hero { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .ag-segments-grid { grid-template-columns: 1fr; }
}

/* ─── AINSTEIN GRADE v2 ADDITIONS ─────────────────────────────────────────── */

.ag-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ag-window-toggle {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.ag-window-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.ag-window-btn:hover { color: var(--text); background: rgba(155,127,255,0.08); }
.ag-window-btn.active {
  background: linear-gradient(135deg, var(--purple-mid) 0%, var(--purple) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(155,127,255,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Maintenance alert strip */
.ag-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ag-alerts:empty { display: none; }
.ag-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.ag-alert.critical { border-color: rgba(255,107,107,0.40); background: linear-gradient(145deg, rgba(255,107,107,0.08) 0%, var(--bg-card) 100%); }
.ag-alert.warn     { border-color: rgba(255,208,96,0.40);  background: linear-gradient(145deg, rgba(255,208,96,0.08) 0%, var(--bg-card) 100%); }
.ag-alert-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.ag-alert.critical .ag-alert-icon { color: var(--red); filter: drop-shadow(0 0 8px rgba(255,107,107,0.5)); }
.ag-alert.warn     .ag-alert-icon { color: var(--yellow); }
.ag-alert-body { flex: 1; min-width: 0; }
.ag-alert-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 3px;
}
.ag-alert-message {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.ag-alert-action {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(140,120,255,0.1);
  line-height: 1.5;
  font-style: italic;
}

/* Dimension breakdown grid */
.ag-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.ag-dim-card {
  background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
}
.ag-dim-card:hover { border-color: var(--border-glow); }
.ag-dim-card.empty { opacity: 0.5; }

.ag-dim-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ag-dim-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-muted);
}
.ag-dim-weight {
  font-size: 10px;
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-dim);
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}
.ag-dim-score {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ag-dim-score.unavailable { color: var(--text-muted); font-size: 16px; font-weight: 500; font-style: italic; }
.ag-dim-score.good { color: var(--green); }
.ag-dim-score.warn { color: var(--yellow); }
.ag-dim-score.bad  { color: var(--red); }
.ag-dim-detail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ag-dim-bar {
  height: 4px;
  background: rgba(140,120,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.ag-dim-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-mid) 0%, var(--purple) 100%);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-dim-bar-fill.good { background: linear-gradient(90deg, rgba(61,214,140,0.6) 0%, var(--green) 100%); }
.ag-dim-bar-fill.warn { background: linear-gradient(90deg, rgba(255,208,96,0.6) 0%, var(--yellow) 100%); }
.ag-dim-bar-fill.bad  { background: linear-gradient(90deg, rgba(255,107,107,0.6) 0%, var(--red) 100%); }

/* Trend chart */
.ag-chart-wrap {
  background: linear-gradient(145deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
  min-height: 240px;
}
.ag-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
  font-size: 13px;
}
.ag-chart-svg { width: 100%; height: 220px; display: block; }
.ag-chart-grid line { stroke: rgba(140,120,255,0.08); stroke-width: 1; }
.ag-chart-axis text { fill: var(--text-muted); font-size: 10px; font-family: var(--font); }
.ag-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ag-chart-line.resolution { stroke: var(--purple); }
.ag-chart-line.coverage   { stroke: var(--cyan, #00E5FF); stroke-dasharray: 4 3; }
.ag-chart-line.retention  { stroke: var(--green); stroke-dasharray: 2 3; }
.ag-chart-area {
  fill: url(#agChartGradient);
  opacity: 0.15;
}
.ag-chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.ag-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ag-chart-legend-swatch {
  width: 12px; height: 2px;
  border-radius: 1px;
}
.ag-chart-legend-swatch.resolution { background: var(--purple); }
.ag-chart-legend-swatch.coverage   { background: var(--cyan, #00E5FF); }
.ag-chart-legend-swatch.retention  { background: var(--green); }

/* Hero KPI expansion — shows composite score + 5 big dimension numbers */
.ag-hero-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.ag-hero-kpi {
  padding: 12px 14px;
  background: rgba(14, 14, 34, 0.45);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ag-hero-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.ag-hero-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ag-hero-kpi-value.unavailable { color: var(--text-muted); font-style: italic; font-size: 14px; font-weight: 500; }
.ag-hero-kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
}

/* Per-broker: dual grade columns */
.ag-grade-dual {
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* Export button state */
#agExportBtn.working { opacity: 0.6; cursor: progress; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRACTION NOTES VIEWER (read-only)

   Renders the audit trail of Sonnet's extraction events inside the group
   edit form. Visually distinct from the KB textarea — cyan accent, dashed
   border — so operators immediately see this is "internal history" not
   "client-facing KB content." Read-only by design; data integrity of the
   audit trail is protected.
═══════════════════════════════════════════════════════════════════════════ */

.extraction-notes-viewer {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px dashed rgba(0, 229, 255, 0.25);
  border-radius: 10px;
}
.extraction-notes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.extraction-notes-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00E5FF;
}
.extraction-notes-sub {
  font-size: 10px; color: var(--text-muted);
  font-weight: 400;
  line-height: 1.45;
  margin-top: 4px;
  max-width: 60ch;
}
.extraction-notes-count {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.extraction-notes-body { display: flex; flex-direction: column; gap: 8px; }
.extraction-event {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.extraction-event-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.extraction-event-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}
.extraction-event-notes li { margin-bottom: 5px; }
.extraction-event-notes li:last-child { margin-bottom: 0; }
.extraction-event-empty {
  font-size: 11px; color: var(--text-muted); font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARRIER EDITOR — collapsible sections (focus mode)
   Every .carrier-section title gets a clickable header row with a chevron.
   When a plan group enters edit mode, all other sections auto-collapse so
   the operator only sees the group being edited. Sections remain
   independently toggleable by clicking their headers.
═══════════════════════════════════════════════════════════════════════════ */

.carrier-section { position: relative; }

/* The click-to-collapse affordance lives on the header row. The header row
   is marked by the JS enhancer — either the .carrier-section-title itself
   when it's a direct child of the section, or its parent flex wrapper when
   there's a sibling button (Plan Groups, Client Service Intelligence, etc.) */
.carrier-section .section-header-clickable {
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease;
}
.carrier-section .section-header-clickable:hover {
  background: rgba(155, 127, 255, 0.04);
}

.carrier-section .section-chevron {
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 200ms ease;
  margin-left: 12px;
  flex-shrink: 0;
  pointer-events: none;
}
.carrier-section.collapsed .section-chevron {
  transform: rotate(-90deg);
}

/* The body wrapper is created post-render by enhanceCarrierSections(). Hiding
   it via display:none preserves DOM state (values stay in inputs) — reopening
   the section shows everything exactly as it was. */
.carrier-section.collapsed > .carrier-section-body {
  display: none;
}

/* When a section is collapsed, hide any sibling action buttons inside the
   header row (e.g. "+ Add Group" on Plan Groups, "Insert template" on the
   intelligence sections). Leaves just title + chevron visible — cleaner
   collapsed state, and avoids the UX trap of clicking a button that tries
   to show a form inside a hidden body. */
.carrier-section.collapsed .section-header-clickable > button,
.carrier-section.collapsed .section-header-clickable > .btn {
  display: none !important;
}

/* Visual treatment of collapsed sections — compact, subtle, but still
   obviously clickable. A collapsed section is a "bar" in Joe's words.
   Kill the title's margin-bottom in the collapsed state — without this,
   the 16px margin-bottom inherited from .carrier-section-title leaves
   dead space below the title inside a 2px-padded bar, which reads as
   "title pinned to the top of the bar" instead of vertically centered. */
.carrier-section.collapsed {
  padding-top: 8px;
  padding-bottom: 8px;
}
.carrier-section.collapsed .carrier-section-title {
  margin-bottom: 0;
}

/* Focus-mode collapse-all bar appears at the top of the carrier editor when
   any section is collapsed. One click expands everything. */
.carrier-editor-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 20px 0;
}
.section-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-faint, var(--border));
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 140ms ease;
  font-family: var(--font);
}
.section-toggle-btn:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLATFORM KILL SWITCH — the "500 brokers, one button" card at the top of
   the Dashboard tab. When engaged, pulses red and takes over the card.
═══════════════════════════════════════════════════════════════════════════ */

.platform-kill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 14px;
  margin-bottom: 20px;
  transition: all 260ms ease;
  border: 1px solid rgba(61,214,140,0.30);
  background: linear-gradient(135deg, rgba(61,214,140,0.05) 0%, var(--bg-card) 100%);
}
.platform-kill[data-engaged="true"] {
  border-color: rgba(255,107,107,0.70);
  background: linear-gradient(135deg, rgba(255,107,107,0.12) 0%, var(--bg-card) 100%);
  animation: platformKillPulse 2s ease-in-out infinite;
}
@keyframes platformKillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.00); }
  50%      { box-shadow: 0 0 0 6px rgba(255,107,107,0.22); }
}
.platform-kill-left { flex: 1; min-width: 0; }
.platform-kill-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 8px;
}
.platform-kill-icon { font-size: 18px; line-height: 1; }
.platform-kill[data-engaged="true"] .platform-kill-icon { font-size: 22px; }
.platform-kill-state {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.015em;
  color: #3DD68C;
  margin-bottom: 4px;
}
.platform-kill[data-engaged="true"] .platform-kill-state {
  color: #FF6B6B;
  font-size: 24px;
  text-shadow: 0 0 16px rgba(255,107,107,0.35);
}
.platform-kill-sub {
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
  max-width: 60ch;
}
.platform-kill-meta {
  font-size: 11px; color: var(--text-muted); margin-top: 8px;
}
.platform-kill-meta.empty { display: none; }
.platform-kill-meta em { color: var(--text-dim); font-style: italic; }

.platform-kill-right {
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch; flex-shrink: 0;
}
.platform-kill-btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px; font-weight: 800;
  font-family: var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #ff8080;
  background: linear-gradient(180deg, #c93b3b 0%, #a52a2a 100%);
  color: #fff;
  cursor: pointer;
  transition: all 160ms ease;
  box-shadow: 0 2px 10px rgba(169, 42, 42, 0.30);
}
.platform-kill-btn:hover { background: linear-gradient(180deg, #e04545 0%, #b63030 100%); box-shadow: 0 4px 14px rgba(169, 42, 42, 0.50); }
.platform-kill[data-engaged="true"] .platform-kill-btn {
  background: linear-gradient(180deg, #2b5a3e 0%, #1f4430 100%);
  border-color: #3DD68C;
  color: #fff;
  letter-spacing: 0.03em;
}
.platform-kill[data-engaged="true"] .platform-kill-btn:hover {
  background: linear-gradient(180deg, #336f4c 0%, #265339 100%);
}
.platform-kill-history-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 160ms ease;
}
.platform-kill-history-btn:hover { border-color: var(--border-hover); color: var(--text); }

@media (max-width: 700px) {
  .platform-kill { flex-direction: column; align-items: stretch; }
  .platform-kill-right { flex-direction: row; }
  .platform-kill-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATE CONTROLS — the three protected-flag control cards on broker detail.
   Each card is a visually distinct surface with a large state pill, a
   one-line subtitle, a last-changed meta row, and action buttons. The colour
   of the pill is driven by a data attribute on the card so the state maps
   to colour semantically (safe = green, caution = amber, danger = red,
   emergency = pulsing red).
═══════════════════════════════════════════════════════════════════════════ */

.state-controls {
  background: linear-gradient(135deg, rgba(155,127,255,0.05) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-glow);
  border-radius: 14px;
  padding: 20px 22px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.state-controls-header { margin-bottom: 16px; }
.state-controls-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em; margin-bottom: 4px;
}
.state-controls-sub {
  font-size: 12px; color: var(--text-dim);
  line-height: 1.45;
}

.state-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 960px) {
  .state-cards { grid-template-columns: 1fr; }
}

.state-card {
  position: relative;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 180ms ease;
}
.state-card[data-state="safe"]         { border-color: rgba(61, 214, 140, 0.35); }
.state-card[data-state="caution"]      { border-color: rgba(255, 208, 96, 0.35); }
.state-card[data-state="live"]         { border-color: rgba(255, 107, 107, 0.50); }
.state-card[data-state="master-pause"] { border-color: rgba(255, 107, 107, 0.65); animation: masterPausePulse 2.4s ease-in-out infinite; }

@keyframes masterPausePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.00); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.18); }
}

.state-card-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
}

/* The big centered pill — the single most important element on this surface.
   One glance tells you the current state of this flag. */
.state-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-caps: all-small-caps;
  align-self: flex-start;
  min-height: 36px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.state-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.state-pill.safe         { background: rgba(61,214,140,0.12);  color: #3DD68C; border-color: rgba(61,214,140,0.35); }
.state-pill.caution      { background: rgba(255,208,96,0.12);  color: #FFD060; border-color: rgba(255,208,96,0.35); }
.state-pill.live         { background: rgba(255,107,107,0.14); color: #FF6B6B; border-color: rgba(255,107,107,0.50); }
.state-pill.master-pause {
  background: rgba(255,107,107,0.16); color: #FF6B6B;
  border-color: rgba(255,107,107,0.70);
  font-size: 13px;
  padding: 12px 16px;
}

.state-card-sub {
  font-size: 12px; color: var(--text-dim);
  line-height: 1.45;
  min-height: 2em;
}

.state-card-meta {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.state-card-meta.empty { display: none; }
.state-card-meta strong { color: var(--text-dim); font-weight: 600; }

.state-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.state-action-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: var(--font);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  transition: all 160ms ease;
  letter-spacing: 0.01em;
}
.state-action-btn:hover { border-color: var(--border-hover); background: var(--bg-card); }
.state-action-btn.safe          { border-color: rgba(61,214,140,0.45);  color: #3DD68C; }
.state-action-btn.safe:hover    { background: rgba(61,214,140,0.08); }
.state-action-btn.caution       { border-color: rgba(255,208,96,0.45);  color: #FFD060; }
.state-action-btn.caution:hover { background: rgba(255,208,96,0.08); }
.state-action-btn.danger        { border-color: rgba(255,107,107,0.55); color: #FF6B6B; }
.state-action-btn.danger:hover  { background: rgba(255,107,107,0.10); }
.state-action-btn.emergency {
  background: linear-gradient(180deg, #c93b3b 0%, #a52a2a 100%);
  border-color: #ff8080;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}
.state-action-btn.emergency:hover { background: linear-gradient(180deg, #e04545 0%, #b63030 100%); }
.state-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* State History — append-only log of every protected-flag change. */
.state-history {
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 10px;
  padding: 14px 16px;
}
.state-history-header {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.state-history-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
}
.state-history-sub { font-size: 11px; color: var(--text-muted); }
.state-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.state-history-empty {
  font-size: 12px; color: var(--text-muted);
  padding: 12px; text-align: center;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.state-history-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  font-size: 12px;
}
.state-history-flag {
  font-weight: 700; color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.state-history-flag.is_active        { color: #FFD060; }
.state-history-flag.csa_draft_mode   { color: #9B7FFF; }
.state-history-flag.csa_master_pause { color: #FF6B6B; }
.state-history-transition { color: var(--text-dim); font-size: 11px; }
.state-history-transition .arrow { margin: 0 6px; color: var(--text-muted); }
.state-history-transition .new-val.false { color: #FF6B6B; font-weight: 700; }
.state-history-transition .new-val.true  { color: #3DD68C; font-weight: 700; }
.state-history-reason { color: var(--text); font-style: italic; margin-top: 3px; font-size: 11px; }
.state-history-meta { color: var(--text-muted); font-size: 10px; text-align: right; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE DIALOG + REASON DIALOG — state transitions with friction proportional
   to blast radius.
═══════════════════════════════════════════════════════════════════════════ */

.reason-box { width: 440px; max-width: 92vw; }
.reason-msg {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.5; margin-bottom: 14px;
}
.reason-label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
  margin: 12px 0 6px;
}
.reason-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}
.reason-input:focus { outline: none; border-color: var(--purple); }
.reason-error { font-size: 12px; color: var(--red); min-height: 18px; margin-top: 6px; }
.reason-actions { display: flex; gap: 10px; margin-top: 12px; }
.reason-cancel { flex: 1; }
.reason-confirm { flex: 1; }
.reason-confirm.danger { background: linear-gradient(180deg, #c93b3b 0%, #a52a2a 100%); color: #fff; border: 1px solid #ff8080; }
.reason-confirm.danger:hover { background: linear-gradient(180deg, #e04545 0%, #b63030 100%); }

.live-box { width: 520px; max-width: 94vw; }
.live-dialog-title {
  font-size: 17px; font-weight: 800;
  color: #FF6B6B;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.live-dialog-body {
  font-size: 13px; color: var(--text); line-height: 1.55;
  margin-bottom: 14px;
}
.live-dialog-impact {
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(255,107,107,0.08);
  border-left: 3px solid #FF6B6B;
  border-radius: 4px;
  font-size: 12px; color: var(--text-dim);
}
.live-checklist { margin-top: 10px; color: var(--text-dim); font-size: 12px; }
.live-checklist ul { margin: 6px 0 0 18px; padding: 0; }
.live-checklist li { margin-bottom: 4px; }

.live-nonce-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 4px;
}
.live-nonce-label {
  font-size: 11px; color: var(--text-dim); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.live-nonce-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}
.live-nonce-countdown.warn { color: #FFD060; }
.live-nonce-progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0 10px;
}
.live-nonce-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #FFD060 0%, #FF9F43 100%);
  width: 100%;
  transform-origin: left center;
  transition: transform 250ms linear;
  border-radius: 2px;
}
.live-nonce-display {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: #FFD060;
  padding: 10px 14px;
  background: rgba(0,0,0,0.30);
  border-radius: 6px;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(255, 208, 96, 0.4);
  user-select: none;
  -webkit-user-select: none;
}
.live-nonce-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
}
.live-nonce-input:focus { outline: none; border-color: #FFD060; }
.live-nonce-input.match { border-color: #3DD68C; color: #3DD68C; }
.live-nonce-input.mismatch { border-color: #FF6B6B; }

.live-dialog-error { font-size: 12px; color: var(--red); min-height: 18px; margin-top: 8px; }
.live-dialog-actions { display: flex; gap: 10px; margin-top: 14px; }
.live-cancel { flex: 1; }
.live-confirm {
  flex: 1;
  background: linear-gradient(180deg, #c93b3b 0%, #a52a2a 100%);
  color: #fff;
  border: 1px solid #ff8080;
  font-weight: 700;
}
.live-confirm:hover:not(:disabled) { background: linear-gradient(180deg, #e04545 0%, #b63030 100%); }
.live-confirm:disabled {
  background: var(--bg-input);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2 SHELL — Linear-clean redesign
   ───────────────────────────────────────────────────────────────────────────
   All v2 styles are scoped under `body.ui-v2`. Legacy chrome (sidebar +
   .main + .page-header pattern) stays untouched so we can A/B between
   `?ui=v2` and `?ui=legacy`. v2 introduces:

     • A 56px slim top command bar (brand, breadcrumbs, search, status pills)
     • The original sidebar shrinks to 64px icon-rail (expand on hover)
     • Main canvas loses its 32px frame — pages get edge-to-edge breathing
     • A Cmd+K command palette overlay (skeleton in Stage 1, wired in Stage 4)
     • Motion primitives: 200ms ease-out for hover/focus, 300ms cubic-bezier
       for tab transitions, 1.5s pulse for active-state indicators

   Hard rule: every legacy ID is preserved. v2 is a re-frame, not a rewrite.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Motion primitives + design tokens ──────────────────────────────────── */
body.ui-v2 {
  --v2-ease:           cubic-bezier(0.32, 0.72, 0, 1);   /* "Apple ease" — subtle, premium */
  --v2-ease-fast:      cubic-bezier(0.4, 0, 0.2, 1);
  --v2-dur-instant:    120ms;
  --v2-dur-fast:       200ms;
  --v2-dur-base:       300ms;

  --v2-radius-sm:      8px;
  --v2-radius-md:      12px;
  --v2-radius-lg:      16px;
  --v2-radius-xl:      20px;

  --v2-topbar-h:       56px;
  --v2-rail-w:         64px;
  --v2-rail-w-open:    220px;

  /* Elevation — subtle, layered. Used together for premium feel. */
  --v2-shadow-card:    0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.5);
  --v2-shadow-lift:    0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px -12px rgba(0,0,0,0.65), 0 0 0 1px var(--border-hover);
  --v2-shadow-focus:   0 0 0 2px var(--bg), 0 0 0 4px var(--purple-glow);

  /* Glass for floating elements (palette, dropdowns, modals) */
  --v2-glass-bg:       rgba(22, 22, 48, 0.78);
  --v2-glass-border:   rgba(155, 127, 255, 0.18);
  --v2-glass-blur:     saturate(180%) blur(24px);
}

/* Make the page itself the scroll container — kill the iframe feel.
   Body no longer locks to viewport; page-level scroll restored.
   Sidebar becomes fixed (not flex-fixed-via-overflow), top bar fixed,
   and main content gets natural body-level scroll under both. */
body.ui-v2 {
  overflow: auto;
  height: auto;
  min-height: 100vh;
  /* Retain the radial accents on the legacy bg, but lift them slightly */
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -5%, rgba(124, 92, 252, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 100%, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
  background-attachment: fixed;
}

body.ui-v2 .screen { display: block; }
body.ui-v2 #appScreen {
  display: block;
  min-height: 100vh;
  /* Legacy #appScreen had `overflow: hidden` which clipped page content
     and prevented body scroll when the editor on the right grew taller
     than the viewport. v2 lets it flow naturally — body becomes the
     authoritative scroll container. */
  overflow: visible;
}

/* ── Top command bar ───────────────────────────────────────────────────── */
body.ui-v2 .v2-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--v2-topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--v2-glass-bg);
  -webkit-backdrop-filter: var(--v2-glass-blur);
  backdrop-filter: var(--v2-glass-blur);
  border-bottom: 1px solid var(--v2-glass-border);
  z-index: 50;
}
body:not(.ui-v2) .v2-topbar,
body:not(.ui-v2) .v2-palette { display: none !important; }

/* Hide the v2 chrome (top bar + palette) when the login screen is up.
   Login is a focused, distraction-free moment; no breadcrumbs, search,
   or status pills until the operator is in. */
body.ui-v2 #appScreen.hidden ~ .v2-topbar,
body.ui-v2 #appScreen.hidden ~ .v2-palette { display: none !important; }

body.ui-v2 .v2-topbar-left {
  display: flex; align-items: center; gap: 16px;
  flex: 0 0 auto;
}
body.ui-v2 .v2-brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}
body.ui-v2 .v2-brand-logo { width: 24px; height: 24px; object-fit: contain; }
body.ui-v2 .v2-brand-text {
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
  background: linear-gradient(180deg, #fff 0%, #c8c8e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.ui-v2 .v2-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
body.ui-v2 .v2-crumb {
  padding: 4px 8px;
  border-radius: 6px;
  transition: color var(--v2-dur-fast) var(--v2-ease-fast),
              background var(--v2-dur-fast) var(--v2-ease-fast);
  cursor: default;
}
body.ui-v2 .v2-crumb-link {
  cursor: pointer; color: var(--text-dim);
}
body.ui-v2 .v2-crumb-link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
body.ui-v2 .v2-crumb-current {
  color: var(--text);
  font-weight: 600;
}
body.ui-v2 .v2-crumb-sep {
  color: var(--text-muted);
  user-select: none;
  font-size: 11px;
}

/* Search trigger — looks like a search box, opens the palette */
body.ui-v2 .v2-topbar-center {
  flex: 1 1 auto;
  display: flex; justify-content: center;
  max-width: 560px;
  margin: 0 auto;
}
body.ui-v2 .v2-search-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  height: 34px;
  padding: 0 12px;
  background: rgba(14, 14, 34, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font);
  cursor: text;
  transition: border-color var(--v2-dur-fast) var(--v2-ease-fast),
              background var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .v2-search-trigger:hover {
  border-color: var(--border-hover);
  background: rgba(14, 14, 34, 0.85);
  color: var(--text-dim);
}
body.ui-v2 .v2-search-icon {
  font-size: 14px;
  opacity: 0.6;
}
body.ui-v2 .v2-search-text {
  flex: 1;
  text-align: left;
}
body.ui-v2 .v2-search-kbd,
body.ui-v2 .v2-palette-esc {
  display: inline-flex; align-items: center;
  height: 20px;
  padding: 0 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--font);
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.ui-v2 kbd {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
}

body.ui-v2 .v2-topbar-right {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto;
}
body.ui-v2 .v2-status-pills {
  display: flex; align-items: center; gap: 6px;
}
body.ui-v2 .v2-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 13px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .v2-status-pill:hover {
  border-color: var(--border-hover);
  color: var(--text);
}
body.ui-v2 .v2-status-pill .pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px currentColor;
}
body.ui-v2 .v2-status-pill[data-state="warn"] .pill-dot { background: var(--yellow); }
body.ui-v2 .v2-status-pill[data-state="danger"] .pill-dot {
  background: var(--red);
  animation: v2-pulse 1.5s var(--v2-ease) infinite;
}

body.ui-v2 .v2-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .v2-icon-btn:hover {
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

@keyframes v2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.18); }
}

/* ── Re-frame the existing sidebar + main ──────────────────────────────── */
/* Push everything below the fixed top bar. */
body.ui-v2 #appScreen {
  padding-top: var(--v2-topbar-h);
}

/* Sidebar — pinned open at full width. Always visible, always labeled.
   The icon-rail / hover-expand pattern was rejected in user feedback;
   operators want the labels at a glance, not on hover.
   `height: auto !important` is critical — legacy CSS sets `height: 100vh`
   which (with our top: 56px) pushed the sidebar 56px past the viewport
   bottom and clipped the Sign Out button out of view. The top/bottom
   anchors compute the right height once `height: auto` lets them. */
body.ui-v2 .sidebar {
  position: fixed;
  top: var(--v2-topbar-h);
  left: 0;
  bottom: 0;
  height: auto !important;
  width: var(--v2-rail-w-open);
  padding: 12px 10px;
  background: linear-gradient(180deg, rgba(22,22,48,0.7) 0%, rgba(14,14,34,0.7) 100%);
  -webkit-backdrop-filter: var(--v2-glass-blur);
  backdrop-filter: var(--v2-glass-blur);
  border-right: 1px solid var(--v2-glass-border);
  overflow: hidden;
  z-index: 40;
  display: flex;
  flex-direction: column;
}

/* Hide the existing sidebar logo+brand block in v2 — top bar already has the brand */
body.ui-v2 .sidebar-logo { display: none; }

body.ui-v2 .sidebar-nav {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 0;
}
body.ui-v2 .nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v2-dur-fast) var(--v2-ease-fast),
              color var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .nav-item::before,
body.ui-v2 .nav-item::after { display: none; }
body.ui-v2 .nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
body.ui-v2 .nav-item.active {
  background: var(--accent-soft, rgba(124, 92, 252, 0.13));
  color: var(--purple);
}
body.ui-v2 .nav-icon {
  font-size: 16px; width: 20px; flex-shrink: 0; text-align: center;
}

/* Sidebar nav fills the available space; footer pushed to the bottom
   via flexbox so the Sign Out button is always reachable regardless
   of how many nav items appear. */
body.ui-v2 .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.ui-v2 .sidebar-footer {
  position: static;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
body.ui-v2 .sidebar-footer .btn-ghost-sm {
  width: 100%;
  justify-content: center;
}

/* Main canvas — flow naturally to the right of the pinned-open sidebar.
   Margin-left (not flex) so it respects the fixed sidebar above it. */
body.ui-v2 .main {
  margin-left: var(--v2-rail-w-open);
  padding: 28px 32px 64px;
  height: auto;
  overflow: visible;
  min-width: 0;
}

/* Soften legacy page-headers in v2 — let them feel inline, not boxy */
body.ui-v2 .page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
body.ui-v2 .page-header h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Cmd+K palette overlay ─────────────────────────────────────────────── */
body.ui-v2 .v2-palette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
body.v2-palette-open .v2-palette { display: flex; animation: v2-fade-in 200ms var(--v2-ease); }
body.v2-palette-open { overflow: hidden; }

body.ui-v2 .v2-palette-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 20, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.ui-v2 .v2-palette-panel {
  position: relative;
  width: min(640px, 92vw);
  max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--v2-glass-bg);
  -webkit-backdrop-filter: var(--v2-glass-blur);
  backdrop-filter: var(--v2-glass-blur);
  border: 1px solid var(--v2-glass-border);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-lift);
  overflow: hidden;
  animation: v2-pop-in 240ms var(--v2-ease);
}

body.ui-v2 .v2-palette-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--v2-glass-border);
}
body.ui-v2 .v2-palette-icon {
  font-size: 18px;
  color: var(--text-dim);
}
body.ui-v2 .v2-palette-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 16px;
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: -0.01em;
}
body.ui-v2 .v2-palette-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

body.ui-v2 .v2-palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
body.ui-v2 .v2-palette-section { padding: 6px 0; }
body.ui-v2 .v2-palette-section-label {
  padding: 6px 18px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
body.ui-v2 .v2-palette-empty {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
body.ui-v2 .v2-palette-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--v2-dur-instant) linear;
}
body.ui-v2 .v2-palette-item:hover,
body.ui-v2 .v2-palette-item[aria-selected="true"] {
  background: rgba(155, 127, 255, 0.10);
  color: var(--text);
}
body.ui-v2 .v2-palette-item-icon {
  width: 20px; text-align: center; font-size: 14px;
  color: var(--purple);
  flex-shrink: 0;
}
body.ui-v2 .v2-palette-item-label { flex: 1; font-weight: 500; }
body.ui-v2 .v2-palette-item-meta {
  font-size: 11px;
  color: var(--text-muted);
}

body.ui-v2 .v2-palette-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--v2-glass-border);
  font-size: 11px;
  color: var(--text-muted);
}
body.ui-v2 .v2-palette-footer kbd {
  margin-right: 4px;
}

@keyframes v2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes v2-pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Card + section primitives (used by v2 pages) ──────────────────────── */
body.ui-v2 .v2-card {
  background: linear-gradient(180deg, rgba(28,28,58,0.6) 0%, rgba(22,22,48,0.6) 100%);
  border: 1px solid var(--border);
  border-radius: var(--v2-radius-md);
  padding: 18px 20px;
  transition: border-color var(--v2-dur-fast) var(--v2-ease-fast),
              transform var(--v2-dur-fast) var(--v2-ease-fast),
              box-shadow var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .v2-card-interactive {
  cursor: pointer;
}
body.ui-v2 .v2-card-interactive:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--v2-shadow-lift);
}

/* Tab bar — the v2 carrier/broker detail uses these */
body.ui-v2 .v2-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(14,14,34,0.5);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
}
body.ui-v2 .v2-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--v2-dur-fast) var(--v2-ease-fast),
              color var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .v2-tab:hover { color: var(--text); }
body.ui-v2 .v2-tab[aria-selected="true"] {
  background: var(--bg-card-2);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* Two-pane layout primitive — used by Carriers + Brokers */
body.ui-v2 .v2-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}
body.ui-v2 .v2-split-list {
  position: sticky;
  top: calc(var(--v2-topbar-h) + 24px);
  max-height: calc(100vh - var(--v2-topbar-h) - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(28,28,58,0.6) 0%, rgba(22,22,48,0.6) 100%);
  border: 1px solid var(--border);
  border-radius: var(--v2-radius-md);
  padding: 12px;
}
body.ui-v2 .v2-split-detail {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 18px;
}
@media (max-width: 1200px) {
  body.ui-v2 .v2-split { grid-template-columns: 280px 1fr; }
}
@media (max-width: 980px) {
  body.ui-v2 .v2-split { grid-template-columns: 1fr; }
  body.ui-v2 .v2-split-list { position: static; max-height: 320px; }
}

/* Tree list (carriers nav) */
body.ui-v2 .v2-tree-filter {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin-bottom: 8px;
  background: rgba(14,14,34,0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-family: var(--font);
}
body.ui-v2 .v2-tree-filter:focus {
  outline: none;
  border-color: var(--border-hover);
}
body.ui-v2 .v2-tree-node {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--v2-dur-instant) linear;
  user-select: none;
}
body.ui-v2 .v2-tree-node:hover { background: rgba(255,255,255,0.04); color: var(--text); }
body.ui-v2 .v2-tree-node.selected {
  background: var(--accent-soft, rgba(124, 92, 252, 0.13));
  color: var(--text);
  font-weight: 600;
}
body.ui-v2 .v2-tree-caret {
  width: 12px; flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--v2-dur-fast) var(--v2-ease);
}
body.ui-v2 .v2-tree-node[data-expanded="true"] > .v2-tree-caret { transform: rotate(90deg); }
body.ui-v2 .v2-tree-children {
  margin-left: 16px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
body.ui-v2 .v2-tree-leaf {
  padding: 5px 8px 5px 22px;
  font-size: 12px;
  color: var(--text-dim);
}
body.ui-v2 .v2-tree-leaf .v2-tree-meta {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── V2 Carriers page — kill the iframe, become a real split-pane ─────── */
body.ui-v2 #page-carriers .carriers-shell {
  display: grid !important;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  height: auto !important;
  overflow: visible !important;
  align-items: start;
}
body.ui-v2 #page-carriers #carrierList {
  /* Sticky tree pane on the left — scrolls internally if it overflows
     viewport, but the page itself flows naturally. */
  position: sticky;
  top: calc(var(--v2-topbar-h) + 24px);
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - var(--v2-topbar-h) - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(28,28,58,0.6) 0%, rgba(22,22,48,0.6) 100%);
  border: 1px solid var(--border);
  border-radius: var(--v2-radius-md);
  padding: 12px;
  align-self: stretch;
  flex-shrink: initial;
}
body.ui-v2 #page-carriers #carrierEditor {
  /* Editor flows in the page scroll, no internal viewport. */
  height: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
}

/* Tree node visuals inside the carriers list */
body.ui-v2 .v2-tree {
  display: flex; flex-direction: column;
  gap: 1px;
  font-size: 13px;
}
body.ui-v2 .v2-tree-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--v2-dur-instant) linear,
              color var(--v2-dur-instant) linear;
  user-select: none;
  min-width: 0;
}
body.ui-v2 .v2-tree-row:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
body.ui-v2 .v2-tree-row.selected {
  background: var(--accent-soft, rgba(124, 92, 252, 0.13));
  color: var(--text);
}
body.ui-v2 .v2-tree-row.selected .v2-tree-name {
  color: var(--text);
  font-weight: 600;
}

body.ui-v2 .v2-tree-caret {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: transform var(--v2-dur-fast) var(--v2-ease),
              background var(--v2-dur-instant) linear;
}
body.ui-v2 .v2-tree-caret:hover { background: rgba(255,255,255,0.06); color: var(--text); }
body.ui-v2 .v2-tree-row[data-expanded="true"] > .v2-tree-caret { transform: rotate(90deg); }
body.ui-v2 .v2-tree-caret-spacer { width: 14px; flex-shrink: 0; }

body.ui-v2 .v2-tree-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
body.ui-v2 .v2-tree-dot.active   { background: var(--green);  box-shadow: 0 0 6px rgba(61,214,140,0.5); }
body.ui-v2 .v2-tree-dot.archived { background: #555566; }

body.ui-v2 .v2-tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ui-v2 .v2-tree-meta {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
body.ui-v2 .v2-tree-archived-pill {
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}

body.ui-v2 .v2-tree-children {
  display: none;
  margin-left: 18px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  margin-top: 2px;
  margin-bottom: 4px;
}
body.ui-v2 .v2-tree-row[data-expanded="true"] + .v2-tree-children { display: block; }

body.ui-v2 .v2-tree-row.is-group { padding-left: 4px; font-size: 12px; }
body.ui-v2 .v2-tree-row.is-plan  { padding-left: 22px; font-size: 12px; color: var(--text-dim); }
body.ui-v2 .v2-tree-row.is-plan .v2-tree-name { font-weight: 500; }
body.ui-v2 .v2-tree-row.is-plan:hover { background: rgba(255,255,255,0.03); }

body.ui-v2 .v2-tree-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

body.ui-v2 .v2-tree-section-divider {
  margin: 10px 0 6px;
  padding: 6px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
body.ui-v2 .v2-tree-section-divider .toggle-icon {
  font-size: 8px;
}

/* Flash applied briefly to the element we scrolled to from the tree.
   Tells the user "you landed here" without being noisy. 1.6s ease-out
   fades the purple glow and offset border. */
@keyframes v2-scroll-flash {
  0%   { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0); outline: 2px solid rgba(124, 92, 252, 0); outline-offset: 0; }
  20%  { box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.45); outline: 2px solid rgba(155, 127, 255, 0.7); outline-offset: 4px; }
  100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0); outline: 2px solid rgba(124, 92, 252, 0); outline-offset: 0; }
}
body.ui-v2 .v2-scroll-flash {
  animation: v2-scroll-flash 1.6s ease-out;
  border-radius: 8px;
}

/* Scroll-margin on scroll targets so the fixed 56px top bar doesn't
   cover the group header when we land on it from the tree. 88px =
   topbar (56) + a breathing 32px so the group name sits a comfortable
   distance below the chrome instead of flush against it.
   Applied to both the group-card and plan-row-wrap since both are
   tree-click scroll targets (v2NavigateToGroup / v2NavigateToPlan). */
body.ui-v2 .group-card,
body.ui-v2 .plan-row-wrap {
  scroll-margin-top: 88px;
}

/* ── V2 Broker Detail tabs ─────────────────────────────────────────────── */
/* Tab bar is hidden in legacy mode — only shown when v2 is active. */
.v2-broker-tabbar { display: none; }
body.ui-v2 .v2-broker-tabbar {
  display: block;
  margin: 4px 0 24px;
}

/* Section visibility filter — when a tab is active on the page-broker-detail
   container, only matching sections render. Use `display: none !important`
   to override any inline styles the existing JS may have set. */
body.ui-v2 #page-broker-detail[data-active-tab="overview"]     [data-broker-tab]:not([data-broker-tab="overview"]),
body.ui-v2 #page-broker-detail[data-active-tab="state"]        [data-broker-tab]:not([data-broker-tab="state"]),
body.ui-v2 #page-broker-detail[data-active-tab="channels"]     [data-broker-tab]:not([data-broker-tab="channels"]),
body.ui-v2 #page-broker-detail[data-active-tab="integrations"] [data-broker-tab]:not([data-broker-tab="integrations"]) {
  display: none !important;
}

/* When in v2, the detail-grid drops its 3-column layout — each tab now
   shows a focused subset of cards, so a single-column flow reads better
   than a forced grid that leaves half the row empty when a tab has only
   one or two cards. */
body.ui-v2 #page-broker-detail .detail-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.ui-v2 #page-broker-detail .detail-card,
body.ui-v2 #page-broker-detail .detail-card-wide {
  width: 100%;
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 5 — VISUAL POLISH
   ───────────────────────────────────────────────────────────────────────────
   Linear-clean: restrained motion, intentional typography, glass-where-it-
   matters, glow only as state signal. Nothing decorative.

   Principle: every effect either communicates state, eases an interaction,
   or earns its place by making content easier to read. If it doesn't, it's
   noise. Anti-pattern: bouncing buttons, rainbow gradients, parallax. We
   aren't a marketing site.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Gradient accent line under page titles ─────────────────────────────── */
body.ui-v2 .page-header {
  position: relative;
  border-bottom: 0;
  padding-bottom: 16px;
  margin-bottom: 22px;
}
body.ui-v2 .page-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(124, 92, 252, 0.45),
    rgba(0, 229, 255, 0.18),
    transparent);
}
body.ui-v2 .page-header h1 {
  background: linear-gradient(180deg, #f7f7ff 0%, #c8c2ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Card hover lift (applies to detail cards + carrier sections) ───────── */
body.ui-v2 .detail-card,
body.ui-v2 .detail-card-wide,
body.ui-v2 .checklist-card {
  transition: border-color var(--v2-dur-fast) var(--v2-ease-fast),
              box-shadow var(--v2-dur-fast) var(--v2-ease-fast),
              transform var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 .detail-card:hover,
body.ui-v2 .detail-card-wide:hover,
body.ui-v2 .checklist-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--v2-shadow-lift);
}

/* ── Input focus glow — premium feel on every text field ────────────────── */
body.ui-v2 input[type="text"]:focus,
body.ui-v2 input[type="email"]:focus,
body.ui-v2 input[type="password"]:focus,
body.ui-v2 input[type="number"]:focus,
body.ui-v2 input[type="search"]:focus,
body.ui-v2 input[type="url"]:focus,
body.ui-v2 textarea:focus,
body.ui-v2 select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow:
    0 0 0 3px rgba(124, 92, 252, 0.15),
    0 0 0 1px rgba(124, 92, 252, 0.4) inset;
}

/* ── Button micro-interactions ─────────────────────────────────────────── */
body.ui-v2 .btn {
  transition: all var(--v2-dur-fast) var(--v2-ease-fast);
  position: relative;
}
body.ui-v2 .btn:not(:disabled):hover {
  transform: translateY(-1px);
}
body.ui-v2 .btn:not(:disabled):active {
  transform: translateY(0);
  transition-duration: 60ms;
}

/* Primary buttons get a soft purple glow on hover */
body.ui-v2 .btn-primary:not(:disabled):hover {
  box-shadow:
    0 4px 12px rgba(124, 92, 252, 0.35),
    0 0 0 1px rgba(155, 127, 255, 0.5) inset;
}

/* ── Money: dollar values look like money ──────────────────────────────── */
/* Any element marked .money or .stat-value gets the emerald treatment.
   Operators see $$ and feel $$. Reserved for ACTUAL money — never decorate
   non-monetary numbers with this. */
body.ui-v2 .money,
body.ui-v2 .stat-value-money {
  color: #34d399;
  font-weight: 800;
  letter-spacing: -0.012em;
  text-shadow: 0 0 16px rgba(16, 185, 129, 0.30);
  font-feature-settings: "tnum" 1;  /* tabular numbers — columns line up */
}

/* ── Tab underline glide for the broker tab bar ────────────────────────── */
body.ui-v2 .v2-tab {
  position: relative;
}
body.ui-v2 .v2-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(124, 92, 252, 0.0),
    var(--purple),
    rgba(0, 229, 255, 0.4));
  border-radius: 2px;
  animation: v2-tab-glide 280ms var(--v2-ease);
}
@keyframes v2-tab-glide {
  from { opacity: 0; transform: scaleX(0.5); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ── Page-enter fade — every page swap eases in ────────────────────────── */
/* Opacity-only (no translateY) so nested DOM changes can't perceive-as-scroll
   if the animation ever replays. The original translate caused the page to
   visually jump up 6px when clicking panels inside the carrier editor. */
body.ui-v2 .page:not(.hidden) {
  animation: v2-page-enter 220ms var(--v2-ease);
}
@keyframes v2-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scrollbar styling for v2 (subtle, only-on-hover) ──────────────────── */
body.ui-v2 *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.ui-v2 *::-webkit-scrollbar-track {
  background: transparent;
}
body.ui-v2 *::-webkit-scrollbar-thumb {
  background: rgba(155, 127, 255, 0.18);
  border-radius: 4px;
  transition: background var(--v2-dur-fast) var(--v2-ease-fast);
}
body.ui-v2 *::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 127, 255, 0.45);
}
body.ui-v2 * { scrollbar-width: thin; scrollbar-color: rgba(155,127,255,0.25) transparent; }

/* ── Nav item active state with gradient indicator ─────────────────────── */
body.ui-v2 .nav-item.active {
  position: relative;
  background: linear-gradient(90deg,
    rgba(124, 92, 252, 0.18) 0%,
    rgba(124, 92, 252, 0.06) 100%);
}
body.ui-v2 .nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--purple), var(--cyan));
  box-shadow: 0 0 12px rgba(124, 92, 252, 0.6);
}

/* ── Top bar status pill micro-pulse on healthy state ──────────────────── */
body.ui-v2 .v2-status-pill[data-state="ok"] .pill-dot {
  animation: v2-breath 2.4s ease-in-out infinite;
}
@keyframes v2-breath {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50%      { opacity: 0.65; box-shadow: 0 0 12px currentColor; }
}

/* ── Carrier section: subtle accent on the title ──────────────────────── */
body.ui-v2 .carrier-section-title,
body.ui-v2 .detail-section-title {
  position: relative;
  padding-left: 12px;
}
body.ui-v2 .carrier-section-title::before,
body.ui-v2 .detail-section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--purple) 0%, rgba(124, 92, 252, 0.3) 100%);
}

/* ── Tree row: refined hover halo ──────────────────────────────────────── */
body.ui-v2 .v2-tree-row.selected {
  position: relative;
  box-shadow: 0 0 0 1px rgba(124, 92, 252, 0.2) inset;
}

/* ── Login screen polish (still legacy chrome but a little fresher) ─────── */
body.ui-v2 .login-box {
  border: 1px solid rgba(124, 92, 252, 0.25);
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(155, 127, 255, 0.08) inset,
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* ── Animated count-up indicator (apply via JS class .v2-count-up) ──────── */
body.ui-v2 .v2-count-up {
  display: inline-block;
  animation: v2-count-pop 600ms var(--v2-ease);
}
@keyframes v2-count-pop {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Plan-group header: swap Edit ↔ Close button based on open state ──── */
/* Default: Edit visible, Close hidden. When the group-edit form inside the
   group-card is expanded, :has() flips the swap so the top action button
   shows ✕ Close. Makes "how do I get out of here?" obvious without
   requiring the operator to scroll to the Close at the bottom of the form. */
.group-card .group-close-btn { display: none; }
.group-card:has(> [id^="group-edit-"]:not(.hidden)) .group-edit-btn  { display: none; }
.group-card:has(> [id^="group-edit-"]:not(.hidden)) .group-close-btn { display: inline-flex; align-items: center; }

/* ── Active plan indicator ─────────────────────────────────────────────── */
/* When a plan's Benefits OR KB panel is expanded, the whole row gets a
   clear "I'm the open one" treatment — purple left-bar, soft gradient
   tint, rounded border. Dense plan lists are visually noisy otherwise;
   this makes "which plan am I editing?" a two-foot-away answer.
   Uses CSS :has() (supported in Chrome/Edge/Safari/Firefox from 2023+). */
body.ui-v2 .plan-row-wrap:has(.plan-kb-section:not(.hidden)) {
  position: relative;
  background: linear-gradient(90deg,
    rgba(124, 92, 252, 0.10) 0%,
    rgba(124, 92, 252, 0.03) 35%,
    transparent 100%);
  border-left: 3px solid var(--purple);
  border-radius: 0 10px 10px 0;
  margin-left: -3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 6px 18px -8px rgba(124, 92, 252, 0.35);
  transition: background var(--v2-dur-fast) var(--v2-ease-fast),
              box-shadow var(--v2-dur-fast) var(--v2-ease-fast);
}

/* Slightly boost the plan-row contrast so the name of the active plan
   pops when scanning a long list. */
body.ui-v2 .plan-row-wrap:has(.plan-kb-section:not(.hidden)) .plan-row {
  background: rgba(124, 92, 252, 0.06);
}

/* A compact "editing" pill anchored to the right of the active plan row.
   Extra glanceable cue that survives even if the user has scrolled the
   open panel out of view. */
body.ui-v2 .plan-row-wrap:has(.plan-kb-section:not(.hidden)) .plan-row::after {
  content: 'Editing';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(124, 92, 252, 0.12);
  border: 1px solid rgba(124, 92, 252, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* ── Subtle inset highlight on every elevated surface ──────────────────── */
body.ui-v2 .detail-card,
body.ui-v2 .detail-card-wide,
body.ui-v2 .checklist-card,
body.ui-v2 .state-card,
body.ui-v2 .group-card {
  position: relative;
}
body.ui-v2 .detail-card::before,
body.ui-v2 .detail-card-wide::before,
body.ui-v2 .checklist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent);
  pointer-events: none;
  border-radius: inherit;
}