*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030638;color:#fff;font-family:Arial,"Microsoft YaHei",sans-serif}.screen{min-width:1180px;min-height:100vh;padding:10px;background:radial-gradient(circle at 55% 42%,#0755a766,transparent 34%),linear-gradient(135deg,#030632,#071b71 56%,#16014e);background-size:auto,100%}header{height:58px;display:grid;grid-template-columns:280px 1fr 280px;align-items:center;border-bottom:1px solid #167ee9;background:#061452cc}header h1{text-align:center;margin:0;font-size:25px;letter-spacing:5px;text-shadow:0 0 15px #24caff}header time{text-align:right;color:#7bd8ff;font-size:13px}.brand{display:flex;gap:10px;align-items:center}.brand i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;background:linear-gradient(135deg,#087cff,#d52df2);box-shadow:0 0 15px #0cf}.brand b,.brand small{display:block}.brand small{font-size:10px;color:#58caff;letter-spacing:2px}.stats{height:130px;display:grid;grid-template-columns:1.15fr 1fr .85fr 1fr .9fr;gap:7px;padding:8px 0}.stats article{position:relative;padding:22px 24px;border:1px solid #238fff88;background:linear-gradient(125deg,#093baaee,#2911aaee)}.stats .s3{background:linear-gradient(125deg,#0751a7,#067aa9)}.stats .s4{background:linear-gradient(125deg,#40109d,#8b0ab8)}.stats strong{font-size:29px;display:block}.stats span{display:block;margin-top:17px;color:#c3dcff;font-size:14px}.stats em{position:absolute;right:15px;bottom:20px;color:#ff65c8;font-size:11px;font-style:normal}.grid{height:calc(100vh - 208px);min-height:690px;display:grid;grid-template-columns:25% 54% 21%;gap:7px}.left,.middle,.right{display:flex;flex-direction:column;gap:7px;min-width:0}.panel{border:1px solid #15b8ffb3;background:linear-gradient(145deg,#031960d9,#0f145e99);box-shadow:inset 0 0 25px #0065ff2b;overflow:hidden}.panel h2{height:34px;width:max-content;min-width:170px;margin:0 auto;padding:7px 25px;text-align:center;font-size:14px;background:linear-gradient(#0e5ccb,#081f70);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%)}.rank,.hot{height:62%}.cats,.first{height:38%}.scroll-list{height:calc(100% - 38px);padding:8px 13px}.row{height:10%;display:grid;grid-template-columns:22px 1fr 62px 98px;gap:7px;align-items:center;font-size:11px;animation:lift .5s}.row b{color:#55caff}.row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row>i{height:6px;background:#03458c}.row u{display:block;height:100%;background:linear-gradient(90deg,#0879ff,#17efff);box-shadow:0 0 7px #13ccff}.row strong{text-align:right}.cat-content{height:calc(100% - 34px);display:flex;align-items:center;padding:15px;gap:20px}.donut{width:45%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,#07104d 0 48%,transparent 50%),conic-gradient(#09d9f0 0 68%,#8c38fa 68% 81%,#fc5ac8 81% 88%,#19d4a9 88%);box-shadow:0 0 18px #0d76ff}.donut b{font-size:25px}.donut span{font-size:10px;color:#7acfff}.cat-content>div:last-child{flex:1}.cat-content p{font-size:11px;border-bottom:1px solid #389bff22;padding:6px 0;margin:0}.cat-content p i{display:inline-block;width:7px;height:7px;margin-right:7px}.cat-content p b{float:right}.c0{background:#09d9f0}.c1{background:#8c38fa}.c2{background:#fc5ac8}.c3{background:#19d4a9}.map-row{height:48%;display:grid;grid-template-columns:25% 75%;gap:4px}.today{height:100%}.metric{height:32%;display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #168def33}.metric>i{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#07104f 50%,transparent 52%),conic-gradient(#00eaff 0 70%,#17458b 70%);box-shadow:0 0 12px #00eaff}.metric .g1{background:radial-gradient(circle,#07104f 50%,transparent 52%),conic-gradient(#d334ff 0 70%,#17458b 70%)}.metric .g2{background:radial-gradient(circle,#07104f 50%,transparent 52%),conic-gradient(#ffd534 0 70%,#17458b 70%)}.metric strong,.metric small{display:block}.metric strong{font-size:17px}.metric small{font-size:10px;margin-top:8px}.metric em{color:#ff4fca;font-style:normal}.map{position:relative;overflow:hidden;background:radial-gradient(ellipse,#0862b55c,transparent 70%);border-bottom:1px solid #107bdb}.map:after{content:"";position:absolute;inset:58% 0 0;background:repeating-linear-gradient(0deg,#0097ff26 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#0097ff1f 0 1px,transparent 1px 28px);transform:perspective(250px) rotateX(55deg)}.map svg{width:100%;height:100%;position:relative;z-index:2}.russia{fill:url(#ru);stroke:#78f6ff;stroke-width:2;filter:drop-shadow(0 0 10px #0bf)}.china{fill:url(#cn);stroke:#ffd7a5;stroke-width:2.5;filter:drop-shadow(0 0 11px #f74)}.map text{fill:white;font-size:20px;font-weight:bold;letter-spacing:3px}.map #routes path{fill:none;stroke:#e4ffff;stroke-width:1.2;stroke-dasharray:5 5;animation:dash 4s linear infinite}.map #routes circle{fill:#ffe960;stroke:#0ff;stroke-width:2;filter:drop-shadow(0 0 5px #ff0)}.caption{position:absolute;left:20px;bottom:15px;z-index:3;border-left:2px solid #16e8ff;padding-left:10px}.caption b,.caption span{display:block}.caption b{font-size:12px}.caption span{font-size:8px;letter-spacing:3px;color:#3fcfff}.orders{height:21%}.table{height:29px;display:grid;grid-template-columns:1.25fr 1fr .8fr 1.2fr;align-items:center;text-align:center;font-size:10px;border-bottom:1px solid #237bee38;background:#155fb01a;animation:lift .5s}.table.head{height:26px;color:#4bd9ff;background:transparent}.trend{height:31%}.trend svg{width:100%;height:calc(100% - 38px);padding:10px}.gridlines path{fill:none;stroke:#4694ff2e}.sales,.orderline{fill:none;stroke-width:3}.sales{stroke:#11dff4}.orderline{stroke:#d13cff}.avg{text-align:center;font-size:11px;padding:10px}.avg b{color:#ffe349}.bars{height:calc(100% - 65px);display:flex;align-items:end;justify-content:space-around;border-bottom:1px solid #1776ce}.bars>div{height:100%;width:17%;display:flex;flex-direction:column;align-items:center;justify-content:end}.bars i{width:17px;min-height:8px;background:linear-gradient(#f24bff,#276fff);box-shadow:0 0 10px #9f34ff}.bars span{font-size:9px;color:#7bbef6;padding:6px 0}.status{height:6%;border:1px solid #2174ee80;color:#34efaa;font-size:10px;padding:10px}.status span{float:right;color:#74bfff}@keyframes dash{to{stroke-dashoffset:-40}}@keyframes lift{from{transform:translateY(20px);opacity:.3}to{transform:none;opacity:1}}
