:root { color-scheme:dark; --bg:#181a20; --panel:#1e2329; --raised:#252b35; --line:#343b47; --text:#eaecef; --muted:#a0a8b5; --yellow:#f0b90b; --green:#0ecb81; --red:#f6465d; --blue:#8eafff; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; font-synthesis:none}
* { box-sizing:border-box}
body { margin:0; background:var(--bg); color:var(--text)}
button,input,select,textarea { font:inherit}
button,a,input,select,textarea { touch-action:manipulation}
a { color:inherit; text-decoration:none}
a:hover,.text-button:hover { color:var(--yellow)}
button { cursor:pointer; color:inherit; background:none; border:0}
button:disabled { opacity:.45; cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--yellow); outline-offset:3px}
.skip { position:fixed; left:10px; top:-80px; background:var(--yellow); color:#151515; padding:16px; z-index:50}
.skip:focus { top:10px}
.global-header { min-height:76px; display:flex; align-items:center; padding:0 32px; gap:38px; border-bottom:1px solid var(--line)}
.brand { display:flex; align-items:center; font-size:24px; font-weight:780; letter-spacing:-.9px}
.brand>span:last-child { color:var(--yellow)}
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border:2px solid var(--yellow); color:var(--yellow); border-radius:7px; margin-right:10px; font-size:26px; line-height:1}
.top-nav { display:flex; gap:28px; align-items:center; align-self:stretch}
.top-nav a { display:flex; align-items:center; position:relative; font-weight:550; gap:6px; white-space:nowrap}
.top-nav a.active { color:var(--yellow)}
.top-nav a.active:after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--yellow)}
.header-actions { display:flex; align-items:center; gap:14px; margin-left:auto}
.demo-pill { font-size:10px; letter-spacing:1px; padding:5px 7px; border:1px solid #5d5025; color:#e5c773; border-radius:4px}
.wallet-connect { background:var(--raised); padding:11px 13px; border:1px solid var(--line); border-radius:7px; white-space:nowrap}
.dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:6px}
.count { font-size:10px; min-width:15px; height:15px; display:grid; place-items:center; border-radius:4px; background:#4d4322; color:var(--yellow)}
.count:empty { display:none}
.demo-banner { padding:10px 32px; background:#211f19; color:#c4b894; font-size:12px; display:flex; gap:10px; align-items:center; line-height:1.5}
.demo-banner>a { margin-left:auto; white-space:nowrap; color:#dac780}
.demo-banner>span { color:var(--yellow)}
main { min-height:70vh}
.sub-nav { height:66px; padding:0 40px; display:flex; border-bottom:1px solid var(--line); align-items:stretch; gap:30px}
.sub-nav>a { display:flex; align-items:center; position:relative; color:var(--muted); font-size:15px}
.sub-nav>a.active { color:var(--text); font-weight:650}
.sub-nav>a.active:after { position:absolute; content:""; height:3px; background:var(--yellow); bottom:0; left:0; width:24px}
.sub-nav .spacer { flex:1}
.sub-nav .utility { font-size:13px; gap:8px; color:var(--text)}
.container { max-width:1440px; margin:auto; padding:32px 40px 56px}
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px}
.page-heading h1 { font-size:26px; margin:0 0 8px; letter-spacing:-.55px}
.page-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.6}
.eyebrow { color:var(--muted); font-size:11px; letter-spacing:1.3px; text-transform:uppercase; margin-bottom:10px}
.market-context { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px}
.market-context h1 { font-size:24px; margin:0 0 7px; letter-spacing:-.45px}
.market-context p { margin:0; color:var(--muted); font-size:13px}
.market-status { text-align:right; font-size:12px; color:var(--muted); line-height:1.8}
.market-status strong { font-weight:500; color:var(--text)}
.market-tabs { display:flex; align-items:center; gap:30px; margin-bottom:24px}
.segmented { display:flex; padding:4px; background:#12151a; border:1px solid var(--line); border-radius:8px; gap:2px}
.segmented button { padding:9px 27px; border-radius:5px; font-weight:600; min-height:38px; color:var(--muted)}
.segmented button.active { background:#2b333e; color:var(--text)}
.segmented button.active.buy-color { color:var(--green)}
.segmented button.active.sell-color { color:#ff788a}
.assets { display:flex; gap:26px; align-self:stretch; align-items:center}
.asset-tab { position:relative; height:100%; min-height:42px; color:var(--muted); font-weight:600; padding:8px 0}
.asset-tab.active { color:var(--yellow)}
.asset-tab.active:after { content:""; position:absolute; height:3px; background:var(--yellow); bottom:0; left:0; right:0; border-radius:2px}
.asset-tab small { font-size:9px; margin-left:3px; color:var(--muted)}
.filter-grid { display:flex; align-items:end; gap:12px; flex-wrap:wrap}
.field { display:flex; flex-direction:column; gap:8px}
.field>label,.field>span:first-child { font-size:12px; color:var(--muted)}
input,select,textarea { background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:12px; min-height:44px; width:100%}
input::placeholder,textarea::placeholder { color:#747d8d}
select { padding-right:28px}
textarea { resize:vertical; min-height:85px; line-height:1.6}
.input-pair { display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden}
.input-pair input { border:0; max-width:170px; border-radius:0}
.input-pair select { border:0; border-radius:0; border-left:1px solid var(--line); width:88px; background:var(--panel)}
.filter-grid .payment-filter { min-width:210px}
.filter-grid .network-filter { min-width:148px}
.filter-grid .sort-filter { margin-left:auto; min-width:165px}
.filter-button { height:44px; border:1px solid var(--line); padding:0 15px; border-radius:7px; display:flex; gap:8px; align-items:center}
.filter-button.active { border-color:var(--yellow); color:var(--yellow)}
.filter-extra { margin-top:15px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:8px; display:flex; gap:28px; flex-wrap:wrap}
.check { display:flex; align-items:flex-start; gap:9px; line-height:1.6; font-size:13px; color:var(--muted)}
.check input { min-height:0; width:16px; height:16px; accent-color:var(--yellow); margin:2px 0 0; flex-shrink:0}
.results-meta { display:flex; justify-content:space-between; margin:23px 0 9px; color:var(--muted); font-size:12px}
.results-meta strong { font-weight:500; color:var(--text)}
.offers { width:100%; border-collapse:collapse; table-layout:fixed}
.offers th { font-size:12px; font-weight:400; color:var(--muted); text-align:left; padding:19px 10px; border-bottom:1px solid var(--line)}
.offers th:first-child { width:28%; padding-left:0}
.offers th:nth-child(2) { width:16%}
.offers th:nth-child(3) { width:24%}
.offers th:nth-child(4) { width:20%}
.offers th:last-child { width:12%; text-align:right; padding-right:0}
.offers td { padding:25px 10px; border-bottom:1px solid #2b303a; vertical-align:middle}
.offers td:first-child { padding-left:0}
.offers td:last-child { padding-right:0; text-align:right}
.offers tr:hover td { background:#1d2129}
.merchant-name { display:flex; align-items:center; gap:9px; font-weight:620; font-size:14px}
.merchant-name button { padding:0; text-align:left; font-weight:620}
.merchant-name button:hover { color:var(--yellow)}
.avatar { width:29px; height:29px; display:grid; place-items:center; background:#38515a; color:#d5edf0; border-radius:50%; font-size:12px; font-weight:700; flex-shrink:0}
.avatar.small { width:31px; height:31px; background:#544727; color:#f3d069}
.avatar.large { width:56px; height:56px; font-size:20px}
.verified { font-size:12px; color:var(--yellow)}
.merchant-stats { font-size:11px; color:var(--muted); margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
.merchant-sub { margin-top:9px; font-size:11px; color:var(--muted); display:flex; gap:14px}
.price { font-variant-numeric:tabular-nums; font-size:21px; font-weight:650; letter-spacing:-.35px}
.price small { font-size:11px; font-weight:400; color:var(--muted); margin-left:4px}
.network-tag { font-size:10px; background:#282f3b; color:#b5c3df; border-radius:4px; padding:3px 5px; display:inline-block; margin-top:9px}
.qty { font-variant-numeric:tabular-nums; font-size:13px; margin-bottom:9px}
.limit { font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted)}
.rail { font-size:12px; padding-left:8px; border-left:2px solid #8e7aff; display:block; margin:8px 0; line-height:1.2}
.rail:nth-child(2) { border-color:#ffb669}
.pill { font-size:11px; display:inline-flex; align-items:center; border-radius:5px; padding:5px 8px; gap:5px; background:#293238; color:#b5d2c4}
.pill.yellow { color:#eac65b; background:#3b3320}
.pill.red { color:#ff9aa7; background:#432931}
.pill.blue { color:#b8caff; background:#29344b}
.btn { padding:12px 20px; min-height:44px; border-radius:7px; background:var(--raised); font-weight:600; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent}
.btn:hover { filter:brightness(1.09)}
.btn.primary { background:var(--yellow); color:#181a20}
.btn.buy { background:var(--green); color:#052b1e; min-width:108px}
.btn.sell { background:var(--red); color:#180508; min-width:108px}
.btn.outline { border-color:var(--line); background:transparent}
.btn.full { width:100%}
.btn.danger { background:#522b35; color:#ffc1cb}
.text-button { padding:5px 0; color:var(--muted); font-size:12px}
.subnote { font-size:10px; color:var(--muted); margin-top:7px}
.market-footer { display:flex; justify-content:space-between; align-items:center; margin-top:23px; font-size:12px; color:var(--muted)}
.trust-row { display:flex; gap:30px; margin-top:35px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap}
.trust-row>div { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px}
.trust-row b { color:var(--yellow); font-size:17px}
.empty { text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:12px; margin:24px 0}
.empty h2 { font-size:20px; margin:0 0 10px}
.empty p { color:var(--muted); margin:0 0 24px; line-height:1.6}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.panel { padding:26px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.panel h2 { font-size:17px; margin:0 0 20px}
.panel h3 { font-size:14px; margin:0 0 12px}
.panel p { color:var(--muted); font-size:13px; line-height:1.75}
.stack { display:flex; flex-direction:column; gap:18px}
.stat-label { font-size:12px; color:var(--muted); margin-bottom:12px}
.stat-value { font-size:28px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.5px}
.stat-value small { font-size:14px; color:var(--muted); font-weight:400}
.stat-foot { font-size:11px; color:var(--muted); margin-top:12px}
.notice { padding:14px 16px; border:1px solid #4c4329; background:#2a261c; color:#d8c996; border-radius:8px; font-size:12px; line-height:1.7}
.notice.blue { background:#222b3d; border-color:#37486a; color:#b9ccef}
.notice.green { background:#19352b; border-color:#285341; color:#a1d8be}
.muted { color:var(--muted)}
.accent { color:var(--yellow)}
.row-between { display:flex; justify-content:space-between; align-items:center; gap:15px}
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mt { margin-top:24px}
.mb { margin-bottom:24px}
.divider { height:1px; background:var(--line); margin:22px 0}
.detail-row { display:flex; justify-content:space-between; gap:25px; margin:14px 0; font-size:13px; line-height:1.6}
.detail-row>span:first-child { color:var(--muted)}
.detail-row>strong { font-weight:500; text-align:right; overflow-wrap:anywhere}
.number { font-variant-numeric:tabular-nums}
.list-table { width:100%; border-collapse:collapse; margin-top:22px}
.list-table th,.list-table td { text-align:left; padding:20px 15px; border-bottom:1px solid var(--line); font-size:13px}
.list-table th { color:var(--muted); font-size:12px; font-weight:400}
.list-table th:first-child,.list-table td:first-child { padding-left:0}
.list-table th:last-child,.list-table td:last-child { text-align:right; padding-right:0}
.tab-row { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:10px}
.tab-row button { padding:16px 0; color:var(--muted); position:relative}
.tab-row button.active { color:var(--yellow)}
.tab-row button.active:after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow)}
.order-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:25px}
.order-heading { font-size:27px; letter-spacing:-.5px; margin:12px 0}
.stepper { display:flex; gap:0; margin:28px 0}
.step { position:relative; flex:1; font-size:11px; color:var(--muted)}
.step:before { content:""; height:1px; background:var(--line); position:absolute; top:14px; left:20px; right:0}
.step:last-child:before { display:none}
.step>span { position:relative; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#303743; border:1px solid var(--line); margin-bottom:12px}
.step.done>span { background:var(--green); color:#10281e; border-color:var(--green)}
.step.current { color:var(--yellow)}
.step.current>span { background:var(--yellow); color:#181a20; border-color:var(--yellow)}
.chat-panel { display:flex; flex-direction:column; min-height:470px}
.chat-panel .chat-history { flex:1; display:flex; flex-direction:column; gap:14px; max-height:450px; overflow:auto; padding-bottom:24px}
.chat-message { padding:12px 14px; background:#2c323d; border-radius:10px 10px 10px 2px; font-size:12px; line-height:1.7; align-self:flex-start; max-width:90%; overflow-wrap:anywhere}
.chat-message.self { background:#3d3521; align-self:flex-end; border-radius:10px 10px 2px 10px}
.chat-time { display:block; font-size:10px; color:var(--muted); margin-top:5px}
.chat-form { display:flex; gap:8px}
.chat-form input { min-width:0}
.chat-form button { padding:10px}
.timeline { margin:0; padding:0; list-style:none}
.timeline li { padding:0 0 20px 25px; border-left:1px solid var(--line); position:relative; color:var(--muted); font-size:12px; line-height:1.7}
.timeline li:before { position:absolute; left:-4px; top:4px; width:7px; height:7px; background:var(--yellow); border-radius:50%; content:""}
.timeline strong { display:block; color:var(--text); font-weight:550}
.express-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1000px; margin:50px auto}
.express-copy h1 { font-size:38px; line-height:1.2; letter-spacing:-1px; margin:12px 0 22px}
.express-copy p { color:var(--muted); line-height:1.8}
.express-copy ol { padding-left:20px; color:var(--muted); line-height:2.6}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-grid>.wide { grid-column:1/-1}
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px}
.form-actions .left { margin-right:auto}
.error { color:#ff9da9; font-size:12px; line-height:1.5; margin:12px 0; min-height:0}
.error:empty { display:none}
dialog { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:0; width:min(620px,calc(100vw - 32px)); max-height:90vh; box-shadow:0 25px 100px #0008}
dialog::backdrop { background:#05070ba8; backdrop-filter:blur(3px)}
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; padding:25px 28px 0; gap:15px}
.modal-head h2 { font-size:22px; margin:0; letter-spacing:-.4px}
.modal-close { width:32px; height:32px; background:var(--raised); border-radius:50%; color:var(--muted); font-size:20px; flex-shrink:0}
.modal-body { padding:24px 28px 28px}
.modal-body>p:first-child { margin-top:0}
.modal-body p { font-size:13px; line-height:1.7; color:var(--muted)}
.quote-amount { padding:18px; border:1px solid var(--line); background:var(--bg); border-radius:9px; margin-bottom:16px}
.quote-amount label { color:var(--muted); font-size:12px; display:block; margin-bottom:10px}
.quote-amount input { font-size:25px; padding:0; border:0; background:none; min-height:36px}
.quote-total { font-size:24px; font-weight:650}
.form-steps { display:flex; gap:15px; margin-bottom:25px}
.form-steps>span { flex:1; border-top:3px solid var(--line); padding-top:12px; color:var(--muted); font-size:11px}
.form-steps>span.active { color:var(--yellow); border-color:var(--yellow)}
.asset-name { display:flex; align-items:center; gap:10px}
.coin { width:33px; height:33px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:16px; background:#2675c9; color:white}
.coin.usdt { background:#25886f}
.coin.eth { background:#4a5472}
.coin.btc { background:#cb7b21}
.address-preview { font-family:ui-monospace,monospace; background:var(--bg); padding:18px; border-radius:9px; color:var(--muted); overflow-wrap:anywhere; line-height:1.8; text-align:center; border:1px dashed var(--line)}
.feature-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:25px}
.feature-cards h3 { font-size:15px}
.feature-cards p { color:var(--muted); font-size:13px; line-height:1.8}
footer { padding:28px 40px; display:flex; align-items:center; gap:28px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); max-width:1440px; margin:auto}
.brand-mini { font-size:14px; font-weight:750; color:var(--text)}
footer>a { margin-left:auto}
#toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%) translateY(20px); background:#343b47; padding:14px 22px; border:1px solid #576171; border-radius:9px; font-size:13px; opacity:0; pointer-events:none; transition:.15s; box-shadow:0 8px 35px #0005; z-index:100; max-width:90vw}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0)}
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.guide-list { padding-left:20px; line-height:2; color:var(--muted); font-size:13px}
.funding-note { font-size:11px; color:var(--muted); line-height:1.6; margin-top:15px}
.status-heading { display:flex; align-items:center; gap:12px}
.wallet-value { font-size:36px; letter-spacing:-1px; margin:12px 0}
.small-text { font-size:12px}
.hidden { display:none!important}
.show-mobile { display:none}
@media(min-width:1600px) { .container { padding-top:40px}
}
@media(max-width:1100px) { .global-header { padding:0 22px; gap:25px}
.top-nav { gap:18px}
.demo-pill { display:none}
.container { padding:28px 24px 45px}
.sub-nav { padding:0 24px}
.offers th:first-child { width:27%}
.offers th:nth-child(3) { width:24%}
.offers th:nth-child(4) { width:18%}
.offers th:last-child { width:15%}
.filter-grid .sort-filter { margin-left:0}
.merchant-stats { gap:4px}
.express-grid { gap:35px}
.header-actions { gap:10px}
.wallet-connect { padding:10px}
}
@media(max-width:760px) { .global-header { padding:16px 18px 0; flex-wrap:wrap; gap:12px; min-height:110px}
.brand { font-size:21px}
.header-actions { gap:8px}
.wallet-connect { font-size:11px}
.header-actions .avatar { display:none}
.top-nav { order:3; width:100%; height:43px; justify-content:space-between; gap:10px; font-size:12px}
.demo-banner { padding:10px 18px; font-size:10px}
.demo-banner>a { display:none}
.sub-nav { height:54px; gap:24px; padding:0 18px}
.sub-nav .utility { font-size:11px}
.sub-nav .utility.hide-small { display:none}
.container { padding:25px 18px 38px}
.market-context { margin-bottom:23px}
.market-context h1 { font-size:22px}
.market-context p { font-size:11px; max-width:220px; line-height:1.7}
.market-status { font-size:10px}
.market-tabs { gap:22px; flex-wrap:wrap; margin-bottom:20px}
.segmented button { padding:8px 22px}
.assets { gap:24px}
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px}
.filter-grid .field { min-width:0!important}
.filter-grid .input-pair input { min-width:0; max-width:none; width:100%}
.input-pair select { min-width:75px}
.filter-grid .amount-filter { grid-column:1/-1}
.filter-grid .filter-button { grid-column:1}
.filter-grid .sort-filter { grid-column:2}
.filter-grid .sort-filter label { display:none}
.filter-extra { gap:15px}
.offers,.offers tbody { display:block}
.offers thead { display:none}
.offers tr { display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid var(--line); padding:22px 0}
.offers td { padding:10px 0; border:0; text-align:left!important; min-width:0}
.offers td:first-child { grid-column:1/-1; padding-top:0}
.offers td:nth-child(2) { grid-column:2; grid-row:2; text-align:right!important}
.offers td:nth-child(3) { grid-column:1; grid-row:2}
.offers td:nth-child(4) { grid-column:1; grid-row:3}
.offers td:last-child { grid-column:2; grid-row:3; text-align:right!important; align-self:center}
.merchant-stats { gap:12px}
.merchant-sub { display:none}
.price { font-size:22px}
.qty { font-size:12px}
.limit { font-size:11px}
.results-meta { font-size:10px}
.trust-row { gap:18px}
.market-footer { gap:15px; line-height:1.5}
.grid-2,.grid-3,.order-grid,.express-grid { grid-template-columns:1fr}
.page-heading { align-items:flex-start; flex-wrap:wrap; margin-bottom:22px}
.page-heading h1 { font-size:24px}
.stat-value { font-size:25px}
.grid-3 { gap:12px}
.panel { padding:20px}
.list-table { display:block; overflow-x:auto; white-space:nowrap}
.list-table th,.list-table td { padding:17px 13px}
.order-heading { font-size:24px}
.order-grid { gap:18px}
.chat-panel { min-height:340px}
.express-grid { margin:18px auto; gap:25px}
.express-copy h1 { font-size:29px}
.express-copy ol { display:none}
.form-grid { grid-template-columns:1fr}
.form-grid>.wide { grid-column:auto}
.feature-cards { grid-template-columns:1fr}
.modal-head { padding:22px 21px 0}
.modal-body { padding:20px 21px}
.modal-head h2 { font-size:20px}
.detail-row { gap:15px; font-size:12px}
.tab-row { gap:19px; overflow:auto}
.tab-row button { white-space:nowrap; font-size:12px}
.show-mobile { display:block}
footer { padding:22px 18px; gap:15px; flex-wrap:wrap; line-height:1.5}
footer>span:nth-child(2) { max-width:190px}
footer>a { margin-left:0}
.status-heading { align-items:flex-start}
.wallet-value { font-size:30px}
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important}
}

.market-context .eyebrow,.market-context p { display:none}
.market-context h1 { font-size:22px; margin:0}
.market-context { margin-bottom:22px}
.global-header { min-height:68px}
.offers td { padding-top:20px; padding-bottom:20px}
@media(max-width:760px) { .global-header { min-height:110px}
.market-context h1 { font-size:19px; max-width:230px}
.offers td { padding-top:10px; padding-bottom:10px}
}