:root{
  color-scheme:dark;
  --line:rgba(167,194,255,.22);
  --text:#f6fbff;
  --muted:#8fa8c7;
  --cyan:#7be7ff;
  --gold:#ffcf66;
  --green:#72f0c2;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(112,182,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(5,20,24,.1), rgba(3,10,16,.7)),
    linear-gradient(180deg, #0c3420 0%, #165530 18%, #0e3f27 48%, #071121 100%);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body{overflow:hidden}

.appShell{
  width:100vw;
  height:100vh;
  padding:12px;
  position:relative;
  overflow:hidden;
}

.appShell::before,
.appShell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.appShell::before{
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.18;
}

.appShell::after{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,207,102,.15), transparent 18%),
    linear-gradient(180deg, transparent 0 68%, rgba(255,255,255,.08) 68% 68.4%, transparent 68.4% 100%);
}

.topHeader,.pageViewport{position:relative;z-index:1}

.eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:8px;
}

.titleRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

h1{
  margin:0;
  font-size:28px;
  line-height:1;
  font-weight:800;
}

.headerRight{
  display:flex;
  align-items:center;
  gap:8px;
}

.pagePill,.statusPill,.langToggleBtn{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(7,19,42,.72);
  color:var(--text);
  font-size:12px;
  padding:0 12px;
}

.pagePill{min-width:58px;color:var(--cyan)}
.statusPill{min-width:88px;color:var(--cyan)}
.langToggleBtn{cursor:pointer}

.pageViewport{
  margin-top:10px;
  height:calc(100% - 72px);
  overflow:hidden;
  border-radius:10px;
}

.pageTrack{
  width:100%;
  height:400%;
  transform:translateY(0);
  transition:transform .28s ease;
}

.pagePanel{
  height:25%;
  padding:0;
}

.pagePanelInner{
  width:100%;
  height:100%;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(10,19,40,.9), rgba(6,12,26,.95));
  backdrop-filter:blur(10px);
  padding:12px;
  overflow:hidden;
}

.pageTitle{
  font-size:22px;
  font-weight:800;
  line-height:1;
}

.pageSub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.selectorsPanel,
.controlPanel,
.metricsPanel{
  margin-top:12px;
}

.selectorsPanel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.controlBlock{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.providerBlock{grid-column:1 / -1}

.controlBlock span,
.controlLabel,
.metricLabel{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
  text-transform:uppercase;
}

select,
.startBtn{
  width:100%;
  height:40px;
  border-radius:8px;
  border:1px solid rgba(185,210,255,.2);
  background:rgba(9,20,42,.86);
  color:var(--text);
  padding:0 12px;
  font-size:14px;
}

.controlPanel{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.controlCard,
.metricCard{
  border:1px solid rgba(171,203,255,.14);
  border-radius:8px;
  padding:10px;
  background:rgba(255,255,255,.03);
}

.zoomControlRow,
.panPad,
.actionRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.actionRow{margin-top:12px}

.startBtn{
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(90deg, rgba(20,105,255,.88), rgba(31,224,255,.86));
  color:#041018;
  border:none;
}

.horizontalZoomRange{
  flex:1 1 auto;
  accent-color:var(--cyan);
}

.cameraRailBtn,
.panBtn{
  height:38px;
  border-radius:8px;
  border:1px solid rgba(171,203,255,.24);
  background:rgba(7,14,28,.84);
  color:var(--text);
  cursor:pointer;
  padding:0 12px;
}

.cameraRailBtn{width:44px;font-size:22px;line-height:1}
.panBtn{flex:1 1 0;font-size:12px;font-weight:700}

.inlineValue,.pageHint{
  margin-top:8px;
  font-size:12px;
  color:var(--cyan);
}

.predictorStage{
  margin-top:12px;
  height:calc(100% - 48px);
  border:1px solid var(--line);
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(126,167,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(5,10,23,.85), rgba(8,13,28,.96));
  overflow:hidden;
}

.orbitalFrame{
  position:relative;
  width:100%;
  height:100%;
}

.screenNode{
  position:absolute;
  width:31%;
  height:16%;
  border-radius:8px;
  padding:4px;
  border:1px solid rgba(173,213,255,.24);
  background:linear-gradient(180deg, rgba(15,29,58,.94), rgba(9,18,35,.96));
  box-shadow:0 12px 26px rgba(0,0,0,.32);
}

.screenNode iframe{
  width:100%;
  height:100%;
  display:block;
  border-radius:6px;
  background:#061120;
  border:0;
}

.screenOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:transparent;
  color:transparent;
  font-size:18px;
  font-weight:700;
  pointer-events:none;
  opacity:0;
}

.screenOverlay.done{
  background:rgba(255,255,255,.78);
  color:#07101e;
  opacity:1;
}

.node-10{left:50%; top:2%; transform:translateX(-50%)}
.node-11{left:8%; top:22%}
.node-12{right:8%; top:22%; transform:none}
.node-1{left:8%; top:42%}
.node-2{right:8%; top:42%}

.trophyCore{
  position:absolute;
  left:50%;
  top:76%;
  width:188px;
  height:188px;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.scanRing{
  position:absolute;
  inset:-20px;
  border:1px solid rgba(123,231,255,.22);
  border-radius:50%;
}

.scanRing-a{animation:spin 9s linear infinite}
.scanRing-b{
  inset:-42px;
  border-color:rgba(255,207,102,.16);
  animation:spinReverse 12s linear infinite;
}

.trophyGlow{
  position:absolute;
  inset:32px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,207,102,.26), rgba(123,231,255,.08) 52%, transparent 78%);
  filter:blur(10px);
}

.trophyTriggerBtn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.trophyGlyph{
  font-size:78px;
  line-height:1;
  filter:drop-shadow(0 10px 30px rgba(255,205,88,.35));
}

.providerBadge{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,18,33,.9);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--green);
}

.coreReadout{
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  min-width:220px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(9,16,32,.82);
  text-align:center;
}

.readoutLabel{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
}

.readoutValue{
  margin-top:5px;
  font-size:24px;
  font-weight:800;
  line-height:1;
  color:var(--gold);
}

.predictionStateLine{
  margin-top:7px;
  font-size:11px;
  color:var(--cyan);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.trophyCore.predicting .scanRing-a{animation-duration:2.2s}
.trophyCore.predicting .scanRing-b{animation-duration:3.4s}

.metricsPanel{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.exactOnlyPanel{
  height:calc(100% - 12px);
}

.exactScoreCard{
  height:100%;
  display:flex;
  flex-direction:column;
}

.metricRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:22px;
  font-size:12px;
}

.metricRow strong{
  color:var(--text);
  font-weight:700;
}

.exactOddsGrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}

.exactOddsGridLarge{
  flex:1 1 auto;
  grid-template-columns:1fr 1fr 1fr;
  overflow:auto;
  padding-right:2px;
}

.oddCell{
  border:1px solid rgba(171,203,255,.14);
  border-radius:8px;
  padding:6px 7px;
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  min-height:40px;
}

.oddCell span{color:var(--text);font-weight:600}
.oddMeta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;gap:3px}
.oddCell strong{color:var(--gold)}
.oddCell em{color:var(--muted);font-style:normal;font-size:10px}

.feedLog{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.feedEntry{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.feedEntry strong{color:var(--cyan)}

@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes spinReverse{
  from{transform:rotate(360deg)}
  to{transform:rotate(0deg)}
}