:root{--navy:#0b1728;--orange:#ffb000;--text:#122036;--muted:#667085;--line:#e7eaf0;--soft:#f6f8fb;--green:#0f9f6e}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Tahoma",sans-serif;color:var(--text);background:#f5f7fa}
a{text-decoration:none;color:inherit}.brand{direction:ltr;color:#fff;font-size:30px;font-weight:800;display:flex;align-items:flex-end;line-height:.85}
.brand .x{color:var(--orange)}.brand small{font-size:9px;font-weight:500;margin-left:-60px;transform:translateY(13px);opacity:.75}
.dashboard-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
.sidebar{background:#0b1728;color:#d9e2ec;padding:22px 18px;position:sticky;top:0;height:100vh}
.sidebar .brand{margin:8px 8px 34px}.side-nav{display:grid;gap:7px}.side-nav a{padding:12px 14px;border-radius:11px;color:#c6d0dc;font-weight:700}
.side-nav a:hover,.side-nav a.active{background:#152840;color:#fff}
.main-panel{padding:26px 30px 60px}.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.dash-top h1{margin:0;font-size:28px}.meta{color:#667085;margin-top:6px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi,.panel{background:#fff;border:1px solid #e7eaf0;border-radius:16px;padding:18px}
.kpi small{color:#667085}.kpi strong{display:block;font-size:26px;margin-top:8px}.kpi em{font-style:normal;color:#0f9f6e;font-size:12px}
.panel-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;margin-top:16px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:12px;border-bottom:1px solid #edf0f4;text-align:right;white-space:nowrap}.data-table th{font-size:12px;color:#667085}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.ok{background:#e9fbf4;color:#0f9f6e}.warn{background:#fff5d8;color:#9a6a00}.muted{background:#eef2f6;color:#475467}
.action-row{display:flex;gap:8px;flex-wrap:wrap}.action{border:1px solid #d9dee6;background:#fff;border-radius:9px;padding:8px 11px;font-weight:700}
.action.primary{background:#ffb000;border-color:#ffb000;color:#111827}.chart{height:220px;display:flex;align-items:flex-end;gap:14px;padding:18px 8px 4px;border-bottom:1px solid #e7eaf0}
.chart i{flex:1;background:linear-gradient(#ffb000,#ffd76c);border-radius:8px 8px 0 0}.ticket-list{display:grid;gap:10px}.ticket{padding:12px;border:1px solid #e7eaf0;border-radius:11px}
.ticket b{display:block}.ticket span{font-size:12px;color:#667085}
.toplink{display:inline-flex;padding:10px 12px;border:1px solid #d9dee6;border-radius:10px;background:#fff}
@media(max-width:950px){.dashboard-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.side-nav{grid-template-columns:repeat(3,1fr)}.kpi-grid{grid-template-columns:1fr 1fr}.panel-grid{grid-template-columns:1fr}}
@media(max-width:620px){.sidebar{padding:14px}.sidebar .brand{margin-bottom:20px}.side-nav{grid-template-columns:1fr 1fr}.main-panel{padding:18px 14px 45px}.kpi-grid{grid-template-columns:1fr 1fr}.dash-top{align-items:flex-start;gap:10px;flex-direction:column}.kpi strong{font-size:22px}.data-table th,.data-table td{padding:10px 8px}.brand{font-size:26px}}