/* ── ATTENDANCE ── */
.att-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; transition: background .1s; }
.att-item:hover { background: var(--bg); }
.att-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.att-item.absent-row { opacity: .55; }
.att-item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #e2e8f0; }

/* ── RANDOMIZER ── */
.slot-reel { width: 280px; height: 160px; border: 3px solid #334155; border-radius: 12px; overflow: hidden; background: #0f172a; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.slot-inner { font-size: 1.6rem; font-weight: 900; color: #f8fafc; text-align: center; padding: 10px; transition: all .1s; }
.spin-result { font-size: 1.3rem; font-weight: 700; min-height: 44px; text-align: center; margin-top: 14px; }
/* Wheels fit the screen (never wider than the window or taller than about half
   of it) and stay perfectly round; the canvas is redrawn at that size. */
#wheel-container, .cwheel-box { position: relative; width: min(440px, 78vw, 56vh); aspect-ratio: 1; margin: 0 auto; }
#wheel-container { cursor: pointer; }
#wheel-canvas, .cwheel-box canvas { width: 100%; height: 100%; border-radius: 50%; display: block; transform-origin: 50% 50%; }
#wheel-canvas { filter: drop-shadow(0 4px 16px rgba(0,0,0,.25)); }
#wheel-ptr { position: absolute; right: -18px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right: 36px solid #f59e0b; filter: drop-shadow(-2px 0 4px rgba(0,0,0,.3)); }