:root{--navy:#0c1b2a;--navy2:#13283b;--blue:#2f7df6;--cyan:#11b8c8;--green:#25b47e;--orange:#f49a45;--red:#ef6a6a;--ink:#172433;--muted:#6e7c8e;--line:#e4eaf0;--bg:#f4f7fa;--card:#fff;--shadow:0 9px 28px rgba(23,36,51,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink)}button,select{font:inherit}.app-shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--navy),#091522);color:#fff;padding:26px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:10}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;padding:0 8px 30px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:linear-gradient(145deg,var(--blue),var(--cyan));border-radius:11px;font-weight:800}.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{font-size:10px;color:#9eb0c2;margin-top:4px;letter-spacing:.02em}.sidebar nav{display:grid;gap:7px}.nav-item{display:flex;align-items:center;gap:11px;border:0;color:#aab8c7;background:transparent;padding:13px 14px;border-radius:9px;text-align:left;cursor:pointer;font-size:13px;font-weight:600}.nav-item span{font-size:17px;width:19px;text-align:center}.nav-item:hover,.nav-item.active{background:#20374c;color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--cyan)}.sidebar-note{margin-top:auto;display:flex;gap:10px;align-items:flex-start;padding:14px 10px;background:rgba(255,255,255,.05);border-radius:10px}.sidebar-note strong,.sidebar-note small{display:block}.sidebar-note strong{font-size:11px}.sidebar-note small{font-size:9px;color:#91a5b8;margin-top:3px;line-height:1.4}.status-dot{width:8px;height:8px;border-radius:50%;background:#3fd596;box-shadow:0 0 0 4px rgba(63,213,150,.12);margin-top:3px}main{min-width:0}.topbar{height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;gap:20px;position:sticky;top:0;z-index:8}.topbar h1{font-size:22px;margin:2px 0}.eyebrow,.label{font-size:9px;letter-spacing:.16em;font-weight:800;color:#7b8998;margin:0;text-transform:uppercase}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.period-select{font-size:9px;color:#738295;text-transform:uppercase;font-weight:700;letter-spacing:.08em}.period-select select{display:block;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 30px 8px 10px;margin-top:3px;font-size:12px;color:var(--ink);text-transform:none;letter-spacing:0}.primary-button{background:var(--blue);color:#fff;text-decoration:none;padding:12px 16px;border-radius:8px;font-size:12px;font-weight:700;box-shadow:0 6px 15px rgba(47,125,246,.22)}.primary-button:hover{background:#206be0}.menu-button{display:none;border:0;background:transparent;font-size:22px}.content{padding:24px 30px 18px;max-width:1500px;margin:auto}.demo-banner{background:linear-gradient(105deg,#122b40,#164a63);color:#fff;border-radius:13px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;box-shadow:var(--shadow)}.demo-banner strong,.demo-banner span{display:block}.demo-banner strong{font-size:14px}.demo-banner div>span{font-size:11px;color:#bad0dd;margin-top:5px}.live-pill{font-size:10px!important;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:8px 11px}.live-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#49dfa5;margin-right:6px}.view{display:none}.view.active{display:block;animation:fade .25s ease}@keyframes fade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:15px}.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 4px 15px rgba(23,36,51,.035)}.kpi-top{display:flex;justify-content:space-between;align-items:flex-start}.kpi-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:#edf4ff;color:var(--blue);font-weight:800}.kpi h3{font-size:10px;color:#768597;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.kpi strong{font-size:25px;letter-spacing:-.04em}.kpi-footer{display:flex;justify-content:space-between;margin-top:9px;font-size:9px;color:#8794a3}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.grid{display:grid;gap:15px;margin-bottom:15px}.two-thirds{grid-template-columns:1.7fr 1fr}.thirds{grid-template-columns:repeat(3,1fr)}.halves{grid-template-columns:1fr 1fr}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 4px 15px rgba(23,36,51,.035);min-width:0}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:20px}.card h2{font-size:14px;margin:5px 0 0}.legend{font-size:9px;color:#8492a1}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4px 0 9px}.legend .blue{background:var(--blue)}.legend .green{background:var(--green)}.line-chart{height:250px;position:relative}.line-chart svg{width:100%;height:100%;overflow:visible}.chart-grid{stroke:#edf1f5;stroke-width:1}.chart-label{fill:#94a0ad;font-size:9px}.chart-area{fill:url(#areaGradient)}.chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-point{stroke:#fff;stroke-width:2}.donut-wrap{display:grid;place-items:center;gap:17px}.donut{width:158px;height:158px;border-radius:50%;display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;inset:28px;background:#fff;border-radius:50%}.donut>div{z-index:1;text-align:center}.donut strong,.donut span{display:block}.donut strong{font-size:22px}.donut span{font-size:9px;color:var(--muted);margin-top:4px}.donut-legend{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.donut-legend p{font-size:9px;color:var(--muted);margin:0;display:flex;align-items:center;justify-content:space-between}.donut-legend p span:first-child{display:flex;align-items:center;gap:5px}.swatch{width:7px;height:7px;border-radius:2px}.big-stat strong,.big-stat span{display:block}.big-stat strong{font-size:30px;margin-top:8px}.big-stat span{font-size:10px;color:var(--muted);margin-top:4px}.progress{height:6px;background:#edf1f4;border-radius:99px;margin:20px 0 11px;overflow:hidden}.progress span{display:block;height:100%;background:var(--blue);border-radius:99px}.progress.teal span{background:var(--cyan)}.progress.orange span{background:var(--orange)}.card>p.positive,.card>p.muted{font-size:10px;margin:0}.muted{color:var(--muted)}.bar-list{display:grid;gap:17px}.bar-row{display:grid;grid-template-columns:130px 1fr 70px;align-items:center;gap:12px;font-size:10px}.bar-row strong{font-size:10px}.bar-track{height:14px;background:#eff3f6;border-radius:3px;overflow:hidden}.bar-track span{height:100%;display:block;border-radius:3px}.weekday-chart{height:230px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding-top:20px}.day{height:100%;display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.day .column{width:70%;max-width:32px;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:5px 5px 2px 2px;min-height:5px}.day strong{font-size:9px}.day span{font-size:9px;color:var(--muted)}.table-card{margin-bottom:15px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:650px}th{text-align:left;color:#8190a0;font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:10px;border-bottom:1px solid var(--line)}td{font-size:10px;padding:13px 10px;border-bottom:1px solid #edf1f4}tbody tr:last-child td{border-bottom:0}.badge{display:inline-block;padding:5px 8px;border-radius:99px;background:#e8f8f1;color:#138357;font-weight:700;font-size:8px}.badge.warn{background:#fff3e7;color:#b2651b}.small-note{font-size:9px;color:var(--muted)}.horizontal-bars{display:grid;gap:16px}.hbar-head{display:flex;justify-content:space-between;font-size:10px;margin-bottom:6px}.hbar-track{height:8px;background:#eef2f5;border-radius:99px;overflow:hidden}.hbar-track span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:99px}.insight-card{background:linear-gradient(145deg,#102538,#173e57);color:#fff}.insight-card .label{color:#75d8df}.insight-card h2{font-size:19px;margin-bottom:22px}.insight{display:grid;grid-template-columns:31px 1fr;gap:12px;margin:16px 0}.insight>span{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:rgba(255,255,255,.09);color:#66d7de;font-size:10px;font-weight:800}.insight p{font-size:9px;line-height:1.5;color:#b6c8d3;margin:0}.insight strong{display:block;color:#fff;font-size:10px;margin-bottom:3px}.funnel{display:grid;gap:10px;justify-items:center;padding:5px 0}.funnel-step{height:43px;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-radius:6px;font-size:10px}.funnel-step strong{font-size:12px}.opportunity-list{margin-top:20px}.opportunity-list p{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:11px 0;margin:0;font-size:10px}.opportunity-list p:last-child{border:0}footer{display:flex;justify-content:space-between;padding:12px 2px 0;color:#8a97a5;font-size:9px}footer a{color:var(--blue);text-decoration:none;font-weight:700}
@media(max-width:1050px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.two-thirds,.thirds{grid-template-columns:1fr}.topbar-actions .primary-button{display:none}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-270px;transition:left .2s;width:252px}.sidebar.open{left:0;box-shadow:15px 0 35px rgba(0,0,0,.25)}.topbar{padding:0 18px;height:76px}.menu-button{display:block}.topbar h1{font-size:17px}.eyebrow{display:none}.content{padding:16px}.demo-banner{align-items:flex-start;gap:15px}.live-pill{display:none!important}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:14px}.kpi strong{font-size:20px}.halves{grid-template-columns:1fr}.period-select{display:none}.bar-row{grid-template-columns:100px 1fr 54px}}
@media(max-width:450px){.kpi-grid{grid-template-columns:1fr}.demo-banner{padding:16px}.donut-legend{grid-template-columns:1fr}}