/* 共享会员 · 智能激活 - Custom Styles */

body {
    background: #f0f2f5;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.container {
    max-width: 520px;
}

/* Card status responsive */
#cardStatus .stat-label {
    font-size: 0.8rem;
    color: #6c757d;
}

#cardStatus .stat-value {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Device buttons */
.device-btn {
    font-size: 0.82rem;
    padding: 8px 4px;
    border: 1px solid #dee2e6;
    transition: all .15s ease;
}

.device-btn.active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
}

.device-btn:hover:not(.active) {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* SMS code */
#smsCodeDisplay {
    min-height: 2.2rem;
}

/* QR result */
#qrUrlText {
    font-size: 0.7rem;
    word-break: break-all;
}

/* Toast */
.toast {
    min-width: 280px;
}

/* Spinner replacement */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Alert loading state */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .container { padding: 12px; }
    #smsCodeDisplay { font-size: 1.4rem !important; }
    .device-btn { font-size: 0.75rem; padding: 6px 2px; }
}