:root{
  color-scheme:dark;
  --bg:#071019;
  --panel:#0c1722;
  --panel2:#08141e;
  --line:#1e3342;
  --text:#eef5fa;
  --muted:#8da4b5;
  --accent:#53dcb9;
  --warn:#ffd17e;
  --danger:#ff997a;
  --blue:#78b9ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",sans-serif}
body{min-height:100vh}
main{max-width:1050px;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(35px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:800}
h1{margin:5px 0 4px;font-size:29px}
h2{font-size:17px;margin:0 0 12px}
p,small{color:var(--muted);line-height:1.6}
.topbar p{margin:0}
.free-badge{padding:9px 11px;border-radius:999px;border:1px solid #285c4c;background:#10251f;color:var(--accent);font-size:11px;white-space:nowrap}
.control-card{margin-top:18px;padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:16px;display:grid;grid-template-columns:1fr auto 1fr 1fr auto;gap:10px;align-items:end}
.field label{display:block;font-size:10px;color:var(--muted);margin:0 0 5px}
input,select,button{font:inherit}
input,select{width:100%;min-height:44px;padding:9px 10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px}
button{min-height:44px;padding:9px 13px;border-radius:10px;border:1px solid var(--line);cursor:pointer}
button:disabled{opacity:.55}
.primary-btn{background:var(--accent);color:#05221b;border-color:var(--accent);font-weight:800}
.secondary-btn{background:#10202d;color:var(--text)}
.status{margin-top:10px;padding:11px 13px;border:1px solid var(--line);background:var(--panel);border-radius:12px;color:var(--muted)}
.status[data-type="ok"]{border-color:#285c4c;color:#85e3c9;background:#0c211c}
.status[data-type="warn"]{border-color:#66532d;color:var(--warn);background:#211b0e}
.status[data-type="error"]{border-color:#693729;color:var(--danger);background:#25110d}
.how-card>div,.headline-card{padding:12px;border:1px solid var(--line);background:var(--panel);border-radius:12px}
.how-card b,.headline-card b{display:block}
.how-card small,.headline-card small{display:block;margin-top:3px}
.headline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.headline-card span{display:block;color:var(--accent);font-size:20px;font-weight:800;margin-top:3px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{margin-top:12px;padding:15px;border:1px solid var(--line);background:var(--panel);border-radius:15px}
.prob-row,.ticket-row,.market-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.prob-row:first-child,.ticket-row:first-child,.market-row:first-child{border-top:0}
.prob-row small,.ticket-row small{display:block}
.prob-row strong{font-size:17px;color:var(--accent)}
.market-row{grid-template-columns:1fr 85px 75px}
.formation-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.formation-card{padding:12px;border:1px solid #173040;background:var(--panel2);border-radius:11px}
.formation-title{display:flex;justify-content:space-between;gap:10px}
.formation-title span{font-size:11px;color:var(--muted)}
.formation-lines{margin-top:8px;line-height:1.85;font-weight:700}
.final-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.final-summary>div{padding:10px;background:var(--panel2);border-radius:10px}
.final-summary small{display:block}
.final-summary b{font-size:19px}
.ticket-row strong{font-size:18px}
.pass-card,.empty-card{padding:13px;border-radius:11px;background:var(--panel2)}
.pass-card strong{font-size:21px;color:var(--warn)}
.pass-card p,.empty-card p{margin-bottom:0}
.validation-note{font-size:11px;margin-bottom:0}
.warning-panel{border-color:#554626}
.warning-panel #warnings>div{padding:6px 0;color:var(--warn)}
.demo-section{margin-top:14px;text-align:center}
.demo-section button{background:transparent;color:var(--muted)}
.demo-section small{display:block;margin-top:5px}
@media(max-width:820px){
  .control-card{grid-template-columns:1fr 1fr}
  .primary-btn{grid-column:1/-1}
  .headline-grid{grid-template-columns:1fr 1fr}
  .two-col,.formation-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  main{padding-left:12px;padding-right:12px}
  .topbar{display:block}
  .free-badge{display:inline-block;margin-top:10px}
  .control-card{grid-template-columns:1fr}
  .primary-btn{grid-column:auto}
  .headline-grid,.how-card{grid-template-columns:1fr}
}

.learning-card{
  margin-top:10px;
  padding:12px;
  border:1px solid #285c4c;
  background:#0b1b18;
  border-radius:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center
}
.learning-main{display:flex;align-items:center;gap:10px}
.learning-main b{display:block}
.learning-main small{display:block;margin-top:3px}
.learning-badge{
  display:inline-block;
  padding:6px 8px;
  border-radius:999px;
  background:#15372e;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  white-space:nowrap
}
.learning-rule{
  grid-column:1/-1;
  padding-top:7px;
  border-top:1px solid #21453b
}
@media(max-width:520px){
  .learning-card{grid-template-columns:1fr}
  .learning-main{align-items:flex-start}
  .learning-rule{grid-column:auto}
}


.venue-board-section{
  margin-top:10px;
  padding:10px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px
}
.section-heading h2{
  margin:2px 0 0;
  font-size:18px
}
.section-heading .eyebrow{
  font-size:9px
}
.section-heading small{
  text-align:right;
  font-size:10px
}
.venue-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px
}
.venue-card{
  appearance:none;
  width:100%;
  min-height:64px;
  text-align:left;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  color:var(--text);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  transition:
    border-color .12s ease,
    transform .12s ease,
    background .12s ease
}
.venue-card:active{
  transform:scale(.985)
}
.venue-card[data-selected="true"]{
  border-color:var(--accent);
  background:#0d211d
}
.venue-card[data-state="error"]{
  border-color:#554626
}
.venue-name{
  display:block;
  font-size:16px;
  font-weight:800;
  line-height:1.15
}
.venue-summary{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--accent);
  line-height:1.15
}
.venue-summary[data-kind="past"]{
  color:var(--muted)
}
.venue-summary[data-kind="error"]{
  color:var(--warn)
}
.venue-loading{
  animation:venuePulse 1.1s ease-in-out infinite alternate
}
@keyframes venuePulse{
  from{opacity:.55}
  to{opacity:1}
}
.venue-race-tray{
  margin-top:8px;
  padding:9px;
  border:1px solid #285c4c;
  border-radius:11px;
  background:#0a1715
}
.venue-race-tray-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px
}
.venue-race-tray-head b{
  font-size:15px
}
.venue-race-tray-head span{
  color:var(--accent);
  font-size:11px;
  font-weight:800
}
.venue-race-buttons{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px
}
.venue-race-btn{
  appearance:none;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel2);
  color:var(--text);
  min-height:38px;
  padding:6px 4px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}
.venue-race-btn[data-selected="true"]{
  border-color:var(--accent);
  background:#15372e;
  color:var(--accent)
}
.venue-race-btn[data-next="true"]:not([data-selected="true"]){
  border-color:#316f5e
}
@media(max-width:820px){
  .venue-board{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .venue-race-buttons{
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
}
@media(max-width:620px){
  .venue-board{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .venue-race-buttons{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .venue-card{
    min-height:60px;
    padding:7px 8px
  }
  .venue-name{
    font-size:15px
  }
  .venue-summary{
    font-size:12px
  }
}


.learning-card[data-learning-state="working"]{
  border-color:#2d7d67
}
.learning-card[data-learning-state="error"]{
  border-color:#7b4e42
}
.learning-progress{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:var(--muted)
}
.learning-card[data-learning-state="working"] .learning-progress{
  color:var(--accent)
}
.learning-card[data-learning-state="error"] .learning-progress{
  color:var(--warn)
}
.learning-badge[data-state="working"]{
  animation:learningPulse 1s ease-in-out infinite alternate
}
@keyframes learningPulse{
  from{opacity:.55}
  to{opacity:1}
}

.model-import-row{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding-top:8px;
  border-top:1px solid #21453b
}
.model-import-row b,
.model-import-row small{
  display:block
}
.model-import-row small{
  margin-top:3px
}
@media(max-width:520px){
  .model-import-row{
    grid-template-columns:1fr
  }
}


/* v1.6.6: v1.6.2 engine + compact dual prediction UI */
.compact-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.compact-title-row h2{margin:0}
.compact-title-row small{
  font-size:9px;
  color:var(--muted);
  white-space:nowrap;
}

.compact-scenario-panel,
.compact-prediction-panel,
.compact-formations-panel,
.compact-market-panel{
  padding:11px 12px;
}

.scenario-compact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.scenario-compact-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-width:0;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel2);
}
.scenario-compact-card.top{
  border-color:#285c4c;
  background:#0c211c;
}
.scenario-compact-card > div{min-width:0}
.scenario-compact-card b{
  display:block;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scenario-compact-card small{
  display:block;
  margin-top:2px;
  font-size:8px;
  line-height:1.1;
}
.scenario-compact-card strong{
  flex:0 0 auto;
  font-size:14px;
  color:var(--accent);
}

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

.pure-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 7px;
  margin-bottom:3px;
  border-radius:8px;
  background:var(--panel2);
}
.pure-summary span{font-size:9px;color:var(--muted)}
.pure-summary b{font-size:11px;color:var(--accent)}

.pure-ticket-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  border-top:1px solid var(--line);
}
.pure-ticket-row:nth-of-type(2){border-top:0}
.pure-rank{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#102a35;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
}
.pure-ticket-row b{font-size:13px}
.pure-ticket-row strong{
  font-size:12px;
  color:var(--accent);
}
.compact-note{
  margin:6px 0 0;
  font-size:8px;
  line-height:1.35;
  color:var(--muted);
}

.compact-prediction-panel .final-summary{
  margin-bottom:3px;
}
.compact-prediction-panel .ticket-row{
  padding:5px 6px;
}
.compact-prediction-panel .ticket-row b{
  font-size:13px;
}
.compact-prediction-panel .ticket-row small{
  font-size:9px;
}

.compact-formations-panel .formation-grid{gap:6px}
.compact-formations-panel .formation-card{padding:8px}
.compact-formations-panel .formation-title b{font-size:11px}
.compact-formations-panel .formation-title span{font-size:8px}
.compact-formations-panel .formation-lines{
  margin-top:4px;
  font-size:11px;
  line-height:1.4;
}

.compact-market-panel summary{
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.compact-market-panel[open] summary{margin-bottom:8px}
.compact-empty{padding:8px}

@media(max-width:820px){
  .scenario-compact-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dual-prediction-grid{
    grid-template-columns:1fr;
  }
}