body { 
  font-family: "Segoe UI", system-ui, sans-serif; 
  background:#0e0e10; 
  color:#eee; 
  padding:18px; 
  margin:0; 
}

.wrap { 
  max-width:980px; 
  margin:auto; 
  background:#161618; 
  padding:18px; 
  border-radius:10px; 
}

h1 { 
  color:#00e676; 
  margin:0 0 12px 0; 
  text-align:center; 
}

.row { 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
  margin-bottom:12px; 
}

.card { 
  background:#1b1b1d; 
  padding:12px; 
  border-radius:8px; 
  min-width:160px; 
  flex:1; 
}

input, select { 
  width:100%; 
  padding:6px; 
  border-radius:6px; 
  border:none; 
  text-align:center; 
  background:#0f0f10; 
  color:#eee; 
}

button { 
  padding:6px 10px; 
  border-radius:6px; 
  border:none; 
  cursor:pointer; 
  font-weight:600; 
}

button.primary { background:#00e676; color:#000; }
button.warn { background:#ff6b6b; color:#fff; }
button.neutral { background:#6c757d; color:#fff; }

#log { 
  background:#0b0b0c; 
  padding:10px; 
  height:180px; 
  overflow:auto; 
  border-radius:8px; 
  font-size:13px; 
  white-space:pre-wrap; 
}

#digitList { 
  background:#0b0b0c; 
  padding:10px; 
  height:40px; 
  border-radius:8px; 
  font-size:18px; 
  display:flex; 
  gap:4px; 
  justify-content:center; 
  align-items:center; 
}

.digit-even { color:#00e676; font-weight:bold; }
.digit-odd { color:#ff6b6b; font-weight:bold; }

table { 
  width:100%; 
  border-collapse:collapse; 
  margin-top:10px; 
  font-size:13px; 
}

th, td { 
  border:1px solid #28282a; 
  padding:6px; 
  text-align:center; 
}

.muted { color:#9aa; font-size:13px; }

#analysisBar { 
  display:flex; 
  height:24px; 
  width:100%; 
  background:#1b1b1d; 
  border-radius:6px; 
  overflow:hidden; 
  margin-top:6px; 
}

#evenBar { background:#00e676; width:50%; }
#oddBar  { background:#ff6b6b; width:50%; }

/* compact UI */
.card { padding:10px; }
button { padding:4px 8px; }
input, select { padding:4px; font-size:14px; }