: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%);
}

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

.pageTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.predictionAiBadge{
  min-height:28px;
  min-width:0;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(171,203,255,.16);
  background:rgba(7,19,42,.66);
  color:var(--cyan);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
}

.predictionAiBadge:empty{
  display:none;
}

.pageViewport{
  margin-top:0;
  height:100%;
  overflow:hidden;
  border-radius:10px;
}

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

.pagePanel{
  height:16.6666667%;
  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;
}

.exactPage .pagePanelInner{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

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

.pageEyebrow{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:8px;
}

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

.pageSubCompact{
  display:none;
}

.selectorsPanel,
.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;
}

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

.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;
}

.selectFlagPreview{
  margin-top:10px;
  display:flex;
  justify-content:center;
}

.launchStage,
.predictorStage{
  margin-top:8px;
  height:calc(100% - 40px);
  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;
}

.launchFrame,
.predictMatrixFrame{
  position:relative;
  width:100%;
  height:100%;
  padding-top:0;
  padding-bottom:0;
}

.launchBadge{
  top:39%;
  transform:translateY(-50%);
  width:118px;
}

.launchBadge-left{left:7%}
.launchBadge-right{right:7%}

.trophyCoreLaunch{
  left:50%;
  top:62%;
  width:260px;
  height:168px;
  transform:translate(-50%, -50%);
}

.teamBadge{
  position:absolute;
  width:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:3;
}

.teamBadgeFlagWrap{
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(171,203,255,.18);
  background:rgba(7,19,42,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.teamBadgeFlag{
  width:34px;
  height:34px;
  object-fit:contain;
}

.teamBadgeName{
  max-width:100%;
  text-align:center;
  font-size:11px;
  font-weight:700;
  line-height:1.15;
  color:var(--text);
}

.radarColumn{
  position:absolute;
  top:84px;
  bottom:28px;
  width:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  z-index:3;
}

.predictionStatusBanner{
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  min-width:140px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  z-index:4;
  pointer-events:none;
}

.radarColumn-left{left:4px}
.radarColumn-right{right:4px}

.simBadge{
  position:relative;
  top:auto;
  width:100%;
}

.radarCard{
  width:72px;
  height:72px;
  border-radius:8px;
  border:1px solid rgba(171,203,255,.14);
  background:rgba(6,15,30,.84);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.radarSvg{
  width:100%;
  height:100%;
  display:block;
}

.radarScore{
  width:72px;
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid rgba(171,203,255,.14);
  background:rgba(6,15,30,.84);
  color:var(--gold);
  font-size:17px;
  font-weight:800;
  line-height:1;
}

.screenNode{
  position:absolute;
  left:80px;
  width:calc(100% - 160px);
  aspect-ratio:16 / 9;
  border-radius:10px;
  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{top:62px; transform:none}
.node-11{top:152px; transform:none}
.node-12{top:242px; transform:none}
.node-1{top:332px; transform:none}
.node-2{top:422px; transform:none}

.trophyCore{
  position:absolute;
  left:50%;
  top:calc(100% - 132px);
  width:240px;
  height:150px;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}

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

.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);
  pointer-events:none;
}

.terminalTriggerBtn{
  width:132px;
  height:58px;
  border-radius:10px;
  border:1px solid rgba(123,231,255,.34);
  background:linear-gradient(180deg, rgba(12,34,66,.95), rgba(6,17,35,.98));
  box-shadow:0 12px 28px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
  color:var(--cyan);
  padding:0;
  cursor:pointer;
  position:relative;
  z-index:5;
  pointer-events:auto;
}

.terminalTriggerIcon{
  font-size:20px;
  font-weight:800;
  letter-spacing:.18em;
  line-height:58px;
  text-align:center;
}

.providerBadge{
  display:none;
}

.coreReadout{
  min-width:250px;
  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;
}

.analysisCard{
  border:1px solid rgba(171,203,255,.14);
  border-radius:8px;
  padding:8px 9px;
  background:rgba(8,18,36,.82);
  min-height:72px;
}

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

.analysisCardStatic{
  min-height:58px;
}

.analysisLabel{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.analysisValue{
  margin-top:6px;
  font-size:11px;
  line-height:1.2;
  color:var(--text);
}


.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{
  margin-top:12px;
  height:auto;
  min-height:0;
  flex:1 1 auto;
}

.comparePanel{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.comparisonGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  max-height:calc(100vh - 220px);
  overflow:auto;
  padding-right:4px;
}

.comparisonRow{
  border:1px solid rgba(171,203,255,.12);
  border-radius:8px;
  padding:7px 8px;
  background:rgba(7,16,33,.7);
}

.comparisonRowHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  color:var(--text);
}

.comparisonRowLabel{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  flex:1;
}

.comparisonBar{
  position:relative;
  margin-top:5px;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.comparisonBarLeft,
.comparisonBarRight{
  position:absolute;
  top:0;
  bottom:0;
}

.comparisonBarLeft{
  right:50%;
  background:linear-gradient(90deg, rgba(79,138,255,.3), rgba(79,138,255,.9));
}

.comparisonBarRight{
  left:50%;
  background:linear-gradient(90deg, rgba(255,206,102,.9), rgba(255,206,102,.3));
}

.exactScoreCard{
  height:100%;
  min-height:0;
  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;
}

.weightRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:22px;
  font-size:12px;
  color:var(--text);
}

.weightRow strong{
  color:var(--cyan);
}

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

.exactOddsGridLarge{
  flex:1 1 auto;
  min-height:0;
  grid-template-columns:1fr 1fr 1fr;
  overflow:auto;
  padding-right:4px;
  padding-bottom:18px;
  overscroll-behavior:contain;
}

.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)}

.narrativeBlock{
  font-size:12px;
  line-height:1.45;
  color:var(--text);
}

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

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