:root {
  --sidebar-width: 238px;
  --sidebar-collapsed-width: 72px;
  --header-height: 76px;
  --navy-900: #061d35;
  --navy-800: #092b4c;
  --blue-600: #1266c7;
  --blue-500: #1e7ae0;
  --surface-page: #f4f8fc;
  --surface-card: #ffffff;
  --surface-muted: #eef4fa;
  --text-primary: #0a2340;
  --text-secondary: #5e7085;
  --border: #dce6f0;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 8px 24px rgba(17, 48, 78, .08);
}

body { background: var(--surface-page); color: var(--text-primary); overflow-x: hidden; }
.app-shell { grid-template-columns: var(--sidebar-width) minmax(0,1fr); transition: grid-template-columns .22s ease; }
.app-shell:has(.sidebar.collapsed) { grid-template-columns: var(--sidebar-collapsed-width) minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px 14px; gap: 14px; background: linear-gradient(180deg, var(--navy-900), #082847); transition: width .22s ease, padding .22s ease; }
.brand { min-height: 70px; padding: 0 10px 12px; display:grid; grid-template-columns: 48px 1fr; grid-template-rows:auto auto auto; column-gap: 9px; align-items:center; }
.brand .brand-logo { grid-row: 1 / span 3; width:46px; height:46px; object-fit:cover; object-position:center; border-radius:50%; box-shadow:0 4px 12px #0005; }
.brand-kicker { grid-column:2; font-size: 13px; letter-spacing:1.7px; color:#fff; }
.brand h1 { grid-column:2; font-size:20px; line-height:1; margin:2px 0; color:#fff; }
.brand p { grid-column:2; color:#a9d3fa; font-size:11px; }
.nav-section { margin: 12px 0 4px; padding:0 10px; color:#91bddc; font-size:10px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:10px 11px; color:#e7f1fa; font-size:13px; border-radius:8px; }
.nav-item::before { content: attr(data-icon); width:18px; text-align:center; font-size:16px; line-height:1; }
.nav-item:hover,.nav-item.active { background:linear-gradient(90deg,#126bd3,#0d519f); box-shadow:0 5px 12px #0002; }
.sidebar-footer { background:rgba(78,158,225,.14); border:0; border-radius:10px; padding:12px; color:#d7efff; font-size:10px; }
.sidebar-collapse { margin-top:8px; width:100%; border:0; background:transparent; color:#b6d5eb; padding:9px; text-align:left; font-size:12px; }
.sidebar.collapsed { padding-inline: 9px; overflow: visible; }
.sidebar.collapsed .brand { display:block; padding:4px 3px 16px; min-height:58px; }
.sidebar.collapsed .brand .brand-logo { width:42px; height:42px; display:block; margin:auto; }
.sidebar.collapsed .brand-kicker,.sidebar.collapsed .brand h1,.sidebar.collapsed .brand p,.sidebar.collapsed .nav-section,.sidebar.collapsed .sidebar-footer { display:none; }
.sidebar.collapsed .nav-item { justify-content:center; padding:11px 4px; font-size:0; position:relative; }
.sidebar.collapsed .nav-item::before { font-size:18px; }
.sidebar.collapsed .nav-item:hover::after { content:attr(aria-label); position:absolute; left:58px; top:4px; z-index:100; padding:7px 10px; border-radius:7px; background:#061d35; color:#fff; font-size:12px; white-space:nowrap; box-shadow:var(--shadow-card); }
.sidebar.collapsed .sidebar-collapse { text-align:center; font-size:0; }
.sidebar.collapsed .sidebar-collapse::after { content:'»'; font-size:21px; }

.main { min-width:0; }
.header { position:sticky; top:0; z-index:40; height:var(--header-height); padding:0 28px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--border); }
.menu-toggle { display:grid; place-items:center; border:0; font-size:18px; color:var(--navy-900); }
.search { max-width:500px; }
.search input { height:42px; border-color:#cbd9e6; box-shadow:0 1px 3px #0d35510a; font-size:13px; }
.connection { padding-right:18px; border-right:1px solid var(--border); }
.user-chip { border-left:0; padding-left:0; }
.avatar { width:42px; height:42px; background:#e8f0fa; color:var(--navy-900); }

.workspace { max-width:none; padding:26px 28px 38px; overflow-x:hidden; }
.page-head { gap:18px; align-items:center; }
.page-head h2 { font-size:28px; letter-spacing:-.6px; }
.page-head p { font-size:14px; }
.eyebrow { color:var(--blue-600); }
.primary { background:linear-gradient(135deg,#0e5eb7,#062d5d); border-radius:9px; padding:12px 17px; box-shadow:0 7px 16px #0759aa2a; }
.secondary { border-color:#d7e2ec; border-radius:8px; }
.card { border-color:var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
.kpis { grid-template-columns:repeat(5,minmax(145px,1fr)); gap:13px; }
.kpi { min-height:112px; padding:17px; position:relative; overflow:hidden; }
.kpi::before { content:'◈'; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#e8f3ff; color:var(--blue-600); font-size:20px; float:left; margin-right:12px; }
.kpi:nth-child(2)::before { content:'●'; background:#e2f8ee; color:#159a55; }
.kpi:nth-child(3)::before { content:'+'; background:#fff0df; color:#e47a00; }
.kpi:nth-child(4)::before { content:'!'; background:#ffe8eb; color:#d9414e; }
.kpi:nth-child(5)::before { content:'▥'; background:#f0eaff; color:#7043c7; }
.kpi-label { padding-top:2px; color:var(--text-primary); font-size:12px; }
.kpi-value { font-size:29px; margin:4px 0 2px; }
.kpi-sub { color:var(--text-secondary); }
.table-card { border-radius:var(--radius-md); overflow:auto; max-width:100%; }
.table-toolbar { background:#fff; flex-wrap:wrap; }
.toolbar-spacer { flex:1; }
.dashboard-queue { margin-top:18px; }
table { min-width:720px; }
th { background:#f5f9fd; color:#4f647a; }
td { color:#213c57; }
tbody tr:hover { background:#f6faff; }
.lead-link { color:#0c61bd; }
.badge-priority { background:#ffe8ed; color:#e02d43; border-radius:5px; padding:4px 7px; }
.status { border-radius:5px; font-size:10px; }
.status.hot { background:#ffe2e7; color:#d92e49; }.status.cold { background:#dfeeff; color:#1668b7; }.status.negative { background:#f0e7ff; color:#7140aa; }
.queue-tabs { margin-bottom:12px; }.queue-tab { border:0; background:#eaf1f7; padding:8px 13px; }.queue-tab.active { background:var(--navy-900); }
.form-grid { gap:14px; }.field label { color:#4e6278; }.field input,.field select,.field textarea,.table-toolbar input { min-height:39px; border-color:#d6e1eb; }.field input:focus,.field select:focus,.field textarea:focus { outline:3px solid #1d75d421; border-color:#2d7cce; }
.call-actions { background:#fff; border:1px solid var(--border); padding:11px 13px; border-radius:10px; box-shadow:var(--shadow-card); }
.dynamic-section { border-top:1px solid #e5edf4; padding-top:16px; margin-top:18px; }
.actions { position:sticky; bottom:10px; z-index:10; background:#ffffffee; backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:10px; padding:10px; margin-top:24px; }
.prefill-grid { border-radius:var(--radius-md); }.summary-item { padding:12px 14px; }
.report-filters,.audit-details { background:#f7fafe; border:1px solid var(--border); border-radius:10px; padding:14px; }

#toast-root { top:calc(var(--header-height) + 16px); bottom:auto; right:22px; max-width:380px; z-index:90; }
.toast { border-radius:10px; min-width:260px; box-shadow:0 12px 28px #09284435; border-left:4px solid #8dbfff; }
.toast.success { border-left-color:#7de0ad; }.toast.error { border-left-color:#ffabb4; }.toast.warning { background:#805b16; border-left-color:#ffd37d; }
.app-modal-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:rgba(4,20,38,.45); backdrop-filter:blur(3px); }
.app-modal { width:min(420px,100%); padding:22px; border-radius:14px; background:#fff; box-shadow:0 22px 60px #061d3560; }.app-modal h3{margin:0 0 8px;font:700 19px Manrope}.app-modal p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.insight-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.insight-card { padding:17px; }.insight-card h3 { margin:0 0 12px; font:700 14px Manrope; }.insight-row { display:grid; grid-template-columns:minmax(0,1fr) 74px 22px; gap:8px; align-items:center; font-size:11px; margin:9px 0; }.insight-bar { height:8px; background:#e7eef5; border-radius:999px; overflow:hidden; }.insight-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#277fd8,#72bcff); }.insight-row:nth-child(3n) i{background:linear-gradient(90deg,#1ca967,#83ddab)}.insight-row:nth-child(4n) i{background:linear-gradient(90deg,#8956d6,#c0a5f2)}

@media (max-width:1200px){.workspace{padding:22px}.kpis{grid-template-columns:repeat(3,1fr)}.insight-grid{grid-template-columns:repeat(2,1fr)}.header{padding-inline:20px}.table-card{overflow:auto}}
@media (max-width:860px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed; left:-260px; z-index:110; width:238px; transition:left .22s ease}.sidebar.open{left:0}.app-shell:has(.sidebar.collapsed){grid-template-columns:1fr}.header{height:64px}.workspace{padding:18px}.page-head{align-items:flex-start;flex-direction:column}.kpis{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.span-3{grid-column:span 2}.connection{display:none}.header .secondary{display:none}}
@media (max-width:560px){.workspace{padding:14px}.kpis,.insight-grid,.form-grid{grid-template-columns:1fr}.span-3{grid-column:span 1}.page-head h2{font-size:24px}.header{padding:0 14px}.search{max-width:none}.user-chip>div:last-child{display:none}.kpi{min-height:96px}.actions{bottom:6px;justify-content:stretch}.actions button{flex:1}#toast-root{top:76px;left:12px;right:12px}.toast{min-width:0;max-width:none}}