* { box-sizing: border-box; margin: 0; padding: 0; }
:root, [data-theme="light"] {
--bg: #ffffff;
--bg-2: #f8fafd;
--bg-3: #eff2f5;
--line: #eff2f5;
--line-2: #cfd6e4;
--ink: #0d1421;
--ink-2: #58667e;
--ink-3: #a1a7b3;
--accent: #00b8cc;
--accent-2: #00d4ff;
--accent-soft: #e0f7fb;
--green: #16c784;
--green-bg: #e6f9f1;
--red: #ea3943;
--red-bg: #fdebeb;
--amber: #f0b90b;
--hot: #ff5e1c;
--bid: #16c784;
--ask: #ea3943;
--shadow: 0 4px 14px rgba(88,102,126,0.08);
--icon-bg: #fff;
--icon-ring: #eff2f5;
}
[data-theme="dark"] {
--bg: #0a0e1a;
--bg-2: #131826;
--bg-3: #1c2333;
--line: #1c2333;
--line-2: #2a3245;
--ink: #e6e9ef;
--ink-2: #8b94a7;
--ink-3: #5a6378;
--accent: #00d4ff;
--accent-2: #00f0ff;
--accent-soft: rgba(0,212,255,0.12);
--green: #1fd693;
--green-bg: rgba(31,214,147,0.14);
--red: #ff4f5e;
--red-bg: rgba(255,79,94,0.14);
--amber: #f0b90b;
--hot: #ff7a3a;
--bid: #1fd693;
--ask: #ff4f5e;
--shadow: 0 4px 18px rgba(0,0,0,0.4);
--icon-bg: #1c2333;
--icon-ring: #2a3245;
}
html, body { height: 100%; }
body {
background: var(--bg);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* TOP NAV */
.topnav {
height: 56px;
border-bottom: 1px solid var(--line);
background: var(--bg);
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center;
padding: 0 24px;
gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.logo:hover .lb-spark { filter: drop-shadow(0 0 4px #a8ff66); }
.logo .logo-mark { width: 30px; height: 30px; display: inline-flex; box-shadow: 0 4px 12px rgba(0, 149, 212, 0.32); border-radius: 7px; }
.logo .logo-mark svg { width: 30px; height: 30px; display: block; }
.logo .logo-mark .lb { transform-origin: center bottom; animation: logo-pulse 2.4s ease-in-out infinite; }
.logo .logo-mark .lb2 { animation-delay: .15s; }
.logo .logo-mark .lb3 { animation-delay: .3s; }
.logo .logo-mark .lb4 { animation-delay: .45s; }
.logo .logo-mark .lb-spark { animation: logo-spark 2.4s ease-in-out infinite; }
@keyframes logo-pulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes logo-spark { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.logo .logo-word { background: linear-gradient(90deg, var(--ink), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; letter-spacing: -.03em; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--ink); padding: 8px 0; position: relative; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -19px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.nav-spacer { flex: 1; }
.top-search { width: 240px; height: 36px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 12px 0 36px; background: var(--bg-2) url("data:image/svg+xml;utf8,'s `top: 56px`
resolves to the viewport (just under the sticky topnav) instead of being
anchored to .table-wrap's top, which would push the sticky thead down and
visually swallow row #1. */
.table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: clip; }
/* Cabal Coin List has 10+ wide columns (concentration bars are 120px). At
narrow desktop widths (1024px) the rightmost column clips. Allow x-axis
scrolling on that page only; keep y-axis clipped so the sticky thead fix
isn't undone (overflow-y: clip doesn't establish a sticky containing block). */
#page-watchlist .table-wrap { overflow-x: auto; overflow-y: clip; }
/* The overflow-x:auto above makes THIS .table-wrap a scroll container, so the
sticky 's `top: 56px` (meant to clear the viewport topnav) instead resolves
to the wrap's own top edge — pushing the opaque header 56px DOWN, on top of
row #1. Harmless on a long list (hidden mid-scroll), but when a search collapses
the table to a single row, the header paints over the only result. Pin the
header to the wrap top (top:0) here so it can never overlap content. */
#page-watchlist table.flow thead th { top: 0; }
/* In-page Cabal Coin List search. The global topnav search is display:none at
<=1180px, so phones and most iPads had NO way to filter this list. This bar
lives right above the list, sticks under the topnav while the list scrolls
beneath it (so the on-screen keyboard can't bury it), and is 16px to stop iOS
focus-zoom. Hidden >1180px where the topnav search already exists. */
.cc-search-wrap { display: none; }
@media (max-width: 1180px) {
.cc-search-wrap {
display: block;
position: sticky;
top: 56px; /* clear the sticky topnav (56px tall) */
z-index: 30;
background: var(--bg);
padding: 8px 0 10px;
}
}
.cc-search {
width: 100%;
box-sizing: border-box;
height: 44px;
font-size: 16px;
color: var(--ink);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 0 14px 0 40px;
outline: none;
background: var(--bg-2) url("data:image/svg+xml;utf8,