.shell,
.shell:is(.carrier-portal, .research-shell),
#app:has(.shell) ~ #dialog {
  --canvas: #fff;
  --surface: #fff;
  --ink: #0b1c35;
  --muted: #4c5f7a;
  --line: #dce5f3;
  --control-line: #a8b8ca;
  --nav: #0b1c35;
  --nav-muted: #4c5f7a;
  --nav-line: #dce5f3;
  --nav-hover: #172f50;
  --accent: #1d57d2;
  --accent-hover: #154bb6;
  --workspace-tint: #edf3fe;
  --panel-soft: #f7f9fc;
  --control-hover: #e1ecff;
  --hero-fill: #f7f9fc;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}

.shell,
.shell.research-shell {
  background: var(--canvas);
  color: var(--ink);
}

.shell .sidebar,
.shell.carrier-portal .sidebar {
  --nav-muted: var(--muted);
  --nav-line: var(--line);
  border-inline-end: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
}

.shell .sidebar .brand { margin-bottom: 20px; letter-spacing: -.025em; }

.shell .sidebar .workspace { background: var(--surface); }
.shell .workspace-avatar,
.shell.carrier-portal .workspace-avatar {
  border-radius: 50%;
  background: var(--workspace-tint);
  color: var(--accent-hover);
}

.shell .sidebar .eyebrow { letter-spacing: .07em; font-weight: 700; }
.shell .sidebar .nav-item { border-radius: 10px; color: var(--ink); }
.shell .sidebar .nav-item:hover { background: var(--control-hover); color: var(--ink); }
.shell .sidebar .nav-item[aria-current="page"] {
  background: var(--workspace-tint);
  color: var(--accent-hover);
  font-weight: 700;
}

.shell .sidebar .nav-item .icon { color: currentColor; }
.shell .sidebar :focus-visible,
.shell :focus-visible,
#app:has(.shell) ~ #dialog :focus-visible { outline-color: var(--accent); }

.shell .sidebar .workspace-wallet {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
.shell .sidebar :is(.wallet-kicker, .wallet-revealed, .wallet-count span) { color: var(--muted); }
.shell .sidebar .wallet-count { font-size: 1.65rem; letter-spacing: -.025em; }
.shell .sidebar .workspace-wallet .btn {
  border-color: var(--line);
  background: var(--workspace-tint);
  color: var(--accent-hover);
}
.shell .sidebar .workspace-wallet .btn:hover { background: var(--control-hover); }

.shell .header { border-bottom: 1px solid var(--line); background: var(--surface); }
.shell .header-balance { color: var(--ink); }
.shell .demo-label { color: var(--accent-hover); background: var(--panel-soft); }
.shell .mobile-nav { border-color: var(--control-line); }
.shell .header .workspace-switch { background: var(--panel-soft); }

.shell .hero { border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink); }
.shell .hero::after { content: none; }
.shell .hero :is(.eyebrow, p) { color: var(--muted); }
.shell :is(.hero h1, .crm-heading h1, .catalog-intro h1, .dashboard-workspace-name) {
  font-weight: 730;
  letter-spacing: -.038em;
}

.shell .card { border-color: var(--line); }
.shell .dashboard-summary { background: var(--panel-soft); }
.shell .dashboard-shortcut span { background: var(--panel-soft); color: var(--nav); }
.shell .dashboard-shortcut:hover span { background: var(--workspace-tint); color: var(--accent); }
.shell .dashboard-shortcut:focus-visible span { background: var(--workspace-tint); }

.shell :is(.header-balance, .dashboard-credit strong, .dashboard-totals dd, .wallet-count, .stat strong,
  .research-metric-primary strong, .crm-summary dd, .pack strong, .crm-timestamp, td) {
  font-variant-numeric: lining-nums tabular-nums;
}
.shell :is(.dashboard-credit strong, .stat strong) { color: var(--nav); }

.shell :is(.btn.primary, .btn.dark),
#app:has(.shell) ~ #dialog :is(.btn.primary, .btn.dark) { border-radius: 999px; }

.shell :is(.header-actions, .dashboard-credit) .btn.primary,
.shell .sidebar .sidebar-find,
.shell .btn.dark,
#app:has(.shell) ~ #dialog .btn.dark {
  border-color: var(--nav);
  background: var(--nav);
  color: #fff;
}

.shell :is(.header-actions, .dashboard-credit) .btn.primary:hover,
.shell .sidebar .sidebar-find:hover,
.shell .btn.dark:hover,
#app:has(.shell) ~ #dialog .btn.dark:hover {
  border-color: var(--nav-hover);
  background: var(--nav-hover);
}

.shell th,
.shell .research-workspace #results th,
.shell .crm-table th {
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 680;
}
.shell .crm-table td { font-size: .9rem; }
.shell .crm-table tbody tr:nth-child(even) { background: #f8fafd; }
.shell .crm-table tbody tr:is(:hover, :focus-within, .selected) { background: var(--workspace-tint); }
.shell .crm-table .crm-driver-link { color: var(--nav); }
.shell .crm-table .crm-driver-link:hover { color: var(--accent-hover); }
.shell .crm-table .crm-driver-identity .avatar,
#app:has(.shell) ~ #dialog .lead-identity .avatar { border-radius: 50%; }
.shell .crm-disposition[data-tone="no-answer"] {
  --pill-bg: #eff3f8;
  --pill-border: #c6d4e4;
  --pill-ink: #304663;
  --pill-dot: #526c8d;
}

#app:has(.shell) ~ #dialog .lead-tabs { background: var(--panel-soft); }
#app:has(.shell) ~ #dialog .lead-tabs button[aria-selected="true"] {
  border-color: #a8c8f1;
  background: var(--workspace-tint);
  color: var(--accent-hover);
}

@media (max-width: 780px) {
  .shell .mobile-brand {
    display: flex;
    align-items: center;
    padding-inline: clamp(16px, 3vw, 40px);
    background: var(--panel-soft);
    border-bottom: 1px solid var(--line);
  }
  .shell .mobile-brand .brand-logo { width: 112px; }
}

@media (max-width: 480px) {
  .shell .main { padding-inline: 13px; }
  .shell .mobile-nav { min-height: 40px; }
  .shell .dashboard-shortcut { min-height: 63px; }
}