:root {
  --ink: #162238;
  --muted: #66758b;
  --line: #e5eaf1;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --blue: #2864dc;
  --blue-soft: #eaf1ff;
  --green: #158467;
  --green-soft: #e7f6f1;
  --amber: #b66a00;
  --amber-soft: #fff2da;
  --red: #bd3c54;
  --red-soft: #fdecef;
  --shadow: 0 14px 40px rgba(31, 53, 87, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px; color: #dbe6ff; background: #14213a; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#6191ff,#2864dc); color: white; font-weight: 800; box-shadow: 0 8px 20px rgba(40,100,220,.35); }
.brand strong, .brand span { display: block; }
.brand strong { color: white; font-size: 15px; }
.brand span { margin-top: 3px; font-size: 12px; color: #8fa3c9; }
nav { margin-top: 24px; display: grid; gap: 7px; }
.nav-item { padding: 12px 13px; border-radius: 10px; color: #aebddd; text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 14px; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(88,133,231,.17); }
.nav-item span { width: 20px; text-align: center; color: #6e9bff; font-size: 17px; }
.sidebar-note { margin-top: auto; padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.04); display: flex; gap: 10px; }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { color: white; font-size: 12px; }
.sidebar-note small { margin-top: 5px; color: #91a3c4; font-size: 11px; line-height: 1.4; }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #47d7ac; box-shadow: 0 0 0 4px rgba(71,215,172,.12); }

main { width: min(1500px, 100%); margin: 0 auto; padding: 30px 36px 56px; }
.topbar { margin-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 18px; letter-spacing: -.025em; }
.eyebrow { margin-bottom: 7px; color: #7c8ba2; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.update-chip { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; display: flex; align-items: center; gap: 10px; box-shadow: 0 7px 22px rgba(31,53,87,.04); }
.update-chip > span { width: 8px; height: 8px; border-radius: 50%; background: #23b789; box-shadow: 0 0 0 4px #e0f7ef; }
.update-chip div, .update-chip strong { display: block; }
.update-chip div { color: var(--muted); font-size: 10px; }
.update-chip strong { margin-top: 2px; color: var(--ink); font-size: 12px; }

.hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.metric-card { min-height: 145px; padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 84px; height: 84px; right: -30px; top: -30px; border-radius: 50%; background: currentColor; opacity: .07; }
.metric-card.primary { color: var(--blue); }
.metric-card.success { color: var(--green); }
.metric-card.warning { color: var(--amber); }
.metric-card.candidate { color: var(--red); }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-value { margin: 11px 0 8px; color: var(--ink); font-size: 38px; font-weight: 760; letter-spacing: -.055em; }
.metric-foot { color: var(--muted); font-size: 11px; line-height: 1.4; }

.insights-grid { margin-top: 17px; display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 16px; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.panel-heading, .accounts-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.info-pill { padding: 5px 8px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 9px; font-weight: 750; }
.distribution-content { margin-top: 22px; display: flex; align-items: center; gap: 30px; }
.donut { width: 142px; height: 142px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) 0 75%, var(--amber) 75% 82%, var(--red) 82% 100%); position: relative; }
.donut::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: white; }
.donut div { z-index: 1; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 27px; letter-spacing: -.04em; }
.donut span { color: var(--muted); font-size: 10px; }
.legend { flex: 1; display: grid; gap: 13px; }
.legend-row { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); }
.legend-row i { width: 9px; height: 9px; border-radius: 3px; }
.legend-row strong { color: var(--ink); font-size: 13px; }

.bar-chart { min-height: 160px; margin-top: 21px; display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 92px minmax(0,1fr) 28px; gap: 9px; align-items: center; font-size: 10px; color: var(--muted); }
.bar-track { height: 7px; border-radius: 999px; background: #edf1f6; overflow: hidden; }
.bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6d98f3,#2864dc); }
.bar-row strong { color: var(--ink); font-size: 11px; text-align: right; }
.chart-note { margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.coverage-number { margin: 26px 0 18px; }
.coverage-number strong, .coverage-number span { display: block; }
.coverage-number strong { font-size: 42px; letter-spacing: -.055em; }
.coverage-number span { color: var(--muted); font-size: 11px; }
.coverage-track { height: 10px; border-radius: 999px; background: #edf1f6; overflow: hidden; }
.coverage-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#2864dc,#6b91e7); border-radius: inherit; transition: width .5s ease; }
.coverage-scale { margin-top: 7px; display: flex; justify-content: space-between; color: #8a97a9; font-size: 8px; }

.trend-panel { margin-top: 17px; overflow: hidden; }
.trend-heading > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.trend-range { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.trend-range select { display: block; min-width: 120px; height: 36px; margin-top: 5px; padding: 0 9px; border: 1px solid #dce3ec; border-radius: 9px; color: var(--ink); background: white; font-size: 10px; text-transform: none; letter-spacing: 0; }
.trend-legend { margin-top: 21px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.trend-legend-item { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; display: flex; align-items: flex-start; gap: 9px; }
.trend-legend-item > i { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; }
.trend-legend-item span, .trend-legend-item strong, .trend-legend-item small { display: block; }
.trend-legend-item span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.trend-legend-item strong { margin-top: 3px; font-size: 18px; letter-spacing: -.035em; }
.trend-legend-item small { margin-top: 2px; color: #7a899e; font-size: 8px; }
.trend-legend-item small.up { color: var(--green); }
.trend-legend-item small.down { color: var(--red); }
.trend-chart-wrap { position: relative; margin-top: 15px; overflow-x: auto; }
#trendChart { display: block; width: 100%; height: 310px; }
.trend-tooltip { position: absolute; z-index: 2; width: 170px; padding: 10px 12px; border: 1px solid #dce3ec; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(31,53,87,.13); pointer-events: none; font-size: 9px; }
.trend-tooltip strong, .trend-tooltip span { display: block; }
.trend-tooltip strong { margin-bottom: 6px; color: var(--ink); font-size: 10px; }
.trend-tooltip span + span { margin-top: 3px; }

.accounts-panel { margin-top: 17px; padding: 0; overflow: hidden; }
.accounts-header { padding: 24px 25px 19px; }
.accounts-header > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.result-count { text-align: right; }
.result-count strong, .result-count span { display: block; }
.result-count strong { font-size: 24px; }
.result-count span { color: var(--muted); font-size: 9px; }
.filter-row { padding: 15px 25px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfd; display: grid; grid-template-columns: minmax(260px,1fr) 210px 210px; align-items: end; gap: 12px; }
.search-box { height: 42px; padding: 0 13px; border: 1px solid #dce3ec; border-radius: 10px; background: white; display: flex; align-items: center; gap: 9px; }
.search-box span { color: #8190a5; font-size: 18px; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.select-field { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.select-field select { width: 100%; height: 42px; margin-top: 4px; padding: 0 10px; border: 1px solid #dce3ec; border-radius: 10px; color: var(--ink); background: white; font-size: 11px; text-transform: none; letter-spacing: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 16px; color: #7c8ba1; background: #fafbfd; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.sort-button { margin: -7px -9px; padding: 7px 9px; border: 0; border-radius: 7px; color: inherit; background: transparent; cursor: pointer; font-size: inherit; font-weight: 700; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.sort-button:hover, .sort-button:focus-visible { color: var(--blue); background: var(--blue-soft); outline: none; }
.sort-button.active { color: var(--blue); }
.sort-indicator { display: inline-block; min-width: 10px; margin-left: 3px; font-size: 11px; line-height: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
td { padding: 14px 16px; border-bottom: 1px solid #edf0f4; color: #526177; font-size: 11px; vertical-align: middle; }
tbody tr:hover { background: #fbfcff; }
.account-cell strong, .account-cell span { display: block; }
.account-cell strong { color: var(--ink); font-size: 12px; }
.account-cell span { margin-top: 3px; color: #7d8ba0; font-size: 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.keep { color: var(--green); background: var(--green-soft); }
.badge.review { color: var(--amber); background: var(--amber-soft); }
.badge.candidate { color: var(--red); background: var(--red-soft); }
.confidence-chip { display: block; width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 750; white-space: nowrap; }
.confidence-chip.very-high { color: #8f1730; background: #f8dbe2; }
.confidence-chip.high { color: #ad354c; background: #fde9ed; }
.confidence-chip.moderate { color: #9a6815; background: #fff0d6; }
.confidence-chip.forming { color: #5d6c82; background: #edf2f8; }
.signal-list { display: flex; gap: 5px; flex-wrap: wrap; }
.signal { padding: 4px 6px; border-radius: 6px; color: #53627a; background: #edf2f8; font-size: 9px; white-space: nowrap; }
.details-button { border: 0; padding: 7px 10px; border-radius: 8px; color: var(--blue); background: var(--blue-soft); cursor: pointer; font-size: 10px; font-weight: 700; }
.details-button:hover { background: #dce8ff; }
.loading-cell { padding: 42px; text-align: center; color: var(--muted); }
.pagination { padding: 15px 22px; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.pagination button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; cursor: pointer; font-size: 10px; }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination span { color: var(--muted); font-size: 10px; }

.method-note { margin-top: 17px; padding: 17px 20px; border: 1px solid #ccdcfb; border-radius: 14px; color: #405474; background: #edf4ff; display: flex; gap: 13px; }
.method-icon { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: 12px; font-weight: 800; }
.method-note strong { color: #263b5e; font-size: 11px; }
.method-note p { margin: 5px 0 0; font-size: 10px; line-height: 1.55; }

dialog { width: min(590px, calc(100% - 30px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(12,27,54,.28); overflow: auto; }
dialog::backdrop { background: rgba(16,28,51,.55); backdrop-filter: blur(3px); }
.dialog-close { position: sticky; z-index: 2; top: 14px; float: right; margin: 14px 14px 0 0; width: 32px; height: 32px; border: 0; border-radius: 50%; color: #617087; background: #eef2f7; cursor: pointer; font-size: 19px; }
.dialog-body { padding: 30px; }
.dialog-body h2 { padding-right: 40px; font-size: 23px; }
.dialog-email { margin: 5px 0 20px; color: var(--muted); font-size: 11px; }
.reason-box { padding: 15px; border-radius: 12px; background: #f5f7fb; color: #44546a; font-size: 11px; line-height: 1.6; }
.confidence-box { margin-top: 10px; padding: 12px 15px; border: 1px solid #f1d6dc; border-radius: 12px; color: #7f2e41; background: #fff6f8; font-size: 10px; line-height: 1.55; }
.detail-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.detail-item { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.detail-item span, .detail-item strong { display: block; }
.detail-item span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.detail-item strong { margin-top: 6px; font-size: 12px; }
#errorToast { position: fixed; z-index: 10; right: 22px; bottom: 22px; max-width: 390px; padding: 13px 16px; border-radius: 11px; color: white; background: #b72f48; box-shadow: var(--shadow); font-size: 11px; display: none; }

@media (max-width: 1150px) {
  .hero-grid { grid-template-columns: repeat(2,1fr); }
  .insights-grid { grid-template-columns: 1fr 1fr; }
  .coverage-panel { grid-column: span 2; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: 17px 20px; flex-direction: row; align-items: center; justify-content: space-between; }
  .brand { padding: 0; border: 0; }
  .sidebar nav, .sidebar-note { display: none; }
  main { padding: 22px 16px 40px; }
  .topbar { align-items: flex-start; }
  .filter-row { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .coverage-panel { grid-column: auto; }
  .trend-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .topbar { display: block; }
  .update-chip { margin-top: 15px; width: fit-content; }
  .hero-grid { grid-template-columns: 1fr; }
  .distribution-content { align-items: flex-start; }
  .donut { width: 120px; height: 120px; }
  .accounts-header { display: block; }
  .result-count { margin-top: 10px; text-align: left; }
  .detail-grid { grid-template-columns: 1fr; }
  .trend-heading { display: block; }
  .trend-range { display: block; margin-top: 14px; }
  .trend-legend { grid-template-columns: 1fr; }
}