/* ----- Reset & Base ----- */
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI","Pretendard",sans-serif;background:#f2f5fa;color:#333;display:flex;flex-direction:column;min-height:100vh}

/* Layout */
header{background:linear-gradient(135deg,#4e54c8 0%,#8f94fb 100%);color:#fff;padding:2rem 1rem;text-align:center}
main{flex:1;padding:2rem 1rem;max-width:700px;width:100%;margin:0 auto}
footer{padding:1rem;text-align:center;font-size:.875rem;color:#666}

/* Form & Buttons */
.form-group{margin-bottom:1.25rem}
label{display:block;margin-bottom:.5rem;font-weight:600}
input,select{width:100%;padding:.6rem .75rem;border:1px solid #ccc;border-radius:6px;font-size:1rem;background:#fff}
button{background:#4e54c8;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;cursor:pointer;transition:transform .2s ease}
button:hover:not([disabled]){transform:scale(1.03)}
button[disabled]{opacity:.5;cursor:not-allowed}
#bulkActions{display:none;margin-top:1rem;gap:.5rem;justify-content:flex-end}

/* Roulette Loader */
#progress{margin:1rem 0;display:none;justify-content:center}
.roulette-ball{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.25rem;animation:spin .6s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Results */
.results{margin-top:1rem;display:grid;gap:1rem}
.combo{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,.05);display:flex;gap:1rem}
.ball-row{display:flex;flex-wrap:wrap;gap:.5rem}
.ball{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.ball.yellow{background:#f6c344}.ball.blue{background:#4e7cf0}.ball.pink{background:#ff6ebd}.ball.gray{background:#8b8e95}.ball.green{background:#4caf50}

/* Toast */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:.75rem 1.25rem;border-radius:8px;font-size:.875rem;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1000}
#toast.show{opacity:1}

/* Dark mode */
@media(prefers-color-scheme:dark){body{background:#1a1c26;color:#e8e8e8}header,button{background:#6b6efb}.combo{background:#232630}input,select{background:#2b2f3d;border-color:#444;color:#fff}#toast{background:rgba(255,255,255,.9);color:#000}}