:root{
  --nav:#071a36; --nav2:#0a2348; --bg:#f4f7fb; --panel:#fff; --line:#e5ebf2;
  --text:#12203a; --muted:#7a8798; --blue:#1769e8; --green:#27b56b; --amber:#e79b1b; --red:#ec4f55; --purple:#9255db;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app{display:flex;min-height:100vh}.sidebar{width:214px;background:linear-gradient(180deg,var(--nav),#05152b);color:#fff;padding:20px 14px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}
.brand{display:flex;gap:10px;align-items:center;padding:2px 4px 22px}.brand .crown{font-size:32px;color:#ffb21c}.brand strong{display:block;font-size:20px}.brand span{font-size:11px;opacity:.82}
nav{display:grid;gap:8px}nav a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:8px;color:#dbe7f7;text-decoration:none;font-size:14px}nav a.active{background:#123c77;color:#fff;border-left:3px solid #2d8cff}
.userbox{margin-top:auto;padding:14px 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px}.userbox strong,.userbox span{display:block}.userbox span{margin-top:5px;color:#c4d1e3;font-size:12px}
main{margin-left:214px;width:calc(100% - 214px);padding:20px 28px 28px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h1{margin:0;font-size:25px}header p{margin:4px 0 0;color:var(--muted);font-size:13px}.actions{display:flex;gap:10px}.actions button{height:40px;border-radius:8px;border:1px solid #d9e2ee;background:white;padding:0 14px}.actions .primary{background:var(--blue);color:white;border:none;font-weight:600}.bell{position:relative}.bell b{position:absolute;right:-3px;top:-6px;background:var(--red);color:white;border-radius:20px;font-size:10px;padding:3px 6px}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.card{background:white;border:1px solid var(--line);border-radius:9px;padding:15px;min-height:130px;box-shadow:0 2px 6px rgba(16,42,72,.04);border-left:4px solid var(--blue)}.card.green{border-left-color:var(--green)}.card.amber{border-left-color:var(--amber)}.card.red{border-left-color:var(--red)}.card.purple{border-left-color:var(--purple)}.card.total{background:var(--blue);color:white;border-color:var(--blue)}.card small{font-weight:700;font-size:11px}.card h2{margin:12px 0 9px;font-size:28px}.card p{margin:0 0 5px;font-size:12px;font-weight:600}.card span{font-size:11px;color:var(--muted)}.card.total span{color:#dbe8ff}
.grid{display:grid;grid-template-columns:2.2fr 1fr;gap:16px}.panel{background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden}.panel-title{height:52px;padding:0 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}.panel-title strong{font-size:13px}.panel-title em{font-style:normal;background:var(--red);color:white;border-radius:20px;padding:3px 7px;font-size:10px}.panel-title span{font-size:10px;color:#5c6f87}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{font-size:10px;color:#5b6d83;text-align:left;background:#f8fafc;padding:10px 12px;border-bottom:1px solid var(--line)}td{padding:11px 12px;border-bottom:1px solid #edf1f5;white-space:nowrap}.danger{color:var(--red)}.pill{padding:5px 7px;border-radius:5px;font-size:9px;font-weight:700}.pill.overdue{background:#ffe8e8;color:#d93e43;border:1px solid #f9b3b6}.pill.pending{background:#fff3dc;color:#b97506;border:1px solid #f2c46e}.verify{background:#fff;color:var(--blue);border:1px solid #77a6f7;border-radius:5px;padding:6px 9px;font-size:10px}.panel-link{display:block;padding:13px 16px;color:var(--blue);font-size:12px;text-decoration:none}
.collection{min-height:360px}.donut-wrap{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;padding:40px 22px 34px}.donut{width:165px;height:165px;border-radius:50%;background:conic-gradient(var(--green) 0 45%,var(--amber) 45% 65%,var(--purple) 65% 85%,var(--red) 85% 100%);display:grid;place-items:center}.donut-inner{width:105px;height:105px;background:#fff;border-radius:50%;display:grid;place-content:center;text-align:center}.donut-inner strong{font-size:29px}.donut-inner span{font-size:11px;color:var(--muted)}.legend p{display:flex;gap:9px;margin:0 0 17px;font-size:11px}.legend span{display:grid}.legend b{font-weight:600;margin-top:4px}.dot{width:9px;height:9px;border-radius:50%;margin-top:2px}.green-dot{background:var(--green)}.orange-dot{background:var(--amber)}.purple-dot{background:var(--purple)}.red-dot{background:var(--red)}
.drivers{grid-column:1}.activity{grid-column:2}.bar{height:7px;background:#e8edf4;border-radius:10px;width:75px;display:inline-block;vertical-align:middle;margin-right:6px;overflow:hidden}.bar i{height:100%;display:block;background:var(--green)}tfoot td{font-weight:800;background:#fbfcfe}.activity-item{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:15px;border-bottom:1px solid #edf1f5}.icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800}.green-bg{background:#e4f8ed;color:var(--green)}.amber-bg{background:#fff2d8;color:var(--amber)}.red-bg{background:#ffe5e6;color:var(--red)}.activity-item div{display:grid;gap:3px}.activity-item b{font-size:12px}.activity-item small{font-size:10px;color:var(--muted)}.activity-item strong{font-size:12px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}.drivers,.activity{grid-column:auto}}
@media(max-width:760px){.sidebar{width:72px}.brand div:last-child,nav span,.userbox{display:none}.brand{justify-content:center}.sidebar nav a{justify-content:center;font-size:20px}.app main{margin-left:72px;width:calc(100% - 72px);padding:14px}.cards{grid-template-columns:1fr 1fr}header{align-items:flex-start;gap:12px;flex-direction:column}.actions{width:100%;overflow:auto}.card h2{font-size:22px}.donut-wrap{grid-template-columns:1fr;gap:24px}.donut{margin:auto}}