:root{--metal-bg:#05090f;--metal-panel:#0b121d;--metal-panel2:#101a28;--metal-border:#1e2a3a;--metal-text:#eaf2fb;--metal-muted:#8795a8;--metal-cyan:#20d7e4;--metal-green:#15c995;--metal-red:#f25b68;--metal-warn:#f2b84b}
.metal-desktop,.metal-mobile{min-height:100vh;background:var(--metal-bg);color:var(--metal-text);font-family:Inter,"PingFang TC","Noto Sans",Arial,sans-serif;box-sizing:border-box}.metal-desktop *,.metal-mobile *{box-sizing:border-box}.metal-desktop button,.metal-desktop input,.metal-desktop select,.metal-mobile button,.metal-mobile input,.metal-mobile select{font:inherit}.metal-desktop button,.metal-mobile button{cursor:pointer}.metal-desktop-header{height:68px;display:flex;align-items:center;gap:28px;padding:0 28px;background:#070d15;border-bottom:1px solid var(--metal-border);position:sticky;top:0;z-index:20}.metal-brand img{width:116px}.metal-desktop-header nav{display:flex;gap:22px;flex:1}.metal-desktop-header a{color:#aeb8c6;text-decoration:none}.metal-desktop-header a.active{color:var(--metal-cyan)}#metal-connection{font-size:13px;color:var(--metal-green)}#metal-page-content{padding:16px;max-width:1920px;margin:auto}.metal-market-grid{display:grid;grid-template-columns:250px minmax(480px,1fr) 360px;gap:12px;align-items:stretch}.metal-panel{background:var(--metal-panel);border:1px solid var(--metal-border);border-radius:8px}.metal-quote-panel{padding:18px}.metal-quote-panel h1{margin:0;font-size:24px}.metal-source{font-size:10px;color:var(--metal-muted);word-break:break-all}.metal-last{display:block;margin:18px 0;color:var(--metal-cyan);font-size:27px}.metal-quote-panel dl,.metal-assets dl,.metal-estimate,.metal-record dl{margin:0;display:grid;gap:8px}.metal-quote-panel dl div,.metal-assets dl div,.metal-estimate div,.metal-record dl div{display:flex;justify-content:space-between;gap:12px}.metal-quote-panel dt,.metal-assets dt,.metal-estimate dt,.metal-record dt{color:var(--metal-muted)}.metal-quote-panel dd,.metal-assets dd,.metal-estimate dd,.metal-record dd{margin:0;text-align:right}.buy{color:var(--metal-green)}.sell{color:var(--metal-red)}.ltr{direction:ltr;unicode-bidi:isolate}.metal-market-state{margin:16px 0 0;padding:8px;border-radius:5px}.metal-market-state.ok{background:#0d2b25;color:var(--metal-green)}.metal-market-state.bad{background:#31161a;color:var(--metal-red)}.metal-chart{min-width:0;padding:12px}.metal-chart>header{display:flex;justify-content:space-between;align-items:center}.metal-chart h2,.metal-assets h2{margin:0 0 12px;font-size:17px}.metal-chart header button,.metal-type-tabs button,.metal-record-tabs button{border:0;background:transparent;color:var(--metal-muted);padding:7px 9px}.metal-chart header button.active,.metal-type-tabs button.active,.metal-record-tabs button.active{color:var(--metal-cyan);background:#12212d}.metal-chart .kline-svg{width:100%;height:260px}.metal-chart .k-grid{stroke:#233142}.metal-chart text{fill:#8290a2;font-size:11px}.metal-book-trades{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--metal-border);padding-top:8px}.metal-book-trades h3{margin:5px 0;font-size:14px}.metal-book-head,#metal-book button{display:grid;grid-template-columns:1fr 1fr}.metal-book-head{color:var(--metal-muted);font-size:11px}#metal-book button{width:100%;border:0;background:transparent;color:var(--metal-text);padding:3px 5px;text-align:right}#metal-book button.ask span:first-child{color:var(--metal-red)}#metal-book button.bid span:first-child{color:var(--metal-green)}.metal-book-trades small{color:var(--metal-muted);font-size:10px}#metal-trades{max-height:130px;overflow:auto}#metal-trades p{margin:3px 0;color:var(--metal-muted)}.metal-ticket{padding:14px}.metal-side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metal-side-tabs button{border:1px solid var(--metal-border);background:#0d1622;color:var(--metal-muted);padding:11px;border-radius:5px}.metal-side-tabs button.buy.active{background:var(--metal-green);color:#05120e}.metal-side-tabs button.sell.active{background:var(--metal-red);color:#19080a}.metal-type-tabs{display:flex;margin:10px 0}.metal-ticket label{display:block;color:var(--metal-muted);font-size:12px;margin:10px 0}.metal-ticket input,.metal-ticket select,.metal-assets input,.metal-assets select{width:100%;display:block;margin-top:5px;background:#07101a;border:1px solid #304054;color:var(--metal-text);border-radius:5px;padding:10px}.metal-ticket input:focus,.metal-assets input:focus{outline:2px solid #167786}.metal-percent{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.metal-percent button{background:#111d2b;color:#a6b2c3;border:1px solid var(--metal-border);padding:6px}.metal-contract-size{padding:9px;background:#101d29;color:var(--metal-cyan)}.metal-estimate{font-size:12px}.metal-primary{width:100%;margin-top:14px;border:0;border-radius:5px;padding:12px;background:var(--metal-green);color:#04130e;font-weight:700}.metal-primary.sell{background:var(--metal-red);color:#1b080a}.metal-primary:disabled{background:#28313c;color:#6c7786;cursor:not-allowed}#metal-form-status{min-height:19px;font-size:12px;color:var(--metal-muted)}#metal-form-status.error{color:var(--metal-red)}#metal-form-status.warning{color:var(--metal-warn)}#metal-form-status.success{color:var(--metal-green)}.metal-assets{margin-top:12px;padding:14px;display:grid;grid-template-columns:180px 1fr 1.4fr;align-items:center;gap:18px}.metal-assets h2{margin:0}.metal-assets dl{grid-template-columns:repeat(4,1fr)}#metal-transfer-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}#metal-transfer-form input,#metal-transfer-form select{margin:0}#metal-transfer-form button{background:var(--metal-cyan);border:0;padding:0 18px;border-radius:5px}#metal-transfer-status{grid-column:1/-1;margin:0}.metal-records{margin-top:12px;overflow:hidden}.metal-records>header{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--metal-border)}.metal-record-tabs{display:flex;overflow:auto}.metal-filters{display:flex;gap:5px}.metal-filters select,.metal-filters input,.metal-filters button{background:#0a131e;color:var(--metal-muted);border:1px solid var(--metal-border);padding:6px}.metal-records>footer{display:flex;justify-content:flex-end;gap:12px;padding:10px}.metal-records>footer button{background:#111d2b;color:var(--metal-muted);border:1px solid var(--metal-border)}#metal-record-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}.metal-record{background:var(--metal-panel2);border:1px solid var(--metal-border);border-radius:6px;padding:10px;min-width:0}.metal-record>header{display:flex;justify-content:space-between;margin-bottom:10px}.metal-record dl{font-size:11px;grid-template-columns:1fr 1fr}.metal-record footer{display:flex;gap:6px;margin-top:10px}.metal-record footer button,.metal-line button{background:#152435;color:var(--metal-text);border:1px solid #304054;padding:6px 10px;border-radius:4px}.metal-line{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:8px;padding:12px;background:var(--metal-panel2);border-radius:5px}.metal-empty,.metal-loading,.metal-fatal{grid-column:1/-1;min-height:120px;display:grid;place-items:center;color:var(--metal-muted)}#metal-dialog{width:min(820px,90vw);max-height:80vh;background:#0c1520;color:var(--metal-text);border:1px solid #304054;border-radius:8px}#metal-dialog::backdrop{background:#000b}#metal-dialog header{display:flex;justify-content:space-between}#metal-dialog button{background:transparent;color:var(--metal-text);border:0;font-size:24px}.metal-detail-json{white-space:pre-wrap;word-break:break-word;color:#b7c2d0}
.metal-mobile{padding-bottom:62px}.metal-mobile-header{height:58px;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;padding:7px 10px;background:#07101a;border-bottom:1px solid var(--metal-border);position:sticky;top:0;z-index:20}.metal-mobile-header button{border:0;background:transparent;color:var(--metal-text)}.metal-mobile-header>div{display:flex;flex-direction:column}.metal-mobile-header small{color:var(--metal-muted)}#metal-quote-state{grid-column:2/-1;color:var(--metal-muted);font-size:10px}.metal-mobile #metal-page-content{padding:8px}.metal-mobile .metal-market-grid{display:flex;flex-direction:column}.metal-mobile .metal-quote-panel dl{grid-template-columns:1fr 1fr}.metal-mobile .metal-chart{order:2}.metal-mobile .metal-ticket{order:1}.metal-mobile .metal-chart .kline-svg{height:210px}.metal-mobile .metal-book-trades{grid-template-columns:1fr 1fr}.metal-mobile .metal-assets{display:block;margin-top:8px}.metal-mobile .metal-assets dl{grid-template-columns:1fr 1fr}.metal-mobile #metal-transfer-form{grid-template-columns:1fr 1fr}.metal-mobile #metal-transfer-form button{min-height:40px}.metal-mobile #metal-record-list{display:block}.metal-mobile .metal-record{margin-bottom:8px}.metal-mobile .metal-record dl{grid-template-columns:1fr 1fr}.metal-mobile .metal-records>header{display:block}.metal-mobile .metal-filters{display:grid;grid-template-columns:1fr 1fr}.metal-mobile .metal-line{margin-bottom:6px;grid-template-columns:1fr 1fr}.metal-mobile-bottom{position:fixed;z-index:30;bottom:0;left:0;right:0;height:58px;background:#07101a;border-top:1px solid var(--metal-border);display:grid;grid-template-columns:repeat(5,1fr)}.metal-mobile-bottom a{display:grid;place-items:center;text-decoration:none;color:var(--metal-muted);font-size:11px}.metal-mobile-bottom a.active{color:var(--metal-cyan)}
@media(max-width:1180px) and (min-width:769px){.metal-market-grid{grid-template-columns:220px minmax(420px,1fr) 320px}#metal-record-list{grid-template-columns:repeat(2,minmax(0,1fr))}.metal-desktop-header{gap:14px;padding:0 14px}}
@media(max-width:767px){.metal-mobile .metal-book-trades{grid-template-columns:1fr}.metal-mobile .metal-chart .kline-svg{height:180px}.metal-mobile .metal-record dl{grid-template-columns:1fr}.metal-mobile .metal-assets dl{grid-template-columns:1fr}.metal-mobile .metal-filters{grid-template-columns:1fr 1fr}}
@media(min-width:600px) and (max-width:900px){.metal-mobile .metal-market-grid{display:grid;grid-template-columns:1fr 1fr}.metal-mobile .metal-quote-panel{grid-column:1/-1}.metal-mobile .metal-chart{order:initial}.metal-mobile .metal-ticket{order:initial}.metal-mobile .metal-assets{display:grid;grid-template-columns:160px 1fr}.metal-mobile #metal-record-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metal-mobile .metal-record{margin:0}}