:root{--bg:#0b0d12;--bg2:#0f1320;--fg:#e7eaf0;--mut:#9aa3b2;--card:#121621;--border:#22283a;--accent:#4ea1ff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--fg);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;background:rgba(11,13,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:1000;overflow:visible}
.topbar .container{display:flex;justify-content:center;max-width:none;width:100%;padding:12px 24px}
.topbar-grid{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;width:100%;max-width:1400px;margin:0 auto}
.topbar-grid{overflow:visible}
.topbar-left{display:flex;align-items:center;min-width:0}
.topbar-center{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;min-width:0;overflow:visible}
.topbar-right{display:flex;justify-content:flex-start;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}

.brand{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tabs{flex:0 1 auto;justify-content:center}
.brand{font-weight:700;white-space:nowrap}
.muted{color:var(--mut)}
.crumb-coin{color:inherit;text-decoration:none}
.crumb-coin:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.tabs{display:flex;gap:10px;flex-wrap:wrap;white-space:nowrap;min-width:0;overflow:visible}
.tabs{scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--mut);background:transparent;flex:0 0 auto}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);border-color:var(--accent);box-shadow:none}
.search{margin-left:0;display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:nowrap}
.social{margin-left:12px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:10px;color:var(--mut);background:transparent}
.social:hover{border-color:var(--accent);color:var(--fg)}
.social svg{width:18px;height:18px;fill:currentColor}
.search input{width:clamp(220px,24vw,360px);max-width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.search button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.field{width:220px;max-width:60vw;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer}
.btn:hover{border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 18px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar .container{padding:12px 16px}.topbar-grid{justify-content:center}.topbar-center{justify-content:center}.topbar-right{justify-content:center}.search input{width:240px}}
@media (max-width:600px){.grid{grid-template-columns:1fr}.search{display:none}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.card .k{font-size:12px;color:var(--mut)}
.card .v{font-size:22px;margin-top:4px}
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.table th{font-size:12px;color:var(--mut);font-weight:600}
.thlink{color:inherit; text-decoration:none}
.thlink:hover{color:var(--fg)}
.table tr:last-child td{border-bottom:none}
.table th.lastshare,.table td.lastshare{white-space:nowrap;width:1%;}
h1{font-size:22px;margin:10px 0}
h2{font-size:16px;margin:18px 0 10px}

.charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 18px}
@media (max-width:900px){.charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.charts{grid-template-columns:1fr}}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.chart-card .k{font-size:12px;color:var(--mut);margin-bottom:8px}
.chart-card canvas{width:100%;display:block;border-radius:10px;background:rgba(0,0,0,0.12)}

/* Sort indicator in table headers */
.sort-ind { opacity: 0.8; font-weight: 600; font-size: 12px; }


/* sortable tables */
th[data-sort]{cursor:pointer; user-select:none;}

/* main page hero */
.hero{margin:18px 0 14px}
.hero-title{font-size:32px;font-weight:800;letter-spacing:2px;text-transform:uppercase}

/* /main coin cards */
.main-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
@media (max-width:900px){.main-cards{grid-template-columns:1fr}}
.coin-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.coin-card-head{display:flex;justify-content:space-between;align-items:center}
.coin-card-title{font-weight:800;font-size:18px;letter-spacing:.5px}
.coin-card-body{display:flex;flex-direction:column;gap:8px}
.coin-stat{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.coin-stat .k{font-size:12px;color:var(--mut)}
.coin-stat .v{font-size:14px}
.coin-card-foot{display:flex;justify-content:flex-end;margin-top:auto}

/* coin dropdown */
.coin-dd{position:relative;display:inline-block}
.coin-dd{position:relative;overflow:visible}
.coin-menu{display:none;position:absolute;top:34px;left:0;min-width:160px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 8px 28px rgba(0,0,0,.35);z-index:6000}

/* Portaled dropdown menu (moved to <body> by JS) so it isn't clipped by overflow containers */
.coin-menu.coin-menu-portal{position:fixed;top:0;left:0;z-index:99999}
.coin-menu.coin-menu-portal.open{display:block}

.search input{width:260px;max-width:32vw;min-width:160px}
.coin-item{display:block;padding:8px 10px;border-radius:10px;color:var(--fg);text-decoration:none;white-space:nowrap}
.coin-item:hover{background:rgba(255,255,255,.06)}
.coin-item.active{background:rgba(255,255,255,.10)}