*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f5f7fb;color:#172033}
:root{--navy:#172554;--purple:#7c3aed;--blue:#2563eb;--green:#16a34a;--orange:#f97316;--red:#dc2626;--pink:#db2777;--cyan:#0891b2;--border:#e2e8f0;--muted:#64748b}
.layout{display:flex;min-height:100vh}
.sidebar{width:255px;background:var(--navy);color:#fff;position:fixed;inset:0 auto 0 0;padding:20px 14px;overflow:auto}
.brand{font-size:18px;font-weight:900;padding:9px 10px 20px;border-bottom:1px solid #33447a}
.brand small{display:block;color:#67e8f9;font-size:10px;letter-spacing:1px;margin-top:5px}
.nav-title{font-size:10px;font-weight:800;color:#9fb0d7;margin:19px 10px 8px;letter-spacing:1px}
.nav a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#dbe5ff;font-size:12px;font-weight:700;padding:10px 11px;border-radius:8px;margin:2px 0}
.nav a:hover,.nav a.active{background:var(--purple);color:#fff}
.icon{width:25px;height:25px;border-radius:6px;background:#33447a;display:grid;place-items:center;font-size:11px;font-style:normal}
.active .icon{background:#5b21b6}
.main{margin-left:255px;width:calc(100% - 255px)}

body{background:linear-gradient(120deg,#edf6ff,#f6faff);color:#172554}
.content{padding:18px 20px 28px;max-width:1800px;margin:auto}.revenue-header{display:flex;justify-content:space-between;align-items:start}.revenue-header h1{font-size:28px;margin:0;font-weight:850}.revenue-header p{font-size:12px;color:#64748b;margin:3px 0 12px}.user{display:flex;align-items:center;gap:8px;font-size:10px}.user small{display:block;color:#64748b}.avatar{background:#7c00ec;color:white;border-radius:50%;padding:10px}
button,select,input{font:inherit;border:1px solid #cddfed;border-radius:5px;background:white;color:#172554;padding:7px 11px}button{cursor:pointer}button:hover{background:#eff6ff}button:focus-visible,a:focus-visible{outline:3px solid #a78bfa}button:disabled{opacity:.5;cursor:default}.period{display:flex;justify-content:flex-end;gap:8px;margin:-8px 0 15px;font-size:11px;flex-wrap:wrap}.quick{display:flex;gap:5px}.quick .active{background:#0767ff;color:white}#customRange{margin:10px 0;display:flex;gap:10px;font-size:12px;justify-content:flex-end}#customRange[hidden]{display:none}#revenueError{color:#b91c1c;background:#fff1f2;padding:14px;border-radius:8px}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}.kpi{display:flex;gap:10px;border:1px solid #e0ebf6;border-radius:9px;background:#eaf6ff;padding:14px 10px;box-shadow:0 3px 10px #bfd9ed20}.kpi-icon{background:#c1e1ff;color:#087aff;border-radius:7px;font-size:25px;padding:5px;height:42px}.kpi label{display:block;font-size:10px;font-weight:750;color:#2563eb;min-height:24px}.kpi strong{display:block;font-size:23px;color:#172554;white-space:nowrap}.kpi small{display:block;font-size:10px;color:#64748b}.change{display:block;font-size:11px;margin:5px 0 2px}.up{color:#16a34a}.down{color:#dc2626}.kpi:nth-child(2){background:#effdf5}.kpi:nth-child(3){background:#fff7ea}.kpi:nth-child(4){background:#f5edff}.kpi:nth-child(5),.kpi:nth-child(6){background:#fff0f5}.kpi:nth-child(2) label{color:#16a34a}.kpi:nth-child(3) label{color:#f97316}.kpi:nth-child(4) label{color:#7c3aed}.kpi:nth-child(5) label,.kpi:nth-child(6) label{color:#e91e63}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.panel{background:#ffffffed;border:1px solid #e5edf6;border-radius:10px;padding:12px;margin-bottom:12px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.panel h2,dialog h2{font-size:17px;margin:0;font-weight:800}.panel h2 i{font-style:normal;color:#8037f3;margin-right:8px}.outline{font-size:10px;color:#0767e8;border-color:#8cbcf5}.panel select{font-size:11px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left}th{background:#edf5fc;color:#263c62;font-size:9px;text-transform:uppercase;padding:9px 8px;white-space:nowrap}td{font-size:11px;padding:8px;border-bottom:1px solid #eaf0f7}td b{font-weight:700}.share{display:flex;align-items:center;gap:8px;font-size:10px}.share>span{width:48px;height:6px;background:#eef3f9;border-radius:8px}.share i{display:block;height:6px;background:#1286fc;border-radius:8px}.package-icon{display:inline-block;background:#ff9800;color:white;border-radius:4px;margin-right:8px;padding:2px}.color-1{background:#139fff}.color-2{background:#12b958}.color-3{background:#8228fa}.color-4{background:#f521b1}.revenue-chart{overflow:auto}.revenue-chart svg{width:100%;min-width:540px;min-height:210px;display:block}.revenue-chart text{font:10px Segoe UI,Arial;fill:#64748b}.legend{display:flex;justify-content:center;gap:18px;font-size:10px;margin-top:8px}.success{background:#d7fbe5;color:#168348;border-radius:4px;padding:4px 9px;font-size:10px}.view{color:#0668ed;border:0;background:transparent;padding:0;font-size:11px;font-weight:700}.empty{text-align:center;color:#64748b;padding:25px}.revenue-pages{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;font-size:11px}dialog{border:1px solid #dce7f5;border-radius:12px;padding:22px;width:min(760px,94vw);max-height:85vh;overflow:auto;color:#172554}dialog::backdrop{background:#17255466}dialog dl{display:grid;grid-template-columns:1fr 2fr;gap:14px;font-size:13px}dialog dd{margin:0}dialog p{font-size:12px}
@media(max-width:1400px){.kpis{grid-template-columns:repeat(3,1fr)}.kpi label{min-height:0}.grid2{grid-template-columns:1.2fr 1fr}.kpi strong{font-size:22px}}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}.period{margin-top:8px}.content{padding:15px}}
@media(max-width:800px){.sidebar{width:70px}.brand{font-size:0}.brand small,.nav-title,.nav a span{display:none}.nav a{justify-content:center}.main{margin-left:70px;width:calc(100% - 70px)}.kpis{grid-template-columns:repeat(2,1fr)}table{min-width:600px}}
@media(max-width:500px){.user{display:none}.kpi{padding:10px}.kpi-icon{display:none}.kpi strong{font-size:20px}.quick{flex-wrap:wrap}#customRange{flex-wrap:wrap}.revenue-header h1{font-size:24px}}