:root{
  --bg:#fafafa;
  --card:#ffffff;
  --muted:#666;
  --accent:#2b7cff;
}
*{box-sizing:border-box}
body{font-family:Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:#111;margin:0;padding:24px}
main{max-width:1100px;margin:0 auto}
h1{margin:0 0 12px}
.config{display:flex;gap:24px;align-items:flex-start;margin-bottom:18px}
.config label{display:block}
#itemsListContainer{background:var(--card);padding:12px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
#itemsList{list-style:none;padding:0;margin:0 0 8px}
#itemsList li{display:flex;gap:8px;align-items:center;margin-bottom:6px}
#itemsList input[type=text]{flex:1;padding:6px;border:1px solid #ddd;border-radius:4px}
#itemsList button.remove{background:#f66;color:white;border:none;padding:6px 8px;border-radius:4px}
.actions{display:flex;flex-direction:column;gap:6px}
.actions button{padding:8px 10px;border-radius:6px;border:1px solid #ccc;background:var(--card);cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.boxCard{background:var(--card);padding:10px;border-radius:8px;border:1px solid #eee}
.boxHeader{display:flex;justify-content:space-between;align-items:center}
.hints{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.small{font-size:13px;color:var(--muted)}
.probTable{margin-top:8px;border-collapse:collapse;width:100%}
.probTable td{padding:4px;border-top:1px solid #f0f0f0}
.probHigh{font-weight:700;color:var(--accent)}
.breakdown{display:flex;gap:12px;flex-wrap:wrap}
.chip{background:#f2f8ff;padding:6px 8px;border-radius:6px;border:1px solid #dbeeff}
.bestChip { background:#edffee; border-color:#cfead6; color:#1f6f3a }
.avoidChip { background:#fff1f1; border-color:#ffd6d6; color:#7a1f1f }
/* Scoped variants for the breakdown sections */
#bestForItem .chip, #bestForItem .bestChip { background:#e9f7ec; border-color:#cfead6; color:black }
#avoidForItem .chip, #avoidForItem .avoidChip { background:#fff1f1; border-color:#ffd6d6; color:black }
.controls{display:flex;gap:6px;margin-top:8px}
.controls button{padding:6px;border-radius:6px;border:1px solid #ddd;background:#fff}
.breakdown{display:flex;gap:12px;flex-wrap:wrap}

/* Compact breakdown list styles */
.breakdownItem{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px;padding:10px 0;border-bottom:1px solid #eee}
.breakdownItemLabel{min-width:160px;font-weight:600}
.breakdownList{display:flex;gap:8px;flex-wrap:wrap}
.boxProb{display:inline-flex;align-items:baseline;gap:8px;padding:6px 8px;border-radius:6px;background:transparent;border:1px solid rgba(0,0,0,0.06);min-width:110px;justify-content:space-between}
.boxLabel{font-weight:700}
.boxPct{font-size:12px;color:var(--muted);margin-left:6px}
.boxProb.best{box-shadow:0 1px 0 rgba(0,0,0,0.06), inset 0 0 0 2px rgba(255,255,255,0.08)}
.simRevealed{background:#fef8e6;border:1px solid #f7df8a}
footer{margin-top:18px;color:var(--muted);font-size:13px}

/* Progress bar styles */
#progressWrap{height:10px;background:linear-gradient(#f5f5f5,#f8f8f8);border-radius:6px;overflow:hidden}
#progressBar{height:100%;width:0;background:linear-gradient(90deg,#8fd19e,#67c06a);transition:width 200ms linear}
#progressBar.indeterminate{width:100%;background:linear-gradient(90deg,#cfead6 25%, #8fd19e 50%, #cfead6 75%);background-size:200% 100%;animation:progress-indet 1.2s linear infinite}
@keyframes progress-indet{0%{background-position:200% 0}100%{background-position:-200% 0}}