:root{
  --navy:#12224a;
  --blue:#1b6e9c;
  --coral:#ee5d67;
  --ink:#202733;
  --muted:#6d7785;
  --line:#e4e9ef;
  --bg:#f5f7fa;
  --white:#fff;
  --green:#178456;
  --amber:#a56d18;
  --shadow:0 12px 30px rgba(18,34,74,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy)}
.logo-mark{width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.logo-mark svg{width:34px;height:34px}
.logo-text{line-height:1.02}.logo-text small{display:block;font-weight:600;color:var(--coral);font-size:12px;margin-top:3px}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:800}
.btn{border:1px solid transparent;border-radius:9px;padding:10px 14px;font-weight:800}
.btn-primary{background:var(--coral);color:white}.btn-primary:hover{background:#d94e58}
.btn-secondary{background:#fff;border-color:#d7dee7;color:var(--navy)}
.chip{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:800;background:#eef2f6;color:#596675}
.chip.ok{background:#e8f7f0;color:var(--green)}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px}
.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.panel h3{margin:4px 0 0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi span{font-size:12px;color:var(--muted);font-weight:700}.kpi strong{font-size:28px;color:var(--navy);display:block;margin:7px 0 3px}.kpi small{color:#8a95a2}
.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:11px;color:#718090;text-transform:uppercase;letter-spacing:.05em}.data-table td{padding:13px 10px;border-bottom:1px solid var(--line)}.data-table tr:last-child td{border-bottom:0}
.table-wrap{overflow:auto}
select,input{border:1px solid #d7dee7;background:#fff;border-radius:9px;padding:10px;color:var(--ink)}
label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#5e6976}
.muted{color:var(--muted)}
.mobile-only{display:none}

/* Root */
.portal-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.portal-brand{background:linear-gradient(145deg,#112149,#0e5d8c);color:#fff;padding:7vw;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}
.portal-brand .logo{color:white}.portal-brand .logo-mark{border:0}
.portal-brand h1{font-size:48px;line-height:1.05;max-width:620px;margin:40px 0 18px}.portal-brand p{font-size:17px;line-height:1.65;color:#d6e3ef;max-width:620px}
.portal-login{padding:7vw;display:flex;align-items:center;justify-content:center}.role-card-wrap{width:min(560px,100%)}.role-card-wrap h2{font-size:30px;margin:6px 0 8px}.role-card-wrap>p{margin:0 0 24px;color:var(--muted)}
.role-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow);transition:.2s}.role-card:hover{transform:translateY(-2px);border-color:#c4d3e0}.role-card strong{display:block;color:var(--navy);font-size:17px}.role-card span{display:block;color:var(--muted);font-size:13px;margin-top:6px}

/* Admin */
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:270px;background:linear-gradient(180deg,#101b3d,#15254e);color:white;position:fixed;inset:0 auto 0 0;padding:26px 18px;display:flex;flex-direction:column;z-index:20}
.sidebar .logo{color:#fff;padding:0 7px 22px;border-bottom:1px solid rgba(255,255,255,.12)}
.nav-label{font-size:10px;letter-spacing:.14em;color:#9cb0d4;margin:20px 10px 8px;font-weight:800}
.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#cad5e9;text-align:left;padding:12px 14px;border-radius:10px;font-weight:700}.nav button.active,.nav button:hover{background:#fff;color:var(--navy)}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:16px 8px 0;font-size:11px;color:#9fb0cf}
.admin-main{margin-left:270px;width:calc(100% - 270px)}
.topbar{height:86px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 32px;position:sticky;top:0;z-index:10}
.topbar h1{font-size:21px;margin:3px 0 0}.top-actions{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.admin-content{padding:28px 32px 40px}.view{display:none}.view.active{display:block}.hero-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px}.hero{background:linear-gradient(135deg,#132653,#0f6595);color:#fff}.hero .eyebrow{color:#b3d7ef}.hero h2{font-size:29px;max-width:700px;margin:9px 0}.hero p{max-width:740px;color:#d9e5ef;line-height:1.6}.row{display:flex;gap:10px;flex-wrap:wrap}.mt{margin-top:18px}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.metric-list{display:grid}.metric-list div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.metric-list div:last-child{border-bottom:0}.toolbar{display:flex;gap:10px;margin-bottom:16px}.toolbar input{flex:1}.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.status-list{display:grid;gap:10px}.status-row{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:14px}.dot{width:9px;height:9px;border-radius:50%;background:#28b77c}.dot.amber{background:#e0a034}

/* Client */
.client-body{background:#f2f5f8}
.client-header{background:#fff;border-bottom:1px solid var(--line);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}.client-header-actions{display:flex;gap:9px}
.client-wrap{width:min(1180px,calc(100% - 36px));margin:26px auto 50px}
.client-hero{background:linear-gradient(135deg,#132653,#0f6595);color:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow)}.client-hero .eyebrow{color:#b9d9ef}.client-hero h1{font-size:34px;margin:8px 0 8px}.client-hero p{margin:0;color:#d8e5ef}.client-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.client-meta span{font-size:12px;background:rgba(255,255,255,.12);padding:7px 10px;border-radius:999px}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:26px 0 12px}.section-title h2{font-size:24px;margin:0}.section-title p{margin:4px 0 0;color:var(--muted);font-size:13px}
.performance-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}.metric-block{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.metric-box{background:#f6f8fa;border:1px solid var(--line);border-radius:12px;padding:16px}.metric-box span{color:var(--muted);font-size:12px}.metric-box strong{display:block;color:var(--navy);font-size:24px;margin-top:5px}
.breakdown{display:grid;gap:10px}.break-row{display:grid;grid-template-columns:130px 1fr 60px;gap:12px;align-items:center;font-size:13px}.bar{height:8px;border-radius:99px;background:#edf1f5;overflow:hidden}.bar i{height:100%;display:block;background:linear-gradient(90deg,var(--blue),var(--coral));border-radius:99px}
.call-card{padding:0}.call-card .panel-head{padding:22px 22px 0}.call-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.call-summary div{padding:16px 22px;border-right:1px solid var(--line)}.call-summary div:last-child{border-right:0}.call-summary span{font-size:11px;color:var(--muted);display:block}.call-summary strong{display:block;color:var(--navy);font-size:22px;margin-top:4px}
.takeaways{background:#f8fafc;border-radius:12px;padding:16px;margin-top:14px}.takeaways h4{margin:0 0 8px}.takeaways p{margin:0;line-height:1.6;color:#596675;font-size:13px}
.footer{padding:24px 0 0;color:#8893a0;font-size:11px;text-align:center}

@media(max-width:1000px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}.hero-grid,.dashboard-grid,.performance-grid{grid-template-columns:1fr}.filter-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .sidebar{display:none}.admin-main{margin-left:0;width:100%}.portal-shell{grid-template-columns:1fr}.portal-brand{min-height:auto;padding:42px 28px}.portal-brand h1{font-size:36px}.portal-login{padding:42px 28px}.topbar{padding:0 18px}.admin-content{padding:22px 18px}.mobile-only{display:inline-flex}
}
@media(max-width:620px){
  .kpi-grid{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:1fr}.toolbar{flex-direction:column}.client-header{padding:14px 16px}.client-header-actions .btn-secondary{display:none}.client-wrap{width:min(100% - 22px,1180px)}.client-hero{padding:22px}.client-hero h1{font-size:28px}.call-summary{grid-template-columns:1fr}.call-summary div{border-right:0;border-bottom:1px solid var(--line)}.call-summary div:last-child{border-bottom:0}.break-row{grid-template-columns:110px 1fr 50px}
}