:root{--bg:#0c0711;--panel:#17111d;--panel2:#21182a;--panel3:#2a2034;--line:#31263b;--text:#f6f1fb;--muted:#9b8da8;--accent:#23c4d2;--accent2:#8b70ff;--green:#31d0aa;--red:#ed5d83;--shadow:0 24px 70px rgba(0,0,0,.3)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,rgba(98,59,137,.14),transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:500}.topbar{height:72px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(18,12,24,.94);backdrop-filter:blur(18px);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-size:20px}.brand-logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent2),var(--accent));font-weight:900}.brand small{font-size:13px;color:#b5a7c1;font-weight:500}.desktop-nav{display:flex;gap:6px;margin-left:44px;flex:1}.nav-link,.mobile-nav button,.history-tabs button,.chart-toolbar button,.swap-tabs button,.settings-btn,.ghost-btn,.pager button{border:0;background:transparent;color:#a99bb6;font:inherit;cursor:pointer}.nav-link{padding:12px 15px;border-radius:12px;font-weight:700}.nav-link:hover,.nav-link.active{color:white;background:#22182a}.top-actions{display:flex;align-items:center;gap:10px}.network-pill{background:#21182a;border:1px solid #342740;padding:10px 12px;border-radius:16px;font-size:12px;color:#b5a7c1}.network-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f0b90b;margin-right:6px}.wallet-btn,.primary{border:0;background:linear-gradient(135deg,#25ccd5,#2bbbd0);color:#071318;border-radius:18px;font-weight:900;cursor:pointer}.wallet-btn{padding:13px 20px;font-size:14px}main{max-width:1320px;margin:auto;padding:38px 24px 110px}.market-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(380px,.72fr);gap:20px;align-items:start}.terminal-card{background:linear-gradient(180deg,rgba(25,18,32,.98),rgba(20,14,27,.98));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.chart-panel{overflow:hidden}.market-header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 22px 14px}.pair-title{display:flex;gap:13px;align-items:center}.token-stack{display:flex}.coin{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-weight:900;font-size:12px;color:white}.coin.dft{background:linear-gradient(135deg,var(--accent2),#4c8df6)}.coin.usdt{background:#24a983}.token-stack .coin+ .coin{margin-left:-8px;border:2px solid var(--panel)}h1,h2,h3,p{margin:0}.pair-title h1{font-size:20px}.pair-title p,.swap-head p{font-size:12px;color:var(--muted);margin-top:4px}.price-summary{text-align:right}.price-summary strong{display:block;font-size:27px;letter-spacing:-.5px}.price-summary span{font-size:12px;font-weight:800}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.neutral{color:var(--muted)}.ticker-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ticker-row>div{background:#15101b;padding:12px 17px}.ticker-row span,.metrics-grid span{display:block;color:var(--muted);font-size:11px}.ticker-row b{display:block;font-size:13px;margin-top:3px}.chart-toolbar{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid #281f31;gap:8px}.timeframes,.chart-types{display:flex;gap:4px;overflow:auto}.chart-toolbar button{padding:7px 9px;border-radius:8px;font-size:11px;font-weight:800;white-space:nowrap}.chart-toolbar button:hover,.chart-toolbar button.active{color:white;background:#2a2034}.chart-wrap{height:470px;position:relative}.chart-wrap>div:first-child{width:100%;height:100%}.chart-empty{position:absolute;inset:auto 20px 22px;display:none;text-align:center;color:var(--muted);font-size:12px;pointer-events:none}.chart-legend{border-top:1px solid #281f31;padding:10px 17px;display:flex;gap:18px;font-size:11px;color:var(--muted)}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.price-dot{background:var(--accent)}.volume-dot{background:var(--accent2)}.source-note{margin-left:auto}.swap-panel{padding:20px;position:sticky;top:92px}.swap-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.swap-head h2{font-size:21px}.settings-btn{font-size:16px;width:36px;height:36px;border-radius:12px;background:#241b2d}.swap-tabs{display:grid;grid-template-columns:1fr 1fr;background:#251c2e;padding:4px;border-radius:16px;margin-bottom:13px}.swap-tabs button{padding:9px;border-radius:12px;font-size:12px;font-weight:800}.swap-tabs .active{background:#b8a9d7;color:#251c31}.swap-tabs button:disabled{opacity:.55;cursor:not-allowed}.token-box{background:#2b2234;border:1px solid #342941;border-radius:20px;padding:16px}.box-label,.balance-line{display:flex;justify-content:space-between;align-items:center;color:#a99ab5;font-size:12px}.box-label button{border:0;background:transparent;color:var(--accent);font-weight:900;cursor:pointer}.amount-row{display:flex;align-items:center;gap:10px;margin:10px 0}.amount-row input{min-width:0;width:100%;background:transparent;border:0;outline:0;color:white;font-size:31px;font-weight:600}.token-chip{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:900;white-space:nowrap}.token-chip .coin{width:27px;height:27px}.direction-lock{width:42px;height:42px;border-radius:14px;background:#1b1422;border:4px solid var(--panel);display:grid;place-items:center;margin:-6px auto;position:relative;z-index:2}.quote-card{margin:13px 0;background:#131018;border:1px solid #2a2132;border-radius:16px;padding:10px 12px}.quote-card>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:11px}.quote-card span{color:var(--muted)}.quote-card b{text-align:right}.primary{width:100%;padding:15px;font-size:16px}.primary:disabled{opacity:.5;cursor:not-allowed}.notice{color:#8f829b;font-size:10px;line-height:1.5;text-align:center;margin:10px 8px 0}.analytics-section,.history-section{padding-top:48px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.section-heading span{font-size:10px;color:var(--accent);font-weight:900;letter-spacing:1.4px}.section-heading h2{font-size:25px;margin-top:4px}.ghost-btn{border:1px solid #392c44!important;border-radius:13px;padding:10px 14px!important;color:#c7b9d2!important;background:#1a1321!important}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metrics-grid article{background:#17111d;border:1px solid var(--line);border-radius:18px;padding:18px}.metrics-grid strong{display:block;font-size:20px;margin:8px 0 5px}.metrics-grid small{font-size:10px;color:#776b82}.analytics-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-top:14px}.mini-chart-card{padding:18px}.mini-head{display:flex;justify-content:space-between}.mini-head span{font-size:11px;color:var(--muted)}#liquidityChart{height:240px;margin-top:10px}.market-info{padding:18px}.market-info h3{margin-bottom:10px}.market-info>div{display:flex;justify-content:space-between;border-top:1px solid #2a2132;padding:11px 0;font-size:12px}.market-info span{color:var(--muted)}.history-tabs{display:flex;background:#211829;padding:4px;border-radius:12px}.history-tabs button{padding:8px 12px;border-radius:9px;font-size:11px;font-weight:800}.history-tabs .active{background:#342741;color:white}.history-card{overflow:hidden}.history-head,.history-row{display:grid;grid-template-columns:1.1fr 1.1fr 1fr 1fr 1fr;gap:12px;align-items:center;padding:13px 18px}.history-head{color:#82758e;font-size:10px;font-weight:900;text-transform:uppercase}.history-row{border-top:1px solid #2b2234;font-size:12px}.history-row .wallet{font-family:ui-monospace,monospace;color:#b7a9c3}.history-row .green{color:var(--green);font-weight:800}.empty-state{padding:40px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid #2b2234}.pager{border-top:1px solid #2b2234;display:flex;justify-content:center;align-items:center;gap:15px;padding:11px}.pager button{padding:7px 10px}.pager button:disabled{opacity:.35}.pager span{font-size:11px;color:var(--muted)}.mobile-nav{display:none}.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;opacity:0;pointer-events:none;transition:.2s}.sheet-backdrop.open{opacity:1;pointer-events:auto}.bottom-sheet{position:fixed;left:50%;bottom:0;z-index:81;width:min(520px,100%);transform:translate(-50%,105%);background:#201827;border:1px solid #392d43;border-radius:26px 26px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));transition:.25s}.bottom-sheet.open{transform:translate(-50%,0)}.sheet-handle{width:38px;height:4px;border-radius:5px;background:#62566d;margin:0 auto 15px}.sheet-title{display:flex;justify-content:space-between;align-items:center}.sheet-title button{border:0;background:none;color:white;font-size:24px}.bottom-sheet label{display:flex;justify-content:space-between;font-size:12px;margin:20px 0 8px}.readonly-setting{background:#30263a;border-radius:14px;padding:13px;color:#b7aac2;font-size:12px}.bottom-sheet p{font-size:11px;line-height:1.5;color:var(--muted);margin-top:12px}.tx-overlay{position:fixed;inset:0;z-index:100;background:rgba(6,3,8,.72);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:16px}.tx-overlay.open{display:flex}.tx-modal{width:min(420px,100%);background:#181120;border:1px solid #3b2d48;border-radius:24px;padding:28px;text-align:center;box-shadow:var(--shadow)}.tx-spinner{width:62px;height:62px;border-radius:50%;border:5px solid #2c2240;border-top-color:var(--accent2);margin:0 auto 20px;animation:spin .9s linear infinite}.tx-success{display:none;width:62px;height:62px;border-radius:50%;background:rgba(49,208,170,.14);color:var(--green);font-size:34px;place-items:center;margin:0 auto 20px}.tx-modal h3{font-size:21px}.tx-modal>p{color:var(--muted);font-size:12px;margin:8px 0 20px}.stepper{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.stepper>div{border:1px solid #332741;border-radius:14px;padding:12px;font-size:11px;color:#8d8099}.stepper i{display:grid;width:25px;height:25px;border-radius:50%;background:#2a2035;place-items:center;margin:0 auto 7px;font-style:normal}.stepper .active{border-color:#8066e4;color:white}.stepper .done i{background:var(--green);color:#071713}.full{width:100%}#toast{position:fixed;right:18px;bottom:18px;z-index:120;background:#2a2133;border:1px solid #43344f;border-radius:15px;padding:13px 16px;display:none;max-width:340px;font-size:12px;box-shadow:var(--shadow)}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:980px){.market-shell{grid-template-columns:1fr}.swap-panel{position:relative;top:auto;max-width:560px;margin:0 auto;width:100%;grid-row:1}.chart-panel{grid-row:2}.analytics-grid{grid-template-columns:1fr}}
@media(max-width:720px){body{padding-bottom:72px}.topbar{height:68px;padding:0 14px}.brand small,.network-pill,.desktop-nav{display:none}.brand{font-size:19px}.brand-logo{width:34px;height:34px}.top-actions{margin-left:auto}.wallet-btn{max-width:145px;padding:12px 14px;overflow:hidden;text-overflow:ellipsis}.topbar{position:sticky}.mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(18,12,24,.98);border-top:1px solid #33273d;padding:7px 10px calc(7px + env(safe-area-inset-bottom))}.mobile-nav button{display:grid;gap:2px;place-items:center;font-size:10px;padding:5px;color:#8f829c}.mobile-nav button span{font-size:18px}.mobile-nav .active{color:#a887ff}main{padding:18px 12px 58px}.market-shell{gap:12px}.terminal-card{border-radius:20px}.swap-panel{padding:14px}.swap-head h2{font-size:20px}.token-box{padding:15px}.amount-row input{font-size:29px}.chart-panel{margin-top:2px}.market-header{padding:16px 14px 11px}.pair-title h1{font-size:16px}.pair-title p{font-size:10px}.price-summary strong{font-size:21px}.ticker-row{grid-template-columns:1fr 1fr}.ticker-row>div{padding:10px 13px}.chart-toolbar{padding:9px 8px;align-items:flex-start;flex-direction:column}.chart-types{width:100%}.chart-wrap{height:370px}.chart-legend{flex-wrap:wrap;padding:9px 12px}.source-note{width:100%;margin-left:0}.analytics-section,.history-section{padding-top:32px}.metrics-grid{grid-template-columns:1fr 1fr;gap:8px}.metrics-grid article{padding:14px}.metrics-grid strong{font-size:16px}.section-heading{align-items:center}.section-heading h2{font-size:21px}.history-head{display:none}.history-row{grid-template-columns:1fr 1fr;padding:14px}.history-row span:nth-child(2){text-align:right}.history-row span:nth-child(n+3){font-size:11px}.history-row span:nth-child(4){text-align:right}.history-row span:last-child{grid-column:1/-1;color:#82758e}.tx-overlay{align-items:flex-end;padding:0}.tx-modal{border-radius:26px 26px 0 0;padding:24px 18px calc(22px + env(safe-area-inset-bottom));width:100%}}


/* ===== V2 exchange layout / chart drawer ===== */
.chart-toggle-top,.chart-icon-btn{
  width:40px;height:40px;border-radius:13px;border:1px solid #352941;
  background:#21182a;color:#b7a8c4;display:grid;place-items:center;
  font-size:20px;font-weight:900;cursor:pointer;transition:.18s
}
.chart-toggle-top:hover,.chart-icon-btn:hover,.chart-toggle-top.active,.chart-icon-btn.active{
  color:#fff;background:#31233d;border-color:#6d55a5
}
.swap-head-actions{display:flex;gap:8px}
.market-shell.chart-collapsed{display:block}
.market-shell.chart-collapsed .chart-panel{display:none}
.market-shell.chart-collapsed .swap-panel{
  position:relative;top:auto;width:min(500px,100%);margin:34px auto 0
}
.market-shell.chart-open{display:grid}
.market-shell.chart-open .chart-panel{display:block}
.flow-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.flow-strip article{background:#17111d;border:1px solid var(--line);border-radius:18px;padding:18px}
.flow-strip span{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.5px}
.flow-strip strong{display:block;font-size:22px;margin:8px 0 4px}
.flow-strip small{font-size:10px;color:#776b82}
.flow-buy{box-shadow:inset 0 2px 0 rgba(49,208,170,.35)}
.flow-buy strong{color:var(--green)}
.flow-sell{box-shadow:inset 0 2px 0 rgba(237,93,131,.35)}
.flow-sell strong{color:var(--red)}
.wallet-setting{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #3a2c45;font-size:12px}
.wallet-setting span{color:var(--accent)}
.reown-note code{color:#d6c8e0;background:#2d2236;padding:2px 4px;border-radius:5px}
#closeChartBtn{margin-left:auto}

@media(max-width:980px){
  .market-shell.chart-open{grid-template-columns:1fr}
  .market-shell.chart-open .swap-panel{grid-row:1}
  .market-shell.chart-open .chart-panel{grid-row:2}
}

@media(max-width:720px){
  .mobile-nav{grid-template-columns:repeat(4,1fr)}
  .chart-toggle-top{display:none}
  .market-shell.chart-collapsed .swap-panel{margin:0 auto}
  .market-shell.chart-open .chart-panel{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:88;
    margin:0;border-radius:28px 28px 0 0;max-height:86vh;overflow:auto;
    box-shadow:0 -25px 70px rgba(0,0,0,.6);animation:chartUp .22s ease-out
  }
  .market-shell.chart-open .chart-panel:before{
    content:"";display:block;width:38px;height:4px;border-radius:4px;
    background:#6c5d76;margin:10px auto 0
  }
  .market-shell.chart-open .chart-wrap{height:390px}
  .market-shell.chart-open .swap-panel{grid-row:auto}
  body.mobile-chart-open:before{
    content:"";position:fixed;inset:0;background:rgba(5,2,7,.66);z-index:87
  }
  .flow-strip{grid-template-columns:1fr}
  @keyframes chartUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
}

.wallet-note{font-size:11px;color:#8f8299;line-height:1.55;margin-top:8px}

/* V3 mobile chart behavior */
@media (max-width: 820px){
  .desktop-chart-shell,
  #chartPanel,
  .chart-panel,
  .market-chart-card{
    display:block !important;
  }
  .trade-layout{display:flex !important;flex-direction:column !important}
  .swap-panel,.swap-card{order:1}
  .chart-panel,.market-chart-card,#chartPanel,.desktop-chart-shell{order:2}
  .analytics-section,.market-analytics{order:3}
}
/* Chart icon may still open the dedicated bottom sheet */
#mobileChartSheet.is-open{display:flex!important}


/* ===== V4 theme switch + smooth chart sheet close ===== */
.theme-toggle{
  width:40px;height:40px;border-radius:13px;border:1px solid #352941;
  background:#21182a;color:#f0e9f5;display:grid;place-items:center;
  font-size:17px;font-weight:900;cursor:pointer;transition:.2s ease
}
.theme-toggle:hover{transform:translateY(-1px);border-color:#6d55a5}
.theme-setting{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #3a2c45;font-size:12px}
.theme-setting-btn{
  border:1px solid #4d3b58;background:#2a2032;color:#fff;border-radius:10px;
  padding:8px 12px;font-weight:800;cursor:pointer
}
.chart-sheet-close{
  border:1px solid #3a2d43;background:#1c1422;color:#fff;border-radius:10px;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  margin-left:auto;transition:.18s ease
}
.chart-sheet-close:hover{background:#31233b;transform:scale(1.04)}

@media(max-width:720px){
  .market-shell.chart-open .chart-panel{
    animation:chartSlideUp .24s cubic-bezier(.2,.75,.25,1)
  }
  .market-shell.chart-open .chart-panel.is-closing{
    animation:chartSlideDown .22s ease-in forwards
  }
  body.chart-closing:before{opacity:0;transition:opacity .22s ease}
  @keyframes chartSlideUp{
    from{transform:translateY(100%);opacity:.8}
    to{transform:translateY(0);opacity:1}
  }
  @keyframes chartSlideDown{
    from{transform:translateY(0);opacity:1}
    to{transform:translateY(100%);opacity:.85}
  }
}

/* Light theme */
html[data-theme="light"]{
  --bg:#f5f3f7;
  --card:#ffffff;
  --card2:#f8f5fa;
  --line:#e5dfe9;
  --text:#201a24;
  --muted:#746a7c;
}
html[data-theme="light"] body{background:#f5f3f7;color:#201a24}
html[data-theme="light"] header,
html[data-theme="light"] .topbar{background:#ffffff;border-color:#e5dfe9}
html[data-theme="light"] .terminal-card,
html[data-theme="light"] .swap-panel,
html[data-theme="light"] .analytics-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .global-swap-history-section,
html[data-theme="light"] .history-list,
html[data-theme="light"] .flow-strip article{
  background:#ffffff!important;border-color:#e5dfe9!important;color:#201a24
}
html[data-theme="light"] .swap-input,
html[data-theme="light"] .token-box,
html[data-theme="light"] .quote-box,
html[data-theme="light"] .sheet,
html[data-theme="light"] .settings-sheet{
  background:#f8f5fa!important;color:#201a24!important;border-color:#e5dfe9!important
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .chart-toggle-top,
html[data-theme="light"] .chart-icon-btn,
html[data-theme="light"] .settings-btn,
html[data-theme="light"] .chart-sheet-close,
html[data-theme="light"] .theme-setting-btn{
  background:#f3eef6;color:#201a24;border-color:#ddd3e3
}
html[data-theme="light"] .wallet-btn{color:#121014}
html[data-theme="light"] .mobile-nav{background:#ffffff;border-color:#e5dfe9}