:root {
  --bg: #0b1020;
  --panel: rgba(255, 255, 255, .09);
  --panel-strong: rgba(255, 255, 255, .15);
  --text: #f7f9ff;
  --muted: #aeb7ce;
  --line: rgba(255,255,255,.16);
  --good: #4ade80;
  --warn: #facc15;
  --bad: #fb7185;
  --blue: #60a5fa;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --deep: #10172a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, #1f2a58 0%, var(--bg) 42%, #070a12 100%);
  overflow-x: hidden;
}
.bg-orb { position: fixed; border-radius: 999px; filter: blur(54px); opacity: .33; pointer-events: none; }
.orb-a { width: 320px; height: 320px; left: -90px; top: 90px; background: var(--cyan); }
.orb-b { width: 400px; height: 400px; right: -130px; top: 20px; background: var(--violet); }
.orb-c { width: 260px; height: 260px; left: 38%; bottom: -130px; background: var(--blue); opacity: .18; }
.shell { width: min(1220px, calc(100% - 34px)); margin: 0 auto; padding: 34px 0 52px; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
h1 { font-size: clamp(42px, 7vw, 86px); margin: 0; line-height: .9; letter-spacing: -0.07em; }
.sub { margin: 12px 0 0; color: var(--muted); font-size: 18px; }
.eyebrow, .label { margin: 0 0 8px; text-transform: uppercase; color: var(--cyan); font-size: 12px; letter-spacing: .18em; font-weight: 900; }
.glass, .card { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); backdrop-filter: blur(18px); box-shadow: 0 20px 70px rgba(0,0,0,.28); }
.status-card { min-width: 250px; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 22px; background: rgba(255,255,255,.09); border: 1px solid var(--line); }
.status-card small { display: block; color: var(--muted); margin-top: 3px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--good); box-shadow: 0 0 20px var(--good); }
.dot.warn { background: var(--warn); box-shadow: 0 0 20px var(--warn); }
.dot.bad { background: var(--bad); box-shadow: 0 0 20px var(--bad); }
.filters { display: flex; gap: 16px; padding: 14px; border-radius: 24px; margin-bottom: 18px; align-items: end; }
label { color: var(--muted); font-size: 13px; font-weight: 800; }
select, button { display: block; min-width: 180px; margin-top: 6px; padding: 11px 38px 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10,16,35,.82); color: var(--text); font: inherit; }
button { min-width: auto; padding: 11px 16px; cursor: pointer; color: #dbeafe; font-weight: 800; }
button:hover, select:hover { border-color: rgba(34,211,238,.45); }
.grid.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { border-radius: 30px; padding: 22px; min-height: 172px; position: relative; overflow: hidden; }
.card::after { content:""; position:absolute; inset:auto -60px -70px auto; width:140px; height:140px; border-radius:50%; background: rgba(255,255,255,.08); }
.card.primary { background: linear-gradient(135deg, rgba(34,211,238,.30), rgba(96,165,250,.14)); }
.card.hot { outline: 2px solid rgba(34,211,238,.32); }
.card h2 { font-size: clamp(34px, 4vw, 48px); margin: 22px 0 4px; letter-spacing: -0.06em; line-height: .95; }
.card p { color: var(--muted); margin: 0; }
.insights { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.mini { border-radius: 22px; padding: 15px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mini span { color: var(--muted); font-size: 13px; font-weight: 800; }
.mini strong { font-size: 20px; letter-spacing: -.03em; }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 16px; margin-top: 16px; }
.panel { border-radius: 32px; padding: 20px; min-height: 460px; }
.panel.compact { min-height: auto; }
.feed-panel { margin-top: 16px; max-height: 660px; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head.tight { margin-bottom: 14px; }
h3 { margin: 0; font-size: 26px; letter-spacing: -0.05em; }
.pill { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(96,165,250,.16); color: #dbeafe; border: 1px solid rgba(96,165,250,.32); font-size: 12px; font-weight: 900; white-space: nowrap; }
.pill.danger { background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.32); color: #ffe4e6; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.app-card { padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.065); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.app-card:hover { transform: translateY(-2px); border-color: rgba(34,211,238,.36); background: rgba(255,255,255,.085); }
.app-title { display:flex; justify-content:space-between; gap: 8px; align-items:flex-start; margin-bottom: 12px; }
.app-title strong { font-size: 17px; line-height: 1.15; }
.app-sub { color: var(--muted); font-size: 12px; margin-top: 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 210px; }
.badge { font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 6px 8px; border-radius: 999px; color: #07111f; background: var(--good); text-transform: uppercase; white-space:nowrap; }
.badge.quiet { background: rgba(255,255,255,.24); color: var(--text); }
.badge.warn { background: var(--warn); }
.badge.bad { background: var(--bad); color: white; }
.metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric { padding: 10px; border-radius: 16px; background: rgba(0,0,0,.18); min-width:0; }
.metric small { color: var(--muted); display:block; font-size: 11px; }
.metric b { font-size: 20px; }
.latest { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.feed { display: flex; flex-direction: column; gap: 12px; max-height: 560px; overflow: auto; padding-right: 4px; }
.review { padding: 15px; border-radius: 20px; background: rgba(255,255,255,.065); border: 1px solid var(--line); }
.review.low { border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.08); }
.review .stars { color: var(--warn); font-weight: 900; letter-spacing: 1px; }
.review p { color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.review small { color: var(--muted); display:block; margin: 3px 0 6px; }
.rating-bars { display:flex; flex-direction:column; gap: 10px; }
.rating-row { display:grid; grid-template-columns: 48px 1fr 42px; gap: 10px; align-items:center; color: var(--muted); font-weight:800; }
.bar-track { height: 12px; border-radius:999px; background: rgba(0,0,0,.20); overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--cyan), var(--violet)); min-width: 3px; }
.empty { color: var(--muted); padding: 22px; border: 1px dashed var(--line); border-radius: 22px; text-align: center; }
@media (max-width: 1050px) {
  .grid.cards, .insights { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero, .filters { flex-direction: column; align-items: stretch; }
  .grid.cards, .insights, .app-grid { grid-template-columns: 1fr; }
  .status-card { min-width: 0; }
  select, button { width: 100%; }
}
.submetrics { margin-top: 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.source-chip { padding: 4px 7px; border-radius: 999px; color: #dbeafe; background: rgba(96,165,250,.14); border: 1px solid rgba(96,165,250,.28); font-size: 10px; letter-spacing: .08em; }
.chart-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }