:root { --bg:#070707; --panel:#0e0e0e; --panel-2:#141414; --line:#2a2a2a; --line-soft:#1c1c1c; --ink:#f5f5f1; --soft:#b5b5b1; --muted:#73736f; --market-up:#2fd6a3; --market-up-soft:#2fd6a31c; --market-down:#ff5d73; --market-down-soft:#ff5d731c; --font:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --display:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --nav:"Geist","Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; }
* { box-sizing:border-box; } html { min-width:320px; background:var(--bg); } body { margin:0; color:var(--ink); background:radial-gradient(900px 500px at 87% -10%,#1b1b1b 0%,transparent 60%),var(--bg); font-family:var(--font); } a { color:inherit; text-decoration:none; } button { font:inherit; }
.demo-bar { height:27px; display:flex; align-items:center; justify-content:center; gap:8px; border-bottom:1px solid var(--line); color:#959591; background:#0b0b0b; font:8px var(--mono); letter-spacing:.85px; } .demo-bar span,.signal { width:5px; height:5px; border-radius:50%; background:#f4f4ef; box-shadow:0 0 0 4px #ffffff12; } .demo-bar b { color:#444; }
.app-header { position:sticky; z-index:5; top:0; height:76px; display:flex; align-items:center; gap:32px; padding:0 clamp(18px,3vw,48px); border-bottom:1px solid var(--line); background:#080808e8; backdrop-filter:blur(18px); }.wordmark { display:flex; align-items:center; gap:10px; flex:0 0 auto; }.wordmark>b { font:700 17px var(--nav); letter-spacing:.5px; }.mark { display:block; flex:0 0 auto; width:36px; height:36px; overflow:hidden; border:0; border-radius:10px; background:#0a0a0a; }.mark img { display:block; width:100%; height:100%; object-fit:contain; }.main-nav { display:flex; align-items:center; gap:3px; }.main-nav a { padding:9px 11px; border-radius:4px; color:#8c8c88; font:600 11px var(--nav); transition:.2s; }.main-nav a:hover { color:var(--ink); background:#191919; }.main-nav a.active { color:#0a0a0a; background:#f1f1ed; }.header-account { display:flex; align-items:center; gap:10px; margin-left:auto; }.header-balance { display:grid; gap:3px; padding-right:4px; text-align:right; }.header-balance small { color:var(--muted); font:7px var(--mono); letter-spacing:.8px; }.header-balance b { font:600 11px var(--mono); }.wallet-button { padding:8px 10px; border:1px solid #414141; border-radius:4px; color:#e8e8e4; font:600 10px var(--nav); }.wallet-button:hover { color:#111; background:#f1f1ed; }.avatar { display:grid; place-items:center; width:32px; height:32px; border:1px solid #555; border-radius:50%; color:#121212; background:#e8e8e3; font:9px var(--mono); }.mobile-menu { display:none; }
.page-wrap { width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:37px 0 80px; }.page-intro { display:flex; align-items:end; justify-content:space-between; padding-bottom:27px; }.eyebrow,.label { color:var(--muted); font:9px var(--mono); letter-spacing:1px; }.page-intro h1 { margin:8px 0 0; font:700 clamp(31px,4vw,48px)/.95 var(--display); letter-spacing:-2.5px; }.page-intro p { margin:9px 0 0; color:#999995; font-size:12px; }.wallet-link { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; color:#bbb; font:10px var(--mono); }.wallet-link b { color:#eee; font-size:13px; }
.surface,.balance-card,.metric-card { border:1px solid var(--line); border-radius:7px; background:linear-gradient(135deg,#121212,#0d0d0d 70%); }.surface header { display:flex; align-items:start; justify-content:space-between; gap:20px; }.surface header h2 { margin:6px 0 0; font:700 18px var(--display); letter-spacing:-.7px; }.surface header>a,.surface>a { color:#a8a8a4; font:10px var(--mono); }.surface header>a:hover,.surface>a:hover { color:#fff; }.pill { padding:5px 7px; border:1px solid #3a3a3a; border-radius:3px; color:#bbb; font:8px var(--mono); }
.dashboard-hero { display:grid; grid-template-columns:1.8fr repeat(3,.82fr); gap:10px; }.balance-card { position:relative; min-height:226px; padding:24px; overflow:hidden; }.balance-card h2 { position:relative; z-index:1; margin:16px 0 8px; font:700 clamp(34px,4.2vw,58px)/.95 var(--display); letter-spacing:-3px; }.balance-card p { position:relative; z-index:1; margin:0; color:#a8a8a4; font:10px var(--mono); }.balance-card p b { margin-left:8px; color:#111; background:#f3f3ee; padding:4px 5px; border-radius:2px; font-weight:500; }.balance-actions { position:relative; z-index:1; display:flex; gap:7px; margin-top:29px; }.balance-actions a { min-width:110px; padding:10px 11px; border:1px solid #4a4a4a; border-radius:3px; color:#e9e9e5; font-size:10px; font-weight:800; }.balance-actions a:hover { color:#111; background:#f2f2ed; }.balance-actions i { float:right; color:#8f8f8d; font-style:normal; }.orb { position:absolute; border:1px solid #3c3c3c; border-radius:50%; transform:rotateX(59deg) rotateZ(-25deg); opacity:.7; }.orb-a { width:310px; height:310px; right:-55px; bottom:-220px; box-shadow:0 0 0 45px #171717,0 0 0 90px #121212; }.orb-b { width:212px; height:212px; right:20px; top:-155px; }.orb-c { width:86px; height:86px; right:80px; top:24px; border-style:dashed; }.metric-card { min-height:226px; padding:21px 17px; display:flex; flex-direction:column; }.metric-card span { color:#858581; font:9px var(--mono); letter-spacing:.8px; }.metric-card strong { margin-top:38px; font:700 19px var(--display); letter-spacing:-.7px; }.metric-card p { margin:7px 0 0; color:#8c8c88; font-size:9px; line-height:1.35; }.bar { position:relative; height:2px; margin-top:auto; background:#383838; }.bar b { position:absolute; inset:0 auto 0 0; background:#eee; }
.dashboard-tilt { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style:preserve-3d; will-change:transform; transition:transform .18s cubic-bezier(.2,.7,.2,1); }.dashboard-tilt::before { content:""; position:absolute; inset:0; z-index:0; opacity:.42; background:radial-gradient(250px 120px at var(--glow-x,70%) var(--glow-y,25%),#ffffff16,transparent 68%); pointer-events:none; }.dashboard-gyro { position:absolute; z-index:0; right:34px; bottom:25px; width:106px; height:106px; transform:translateZ(25px) rotateX(62deg) rotateZ(-27deg); }.dashboard-gyro i { position:absolute; inset:0; border:1px solid #575757; border-radius:50%; animation:gyro-spin 10s linear infinite; }.dashboard-gyro i:nth-child(2) { inset:18px; border-color:#777; animation-duration:7s; animation-direction:reverse; }.dashboard-gyro i:nth-child(3) { inset:37px; border-color:#aaa; animation-duration:5s; }.dashboard-gyro b { position:absolute; left:45px; top:45px; width:16px; height:16px; border-radius:50%; background:#f2f2ed; box-shadow:0 0 28px #fff8; }.dashboard-tilt h2,.dashboard-tilt p,.dashboard-tilt .balance-actions { transform:translateZ(35px); }
.two-col { display:grid; grid-template-columns:1.38fr 1fr; gap:10px; margin-top:10px; }.market-list,.allocation { min-height:318px; padding:20px; }.market-list header { margin-bottom:18px; }.market-head,.market-row { display:grid; grid-template-columns:1.2fr 1fr .5fr .38fr; align-items:center; column-gap:11px; }.market-head { padding:0 8px 10px; color:#777; font:8px var(--mono); }.market-row { min-height:52px; padding:0 8px; border-top:1px solid var(--line-soft); }.market-row:hover { background:#191919; }.market-row>span { display:flex; align-items:center; gap:8px; }.market-row i,.table-row i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#161616; background:#efefea; font:13px Georgia; font-style:normal; }.market-row b,.table-row b { font-size:10px; }.market-row small,.table-row small { margin-left:3px; color:#777; font:8px var(--mono); }.market-row strong { font:500 9px var(--mono); }.market-row em { justify-self:start; color:#111; background:#eee; padding:3px 4px; border-radius:2px; font:8px var(--mono); font-style:normal; }.market-row u { color:#c6c6c2; text-decoration:none; font-size:9px; text-align:right; }.allocation-body { display:flex; align-items:center; gap:33px; min-height:226px; }.donut { position:relative; display:grid; place-items:center; width:160px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#f3f3ee 0 42%,#a7a7a2 42% 70%,#686865 70% 88%,#333 88%); }.donut::before { content:""; position:absolute; width:123px; aspect-ratio:1; border-radius:50%; background:#101010; }.donut div { position:relative; z-index:1; display:grid; text-align:center; }.donut b { font:700 29px var(--display); letter-spacing:-2px; }.donut small { color:#777; font:8px var(--mono); }.legend { flex:1; display:grid; gap:12px; }.legend p { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:7px; margin:0; color:#a4a4a0; font-size:10px; }.legend i { width:6px; height:6px; border-radius:50%; background:#f3f3ee; }.legend p:nth-child(2) i { background:#a7a7a2; }.legend p:nth-child(3) i { background:#686865; }.legend p:nth-child(4) i { background:#333; }.legend b { color:#e6e6e2; font:9px var(--mono); }.activity { margin-top:10px; padding:20px; }.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; border-top:1px solid var(--line-soft); }.activity-grid p { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; min-height:65px; margin:0; padding:12px 15px 12px 0; border-right:1px solid var(--line-soft); }.activity-grid p+p { padding-left:15px; }.activity-grid p:last-child { border-right:0; }.activity-grid i { display:grid; place-items:center; width:23px; height:23px; border:1px solid #494949; border-radius:50%; color:#f0f0ed; font-style:normal; font-size:11px; }.activity-grid b,.activity-grid small { display:block; }.activity-grid b { font-size:10px; }.activity-grid small { margin-top:3px; color:#777; font-size:8px; }.activity-grid strong { font:500 9px var(--mono); }
.market-screen,.asset-table { padding:23px; }.market-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:22px 0; }.market-grid article { position:relative; min-height:136px; padding:17px; border:1px solid var(--line); border-radius:5px; background:#111; }.market-grid i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#111; background:#eee; font:15px Georgia; font-style:normal; }.market-grid b,.market-grid strong,.market-grid em { display:block; }.market-grid b { margin-top:15px; font:11px var(--mono); }.market-grid strong { margin-top:7px; font:700 18px var(--display); letter-spacing:-.7px; }.market-grid em { margin-top:5px; color:#eee; font:8px var(--mono); font-style:normal; }.market-grid em.flat { color:#aaa; }.primary-link { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-width:180px; padding:12px 15px; border:0; border-radius:3px; color:#111!important; background:#f2f2ed; font-size:10px; font-weight:800; }.primary-link:hover { background:#cfcfca; }.primary-link b { font-size:14px; }
.trade-layout { display:grid; grid-template-columns:1.68fr .74fr; gap:10px; }.trade-chart,.demo-order { padding:22px; }.trade-chart header>div:last-child { display:flex; align-items:center; gap:8px; }.trade-chart header strong { font:700 21px var(--display); letter-spacing:-1px; }.trade-chart header em { padding:4px 5px; color:#111; background:#eee; font:8px var(--mono); font-style:normal; }.trade-chart h2 { font-size:23px!important; }.trade-chart h2 small { color:#777; font:9px var(--mono); }.chart { position:relative; height:330px; margin-top:19px; padding-left:30px; }.chart>span { position:absolute; left:0; color:#666; font:8px var(--mono); }.chart>span:nth-child(1){top:0}.chart>span:nth-child(2){top:47%}.chart>span:nth-child(3){bottom:1px}.chart svg { width:100%; height:100%; }.chart .grid { fill:none; stroke:#272727; }.chart .area { fill:url(#fade); fill:#ffffff0e; }.chart .line { fill:none; stroke:#f4f4ee; stroke-width:2; }.demo-order { display:grid; align-content:start; gap:14px; background:linear-gradient(145deg,#181818,#0d0d0d); }.order-tabs { display:grid; grid-template-columns:1fr 1fr; margin-top:6px; padding:3px; border:1px solid var(--line); border-radius:4px; color:#888; font-size:10px; text-align:center; }.order-tabs>* { padding:8px; }.order-tabs b { border-radius:2px; color:#111; background:#eee; }.demo-order label { display:grid; gap:7px; color:#777; font:8px var(--mono); }.demo-order label strong { padding:12px; border:1px solid #3c3c3c; border-radius:3px; color:#ededE8; background:#101010; font:600 12px var(--mono); }.demo-order label small { float:right; color:#777; font-size:8px; }.demo-order p { margin:0; color:#73736f; font-size:8px; line-height:1.5; }
.convert-shell { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:8vw; min-height:480px; padding:3vw 7vw; border:1px solid var(--line); border-radius:8px; background:radial-gradient(circle at 85% 25%,#1d1d1d,transparent 27%),#0d0d0d; }.convert-card { width:min(100%,425px); padding:26px; }.convert-card h2 { margin:15px 0 26px; font:700 32px/.97 var(--display); letter-spacing:-1.6px; }.convert-field { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:65px; padding:0 14px; border:1px solid #424242; border-radius:4px; background:#101010; }.convert-field small { color:#777; font:8px var(--mono); }.convert-field b { font:600 13px var(--font); }.convert-field strong { font:500 12px var(--mono); }.swap-mark { position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; margin:-2px auto; border:5px solid #111; border-radius:50%; color:#111; background:#eee; font-size:16px; }.convert-card p { color:#777; font:8px var(--mono); }.convert-card .primary-link { width:100%; margin-top:10px; }.convert-note { position:relative; max-width:270px; min-height:240px; padding:30px; border:1px solid #333; border-radius:50%; background:#121212; }.convert-note p { position:relative; z-index:1; margin-top:30px; font:600 18px/1.2 var(--display); letter-spacing:-.6px; }.convert-note i { position:absolute; right:20px; bottom:20px; color:#e9e9e4; font:50px Georgia; font-style:normal; }
.earn-lead { display:flex; align-items:center; justify-content:space-between; min-height:290px; padding:28px 9vw; border-bottom:1px solid var(--line); }.earn-lead h2,.prediction-head h2 { margin:13px 0; font:700 clamp(39px,5vw,65px)/.88 var(--display); letter-spacing:-3px; }.earn-lead p,.prediction-head p { color:#999; font-size:12px; }.earn-orbit { position:relative; display:grid; place-items:center; flex:0 0 auto; width:210px; aspect-ratio:1; border:1px solid #555; border-radius:50%; background:radial-gradient(circle at 34% 28%,#ffffff18 0 4%,#ffffff08 18%,transparent 39%),radial-gradient(circle at 68% 74%,#000b 0 18%,transparent 57%),linear-gradient(145deg,#232323,#0b0b0b 72%); box-shadow:inset 16px 16px 35px #ffffff08,inset -26px -28px 48px #000b; }.earn-orbit::before { content:""; position:absolute; inset:23px; border:1px solid #ffffff1c; border-radius:50%; box-shadow:inset 0 0 24px #0008; }.earn-orbit i { position:absolute; z-index:2; width:10px; height:10px; border-radius:50%; background:#eee; box-shadow:0 0 20px #fff8; }.earn-orbit i:first-child { left:7px; top:65px; }.earn-orbit i:nth-child(2) { right:7px; bottom:65px; background:#777; }.earn-orbit b { display:grid; position:relative; z-index:1; text-align:center; font:700 35px var(--display); letter-spacing:-2px; }.earn-orbit small { color:#777; font:8px var(--mono); letter-spacing:1px; }.earn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }.earn-grid article { min-height:210px; padding:22px; }.earn-grid h3 { margin:25px 0 8px; font:700 18px var(--display); }.earn-grid strong { font:700 35px var(--display); letter-spacing:-2px; }.earn-grid strong small { color:#777; font:9px var(--mono); letter-spacing:0; }.earn-grid p { color:#888; font-size:9px; }.earn-grid a { display:block; margin-top:31px; color:#dcdcd8; font-size:10px; }
.prediction-head { max-width:680px; padding:25px 0 35px; }.prediction-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.prediction-grid article { min-height:235px; padding:21px; }.prediction-grid article>span { color:#777; font:8px var(--mono); }.prediction-grid h3 { min-height:58px; margin:20px 0; font:700 18px/1.12 var(--display); letter-spacing:-.5px; }.prediction-grid div { display:flex; justify-content:space-between; align-items:center; gap:8px; }.prediction-grid div b { display:flex; align-items:center; flex:1; gap:7px; color:#bbb; font:8px var(--mono); }.prediction-grid div i { height:4px; flex:1; background:#eee; }.prediction-grid div strong { font:10px var(--mono); }.prediction-grid a { display:block; margin-top:34px; color:#e9e9e5; font-size:10px; }
.wallet-hero { display:grid; grid-template-columns:1.3fr .7fr; gap:10px; }.wallet-summary { display:grid; grid-template-columns:1fr auto; align-content:center; gap:14px; padding:22px; border:1px solid var(--line); border-radius:7px; background:#0e0e0e; }.wallet-summary span { color:#777; font:8px var(--mono); }.wallet-summary b { font:600 12px var(--mono); }.asset-table { margin-top:10px; }.table-row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; align-items:center; gap:10px; min-height:58px; padding:0 10px; border-top:1px solid var(--line-soft); }.table-row>span { display:flex; align-items:center; gap:8px; }.table-row strong { font:500 9px var(--mono); }.table-label { min-height:40px; color:#777; border-top:0; font:8px var(--mono); }
.wallet-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }.wallet-actions>a { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:11px; min-height:82px; padding:16px; border:1px solid var(--line); border-radius:6px; background:#0e0e0e; }.wallet-actions>a:hover,.wallet-actions>a.active { border-color:#5a5a56; background:#171717; }.wallet-actions i { display:grid; place-items:center; width:29px; height:29px; border:1px solid #555; border-radius:50%; color:#eee; font-style:normal; }.wallet-actions b,.wallet-actions small { display:block; }.wallet-actions b { font:600 11px var(--font); }.wallet-actions small { margin-top:4px; color:#777; font-size:9px; }.wallet-actions em { color:#aaa; font-style:normal; }.wallet-flow { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:10px; margin-top:10px; padding:20px; }.wallet-flow>span { grid-column:1 / -1; }.wallet-flow h2 { grid-column:1 / -1; margin:0 0 5px; font:700 23px var(--display); letter-spacing:-1px; }.wallet-flow div { min-height:78px; padding:14px; border:1px solid var(--line); border-radius:4px; background:#111; }.wallet-flow div b { font:600 10px var(--mono); }.wallet-flow div p { margin:7px 0 0; color:#858581; font-size:9px; }.wallet-flow .primary-link { min-width:152px; }

.public-shell { min-height:100vh; background:radial-gradient(800px 430px at 78% 12%,#1f1f1f 0%,transparent 60%),#080808; }.public-header { width:min(1240px,calc(100% - 48px)); height:83px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid #262626; }.public-header nav { display:flex; gap:26px; margin-left:auto; margin-right:17px; }.public-header nav a,.text-link { color:#adadaa; font:500 11px var(--nav); }.public-header nav a:hover,.text-link:hover { color:#fff; }.public-header>div { display:flex; align-items:center; gap:17px; }.public-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:11px 14px; border-radius:3px; color:#101010; background:#f2f2ec; font:700 10px var(--nav); }.public-cta:hover { background:#d3d3cd; }.public-cta b { font-size:14px; }.landing { width:min(1240px,calc(100% - 48px)); margin:auto; }.landing-hero { min-height:570px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }.landing-copy { padding:50px 0; }.landing-copy h1 { margin:15px 0; font:700 clamp(58px,8vw,104px)/.82 var(--display); letter-spacing:-6px; }.landing-copy h1 i { color:#bbb; font-style:normal; }.landing-copy p { max-width:400px; color:#aaa; font-size:14px; line-height:1.6; }.landing-actions { display:flex; align-items:center; gap:20px; margin-top:29px; }.landing-copy>small { display:block; margin-top:17px; color:#666; font-size:9px; }.hero-object { position:relative; min-height:390px; display:grid; place-items:center; perspective:700px; }.hero-card { position:relative; z-index:2; width:min(330px,80%); min-height:190px; padding:24px; border:1px solid #5a5a5a; border-radius:8px; background:linear-gradient(150deg,#262626,#111); box-shadow:25px 35px 60px #0008; transform:rotateX(10deg) rotateY(-16deg) rotateZ(5deg); }.hero-card>span { color:#999; font:8px var(--mono); letter-spacing:1px; }.hero-card>b { display:block; margin-top:37px; font:600 33px var(--display); letter-spacing:-1.8px; }.hero-card>b span { color:#858581; font-size:18px; }.hero-card p { margin:16px 0 0; color:#bbb; font-size:9px; }.hero-card p i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#eee; }.ring { position:absolute; border:1px solid #484848; border-radius:50%; transform:rotateX(62deg) rotateZ(-28deg); }.ring-one { width:390px; height:390px; }.ring-two { width:270px; height:270px; box-shadow:0 0 0 62px #ffffff05; }.cube { position:absolute; right:10%; top:20%; width:36px; height:36px; border:1px solid #888; transform:rotate(31deg) rotateX(60deg); }.landing-proof { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #262626; border-bottom:1px solid #262626; }.landing-proof p { margin:0; padding:19px 13px; color:#b5b5b1; border-right:1px solid #262626; font:500 11px var(--nav); }.landing-proof p:last-child { border-right:0; }.landing-proof span { margin-right:13px; color:#666; font:8px var(--mono); }.landing-features { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:65px 0; }.landing-features article { min-height:220px; padding:20px; border:1px solid #2b2b2b; border-radius:6px; background:#0d0d0d; }.landing-features span { color:#777; font:9px var(--mono); }.landing-features h2 { margin:31px 0 12px; font:700 23px/1.02 var(--display); letter-spacing:-1.1px; }.landing-features p { color:#8d8d89; font-size:10px; line-height:1.55; }
.landing-webgl { position:absolute; z-index:0; inset:-35px; width:calc(100% + 70px); height:calc(100% + 70px); opacity:0; pointer-events:none; transition:opacity .8s ease; }.hero-object.webgl-ready .landing-webgl { opacity:.88; }.hero-object.webgl-ready .ring,.hero-object.webgl-ready .cube { opacity:.32; }.hero-card[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:rotateX(calc(10deg + var(--tilt-y))) rotateY(calc(-16deg + var(--tilt-x))) rotateZ(5deg) translateZ(24px); transform-style:preserve-3d; will-change:transform; transition:transform .18s cubic-bezier(.2,.7,.2,1); }
.auth-page { width:min(1000px,calc(100% - 48px)); min-height:calc(100vh - 83px); margin:auto; display:grid; grid-template-columns:.88fr 1.12fr; }.auth-card { align-self:center; max-width:380px; padding:45px 0; }.auth-back { display:inline-block; margin-bottom:45px; color:#aaa; font:10px var(--nav); }.auth-card h1 { margin:12px 0 8px; font:700 41px var(--display); letter-spacing:-2px; }.auth-card>p { margin:0 0 28px; color:#959591; font-size:11px; }.auth-card label { display:grid; gap:8px; margin-top:15px; color:#777; font:8px var(--mono); letter-spacing:.7px; }.auth-card input:not([type="checkbox"]) { height:46px; padding:0 12px; border:1px solid #383838; border-radius:3px; outline:none; color:#eee; background:#111; font:12px var(--font); }.auth-card input:not([type="checkbox"]):focus { border-color:#777; }.auth-card .check { display:flex; align-items:center; gap:8px; color:#999; font:9px var(--font); letter-spacing:0; }.auth-card .full { width:100%; margin-top:21px; }.auth-card small { display:block; margin-top:16px; color:#777; text-align:center; font-size:9px; }.auth-card small a,.forgot { color:#eee; }.forgot { display:block; margin-top:12px; font-size:9px; text-align:right; }.auth-art { position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden; border-left:1px solid #262626; }.auth-art>span { position:absolute; top:32px; left:36px; color:#777; font:600 10px var(--nav); letter-spacing:1px; }.auth-art::before,.auth-art::after { content:""; position:absolute; width:440px; height:440px; border:1px solid #333; border-radius:50%; transform:rotateX(60deg) rotateZ(-20deg); }.auth-art::after { width:290px; height:290px; box-shadow:0 0 0 70px #fff2; }.auth-art div { position:relative; z-index:1; text-align:center; }.auth-art b { font:100px Georgia; font-weight:400; }.auth-art p { margin:25px 0 0; font:600 21px/1.1 var(--display); letter-spacing:-1px; }

/* Offcode exchange direction: dense market utility, one focused depth object. */
.landing { width:min(1320px,calc(100% - 56px)); }.landing-hero { min-height:610px; grid-template-columns:.88fr 1.12fr; gap:5vw; }.landing-copy { padding-top:15px; }.landing-copy h1 { max-width:640px; margin:17px 0; font-size:clamp(56px,6.7vw,90px); line-height:.88; letter-spacing:-5px; }.landing-copy h1 i { color:#9d9d99; }.landing-copy p { max-width:365px; font-size:13px; }.depth-stage { min-height:450px; perspective:1200px; }.depth-panel { position:relative; z-index:2; width:min(450px,84%); min-height:316px; padding:20px; border:1px solid #696965; border-radius:4px; color:#f2f2ed; background:linear-gradient(145deg,#202020,#111 64%); box-shadow:28px 35px 55px #000b; transform:rotateX(8deg) rotateY(-13deg) rotateZ(3deg); }.depth-panel header { display:flex; justify-content:space-between; align-items:center; color:#cbcbc6; font:600 10px var(--mono); }.depth-panel header i { color:#858581; font:8px var(--mono); font-style:normal; }.depth-price { display:flex; align-items:baseline; gap:10px; margin:33px 0 25px; }.depth-price>b { font:700 41px var(--display); letter-spacing:-2px; }.depth-price>b span { color:#8d8d89; font-size:21px; }.depth-price em { padding:4px 5px; color:#111; background:#ededE8; border-radius:2px; font:8px var(--mono); font-style:normal; }.depth-book { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:16px 0; border-top:1px solid #3a3a3a; border-bottom:1px solid #3a3a3a; }.depth-book>div { display:grid; gap:7px; }.depth-book i { display:block; height:8px; border-right:1px solid #aaa; background:linear-gradient(90deg,#e9e9e4,#777); opacity:.83; }.depth-book>div:first-child i { justify-self:end; border-right:0; border-left:1px solid #aaa; background:linear-gradient(90deg,#555,#eee); }.depth-book i:nth-child(1){width:89%}.depth-book i:nth-child(2){width:63%}.depth-book i:nth-child(3){width:76%}.depth-book i:nth-child(4){width:47%}.depth-book i:nth-child(5){width:92%}.depth-panel footer { display:flex; gap:28px; margin-top:17px; color:#858581; font:8px var(--mono); }.depth-panel footer b { margin-left:5px; color:#e2e2de; font-weight:500; }.depth-axis { position:absolute; z-index:1; right:3%; bottom:8%; left:5%; height:180px; transform:rotateX(69deg) rotateZ(-5deg); }.depth-axis i { position:absolute; left:0; right:0; border-top:1px solid #696965; opacity:.4; }.depth-axis i:nth-child(1){top:0}.depth-axis i:nth-child(2){top:50%}.depth-axis i:nth-child(3){bottom:0}.depth-stage .landing-webgl { opacity:.6; }.depth-stage.webgl-ready .landing-webgl { opacity:.8; }.landing-proof { grid-template-columns:repeat(4,1fr); }.landing-proof p { display:grid; gap:5px; min-height:72px; padding:17px 18px; }.landing-proof p b { color:#e7e7e2; font:600 11px var(--nav); }.landing-proof p span { margin:0; color:#777; font:9px var(--font); }.landing-features { padding:72px 0; }.landing-features article { min-height:250px; padding:24px; border-radius:2px; background:linear-gradient(145deg,#121212,#0d0d0d); }.feature-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid #4f4f4c; border-radius:50%; color:#ededE8!important; font:16px var(--font)!important; }.landing-features h2 { margin:36px 0 14px; font-size:24px; letter-spacing:-1.3px; }.landing-features p { max-width:280px; }.landing-features a { display:block; margin-top:25px; color:#e5e5e0; font:600 10px var(--nav); }
.page-wrap { padding-top:28px; }.page-intro { padding-bottom:20px; }.page-intro h1 { font-size:34px; letter-spacing:-1.9px; }.page-intro p { margin-top:6px; }.dashboard-hero { grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:10px; }.dashboard-hero .balance-card { min-height:260px; padding:23px 25px; background:linear-gradient(145deg,#171717,#0d0d0d 72%); }.dashboard-hero .balance-card h2 { margin-top:28px; font-size:50px; }.dashboard-hero .balance-actions { margin-top:31px; }.dashboard-hero .orb-a { width:360px; height:360px; right:-76px; bottom:-268px; opacity:.45; }.dashboard-hero .orb-b,.dashboard-hero .orb-c { display:none; }.portfolio-command { min-height:260px; padding:21px; border:1px solid var(--line); border-radius:7px; background:#0e0e0e; }.portfolio-command header { display:flex; justify-content:space-between; align-items:center; }.portfolio-command header a { color:#c7c7c2; font:9px var(--mono); }.portfolio-rows { display:grid; gap:12px; margin-top:22px; }.portfolio-rows p { position:relative; display:grid; grid-template-columns:1fr auto; gap:4px; margin:0; padding-bottom:10px; border-bottom:1px solid #242424; }.portfolio-rows span { color:#888; font-size:9px; }.portfolio-rows b { color:#eee; font:600 10px var(--mono); }.portfolio-rows i { grid-column:1/-1; display:block; height:2px; background:linear-gradient(90deg,#eee var(--row-size,40%),#323232 0); }.portfolio-rows p:nth-child(1) i{--row-size:87.6%}.portfolio-rows p:nth-child(2) i{--row-size:12.4%}.portfolio-rows p:nth-child(3) i{--row-size:0%}.portfolio-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }.portfolio-actions a { padding:9px; border:1px solid #3d3d3d; border-radius:3px; color:#e7e7e2; font:600 10px var(--nav); }.portfolio-actions a:hover { color:#111; background:#ededE8; }.portfolio-actions b { float:right; font-size:13px; }.dashboard-hero .metric-card { display:none; }.two-col { grid-template-columns:1.25fr .75fr; }.market-list,.allocation { min-height:305px; }.activity { margin-top:10px; }
.depth-panel[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:rotateX(calc(8deg + var(--tilt-y))) rotateY(calc(-13deg + var(--tilt-x))) rotateZ(3deg) translateZ(18px); transform-style:preserve-3d; will-change:transform; transition:transform .18s cubic-bezier(.2,.7,.2,1); }
.depth-panel { z-index:3; border-color:#8a8a85; background:linear-gradient(145deg,#292929,#161616 58%,#0c0c0c); box-shadow:0 36px 90px #000d, inset 0 1px #ffffff12; }.depth-panel::before { content:""; position:absolute; inset:10px; border:1px solid #ffffff0d; pointer-events:none; }.depth-panel header,.depth-price,.depth-book,.depth-panel footer { position:relative; z-index:1; }.depth-stage .landing-webgl { opacity:.7; }.depth-stage.webgl-ready .landing-webgl { opacity:.86; }.landing-proof { grid-template-columns:repeat(4,minmax(0,1fr))!important; }.landing-proof p { min-width:0; border-right:1px solid #262626; }.landing-proof p:last-child { border-right:0; }
.depth-book i { animation:depth-pulse 3.6s ease-in-out infinite alternate; }.depth-book i:nth-child(2n) { animation-delay:-1.4s; }.depth-book i:nth-child(3n) { animation-delay:-2.1s; }.landing-proof { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
@keyframes gyro-spin { to { transform:rotate(360deg); } }
@keyframes depth-pulse { to { opacity:.42; transform:scaleX(.74); transform-origin:right; } }
@media (max-width:1050px) { .app-header{gap:15px}.main-nav a{padding:8px 7px;font-size:10px}.dashboard-hero{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}.dashboard-hero .metric-card:last-child{display:none}.allocation-body{gap:18px}.donut{width:130px}.earn-lead{padding-inline:5vw}.convert-shell{padding-inline:5vw}.prediction-grid{grid-template-columns:1fr 1fr}.prediction-grid article:last-child{grid-column:1 / -1}.trade-layout{grid-template-columns:1fr .65fr}.landing-copy h1{font-size:74px}.auth-page{grid-template-columns:1fr 1fr} }
@media (max-width:760px) { .demo-bar{font-size:7px}.app-header{height:64px;padding-inline:16px}.main-nav{display:none;position:absolute;top:63px;left:12px;right:12px;padding:10px;border:1px solid #373737;border-radius:5px;background:#111;box-shadow:0 20px 50px #000a}.main-nav.open{display:grid;grid-template-columns:repeat(2,1fr)}.main-nav a{padding:12px}.mobile-menu{display:grid;gap:5px;width:31px;height:31px;margin-left:auto;padding:8px;border:1px solid #3c3c3c;border-radius:50%;background:transparent}.mobile-menu i{display:block;height:1px;background:#eee}.header-balance{display:none}.wallet-button{font-size:9px}.page-wrap{width:min(100% - 28px,1280px);padding-top:25px}.page-intro{align-items:start;padding-bottom:20px}.page-intro p{font-size:10px}.wallet-link{padding:8px}.wallet-link:not(.signal){font-size:0}.wallet-link .signal,.wallet-link b{font-size:12px}.dashboard-hero,.two-col,.trade-layout,.wallet-hero,.convert-shell{grid-template-columns:1fr}.dashboard-hero{gap:8px}.metric-card{min-height:105px}.metric-card strong{margin-top:18px}.balance-card{min-height:215px}.two-col,.activity,.market-screen,.asset-table{margin-top:8px}.allocation-body{justify-content:center}.activity-grid{grid-template-columns:1fr}.activity-grid p,.activity-grid p+p{padding:12px 0;border-right:0;border-bottom:1px solid var(--line-soft)}.activity-grid p:last-child{border-bottom:0}.market-grid,.earn-grid{grid-template-columns:1fr 1fr}.market-grid article{min-height:120px}.trade-chart,.demo-order{padding:16px}.chart{height:210px}.convert-shell{gap:28px;min-height:0;padding:34px 20px}.convert-note{margin:auto}.earn-lead{min-height:0;padding:25px 4vw}.earn-orbit{width:125px}.prediction-grid{grid-template-columns:1fr}.prediction-grid article:last-child{grid-column:auto}.table-row{grid-template-columns:1.25fr 1fr 1fr}.table-row>*:nth-child(3){display:none}.table-label>*:nth-child(3){display:none}.wallet-actions{gap:8px}.wallet-actions>a{grid-template-columns:29px 1fr;padding:12px}.wallet-actions em{display:none}.wallet-flow{grid-template-columns:1fr;padding:16px}.wallet-flow .primary-link{width:100%}.public-header{width:calc(100% - 32px);height:68px}.public-header nav{display:none}.public-header>div{margin-left:auto}.public-header .text-link{display:none}.landing,.auth-page{width:calc(100% - 32px)}.landing-hero{grid-template-columns:1fr;min-height:0;padding:68px 0 38px}.landing-copy{padding:0}.landing-copy h1{font-size:65px}.hero-object{min-height:300px}.landing-proof,.landing-features{grid-template-columns:1fr}.landing-proof p{border-right:0;border-bottom:1px solid #262626}.landing-features{padding:35px 0}.landing-features article{min-height:170px}.auth-page{grid-template-columns:1fr;min-height:calc(100vh - 68px)}.auth-card{max-width:none;padding:55px 0}.auth-art{display:none} }
@media (max-width:470px) { .wordmark>b{font-size:15px}.page-intro h1{font-size:33px}.wallet-link{border:0}.dashboard-hero{grid-template-columns:1fr 1fr}.balance-card{grid-column:1 / -1}.metric-card:last-child{display:flex}.market-head,.market-row{grid-template-columns:1.15fr 1fr .55fr}.market-head>*:last-child,.market-row>*:last-child{display:none}.market-grid,.earn-grid{grid-template-columns:1fr}.earn-lead{display:block}.earn-orbit{margin:30px auto 0}.market-screen,.asset-table{padding:16px}.surface header h2{font-size:16px}.wallet-summary{grid-template-columns:1fr auto}.trade-chart header>div:last-child{display:grid;gap:3px}.prediction-head h2{font-size:43px} }
@media (max-width:470px) { .portfolio-command{grid-column:1 / -1}.landing-proof{grid-template-columns:1fr}.depth-panel{width:92%;padding:16px}.depth-price>b{font-size:34px}.depth-book{gap:12px}.depth-panel footer{gap:10px} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} .landing-webgl{display:none}.dashboard-gyro i{animation:none} }

/* Codebot keeps the exchange's dense, monochrome terminal language. */
.codebot-screen { display:grid; gap:14px; }.codebot-summary { display:grid; grid-template-columns:1.28fr .72fr; gap:14px; }.codebot-balance-card,.codebot-overview-card { min-height:252px; padding:29px; border-radius:22px; background:radial-gradient(340px 190px at 85% 15%,#303030 0%,transparent 68%),linear-gradient(145deg,#1a1a1a,#0c0c0c 72%); }.codebot-balance-card { position:relative; overflow:hidden; }.codebot-balance-card::after { content:""; position:absolute; right:-100px; bottom:-178px; width:300px; height:300px; border:1px solid #ffffff24; border-radius:50%; box-shadow:0 0 0 45px #ffffff08,0 0 0 90px #ffffff05; }.codebot-balance-card>* { position:relative; z-index:1; }.codebot-balance-card h2 { margin:21px 0 5px; font:600 14px var(--font); }.codebot-balance-card>strong { display:block; font:700 clamp(38px,4vw,57px)/1 var(--display); letter-spacing:-3px; }.codebot-balance-card>strong small { color:#aaa; font:11px var(--mono); letter-spacing:0; }.codebot-balance-card p { margin:10px 0 22px; color:#999; font:10px var(--mono); }.codebot-balance-card p b { color:#e5e5df; font-weight:500; }.codebot-balance-card .primary-link { min-width:145px; }.codebot-overview-card { display:grid; align-content:center; gap:23px; }.codebot-overview-card div { display:grid; gap:7px; padding-bottom:17px; border-bottom:1px solid #ffffff18; }.codebot-overview-card div:last-child { padding:0; border:0; }.codebot-overview-card b { color:#eee; font:600 18px var(--mono); }.codebot-overview-card a,.codebot-overview-card small { color:#92928e; font:9px var(--mono); }.codebot-overview-card a:hover { color:#eee; }
.codebot-plan-section { min-width:0; padding-top:12px; }.codebot-plan-section>header,.codebot-cycle>header,.codebot-positions>header { display:flex; align-items:end; justify-content:space-between; gap:20px; }.codebot-plan-section h2,.codebot-cycle h2,.codebot-positions h2 { margin:7px 0 0; font:700 24px var(--display); letter-spacing:-1.1px; }.codebot-plan-section>header p,.codebot-cycle>header p,.codebot-positions>header>span { margin:0; color:#898985; font:9px var(--mono); }.codebot-plans { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-top:16px; }.codebot-plans button { display:grid; align-content:start; min-height:173px; padding:18px 15px; border:1px solid #373737; border-radius:20px; color:#b5b5b0; background:linear-gradient(145deg,#171717,#0c0c0c); text-align:left; cursor:pointer; transition:transform .2s,border-color .2s,background .2s,color .2s; }.codebot-plans button:hover { transform:translateY(-3px); border-color:#898985; }.codebot-plans button[aria-pressed="true"] { color:#111; border-color:#f1f1ed; background:#f1f1ed; }.codebot-plans span { font:9px var(--mono); letter-spacing:1px; }.codebot-plans b { margin:23px 0 4px; font:700 24px var(--display); letter-spacing:-1px; }.codebot-plans small,.codebot-plans i { font-size:9px; line-height:1.4; }.codebot-plans i { margin-top:auto; font-style:normal; }.codebot-cycle { padding:23px; }.codebot-cycle ol { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:20px 0 0; padding:0; list-style:none; }.codebot-cycle li { display:grid; gap:8px; padding:12px 10px; border-top:1px solid #ffffff20; background:linear-gradient(90deg,#ffffff08,#ffffff02); }.codebot-cycle li span { color:#888; font:8px var(--mono); }.codebot-cycle li b { font:600 15px var(--display); }
.codebot-positions { padding:23px; overflow:hidden; }.codebot-positions>header { margin-bottom:17px; }.codebot-position-head,.codebot-position { display:grid; grid-template-columns:1.35fr 1fr 1.15fr 1fr 1.15fr; gap:15px; align-items:center; }.codebot-position-head { padding:0 8px 10px; color:#777; font:8px var(--mono); }.codebot-position { min-height:81px; padding:13px 8px; border-top:1px solid #ffffff18; }.codebot-position>div { display:grid; gap:7px; }.codebot-position b { font-size:11px; }.codebot-position small { color:#868682; font:8px var(--mono); }.codebot-position>strong { font:500 10px var(--mono); }.codebot-progress { display:block; width:100%; height:3px; overflow:hidden; background:#343434; }.codebot-progress i { display:block; width:var(--codebot-progress); height:100%; background:#eee; }.codebot-status { width:max-content; padding:4px 5px; border:1px solid #ffffff2d; border-radius:3px; color:#e9e9e4; font:8px var(--mono); }.codebot-position button { justify-self:start; padding:0; border:0; color:#eee; background:transparent; font:700 9px var(--nav); text-decoration:underline; cursor:pointer; }
.codebot-dialog-open { overflow:hidden; }.codebot-dialog[hidden],.codebot-toast[hidden] { display:none; }.codebot-dialog { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:24px; }.codebot-dialog-scrim { position:absolute; inset:0; border:0; background:#000c; backdrop-filter:blur(8px); cursor:default; }.codebot-dialog-panel { position:relative; z-index:1; width:min(540px,100%); max-height:calc(100dvh - 48px); padding:28px; overflow:auto; border:1px solid #ffffff2b; border-radius:23px; background:radial-gradient(360px 220px at 90% 0,#292929,transparent 70%),#101010; box-shadow:0 35px 100px #000d; }.codebot-dialog-handle { display:none; }.codebot-dialog-panel header { display:flex; align-items:start; justify-content:space-between; gap:18px; }.codebot-dialog-panel h2 { margin:8px 0 4px; font:700 28px/.95 var(--display); letter-spacing:-1.5px; }.codebot-dialog-panel header p { margin:0; color:#92928e; font:10px var(--mono); }.codebot-dialog-panel header>button { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:1px solid #ffffff2d; border-radius:50%; color:#eee; background:#161616; font-size:24px; cursor:pointer; }.codebot-dialog-balance { display:flex; justify-content:space-between; gap:12px; margin:23px 0 17px; padding:12px 0; border-block:1px solid #ffffff18; color:#999; font:9px var(--mono); }.codebot-dialog-balance b { color:#eee; font-weight:500; }.codebot-amount { display:grid; gap:8px; color:#999; font:8px var(--mono); }.codebot-amount>div { display:flex; align-items:center; border:1px solid #4a4a4a; border-radius:8px; background:#0b0b0b; transition:border-color .18s,box-shadow .18s; }.codebot-amount>div:focus-within { border-color:#f1f1ed; box-shadow:0 0 0 3px #ffffff18; }.codebot-amount input { width:100%; min-width:0; padding:15px; border:0; outline:0; color:#eee; background:transparent; font:600 17px var(--mono); }.codebot-amount b { padding-right:15px; color:#aaa; font:10px var(--mono); }.codebot-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:9px; }.codebot-quick button { min-height:31px; border:1px solid #3a3a3a; border-radius:5px; color:#ccc; background:#181818; font:9px var(--mono); cursor:pointer; }.codebot-error { min-height:15px; margin:8px 0 0; color:#ff909d; font:9px var(--mono); }.codebot-estimate { display:grid; gap:10px; margin:11px 0 17px; padding:15px; border-radius:10px; background:#191919; }.codebot-estimate div { display:flex; justify-content:space-between; gap:15px; color:#999; font:9px var(--mono); }.codebot-estimate b { color:#eee; font-weight:500; }.codebot-estimate div:nth-child(2) { padding-top:10px; border-top:1px solid #ffffff18; }.codebot-disclosure { margin:0 0 16px; color:#858581; font-size:9px; line-height:1.5; }.codebot-confirm { width:100%; }.codebot-confirm:disabled { color:#777!important; background:#303030; cursor:not-allowed; }.codebot-toast { position:fixed; z-index:51; right:24px; bottom:24px; max-width:min(360px,calc(100vw - 48px)); margin:0; padding:14px 16px; border:1px solid #ffffff30; border-radius:9px; color:#eee; background:#1b1b1b; box-shadow:0 18px 50px #000b; font:10px var(--mono); }
.codebot-plans button:focus-visible,.codebot-position button:focus-visible,.codebot-dialog button:focus-visible,.codebot-overview-card a:focus-visible,.utility-hero .primary-link:focus-visible,.utility-side a:focus-visible { outline:2px solid #f1f1ed; outline-offset:3px; }

@media (max-width:760px) { .codebot-screen { gap:11px; }.codebot-summary { grid-template-columns:1fr; gap:10px; }.codebot-balance-card,.codebot-overview-card { min-height:0; padding:22px; border-radius:20px; }.codebot-balance-card>strong { font-size:40px; }.codebot-overview-card { gap:18px; }.codebot-plan-section { padding-top:8px; }.codebot-plan-section>header { align-items:start; }.codebot-plan-section>header p { max-width:130px; text-align:right; line-height:1.4; }.codebot-plans { grid-auto-flow:column; grid-auto-columns:minmax(182px,63vw); grid-template-columns:none; overflow-x:auto; margin-inline:-14px; padding:0 14px 6px; scroll-snap-type:x mandatory; scrollbar-width:none; }.codebot-plans::-webkit-scrollbar { display:none; }.codebot-plans button { min-height:158px; padding:17px; border-radius:18px; scroll-snap-align:start; }.codebot-cycle,.codebot-positions { padding:20px; border-radius:18px; }.codebot-cycle>header { align-items:start; }.codebot-cycle>header p { max-width:110px; text-align:right; line-height:1.4; }.codebot-cycle ol { grid-template-columns:repeat(3,1fr); gap:6px; }.codebot-cycle li { padding:10px 7px; }.codebot-cycle li span { line-height:1.35; }.codebot-position-head { display:none; }.codebot-position { grid-template-columns:1fr auto; gap:8px 14px; min-height:0; padding:16px 0; }.codebot-position>strong { justify-self:end; }.codebot-position>div:nth-child(3) { grid-column:1/-1; grid-row:2; }.codebot-position>strong:nth-child(4) { grid-column:2; grid-row:2; align-self:start; }.codebot-position>div:last-child { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }.codebot-position>div:last-child small { margin-left:auto; }.codebot-dialog { align-items:end; padding:0; }.codebot-dialog-panel { width:100%; max-height:88dvh; padding:12px 20px calc(24px + env(safe-area-inset-bottom)); border-bottom:0; border-radius:24px 24px 0 0; }.codebot-dialog-handle { display:block; width:42px; height:4px; margin:0 auto 17px; border-radius:3px; background:#5d5d5d; }.codebot-dialog-panel h2 { font-size:25px; }.codebot-toast { right:14px; bottom:calc(85px + env(safe-area-inset-bottom)); max-width:calc(100vw - 28px); } }
@media (prefers-reduced-motion:reduce) { .codebot-plans button,.codebot-dialog-panel { transition:none!important; } }

/* The landing terminal is deliberately CSS-only: its depth must never obscure the data. */
.landing-copy h1 { font-size:clamp(56px,6.1vw,82px); }
.depth-stage { isolation:isolate; min-height:430px; overflow:hidden; border:1px solid #292929; border-radius:3px; background:radial-gradient(420px 250px at 52% 35%,#252525 0%,#0e0e0e 55%,#080808 100%); }
.depth-stage::before { content:""; position:absolute; z-index:0; inset:0; opacity:.32; background:linear-gradient(90deg,transparent 49.85%,#ffffff12 50%,transparent 50.15%),linear-gradient(#ffffff0b 1px,transparent 1px); background-size:100% 100%,100% 36px; pointer-events:none; }
.depth-panel { box-sizing:border-box; display:block; z-index:3; width:min(440px,86%); min-height:332px; padding:22px; border:1px solid #b6b6ae; border-radius:2px; color:#f2f2ed; background:#1b1b1b; box-shadow:26px 34px 0 #0007,0 34px 76px #000d,inset 0 1px #ffffff1a; }
.depth-panel[data-tilt] { transform:perspective(1100px) rotateX(calc(6deg + var(--tilt-y))) rotateY(calc(-7deg + var(--tilt-x))) rotateZ(1deg) translateZ(18px); }
.depth-panel::before { inset:8px; border-color:#ffffff14; }
.depth-panel header { padding-bottom:13px; border-bottom:1px solid #484846; }
.depth-price { margin:25px 0 19px; }
.depth-price>b { font-size:43px; }
.depth-book { gap:27px; padding:13px 0 15px; border-color:#4a4a47; }
.depth-book>div { position:relative; gap:8px; padding-top:13px; }
.depth-book>div::before { position:absolute; top:0; left:0; color:#8c8c87; font:7px var(--mono); letter-spacing:1px; }
.depth-book>div:first-child::before { content:"BIDS"; }
.depth-book>div:last-child::before { content:"ASKS"; }
.depth-book i { height:7px; border-color:#e9e9e2; background:linear-gradient(90deg,#f0f0ea,#777); }
.depth-book>div:first-child i { background:linear-gradient(90deg,#565656,#f0f0ea); }
.depth-panel footer { justify-content:space-between; gap:8px; }
.depth-axis { z-index:1; right:5%; bottom:9%; left:5%; opacity:.8; }
.depth-axis i { border-color:#92928d; }

@media (max-width:760px) { .depth-stage { min-height:350px; } }

/* Signature landing: a floating market instrument, not a boxed dashboard preview. */
.landing-hero--signature { min-height:max(650px,calc(100vh - 83px)); grid-template-columns:minmax(0,.94fr) minmax(440px,1.06fr); gap:3vw; }
.landing-hero--signature .landing-copy { position:relative; z-index:2; padding-top:0; }
.landing-hero--signature .eyebrow { display:flex; align-items:center; gap:10px; color:#bababa; font-family:"DM Mono",var(--mono); }
.landing-hero--signature .live-status>i { display:block; width:7px; height:7px; border-radius:50%; background:#f5f5ef; box-shadow:0 0 0 0 #ffffff55; animation:offcode-pulse 2.3s ease-out infinite; }
.landing-hero--signature .landing-copy h1 { max-width:760px; margin:26px 0 23px; color:#f2f2ed; font:700 clamp(54px,6.2vw,91px)/.95 "Syne",var(--display); letter-spacing:-5.5px; }
.landing-hero--signature .landing-copy h1 em { position:relative; color:#c9c9c6; font-style:normal; }
.landing-hero--signature .landing-copy h1 em::after { content:""; position:absolute; left:7%; bottom:-.055em; width:82%; height:.075em; border-radius:50%; background:#f2f2ed; opacity:.76; transform:rotate(-2deg); }
.landing-hero--signature .landing-copy p { max-width:414px; color:#aaa; font:500 14px/1.7 "Manrope",var(--font); letter-spacing:-.25px; }
.landing-hero--signature .landing-actions { gap:26px; margin-top:31px; }
.landing-hero--signature .public-cta { padding:16px 21px; border-radius:5px; font-family:"Manrope",var(--nav); box-shadow:0 14px 34px #ffffff10; }
.landing-hero--signature .text-link { display:inline-flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid #ffffff40; color:#e6e6e1; font-family:"Manrope",var(--nav); }
.landing-hero--signature .text-link b { font-size:16px; font-weight:500; }
.landing-hero--signature .landing-copy>small { margin-top:23px; color:#686864; font:9px "DM Mono",var(--mono); }
.market-sculpture { position:relative; min-height:480px; overflow:visible; isolation:isolate; }
.market-sculpture::before { content:""; position:absolute; z-index:-2; width:560px; height:560px; top:50%; right:-120px; border-radius:50%; background:radial-gradient(circle,#3b3b3b55 0%,#20202030 30%,transparent 67%); filter:blur(4px); transform:translateY(-50%); }
.market-orbit { position:absolute; z-index:-1; border:1px solid #ffffff1d; border-radius:50%; pointer-events:none; }
.market-orbit--one { width:620px; height:620px; top:50%; right:-120px; transform:translateY(-50%) rotateX(59deg) rotateZ(-19deg); }
.market-orbit--two { width:455px; height:455px; top:50%; right:-38px; border-color:#ffffff12; transform:translateY(-50%) rotateX(69deg) rotateZ(24deg); }
.market-orbit--one::after { content:""; position:absolute; inset:76px; border:1px solid #ffffff12; border-radius:inherit; }
.market-stars i { position:absolute; z-index:0; width:5px; height:5px; border-radius:50%; background:#eee; box-shadow:0 0 13px #fff8; }
.market-stars i:nth-child(1){ top:16%; right:33%; }.market-stars i:nth-child(2){ top:31%; right:8%; width:3px; height:3px; opacity:.7; }.market-stars i:nth-child(3){ right:12%; bottom:16%; width:3px; height:3px; opacity:.6; }.market-stars i:nth-child(4){ bottom:22%; left:16%; width:4px; height:4px; opacity:.5; }
.market-terminal { --tilt-x:0deg; --tilt-y:0deg; position:absolute; z-index:2; top:50%; right:5%; width:min(570px,88%); padding:28px 31px 26px; border:1px solid #ffffff55; border-radius:21px; color:#f3f3ed; background:linear-gradient(135deg,#292929e8,#171717ed 64%,#101010f4); box-shadow:-28px 39px 63px #0009,inset 1px 1px #ffffff1a; backdrop-filter:blur(14px); transform:translateY(-50%) perspective(1000px) rotateX(calc(3deg + var(--tilt-y))) rotateY(calc(-7deg + var(--tilt-x))) rotateZ(1.4deg); transform-style:preserve-3d; transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s; overflow:hidden; }
.market-terminal:hover { box-shadow:-32px 46px 72px #000b,inset 1px 1px #ffffff26; }
.market-terminal header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.terminal-asset { display:flex; align-items:center; gap:12px; }
.terminal-asset>span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#111; background:radial-gradient(circle at 32% 28%,#fff,#d2d2cc 58%,#858582); font:27px Georgia; box-shadow:0 6px 22px #fff2; }
.terminal-asset p { display:grid; gap:5px; margin:0; }.terminal-asset small,.terminal-asset b { font-family:"DM Mono",var(--mono); }.terminal-asset small { color:#bdbdb8; font-size:9px; letter-spacing:.9px; }.terminal-asset b { color:#f3f3ed; font-size:12px; }
.terminal-live { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #ffffff2d; border-radius:7px; color:#d8d8d2; font:9px "DM Mono",var(--mono); font-style:normal; }.terminal-live b { display:block; width:6px; height:6px; border-radius:50%; background:#eee; box-shadow:0 0 9px #fff; }
.terminal-value { position:relative; z-index:1; display:flex; align-items:baseline; gap:13px; margin:32px 0 12px; }.terminal-value>b { font:700 37px/1 "Syne",var(--display); letter-spacing:-2px; }.terminal-value>b span { color:#b9b9b5; font-size:22px; }.terminal-value em { padding:5px 7px; border-radius:4px; color:#111; background:#f2f2ed; font:9px "DM Mono",var(--mono); font-style:normal; }
.terminal-chart { position:relative; z-index:1; display:block; width:100%; height:157px; margin:0; overflow:visible; }.terminal-chart::before { content:""; }.terminal-chart .chart-area { fill:url(#offcode-chart-area); }.terminal-chart .chart-line { fill:none; stroke:url(#offcode-chart-line); stroke-width:3; stroke-linecap:round; }
.market-terminal footer { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr auto; gap:22px; align-items:end; padding-top:18px; border-top:1px solid #ffffff22; }.market-terminal footer span { display:grid; gap:6px; color:#cfcfca; }.market-terminal footer small { color:#8d8d89; font:8px "DM Mono",var(--mono); }.market-terminal footer b { font:500 11px "DM Mono",var(--mono); }.market-terminal footer a { display:grid; place-items:center; width:40px; height:40px; border:1px solid #ffffff40; border-radius:50%; color:#f5f5ef; font-size:19px; transition:background .2s,color .2s,transform .2s; }.market-terminal footer a:hover { color:#111; background:#f2f2ed; transform:translate(2px,-2px); }
.terminal-shine { position:absolute; width:270px; height:270px; top:-150px; right:-100px; border-radius:50%; background:radial-gradient(circle,#ffffff17,transparent 67%); pointer-events:none; }
.orbit-label { position:absolute; right:-12px; bottom:25px; color:#ffffff45; font:9px "DM Mono",var(--mono); letter-spacing:1.4px; transform:rotate(90deg); transform-origin:100% 100%; white-space:nowrap; }
@keyframes offcode-pulse { 70% { box-shadow:0 0 0 6px #ffffff00; } 100% { box-shadow:0 0 0 0 #ffffff00; } }
@media (max-width:1050px) { .landing-hero--signature { min-height:590px; grid-template-columns:.9fr 1.1fr; gap:12px; }.landing-hero--signature .landing-copy h1 { font-size:clamp(52px,6.4vw,75px); }.market-terminal { right:0; width:min(510px,94%); padding:24px; }.market-sculpture { min-height:430px; }.market-orbit--one { width:540px; height:540px; } }
@media (max-width:760px) { .landing-hero--signature { display:block; min-height:0; padding:82px 0 50px; }.landing-hero--signature .landing-copy h1 { max-width:500px; font-size:clamp(49px,13vw,67px); letter-spacing:-4px; }.landing-hero--signature .landing-actions { align-items:flex-start; flex-direction:column; gap:17px; }.market-sculpture { min-height:455px; margin:42px -16px 0; }.market-terminal { top:50%; right:50%; width:min(470px,calc(100% - 18px)); padding:20px 18px; transform:translate(50%,-50%) perspective(900px) rotateX(calc(2deg + var(--tilt-y))) rotateY(calc(-3deg + var(--tilt-x))) rotateZ(1deg); }.market-terminal:hover { transform:translate(50%,-50%) perspective(900px) rotateX(calc(2deg + var(--tilt-y))) rotateY(calc(-3deg + var(--tilt-x))) rotateZ(1deg); }.market-orbit--one { width:500px; height:500px; right:50%; transform:translate(50%,-50%) rotateX(59deg) rotateZ(-19deg); }.market-orbit--two { width:360px; height:360px; right:50%; transform:translate(50%,-50%) rotateX(69deg) rotateZ(24deg); }.terminal-value { margin-top:25px; }.terminal-value>b { font-size:31px; }.terminal-chart { height:125px; }.terminal-live { padding:7px; font-size:7px; }.orbit-label { display:none; } }

/* Restored opening sequence from the first OFFCODE concept, monochrome only. */
.landing-hero--signature { position:relative; min-height:max(780px,calc(100vh - 83px)); }
.public-header nav { gap:31px; }
.hero-sidecopy { position:absolute; top:208px; right:-13px; display:flex; align-items:center; gap:9px; margin:0; color:#ffffff64; font:9px "DM Mono",var(--mono); letter-spacing:.8px; white-space:nowrap; transform:rotate(90deg); transform-origin:100% 0; }
.hero-sidecopy i { width:4px; height:4px; border-radius:50%; background:#eeeeea; }
.hero-scroll { position:absolute; bottom:26px; left:50%; display:grid; justify-items:center; gap:12px; color:#888884; font:8px "DM Mono",var(--mono); letter-spacing:1.1px; transform:translateX(-50%); }
.hero-scroll i { display:block; width:1px; height:42px; background:linear-gradient(#f1f1ec,#ffffff00); }
.market-ticker { overflow:hidden; border-top:1px solid #262626; border-bottom:1px solid #262626; background:#090909; }
.market-ticker>div { display:flex; align-items:center; gap:31px; width:max-content; min-height:65px; padding:0 31px; animation:market-ticker 36s linear infinite; }
.market-ticker p { display:flex; align-items:center; gap:8px; margin:0; color:#d8d8d3; font:10px "DM Mono",var(--mono); white-space:nowrap; }.market-ticker p i { display:grid; place-items:center; width:22px; height:22px; border:1px solid #ffffff3d; border-radius:50%; color:#f1f1ec; font:12px Georgia; font-style:normal; }.market-ticker p b { font-weight:500; }.market-ticker p em { color:#f2f2ed; font-style:normal; }.market-ticker>div>span { color:#797975; font:8px "DM Mono",var(--mono); letter-spacing:.7px; white-space:nowrap; }
@keyframes market-ticker { to { transform:translateX(-8%); } }
.landing-features { position:relative; gap:13px; padding:112px 0 124px; }.landing-features::before { content:"SEU PRÓXIMO MOVIMENTO"; position:absolute; top:64px; left:0; color:#7d7d79; font:9px "DM Mono",var(--mono); letter-spacing:1px; }.landing-features article { position:relative; min-height:396px; padding:26px; overflow:hidden; border-color:#3a3a38; border-radius:9px; background:radial-gradient(320px 240px at 70% 17%,#262626,#121212 64%); transition:transform .28s,border-color .28s,background .28s; }.landing-features article:hover { border-color:#bdbdb7; background:radial-gradient(320px 240px at 70% 17%,#303030,#151515 64%); transform:translateY(-7px); }.landing-features article::after { content:""; position:absolute; top:65px; right:50%; width:148px; height:148px; border:1px solid #ffffff44; border-radius:50%; transform:translateX(50%) rotateX(62deg) rotateZ(-24deg); box-shadow:0 0 0 32px #ffffff05; }.landing-features article:nth-child(2)::after { border-radius:34% 66% 67% 33% / 40% 42% 58% 60%; transform:translateX(50%) rotate(38deg); }.landing-features article:nth-child(3)::after { border-style:dashed; box-shadow:0 0 0 27px #ffffff05,0 0 0 55px #ffffff04; }.landing-features h2 { position:relative; z-index:1; margin-top:176px; font-family:"Syne",var(--display); }.landing-features p,.landing-features a,.landing-features .feature-mark { position:relative; z-index:1; }
.landing-manifesto { min-height:430px; display:flex; flex-direction:column; justify-content:space-between; padding:68px 0 42px; border-top:1px solid #252525; color:#f2f2ed; }.landing-manifesto p { margin:0; color:#9a9a96; font:10px/1.6 "DM Mono",var(--mono); letter-spacing:1px; }.landing-manifesto b { margin:-8px -5px 0; font:800 clamp(72px,13vw,180px)/.75 "Syne",var(--display); letter-spacing:-14px; }.landing-manifesto a { align-self:flex-end; }
@media (max-width:760px) { .landing-hero--signature { min-height:0; }.hero-sidecopy,.hero-scroll { display:none; }.market-ticker>div { min-height:54px; gap:21px; padding:0 18px; }.market-ticker p:nth-child(n+4) { display:none; }.landing-features { padding:80px 0 65px; }.landing-features::before { top:38px; }.landing-features article { min-height:330px; }.landing-features h2 { margin-top:151px; }.landing-manifesto { min-height:320px; padding:52px 0 32px; }.landing-manifesto b { font-size:20vw; letter-spacing:-7px; }.landing-manifesto a { align-self:flex-start; } }

/* Use the current OFFCODE type system throughout the restored landing. */
.landing-hero--signature .landing-copy h1,
.landing-features h2,
.landing-manifesto b,
.terminal-value>b { font-family:var(--display); }
.landing-hero--signature .landing-copy p,
.landing-hero--signature .public-cta,
.landing-hero--signature .text-link,
.terminal-asset b { font-family:var(--font); }
.landing-hero--signature .eyebrow,
.landing-hero--signature .landing-copy>small,
.hero-sidecopy,
.hero-scroll,
.terminal-asset small,
.terminal-live,
.terminal-value em,
.market-terminal footer small,
.market-terminal footer b,
.orbit-label,
.market-ticker p,
.market-ticker>div>span,
.landing-features::before,
.landing-manifesto p { font-family:var(--mono); }

/* Logged experience: carry the landing's floating-instrument language into every tool. */
body[data-page="dashboard"],body[data-page="markets"],body[data-page="trade"],body[data-page="convert"],body[data-page="earn"],body[data-page="prediction"],body[data-page="wallet"] { background:radial-gradient(760px 470px at 87% 9%,#242424 0%,#111111 31%,transparent 66%),#070707; }
html,body { overflow-x:clip; }
/* Strict black-and-white treatment for all native app utility states. */
.settings-list .danger,.sheet-logout { color:#eeeeea!important; }
@media (max-width:760px) { .mobile-sheet.mobile-sheet:not([hidden]) { top:auto; right:0; bottom:0; left:0; width:100%; max-height:82vh; border-radius:24px 24px 0 0; transform:none; } }
@media (max-width:760px) { .app-header { background:#121212!important; }.mobile-bottom-nav { background:#151515fa!important; }.mobile-sheet { background:linear-gradient(145deg,#1b1b1b,#0e0e0e)!important; }.mobile-sheet:not([hidden]) { top:auto; left:0; width:100%; max-height:82vh; border-radius:24px 24px 0 0; transform:none; }.sheet-option { background:#202020!important; }.sheet-option>i { background:#303030!important; }.sheet-search { background:#242424!important; } }
.demo-bar { height:30px; border-bottom-color:#ffffff18; color:#a8a8a4; background:#090909; letter-spacing:1px; }
.app-header { height:83px; border-bottom-color:#ffffff18; background:#090909de; box-shadow:0 14px 45px #0006; }.app-header::after { content:""; position:absolute; right:8%; bottom:-1px; width:155px; height:1px; background:linear-gradient(90deg,transparent,#efefea,transparent); opacity:.75; }
.main-nav { gap:7px; }.main-nav a { padding:10px 12px; border-radius:7px; }.main-nav a.active { color:#111; background:#f1f1ed; box-shadow:0 7px 22px #ffffff16; }.wallet-button { padding:10px 14px; border-radius:8px; }.wallet-button:hover { box-shadow:0 10px 25px #ffffff12; }
.page-wrap { position:relative; isolation:isolate; width:min(1360px,calc(100% - 56px)); padding:57px 0 100px; }.page-wrap::before { content:""; position:absolute; z-index:-1; right:-18vw; top:46px; width:580px; height:580px; border:1px solid #ffffff12; border-radius:50%; transform:rotateX(63deg) rotateZ(-22deg); box-shadow:0 0 0 92px #ffffff03,0 0 0 185px #ffffff02; pointer-events:none; }.page-wrap::after { content:""; position:absolute; z-index:-1; left:-14vw; top:440px; width:420px; height:420px; border:1px solid #ffffff0c; border-radius:50%; transform:rotateX(70deg) rotateZ(31deg); pointer-events:none; }
.page-intro { min-height:136px; align-items:center; padding:0 0 32px; }.page-intro h1 { margin:11px 0 0; font-size:clamp(42px,4.35vw,66px); letter-spacing:-3.9px; }.page-intro h1::after { content:""; display:block; width:52px; height:3px; margin-top:14px; border-radius:50%; background:#efefea; transform:rotate(-2deg); }.page-intro p { max-width:465px; margin-top:13px; font-size:13px; line-height:1.55; }.wallet-link { padding:12px 14px; border-color:#ffffff31; border-radius:9px; background:#101010a6; backdrop-filter:blur(12px); }.wallet-link:hover { border-color:#e9e9e4; }
.page-wrap .surface,.page-wrap .balance-card,.portfolio-command,.wallet-summary { border:1px solid #ffffff24; border-radius:20px; background:linear-gradient(138deg,#222222e8,#111111ef 68%,#0a0a0af2); box-shadow:inset 1px 1px #ffffff0d,0 21px 48px #0006; backdrop-filter:blur(14px); }.page-wrap .surface { overflow:hidden; }.page-wrap .surface header { position:relative; z-index:1; }.page-wrap .surface header h2 { font-size:21px; letter-spacing:-1px; }.page-wrap .surface header>a,.page-wrap .surface>a { color:#d9d9d5; }.page-wrap .label { color:#9d9d99; letter-spacing:1.25px; }
.dashboard-hero { gap:14px; }.dashboard-hero .balance-card { min-height:324px; padding:31px 33px; border-radius:23px; background:radial-gradient(440px 250px at 75% 10%,#3a3a3a 0%,#1b1b1be8 39%,#0e0e0efa 75%); }.dashboard-hero .balance-card::after,.wallet-hero .balance-card::after { content:""; position:absolute; z-index:0; width:470px; height:470px; right:-110px; bottom:-295px; border:1px solid #ffffff2b; border-radius:50%; transform:rotateX(61deg) rotateZ(-23deg); box-shadow:0 0 0 52px #ffffff07,0 0 0 104px #ffffff04; }.dashboard-hero .balance-card h2 { margin-top:34px; font-size:clamp(48px,4.7vw,67px); letter-spacing:-4px; }.dashboard-hero .balance-card p,.wallet-hero .balance-card p { font-size:11px; }.balance-actions a { min-width:133px; padding:12px 13px; border-color:#ffffff42; border-radius:7px; background:#0d0d0d77; }.balance-actions a:hover { box-shadow:0 12px 26px #ffffff15; }.dashboard-hero .orb-a,.dashboard-hero .orb-b,.dashboard-hero .orb-c { display:none; }
.portfolio-command { position:relative; min-height:324px; padding:28px; overflow:hidden; background:linear-gradient(145deg,#1d1d1deb,#0d0d0df2); }.portfolio-command::before { content:""; position:absolute; width:170px; height:170px; top:-76px; right:-56px; border:1px solid #ffffff1d; border-radius:50%; box-shadow:0 0 0 30px #ffffff04; }.portfolio-command header,.portfolio-rows,.portfolio-actions { position:relative; z-index:1; }.portfolio-rows { gap:15px; margin-top:29px; }.portfolio-rows p { padding-bottom:12px; border-color:#ffffff17; }.portfolio-rows i { height:3px; background:linear-gradient(90deg,#efefea var(--row-size,40%),#333 0); }.portfolio-actions { margin-top:20px; }.portfolio-actions a { padding:11px; border-color:#ffffff35; border-radius:7px; }
.two-col,.wallet-hero,.trade-layout { gap:14px; margin-top:14px; }.market-list,.allocation { min-height:334px; padding:25px; }.market-list::before,.allocation::before,.activity::before { content:""; position:absolute; width:230px; height:230px; border:1px solid #ffffff0b; border-radius:50%; pointer-events:none; }.market-list::before { right:-100px; top:-135px; }.allocation::before { left:-115px; bottom:-145px; }.activity::before { right:16%; top:-195px; }.market-list,.allocation,.activity { position:relative; }.market-row { min-height:57px; border-color:#ffffff12; transition:background .2s,transform .2s; }.market-row:hover { background:#ffffff08; transform:translateX(3px); }.market-row em { border-radius:5px; }.activity { padding:25px; }.activity-grid { border-color:#ffffff12; }.activity-grid p { min-height:72px; border-color:#ffffff12; }
.market-screen,.asset-table { padding:29px; }.market-screen { position:relative; min-height:570px; }.market-screen::before { content:""; position:absolute; width:390px; height:390px; right:-100px; top:-120px; border:1px solid #ffffff13; border-radius:50%; box-shadow:0 0 0 70px #ffffff03; }.market-grid { position:relative; z-index:1; grid-template-columns:1fr; gap:9px; margin:7px 0 24px; }.market-list-head,.market-grid .market-list-row { display:grid; grid-template-columns:43px minmax(170px,1.3fr) minmax(150px,1fr) minmax(84px,.55fr) 72px; align-items:center; gap:14px; }.market-list-head { position:relative; z-index:1; margin-top:28px; padding:0 20px 9px; color:#6f6f6b; font:7px var(--mono); letter-spacing:.65px; }.market-list-head span:first-child { grid-column:1 / 3; }.market-grid .market-list-row { position:relative; min-height:76px; padding:12px 20px; overflow:hidden; border:1px solid #ffffff23; border-radius:13px; background:linear-gradient(105deg,#202020,#111 72%); transition:transform .22s,border-color .22s,background .22s,box-shadow .22s; }.market-grid .market-list-row::before { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(90deg,#ffffff0c,transparent 42%); transform:translateX(-35%); transition:opacity .22s,transform .35s; pointer-events:none; }.market-grid .market-list-row:hover { border-color:#d9d9d3; background:linear-gradient(105deg,#292929,#151515 72%); box-shadow:0 14px 30px #0007; transform:translateX(5px); }.market-grid .market-list-row:hover::before { opacity:1; transform:translateX(0); }.market-grid .market-list-row>* { position:relative; z-index:1; }.market-grid i { width:36px; height:36px; }.market-grid b { display:grid; gap:4px; margin:0; font:700 11px var(--mono); }.market-grid b small { color:#777773; font:8px var(--font); font-weight:500; }.market-grid strong { margin:0; font:700 18px var(--display); letter-spacing:-.7px; }.market-grid em { margin:0; font-size:9px; }.market-grid u { justify-self:end; color:#aaa; font:700 9px var(--nav); text-decoration:none; transition:color .2s,transform .2s; }.market-grid .market-list-row:hover u { color:#f2f2ed; transform:translateX(2px); }.primary-link { min-width:200px; padding:14px 17px; border-radius:7px; box-shadow:0 13px 27px #ffffff14; }
.trade-chart,.demo-order { min-height:460px; padding:28px; }.trade-chart { background:radial-gradient(480px 240px at 75% 4%,#303030,#171717 47%,#0d0d0d 85%)!important; }.trade-chart::after { content:""; position:absolute; width:420px; height:420px; right:-120px; bottom:-300px; border:1px solid #ffffff1e; border-radius:50%; transform:rotateX(60deg) rotateZ(-20deg); pointer-events:none; }.trade-chart header,.chart { position:relative; z-index:1; }.chart { margin-top:30px; }.chart .grid { stroke:#ffffff18; }.chart .line { stroke:#f3f3ed; stroke-width:2.5; }.demo-order { background:linear-gradient(145deg,#242424,#111)!important; }.demo-order::before { content:"◈"; position:absolute; top:-62px; right:22px; color:#ffffff0d; font:180px Georgia; }.demo-order>* { position:relative; z-index:1; }.order-tabs { border-color:#ffffff2b; border-radius:8px; }.order-tabs b { border-radius:5px; }.demo-order label strong { border-color:#ffffff26; border-radius:7px; background:#111111cc; }.demo-order .primary-link { width:100%; }
.convert-shell { min-height:530px; border-color:#ffffff28; border-radius:22px; background:radial-gradient(450px 330px at 77% 32%,#2e2e2e,transparent 58%),linear-gradient(135deg,#1d1d1d,#0c0c0c); box-shadow:inset 1px 1px #ffffff0d,0 25px 60px #0007; }.convert-card { border-radius:18px; background:#111111a8; box-shadow:0 20px 45px #0005; }.convert-field { border-color:#ffffff2d; border-radius:9px; background:#0d0d0ddd; }.convert-note { border-color:#ffffff31; background:radial-gradient(circle at 35% 30%,#303030,#121212 66%); box-shadow:0 20px 60px #0007; }
.earn-lead { min-height:370px; padding:42px 9vw; border:1px solid #ffffff20; border-radius:22px; background:radial-gradient(430px 330px at 84% 31%,#2c2c2c,transparent 58%),#101010; box-shadow:inset 1px 1px #ffffff0d,0 24px 55px #0006; }.earn-lead h2,.prediction-head h2 { font-size:clamp(47px,5.3vw,74px); }.earn-grid { gap:14px; margin-top:14px; }.earn-grid article,.prediction-grid article { border-radius:17px!important; background:linear-gradient(145deg,#202020,#101010)!important; transition:transform .22s,border-color .22s; }.earn-grid article:hover,.prediction-grid article:hover { border-color:#d5d5d0; transform:translateY(-5px); }.prediction-head { max-width:760px; padding:10px 0 42px; }.prediction-grid { gap:14px; }.prediction-grid article { min-height:255px; padding:25px; }.prediction-grid div i { height:5px; border-radius:5px; }.earn-orbit { border-color:#ffffff42; box-shadow:inset 16px 16px 35px #ffffff08,inset -26px -28px 48px #000b,0 0 0 47px #ffffff04; }
.wallet-hero { gap:14px; }.wallet-hero .balance-card { min-height:300px; padding:31px; background:radial-gradient(440px 250px at 72% 10%,#373737,#171717 58%,#0d0d0d); }.wallet-hero .balance-card h2 { margin-top:28px; font-size:clamp(46px,4.7vw,66px); }.wallet-summary { position:relative; min-height:300px; padding:29px; overflow:hidden; border-radius:20px; }.wallet-summary::before { content:""; position:absolute; width:230px; height:230px; left:-80px; bottom:-145px; border:1px solid #ffffff18; border-radius:50%; }.wallet-summary>* { position:relative; z-index:1; }.wallet-actions { gap:14px; margin-top:14px; }.wallet-actions>a { border-color:#ffffff2e; border-radius:15px; background:linear-gradient(135deg,#1f1f1f,#111); transition:transform .22s,border-color .22s; }.wallet-actions>a:hover { border-color:#eee; transform:translateY(-4px); }.wallet-flow { border-radius:19px; }.asset-table { border-radius:20px; }.table-row { min-height:67px; border-color:#ffffff12; }.table-row:hover:not(.table-label) { background:#ffffff06; }
.portfolio-command[data-tilt],.market-screen[data-tilt],.trade-chart[data-tilt],.demo-order[data-tilt],.wallet-hero .balance-card[data-tilt],.wallet-summary[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(1300px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style:preserve-3d; transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s; will-change:transform; }
@media (max-width:760px) { .app-header { height:68px; }.app-header::after { display:none; }.page-wrap { width:calc(100% - 28px); padding:34px 0 65px; }.page-wrap::before { right:-280px; top:22px; }.page-intro { min-height:115px; padding-bottom:24px; }.page-intro h1 { font-size:42px; }.page-intro p { max-width:245px; font-size:10px; }.page-wrap .surface,.page-wrap .balance-card,.portfolio-command,.wallet-summary { border-radius:15px; }.dashboard-hero .balance-card,.portfolio-command,.wallet-hero .balance-card,.wallet-summary { min-height:250px; padding:22px; }.dashboard-hero .balance-card h2,.wallet-hero .balance-card h2 { font-size:45px; }.two-col,.wallet-hero,.trade-layout { gap:9px; margin-top:9px; }.market-list,.allocation,.activity,.market-screen,.asset-table,.trade-chart,.demo-order { padding:18px; }.earn-lead { margin:0; padding:28px 22px; border-radius:16px; }.market-grid { gap:8px; }.market-grid article { min-height:130px; padding:15px; border-radius:11px; }.portfolio-command[data-tilt],.market-screen[data-tilt],.trade-chart[data-tilt],.demo-order[data-tilt],.wallet-hero .balance-card[data-tilt],.wallet-summary[data-tilt] { transform:none; } }

/* Additional app destinations shared by desktop and the native-style mobile shell. */
.app-header>button.mobile-menu:focus,.navbar-menu-panel button:focus { outline:1px solid #efefea; outline-offset:3px; }
.sheet-open { overflow:hidden; }.mobile-sheet-scrim:not([hidden]) { position:fixed; z-index:40; inset:0; display:block; border:0; background:#000b; backdrop-filter:blur(7px); }.mobile-sheet:not([hidden]) { position:fixed; z-index:41; top:50%; left:50%; display:block; width:min(520px,calc(100% - 32px)); max-height:80vh; padding:18px 20px 24px; overflow:auto; border:1px solid #ffffff2a; border-radius:22px; color:#eee; background:#111; box-shadow:0 28px 90px #000c; transform:translate(-50%,-50%); }.mobile-sheet:not([hidden]) .sheet-handle { display:block; width:44px; height:5px; margin:0 auto 18px; border-radius:50%; background:#5b5b5b; }.mobile-sheet:not([hidden])>header { display:flex; align-items:center; justify-content:space-between; }.mobile-sheet:not([hidden])>header b { font:700 25px var(--display); letter-spacing:-1px; }.mobile-sheet:not([hidden])>header button { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffff25; border-radius:50%; color:#bdbdb8; background:transparent; font-size:25px; cursor:pointer; }.mobile-sheet:not([hidden]) .sheet-option { display:grid; grid-template-columns:49px 1fr auto; align-items:center; gap:13px; min-height:96px; margin-top:15px; padding:13px; border:1px solid #ffffff26; border-radius:15px; background:#202020; }.mobile-sheet:not([hidden]) .sheet-option>i { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:#303030; font-size:23px; font-style:normal; }.mobile-sheet:not([hidden]) .sheet-option span { display:grid; gap:5px; }.mobile-sheet:not([hidden]) .sheet-option b { font-size:14px; }.mobile-sheet:not([hidden]) .sheet-option small { color:#929292; font-size:10px; line-height:1.35; }.mobile-sheet:not([hidden]) .sheet-option em { color:#aaa; font-size:22px; font-style:normal; }.sheet-footnote { margin:18px 2px 0; color:#777; font:9px/1.5 var(--mono); }
.mobile-app-head,.mobile-bottom-nav,.mobile-wallet-person,.mobile-market-list,.mobile-sheet,.mobile-sheet-scrim { display:none; }
.navbar-menu-open { overflow:hidden; }.app-header>button.mobile-menu { display:flex!important; align-items:center; gap:8px; width:auto; height:38px; margin-left:-16px; padding:0 13px; border:1px solid #ffffff2d; border-radius:9px; color:#efefea; background:#111; font:700 9px var(--nav); letter-spacing:.65px; text-transform:uppercase; cursor:pointer; }.app-header>button.mobile-menu span { display:block; }.app-header>button.mobile-menu i { display:block; width:13px; height:1px; background:#efefea; transition:transform .2s,opacity .2s; }.app-header>button.mobile-menu i+i { margin-left:-21px; transform:translateY(4px); }.app-header>button.mobile-menu[aria-expanded="true"] i { transform:translateY(2px) rotate(45deg); }.app-header>button.mobile-menu[aria-expanded="true"] i+i { opacity:1; transform:translateY(2px) rotate(-45deg); }.navbar-menu-scrim { position:fixed; z-index:42; inset:0; display:block; border:0; background:#000b; backdrop-filter:blur(7px); }.navbar-menu-panel { position:fixed; z-index:43; top:var(--navbar-menu-top,104px); right:auto; left:var(--navbar-menu-left,calc(50vw - 425px)); display:block; width:min(850px,calc(100vw - 48px)); max-height:calc(100dvh - var(--navbar-menu-top,104px) - 24px); padding:26px; overflow:auto; border:1px solid #ffffff2d; border-radius:22px; color:#eee; background:linear-gradient(145deg,#1c1c1c,#0d0d0d 72%); box-shadow:0 36px 100px #000d; transform-origin:var(--navbar-menu-origin-x,50%) top; }.navbar-menu-panel[hidden],.navbar-menu-scrim[hidden] { display:none!important; }.navbar-menu-panel>header { display:flex; align-items:start; justify-content:space-between; gap:30px; padding:5px 4px 24px; border-bottom:1px solid #ffffff18; }.navbar-menu-panel>header h2 { max-width:420px; margin:9px 0 0; font:700 34px/.95 var(--display); letter-spacing:-2px; }.navbar-menu-panel>header>button { display:grid; place-items:center; width:40px; height:40px; border:1px solid #ffffff2b; border-radius:50%; color:#eee; background:#151515; font:25px/1 var(--font); cursor:pointer; }.navbar-menu-groups { display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:22px; padding:24px 4px 19px; }.navbar-menu-groups section { display:grid; align-content:start; }.navbar-menu-groups section>b { margin-bottom:10px; color:#878783; font:8px var(--mono); letter-spacing:1.4px; }.navbar-menu-groups a { display:grid; grid-template-columns:1fr auto; gap:3px 12px; min-height:51px; padding:10px 8px; border-bottom:1px solid #ffffff13; color:#d5d5d0; transition:background .2s,color .2s,padding .2s; }.navbar-menu-groups a:hover,.navbar-menu-groups a.active { padding-inline:12px; color:#111; background:#efefea; }.navbar-menu-groups a span { font:700 13px var(--font); }.navbar-menu-groups a i { grid-column:1; color:#777; font:8px var(--mono); font-style:normal; }.navbar-menu-groups a::after { content:"↗"; grid-column:2; grid-row:1/3; align-self:center; font:13px var(--mono); }.navbar-menu-groups a:hover i,.navbar-menu-groups a.active i { color:#555; }.navbar-menu-panel>footer { display:flex; align-items:center; justify-content:space-between; padding:17px 4px 1px; border-top:1px solid #ffffff18; color:#8f8f8b; font:9px var(--mono); }.navbar-menu-panel>footer span { display:flex; align-items:center; gap:7px; }.navbar-menu-panel>footer span i { width:6px; height:6px; border-radius:50%; background:#eee; box-shadow:0 0 0 4px #ffffff10; }.navbar-menu-panel>footer a { color:#eee; }
.shortcut-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin-top:14px; }.shortcut-grid header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }.shortcut-grid header>a { color:#d9d9d4; font:10px var(--mono); }.shortcut-grid>a { display:grid; justify-items:center; gap:9px; min-height:112px; padding:16px 8px; border:1px solid #ffffff20; border-radius:15px; color:#cfcfca; background:linear-gradient(145deg,#1b1b1b,#101010); transition:transform .2s,border-color .2s; }.shortcut-grid>a:hover { border-color:#ededE8; transform:translateY(-4px); }.shortcut-grid i { display:grid; place-items:center; width:38px; height:38px; border:1px solid #ffffff34; border-radius:12px; color:#f2f2ed; font:21px var(--display); font-style:normal; }.shortcut-grid span { font-size:10px; }
.shortcut-grid i svg { width:22px; height:22px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:transform .22s ease,stroke-width .22s ease; }.shortcut-grid>a:hover i svg,.shortcut-grid>a:focus-visible i svg { stroke-width:1.9; transform:scale(1.08); }.shortcut-grid>a:focus-visible { outline:2px solid #f1f1ec; outline-offset:4px; }
.shortcut-grid>a.mobile-only-shortcut { display:none; }
.utility-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:14px; }.utility-hero,.utility-side,.vip-lead,.security-screen { padding:37px; }.utility-hero h2,.vip-lead h2,.security-screen h2 { margin:17px 0; font:700 clamp(36px,4vw,61px)/.92 var(--display); letter-spacing:-3px; }.utility-hero p,.vip-lead p,.security-screen>p { max-width:455px; color:#aaa; font-size:13px; line-height:1.65; }.referral-code { display:flex; align-items:center; justify-content:space-between; max-width:430px; margin:29px 0 18px; padding:16px 18px; border:1px solid #ffffff2b; border-radius:9px; color:#f3f3ee; background:#0d0d0d; font:600 15px var(--mono); }.referral-code button { padding:7px 10px; border:0; border-radius:5px; color:#111; background:#eee; font:700 9px var(--nav); }.utility-side { display:grid; align-content:center; gap:9px; }.utility-side>b { font:700 clamp(36px,4vw,59px) var(--display); letter-spacing:-3px; }.utility-side p { margin:0 0 23px; color:#888; font:10px var(--mono); }.utility-side hr { width:100%; border:0; border-top:1px solid #ffffff18; }.utility-progress { height:5px; margin-top:14px; border-radius:50%; background:#303030; }.utility-progress i { display:block; height:100%; background:#eee; }.card-preview { position:relative; min-height:360px; padding:35px; overflow:hidden; border:1px solid #ffffff47; border-radius:24px; background:linear-gradient(135deg,#343434,#141414 60%,#090909); box-shadow:0 27px 70px #0008; }.card-preview::after { content:""; position:absolute; width:460px; height:460px; right:-210px; bottom:-300px; border:1px solid #ffffff27; border-radius:50%; box-shadow:0 0 0 60px #ffffff07; }.card-preview>* { position:relative; z-index:1; display:block; }.card-preview>span { font:700 22px var(--nav); letter-spacing:1px; }.card-preview>b { margin-top:80px; color:#bdbdb8; font:10px var(--mono); letter-spacing:1px; }.card-preview>i { margin-top:14px; font:500 27px var(--mono); letter-spacing:3px; font-style:normal; }.card-preview>small { position:absolute; bottom:33px; color:#aaa; font:9px var(--mono); letter-spacing:1px; }.vip-grid { display:grid; grid-template-columns:1.4fr repeat(2,.8fr); gap:14px; }.vip-grid>article:not(.vip-lead) { display:grid; align-content:end; min-height:290px; padding:28px; }.vip-grid strong { margin:17px 0; font:700 48px var(--display); letter-spacing:-3px; }.vip-grid p { color:#999; font-size:11px; line-height:1.6; }.journal-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.journal-list article { min-height:300px; padding:29px; }.journal-list h2 { margin:24px 0 13px; font:700 25px/1.05 var(--display); letter-spacing:-1.3px; }.journal-list p { color:#999; font-size:11px; line-height:1.6; }.journal-list a { display:block; margin-top:28px; color:#eee; font-size:10px; }.profile-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; }.profile-card { display:flex; align-items:center; gap:18px; min-height:190px; padding:30px; }.profile-card>i { display:grid; place-items:center; width:74px; height:74px; border:1px solid #ffffff42; border-radius:50%; color:#111; background:#eee; font:700 20px var(--mono); font-style:normal; }.profile-card h2 { margin:8px 0 4px; font:700 28px var(--display); letter-spacing:-1.5px; }.profile-card p { margin:0; color:#999; font-size:11px; }.profile-card>b { margin-left:auto; padding:6px 8px; border:1px solid #ffffff2b; border-radius:5px; color:#ddd; font:8px var(--mono); }.settings-list { padding:9px 29px; }.settings-list a { display:flex; align-items:center; justify-content:space-between; min-height:56px; border-bottom:1px solid #ffffff14; color:#eee; font-size:13px; }.settings-list a:last-child { border:0; }.settings-list .danger { color:#ff8181; }.security-screen { max-width:820px; }.security-screen>div { display:grid; grid-template-columns:1fr auto 20px; gap:18px; align-items:center; min-height:74px; border-top:1px solid #ffffff18; }.security-screen>div:first-of-type { margin-top:33px; }.security-screen>div b { font-size:12px; }.security-screen>div span { color:#999; font:9px var(--mono); }.security-screen>div i { color:#eee; font-style:normal; }.empty-key { display:grid; justify-items:center; gap:11px; margin:34px 0 22px; padding:38px; border:1px solid #ffffff1e; border-radius:14px; color:#ddd; text-align:center; }.empty-key i { display:grid; place-items:center; width:48px; height:48px; border:1px solid #ffffff32; border-radius:50%; font:25px Georgia; font-style:normal; }.empty-key small { color:#888; font-size:10px; }

.affiliate-summary { display:grid; grid-template-columns:1.35fr .65fr; gap:32px; min-height:270px; padding:37px; }.affiliate-summary h2 { margin:17px 0; font:700 clamp(36px,4vw,61px)/.92 var(--display); letter-spacing:-3px; }.affiliate-summary p { max-width:455px; color:#aaa; font-size:13px; line-height:1.65; }.affiliate-summary dl { display:grid; align-content:center; gap:22px; margin:0; }.affiliate-summary dl>div { padding-bottom:19px; border-bottom:1px solid #ffffff18; }.affiliate-summary dl>div:last-child { padding:0; border:0; }.affiliate-summary dt { color:#999; font:8px var(--mono); letter-spacing:.08em; }.affiliate-summary dd { margin:8px 0 0; font:700 clamp(28px,3vw,43px) var(--display); letter-spacing:-2px; }.affiliate-summary dd small { display:block; margin-top:4px; color:#999; font:8px var(--mono); letter-spacing:0; }.affiliate-rewards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px; }.affiliate-rewards article { min-height:190px; padding:29px; }.affiliate-rewards strong { display:block; margin:18px 0 11px; font:700 55px var(--display); letter-spacing:-3px; }.affiliate-rewards p { max-width:290px; margin:0; color:#999; font-size:11px; line-height:1.6; }.affiliate-levels { margin-top:14px; padding:29px; }.affiliate-level-table { margin-top:25px; border:1px solid #ffffff18; border-radius:12px; overflow:hidden; }.affiliate-level-row { display:grid; grid-template-columns:.48fr .86fr .8fr 1.5fr 1fr .82fr; gap:16px; align-items:center; min-height:64px; padding:0 18px; border-top:1px solid #ffffff14; color:#bcbcb7; font:10px var(--mono); }.affiliate-level-row:first-child { border:0; }.affiliate-level-row b,.affiliate-level-row strong { color:#f0f0eb; font:700 12px var(--mono); }.affiliate-level-row strong { text-align:right; }.affiliate-level-heading { min-height:42px; color:#888; background:#ffffff05; font-size:7px; letter-spacing:.07em; }.affiliate-level-heading span:last-child { text-align:right; }.affiliate-disclosures { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:16px; }.affiliate-disclosures p { margin:0; padding:14px; border:1px solid #ffffff14; border-radius:9px; color:#999; font:9px/1.6 var(--mono); }.affiliate-disclosures b { color:#d7d7d2; }
.market-search,.market-filters { display:none; }

@media (max-width:760px) {
  body.sheet-open { overflow:hidden; }
  .demo-bar { display:none; }
  .app-header { position:sticky; top:0; z-index:25; height:72px; padding:0 16px; border-bottom:1px solid #ffffff1c; background:#121419; box-shadow:none; }.app-header .wordmark>b { font-size:20px; letter-spacing:1px; }.app-header .mark { width:32px; height:32px; border-radius:9px; }.app-header .main-nav,.app-header .header-account { display:none!important; }.app-header>button.mobile-menu { display:grid!important; grid-template-columns:13px; align-content:center; gap:4px; width:40px; height:40px; margin-left:auto; padding:0 12px; border-radius:50%; }.app-header>button.mobile-menu span { display:none; }.app-header>button.mobile-menu i,.app-header>button.mobile-menu i+i { width:14px; margin:0; transform:none; }.app-header>button.mobile-menu[aria-expanded="true"] i { transform:translateY(2.5px) rotate(45deg); }.app-header>button.mobile-menu[aria-expanded="true"] i+i { transform:translateY(-2.5px) rotate(-45deg); }.navbar-menu-panel { top:72px; right:0; bottom:0; left:0; width:100%; max-height:none; padding:22px 16px calc(95px + env(safe-area-inset-bottom)); border:0; border-radius:0; background:#0d0d0d; box-shadow:none; }.navbar-menu-panel>header { position:sticky; z-index:2; top:-22px; margin:0 -16px; padding:21px 18px 17px; background:#0d0d0dfa; backdrop-filter:blur(16px); }.navbar-menu-panel>header h2 { max-width:260px; font-size:29px; }.navbar-menu-panel>header>button { display:none; }.navbar-menu-groups { grid-template-columns:1fr; gap:24px; padding:21px 0; }.navbar-menu-groups section>b { margin:0 0 7px 7px; }.navbar-menu-groups a { min-height:55px; padding:10px 9px; }.navbar-menu-groups a span { font-size:15px; }.navbar-menu-groups a i { font-size:8px; }.navbar-menu-panel>footer { align-items:start; gap:14px; padding:18px 7px; }.navbar-menu-scrim { display:none; }
  .page-wrap { width:100%; padding:20px 16px 100px; }.page-wrap::before,.page-wrap::after { display:none; }.page-intro { display:none; }.mobile-app-head { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:3px 2px 20px; }.mobile-app-head>div:first-child { display:grid; gap:5px; }.mobile-app-head span { color:#8e8e8b; font:9px var(--mono); letter-spacing:1px; }.mobile-app-head h1 { margin:0; color:#f3f3ed; font:700 28px/1 var(--display); letter-spacing:-1.5px; }.mobile-app-head>div:last-child { display:flex; gap:9px; }.mobile-icon-button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid #ffffff2b; border-radius:50%; color:#f1f1ec; background:#151515; font:10px var(--mono); }
  .page-wrap .surface,.page-wrap .balance-card,.portfolio-command,.wallet-summary { border-color:#ffffff22; border-radius:20px; box-shadow:none; backdrop-filter:none; }.dashboard-hero { display:block; margin:0; }.dashboard-hero .balance-card { min-height:238px; padding:23px; border-radius:20px; background:radial-gradient(330px 180px at 80% 0%,#292929,#111 67%); }.dashboard-hero .balance-card::after { display:none; }.dashboard-hero .balance-card h2 { margin:20px 0 8px; font-size:42px; }.dashboard-hero .balance-card p { font-size:10px; }.dashboard-hero .balance-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:25px; }.dashboard-hero .balance-actions a { min-width:0; padding:12px 7px; border-radius:9px; font-size:9px; text-align:center; }.dashboard-hero .balance-actions i { display:none; }.portfolio-command { display:none; }
  .shortcut-grid { grid-template-columns:repeat(4,1fr); gap:10px; margin-top:26px; }.shortcut-grid header { margin-bottom:1px; }.shortcut-grid>a { min-height:82px; gap:6px; padding:10px 4px; border-radius:14px; background:#121212; }.shortcut-grid i { width:31px; height:31px; border-radius:10px; font-size:17px; }.shortcut-grid span { font-size:9px; }
  .shortcut-grid i svg { width:18px; height:18px; }
  .shortcut-grid>a.mobile-only-shortcut { display:grid; }
  .two-col { display:block; margin-top:28px; }.two-col .allocation { display:none; }.market-list { min-height:0; padding:0; border:0!important; border-radius:0!important; background:transparent!important; }.market-list::before { display:none; }.market-list header { margin-bottom:9px; }.market-list header h2 { font-size:19px!important; }.market-list header>a { font-size:10px; }.market-head { display:none; }.market-row { min-height:57px; padding:0; grid-template-columns:1.35fr 1fr .62fr; border-color:#ffffff14; }.market-row>strong { font-size:9px; }.market-row u { display:none; }.activity { display:none; }
  .market-screen { min-height:0; padding:0; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.market-screen::before { display:none; }.market-screen header h2 { font-size:27px!important; }.market-screen .pill,.market-list-head { display:none; }.market-search { display:flex; align-items:center; gap:11px; height:52px; margin:20px 0; padding:0 16px; border:1px solid #ffffff28; border-radius:14px; color:#8f8f8b; background:#111; font-size:24px; }.market-search span { font-size:14px; }.market-filters { display:flex; gap:9px; overflow:auto; margin:0 -2px 21px; }.market-filters>* { flex:0 0 auto; padding:10px 13px; border-radius:10px; color:#aaa; background:#151515; font:600 10px var(--font); }.market-filters b { color:#111; background:#eee; }.market-screen .market-grid { display:none; }.mobile-market-list { display:grid; }.mobile-market-list>a { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; min-height:75px; border-bottom:1px solid #ffffff14; }.mobile-market-list i { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffff2d; border-radius:50%; color:#eee; font:17px Georgia; font-style:normal; }.mobile-market-list span,.mobile-market-list em { display:grid; gap:5px; }.mobile-market-list b { color:#eee; font-size:13px; }.mobile-market-list small { color:#858581; font-size:9px; font-style:normal; }.mobile-market-list em { color:#f0f0ec; font:500 11px var(--mono); text-align:right; }.mobile-market-list em small { color:#e4e4df; }.market-screen>.primary-link { width:100%; margin-top:20px; }
  .trade-layout { display:block; margin:0; }.trade-chart { min-height:0; padding:0; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.trade-chart::after { display:none; }.trade-chart header { align-items:end; }.trade-chart header strong { font-size:28px; }.trade-chart h2 { font-size:24px!important; }.chart { height:290px; margin:21px 0 25px; padding-left:25px; }.demo-order { min-height:0; margin-top:14px; padding:20px; border-radius:18px; }.demo-order::before { display:none; }.demo-order label strong { padding:13px; }.demo-order .primary-link { min-height:46px; }
  .convert-shell { display:block; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }.convert-card { width:100%; padding:20px; border:1px solid #ffffff24; border-radius:20px; }.convert-note { display:none; }.earn-lead { min-height:0; margin:0; padding:0 0 23px; border:0; border-radius:0; background:transparent; box-shadow:none; }.earn-lead h2,.prediction-head h2 { font-size:35px; }.earn-orbit { width:110px; }.earn-grid { grid-template-columns:1fr; gap:10px; margin-top:10px; }.earn-grid article { min-height:150px; padding:20px; }.earn-grid h3 { margin:12px 0 5px; }.earn-grid strong { font-size:32px; }.prediction-head { padding:0 0 22px; }.prediction-grid { grid-template-columns:1fr; gap:10px; }.prediction-grid article { min-height:185px; padding:20px; border-radius:18px!important; }.prediction-grid h3 { min-height:0; margin:14px 0 20px; }
  .mobile-wallet-person { display:flex; align-items:center; gap:11px; margin:-3px 2px 18px; }.mobile-wallet-person>i { display:grid; place-items:center; width:47px; height:47px; border:1px solid #ffffff30; border-radius:50%; color:#111; background:#ededE8; font:700 12px var(--mono); font-style:normal; }.mobile-wallet-person div { display:grid; gap:5px; }.mobile-wallet-person b { font-size:15px; }.mobile-wallet-person small { color:#888; font-size:9px; }.mobile-wallet-person button { margin-left:auto; border:0; color:#aaa; background:transparent; font-size:19px; }.wallet-hero { display:block; margin:0; }.wallet-hero .balance-card { min-height:207px; padding:21px; border-radius:20px; }.wallet-hero .balance-card::after { display:none; }.wallet-hero .balance-card h2 { margin:19px 0 7px; font-size:37px; }.wallet-hero .balance-actions { display:none; }.wallet-summary { display:none; }.wallet-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:20px; }.wallet-actions>a { display:grid; justify-items:center; grid-template-columns:1fr; gap:7px; min-height:80px; padding:10px 3px; border-radius:13px; background:#121212; }.wallet-actions>a i { width:28px; height:28px; font-size:18px; }.wallet-actions>a span { text-align:center; }.wallet-actions>a small,.wallet-actions>a em { display:none; }.wallet-actions>a b { font-size:9px; }.wallet-flow { margin-top:16px; padding:18px; }.asset-table { margin-top:25px; padding:0; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.asset-table header { margin-bottom:8px; }.asset-table header h2 { font-size:19px!important; }.table-label { display:none; }.table-row { grid-template-columns:41px 1fr auto!important; gap:10px; min-height:71px; padding:0 1px; border-color:#ffffff14; }.table-row>span { grid-column:1/3; gap:9px; }.table-row>strong:nth-child(2) { display:none; }.table-row>strong:nth-child(3) { grid-column:3; grid-row:1; color:#eee; font-size:10px; }.table-row>strong:nth-child(4) { grid-column:3; grid-row:2; color:#8d8d89; font-size:9px; }.table-row i { width:34px; height:34px; }
  .utility-layout,.vip-grid,.journal-list,.profile-layout { grid-template-columns:1fr; gap:11px; }.utility-hero,.utility-side,.vip-lead,.security-screen { padding:24px; }.utility-hero h2,.vip-lead h2,.security-screen h2 { font-size:35px; letter-spacing:-2px; }.utility-hero p,.vip-lead p,.security-screen>p { font-size:11px; }.utility-side { min-height:180px; }.card-preview { min-height:232px; padding:25px; border-radius:19px; }.card-preview>b { margin-top:47px; }.card-preview>i { font-size:20px; }.vip-grid>article:not(.vip-lead) { min-height:155px; }.journal-list article { min-height:190px; padding:22px; }.journal-list h2 { margin:16px 0 9px; font-size:20px; }.profile-card { min-height:140px; padding:21px; }.profile-card>b { display:none; }.settings-list { padding:2px 20px; }.settings-list a { min-height:57px; font-size:12px; }.security-screen>div { grid-template-columns:1fr auto 15px; min-height:65px; gap:8px; }.security-screen>div span { font-size:8px; }.empty-key { margin:24px 0 16px; padding:28px 12px; }
  .mobile-bottom-nav { position:fixed; z-index:30; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(6,1fr); min-height:73px; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #ffffff1c; background:#14161bfa; backdrop-filter:blur(18px); }.mobile-bottom-nav a { display:grid; place-items:center; align-content:center; gap:4px; color:#8f8f8c; font:600 8px var(--font); }.mobile-bottom-nav i { height:25px; color:#9f9f9b; font:25px/1 var(--display); font-style:normal; }.mobile-bottom-nav a.active,.mobile-bottom-nav a.active i { color:#f4f4ef; }.mobile-bottom-nav a.active span { font-weight:800; }
  .mobile-sheet-scrim { position:fixed; z-index:40; inset:0; display:block; background:#000b; backdrop-filter:blur(7px); }.mobile-sheet { position:fixed; z-index:41; right:0; bottom:0; left:0; display:block; max-height:82vh; padding:12px 18px calc(27px + env(safe-area-inset-bottom)); overflow:auto; border:1px solid #ffffff24; border-bottom:0; border-radius:24px 24px 0 0; color:#eee; background:linear-gradient(145deg,#191b20,#0e1014); box-shadow:0 -24px 70px #000a; }.mobile-sheet[hidden],.mobile-sheet-scrim[hidden] { display:none; }.sheet-handle { display:block; width:44px; height:5px; margin:0 auto 18px; border-radius:50%; background:#5b5b5b; }.mobile-sheet header { display:flex; align-items:center; justify-content:space-between; }.mobile-sheet header b { font:700 24px var(--display); letter-spacing:-1px; }.mobile-sheet header button { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffff25; border-radius:50%; color:#bdbdb8; background:transparent; font-size:26px; }.mobile-sheet>p { margin:10px 0; color:#999; font:12px var(--mono); }.sheet-status { display:inline-block; padding:7px 9px; border:1px solid #ffffff22; border-radius:6px; color:#d8d8d2; font:8px var(--mono); }.mobile-sheet nav { display:grid; margin-top:18px; border-top:1px solid #ffffff17; }.mobile-sheet nav>a { display:flex; align-items:center; justify-content:space-between; min-height:51px; border-bottom:1px solid #ffffff14; color:#eee; font-size:13px; }.mobile-sheet nav>a i { font-style:normal; }.sheet-logout { display:block; margin-top:18px; color:#ff9292; font-weight:700; }.sheet-option { display:grid; grid-template-columns:49px 1fr auto; align-items:center; gap:13px; min-height:96px; margin-top:15px; padding:13px; border:1px solid #ffffff26; border-radius:15px; background:#202329; }.sheet-option>i { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:#30343b; font-size:23px; font-style:normal; }.sheet-option span { display:grid; gap:5px; }.sheet-option b { font-size:14px; }.sheet-option small { color:#929292; font-size:10px; line-height:1.35; }.sheet-option em,.asset-picker em { color:#aaa; font-size:22px; font-style:normal; }.sheet-search { display:flex; align-items:center; gap:11px; height:54px; margin:20px 0 6px; padding:0 14px; border-radius:13px; color:#959595; background:#24272d; font-size:24px; }.sheet-search span { font-size:13px; }.asset-picker { margin-top:0!important; border-top:0!important; }.asset-picker>a { display:grid!important; grid-template-columns:43px 1fr auto; gap:11px; min-height:68px!important; }.asset-picker i { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffff2f; border-radius:50%; color:#eee; font:16px Georgia; font-style:normal; }.asset-picker span { display:grid; gap:4px; }.asset-picker small { color:#888; font-size:9px; }
}

/* Language control — one quiet, reusable instrument for every OFFCODE navbar. */
.language-selector {
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:6px;
  height:34px;
  padding:0 21px 0 8px;
  overflow:hidden;
  border:1px solid #ffffff2b;
  border-radius:9px;
  color:#d8d8d3;
  background:linear-gradient(145deg,#171717,#0d0d0d);
  transition:border-color .2s,background .2s,color .2s;
}
.language-selector:hover,
.language-selector:focus-within {
  border-color:#ffffff73;
  color:#fff;
  background:#191919;
}
.language-selector svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.language-selector select {
  position:relative;
  z-index:1;
  min-width:34px;
  padding:0;
  border:0;
  outline:0;
  appearance:none;
  color:inherit;
  background:transparent;
  font:700 7px var(--mono);
  letter-spacing:.45px;
  cursor:pointer;
}
.language-selector option {
  color:#eee;
  background:#111;
}
.language-selector::after {
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:5px;
  height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  opacity:.7;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.language-selector--mobile { display:none; }
.public-header .language-selector { height:34px; }

@media (max-width:760px) {
  .app-header .language-selector--mobile {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    margin-left:auto;
    padding:0;
    border-radius:50%;
    background:#151515;
  }
  .app-header .language-selector--mobile svg,
  .public-header .language-selector--public svg {
    display:block;
    width:14px;
    height:14px;
  }
  .app-header .language-selector--mobile select {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:0;
    opacity:0;
  }
  .app-header .language-selector--mobile::after { display:none; }
  .app-header>button.mobile-menu { margin-left:7px; }
  .public-header .language-selector--public {
    width:34px;
    height:34px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
  .public-header .language-selector--public select {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:0;
    opacity:0;
  }
  .public-header .language-selector--public::after { display:none; }
}

/* Wallet quick actions: four independent circular controls. */
.page-wrap .wallet-actions {
  display:grid;
  grid-template-columns:repeat(4,minmax(92px,1fr));
  justify-content:center;
  gap:clamp(24px,4vw,58px);
  width:min(100%,760px);
  margin:34px auto 27px;
}
.page-wrap .wallet-actions>a,
.page-wrap .wallet-actions>a:hover,
.page-wrap .wallet-actions>a.active {
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-content:start;
  gap:12px;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.page-wrap .wallet-actions>a i {
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border:1px solid #f0f0ea;
  border-radius:50%;
  color:#f2f2ed;
  background:radial-gradient(circle at 38% 29%,#2c2c2c 0,#171717 44%,#0d0d0d 78%);
  box-shadow:
    inset 0 0 0 5px #0a0a0a,
    inset 0 0 0 6px #ffffff24,
    0 14px 30px #0009;
  font:400 30px/1 var(--display);
  font-style:normal;
  transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
}
.page-wrap .wallet-actions>a span {
  display:block;
  text-align:center;
}
.page-wrap .wallet-actions>a b {
  display:block;
  color:#f1f1ec;
  font:650 12px/1.15 var(--font);
  letter-spacing:-.15px;
}
.page-wrap .wallet-actions>a small,
.page-wrap .wallet-actions>a em {
  display:none;
}
.page-wrap .wallet-actions>a:hover i,
.page-wrap .wallet-actions>a:focus-visible i {
  color:#101010;
  border-color:#f6f6f1;
  background:#f0f0eb;
  box-shadow:
    inset 0 0 0 5px #e8e8e3,
    inset 0 0 0 6px #1114,
    0 18px 34px #000b;
  transform:translateY(-4px);
}
.page-wrap .wallet-actions>a:focus-visible {
  outline:2px solid #f1f1ec;
  outline-offset:8px;
  border-radius:4px;
}

@media (max-width:760px) {
  .page-wrap .wallet-actions {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin:22px auto 26px;
  }
  .page-wrap .wallet-actions>a,
  .page-wrap .wallet-actions>a:hover,
  .page-wrap .wallet-actions>a.active {
    gap:8px;
    min-height:76px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .page-wrap .wallet-actions>a i {
    width:54px;
    height:54px;
    font-size:22px;
    box-shadow:
      inset 0 0 0 4px #0a0a0a,
      inset 0 0 0 5px #ffffff24,
      0 10px 23px #0008;
  }
  .page-wrap .wallet-actions>a b {
    font-size:9px;
  }
}

/* Dashboard summary: compact cards and wallet-style circular quick actions. */
body[data-page="dashboard"] .dashboard-hero {
  align-items:stretch;
}
body[data-page="dashboard"] .dashboard-hero .balance-card,
body[data-page="dashboard"] .portfolio-command {
  min-height:258px;
}
body[data-page="dashboard"] .dashboard-hero .balance-card {
  padding:24px 28px;
}
body[data-page="dashboard"] .dashboard-hero .balance-card::after {
  width:410px;
  height:410px;
  right:-95px;
  bottom:-292px;
}
body[data-page="dashboard"] .dashboard-hero .balance-card h2 {
  margin-top:20px;
  font-size:clamp(44px,4.2vw,58px);
  letter-spacing:-3.4px;
}
body[data-page="dashboard"] .portfolio-command {
  padding:23px 26px;
}
body[data-page="dashboard"] .portfolio-rows {
  gap:10px;
  margin-top:20px;
}
body[data-page="dashboard"] .portfolio-rows p {
  padding-bottom:9px;
}
body[data-page="dashboard"] .balance-actions--round {
  display:flex;
  width:max-content;
  gap:24px;
  margin-top:18px;
}
body[data-page="dashboard"] .balance-actions--round a,
body[data-page="dashboard"] .balance-actions--round a:hover {
  display:grid;
  justify-items:center;
  gap:8px;
  min-width:68px;
  padding:0;
  border:0;
  border-radius:0;
  color:#e9e9e5;
  background:transparent;
  box-shadow:none;
}
body[data-page="dashboard"] .balance-actions--round i {
  display:grid;
  float:none;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid #f0f0ea;
  border-radius:50%;
  color:#f2f2ed;
  background:radial-gradient(circle at 38% 29%,#2c2c2c 0,#171717 44%,#0d0d0d 78%);
  box-shadow:
    inset 0 0 0 4px #0a0a0a,
    inset 0 0 0 5px #ffffff24,
    0 12px 26px #0009;
  font:400 22px/1 var(--display);
  transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
}
body[data-page="dashboard"] .balance-actions--round span {
  color:#f1f1ec;
  font:650 10px/1.15 var(--font);
}
body[data-page="dashboard"] .balance-actions--round a:hover i,
body[data-page="dashboard"] .balance-actions--round a:focus-visible i {
  color:#101010;
  border-color:#f6f6f1;
  background:#f0f0eb;
  box-shadow:
    inset 0 0 0 4px #e8e8e3,
    inset 0 0 0 5px #1114,
    0 16px 30px #000b;
  transform:translateY(-4px);
}
body[data-page="dashboard"] .balance-actions--round a:focus-visible {
  outline:2px solid #f1f1ec;
  outline-offset:7px;
  border-radius:4px;
}

@media (max-width:760px) {
  body[data-page="dashboard"] .dashboard-hero .balance-card {
    min-height:246px;
    padding:21px 22px;
  }
  body[data-page="dashboard"] .dashboard-hero .balance-card h2 {
    margin-top:18px;
    font-size:42px;
  }
  body[data-page="dashboard"] .balance-actions--round {
    gap:20px;
    margin-top:17px;
  }
  body[data-page="dashboard"] .balance-actions--round a,
  body[data-page="dashboard"] .balance-actions--round a:hover {
    display:grid;
    min-width:57px;
    padding:0;
  }
  body[data-page="dashboard"] .balance-actions--round i {
    display:grid;
    width:52px;
    height:52px;
    font-size:20px;
  }
  body[data-page="dashboard"] .balance-actions--round span {
    font-size:9px;
  }
}

/* Trade terminal: OFFCODE's current flow, rebuilt as a denser professional workspace. */
body[data-page="trade"] {
  background:#070707;
}
body[data-page="trade"] .page-wrap {
  width:min(1500px,calc(100% - 28px));
  padding-top:14px;
}
body[data-page="trade"] .page-intro,
body[data-page="trade"] .mobile-app-head {
  display:none;
}
.trade-marketbar {
  display:grid;
  grid-template-columns:minmax(250px,1.05fr) minmax(150px,.55fr) minmax(190px,.75fr) minmax(420px,1.6fr);
  align-items:center;
  min-height:104px;
  border:1px solid #ffffff22;
  border-radius:12px 12px 5px 5px;
  background:#090909;
}
.trade-marketbar>div,
.trade-marketbar>dl {
  min-width:0;
  padding:18px 22px;
}
.trade-marketbar>div+div,
.trade-marketbar>dl {
  border-left:1px solid #ffffff18;
}
.trade-pair {
  display:flex;
  align-items:center;
  gap:11px;
}
.trade-pair>i {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:45px;
  height:45px;
  border-radius:50%;
  color:#0b0b0b;
  background:#f1f1ec;
  font:28px Georgia,serif;
  font-style:normal;
}
.trade-pair>span {
  display:grid;
  gap:4px;
}
.trade-pair b {
  color:#f3f3ee;
  font:700 18px var(--display);
  letter-spacing:-.6px;
}
.trade-pair small {
  color:#777773;
  font:8px var(--mono);
}
.trade-pair em,
.trade-pair u {
  padding:7px 8px;
  border:1px solid #ffffff24;
  border-radius:5px;
  color:#cfcfca;
  font:8px var(--mono);
  font-style:normal;
  text-decoration:none;
}
.trade-pair em {
  margin-left:auto;
}
.trade-segment {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  padding:3px!important;
  border:1px solid #ffffff20;
  border-radius:7px;
  background:#121212;
}
.trade-segment button,
.trade-timeframes button,
.trade-presets button,
.trade-positions button {
  border:0;
  color:#858581;
  background:transparent;
  font:600 9px var(--font);
  cursor:pointer;
}
.trade-segment button {
  min-height:34px;
  border-radius:4px;
}
.trade-segment button.active {
  color:#101010;
  background:#f0f0eb;
}
.trade-quote {
  display:grid;
  gap:7px;
}
.trade-quote strong {
  color:#f5f5f0;
  font:700 clamp(24px,2.3vw,35px)/1 var(--display);
  letter-spacing:-1.8px;
  white-space:nowrap;
}
.trade-quote span {
  color:#d2d2cd;
  font:9px var(--mono);
}
.trade-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:19px;
  margin:0;
}
.trade-stats div {
  display:grid;
  gap:7px;
}
.trade-stats dt {
  color:#747470;
  font:7px var(--mono);
  letter-spacing:.6px;
}
.trade-stats dd {
  margin:0;
  color:#e5e5e0;
  font:9px var(--mono);
  white-space:nowrap;
}
.trade-pro {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(215px,.58fr) minmax(290px,.76fr);
  gap:6px;
  margin-top:6px;
}
.trade-workspace,
.trade-orderbook,
.trade-ticket,
.trade-positions {
  border:1px solid #ffffff22;
  background:#090909;
}
.trade-workspace {
  min-width:0;
  overflow:hidden;
}
.trade-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:54px;
  padding:8px 13px;
  border-bottom:1px solid #ffffff17;
}
.trade-timeframes {
  display:flex;
  align-items:center;
  gap:3px;
}
.trade-timeframes button {
  min-width:36px;
  padding:9px 8px;
  border-radius:5px;
  font-family:var(--mono);
}
.trade-timeframes button.active {
  color:#111;
  background:#eeeeea;
}
.trade-view-toggle {
  width:146px;
}
.trade-chart-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  padding:9px 17px;
  color:#9a9a96;
  font:7px var(--mono);
}
.trade-chart-meta b {
  color:#c7c7c2;
  font-weight:500;
  white-space:nowrap;
}
.pro-chart {
  position:relative;
  height:472px;
  padding:0 12px 28px;
}
.pro-chart>svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.pro-grid {
  fill:none;
  stroke:#ffffff12;
  stroke-width:1;
}
.candle path {
  stroke-width:1.5;
}
.candle rect {
  stroke-width:1;
}
.candle.up path,
.candle.up rect {
  stroke:#f1f1ed;
  fill:#e8e8e3;
}
.candle.down path {
  stroke:#a1a19c;
}
.candle.down rect {
  fill:#323232;
  stroke:#b7b7b2;
}
.current-price-line {
  fill:none;
  stroke:#eeeeea;
  stroke-width:1;
  stroke-dasharray:4 5;
  opacity:.82;
}
.current-price-label {
  fill:#101010;
  stroke:#efefea;
  stroke-width:10;
  paint-order:stroke;
  font:10px var(--mono);
}
.volume-bars {
  fill:#777773;
  opacity:.72;
}
.chart-axis {
  position:absolute;
  right:20px;
  bottom:9px;
  left:20px;
  display:flex;
  justify-content:space-between;
  color:#6f6f6b;
  font:7px var(--mono);
}
.trade-depth-panel {
  display:grid;
  align-content:center;
  gap:12px;
  min-height:472px;
  padding:30px 8%;
}
.trade-depth-panel[hidden] {
  display:none;
}
.trade-depth-panel>div {
  display:grid;
  grid-template-columns:90px 1fr 100px;
  align-items:center;
  gap:12px;
  color:#bdbdb8;
  font:9px var(--mono);
}
.trade-depth-panel>div i {
  display:block;
  height:10px;
  background:linear-gradient(90deg,#303030 var(--depth),transparent 0);
}
.trade-depth-panel>div b {
  font-weight:500;
  text-align:right;
}
.trade-depth-panel>strong {
  display:grid;
  justify-items:center;
  gap:5px;
  padding:18px;
  border-block:1px solid #ffffff1a;
  font:700 27px var(--display);
}
.trade-depth-panel>strong small {
  color:#777;
  font:7px var(--mono);
}
.trade-orderbook {
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
}
.trade-orderbook>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:0 14px;
  border-bottom:1px solid #ffffff17;
}
.trade-orderbook>header b {
  font-size:11px;
}
.trade-orderbook>header span {
  color:#999995;
  font:8px var(--mono);
}
.book-head,
.book-rows p {
  display:grid;
  grid-template-columns:1fr .7fr .8fr;
  align-items:center;
  gap:6px;
}
.book-head {
  padding:12px 13px 7px;
  color:#666662;
  font:6px var(--mono);
}
.book-head span:not(:first-child),
.book-rows p>*:not(:first-child) {
  text-align:right;
}
.book-rows {
  display:grid;
}
.book-rows p {
  position:relative;
  min-height:24px;
  margin:0;
  padding:0 13px;
  color:#bcbcb8;
  font:7px var(--mono);
}
.book-rows p::before {
  content:"";
  position:absolute;
  z-index:0;
  top:2px;
  right:0;
  bottom:2px;
  width:var(--book);
  background:linear-gradient(90deg,transparent,#ffffff10);
}
.book-rows p>* {
  position:relative;
  z-index:1;
}
.book-rows p b,
.book-rows p em {
  color:#deded9;
  font-weight:500;
  font-style:normal;
}
.book-mid {
  display:grid;
  justify-items:center;
  gap:4px;
  margin:9px 0;
  padding:10px;
  border-block:1px solid #ffffff16;
}
.book-mid strong {
  font:700 20px var(--display);
}
.book-mid small {
  color:#777;
  font:6px var(--mono);
}
.trade-orderbook>footer {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding:12px 13px;
  border-top:1px solid #ffffff17;
  color:#aaa;
  font:7px var(--mono);
}
.trade-orderbook>footer i {
  height:4px;
  background:linear-gradient(90deg,#f1f1ec 53%,#404040 0);
}
.trade-ticket {
  display:grid;
  align-content:start;
  gap:12px;
  min-width:0;
  padding:13px;
}
.trade-side-tabs {
  margin:-13px -13px 0;
  border:0;
  border-bottom:1px solid #ffffff18;
  border-radius:0;
  background:transparent;
}
.trade-side-tabs button {
  min-height:47px;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:#888;
  background:transparent!important;
}
.trade-side-tabs button.active {
  color:#f1f1ed;
  border-bottom-color:#f1f1ed;
}
.trade-leverage {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#858581;
  font-size:9px;
}
.trade-leverage-control {
  position:relative;
  z-index:12;
}
.trade-leverage-trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:91px;
  min-height:34px;
  padding:0 11px;
  border:1px solid #ffffff20;
  border-radius:5px;
  color:#eee;
  background:#101010;
  font:9px var(--mono);
  cursor:pointer;
  transition:border-color .18s,background .18s;
}
.trade-leverage-trigger:hover,
.trade-leverage-trigger[aria-expanded="true"] {
  border-color:#ffffff66;
  background:#191919;
}
.trade-leverage-trigger b {
  font:700 9px var(--mono);
}
.trade-leverage-trigger i {
  color:#8d8d88;
  font-style:normal;
  transition:transform .18s;
}
.trade-leverage-trigger[aria-expanded="true"] i {
  transform:rotate(180deg);
}
.trade-leverage-menu {
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  display:grid;
  width:250px;
  gap:13px;
  padding:15px;
  border:1px solid #ffffff2d;
  border-radius:12px;
  background:linear-gradient(145deg,#1d1d1d,#0c0c0c);
  box-shadow:0 22px 55px #000c;
}
.trade-leverage-menu[hidden] {
  display:none;
}
.trade-leverage-menu>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.trade-leverage-menu>header span {
  color:#797975;
  font:7px var(--mono);
  letter-spacing:.08em;
}
.trade-leverage-menu>header output {
  color:#f0f0eb;
  font:700 18px var(--mono);
}
.trade-leverage-range {
  display:grid;
  gap:9px;
}
.trade-leverage-range input {
  --leverage-fill:48.72%;
  width:100%;
  height:4px;
  margin:6px 0;
  appearance:none;
  border-radius:999px;
  outline:0;
  background:linear-gradient(90deg,#efefea var(--leverage-fill),#3b3b38 0);
  cursor:pointer;
}
.trade-leverage-range input::-webkit-slider-thumb {
  width:17px;
  height:17px;
  appearance:none;
  border:3px solid #111;
  border-radius:50%;
  background:#efefea;
  box-shadow:0 0 0 1px #ffffff55,0 4px 13px #000b;
}
.trade-leverage-range input::-moz-range-thumb {
  width:12px;
  height:12px;
  border:3px solid #111;
  border-radius:50%;
  background:#efefea;
  box-shadow:0 0 0 1px #ffffff55,0 4px 13px #000b;
}
.trade-leverage-range>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#5e5e5b;
}
.trade-leverage-range>span b {
  font:6px var(--mono);
}
.trade-leverage-presets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.trade-leverage-menu button {
  min-width:0;
  min-height:35px;
  padding:0;
  border:1px solid #ffffff1f;
  border-radius:7px;
  color:#aaa9a4;
  background:#111;
  font:8px var(--mono);
  cursor:pointer;
}
.trade-leverage-menu button:hover {
  color:#eee;
  border-color:#ffffff55;
}
.trade-leverage-menu button.active {
  color:#111;
  border-color:#efefea;
  background:#efefea;
}
.trade-leverage-menu>small {
  color:#666662;
  font:6px/1.5 var(--mono);
}
.trade-order-type {
  width:100%;
}
.trade-field {
  display:grid;
  gap:7px;
  color:#777773;
  font:8px var(--mono);
}
.trade-field>strong {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:0 12px;
  border:1px solid #ffffff20;
  border-radius:6px;
  color:#e9e9e4;
  background:#111;
  font:500 11px var(--mono);
}
.trade-field>strong small {
  color:#777;
  font-size:7px;
}
.trade-slider {
  display:grid;
  gap:8px;
}
.trade-slider>span {
  display:flex;
  justify-content:space-between;
  color:#8e8e8a;
  font:8px var(--mono);
}
.trade-slider input {
  width:100%;
  accent-color:#f2f2ed;
}
.trade-presets {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}
.trade-presets button {
  min-height:27px;
  border:1px solid #ffffff18;
  border-radius:4px;
  font:7px var(--mono);
}
.trade-presets button.active {
  color:#111;
  background:#eee;
}
.trade-order-summary {
  display:grid;
  gap:8px;
  margin:2px 0;
}
.trade-order-summary div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#777;
  font:7px var(--mono);
}
.trade-order-summary dd {
  margin:0;
  color:#d0d0cb;
}
.trade-submit {
  min-height:49px;
  border:0;
  border-radius:5px;
  color:#101010;
  background:#f1f1ec;
  font:800 11px var(--font);
  cursor:pointer;
  transition:transform .2s,background .2s;
}
.trade-submit:hover {
  background:#d7d7d1;
  transform:translateY(-2px);
}
.trade-submit.confirmed {
  color:#eee;
  background:#292929;
}
.trade-ticket>p {
  margin:0;
  color:#646460;
  font:7px/1.45 var(--mono);
  text-align:center;
}
.trade-positions {
  margin-top:6px;
  overflow:hidden;
  border-radius:5px 5px 12px 12px;
}
.trade-positions>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:0 16px;
  border-bottom:1px solid #ffffff17;
}
.trade-positions nav {
  display:flex;
  align-self:stretch;
  gap:25px;
}
.trade-positions nav button {
  position:relative;
  padding:0;
}
.trade-positions nav button.active {
  color:#f1f1ed;
}
.trade-positions nav button.active::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:2px;
  background:#eee;
}
.trade-positions>header>span {
  color:#777;
  font:7px var(--mono);
}
.positions-head,
.positions-row {
  display:grid;
  grid-template-columns:1.2fr .7fr .8fr repeat(3,1fr) 1.15fr .7fr;
  align-items:center;
  gap:12px;
  min-width:920px;
  padding:0 17px;
}
.positions-head {
  min-height:39px;
  color:#666662;
  font:6px var(--mono);
}
.positions-row {
  min-height:65px;
  border-top:1px solid #ffffff12;
  color:#b7b7b2;
  font:8px var(--mono);
}
.positions-row b,
.positions-row strong {
  color:#eeeeea;
}
.positions-row strong {
  font-weight:500;
}

/* Market direction is the only color language outside the monochrome brand UI. */
.market-up {
  color:var(--market-up)!important;
}
.market-down {
  color:var(--market-down)!important;
}
.balance-card p b.market-up {
  color:var(--market-up)!important;
  background:var(--market-up-soft);
}
.market-ticker p em.market-up,
.market-grid em.market-up {
  color:var(--market-up);
}
.market-grid em.market-down {
  color:var(--market-down);
}
.market-row em {
  color:var(--market-up);
  background:var(--market-up-soft);
}
.market-row em.flat {
  color:var(--market-down);
  background:var(--market-down-soft);
}
.mobile-market-list em.market-up,
.mobile-market-list em.market-up small {
  color:var(--market-up);
}
.mobile-market-list em.market-down,
.mobile-market-list em.market-down small {
  color:var(--market-down);
}
.trade-quote.market-up strong,
.trade-quote.market-up span {
  color:var(--market-up);
}
.candle.up path,
.candle.up rect {
  stroke:var(--market-up);
  fill:var(--market-up);
}
.candle.down path {
  stroke:var(--market-down);
}
.candle.down rect {
  fill:var(--market-down-soft);
  stroke:var(--market-down);
}
.current-price-line {
  stroke:var(--market-up);
}
.current-price-label {
  fill:#06120e;
  stroke:var(--market-up);
}
.trade-depth-panel>div.ask span,
.trade-depth-panel>div.ask b {
  color:var(--market-down);
}
.trade-depth-panel>div.ask i {
  background:linear-gradient(90deg,var(--market-down-soft) var(--depth),transparent 0);
}
.trade-depth-panel>div.bid span,
.trade-depth-panel>div.bid b {
  color:var(--market-up);
}
.trade-depth-panel>div.bid i {
  background:linear-gradient(90deg,var(--market-up-soft) var(--depth),transparent 0);
}
.book-rows.asks p b {
  color:var(--market-down);
}
.book-rows.asks p::before {
  background:linear-gradient(90deg,transparent,var(--market-down-soft));
}
.book-rows.bids p b,
.book-mid strong,
.trade-orderbook>footer b {
  color:var(--market-up);
}
.book-rows.bids p::before {
  background:linear-gradient(90deg,transparent,var(--market-up-soft));
}
.trade-orderbook>footer span {
  color:var(--market-down);
}
.trade-orderbook>footer i {
  background:linear-gradient(90deg,var(--market-up) 53%,var(--market-down) 0);
}
.trade-side-tabs button[data-side="long"].active {
  color:var(--market-up);
  border-bottom-color:var(--market-up);
}
.trade-side-tabs button[data-side="short"].active {
  color:var(--market-down);
  border-bottom-color:var(--market-down);
}
.trade-ticket[data-trade-side="long"] .trade-slider input {
  accent-color:var(--market-up);
}
.trade-ticket[data-trade-side="short"] .trade-slider input {
  accent-color:var(--market-down);
}
.trade-ticket[data-trade-side="long"] .trade-submit {
  color:#06120e;
  background:var(--market-up);
}
.trade-ticket[data-trade-side="short"] .trade-submit {
  color:#17070a;
  background:var(--market-down);
}
.trade-ticket[data-trade-side="long"] .trade-submit:hover,
.trade-ticket[data-trade-side="short"] .trade-submit:hover {
  filter:brightness(.9);
}
.trade-ticket .trade-submit.confirmed {
  color:#eee;
  background:#292929;
  filter:none;
}

@media (max-width:1180px) and (min-width:761px) {
  .trade-marketbar {
    grid-template-columns:minmax(220px,1fr) 132px 170px minmax(330px,1.45fr);
  }
  .trade-marketbar>div,
  .trade-marketbar>dl {
    padding-inline:14px;
  }
  .trade-pro {
    grid-template-columns:minmax(0,1.55fr) minmax(190px,.53fr) minmax(270px,.74fr);
  }
  .trade-chart-meta b {
    display:none;
  }
  .book-rows p {
    padding-inline:9px;
  }
}

@media (max-width:760px) {
  body[data-page="trade"] .page-wrap {
    width:100%;
    padding:0 0 95px;
  }
  body[data-page="trade"] .app-header {
    border-bottom-color:#ffffff22;
  }
  .trade-marketbar {
    grid-template-columns:1fr 132px;
    min-height:0;
    border-width:0 0 1px;
    border-radius:0;
  }
  .trade-marketbar>div,
  .trade-marketbar>dl {
    padding:14px 16px;
  }
  .trade-marketbar>div+div {
    border-left:0;
  }
  .trade-pair {
    min-height:57px;
    padding-right:4px!important;
  }
  .trade-pair>i {
    width:39px;
    height:39px;
    font-size:23px;
  }
  .trade-pair b {
    font-size:16px;
  }
  .trade-pair small {
    display:none;
  }
  .trade-pair em,
  .trade-pair u {
    padding:6px;
    font-size:7px;
  }
  .trade-product {
    align-self:center;
    margin-right:14px;
  }
  .trade-quote {
    justify-content:start;
    min-height:111px;
    border-top:1px solid #ffffff18;
  }
  .trade-quote strong {
    font-size:37px;
    letter-spacing:-2.7px;
  }
  .trade-stats {
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:0!important;
    border-top:1px solid #ffffff18;
    border-left:1px solid #ffffff18;
  }
  .trade-stats div {
    min-height:55px;
    align-content:center;
    gap:5px;
    padding:8px 10px;
  }
  .trade-stats div:nth-child(odd) {
    border-right:1px solid #ffffff14;
  }
  .trade-stats div:nth-child(-n+2) {
    border-bottom:1px solid #ffffff14;
  }
  .trade-stats dt {
    font-size:6px;
  }
  .trade-stats dd {
    font-size:7px;
  }
  .trade-pro {
    display:block;
    margin:0;
  }
  .trade-workspace {
    border-width:0 0 1px;
  }
  .trade-toolbar {
    min-height:59px;
    padding-inline:10px;
  }
  .trade-timeframes {
    flex:1;
    justify-content:space-between;
    gap:0;
  }
  .trade-timeframes button {
    min-width:0;
    padding-inline:8px;
    font-size:8px;
  }
  .trade-view-toggle {
    width:112px;
  }
  .trade-view-toggle button {
    min-height:32px;
    font-size:8px;
  }
  .trade-chart-meta {
    display:block;
    min-height:36px;
    padding:10px 16px 4px;
  }
  .trade-chart-meta b {
    display:none;
  }
  .pro-chart {
    height:410px;
    padding:0 8px 30px;
  }
  .chart-axis {
    right:13px;
    left:13px;
    font-size:6px;
  }
  .chart-axis span:nth-child(even) {
    display:none;
  }
  .trade-depth-panel {
    min-height:410px;
    padding-inline:16px;
  }
  .trade-depth-panel>div {
    grid-template-columns:67px 1fr 72px;
    gap:7px;
    font-size:7px;
  }
  .trade-orderbook {
    display:none;
  }
  .trade-ticket {
    gap:14px;
    padding:17px 16px 22px;
    border-width:0 0 1px;
  }
  .trade-side-tabs {
    margin:-17px -16px 0;
  }
  .trade-side-tabs button {
    min-height:58px;
    font-size:11px;
  }
  .trade-leverage {
    font-size:9px;
  }
  .trade-order-type {
    width:180px;
  }
  .trade-field>strong {
    min-height:57px;
    padding-inline:14px;
    border-radius:8px;
    font-size:13px;
  }
  .trade-presets button {
    min-height:32px;
  }
  .trade-order-summary div {
    font-size:8px;
  }
  .trade-submit {
    min-height:54px;
    font-size:12px;
  }
  .trade-positions {
    margin-top:0;
    border-width:0 0 1px;
    border-radius:0;
  }
  .trade-positions>header {
    align-items:stretch;
    min-height:56px;
    overflow:auto;
  }
  .trade-positions nav {
    gap:20px;
    min-width:max-content;
  }
  .trade-positions>header>span {
    display:none;
  }
  .positions-table {
    overflow:auto;
  }
}

/* 21st-inspired finish: restrained light, tactile controls and consistent focus. */
:root {
  --ui-edge:#ffffff2c;
  --ui-edge-strong:#ffffff66;
  --ui-highlight:#f4f4ef;
  --ui-ease:cubic-bezier(.22,.78,.24,1);
}

::selection {
  color:#080808;
  background:#f2f2ed;
}

:where(a,button,input,select) {
  -webkit-tap-highlight-color:transparent;
}

:where(a,button,input,select):focus-visible {
  outline:2px solid var(--ui-highlight);
  outline-offset:4px;
}

.app-header,
.public-header {
  isolation:isolate;
}

.app-header::before,
.public-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.28;
  background:
    radial-gradient(360px 70px at 16% 0%,#ffffff16,transparent 70%),
    linear-gradient(90deg,transparent 0 12%,#ffffff08 24%,transparent 42%);
  pointer-events:none;
}

.wordmark .mark {
  border:1px solid #ffffff20;
  box-shadow:inset 0 0 0 1px #000,0 8px 24px #0008;
  transition:transform .28s var(--ui-ease),border-color .28s,box-shadow .28s;
}

.wordmark:hover .mark,
.wordmark:focus-visible .mark {
  border-color:#ffffff72;
  box-shadow:inset 0 0 0 1px #000,0 10px 28px #000,0 0 22px #ffffff12;
  transform:translateY(-1px) scale(1.035);
}

.main-nav a {
  position:relative;
  overflow:hidden;
  transition:color .22s,background .22s,box-shadow .22s,transform .22s var(--ui-ease);
}

.main-nav a::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:5px;
  left:12px;
  height:1px;
  opacity:0;
  background:currentColor;
  transform:scaleX(.35);
  transition:opacity .22s,transform .28s var(--ui-ease);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity:.5;
  transform:scaleX(1);
}

.main-nav a.active::after {
  right:50%;
  bottom:4px;
  left:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  opacity:.72;
  transform:translateX(-50%);
}

.wallet-button,
.wallet-link,
.public-cta,
.primary-link,
.balance-actions a,
.shortcut-grid>a,
.sheet-option,
.navbar-menu-groups a,
.market-grid .market-list-row {
  transition:
    color .22s,
    background .22s,
    border-color .22s,
    box-shadow .28s,
    transform .22s var(--ui-ease);
}

.wallet-button:active,
.wallet-link:active,
.public-cta:active,
.primary-link:active,
.balance-actions a:active,
.shortcut-grid>a:active,
.sheet-option:active,
.navbar-menu-groups a:active,
.market-grid .market-list-row:active {
  transform:translateY(1px) scale(.985);
  transition-duration:.08s;
}

.public-cta b,
.primary-link b,
.wallet-link b,
.navbar-menu-groups a::after,
.sheet-option em {
  transition:transform .24s var(--ui-ease);
}

.public-cta:hover b,
.public-cta:focus-visible b,
.primary-link:hover b,
.primary-link:focus-visible b,
.wallet-link:hover b,
.wallet-link:focus-visible b,
.sheet-option:hover em,
.sheet-option:focus-visible em {
  transform:translate(2px,-1px);
}

.surface,
.portfolio-command,
.wallet-summary,
.market-grid .market-list-row,
.shortcut-grid>a,
.sheet-option,
.auth-card,
.market-terminal {
  border-color:var(--ui-edge);
}

.surface,
.portfolio-command,
.wallet-summary,
.market-grid .market-list-row,
.shortcut-grid>a,
.sheet-option,
.auth-card,
.market-terminal,
.wallet-actions i {
  background-clip:padding-box;
}

.ui-polish {
  position:relative;
  isolation:isolate;
}

.ui-polish>.ui-spotlight {
  position:absolute;
  z-index:6;
  inset:-1px;
  display:block;
  border-radius:inherit;
  opacity:0;
  background:
    radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,30%),#ffffff18,transparent 62%);
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .32s var(--ui-ease);
}

.ui-polish.is-lit>.ui-spotlight {
  opacity:1;
}

.auth-card input,
.convert-field,
.demo-order label strong,
.trade-field>strong,
.sheet-search,
.market-search {
  transition:border-color .22s,background .22s,box-shadow .25s;
}

.auth-card input:hover,
.convert-field:hover,
.demo-order label strong:hover,
.trade-field>strong:hover,
.sheet-search:hover,
.market-search:hover {
  border-color:#ffffff4e;
}

.auth-card input:focus,
.auth-card input:focus-visible {
  border-color:#f2f2ed;
  outline:0;
  box-shadow:0 0 0 3px #ffffff10,0 12px 28px #0006;
}

.mobile-sheet:not([hidden]) {
  animation:ui-dialog-in .36s var(--ui-ease) both;
}

.navbar-menu-panel:not([hidden]) {
  animation:ui-menu-in .28s var(--ui-ease) both;
}

.mobile-bottom-nav a {
  position:relative;
  transition:color .2s,transform .2s var(--ui-ease);
}

.mobile-bottom-nav a::before {
  content:"";
  position:absolute;
  top:3px;
  left:50%;
  width:34px;
  height:34px;
  border:1px solid transparent;
  border-radius:50%;
  background:#ffffff00;
  transform:translateX(-50%) scale(.7);
  transition:transform .25s var(--ui-ease),background .25s,border-color .25s;
}

.mobile-bottom-nav a.active::before {
  border-color:#ffffff20;
  background:#ffffff09;
  transform:translateX(-50%) scale(1);
}

.mobile-bottom-nav a:active {
  transform:scale(.94);
}

.mobile-bottom-nav a>* {
  position:relative;
  z-index:1;
}

@keyframes ui-dialog-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 16px)) scale(.975); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@keyframes ui-menu-in {
  from { opacity:0; transform:translateY(-9px) scale(.99); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@media (hover:hover) and (pointer:fine) {
  .surface:hover,
  .portfolio-command:hover,
  .wallet-summary:hover,
  .auth-card:hover {
    border-color:#ffffff3d;
    box-shadow:inset 1px 1px #ffffff11,0 24px 55px #0008;
  }

  .shortcut-grid>a:hover {
    box-shadow:inset 0 1px #ffffff10,0 18px 34px #0008;
  }
}

@media (max-width:760px) {
  .mobile-sheet:not([hidden]) {
    animation-name:ui-sheet-in;
  }

  .navbar-menu-panel:not([hidden]) {
    animation-name:ui-mobile-menu-in;
  }

  .mobile-bottom-nav i {
    transition:transform .25s var(--ui-ease),color .2s;
  }

  .mobile-bottom-nav a.active i {
    transform:translateY(-1px) scale(1.05);
  }
}

@keyframes ui-sheet-in {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes ui-mobile-menu-in {
  from { opacity:0; transform:translateX(12px); }
  to { opacity:1; transform:translateX(0); }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-sheet:not([hidden]),
  .navbar-menu-panel:not([hidden]) {
    animation:none;
  }

  .ui-polish>.ui-spotlight {
    display:none;
  }
}

/* Convert: searchable assets and an explicit fee breakdown. */
body[data-page="convert"] .convert-shell {
  grid-template-columns:minmax(460px,560px) minmax(220px,310px);
  justify-content:space-between;
  gap:clamp(44px,8vw,130px);
  min-height:650px;
  padding:44px clamp(34px,7vw,98px);
}

body[data-page="convert"] .convert-card {
  width:100%;
  padding:30px;
  overflow:visible!important;
}

body[data-page="convert"] .convert-card h2 {
  margin-bottom:28px;
}

body[data-page="convert"] .convert-field {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(155px,.85fr) minmax(170px,1.15fr);
  gap:12px;
  min-height:108px;
  padding:13px 15px 15px;
  border-color:#ffffff2e;
  border-radius:14px;
  background:linear-gradient(135deg,#171717e8,#0b0b0be8);
}

body[data-page="convert"] .convert-field.is-open {
  z-index:20;
  border-color:#ffffff82;
  box-shadow:0 18px 45px #000b;
}

.convert-field-label {
  grid-column:1/-1;
  color:#777773;
  font:8px var(--mono);
  letter-spacing:1px;
}

.convert-asset-trigger {
  display:grid;
  grid-template-columns:37px 1fr auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:5px;
  border:0;
  border-radius:9px;
  color:#eee;
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .2s;
}

.convert-asset-trigger:hover,
.convert-asset-trigger:focus-visible {
  background:#ffffff09;
}

.convert-asset-trigger>i,
.convert-asset-menu button>i {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid #ffffff35;
  border-radius:50%;
  color:#111;
  background:#efefea;
  font:18px Georgia,serif;
  font-style:normal;
}

.convert-asset-trigger>span,
.convert-asset-menu button>span {
  display:grid;
  gap:3px;
  min-width:0;
}

.convert-asset-trigger b {
  font:700 13px var(--mono);
}

.convert-asset-trigger small,
.convert-asset-menu button small {
  overflow:hidden;
  color:#777773;
  font:8px var(--font);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.convert-asset-trigger em {
  color:#888;
  font-style:normal;
}

.convert-amount {
  display:grid;
  align-content:center;
  justify-items:end;
  gap:4px;
  min-width:0;
  text-align:right;
}

.convert-amount>span {
  color:#777773;
  font:7px var(--mono);
  letter-spacing:.7px;
}

.convert-amount input {
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  color:#f1f1ec;
  background:transparent;
  font:650 20px var(--mono);
  text-align:right;
}

.convert-amount strong {
  overflow:hidden;
  max-width:100%;
  color:#f1f1ec;
  font:650 17px var(--mono);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.convert-amount small {
  color:#696965!important;
  font:7px var(--mono)!important;
}

.convert-asset-menu {
  position:absolute;
  z-index:25;
  top:calc(100% + 8px);
  left:0;
  width:min(360px,100%);
  padding:10px;
  overflow:hidden;
  border:1px solid #ffffff38;
  border-radius:15px;
  background:linear-gradient(145deg,#202020,#0c0c0c);
  box-shadow:0 28px 70px #000e;
}

.convert-asset-menu[hidden] {
  display:none;
}

.convert-asset-search {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 11px;
  border:1px solid #ffffff25;
  border-radius:10px;
  color:#999;
  background:#101010;
  font-size:19px;
}

.convert-asset-search input {
  width:100%;
  border:0;
  outline:0;
  color:#eee;
  background:transparent;
  font:10px var(--font);
}

.convert-asset-search input::placeholder {
  color:#70706c;
}

.convert-asset-menu>div {
  display:grid;
  max-height:260px;
  margin-top:8px;
  overflow:auto;
}

.convert-asset-menu button {
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:7px 9px;
  border:0;
  border-bottom:1px solid #ffffff10;
  color:#eee;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.convert-asset-menu button:hover,
.convert-asset-menu button:focus-visible,
.convert-asset-menu button.selected {
  color:#0c0c0c;
  background:#efefea;
}

.convert-asset-menu button:hover small,
.convert-asset-menu button:focus-visible small,
.convert-asset-menu button.selected small {
  color:#555;
}

.convert-asset-menu button>i {
  width:30px;
  height:30px;
  font-size:15px;
}

.convert-asset-menu button em {
  font:11px var(--mono);
  font-style:normal;
}

body[data-page="convert"] .swap-mark {
  width:38px;
  height:38px;
  margin:-4px auto;
  border-width:5px;
  cursor:pointer;
  transition:transform .25s var(--ui-ease),background .2s;
}

body[data-page="convert"] .swap-mark:hover,
body[data-page="convert"] .swap-mark:focus-visible {
  transform:rotate(180deg);
}

.convert-rate {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  min-height:43px;
  padding:0 5px;
  color:#777773;
  font:7px var(--mono);
}

.convert-rate b {
  color:#c7c7c2;
  font-weight:500;
}

.convert-rate em {
  color:#696965;
  font-style:normal;
}

.convert-fees {
  display:grid;
  margin:2px 0 13px;
  padding:9px 13px;
  border:1px solid #ffffff20;
  border-radius:12px;
  background:#0d0d0d99;
}

.convert-fees>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:32px;
  color:#92928e;
  font-size:9px;
}

.convert-fees span small {
  margin-left:5px;
  color:#61615e;
  font:7px var(--mono);
}

.convert-fees b {
  color:#cacac5;
  font:500 8px var(--mono);
}

.convert-fees .convert-net {
  margin-top:3px;
  padding-top:8px;
  border-top:1px solid #ffffff18;
  color:#eee;
  font-weight:700;
}

.convert-fees .convert-net b {
  color:#f4f4ef;
  font-size:10px;
  font-weight:700;
}

body[data-page="convert"] .convert-card .primary-link {
  min-height:48px;
  cursor:pointer;
}

body[data-page="convert"] .convert-card .primary-link.confirmed {
  color:#eee!important;
  background:#252525;
}

body[data-page="convert"] .convert-card .primary-link.is-disabled {
  color:#6e6e6a!important;
  background:#242424;
  box-shadow:none;
  cursor:not-allowed;
}

.convert-disclaimer {
  margin:11px 2px 0!important;
  line-height:1.45;
}

@media (max-width:760px) {
  body[data-page="convert"] .convert-shell {
    display:block;
    min-height:0;
    padding:0;
  }

  body[data-page="convert"] .convert-card {
    padding:20px 17px;
  }

  body[data-page="convert"] .convert-card h2 {
    font-size:31px;
  }

  body[data-page="convert"] .convert-field {
    grid-template-columns:minmax(130px,.9fr) minmax(135px,1.1fr);
    min-height:104px;
    padding:12px;
  }

  .convert-asset-trigger {
    grid-template-columns:34px 1fr auto;
    gap:7px;
    padding:3px;
  }

  .convert-asset-trigger>i {
    width:33px;
    height:33px;
  }

  .convert-amount input {
    font-size:17px;
  }

  .convert-amount strong {
    font-size:14px;
  }

  .convert-asset-menu {
    right:0;
    width:100%;
  }

  .convert-rate {
    grid-template-columns:1fr auto;
    padding-block:5px;
  }

  .convert-rate>span {
    grid-column:1/-1;
  }

  .convert-rate em {
    display:none;
  }
}

/* Earn simulator: amount selection and projected yield before a demo allocation. */
.earn-grid .earn-product {
  position:relative;
  display:block;
  min-width:0;
  min-height:210px;
  padding:22px;
  overflow:hidden;
  color:var(--ink);
  background:linear-gradient(145deg,#202020,#101010)!important;
  text-align:left;
  cursor:pointer;
  transition:transform .22s var(--ui-ease),border-color .22s,box-shadow .25s;
}

.earn-grid .earn-product:hover,
.earn-grid .earn-product:focus-visible {
  border-color:#d5d5d0;
  box-shadow:0 20px 42px #0008;
  transform:translateY(-5px);
}

.earn-grid .earn-product::before {
  content:"";
  position:absolute;
  right:-68px;
  bottom:-108px;
  width:190px;
  height:190px;
  border:1px solid #ffffff12;
  border-radius:50%;
  box-shadow:0 0 0 35px #ffffff03;
  pointer-events:none;
}

.earn-grid .earn-product>*:not(.ui-spotlight) {
  position:relative;
  z-index:1;
}

.earn-product-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:29px;
  color:#dcdcd8;
  font-size:10px;
}

.earn-product-action i {
  font:12px var(--mono);
  font-style:normal;
  transition:transform .22s var(--ui-ease);
}

.earn-product:hover .earn-product-action i,
.earn-product:focus-visible .earn-product-action i {
  transform:translateX(4px);
}

.earn-modal-open {
  overflow:hidden;
}

body.earn-modal-open .page-wrap {
  isolation:auto;
}

.earn-modal-scrim:not([hidden]) {
  position:fixed;
  z-index:58;
  inset:0;
  display:block;
  border:0;
  background:#000c;
  backdrop-filter:blur(9px);
  animation:earn-scrim-in .25s ease both;
}

.earn-modal:not([hidden]) {
  position:fixed;
  z-index:59;
  top:50%;
  left:50%;
  display:block;
  width:min(540px,calc(100% - 32px));
  max-height:88vh;
  padding:24px;
  overflow:auto;
  border:1px solid #ffffff38;
  border-radius:22px;
  color:#eee;
  background:
    radial-gradient(360px 210px at 90% 0%,#303030,transparent 66%),
    linear-gradient(145deg,#191919,#0b0b0b 72%);
  box-shadow:0 36px 100px #000e,inset 1px 1px #ffffff10;
  transform:translate(-50%,-50%);
  animation:earn-modal-in .32s var(--ui-ease) both;
}

.earn-modal[hidden],
.earn-modal-scrim[hidden] {
  display:none;
}

.earn-modal-handle {
  display:none;
}

.earn-modal>header {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:19px;
  border-bottom:1px solid #ffffff18;
}

.earn-modal>header h2 {
  margin:7px 0 0;
  font:700 28px/.98 var(--display);
  letter-spacing:-1.6px;
}

.earn-modal>header>button {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #ffffff2d;
  border-radius:50%;
  color:#ccc;
  background:#111;
  font:25px/1 var(--font);
  cursor:pointer;
}

.earn-modal-asset {
  display:grid;
  grid-template-columns:45px 1fr auto;
  align-items:center;
  gap:12px;
  min-height:82px;
  border-bottom:1px solid #ffffff15;
}

.earn-modal-asset>i {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid #ffffff34;
  border-radius:50%;
  color:#111;
  background:#efefea;
  font:20px Georgia,serif;
  font-style:normal;
}

.earn-modal-asset>div {
  display:grid;
  gap:3px;
}

.earn-modal-asset>div b {
  font:700 13px var(--mono);
}

.earn-modal-asset small {
  color:#777773;
  font:7px var(--mono);
}

.earn-modal-asset>span {
  display:grid;
  gap:5px;
  text-align:right;
}

.earn-modal-asset>span b {
  font:600 10px var(--mono);
}

.earn-amount {
  display:grid;
  gap:8px;
  margin-top:18px;
}

.earn-amount>span {
  color:#777773;
  font:7px var(--mono);
  letter-spacing:.9px;
}

.earn-amount>div {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:64px;
  padding:0 15px;
  border:1px solid #ffffff30;
  border-radius:12px;
  background:#0d0d0dc9;
  transition:border-color .2s,box-shadow .2s;
}

.earn-amount>div:focus-within {
  border-color:#efefea;
  box-shadow:0 0 0 3px #ffffff0d;
}

.earn-amount input {
  min-width:0;
  border:0;
  outline:0;
  color:#f3f3ee;
  background:transparent;
  font:650 25px var(--mono);
}

.earn-amount b {
  color:#aaa;
  font:600 11px var(--mono);
}

.earn-range {
  width:100%;
  margin:16px 0 11px;
  accent-color:#efefea;
}

.earn-presets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.earn-presets button {
  min-height:34px;
  border:1px solid #ffffff23;
  border-radius:8px;
  color:#92928e;
  background:#121212;
  font:600 8px var(--mono);
  cursor:pointer;
}

.earn-presets button:hover,
.earn-presets button:focus-visible,
.earn-presets button.active {
  color:#111;
  border-color:#efefea;
  background:#efefea;
}

.earn-duration:not([hidden]) {
  display:grid;
  gap:10px;
  margin-top:17px;
  padding:13px;
  border:1px solid #ffffff20;
  border-radius:13px;
  background:#111111b8;
}

.earn-duration[hidden] {
  display:none;
}

.earn-duration>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.earn-duration>header span {
  color:#777773;
  font:7px var(--mono);
  letter-spacing:.8px;
}

.earn-duration>header b {
  color:#f0f0eb;
  font:650 11px var(--mono);
}

.earn-duration>input {
  width:100%;
  accent-color:#efefea;
}

.earn-duration>div {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

.earn-duration>div button {
  min-height:31px;
  border:1px solid #ffffff20;
  border-radius:7px;
  color:#858581;
  background:#0d0d0d;
  font:600 7px var(--mono);
  cursor:pointer;
}

.earn-duration>div button:hover,
.earn-duration>div button:focus-visible,
.earn-duration>div button.active {
  color:#111;
  border-color:#efefea;
  background:#efefea;
}

.earn-duration>p {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  color:#696966;
  font:7px var(--mono);
}

.earn-duration>p b {
  color:#a7a7a2;
  font-weight:500;
}

.earn-estimate {
  display:grid;
  margin:18px 0 15px;
  padding:8px 14px;
  border:1px solid #ffffff20;
  border-radius:13px;
  background:#0d0d0da8;
}

.earn-estimate>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:35px;
  color:#8f8f8b;
  font-size:9px;
}

.earn-estimate span small {
  margin-left:5px;
  color:#5f5f5c;
  font:7px var(--mono);
}

.earn-estimate b {
  color:#d3d3ce;
  font:600 9px var(--mono);
}

.earn-estimate .earn-estimate-total {
  margin-top:3px;
  padding-top:7px;
  border-top:1px solid #ffffff19;
  color:#eee;
  font-weight:700;
}

.earn-estimate .earn-estimate-total b {
  color:#f5f5f0;
  font-size:11px;
}

.earn-confirm {
  width:100%;
  min-height:49px;
  cursor:pointer;
}

.earn-confirm.confirmed {
  color:#eee!important;
  background:#252525;
}

.earn-confirm.is-disabled {
  color:#6d6d69!important;
  background:#242424;
  box-shadow:none;
  cursor:not-allowed;
}

.earn-modal-note {
  margin:11px 2px 0;
  color:#666662;
  font:7px/1.5 var(--mono);
}

@keyframes earn-scrim-in {
  from { opacity:0; }
  to { opacity:1; }
}

@keyframes earn-modal-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 15px)) scale(.975); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@media (max-width:760px) {
  .earn-grid .earn-product {
    min-height:154px;
    padding:20px;
    border-radius:18px!important;
  }

  .earn-grid .earn-product h3 {
    margin:12px 0 5px;
  }

  .earn-product-action {
    margin-top:18px;
  }

  .earn-modal:not([hidden]) {
    top:auto;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    max-height:90vh;
    padding:12px 18px calc(22px + env(safe-area-inset-bottom));
    border-width:1px 0 0;
    border-radius:24px 24px 0 0;
    transform:none;
    animation-name:earn-sheet-in;
  }

  .earn-modal-handle {
    display:block;
    width:44px;
    height:5px;
    margin:0 auto 15px;
    border-radius:50%;
    background:#5b5b5b;
  }

  .earn-modal>header h2 {
    font-size:24px;
  }

  .earn-modal-asset {
    min-height:74px;
  }

  .earn-amount input {
    font-size:21px;
  }
}

@keyframes earn-sheet-in {
  from { opacity:0; transform:translateY(32px); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  .earn-modal:not([hidden]),
  .earn-modal-scrim:not([hidden]) {
    animation:none;
  }
}

/* Prediction market — binary decision controls */
.prediction-grid .prediction-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:420px;
  overflow:hidden;
}

.prediction-grid .prediction-card::after {
  content:"";
  position:absolute;
  right:-68px;
  bottom:-98px;
  width:190px;
  aspect-ratio:1;
  border:1px solid #ffffff0d;
  border-radius:50%;
  box-shadow:0 0 0 34px #ffffff05,0 0 0 68px #ffffff03;
  pointer-events:none;
}

.prediction-card>header,
.prediction-card .prediction-probability,
.prediction-card .prediction-choices,
.prediction-card .prediction-feedback {
  position:relative;
  z-index:1;
}

.prediction-card>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.prediction-card>header span,
.prediction-card>header small {
  color:#777;
  font:8px var(--mono);
  letter-spacing:.06em;
}

.prediction-card>header small {
  color:#a6a6a1;
}

.prediction-grid .prediction-card h3 {
  position:relative;
  z-index:1;
  min-height:62px;
  margin:25px 0 24px;
  padding-right:12px;
  font-size:20px;
  line-height:1.08;
}

.prediction-card .prediction-probability {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  align-items:stretch;
  justify-content:stretch;
  gap:9px;
}

.prediction-card .prediction-probability>i {
  position:relative;
  display:block;
  width:100%;
  min-width:100%;
  justify-self:stretch;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#383838;
}

.prediction-card .prediction-probability>i::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--yes);
  border-radius:inherit;
  background:#efefea;
  box-shadow:8px 0 18px #ffffff2b;
}

.prediction-card .prediction-probability>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.prediction-card .prediction-probability b {
  display:block;
  flex:none;
  color:#92928e;
  font:7px var(--mono);
  letter-spacing:.05em;
}

.prediction-card .prediction-probability b:first-child {
  color:#e7e7e2;
}

.prediction-card .prediction-stake {
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  margin-top:20px;
}

.prediction-card .prediction-stake>label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#b0b0ab;
  font:7px var(--mono);
  letter-spacing:.05em;
}

.prediction-card .prediction-stake>label span {
  color:#666662;
  font-size:6px;
}

.prediction-card .prediction-amount {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  width:100%;
  min-height:48px;
  padding:0 13px;
  border:1px solid #41413e;
  border-radius:11px;
  background:#0b0b0b;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.prediction-card .prediction-amount:focus-within {
  border-color:#aaa9a3;
  box-shadow:0 0 0 3px #ffffff0a;
}

.prediction-card .prediction-amount input {
  min-width:0;
  border:0;
  outline:0;
  color:#efefea;
  background:transparent;
  font:700 17px var(--mono);
}

.prediction-card .prediction-amount input::placeholder {
  color:#4e4e4b;
}

.prediction-card .prediction-amount input::-webkit-outer-spin-button,
.prediction-card .prediction-amount input::-webkit-inner-spin-button {
  margin:0;
  appearance:none;
}

.prediction-card .prediction-amount>b {
  display:block;
  flex:none;
  color:#8d8d88;
  font:7px var(--mono);
}

.prediction-card .prediction-stake>nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.prediction-card .prediction-stake>nav button {
  min-height:27px;
  padding:0;
  border:1px solid #353532;
  border-radius:7px;
  color:#8b8b87;
  background:#111;
  font:7px var(--mono);
  cursor:pointer;
}

.prediction-card .prediction-stake>nav button:hover,
.prediction-card .prediction-stake>nav button.active {
  color:#111;
  border-color:#e7e7e2;
  background:#e7e7e2;
}

.prediction-card .prediction-return-preview {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:5px 8px;
  min-height:28px;
  color:#696965;
  font:7px/1.4 var(--mono);
}

.prediction-card .prediction-return-preview>span {
  grid-column:1 / -1;
}

.prediction-card .prediction-return-preview>b {
  display:block;
  padding:6px 8px;
  border:1px solid #30302e;
  border-radius:7px;
  background:#0d0d0d;
  font:700 8px var(--mono);
}

.prediction-card .prediction-return-preview>b[data-return-yes] {
  color:#3bd6a0;
  border-color:#245b49;
  background:#0a1713;
}

.prediction-card .prediction-return-preview>b[data-return-no] {
  color:#ff6378;
  border-color:#67303a;
  background:#190d10;
}

.prediction-card .prediction-return-preview>[hidden] {
  display:none;
}

.prediction-card .prediction-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
  padding-top:0;
}

.prediction-card .prediction-choices button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:55px;
  padding:0 14px;
  border:1px solid #4a4a47;
  border-radius:12px;
  color:#f0f0eb;
  background:#0d0d0d;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}

.prediction-card .prediction-choices button:hover {
  border-color:#b7b7b1;
  background:#191919;
  transform:translateY(-2px);
}

.prediction-card .prediction-choices button:focus-visible {
  outline:2px solid #efefea;
  outline-offset:3px;
}

.prediction-card .prediction-choices button[aria-pressed="true"] {
  color:#0a0a0a;
  border-color:#efefea;
  background:#efefea;
  box-shadow:0 10px 24px #0008,0 0 0 1px #ffffff18;
}

.prediction-card .prediction-choices button span,
.prediction-card .prediction-choices button b {
  flex:none;
  color:inherit;
  font:700 10px var(--mono);
}

.prediction-card .prediction-choices button span {
  display:grid;
  gap:3px;
  text-align:left;
}

.prediction-card .prediction-choices button span small {
  color:inherit;
  font:7px var(--mono);
  opacity:.68;
}

.prediction-card .prediction-choices button b {
  display:block;
  font-size:13px;
}

.prediction-card .prediction-feedback {
  margin:10px 0 0;
  color:#aaa;
  font:7px/1.45 var(--mono);
  letter-spacing:.03em;
}

.prediction-card .prediction-feedback[hidden] {
  display:none;
}

.prediction-card[data-selection="yes"] .prediction-choices button[data-prediction-choice="no"],
.prediction-card[data-selection="no"] .prediction-choices button[data-prediction-choice="yes"] {
  opacity:.52;
  filter:saturate(.55);
}

.prediction-card .prediction-choices button[data-prediction-choice="yes"] {
  color:#3bd6a0;
  border-color:#24654f;
  background:#0b1915;
}

.prediction-card .prediction-choices button[data-prediction-choice="no"] {
  color:#ff6378;
  border-color:#70303a;
  background:#1c0d11;
}

.prediction-card .prediction-choices button[data-prediction-choice="yes"]:hover {
  color:#55e7b4;
  border-color:#3bd6a0;
  background:#10241d;
}

.prediction-card .prediction-choices button[data-prediction-choice="no"]:hover {
  color:#ff7d8e;
  border-color:#ff6378;
  background:#271116;
}

.prediction-card .prediction-choices button[data-prediction-choice="yes"][aria-pressed="true"] {
  color:#07120e;
  border-color:#3bd6a0;
  background:#3bd6a0;
  box-shadow:0 10px 26px #0008,0 0 24px #3bd6a026;
}

.prediction-card .prediction-choices button[data-prediction-choice="no"][aria-pressed="true"] {
  color:#190508;
  border-color:#ff6378;
  background:#ff6378;
  box-shadow:0 10px 26px #0008,0 0 24px #ff637826;
}

.prediction-card .prediction-choices button:disabled,
.prediction-card .prediction-choices button:disabled:hover {
  color:#666662;
  border-color:#30302e;
  background:#111;
  box-shadow:none;
  cursor:not-allowed;
  filter:saturate(0);
  opacity:.55;
  transform:none;
}

@media (max-width:760px) {
  .prediction-grid .prediction-card {
    min-height:382px;
    padding:20px;
  }

  .prediction-grid .prediction-card h3 {
    min-height:0;
    margin:20px 0;
    font-size:20px;
  }

  .prediction-card .prediction-choices {
    margin-top:12px;
    padding-top:0;
  }

  .prediction-card .prediction-choices button {
    min-height:52px;
    border-radius:13px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .prediction-card .prediction-choices button {
    transition:none;
  }
}

@media (max-width:760px) {
  .affiliate-summary { grid-template-columns:1fr; gap:26px; min-height:0; padding:24px; }
  .affiliate-summary h2 { font-size:35px; letter-spacing:-2px; }
  .affiliate-summary p { font-size:11px; }
  .affiliate-summary dl { grid-template-columns:1fr 1fr; gap:12px; }
  .affiliate-summary dl>div { min-width:0; padding:0; border:0; }
  .affiliate-summary dd { font-size:27px; letter-spacing:-1.5px; }
  .affiliate-rewards { grid-template-columns:1fr; gap:11px; margin-top:11px; }
  .affiliate-rewards article { min-height:0; padding:23px; }
  .affiliate-rewards strong { margin:13px 0 8px; font-size:44px; }
  .affiliate-levels { margin-top:11px; padding:21px; }
  .affiliate-level-table { display:grid; gap:9px; margin-top:20px; overflow:visible; border:0; border-radius:0; }
  .affiliate-level-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .affiliate-level-row { grid-template-columns:1fr 1fr; gap:0; min-height:0; padding:0; overflow:hidden; border:1px solid #ffffff18; border-radius:11px; background:#ffffff04; }
  .affiliate-level-row>* { display:grid; gap:5px; min-width:0; padding:12px; border-top:1px solid #ffffff12; font-size:10px; text-align:left; }
  .affiliate-level-row>*:nth-child(-n+2) { border-top:0; }
  .affiliate-level-row>*:nth-child(odd) { border-right:1px solid #ffffff12; }
  .affiliate-level-row>*::before { content:attr(data-label); color:#888; font:7px var(--mono); letter-spacing:.07em; }
  .affiliate-level-row b,.affiliate-level-row strong { font-size:11px; }
  .affiliate-level-row strong { text-align:left; }
  .affiliate-disclosures { grid-template-columns:1fr; gap:9px; margin-top:12px; }
}