:root {
  --bg: #070b10;
  --bg2: #0f141b;
  --panel: rgba(18, 24, 32, 0.86);
  --panel-solid: #111821;
  --panel2: rgba(255,255,255,0.035);
  --text: #eef4f8;
  --muted: #8e9cab;
  --soft: #c5d0d9;
  --line: rgba(130, 154, 174, 0.18);
  --cyan: #4cc6d9;
  --cyan2: #63d9e8;
  --green: #28d17c;
  --yellow: #f4bd4f;
  --red: #ff5d73;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(76,198,217,.2), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(99,217,232,.08), transparent 26rem),
    linear-gradient(180deg, #070b10 0%, #0b1017 60%, #070b10 100%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.app-shell { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  background: rgba(5, 9, 13, .74);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.brand { display: flex; gap: .85rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.brand-logo { width: 3.15rem; height: 3.15rem; border-radius: 15px; object-fit: cover; box-shadow: 0 0 34px rgba(76,198,217,.16); }
.brand strong { display: block; letter-spacing: .12em; font-size: .98rem; }
.brand span { display: block; color: var(--muted); font-size: .78rem; margin-top: .12rem; }
.nav { display: grid; gap: .35rem; }
.nav a {
  color: var(--soft);
  padding: .8rem .9rem;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: .16s ease;
}
.nav a:hover, .nav a.active { color: var(--text); border-color: var(--line); background: var(--panel2); }
.sidebar-footer { margin-top: auto; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.sidebar-footer strong { display: block; color: var(--soft); margin-top: .25rem; font-weight: 600; }

.content { min-width: 0; padding: 2rem clamp(1rem, 3vw, 3rem) 4rem; display: grid; gap: 1.35rem; }
.hero {
  min-height: 25rem;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(1.4rem, 4vw, 3.2rem);
  background:
    linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    radial-gradient(circle at 76% 20%, rgba(76,198,217,.22), transparent 22rem),
    var(--panel-solid);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2rem;
  align-items: end;
}
.eyebrow, .card-label {
  color: var(--cyan2);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 800;
}
h1, h2, h3 { margin: 0; }
h1 { margin-top: .9rem; max-width: 13ch; font-size: clamp(2.35rem, 6vw, 5.9rem); line-height: .88; letter-spacing: -.07em; }
h2 { margin-top: .35rem; font-size: clamp(1.35rem, 2.4vw, 2.05rem); letter-spacing: -.035em; }
p { color: var(--muted); line-height: 1.65; }
.hero-copy p { max-width: 44rem; font-size: 1.02rem; }
.market-health-card {
  min-height: 13rem;
  border: 1px solid rgba(76,198,217,.28);
  border-radius: 24px;
  padding: 1.3rem;
  background: rgba(7, 11, 16, .64);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.market-health-card strong { display: block; font-size: 2.7rem; letter-spacing: -.06em; }
.market-health-card small { color: var(--muted); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi-card, .panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.15rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--panel);
  box-shadow: 0 16px 60px rgba(0,0,0,.2);
}
.kpi-card span { color: var(--muted); font-size: .86rem; }
.kpi-card strong { display: block; margin-top: .35rem; font-size: 2rem; letter-spacing: -.055em; }
.kpi-card small { color: var(--muted); }

.section { display: grid; gap: 1rem; }
.section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; }
.section-head.compact { align-items: center; }
.mode-pill, .badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem .75rem;
  color: var(--soft);
  background: rgba(255,255,255,.035);
  font-size: .82rem;
  font-weight: 800;
}
.opportunity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.opportunity-card {
  min-height: 13rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.1rem;
  background: linear-gradient(145deg, rgba(76,198,217,.1), rgba(255,255,255,.02));
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.opportunity-card:hover { transform: translateY(-2px); border-color: rgba(76,198,217,.55); }
.opportunity-card .topline { display: flex; justify-content: space-between; gap: .75rem; }
.symbol { font-size: 2rem; font-weight: 900; letter-spacing: -.06em; }
.grade { color: var(--cyan2); font-weight: 900; }
.op-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1rem; }
.op-meta span { color: var(--muted); font-size: .72rem; display: block; }
.op-meta strong { display: block; margin-top: .12rem; }
.sub { color: var(--muted); font-size: .86rem; }

.split { grid-template-columns: minmax(0, 1.65fr) minmax(22rem, .75fr); align-items: start; }
.market-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; margin: 1rem -1.15rem -1.15rem; }
table { width: 100%; min-width: 58rem; border-collapse: collapse; }
th, td { padding: .9rem .8rem; border-top: 1px solid var(--line); text-align: left; font-size: .88rem; white-space: nowrap; }
th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(76,198,217,.055); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; padding: .32rem .55rem; font-size: .72rem; }
.badge.take { color: var(--green); border-color: rgba(40,209,124,.35); background: rgba(40,209,124,.08); }
.badge.watch { color: var(--yellow); border-color: rgba(244,189,79,.35); background: rgba(244,189,79,.08); }
.badge.skip { color: var(--red); border-color: rgba(255,93,115,.35); background: rgba(255,93,115,.08); }
.legend { display: flex; gap: .4rem; flex-wrap: wrap; }
.codes { color: var(--muted); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }

.detail-card { position: sticky; top: 1.25rem; }
.detail-panel { margin-top: 1rem; display: grid; gap: 1rem; }
.detail-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.detail-title strong { font-size: 2.4rem; letter-spacing: -.06em; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.detail-kv { border: 1px solid var(--line); border-radius: 15px; padding: .8rem; background: rgba(255,255,255,.025); }
.detail-kv span { color: var(--muted); font-size: .75rem; display: block; }
.detail-kv strong { display: block; margin-top: .2rem; }
.reason-list { margin: 0; padding-left: 1.2rem; color: var(--soft); line-height: 1.55; }
.research-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
code { color: var(--cyan2); }
.loading { color: var(--muted); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .nav { grid-auto-flow: column; grid-auto-columns: max-content; }
  .sidebar-footer { display: none; }
  .hero, .split { grid-template-columns: 1fr; }
  .kpi-grid, .opportunity-grid, .research-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-card { position: relative; top: auto; }
}
@media (max-width: 720px) {
  .content { padding: 1rem 1rem 3rem; }
  .sidebar { padding: 1rem; }
  .brand div { display: none; }
  .hero { min-height: auto; border-radius: 24px; }
  h1 { font-size: 3rem; }
  .kpi-grid, .opportunity-grid, .research-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}