.sm-status { min-height: 1.5em; margin: 0 0 12px; text-align: center; font-weight: 600; }
.sm-status strong { color: var(--accent); }

.sm-pads {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 360px;
    margin: 0 auto;
}

.sm-pad {
    aspect-ratio: 1;
    border: 0;
    border-radius: 24px;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.1s, transform 0.1s;
}

.sm-pad:disabled { cursor: default; }

.sm-pad.is-lit { opacity: 1; transform: scale(1.04); box-shadow: 0 0 24px currentColor; }

.sm-pad:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.sm-pad--green { background: #2e9d5b; color: #2e9d5b; }
.sm-pad--red { background: #d93025; color: #d93025; }
.sm-pad--yellow { background: #f2b600; color: #f2b600; }
.sm-pad--blue { background: #2f6fde; color: #2f6fde; }

@media (prefers-reduced-motion: reduce) {
    .sm-pad { transition: none; }
    .sm-pad.is-lit { transform: none; }
}

.sm-sound {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.sm-sound:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }