@import "tailwindcss";
:root{--bg:#0b0d13;--panel:#151925;--panel2:#191e2c;--line:#272d3d;--muted:#81899d;--text:#f3f6fc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#22293a 0,transparent 42%),var(--bg);color:var(--text);font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;letter-spacing:0;min-height:100vh}main{max-width:1440px;margin:auto;padding:42px 36px 26px}header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.eyebrow,.panelHead p{color:#5ba4ff;font-size:11px;font-weight:700;letter-spacing:1.4px;margin:0 0 7px}h1{font-size:27px;line-height:1.2;margin:0 0 8px}.subtitle{margin:0;color:var(--muted);font-size:13px}.status{display:flex;align-items:center;gap:10px;background:#121621;border:1px solid var(--line);padding:9px 10px 9px 14px;border-radius:6px}.status>span{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor}.status .live{color:#4edb9a;background:currentColor}.status .demo{color:#ffbd46;background:currentColor}.status div{display:flex;flex-direction:column;min-width:150px}.status b{font-size:12px}.status small{color:var(--muted);font-size:10px;margin-top:3px}.status button{width:34px;height:34px;border:1px solid #303748;border-radius:5px;background:#1a2030;color:#b8c3d8;font-size:20px;cursor:pointer}.status button:disabled{opacity:.45}.notice{background:#2b2215;color:#ffc766;border:1px solid #5b4826;padding:10px 14px;border-radius:5px;font-size:12px;margin:-12px 0 18px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.metric{position:relative;min-height:122px;padding:23px 22px;background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:6px;overflow:hidden}.metric:before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--tone);opacity:.85}.metricLabel{display:flex;align-items:center;gap:9px;color:#929aad;font-size:12px}.metricLabel i{width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 10px var(--tone)}.metricValue{font-size:28px;font-weight:750;color:var(--tone);margin-top:15px;font-variant-numeric:tabular-nums}.metricValue small{font-size:12px;font-weight:400;color:#8c95a8;margin-left:6px}.charts{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(370px,.75fr);gap:14px}.panel{background:linear-gradient(145deg,#171b28,#121620);border:1px solid var(--line);border-radius:6px;padding:22px;min-height:410px}.panelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.panelHead h2{font-size:16px;margin:0}.panelHead span{font-size:11px;color:#8c96aa;border:1px solid #303748;padding:6px 9px;border-radius:4px}.trendChart{height:315px;position:relative;padding:20px 10px 28px}.trendChart svg{position:absolute;inset:20px 10px 28px;width:calc(100% - 20px);height:calc(100% - 48px);overflow:visible}.gridLines{position:absolute;inset:20px 10px 28px;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#242a38 25%);opacity:.75}.trendBars{position:absolute;inset:20px 10px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:5px}.trendColumn{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.trendColumn b{width:min(24px,45%);background:linear-gradient(to top,#26b77c,#55d89e);opacity:.78;border-radius:2px 2px 0 0;animation:rise .5s ease both}.trendColumn em{font-size:10px;color:#747e94;font-style:normal;margin-top:10px}.barValue{position:absolute;bottom:calc(var(--h) + 5px);font-size:9px;color:#b8c4d7;opacity:0;transition:.2s}.trendColumn:hover .barValue{opacity:1}.hourList{height:305px;overflow:auto;padding-right:6px}.hourRow{display:grid;grid-template-columns:45px 36px 1fr 70px;gap:9px;align-items:center;min-height:34px}.hourRow time{font-size:11px;color:#8c96a9}.orders{font-size:12px;color:#d5dbe7;text-align:right}.orders small{font-size:9px;color:#737e93;margin-left:2px}.track{height:9px;background:#222837;border-radius:2px;overflow:hidden}.track i{display:block;height:100%;background:linear-gradient(90deg,#61b5ff,#3979ef);border-radius:2px;box-shadow:0 0 12px #3979ef55}.hourRow strong{font-size:11px;color:#70aaff;text-align:right;font-variant-numeric:tabular-nums}.empty{color:#778195;text-align:center;padding-top:100px;font-size:13px}footer{text-align:center;color:#5e687b;font-size:10px;margin-top:22px}@keyframes rise{from{height:0}}@media(max-width:900px){main{padding:28px 18px}.metrics{grid-template-columns:repeat(2,1fr)}.charts{grid-template-columns:1fr}.status div{display:none}.status{padding:7px}.trendPanel{min-height:360px}}@media(max-width:560px){header{align-items:center}h1{font-size:22px}.eyebrow{font-size:9px}.subtitle{font-size:11px;line-height:1.6}.metrics{gap:8px}.metric{min-height:100px;padding:17px 14px}.metricValue{font-size:23px;margin-top:11px}.charts{grid-template-columns:minmax(0,1fr)}.panel{padding:17px;min-height:360px}.trendChart{height:270px}.barValue{display:none}.hourRow{grid-template-columns:42px 32px 1fr 62px}}