:root { --card:#111827; --bg:#0b1020; --accent:#22d3ee; --text:#e5e7eb; --muted:#94a3b8; }
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Inter,Arial}
html,body{margin:0;background:linear-gradient(120deg,#0b1020,#111433);color:var(--text)}
.center{min-height:100svh;display:grid;place-items:center;padding:2rem}
.card{background:var(--card);padding:2rem;border-radius:14px;box-shadow:0 10px 30px #0008;min-width:min(90vw,420px)}
label{display:block;margin:0.6rem 0}
input,select,button{width:100%;padding:0.8rem;border-radius:10px;border:1px solid #334; background:#0f172a; color:var(--text)}
button{cursor:pointer;background:linear-gradient(90deg,#0ea5e9,#22d3ee);border:0;color:#001029;font-weight:700}
button.danger{background:linear-gradient(90deg,#ef4444,#f43f5e);color:white}
.muted{color:var(--muted);font-size:0.9rem}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;background:#0b1228;border-bottom:1px solid #1f2937;position:sticky;top:0}
.room{padding:1.5rem;display:grid;place-items:center}
.slot{background:#0b132b;border:1px solid #1f2a44;border-radius:14px;padding:1rem 1.5rem;max-width:560px;width:100%}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1rem 0}
.reel{background:#0f1d3b;border:2px solid #1e3a8a;border-radius:12px;padding:1.5rem;text-align:center;font-size:2.5rem;box-shadow:inset 0 -10px 20px #0007}
.controls{display:flex;gap:10px;align-items:center}
.result{margin-top:0.8rem;color:#a7f3d0}
.admin{padding:1.2rem;display:grid;gap:1.2rem}
table{width:100%;border-collapse:collapse;background:#0b132b;border:1px solid #1f2a44;border-radius:12px;overflow:hidden}
th,td{padding:0.7rem;border-bottom:1px solid #1f2a44}
details{margin-top:0.6rem}