/* ---- Hyperliquid-style trade surface ---- */
:root{--hl-bg:#1c1b18;--hl-bg2:#232119;--hl-line:#3a3628;--hl-mint:#c9a45c;--hl-mint2:#8f6f25;--hl-ink:#f1ece2;--hl-mut:#9a927f;--hl-red:#c9563f}
.hl{background:var(--hl-bg);color:var(--hl-ink);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,26,28,.7);border:1px solid var(--hl-line);position:relative}
.hl:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 90% -10%,rgba(184,147,61,.16),transparent 60%)}
.hl .hlhead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--hl-line);font-family:'JetBrains Mono';font-size:12px;color:var(--hl-mut);position:relative}
.hl .hlhead b{color:var(--hl-mint);font-weight:600;letter-spacing:.04em}
.hl .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hl-mint);box-shadow:0 0 10px var(--hl-mint);margin-right:8px;animation:hlp 1.6s infinite}
@keyframes hlp{50%{opacity:.35}}
.hl .grid2{display:grid;grid-template-columns:1fr 340px;position:relative}
@media(max-width:900px){.hl .grid2{grid-template-columns:1fr}}
.hl table{font-size:12.5px;font-family:'JetBrains Mono'}
.hl th{color:var(--hl-mut);border-bottom:1px solid var(--hl-line);font-family:'JetBrains Mono';font-weight:500;letter-spacing:.06em;font-size:10.5px;text-transform:uppercase;padding:10px 16px}
.hl td{border-bottom:1px solid var(--hl-line);padding:10px 16px;color:var(--hl-ink)}
.hl tr:hover td{background:rgba(184,147,61,.07)}
.hl td b{color:#fff;font-weight:600}
.hl .up{color:var(--hl-mint)}.hl .dn{color:var(--hl-red)}
.hl .spark{display:inline-block;width:80px;height:22px;vertical-align:middle;filter:drop-shadow(0 0 5px currentColor)}
.hl .ticket{border-left:1px solid var(--hl-line);padding:18px 20px;background:var(--hl-bg2)}
.hl .ticket .lab{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hl-mut);margin:12px 0 6px}
.hl .ticket .box{background:#151410;border:1px solid var(--hl-line);border-radius:6px;padding:10px 12px;font-family:'JetBrains Mono';font-size:15px;color:#fff;display:flex;justify-content:space-between}
.hl .ticket .box span{color:var(--hl-mut);font-size:11px}
.hl .ls{display:flex;gap:6px}.hl .ls div{flex:1;text-align:center;font-family:'JetBrains Mono';font-size:12px;padding:9px;border-radius:6px;border:1px solid var(--hl-line);color:var(--hl-mut)}
.hl .ls div.on{background:rgba(184,147,61,.18);color:var(--hl-mint);border-color:var(--hl-mint2)}
.hl .lev{height:4px;background:var(--hl-line);border-radius:2px;position:relative;margin:10px 0 6px}
.hl .lev i{position:absolute;left:0;top:0;height:100%;width:40%;background:var(--hl-mint);border-radius:2px}
.hl .lev b{position:absolute;left:40%;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--hl-bg2)}
.hl .go{display:block;width:100%;text-align:center;background:var(--hl-mint);color:#1c1b18;font-weight:700;font-size:13px;padding:12px;border-radius:6px;margin-top:14px;text-decoration:none;font-family:'Hanken Grotesk';letter-spacing:.02em}
.hl .go:hover{background:#d9b76d}
.hl .kv{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:11.5px;color:var(--hl-mut);padding:4px 0}
.hl .kv b{color:var(--hl-ink);font-weight:500}
.hl .strip{display:flex;gap:28px;padding:12px 20px;border-bottom:1px solid var(--hl-line);font-family:'JetBrains Mono';font-size:11.5px;color:var(--hl-mut);overflow:hidden;white-space:nowrap;position:relative}
.hl .strip b{color:var(--hl-ink);font-weight:500}
/* app perps tab in HL dark */
.perpsdark{background:var(--hl-bg);border:1px solid var(--hl-line);border-radius:14px;padding:18px;color:var(--hl-ink)}
.perpsdark .kicker{color:var(--hl-mint)}
.perpsdark th{color:var(--hl-mut);border-color:var(--hl-line);font-family:'JetBrains Mono';font-weight:500}
.perpsdark td{border-color:var(--hl-line);color:var(--hl-ink)}
.perpsdark tr:hover td{background:rgba(184,147,61,.07)}
.perpsdark td b{color:#fff}
.perpsdark .up{color:var(--hl-mint)}.perpsdark .dn{color:var(--hl-red)}
.panel.hlp{background:var(--hl-bg2);border-color:var(--hl-line);color:var(--hl-ink)}
.panel.hlp h3{color:#fff}.panel.hlp .kicker{color:var(--hl-mint)}
.panel.hlp .field input{background:#151410;border-color:var(--hl-line);color:#fff}
.panel.hlp .field label,.panel.hlp .field .hint,.panel.hlp p{color:var(--hl-mut)!important}
.panel.hlp .seg{background:#151410;border-color:var(--hl-line)}
.panel.hlp .seg button{color:var(--hl-mut)}.panel.hlp .seg button.on.long{background:var(--hl-mint);color:#1c1b18}.panel.hlp .seg button.on.short{background:var(--hl-red);color:#fff}
.panel.hlp .btn.mini.ghost{border-color:var(--hl-line);color:var(--hl-ink)}