/* ---------- tokens ---------- */ :root{ --bg:#181623; --bg-deep:#131120; --panel:#1c1a29; --panel-2:#211e2e; --line:#2b2840; --line-soft:#252235; --text:#fbfbff; --muted:#b7b5ca; --dim:#7b788f; --accent:#cb97ff; --accent-dim:#a877e0; --up:#36eb8d; --down:#ff6b6b; --amber:#ffb51c; --r:4px; --r-lg:10px; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --topbar-h:56px; --ticker-h:34px; } *{box-sizing:border-box} /* min-height, not height: a fixed 100% on shrinks the sticky containing block and the topbar stops sticking. */ html{height:100%} body{ min-height:100%; margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} ::selection{background:rgba(203,151,255,.28)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:1px solid transparent;border-radius:var(--r); font-family:var(--sans);font-weight:700;letter-spacing:.06em; cursor:pointer;white-space:nowrap; transition:background .16s ease,border-color .16s ease,color .16s ease; } .btn svg{width:14px;height:14px} .btn-primary{ background:var(--accent);color:#11101a;border-color:var(--accent); font-size:14px;padding:12px 20px; } .btn-primary:hover{background:#d9b0ff;border-color:#d9b0ff} .btn-primary .arr{width:12px;height:12px;opacity:.65} .btn-ghost{ background:rgba(34,32,48,.5);color:var(--text);border-color:var(--line); font-size:14px;padding:12px 20px; } .btn-ghost:hover{background:rgba(45,42,64,.7);border-color:#3a3654} .btn-ghost-accent{ background:rgba(196,147,255,.1);color:var(--accent);border-color:rgba(202,150,255,.4); font-size:12px;padding:9px 14px; } .btn-ghost-accent:hover{background:rgba(196,147,255,.18)} .btn-block{width:100%;border-radius:var(--r-lg);padding:14px} .btn-mini{ background:rgba(25,22,35,.4);color:var(--muted);border-color:var(--line); font-size:10px;padding:7px 11px; } .btn-mini:hover{color:var(--text);border-color:#3a3654} .btn-mini svg{width:11px;height:11px} .btn-mini-accent{background:rgba(196,147,255,.1);color:var(--accent);border-color:rgba(202,150,255,.4)} .btn-mini-accent:hover{color:var(--accent);background:rgba(196,147,255,.18)} /* ---------- topbar ---------- */ .topbar{ position:sticky;top:0;z-index:40; height:var(--topbar-h); display:grid;grid-template-columns:1fr minmax(0,460px) 1fr;align-items:center;gap:16px; padding:0 16px; background:rgba(19,17,32,.86); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); } .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em;justify-self:start} .brand img{display:block} .search{position:relative;display:flex;align-items:center} .search svg{position:absolute;left:12px;width:14px;height:14px;color:var(--dim)} .search input{ width:100%;height:36px;padding:0 12px 0 34px; background:rgba(33,32,47,.6);border:1px solid var(--line);border-radius:var(--r); color:var(--text);font-family:var(--sans);font-size:13px;outline:none; } .search input::placeholder{color:var(--dim)} .search input:focus{border-color:rgba(202,150,255,.45);background:rgba(38,36,55,.8)} .topbar-right{display:flex;align-items:center;gap:10px;justify-self:end} .icon-btn{ display:grid;place-items:center;width:34px;height:34px; background:rgba(33,32,47,.6);border:1px solid var(--line);border-radius:var(--r);color:var(--muted); } .icon-btn svg{width:13px;height:13px} .icon-btn:hover{color:var(--text);border-color:#3a3654} /* ---------- ticker ---------- */ .tickerbar{ height:var(--ticker-h);overflow:hidden;position:relative; background:var(--bg-deep);border-bottom:1px solid var(--line); } .tickerbar::before,.tickerbar::after{ content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none; } .tickerbar::before{left:0;background:linear-gradient(90deg,var(--bg-deep),transparent)} .tickerbar::after{right:0;background:linear-gradient(270deg,var(--bg-deep),transparent)} .ticker-track{ display:flex;align-items:center;height:100%;width:max-content; animation:slide 150s linear infinite; } .tickerbar:hover .ticker-track{animation-play-state:paused} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tick{ display:flex;align-items:center;gap:7px; padding:0 20px;border-right:1px solid var(--line-soft); font-family:var(--mono);font-size:11px;white-space:nowrap; } .tick .sym{color:var(--text);font-weight:700} .tick .co{color:var(--dim);font-family:var(--sans);font-size:10px} .tick .px{color:var(--text)} .tick .ch{font-weight:700} /* ---------- asset icons ---------- */ .ico{ display:grid;place-items:center;flex:none;overflow:hidden; width:20px;height:20px;border-radius:6px; background:#221f31;border:1px solid var(--line-soft); } .ico img{width:100%;height:100%;object-fit:contain;display:block} .ico-fallback{ font-family:var(--sans);font-weight:800;font-size:8px;letter-spacing:-.02em; color:var(--muted);background:#2a2740; } .ico-coin{border-radius:50%} /* ---------- layout ---------- */ .layout{ display:grid; grid-template-columns:230px minmax(0,1fr) 268px; gap:16px; max-width:1440px;margin:0 auto;padding:16px; align-items:start; } .panel{ background:rgba(33,30,46,.3); border:1px solid var(--line); border-radius:var(--r-lg); } .panel-head{ display:flex;align-items:center;justify-content:space-between; padding:12px 14px;border-bottom:1px solid var(--line); } .label{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--dim)} .asof{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--dim)} .live{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--accent)} .dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} /* ---------- markets sidebar ---------- */ .markets{position:sticky;top:calc(var(--topbar-h) + 16px)} .markets-list{max-height:calc(100vh - var(--topbar-h) - 110px);overflow-y:auto} .mkt{ display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px; padding:9px 14px;border-bottom:1px solid var(--line-soft); } .mkt:last-child{border-bottom:0} .mkt-mid{min-width:0} .mkt-sym{font-family:var(--mono);font-size:11px;font-weight:700;line-height:1.3} .mkt-co{ font-size:9px;color:var(--dim);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mkt-right{text-align:right;min-width:0} .mkt-px{font-family:var(--mono);font-size:11px;color:var(--text);line-height:1.3} .mkt-ch{font-family:var(--mono);font-size:9px;font-weight:700;line-height:1.3} .mkt-px.is-pending{color:var(--dim)} /* ---------- hero ---------- */ .center{display:flex;flex-direction:column;gap:16px;min-width:0} .hero{ position:relative;overflow:hidden; border:1px solid var(--line);border-radius:var(--r-lg); background: radial-gradient(120% 140% at 12% 0%,rgba(150,96,220,.30) 0%,transparent 58%), radial-gradient(90% 120% at 92% 110%,rgba(203,151,255,.16) 0%,transparent 60%), linear-gradient(160deg,#241c38 0%,#1b1729 55%,#191624 100%); padding:40px 32px 36px;text-align:center; } .hero-glow{ position:absolute;inset:-40% -10% auto;height:70%; background:radial-gradient(closest-side,rgba(203,151,255,.22),transparent); filter:blur(20px);pointer-events:none; } .hero>*{position:relative} .hero h1{ margin:0;font-size:36px;font-weight:900;letter-spacing:-.9px;line-height:1.15; } .hero-em{ display:inline-block;font-style:italic;font-weight:800; padding-right:.12em;margin-right:-.12em; background:linear-gradient(90deg,#e8d4ff,var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-sub{ margin:14px auto 0;max-width:620px; font-size:14px;line-height:1.65;color:var(--muted); } .hero-sub mark{ background:rgba(196,147,255,.14);color:var(--accent); padding:2px 6px;border-radius:var(--r);font-weight:600; } .hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} /* ---------- board ---------- */ .board{padding:14px} .board-tabs{display:flex;flex-wrap:wrap;gap:6px} .tab{ background:transparent;border:1px solid transparent;border-radius:var(--r); color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em; padding:8px 14px;cursor:pointer;transition:background .14s ease,color .14s ease; } .tab:hover{color:var(--text);background:rgba(255,255,255,.03)} .tab.is-active{background:rgba(201,154,255,.15);color:var(--accent)} .board-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .select{position:relative;display:inline-flex;align-items:center} .select svg{position:absolute;right:9px;width:12px;height:12px;color:var(--dim);pointer-events:none} .select select{ appearance:none;-webkit-appearance:none; background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r); color:var(--muted);font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.1em; padding:8px 28px 8px 11px;cursor:pointer;outline:none; } .select select:hover{border-color:#3a3654;color:var(--text)} .select select:focus{border-color:rgba(202,150,255,.45)} .select option{background:#1c1a29;color:var(--text)} .board-head,.row{ display:grid; grid-template-columns:minmax(150px,1.6fr) minmax(120px,1.1fr) 90px minmax(90px,1fr) 90px; align-items:center;gap:14px; } .board-head{ padding:14px 10px 10px;margin-top:12px;border-bottom:1px solid var(--line); font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--dim); } .ta-r{text-align:right} .board-rows{display:flex;flex-direction:column} .row{ padding:12px 10px;border-bottom:1px solid var(--line-soft); transition:background .14s ease; } .row:hover{background:rgba(203,151,255,.05)} .coin{display:flex;align-items:center;gap:10px;min-width:0} .coin .ico{width:30px;height:30px;font-size:11px} .coin-name{font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .coin-tic{font-family:var(--mono);font-size:10px;color:var(--dim)} .under{display:flex;align-items:center;gap:8px;min-width:0} .under .sym{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)} .lev{ font-family:var(--mono);font-size:9px;font-weight:700;padding:3px 7px;border-radius:var(--r);white-space:nowrap; } .lev.long{background:rgba(54,235,141,.14);color:var(--up)} .lev.short{background:rgba(255,107,107,.14);color:var(--down)} .chg{font-family:var(--mono);font-size:12px;font-weight:700;text-align:right} .up{color:var(--up)} .down{color:var(--down)} .prog{display:flex;align-items:center;gap:8px} .prog-bar{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden} .prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-dim),var(--accent))} .prog-num{font-family:var(--mono);font-size:9px;color:var(--dim);min-width:28px;text-align:right} .mcap{font-family:var(--mono);font-size:12px;text-align:right;color:var(--text)} .is-pending{color:var(--dim)} .board-foot{margin:0;padding:34px 10px;text-align:center;font-size:12px;color:var(--dim)} .empty{padding:28px 14px;text-align:center;font-size:11px;line-height:1.6;color:var(--dim)} /* ---------- recent trades ---------- */ .right{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--topbar-h) + 16px)} .trades-list{ height:min(560px,calc(100vh - var(--topbar-h) - 190px)); overflow-y:auto;padding:4px 0; } .trade{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px; padding:9px 14px;border-bottom:1px solid var(--line-soft); animation:fadein .3s ease; } @keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .trade-sym{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em} .trade-addr{font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:2px} .trade-amt{font-family:var(--mono);font-size:11px;font-weight:700} /* scrollbars */ .markets-list::-webkit-scrollbar,.trades-list::-webkit-scrollbar{width:6px} .markets-list::-webkit-scrollbar-thumb,.trades-list::-webkit-scrollbar-thumb{background:#33304a;border-radius:99px} .markets-list::-webkit-scrollbar-track,.trades-list::-webkit-scrollbar-track{background:transparent} /* ---------- footer ---------- */ .footer{ display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:1440px;margin:0 auto;padding:16px; border-top:1px solid var(--line); } .footer .copy{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim)} .footer nav{display:flex;gap:8px} /* ---------- responsive ---------- */ @media (max-width:1180px){ .layout{grid-template-columns:200px minmax(0,1fr)} .right{grid-column:1/-1;position:static;flex-direction:row;align-items:stretch} .right .panel{flex:1} .right .btn-block{width:auto;align-self:flex-end;padding:14px 24px} .trades-list{height:300px} } @media (max-width:860px){ .topbar{grid-template-columns:auto 1fr auto;gap:10px} .brand span{display:none} .layout{grid-template-columns:minmax(0,1fr)} .markets{position:static} .markets-list{max-height:260px} .hero{padding:32px 20px} .hero h1{font-size:26px;letter-spacing:-.5px;overflow-wrap:break-word} .board-head,.row{grid-template-columns:minmax(0,1.6fr) 84px 78px;gap:10px} .board-head span:nth-child(4),.board-head span:nth-child(5), .row .prog,.row .mcap{display:none} .right{flex-direction:column} .right .btn-block{width:100%;align-self:auto} } @media (max-width:560px){ .topbar-right .btn-ghost-accent{font-size:10px;padding:9px 10px} .hero-actions .btn{width:100%} } @media (prefers-reduced-motion:reduce){ .ticker-track{animation:none} .dot{animation:none} .trade{animation:none} } /* ---------- wallet button + menu ---------- */ .wallet-wrap{position:relative} .btn-ghost-accent.is-connected{ font-family:var(--mono);letter-spacing:.02em; background:rgba(54,235,141,.1);border-color:rgba(54,235,141,.4);color:var(--up); } .btn-ghost-accent.is-connected:hover{background:rgba(54,235,141,.18)} .wallet-menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:210px; padding:8px;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:0 12px 32px rgba(0,0,0,.5); } .wallet-addr{ padding:8px 9px;margin-bottom:6px;border-bottom:1px solid var(--line-soft); font-family:var(--mono);font-size:9px;color:var(--dim);word-break:break-all; } .wallet-item{ display:block;width:100%;padding:9px;text-align:left;cursor:pointer; background:transparent;border:0;border-radius:var(--r); font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted); } .wallet-item:hover{background:rgba(255,255,255,.05);color:var(--text)} .wallet-item-out{color:var(--down)} .wallet-item-out:hover{background:rgba(255,107,107,.1);color:var(--down)}