:root {
  color-scheme: dark;
  --bg: #050814;
  --panel: rgba(15, 23, 42, .78);
  --panel-2: rgba(30, 41, 59, .72);
  --line: rgba(148, 163, 184, .18);
  --text: #e5eefb;
  --muted: #8ea3bd;
  --green: #28e6a3;
  --red: #ff647c;
  --yellow: #ffd166;
  --blue: #59b4ff;
  --violet: #a78bfa;
  --shadow: 0 22px 70px rgba(0,0,0,.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, .16), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(167, 139, 250, .14), transparent 28%),
    linear-gradient(135deg, #030712, var(--bg) 52%, #06111f);
}
a { color: inherit; text-decoration: none; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 220px;
  padding: 24px 18px; border-right: 1px solid var(--line);
  background: rgba(2, 6, 23, .78); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .28em; color: #f8fafc; margin-bottom: 34px; }
.pulse { width: 12px; height: 12px; border-radius: 999px; background: var(--green); box-shadow: 0 0 28px var(--green); }
nav { display: grid; gap: 10px; }
nav a { padding: 12px 14px; border-radius: 14px; color: var(--muted); background: transparent; }
nav a:hover { color: var(--text); background: rgba(96, 165, 250, .12); }
.shell { margin-left: 220px; padding: 22px clamp(16px, 3vw, 42px) 48px; }
.topbar { display: flex; align-items: center; gap: 18px; justify-content: space-between; margin-bottom: 24px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; letter-spacing: .02em; }
.topbar p, .hero p, .panel p { color: var(--muted); }
.status-pill, .ghost { border: 1px solid var(--line); background: rgba(15,23,42,.7); padding: 11px 14px; border-radius: 999px; color: var(--text); }
.status-pill.live { color: var(--green); border-color: rgba(40,230,163,.35); }
.status-pill.stale { color: var(--yellow); border-color: rgba(255,209,102,.35); }
.ghost { cursor: pointer; font-weight: 700; }
.ghost:hover { border-color: rgba(89,180,255,.5); }
.hero, .panel, .stock-card, .ticker-strip { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.hero { display: flex; justify-content: space-between; gap: 20px; border-radius: 28px; padding: 28px; margin-bottom: 18px; }
.eyebrow { color: var(--green)!important; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 900; margin-bottom: 8px; }
.hero h2 { font-size: clamp(28px, 5vw, 54px); line-height: .96; margin-bottom: 12px; max-width: 760px; }
.clock-card { min-width: 240px; padding: 18px; border-radius: 22px; background: rgba(2,6,23,.52); border: 1px solid var(--line); }
.clock-card span { display: block; font-size: 34px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.clock-card small { color: var(--muted); line-height: 1.5; }
.ticker-strip { display: flex; overflow-x: auto; gap: 12px; padding: 12px; border-radius: 20px; margin-bottom: 18px; }
.ticker-chip { min-width: 125px; padding: 12px; border-radius: 16px; background: rgba(15,23,42,.72); border: 1px solid var(--line); }
.ticker-chip b { display:block; margin-bottom:4px; }
.up { color: var(--green); } .down { color: var(--red); } .flat { color: var(--muted); }
.grid { display: grid; gap: 18px; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.stock-card { border-radius: 24px; padding: 18px; position: relative; overflow: hidden; }
.stock-card:before { content:""; position:absolute; inset:-60% -30% auto auto; width:180px; height:180px; border-radius:50%; background: rgba(89,180,255,.08); }
.card-head { display:flex; justify-content:space-between; gap:12px; margin-bottom: 16px; }
.symbol { font-size: 28px; font-weight: 900; }
.name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.badge { height: fit-content; padding: 6px 9px; border-radius: 999px; font-size: 12px; font-weight:900; }
.badge.BUY { background: rgba(40,230,163,.14); color: var(--green); }
.badge.HOLD { background: rgba(255,209,102,.14); color: var(--yellow); }
.badge.SELL { background: rgba(255,100,124,.14); color: var(--red); }
.price { font-size: 28px; font-weight: 900; margin-bottom: 4px; }
.ytd { font-weight: 800; margin-bottom: 15px; }
.mini-metrics { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-metrics div { padding: 10px; border-radius: 14px; background: rgba(2,6,23,.35); }
.mini-metrics span { display:block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing:.08em; }
.mini-metrics b { font-size: 14px; }
.range { margin-top: 14px; }
.range-line { height: 7px; border-radius: 999px; background: rgba(148,163,184,.18); overflow:hidden; }
.range-line i { display:block; height:100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top: 5px; }
.two-col { grid-template-columns: 2fr 1fr; margin-bottom:18px; }
.page-section { scroll-margin-top: 16px; margin: 28px 0; }
.section-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom: 16px; }
.section-head h2 { font-size: clamp(26px, 4vw, 42px); margin-bottom: 8px; }
.section-head p:not(.eyebrow) { color: var(--muted); max-width: 760px; }
select { min-width: 240px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(15,23,42,.9); color: var(--text); }
.technical-grid { grid-template-columns: 1fr; }
.panel { border-radius: 24px; padding: 20px; min-width: 0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 16px; }
.panel h3 { font-size: 20px; margin-bottom: 4px; }
.score-ring { width: 132px; height: 132px; margin: 18px auto 10px; border-radius: 50%; display:grid; place-items:center; font-size:34px; font-weight:900; background: conic-gradient(var(--green) calc(var(--score, 0) * 1%), rgba(148,163,184,.16) 0); position:relative; }
.score-ring:after { content:""; position:absolute; width:96px; height:96px; border-radius:50%; background:#08111f; }
.score-ring { isolation:isolate; } .score-ring::before { content: attr(data-score); z-index:1; }
.sentiment strong { text-align:center; display:block; margin-bottom: 16px; color:var(--green); }
.bar-row { display:grid; grid-template-columns: 58px 1fr 45px; gap:10px; align-items:center; margin: 10px 0; color: var(--muted); }
.bar-row div { height: 8px; background: rgba(148,163,184,.18); border-radius:999px; overflow:hidden; }
.bar-row i { display:block; height:100%; width:0; background: var(--green); transition: width .35s; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.metrics div { padding:15px; border-radius:16px; background: rgba(2,6,23,.35); }
.metrics dt { color: var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.metrics dd { margin:6px 0 0; font-size:22px; font-weight:900; }
.alerts { display:grid; gap:10px; max-height: 340px; overflow:auto; }
.alert { border:1px solid var(--line); border-left: 4px solid var(--blue); padding:12px; border-radius:14px; background: rgba(2,6,23,.28); }
.alert.danger { border-left-color: var(--red); } .alert.warning { border-left-color: var(--yellow); } .alert.success { border-left-color: var(--green); }
.alert b { margin-right: 8px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
tr.forecast td { color: var(--yellow); }
.table-link { color: var(--blue); font-weight: 800; }
.insider-hero { display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:14px; margin-bottom:18px; align-items:stretch; }
.insider-hero > div, .insider-metric { padding:16px; border-radius:18px; background: rgba(2,6,23,.34); border:1px solid var(--line); }
.insider-label, .insider-metric span { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:12px; margin-bottom:8px; }
.insider-hero strong { display:block; font-size: clamp(24px, 3vw, 38px); font-weight: 950; line-height:1; }
.insider-hero small, .insider-row small { color:var(--muted); display:block; margin-top:5px; }
.insider-metric b { font-size: 22px; }
.insider-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom:18px; }
.insider-list { display:grid; gap:10px; }
.insider-row { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(2,6,23,.26); }
.insider-row .right { text-align:right; }
.signal-list { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px; }
.signal-list li { padding:12px; border-radius:14px; background:rgba(2,6,23,.28); border:1px solid var(--line); color:var(--text); }
.signal-list span { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; background:rgba(89,180,255,.14); color:var(--blue); font-weight:900; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .two-col, .insider-grid { grid-template-columns: 1fr; } .insider-hero { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .sidebar { display:none; } .shell { margin:0; padding:14px; } .topbar, .hero, .section-head { flex-direction: column; align-items: stretch; } .cards { grid-template-columns: 1fr; } .metrics, .insider-hero { grid-template-columns: 1fr; } .insider-row { flex-direction:column; } .insider-row .right { text-align:left; } select { width:100%; min-width:0; } }