:root { color-scheme: dark; font: 14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#e4ebe8; background:#0b1116; --panel:#121c23; --border:#29353c; --muted:#8f9fa8; --gold:#f4c66d; --green:#66d6b0; --red:#f18188; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 80% 0,#31433022,transparent 42%); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
[hidden] { display:none!important; }
.demo-banner { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:9px 20px; background:#f4c66d12; border-bottom:1px solid #f4c66d22; color:#bbac8b; font-size:11px; }
.demo-banner strong { color:var(--gold); font-size:9px; letter-spacing:1.6px; }
.demo-dot { width:5px; height:5px; background:var(--gold); border-radius:50%; }
.header { max-width:1480px; margin:auto; display:flex; align-items:center; gap:40px; min-height:88px; padding:0 36px; border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:11px; font-size:18px; font-weight:600; letter-spacing:-.7px; white-space:nowrap; }
.brand b { font-size:12px; font-weight:400; color:var(--gold); margin-left:6px; border-left:1px solid #53604c; padding-left:12px; letter-spacing:.2px; }
nav { display:flex; align-items:center; gap:26px; font-size:12px; color:var(--muted); }
nav .active { color:#e4ebe8; }
.auth-actions,.signed-in { margin-left:auto; display:flex; align-items:center; gap:16px; font-size:11px; }
.signed-in span { color:var(--muted); max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.quiet-button { background:none; border:0; color:#ccd7d4; padding:9px 0; font-size:12px; }
.gold-button { background:var(--gold); border:1px solid var(--gold); border-radius:6px; padding:11px 16px; color:#24261e; font-size:11px; font-weight:700; }
.gold-button:hover { background:#ffdc98; }
main { max-width:1480px; margin:auto; padding:0 36px; }
.intro { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:35px 0 26px; }
.eyebrow { color:var(--gold); letter-spacing:2px; font-size:9px; font-weight:650; margin:0 0 12px; }
h1 { font-size:32px; font-weight:500; letter-spacing:-1.2px; line-height:1.2; margin:0; }
h1 br { display:none; }
h1 span { color:#93a4aa; }
.intro>p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.market-tabs { display:flex; gap:10px; align-items:center; padding:0 0 20px; }
.market-tab { display:flex; align-items:center; gap:10px; background:#111b22; border:1px solid var(--border); border-radius:8px; color:#bac7c9; padding:10px 13px; min-width:180px; text-align:left; }
.market-tab.active { border-color:#6e623f; background:linear-gradient(115deg,#342d1b77,#121c23); color:#f1ebd9; }
.market-tab[data-market="PINCH"].active { border-color:#365d52; background:linear-gradient(115deg,#1b3a2e77,#121c23); }
.market-tab small { color:#83949d; font-size:10px; }
.coin-small { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; font-weight:600; font-size:14px; flex-shrink:0; }
.gold { background:#3b3220; color:var(--gold); border:1px solid #5a4e32; }
.teal { background:#18392f; color:var(--green); border:1px solid #305b4d; }
.tab-arrow { margin-left:auto; color:#84968f; }
.connection-state { margin-left:auto; color:#7b9991; font-size:10px; }
.market-overview { display:flex; align-items:center; flex-wrap:wrap; gap:20px; border:1px solid var(--border); border-radius:10px; padding:19px 23px; background:#111b21; margin-bottom:16px; }
.market-title { display:flex; gap:12px; align-items:center; }
.market-title h2 { font-size:18px; font-weight:550; margin:0; letter-spacing:-.6px; }
.pill { color:#b4a17a; border:1px solid #4e4736; border-radius:4px; padding:4px 6px; font-size:8px; letter-spacing:1px; white-space:nowrap; }
.market-overview dl { display:flex; flex-wrap:wrap; gap:30px; margin:0 0 0 auto; }
dt { color:var(--muted); font-size:9px; }
dd { margin:4px 0 0; font-variant-numeric:tabular-nums; font-size:13px; }
dd.price-value { color:var(--gold); font-size:16px; line-height:1; }
.notice { background:#3a252a; border:1px solid #6a3d43; color:#ffd1d4; padding:12px; border-radius:8px; font-size:12px; }
.exchange-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
.panel { border:1px solid var(--border); border-radius:10px; background:var(--panel); overflow:hidden; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:54px; padding:16px 21px; border-bottom:1px solid #253139; }
.panel-heading h2 { font-size:13px; font-weight:550; margin:0; }
.panel-heading>span { font-size:9px; color:#7e919a; }
.chart-panel { min-height:360px; }
.chart-wrap { position:relative; padding:15px 15px 0; }
#chart { display:block; width:100%; height:250px; }
.chart-empty { position:absolute; top:36%; left:18px; right:18px; text-align:center; font-size:13px; color:#becbc8; margin:0; }
.chart-empty span { color:#738991; font-size:10px; display:inline-block; margin-top:7px; }
.chart-caption { display:flex; justify-content:space-between; gap:15px; padding:10px 22px 17px; color:#6c858d; font-size:8px; letter-spacing:.7px; }
.book-panel { grid-column:2; grid-row:1 / 3; }
.book-labels,.trade-labels { display:grid; grid-template-columns:1fr 1fr 1fr; color:#738b95; font-size:9px; padding:14px 20px 7px; text-align:right; }
.book-labels span:first-child,.trade-labels span:first-child { text-align:left; }
.book-levels { min-height:190px; padding:0 10px; }
.book-level { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; width:100%; position:relative; border:0; padding:6px 10px; background:transparent; color:#bac8c8; font-size:10px; text-align:right; font-variant-numeric:tabular-nums; border-radius:3px; }
.book-level:hover { background:#273b4255; }
.book-level span { z-index:1; }
.book-level span:first-child { text-align:left; }
.asks .book-level span:first-child { color:var(--red); }
.bids .book-level span:first-child { color:var(--green); }
.depth { position:absolute; top:0; right:0; bottom:0; opacity:.08; pointer-events:none; }
.spread { display:flex; justify-content:space-between; align-items:center; border-block:1px solid #26373b; margin:10px 0; padding:12px 20px; }
.spread strong { font-weight:500; font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; }
.spread span { color:#7d959b; font-size:9px; }
.book-hint { font-size:9px; color:#71878f; margin:15px 20px 19px; text-align:center; }
.ticket-panel { grid-column:1; grid-row:2; }
.side-tabs { display:flex; margin:18px 21px 0; background:#0d161c; padding:4px; border-radius:6px; gap:4px; }
.side-tabs button { flex:1; border:0; background:transparent; border-radius:4px; padding:10px; color:#80939a; font-size:12px; }
.side-tabs .buy.active { background:#1e4236; color:#8bf0c7; }
.side-tabs .sell.active { background:#4b2830; color:#ffabb2; }
#order-form { padding:0 21px 15px; }
.available-line { display:flex; justify-content:space-between; gap:10px; color:#8c9fa4; font-size:10px; margin:16px 0; }
.available-line strong { font-weight:500; color:#d5dfdb; }
label { position:relative; display:block; margin:13px 0; color:#a9b9ba; font-size:11px; }
label>span { float:right; color:#738c94; font-size:10px; }
input { display:block; width:100%; margin-top:7px; border:1px solid #34434a; border-radius:6px; padding:11px 13px; background:#0d171e; color:#dce5e0; font-size:13px; }
input::placeholder { color:#607880; }
input:focus { border-color:#87764f; outline-color:var(--gold); }
.ticket-options { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:9px; color:#6f8790; }
.ticket-options button { border:0; background:none; color:var(--gold); font-size:10px; padding:4px; white-space:nowrap; }
.order-total,.fee-line { display:flex; justify-content:space-between; gap:10px; font-size:11px; margin:16px 0 8px; color:#9aadb0; }
.order-total strong { color:#dde5df; font-weight:500; font-variant-numeric:tabular-nums; }
.fee-line { font-size:9px; margin:8px 0 15px; color:#738c93; }
.fee-line strong { color:#9ab9b0; font-weight:500; }
.submit-order { border:0; border-radius:6px; width:100%; padding:12px; font-weight:650; font-size:12px; }
.submit-order.buy { background:#72d9ad; color:#153729; }
.submit-order.sell { background:#ec909b; color:#3e1d27; }
.order-message { min-height:16px; margin:10px 0 0; color:#f1c47a; font-size:11px; overflow-wrap:anywhere; }
.account-panel { grid-column:2; grid-row:3; }
.balance-labels,.balance-row { display:grid; grid-template-columns:.8fr 1.3fr 1fr; gap:5px; text-align:right; padding:12px 18px; font-size:10px; }
.balance-labels { color:#77919a; font-size:9px; }
.balance-row { border-top:1px solid #24323a; font-variant-numeric:tabular-nums; }
.balance-row span:first-child,.balance-labels span:first-child { text-align:left; }
.balance-row span:last-child { color:#7d969c; }
.wallet-note { color:#708992; font-size:10px; line-height:1.7; margin:15px 19px 20px; }
.wallet-empty { text-align:center; padding:27px 20px; }
.wallet-glyph { color:var(--gold); font-size:30px; }
.wallet-empty h3 { font-size:13px; font-weight:500; }
.wallet-empty p { color:#859ca4; font-size:10px; line-height:1.9; margin-bottom:20px; }
.orders-panel { grid-column:1; grid-row:3 / 5; }
.table-scroll { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:570px; font-size:10px; }
th { color:#78909a; font-weight:400; text-align:right; padding:14px 14px; white-space:nowrap; font-size:9px; }
th:first-child,th:nth-child(2),td:first-child,td:nth-child(2) { text-align:left; }
td { padding:13px 14px; border-top:1px solid #26353b; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.side-buy { color:var(--green); }
.side-sell { color:var(--red); }
.order-state { color:#91a6ad; font-size:9px; }
.cancel-button { border:1px solid #49534a; background:none; color:#e4c989; border-radius:4px; font-size:9px; padding:4px 7px; }
.empty-state { padding:25px 20px; text-align:center; color:#7d959e; font-size:11px; }
.trades-panel { grid-column:2; grid-row:4; }
.trade-list { max-height:240px; overflow:auto; }
.trade-row { display:grid; grid-template-columns:1fr 1fr 1fr; text-align:right; padding:6px 20px; font-size:10px; font-variant-numeric:tabular-nums; }
.trade-row span:first-child { text-align:left; }
.trade-row time { color:#779099; }
.demo-explainer { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:34px 0 38px; }
.demo-explainer>div { position:relative; padding-left:32px; }
.demo-explainer>div>span { position:absolute; left:0; top:1px; color:var(--gold); font-size:10px; }
.demo-explainer h3 { font-size:12px; font-weight:500; margin:0 0 7px; }
.demo-explainer p { font-size:10px; color:#7e959e; margin:0; line-height:1.8; }
footer { max-width:1408px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:24px 0 30px; border-top:1px solid var(--border); color:#7e969d; font-size:10px; }
footer>a:first-child { color:#d3ddd6; font-weight:500; }
dialog { width:min(100% - 32px,420px); background:#141f26; color:#dce7df; border:1px solid #495146; border-radius:16px; padding:34px; box-shadow:0 24px 90px #0008; }
dialog::backdrop { background:#03090dbd; backdrop-filter:blur(5px); }
.dialog-close { position:absolute; top:12px; right:17px; background:none; border:0; color:#849ba2; font-size:25px; }
dialog .eyebrow { margin-top:20px; font-size:8px; }
dialog h2 { font-size:25px; line-height:1.2; letter-spacing:-.7px; font-weight:500; margin:0 0 12px; }
#auth-description { color:#8fa4aa; font-size:12px; line-height:1.7; }
.password-hint { color:#7a929a; font-size:9px; line-height:1.6; }
.auth-submit { width:100%; margin-top:13px; font-size:12px; }
.auth-switch { display:block; border:0; background:none; color:var(--gold); font-size:11px; margin:20px auto 0; }
.dialog-demo { border-top:1px solid #2b393e; text-align:center; padding-top:16px; margin:23px 0 0; color:#788f98; font-size:9px; }
@media(min-width:1150px) { #order-form { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } .available-line,.ticket-options,.order-total,.fee-line,.submit-order,.order-message { grid-column:1 / 3; } }
@media(max-width:1100px) { .header { gap:22px; padding:0 22px; } nav { gap:18px; } main { padding:0 22px; } .intro { align-items:start; } h1 { font-size:26px; } h1 br { display:block; } .market-overview dl { gap:20px; margin-left:0; width:100%; } .exchange-grid { grid-template-columns:minmax(0,1fr) 310px; } footer { margin-inline:22px; } .intro>p { max-width:210px; } }
@media(max-width:760px) { .header { min-height:82px; padding:14px 18px; flex-wrap:wrap; gap:12px; } .brand { font-size:16px; } .brand img { width:30px; height:30px; } nav { display:none; } .auth-actions,.signed-in { gap:12px; } .auth-actions .gold-button { font-size:9px; padding:9px; } .signed-in span { max-width:140px; } .quiet-button { font-size:10px; } main { padding:0 16px; } .intro { padding-top:27px; } .intro>p { display:none; } h1 { font-size:28px; } .market-tabs { flex-wrap:wrap; } .market-tab { min-width:0; flex:1; font-size:12px; padding:9px; } .connection-state { width:100%; margin-left:0; padding-top:4px; } .market-overview { padding:15px; gap:16px; } .market-title { gap:9px; } .market-title h2 { font-size:17px; } .market-overview dl { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .exchange-grid { grid-template-columns:minmax(0,1fr); } .chart-panel,.ticket-panel,.book-panel,.account-panel,.orders-panel,.trades-panel { grid-column:1; grid-row:auto; } .chart-panel { min-height:310px; } #chart { height:210px; } .book-panel { order:2; } .ticket-panel { order:1; } .account-panel { order:3; } .orders-panel { order:4; } .trades-panel { order:5; } .book-levels { min-height:0; } .demo-explainer { grid-template-columns:1fr; gap:22px; } footer { flex-direction:column; margin-inline:16px; text-align:center; } .chart-empty span { max-width:240px; } }
@media(prefers-reduced-motion:reduce) { dialog::backdrop { backdrop-filter:none; } }