:root{
  --red:#ef3340;
  --green:#27a63f;
  --text:#18191d;
  --muted:#90969f;
  --line:#eceff3;
  --bg:#f5f7fa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Lato,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}
body{min-width:1180px}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.header{height:80px;background:#fff;border-bottom:1px solid #eceef1;position:sticky;top:0;z-index:20}
.header-inner{height:100%;max-width:1660px;margin:0 auto;display:flex;align-items:center;padding:0 8px;gap:24px}
.logo-wrap{width:144px;display:flex;align-items:center}
.logo-wrap img{width:136px;height:auto;display:block}
.nav{height:100%;display:flex;align-items:center;gap:34px;flex:1;font-size:16px;white-space:nowrap}
.nav a{height:100%;display:flex;align-items:center;position:relative}
.nav a.active{color:#e8333f}
.nav a.active:after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:3px;background:#e8333f;border-radius:2px}
.new{font-size:8px;background:#ef3e49;color:#fff;border-radius:4px;padding:2px 4px;margin-left:4px;transform:translateY(-9px)}
.header-actions{display:flex;align-items:center;gap:13px;white-space:nowrap}
.text-link{font-size:14px;color:#45484e}
.sep{height:17px;width:1px;background:#d7dade}
.wallet{height:46px;padding:0 17px;border:0;border-radius:7px;background:#171717;color:#fff;font-weight:700;cursor:pointer}
.circle{width:46px;height:46px;border:1px solid #e1e4e8;background:#f8f9fa;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.circle img{width:23px;height:23px}

.hero-shell{max-width:1660px;margin:0 auto;padding:0 40px 12px}
.announcement{height:42px;margin-top:0;background:#f8f9fb;border-radius:0 0 11px 11px;color:#696e76;display:flex;align-items:center;padding:0 30px;gap:10px;font-size:14px}
.announcement img{width:18px}
.announcement button{margin-left:auto;border:0;background:transparent;font-size:25px;color:#666;cursor:pointer}

.search-ad-row{display:grid;grid-template-columns:minmax(760px,1fr) 460px;gap:28px;align-items:start;padding-top:26px}
.search-box{height:76px;background:#fff;border:1px solid #f0f1f3;border-radius:11px;display:flex;align-items:center;padding-left:29px;box-shadow:0 1px 1px rgba(0,0,0,.01)}
.search-icon{width:28px;height:28px;margin-right:18px;opacity:.75}
.search-box input{flex:1;height:100%;border:0;outline:0;font-size:20px;color:#333}
.search-box input::placeholder{color:#858b94}
.shortcut{width:29px;height:29px;border-radius:8px;background:#c8ced6;color:#fff;display:grid;place-items:center;font-weight:700}
.search-divider{height:42px;width:1px;background:#d8dce1;margin:0 26px}
.all-btn{width:86px;height:76px;border:0;background:transparent;font-size:18px;cursor:pointer}
.all-btn span{font-size:16px;margin-left:4px}
.trending{height:54px;display:flex;align-items:center;gap:18px;font-size:14px;white-space:nowrap;overflow:hidden}
.trend-label{color:#45484e}
.trending a{display:flex;align-items:center;gap:7px;color:#45484e}
.trending img{width:22px;height:22px;border-radius:50%}
.trending .more{margin-left:4px}

.promo{height:94px;border-radius:10px;background:linear-gradient(120deg,#17261e 0%,#183227 55%,#0e1d17 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;overflow:hidden;position:relative}
.promo:after{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border:1px solid rgba(72,255,164,.25);border-radius:50%}
.promo-copy{position:relative;z-index:2;display:flex;flex-direction:column}
.promo-copy strong{font-size:28px;line-height:1}
.promo-copy strong span,.promo-copy b{color:#30e68e}
.promo-copy b{font-size:24px;margin-top:5px}
.promo-copy small{font-size:12px;color:#b7c5be;margin-top:5px}
.promo-art{position:relative;width:110px;height:70px;z-index:2}
.coin-dollar{position:absolute;right:18px;top:2px;width:62px;height:62px;border-radius:50%;border:6px solid #4ee69b;color:#59eaa3;display:grid;place-items:center;font-size:30px;font-weight:900;transform:rotate(-8deg);box-shadow:0 0 0 5px rgba(65,221,144,.12)}
.mini-card-icon{position:absolute;right:0;bottom:5px;background:#25d779;width:35px;height:28px;border-radius:6px;display:grid;place-items:center;font-weight:900;transform:rotate(8deg)}

.container{max-width:1660px;margin:0 auto;padding:0 40px}
.overview-card{background:#fff;border:1px solid #eef0f3;border-radius:11px;overflow:hidden}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr}
.metric{min-height:112px;display:grid;grid-template-columns:50px 1fr 150px;align-items:center;padding:20px 22px;position:relative}
.metric:nth-child(1),.metric:nth-child(3){border-right:1px solid var(--line)}
.metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--line)}
.metric-icon{width:38px;height:38px}
.metric-main .label{display:block;color:#969ba3;font-size:18px;margin-bottom:6px}
.metric-main strong{font-size:28px;letter-spacing:-.5px}
.metric-24{text-align:right;padding-right:5px}
.metric-24 span{display:block;color:#9399a1;font-size:16px;margin-bottom:11px}
.metric-24 b{color:var(--green);font-size:19px;font-weight:500}
.submetrics{height:60px;border-top:1px solid var(--line);display:flex;align-items:center;gap:34px;padding:0 16px;font-size:15px}
.submetrics>div{display:flex;gap:9px;align-items:center}
.submetrics span{color:#44484e}
.submetrics b{font-weight:500}

.trx-card{background:#fff;margin-top:28px;border:1px solid #eef0f3;border-radius:11px;overflow:hidden}
.trx-top{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--line)}
.trx-id{display:flex;align-items:center;gap:20px}
.trx-id img{width:58px;height:58px}
.trx-id>div>span{display:block;font-size:24px;font-weight:700}
.price-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.price-row strong{font-size:23px}
.green-pill{font-size:14px;color:#1b9c37;background:#e9f8ec;border-radius:7px;padding:4px 8px}
.market{display:flex;flex-direction:column;gap:17px;text-align:right;font-size:15px}
.market span{color:#8f969f;margin-right:5px}
.market b{font-weight:500}
.trx-body{display:grid;grid-template-columns:1fr 360px;min-height:230px}
.chart-wrap{padding:20px 30px}
.chart-wrap svg{width:100%;height:190px}
.chart-wrap .area{fill:url(#area)}
.chart-wrap .line{fill:none;stroke:#607cf5;stroke-width:2.5}
.chart-wrap circle{fill:#607cf5}
.supply{padding:32px 30px;text-align:right;display:flex;flex-direction:column;gap:44px}
.supply span{display:block;color:#9399a2;font-size:16px}
.supply strong{display:block;font-size:22px;margin-top:7px}

.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0 60px}
.list-card{background:#fff;border:1px solid #eef0f3;border-radius:11px;overflow:hidden}
.card-head{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.card-head h2{font-size:20px;margin:0}
.card-head a{font-size:14px;color:#e93542}
.list-row{height:64px;border-bottom:1px solid #f1f2f4;display:grid;grid-template-columns:150px 1fr 180px;align-items:center;padding:0 22px;font-size:14px}
.list-row b{color:#ec3745}
.list-row span{color:#484c52}
.list-row em{text-align:right;font-style:normal;color:#858b94}

.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#17191d;color:#fff;padding:11px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-size:14px}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1300px){
  body{min-width:1000px}
  .nav{gap:20px;font-size:14px}
  .header-actions .text-link,.header-actions .sep{display:none}
  .search-ad-row{grid-template-columns:1fr 360px}
  .promo-copy strong{font-size:23px}.promo-copy b{font-size:19px}
}