/* ════════════════════════════════════════════════════════════════════════════
   ShieldX — shared shell stylesheet for the data pages
   (Verified Tokens · Latest Scans · Top Tokens · API)

   Mirrors the EXACT design tokens used by index.html / scanner-pro.html so these
   pages are native, not bolted-on. Pages link this first, then premium.css +
   mobile-optimizations.css, then add page-specific styles inline.
   ════════════════════════════════════════════════════════════════════════════ */
@import url('shieldx-nav.css?v=20260630d');   /* shared left-sidebar + top-bar chrome (.shx-*) */

:root {
  --bg: #060c14;  --bg2: #0b1623;  --bg3: #101e2e;  --bg4: #162840;
  --blue: #3b82f6;  --blue-dim: rgba(59,130,246,.12);  --blue-border: rgba(59,130,246,.25);
  --teal: #14b8a6;  --teal-dim: rgba(20,184,166,.10);
  --green: #22c55e; --green-dim: rgba(34,197,94,.10);
  --amber: #f59e0b; --amber-dim: rgba(245,158,11,.10);
  --red: #ef4444;   --red-dim: rgba(239,68,68,.10);
  --text: #e2ebf5;  --text2: #7a9cc0;  --text3: #3d6080;
  --border: rgba(255,255,255,.10);  --border2: rgba(255,255,255,.16);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Sora', 'Inter', sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 20px;
  --shadow-card: 0 16px 48px rgba(0,0,0,.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;            /* no sideways scroll on phones (off-canvas sidebar / wide rows) */
  font-family: var(--body);
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 520px at 88% 12%, rgba(20,184,166,.08), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(59,130,246,.30); color: #fff; }

/* ── layout (content sits above the shared token-background.js layer) ──── */
.shell-main { max-width: 1200px; margin: 0 auto; padding: 96px 24px 64px; position: relative; z-index: 1; }
footer { position: relative; z-index: 1; }
.shell-section { margin-top: 28px; }

/* ── content offset for the sidebar/top bar (data pages; .shx-* live in shieldx-nav.css) ── */
/* `margin: 0` used to leave margin-right at 0 while only margin-left was restored
   for the sidebar, so once the window passed sidebar + 1180 the content stopped
   growing AND stayed left-aligned — all the slack piled up on the right. Measured
   dead zone: 30px at 1366, 192px at 1576, 536px at 1920 (over a quarter of the
   screen), with the grid stuck at 3 columns however wide the display got, because
   `repeat(auto-fill, minmax(320px, 1fr))` never had room for a fourth track.

   1600 instead of 1180 gives that fourth column back on large monitors, and
   `margin-right: auto` splits whatever slack is left past the cap instead of
   dumping it on one side. The cap itself is deliberate and stays — line length
   should not grow without limit on an ultrawide — it just should not be lopsided.
   At 1366 the computed width is below the cap either way, so that layout is
   unchanged. */
/* Bottom padding 64px → 24px, and the footer's own 64px top margin → 28px.
   Measured on all three listing pages: 128px of empty background sat between the
   pagination and the footer — 64 from here plus 64 from the footer, stacked. On a
   12-card page that reads as the content having run out rather than as breathing
   room. Changed HERE, not on the base `.shell-main` rule: every listing page
   carries body.has-shx-side, so this selector is the one that actually applies
   (editing the base rule first changed nothing, which the measurement caught). */
body.has-shx-side .shell-main { max-width: 1600px; margin: 0 auto 0 var(--shx-side-w);
  padding: calc(var(--shx-top-h) + 22px) 30px 24px; }
body.has-shx-side footer { margin-left: var(--shx-side-w); margin-top: 28px; }
@media (max-width: 900px) {
  body.has-shx-side .shell-main { margin-left: 0; max-width: 100%; padding: calc(var(--shx-top-h) + 16px) 14px 48px; }
  body.has-shx-side footer { margin-left: 0; }
}

/* ── nav (matches index.html nav) ─────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
  background: rgba(6,12,20,.88);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 0 rgba(59,130,246,.06), 0 12px 40px rgba(0,0,0,.35);
}
.nav-logo { display: flex; align-items: center; gap: 12px; font-family: var(--display);
  font-weight: 800; font-size: 20px; color: var(--text); text-decoration: none;
  letter-spacing: -.02em; transition: transform .2s, filter .2s; }
.nav-logo:hover { transform: translateY(-1px); filter: drop-shadow(0 6px 14px rgba(96,165,250,.35)); }
.nav-logo-text { background: linear-gradient(135deg,#fff 0%,#b9d4ff 60%,#67e8f9 110%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { position: relative; color: var(--text2); text-decoration: none; font-size: 14px;
  font-weight: 600; padding: 6px 2px; transition: color .22s ease; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, #60a5fa 30%, #22d3ee 70%, transparent);
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2,.7,.25,1); }
.nav-links a:hover { color: #fff; text-shadow: 0 0 18px rgba(96,165,250,.28); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: #fff; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links .nav-ai-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(124,58,237,.10));
  border: 1px solid rgba(103,232,249,.22); color: #d1ecff; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-menu-btn { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 8px; }
.nav-menu-btn svg { width: 24px; height: 24px; }

/* ── buttons (matches .btn / .btn-primary / .btn-ghost) ───────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 20px; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--body); letter-spacing: .01em; text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .22s ease, border-color .22s, background .22s, color .22s, box-shadow .22s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 16px; }
.btn-primary { background: linear-gradient(135deg, rgba(59,130,246,.96), rgba(37,99,235,.94) 48%, rgba(6,182,212,.84) 118%);
  color: #fff; border-color: rgba(96,165,250,.34);
  box-shadow: 0 18px 40px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.10); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, rgba(96,165,250,.98), rgba(37,99,235,.96) 48%, rgba(8,145,178,.90) 118%);
  box-shadow: 0 22px 48px rgba(37,99,235,.30), 0 0 0 1px rgba(96,165,250,.12), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-ghost { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  color: #d8e7f9; border: 1px solid rgba(255,255,255,.12); }
.btn-ghost:hover { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  color: #fff; border-color: rgba(96,165,250,.22); }

/* ── page hero / headings ─────────────────────────────────────────────── */
.page-head { text-align: center; margin-bottom: 8px; }
.page-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,211,238,.10), rgba(96,165,250,.10));
  border: 1px solid rgba(96,165,250,.30); color: #93c5fd; font-size: 11px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 0 24px rgba(96,165,250,.15); }
.page-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee; animation: shxPulse 1.8s ease-in-out infinite; }
@keyframes shxPulse { 0%,100% { opacity:1; transform: scale(1);} 50% { opacity:.5; transform: scale(1.35);} }
.page-title { font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 5vw, 48px); margin: 18px 0 10px; }
.page-title .grad { background: linear-gradient(135deg,#fff 0%,#b9d4ff 55%,#67e8f9 115%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.page-sub { color: var(--text2); font-size: 15px; max-width: 640px; margin: 0 auto; line-height: 1.65; }

/* ── search bar ───────────────────────────────────────────────────────── */
.shx-search { position: relative; max-width: 460px; margin: 26px auto 8px; }
.shx-search input { width: 100%; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 13px 16px 13px 42px; color: #fff; font-family: var(--body); font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s; }
.shx-search input::placeholder { color: #a8b3d4; }
.shx-search input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.shx-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #a8b3d4; }

/* ── data-source note (live vs. curated fallback) ─────────────────────── */
.data-note { text-align: center; margin: 10px auto 0; max-width: 620px; font-size: 12px; color: var(--text3); }
.data-note .dn-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.data-note.live .dn-dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.data-note.cached .dn-dot { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.data-note a { color: #60a5fa; text-decoration: none; }
.data-note a:hover { text-decoration: underline; }

/* ── filter chips ─────────────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.chip { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--text2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: all .18s; }
.chip:hover { color: #fff; border-color: rgba(96,165,250,.30); }
.chip.active { color: #fff; background: var(--blue-dim); border-color: var(--blue-border); }

/* ── card grid + token card ───────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; }
.tk-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(14,24,38,.92), rgba(7,13,22,.97));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s, border-color .25s, box-shadow .25s; }
.tk-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.30), rgba(20,184,166,.20), transparent); opacity: .7; }
.tk-card:hover { transform: translateY(-3px); border-color: rgba(96,165,250,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.30), 0 0 0 1px rgba(96,165,250,.06); }
.tk-top { display: flex; align-items: center; gap: 12px; }
.tk-logo { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(20,184,166,.12));
  border: 1px solid rgba(255,255,255,.10); font-weight: 800; font-size: 14px; color: #cfe3ff; overflow: hidden; }
.tk-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.tk-id { min-width: 0; flex: 1; }
.tk-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-sym { font-size: 12px; color: var(--text3); margin-top: 2px; }
.tk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.tk-meta-k { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.tk-meta-v { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-addr { font-family: var(--mono); font-size: 11px; color: #93b6e0; }
.tk-date { font-size: 11px; color: var(--text3); }

/* ── badges / tags / pills ────────────────────────────────────────────── */
.tag { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.tag-blue { background: var(--blue-dim); color: #60a5fa; }
.tag-green { background: var(--green-dim); color: #4ade80; }
.tag-amber { background: var(--amber-dim); color: #fbbf24; }
.tag-red { background: var(--red-dim); color: #f87171; }
.tag-teal { background: var(--teal-dim); color: #5eead4; }
.tag-neutral { background: var(--bg4); color: var(--text3); }
.sbadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: #dbeafe; }
.sbadge-verified { background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.07)); color: #bbf7d0; border-color: rgba(34,197,94,.24); }
.sbadge-paid { background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(245,158,11,.08)); color: #fcd34d; border-color: rgba(245,158,11,.28); }
.sbadge-chain { background: rgba(255,255,255,.04); color: var(--text2); border-color: rgba(255,255,255,.08); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px currentColor; }

/* ── states ───────────────────────────────────────────────────────────── */
.state-msg { grid-column: 1 / -1; text-align: center; color: var(--text2); padding: 56px 20px; font-size: 14px; }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: shxShimmer 1.3s linear infinite; border-radius: 12px; }
@keyframes shxShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-card { height: 168px; }
.center { text-align: center; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 30px; }

/* ── Top Tokens listing layout (aggregator-style, ShieldX colours) ────── */
.tt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.tt-toolbar .shx-search { margin: 0; flex: 1 1 240px; max-width: 420px; }
.tt-toolbar .spacer { flex: 1; }
.tt-stat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: var(--text2); font-weight: 600; }

/* Paid ad placements now live in assets/shieldx-ads.{css,js} (.adx-* namespace).
   ttscroll stays — .tt-strip-track below still uses it for the trending strip. */
@keyframes ttscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tt-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.tt-cols.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tt-cols.cols-1 { grid-template-columns: minmax(0,1fr); max-width: 520px; }
.tt-col-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; }
.tt-col-head h2 { font-family: var(--display); font-size: 18px; font-weight: 800; margin: 0; }
.tt-col-head a { font-size: 12px; color: #60a5fa; text-decoration: none; cursor: pointer; }
.tt-col-head a:hover { text-decoration: underline; }
.tt-col-list { display: flex; flex-direction: column; gap: 8px; }
.tt-panel { background: linear-gradient(180deg, rgba(13,22,35,.55), rgba(8,14,23,.72)); border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px; padding: 16px 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03); }
.tt-panel .tt-col-head { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 11px; margin: 0 0 12px; }

/* ── bottom trending strip (auto-scrolls; reuses the marquee animation) ──── */
.tt-strip-wrap { margin-top: 26px; }
.tt-strip-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
.tt-strip-head h2 { font-family: var(--display); font-size: 16px; font-weight: 800; margin: 0; }
.tt-strip-head span { font-size: 12px; color: var(--text3); }
.tt-strip { display: flex; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tt-strip-track { display: flex; gap: 10px; flex-shrink: 0; animation: ttscroll 64s linear infinite; will-change: transform; }
.tt-strip:hover .tt-strip-track { animation-play-state: paused; }
.tt-chip { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 9px 14px 9px 9px; border-radius: 12px;
  text-decoration: none; color: inherit; background: linear-gradient(135deg, rgba(20,30,46,.85), rgba(10,16,26,.92));
  border: 1px solid rgba(255,255,255,.07); transition: border-color .18s, transform .18s; white-space: nowrap; }
.tt-chip:hover { border-color: rgba(96,165,250,.3); transform: translateY(-2px); }
.tt-chip-logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(20,184,166,.12)); border: 1px solid rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #cfe3ff; }
.tt-chip-name { font-weight: 700; font-size: 13px; }
.tt-chip-sym { font-size: 10.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .03em; }
@media (prefers-reduced-motion: reduce) { .tt-strip-track { animation: none; } .tt-strip { overflow-x: auto; } }

.tt-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 30px; position: relative; z-index: 1; }
.tt-pg { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--text2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: all .15s; }
.tt-pg:hover:not(:disabled) { color: #fff; border-color: rgba(96,165,250,.32); transform: translateY(-1px); }
.tt-pg.active { color: #fff; background: linear-gradient(135deg, rgba(59,130,246,.9), rgba(37,99,235,.9)); border-color: rgba(96,165,250,.5); }
.tt-pg:disabled { opacity: .4; cursor: not-allowed; }
.tt-pg-dots { color: var(--text3); padding: 0 4px; }

.lrow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px;
  background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.05);
  transition: border-color .18s, background .18s, transform .18s; }
.lrow:hover { border-color: rgba(96,165,250,.24); transform: translateX(2px); background: rgba(96,165,250,.06); }
.lrow-rank { width: 16px; text-align: center; font-size: 11px; color: var(--text3); flex-shrink: 0; }
.lrow-logo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(20,184,166,.12)); border: 1px solid rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #cfe3ff; }
.lrow-id { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.lrow-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-name svg { flex-shrink: 0; }
.lrow-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lrow-sym { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .03em; }
.lrow-addr { font-family: var(--mono); font-size: 10.5px; color: #7da9d8; text-decoration: none; }
.lrow-addr:hover { color: #bfe3ff; text-decoration: underline; }
.tk-trade, .lrow-trade { font-size: 11px; font-weight: 600; color: #fbbf24; text-decoration: none; white-space: nowrap; }
.tk-trade:hover, .lrow-trade:hover { color: #fcd34d; text-decoration: underline; }
.lrow-right { text-align: right; flex-shrink: 0; }
.lrow-change { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lrow-change.up { color: #4ade80; } .lrow-change.down { color: #f87171; } .lrow-change.flat { color: var(--text3); }
.lrow-time { font-size: 10.5px; color: var(--text3); margin-top: 2px; }

@media (max-width: 920px) { .tt-cols, .tt-cols.cols-2, .tt-cols.cols-1 { grid-template-columns: 1fr; max-width: none; } }

/* ── footer (matches index.html footer) ───────────────────────────────── */
footer { position: relative; margin-top: 64px; padding: 48px 40px 32px;
  background: linear-gradient(180deg, rgba(11,22,35,1), rgba(6,12,20,1)); border-top: 1px solid rgba(255,255,255,.06); }
footer::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.30), rgba(20,184,166,.20), transparent); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 280px; }
.footer-brand-row { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 18px; }
.footer-brand p { color: var(--text2); font-size: 13px; line-height: 1.7; margin: 0; }
.footer-col h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .10em; color: #93c5fd; margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--text2); text-decoration: none; margin-bottom: 10px; transition: color .22s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { max-width: 1200px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--text3); font-size: 13px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 0 18px; }
  .nav-links, .nav-cta .nav-overview-btn { display: none; }
  .nav-menu-btn { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .shell-main { padding: 88px 14px 48px; }
  .tk-meta { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}