:root{color-scheme:dark;--bg:#0d1014;--panel:#171b22;--line:#292f38;--text:#f1f4f8;--muted:#98a1af;--green:#00bc87;--red:#fa5966}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,-apple-system,sans-serif}button,input,select{font:inherit}button{cursor:pointer}header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{font-size:23px;font-weight:750;letter-spacing:-.8px}.brand span{color:var(--green)}.demo{font-size:13px;color:#d6b76c;background:#30291b;padding:7px 12px;border-radius:20px}main{max-width:1160px;margin:auto;padding:30px 24px}h1{font-size:30px;margin:0 0 5px;letter-spacing:-1px}.sub{color:var(--muted);font-size:14px}nav{display:flex;gap:8px;margin:24px 0}nav button,.mode button{background:none;border:0;color:var(--muted);padding:11px 18px;border-radius:8px}nav button.active{background:var(--panel);color:var(--text)}.ticker{border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:22px;margin-bottom:22px}.pair{font-weight:700;font-size:20px}.price{font-size:35px;color:var(--green);font-weight:650;margin-top:8px}.stats{display:flex;gap:30px;color:var(--muted);font-size:13px}.stats strong{display:block;color:var(--text);font-size:16px;margin-top:7px}svg{width:180px;height:65px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}h2{font-size:18px;margin:0 0 20px}.mode{display:flex;background:var(--bg);padding:4px;border-radius:9px;margin-bottom:24px}.mode button{width:50%;font-weight:700}.mode button.active{background:#073f32;color:var(--green)}.mode button.sell.active{background:#4d2028;color:var(--red)}label{display:block;color:var(--muted);font-size:14px;margin:17px 0 8px}.input{display:flex;align-items:center;border:1px solid #3a414d;border-radius:8px;overflow:hidden}.input:focus-within{border-color:var(--green)}input{background:none;color:var(--text);border:0;outline:none;min-width:0;width:100%;padding:14px}input[type=range]{padding:0;accent-color:var(--green);margin:20px 0 5px}.unit{font-size:13px;color:var(--muted);padding-right:14px}.estimates{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}.estimates strong{display:block;font-size:13px;color:#c5ccd6;font-weight:500}.estimate-note{font-size:11px;color:var(--muted);margin-top:7px}.summary{display:flex;justify-content:space-between;font-size:14px;margin:18px 0;color:var(--muted)}.summary strong{color:var(--text)}.submit{border:0;background:var(--green);color:#052c23;font-weight:750;padding:15px;width:100%;border-radius:8px}.submit.sell{background:var(--red);color:#350d15}.caption{font-size:12px;color:var(--muted);text-align:center;margin:13px 0 0}.bookhead,.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:7px 10px;font-size:14px}.bookhead{color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:12px}.bookhead span:not(:first-child),.row span:not(:first-child){text-align:right}.row{position:relative;cursor:pointer;border-radius:3px}.row:hover{background:#ffffff08}.row:before{content:'';position:absolute;right:0;top:1px;bottom:1px;width:var(--depth);background:var(--shade);pointer-events:none}.row span{z-index:1}.ask{color:var(--red)}.bid{color:var(--green)}.middle{font-size:24px;color:var(--green);padding:17px 10px;border-block:1px solid var(--line);margin:9px 0}.middle small{font-size:12px;color:var(--muted);margin-left:10px}.spread{font-size:12px;color:var(--muted);margin:20px 10px 0}.orders{margin-top:22px}.ordershead{display:flex;justify-content:space-between;align-items:center}.ordershead button{background:none;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:8px 12px;font-size:13px}.empty{text-align:center;color:var(--muted);padding:30px 0}.order{display:flex;gap:15px;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:14px}.order small{display:block;color:var(--muted);margin-top:5px}.order button{background:none;border:1px solid var(--line);color:var(--muted);padding:7px;border-radius:5px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#f1f4f8;color:#151a20;padding:14px 20px;border-radius:10px;box-shadow:0 10px 35px #0008;max-width:90%;z-index:5}.hidden{display:none}footer{color:var(--muted);font-size:12px;padding:25px 0;text-align:center}.market-note{color:var(--muted);font-size:13px;line-height:1.6;margin-top:20px}@media(max-width:700px){header{height:65px;padding:0 18px}.brand{font-size:20px}main{padding:23px 14px}h1{font-size:27px}.ticker{padding:18px}.stats{gap:14px}.stats .optional,svg{display:none}.workspace{gap:10px;grid-template-columns:1fr 1fr}.panel{padding:14px 10px}h2{font-size:16px}.bookhead,.row{grid-template-columns:1fr 1fr;font-size:13px;padding-inline:4px}.bookhead span:last-child,.row span:last-child{display:none}.mode button{padding:11px 5px;font-size:14px}input{padding:12px 8px;font-size:16px}.unit{padding-right:7px}.summary{font-size:12px;gap:5px}.middle{font-size:22px;padding:14px 4px}.middle small{display:block;margin:4px 0 0}.order{flex-wrap:wrap}nav{margin:18px 0}.price{font-size:31px}.caption{line-height:1.5}}@media(max-width:360px){.workspace{grid-template-columns:1fr}.stats{display:none}}
.pair-balances{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}.balance-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel);min-width:0}.balance-card.active-balance{border-color:var(--balance-accent);box-shadow:inset 0 0 0 1px var(--balance-accent);background:var(--balance-bg)}.balance-heading{display:flex;justify-content:space-between;gap:8px;font-size:14px}.balance-purpose{color:var(--muted);font-size:12px}.active-balance .balance-purpose{color:var(--balance-accent)}.balance-amount{display:block;font-size:22px;margin:9px 0;overflow-wrap:anywhere}.balance-detail{color:var(--muted);font-size:12px;line-height:1.6}@media(max-width:700px){.balance-card{padding:12px}.balance-heading{flex-wrap:wrap}.balance-amount{font-size:18px}}
.price-chart{margin-bottom:22px}.chart-heading,.chart-foot{display:flex;justify-content:space-between;gap:12px;align-items:center}.chart-heading h2{margin:0}.chart-heading span,.chart-foot{font-size:12px;color:var(--muted)}#priceChart{display:block;width:100%;height:140px;margin:16px 0}.chart-foot{flex-wrap:wrap}.chart-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.chart-controls select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px;font-size:13px}#priceChart{height:180px}#demoTrades{margin-top:16px;font-size:13px;color:var(--muted)}#demoTradeList{max-height:230px;overflow:auto;margin-top:12px}.demo-trade{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:8px;border-top:1px solid var(--line);font-size:12px}.bot-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.bot-fields input,.bot-fields select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:12px}.bot-summary{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.bot-actions{display:flex;gap:10px;flex-wrap:wrap}.bot-actions button{padding:9px 15px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:8px}button:disabled{opacity:.45;cursor:default}@media(max-width:600px){.bot-fields{grid-template-columns:1fr}}
.inline-style-0{color:var(--muted);font-size:14px;margin:0 0 16px}
.inline-style-1{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px;border-radius:8px}
.inline-style-2{font-size:12px;color:var(--muted);margin:8px 0}
.inline-style-3{font-size:12px;color:var(--muted);margin:-10px 0 14px}
.inline-style-4{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px;border-radius:7px}
.inline-style-5{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px;border-radius:7px}
.inline-style-6{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:24px;width:min(400px,90vw)}
.inline-style-7{color:var(--muted)}
.inline-style-8{color:var(--muted);font-size:13px;line-height:1.5}
.inline-style-9{color:var(--muted);font-size:13px}
.inline-style-10{display:flex;gap:12px;margin-top:20px}

@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--bg:#f4f6fa;--panel:#fff;--line:#dce4ee;--text:#182638;--muted:#607187;--green:#087c5d;--red:#c93448}
:root:not([data-theme="dark"]) header{background:#fff}
:root:not([data-theme="dark"]) .ticker{background:#fff}
:root:not([data-theme="dark"]) .demo{background:#eaf0f7;color:#445e79}
:root:not([data-theme="dark"]) .demo a{color:#314c67}
:root:not([data-theme="dark"]) .input{border-color:#ccd7e4;background:#fff}
:root:not([data-theme="dark"]) .estimates strong{color:#344a63}
:root:not([data-theme="dark"]) .mode button.active{background:#dff3eb}
:root:not([data-theme="dark"]) .mode button.sell.active{background:#fbe6e9}
:root:not([data-theme="dark"]) .row:hover{background:#172f4808}
:root:not([data-theme="dark"]) .submit{color:#fff;background:#087c5d}
:root:not([data-theme="dark"]) .submit.sell{color:#fff;background:#c93448}
:root:not([data-theme="dark"]) .toast{background:#182638;color:#fff}
:root:not([data-theme="dark"]) .panel{box-shadow:0 5px 20px #18324b05}}
:root[data-theme="light"]{color-scheme:light;--bg:#f4f6fa;--panel:#fff;--line:#dce4ee;--text:#182638;--muted:#607187;--green:#087c5d;--red:#c93448}
:root[data-theme="light"] header{background:#fff}
:root[data-theme="light"] .ticker{background:#fff}
:root[data-theme="light"] .demo{background:#eaf0f7;color:#445e79}
:root[data-theme="light"] .demo a{color:#314c67}
:root[data-theme="light"] .input{border-color:#ccd7e4;background:#fff}
:root[data-theme="light"] .estimates strong{color:#344a63}
:root[data-theme="light"] .mode button.active{background:#dff3eb}
:root[data-theme="light"] .mode button.sell.active{background:#fbe6e9}
:root[data-theme="light"] .row:hover{background:#172f4808}
:root[data-theme="light"] .submit{color:#fff;background:#087c5d}
:root[data-theme="light"] .submit.sell{color:#fff;background:#c93448}
:root[data-theme="light"] .toast{background:#182638;color:#fff}
:root[data-theme="light"] .panel{box-shadow:0 5px 20px #18324b05}
.appearance-control{display:flex;align-items:center;gap:8px}.appearance-control label{margin:0;font-size:12px;color:var(--muted)}.appearance-control select{width:auto;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:12px}header{gap:12px}@media(max-width:600px){header .stage{display:none}.appearance-control label{display:none}}

.offline-notice{margin:16px auto;padding:14px 18px;max-width:1120px;border:1px solid #b78836;border-radius:10px;background:#fff3d5;color:#634416;font-size:14px;line-height:1.5}.offline-notice[hidden]{display:none}

body.portal-market-embedded{background:var(--panel);font-size:14px}
.portal-market-embedded>header,.portal-market-embedded>footer,.portal-market-embedded main>h1,.portal-market-embedded main>h1+.sub{display:none}
.portal-market-embedded main{max-width:none;margin:0;padding:14px;min-width:0}
.portal-market-embedded nav{margin:10px 0 15px;gap:6px}
.portal-market-embedded nav button{font-size:12px;padding:9px 12px;border-radius:9px}
.portal-market-embedded .panel,.portal-market-embedded .ticker{border-radius:13px}
.portal-market-embedded #syncStatus{font-size:10px;margin:0 0 8px;color:var(--muted)}
@media(max-width:500px){.portal-market-embedded main{padding:10px}.portal-market-embedded .workspace{grid-template-columns:1fr}.portal-market-embedded .ticker{padding:14px}.portal-market-embedded .panel{padding:14px}.portal-market-embedded .stats{gap:10px}}

/* Keep both sides of a trade visible together, including narrow phones. */
.portal-market-embedded .workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:14px}
.portal-market-embedded .workspace>.panel{min-width:0}
.portal-market-embedded .workspace>.panel:nth-child(2){position:sticky;top:8px}
.portal-market-embedded .workspace>.panel:nth-child(3){grid-column:1/-1}
@media(max-width:700px){.portal-market-embedded main{padding:8px}.portal-market-embedded .workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:7px}.portal-market-embedded .workspace>.panel{padding:11px 8px}.portal-market-embedded .workspace h2{font-size:13px;line-height:1.4;margin-bottom:13px}.portal-market-embedded .workspace .caption,.portal-market-embedded .workspace .sub{font-size:10px;line-height:1.5}.portal-market-embedded .workspace .mode{margin-bottom:15px;padding:3px}.portal-market-embedded .workspace .mode button{font-size:11px;padding:9px 3px;min-width:0}.portal-market-embedded .bookhead,.portal-market-embedded .row{font-size:11px;padding:8px 0;gap:4px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.portal-market-embedded .bookhead span,.portal-market-embedded .row span{min-width:0;overflow-wrap:anywhere}.portal-market-embedded .middle{font-size:20px;padding:13px 0}.portal-market-embedded .middle small{font-size:9px}.portal-market-embedded .summary{font-size:11px;gap:5px;flex-wrap:wrap}.portal-market-embedded input{padding:11px 7px}.portal-market-embedded .unit{font-size:10px;padding-right:6px}.portal-market-embedded #submit{font-size:12px;padding:12px 4px}.portal-market-embedded .pair-balances{gap:7px;margin-bottom:12px}.portal-market-embedded .balance-card{padding:10px}.portal-market-embedded .balance-detail{font-size:10px}.portal-market-embedded .ticker{padding:12px;margin-bottom:12px}}

.portal-market-embedded.portal-market-expanded main{padding:3px}
.portal-market-expanded .workspace{gap:6px}

.bot-help{margin:12px 0 18px;color:var(--muted);font-size:13px;line-height:1.65}.bot-help summary{cursor:pointer;color:var(--text)}.bot-help ul{padding-left:20px}.bot-help li+li{margin-top:8px}

.row.ask{--shade:rgba(202,105,116,.16)}.row.bid{--shade:rgba(81,151,130,.16)}

.crypto-view .ticker,.crypto-view .price-chart,.crypto-view .pair-balances,.crypto-view .market-note{display:none}.crypto-demo-tag{font-size:11px;border:1px solid var(--line);padding:4px 9px;border-radius:15px;color:var(--muted)}.crypto-balances{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin:18px 0}.crypto-balance{display:flex;flex-direction:column;gap:5px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--bg);color:var(--text)}.crypto-balance strong{font-size:17px}.crypto-balance small{font-size:12px;color:var(--muted)}.crypto-balance span{font-size:14px;margin-top:8px;overflow-wrap:anywhere}.crypto-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.crypto-fields input,.crypto-fields select{border:1px solid var(--line);border-radius:9px;color:var(--text);background:var(--bg);padding:12px;width:100%}.crypto-consent{font-size:13px;line-height:1.5;margin:18px 0}.crypto-consent input{width:auto;margin-right:5px}#cryptoActions summary{cursor:pointer;font-size:14px}.crypto-history{margin-top:25px}.crypto-movement{display:grid;grid-template-columns:1fr auto;gap:6px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.crypto-movement small{color:var(--muted);grid-column:1/-1}@media(max-width:700px){.crypto-fields{grid-template-columns:1fr}.crypto-balances{grid-template-columns:repeat(2,minmax(0,1fr))}}

.p2p-view .ticker,.p2p-view .price-chart,.p2p-view .pair-balances,.p2p-view .market-note{display:none}.p2p-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.p2p-flow section{border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--bg)}.p2p-flow strong{font-size:14px}.p2p-flow p{color:var(--muted);font-size:13px;line-height:1.6}#p2pPanel summary{cursor:pointer;font-size:14px}@media(max-width:700px){.p2p-flow{grid-template-columns:1fr;gap:8px}.p2p-flow section{padding:12px}.p2p-flow p{margin-bottom:0}}

.crypto-exchange{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.crypto-exchange select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}.crypto-direction{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}.crypto-direction button{min-width:44px;min-height:44px;font-size:20px}

.crypto-market-pending{margin:14px 0 18px;color:var(--muted)}.crypto-market-pending h2{font-size:14px;margin:0}.crypto-market-pairs{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.crypto-market-pairs button:disabled{background:transparent;color:var(--muted);border:1px solid var(--line);opacity:.6;cursor:not-allowed;padding:8px 11px;font-size:12px;border-radius:8px;box-shadow:none}#pair option:disabled{color:#81858b}.crypto-view .crypto-market-pending,.p2p-view .crypto-market-pending{display:none}

/* Keep long pair labels and market tabs inside the mobile viewport. */
html,body{max-width:100%;overflow-x:clip}
main,main>section,main>div,.ticker>div,.ordershead>*{min-width:0}
nav{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
nav button{flex:0 0 auto;white-space:nowrap}
.ticker{gap:12px;flex-wrap:wrap}.ticker>div:first-child{flex:1 1 170px;max-width:100%}
.pair{width:100%;max-width:100%;min-width:0}
.stats{flex-wrap:wrap;min-width:0;max-width:100%}
.ordershead{gap:8px;flex-wrap:wrap}.ordershead select{min-width:0;max-width:100%}
.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.panel,.bot-fields>div,.crypto-balances>*{min-width:0;max-width:100%}
.panel p,.order,.balance-purpose{overflow-wrap:anywhere}
@media(max-width:700px){.ticker>div:first-child{flex-basis:140px}.stats{gap:8px}.pair{font-size:16px}.ordershead h2{margin-bottom:0}nav{padding-bottom:3px}}
@media(max-width:360px){body:not(.portal-market-embedded) .workspace{grid-template-columns:minmax(0,1fr)}}