:root{
  --bg:#0b0f19; --fg:#d7e1ff; --muted:#9aa4c2;
  --neon:#67e8f9; --neon2:#a78bfa; --accent:#22d3ee;
  --border:rgba(255,255,255,.15); --glass:rgba(255,255,255,.06);
  --radius:14px; --maxw:1120px; --space:clamp(16px,2.5vw,28px);
  --header-h:72px; --header-clear:22px;
}
*{ box-sizing:border-box } html,body{ height:100% }
body{
  margin:0; color:var(--fg);
  background: radial-gradient(1200px 700px at 70% -10%, #0f1630 0%, #0b0f19 50%, #070a12 100%);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Noto Sans";
  overflow-x:hidden;
}
a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline }
.container{ width:min(100% - 2*var(--space), var(--maxw)); margin-inline:auto }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; position:relative }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none }
.brand svg{ width:28px; height:28px; filter:drop-shadow(0 0 6px rgba(103,232,249,.8)) }
.brand span{ font-weight:700; letter-spacing:.3px }

/* Top nav links styled blue (accent), matching homepage vibe */
header nav a{ color: var(--accent); }
.btn-ghost{ padding:.55rem .9rem; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03); color:var(--accent); }
.btn-ghost:hover{ border-color:var(--neon) }
.menu-toggle{ display:none; align-items:center; gap:.5rem; padding:.55rem .9rem; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.02); color:var(--fg); cursor:pointer; }
.menu-toggle:hover{ border-color:var(--neon) }

.mobile-menu{ display:none; position:absolute; right:0; top:calc(100% + 10px); width:max-content; max-width:calc(100vw - 2*var(--space));
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(to bottom, rgba(8,12,22,.90), rgba(8,12,22,.86)); backdrop-filter: blur(6px); box-shadow:0 10px 34px rgba(0,0,0,.35); text-align:right; }
.mobile-menu.open{ display:block }
.mobile-menu a{ display:block; padding:.6rem .8rem; border-radius:8px; color:#22d3ee; white-space:nowrap; }
.mobile-menu a:hover{ background:rgba(255,255,255,.05); text-decoration:none }
@media (max-width:900px){ header nav{ display:none } .menu-toggle{ display:inline-flex } }

header{ position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter: blur(8px);
  background:linear-gradient(to bottom, rgba(8,12,22,.85), rgba(8,12,22,.35)); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top); }
#header-spacer{ height: var(--header-h) }
@media (min-width:1024px){ #header-spacer{ height: calc(var(--header-h) + var(--header-clear)) } }

section{ padding:clamp(28px,5vw,70px) 0; position:relative }
.hero-title{ font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.12; text-shadow:0 0 24px rgba(103,232,249,.2), 0 0 6px rgba(167,139,250,.25) }
.lead{ color:#ECF1FF; max-width:70ch; margin:0 auto; text-align:center }
.muted{ color:var(--muted) }

.search-wrap{ margin:18px auto 10px; display:flex; flex-direction:column; gap:8px; max-width:900px }
.search{ width:100%; border:1px solid var(--border); background:var(--glass); color:var(--fg); border-radius:999px; padding:.8rem 1rem; outline:none; }
.search:focus{ border-color:var(--neon) }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }

.grid{ display:grid; gap:clamp(14px,2vw,22px) }
.grid.cols-4{ grid-template-columns: repeat(2,1fr) }
@media (min-width:900px){ .grid.cols-4{ grid-template-columns: repeat(4,1fr) } }

.symbol-grid a{ display:block; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--glass); text-align:center; font-weight:700; letter-spacing:.2px; }
.symbol-grid a:hover{ border-color:var(--neon); text-decoration:none }

.quick-links{ text-align:center; margin:8px 0 18px }
.quick-links a{ color:#9bdff0 }

.tf{ margin-top:20px }
.chart{ height: 340px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; }

.card{ border:1px solid var(--border); border-radius:12px; background:var(--glass); }
.status-line{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:.95rem }

.foot-note{ margin-top:18px }
footer{ padding:34px 0; color:var(--muted); border-top:1px solid var(--border); background:transparent; }
.foot-flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between }
.disclaimer{ display:block; margin-top:8px; line-height:1.5; text-align:center }

.grid-overlay{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:
    radial-gradient(circle at 20% 10%, rgba(103,232,249,.12), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(167,139,250,.10), transparent 45%),
    linear-gradient(transparent 0 98%, rgba(255,255,255,.08) 99%),
    linear-gradient(90deg, transparent 0 98%, rgba(255,255,255,.08) 99%);
  background-size:100% 100%,100% 100%,50px 50px,50px 50px; }