/* ============ Spin & Splash Front-End Design System ============ */
.ss-registration-wrap, .ss-status-check, .ss-scanner-wrap, .ss-login-form {
    max-width: 720px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ss-step { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ss-step h3 { margin-top: 0; font-size: 18px; color: #1d2327; }
.ss-step input, .ss-step select { display: block; width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #ccd0d4; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.ss-step button.ss-next, #ss-submit-registration {
    background: #2271b1; color: #fff; border: none; padding: 11px 22px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.ss-step button.ss-next:hover, #ss-submit-registration:hover { background: #185683; }

.ss-member-row {
    display: flex; flex-wrap: wrap; gap: 8px; background: #f9fafb; border: 1px solid #eceef0; border-radius: 8px;
    padding: 12px; margin-bottom: 10px; align-items: center;
}
.ss-member-row input, .ss-member-row select { margin-bottom: 0; flex: 1 1 120px; min-width: 100px; width: auto; }
.ss-member-row .ss-remove-member { background: #fdecea; color: #a12622; border: 1px solid #f5c2c0; border-radius: 5px; padding: 6px 10px; cursor: pointer; flex: 0 0 auto; }

#ss-add-member { background: #eef4fb; color: #2271b1; border: 1px solid #cfe2f3; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: 600; margin-bottom: 14px; }

.ss-fee-preview { background: #eafaf1; border: 1px solid #b9ecd1; border-radius: 6px; padding: 10px 14px; margin: 12px 0; font-weight: 600; color: #0a7a3d; }
#ss-fee-total { font-size: 18px; }

.ss-promo-box { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.ss-promo-box input { flex: 1; margin-bottom: 0 !important; }
.ss-promo-box button { padding: 10px 16px; border-radius: 6px; border: 1px solid #ccd0d4; background: #fff; cursor: pointer; font-weight: 600; }
#ss-promo-result { font-size: 13px; font-weight: 600; }

.ss-order-summary { background: #f9fafb; border: 1px solid #eceef0; border-radius: 8px; padding: 14px; margin-bottom: 16px; font-weight: 600; }

.ss-step label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 10px; }
.ss-step label input[type="radio"] { width: auto; margin: 0; }

/* ---------- Status Check ---------- */
.ss-status-check { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; padding: 24px; }
.ss-status-check input { width: 100%; padding: 10px 12px; border: 1px solid #ccd0d4; border-radius: 6px; margin-bottom: 12px; box-sizing: border-box; }
.ss-status-check button { background: #2271b1; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.ss-status-card { background: #f9fafb; border: 1px solid #eceef0; border-radius: 8px; padding: 16px; margin-top: 14px; }
.ss-status-card h4 { margin: 0 0 8px; }

/* ---------- Scanner (Kit Distribution style — two cards + log) ---------- */
.ss-scanner-wrap { max-width: 900px; }
.ss-scanner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .ss-scanner-grid { grid-template-columns: 1fr; } }
.ss-scan-card { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; padding: 20px; }
.ss-scan-card h4 { margin-top: 0; }
.ss-scan-warning { background: #fff8e5; border: 1px solid #ffe6a1; color: #8a6100; border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-top: 10px; }
#ss-manual-lookup { width: 100%; padding: 10px 12px; border: 1px solid #ccd0d4; border-radius: 6px; margin-bottom: 10px; box-sizing: border-box; }
#ss-manual-search { background: #2271b1; color: #fff; border: none; padding: 9px 18px; border-radius: 6px; font-weight: 600; cursor: pointer; }

.ss-roster-card { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; padding: 20px; }
.ss-roster-card table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ss-roster-card th { text-align: left; background: #fafafa; padding: 10px; font-size: 11px; text-transform: uppercase; color: #666; border-bottom: 1px solid #e2e4e7; }
.ss-roster-card td { padding: 10px; border-bottom: 1px solid #f0f0f1; font-size: 13px; }
.ss-checkin-btn, .ss-issue-belt { background: #2271b1; color: #fff; border: none; padding: 7px 14px; border-radius: 5px; font-weight: 600; cursor: pointer; font-size: 12px; }
.ss-checkin-btn[disabled] { background: #00a86b; cursor: default; }

/* ---------- Login form ---------- */
.ss-login-form { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; padding: 26px; max-width: 380px; }
.ss-login-form input { display: block; width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #ccd0d4; border-radius: 6px; box-sizing: border-box; }
.ss-login-form button { width: 100%; background: #2271b1; color: #fff; border: none; padding: 11px; border-radius: 6px; font-weight: 600; cursor: pointer; }