:root{
  --bg:#0b0c10; --panel:#12131a; --ink:#f3f4f8; --muted:#a6abc2;
  --accent:#00ffa3; --edge:#222434; --soft:#171828; --aqua:#19d1c9;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:linear-gradient(135deg,#0b0c10 0%,#0f1220 100%);
  color:var(--ink);font:15px/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  display:grid;place-items:center;padding:1.2rem
}
.shell{width:min(980px,100%);display:grid}
.panel{
  background:var(--panel);border:1px solid var(--edge);border-radius:16px;
  padding:1rem;box-shadow:0 10px 40px rgba(0,0,0,.38)
}
h1{margin:.2rem 0 1rem;font-size:1.12rem;letter-spacing:.3px}
.grid{display:grid;gap:.75rem}

/* compact ghost fields */
.ghost-input, .mini-area{
  display:grid;background:linear-gradient(var(--soft),var(--soft)) padding-box,
             linear-gradient(135deg,transparent 40%,rgba(255,255,255,.07)) border-box;
  border:1px solid #22253a;border-radius:12px;padding:.45rem .6rem;transition:.2s
}
.ghost-input:focus-within, .mini-area:focus-within{box-shadow:0 0 0 2px #000,0 0 0 4px var(--accent)}
.ghost-input input{
  appearance:none;border:0;outline:0;background:transparent;color:var(--ink);
  font:600 .92rem/1 "Inter",system-ui,Arial
}
.mini-area textarea{
  resize:vertical;min-height:1.9rem;max-height:6.5rem;border:0;outline:0;background:transparent;
  color:var(--ink);font:.86rem/1.2 system-ui; padding:0; margin:0;
}

/* rows and small UI */
.row{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.muted{color:var(--muted);font-size:.78rem}

/* AND / OR as radios (visual only now) */
.toggle-title{color:var(--muted);font-size:.78rem}
.toggle{
  display:inline-grid;grid-auto-flow:column;gap:.35rem;align-items:center;
  padding:.25rem;border:1px solid #24253a;border-radius:999px;background:#141624
}
.pill{
  position:relative;display:inline-flex;align-items:center;gap:.3rem;
  border:1px solid #2a2d45;border-radius:999px;padding:.25rem .52rem;cursor:pointer;
  font-weight:700;letter-spacing:.02em;font-size:.78rem;min-width:6ch;justify-content:center
}
.pill input{position:absolute;inset:0;opacity:0}
.pill:has(input:checked){
  background:linear-gradient(135deg,var(--accent),#3fe7ff);color:#0b0c10;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 6px 18px rgba(0,0,0,.35)
}

/* GO button with tooltip */
.go{
  position:relative;display:inline-grid;place-items:center;
  padding:.45rem .7rem;border-radius:10px;background:#0f1424;border:1px solid #273055;
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  font-size:.72rem; color:var(--ink)
}
.go:hover{box-shadow:0 0 0 2px #000,0 0 0 4px var(--accent)}
.go::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); white-space:nowrap; background:#0c0f1c; border:1px solid #2a2f4a;
  color:var(--muted); padding:.3rem .45rem; border-radius:8px; font-size:.7rem;
  opacity:0; pointer-events:none; transition:.18s;
}
.go.hovering::after{opacity:1}

/* RESULTS */
.reveal{margin-top:.65rem;border:1px dashed #2a2e46;border-radius:12px;padding:.7rem}
.legible h3{margin:.1rem 0 .5rem;font-size:.92rem;color:#cbd4ff}
.pretty{margin:.2rem 0 .3rem 1.2rem; padding:0;}
.pretty li{
  list-style:none; position:relative; margin:.22rem 0; padding:.5rem .6rem .55rem 2.2rem;
  border:1px solid #242943; border-radius:12px; background:#0e1224;
  font-size:.9rem; line-height:1.25; counter-increment:item;
}
.pretty li::before{
  content:counter(item) "."; position:absolute; left:.6rem; top:.6rem;
  color:#8da0ff; font-weight:800; font-size:.84rem;
}

/* per-combination blocks */
.combo-item{display:grid;gap:.5rem}
.combo-head{font-weight:700;color:#cfe1ff;font-size:.92rem}
.combo-entries{display:grid;gap:.45rem}
.combo-entry{
  display:grid; gap:.35rem; padding:.5rem; border:1px solid #24305a; border-radius:10px;
  background:#0f1328;
}
.entry-input{
  width:100%; border:1px solid #2b355f; background:#111735; color:var(--ink);
  padding:.4rem .55rem; border-radius:9px; font-size:.86rem; outline:none;
}
.entry-input:focus{box-shadow:0 0 0 2px #000, 0 0 0 4px var(--accent)}
.btn{
  display:inline-grid; place-items:center; border:1px solid #2a2f4a; background:#141735;
  padding:.35rem .6rem; border-radius:9px; font-weight:700; font-size:.78rem; cursor:pointer;
  color:var(--ink);
}
.btn:hover{box-shadow:0 0 0 2px #000,0 0 0 4px var(--aqua)}
.btn-compact{justify-self:start}
.add-more{justify-self:start}

.five{
  display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:.3rem
}
.five label{
  display:flex;justify-content:center;align-items:center;gap:.25rem;
  padding:.35rem .25rem;border:1px solid #2b2f52;border-radius:9px;background:#141735;
  cursor:pointer;font-size:.74rem; color:var(--ink)
}
.five input{position:absolute;opacity:0}
.five label:has(input:checked){
  background:linear-gradient(135deg,#34ffd1,#6d5bff);color:#0b0c10;font-weight:800
}

/* Actions */
.actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.action{
  display:inline-grid;place-items:center;padding:.45rem .7rem;border-radius:10px;
  border:1px solid #2a2f4a;background:#121633;font-weight:800;font-size:.78rem;cursor:pointer;
  text-decoration:none; color:var(--ink)
}
.action:hover{box-shadow:0 0 0 2px #000,0 0 0 4px var(--accent)}
.action.secondary{background:#111326}
.action.ghost{background:#0f1220;border-style:dashed}

/* Mobile */
@media (max-width:720px){
  body{padding:.8rem}
}

/* Print-friendly Save */
@media print{
  body{background:#fff}
  .panel{box-shadow:none;border-color:#ddd}
  .go, .actions .secondary, .actions .ghost{display:none}
}