:root { color-scheme: dark; --bg:#0a0c10; --panel:#11151b; --panel-2:#171c24; --line:#252c36; --muted:#788390; --text:#f3f6fa; --green:#18c985; --green-bg:#123d30; --red:#ff5263; --blue:#4e8cff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 75% -20%,#18243a 0,transparent 33%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.topbar { height:70px; padding:0 max(24px,calc((100vw - 1440px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(10,12,16,.8); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; color:white; text-decoration:none; font-weight:750; letter-spacing:-.03em; font-size:19px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#2ad79a,#2476ff); font-size:13px; letter-spacing:-.02em; box-shadow:0 0 25px #1b997744; }
.top-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }.live-dot { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green); }.icon-button { border:1px solid var(--line);background:var(--panel-2);color:#bfc8d2;border-radius:8px;width:31px;height:31px;cursor:pointer;font-size:18px; }
main { width:min(1440px,calc(100% - 48px)); margin:0 auto 40px; }.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:44px 0 30px; }.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.16em; margin:0 0 10px; }h1 { font-size:clamp(28px,4vw,46px); letter-spacing:-.055em; line-height:1.05; margin:0; }.subtitle { color:#8f99a7; margin:12px 0 0; max-width:650px; font-size:15px; }
.summary { display:flex; padding:4px; border:1px solid var(--line);border-radius:14px;background:rgba(17,21,27,.8); }.summary div { min-width:110px;padding:13px 17px;border-right:1px solid var(--line); }.summary div:last-child{border:0}.summary span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.summary strong{font-size:19px;letter-spacing:-.03em}.summary div:nth-child(2) strong{color:var(--green)}
.panel { border:1px solid var(--line); border-radius:16px; background:rgba(17,21,27,.92); overflow:hidden; box-shadow:0 22px 60px #0005; }.toolbar { min-height:74px;padding:13px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}.toolbar label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.toolbar input,.toolbar select{height:38px;background:#0d1117;color:var(--text);border:1px solid var(--line);border-radius:9px;outline:none;padding:0 10px}.toolbar input:focus,.toolbar select:focus{border-color:#3778e5}.search{position:relative;margin-right:auto}.search span{position:absolute;left:12px;font-size:20px}.search input{width:210px;padding-left:35px}.input-suffix{position:relative}.input-suffix input{width:86px;padding-right:27px}.input-suffix span{position:absolute;right:10px;color:#65707d}.toggle-label{cursor:pointer!important;padding:0 5px}.toggle-label input{display:none}.toggle{width:34px;height:19px;border-radius:20px;background:#313844;position:relative;transition:.2s}.toggle:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#949eaa;left:3px;top:3px;transition:.2s}.toggle-label input:checked+.toggle{background:#145842}.toggle-label input:checked+.toggle:after{left:18px;background:var(--green)}
.notice{margin:12px 14px 0;padding:10px 12px;border:1px solid #6f4f21;background:#2e2515;color:#e4bd72;border-radius:9px;font-size:12px}.hidden{display:none!important}.table-wrap{overflow-x:auto;min-height:300px}table{width:100%;border-collapse:collapse;white-space:nowrap}th{height:43px;padding:0 14px;text-align:right;color:#717d8c;font-size:10px;text-transform:uppercase;letter-spacing:.07em;background:#0e1218;border-bottom:1px solid var(--line);cursor:default}th[data-sort]{cursor:pointer}th:first-child,th:nth-child(2),th:nth-child(3){text-align:left}td{padding:14px;border-bottom:1px solid var(--line);text-align:right;font-size:12px}td:first-child,td:nth-child(2),td:nth-child(3){text-align:left}tbody tr{transition:.15s}tbody tr:hover{background:#171d25}.coin{font-weight:800;color:#e8edf4;font-size:14px}.coin small{display:block;color:#65707d;font-weight:500;font-size:10px;margin-top:4px}.legs{display:grid;gap:7px}.leg{display:grid;grid-template-columns:18px 66px 86px;align-items:center;gap:5px}.direction{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:9px;font-weight:900}.direction.long{color:var(--green);background:#123c30}.direction.short{color:var(--red);background:#47212a}.exchange{font-weight:700;text-transform:capitalize}.price{color:#9aa5b1;font-variant-numeric:tabular-nums}.funding{display:grid;gap:7px}.funding-line{display:flex;gap:7px;align-items:center}.funding-line strong{width:70px;text-align:right;font-variant-numeric:tabular-nums}.interval{color:#697584}.positive{color:var(--green)}.negative{color:var(--red)}.pill{display:inline-flex;justify-content:center;min-width:76px;padding:7px 9px;border-radius:7px;font-weight:800;font-variant-numeric:tabular-nums}.pill.green{color:#8df1c9;background:var(--green-bg);border:1px solid #1c5a45}.pill.red{color:#ff9ba6;background:#3e2027;border:1px solid #65303a}.apr{font-weight:750}.volume{color:#b5bec9}.timers{display:grid;gap:7px;color:#8a96a4}.timer{display:flex;justify-content:flex-end;gap:6px}.timer:before{content:"◷";color:#5d8ecb}.panel-footer{padding:13px 14px;display:flex;justify-content:space-between;color:#5f6b79;font-size:11px}.empty{height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#66717f}.empty strong{color:#b4bdc7}.empty-icon{font-size:35px}.loading{height:280px;display:flex;align-items:center;justify-content:center;gap:7px}.loading span{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1s infinite alternate}.loading span:nth-child(2){animation-delay:.2s}.loading span:nth-child(3){animation-delay:.4s}@keyframes pulse{to{opacity:.15;transform:translateY(-5px)}}
@media(max-width:900px){main{width:min(100% - 24px,1440px)}.hero{align-items:flex-start;flex-direction:column;padding-top:30px}.summary{width:100%}.summary div{min-width:0;flex:1}.toolbar{align-items:flex-start}.search{width:100%;margin:0}.search input{width:100%}.panel-footer span:last-child{display:none}}@media(max-width:560px){.topbar{padding:0 14px}.top-meta>span:nth-child(2){display:none}main{width:100%;}.hero{padding:25px 16px 22px}.subtitle{font-size:13px}.summary div{padding:10px}.summary div:nth-child(2){display:none}.panel{border-radius:0;border-left:0;border-right:0}.toolbar>label:not(.search){flex:1;justify-content:space-between}.toolbar .toggle-label{flex-basis:100%}.input-suffix input{width:78px}}
.panel-footer{min-height:54px;padding:9px 14px;align-items:center;gap:16px}.pagination{display:flex;align-items:center;gap:8px;color:#8793a1}.pagination label{display:flex;align-items:center;gap:6px}.pagination select,.pagination button{height:30px;border:1px solid var(--line);background:#0d1117;color:#aeb8c4;border-radius:7px}.pagination select{padding:0 6px}.pagination button{width:32px;cursor:pointer;font-size:14px}.pagination button:disabled{opacity:.3;cursor:default}#page-info{min-width:105px;text-align:center}@media(max-width:900px){.disclaimer{display:none}}@media(max-width:560px){.panel-footer{flex-wrap:wrap}.pagination{order:-1;width:100%;justify-content:center}}
.leg{grid-template-columns:18px 82px 86px}.exchange{color:#e7edf5;text-decoration:none}.exchange:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.external{margin-left:4px;color:#526174;font-size:9px}.exchange:hover .external{color:var(--blue)}
.leg{grid-template-columns:18px 118px 86px}.market-tag{margin-left:5px;color:#657589;font-size:8px;font-weight:800;letter-spacing:.04em}.spot-timer:before{visibility:hidden}
th[data-sort]{user-select:none;transition:color .15s}th[data-sort]:hover{color:#b8c7d9}th[data-sort]::after{content:"↕";display:inline-block;margin-left:6px;color:#465261;font-size:9px}th[data-sort].sort-active{color:#dbe7f5}th[data-sort].sort-asc::after{content:"↑";color:var(--green)}th[data-sort].sort-desc::after{content:"↓";color:var(--green)}