/* shoutout-config — styles page (migration DA, ne pas dupliquer la coque) */

.input-field.border-red-500 { border-color: #ef4444 !important; }

        /* Listes déroulantes (police, etc.) — fond sombre lisible */
        select

        .module-toggle {
            position: relative;
            width: 52px;
            height: 28px;
            background: rgba(255,255,255,0.2);
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .module-toggle .thumb {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        .module-toggle.on { background: #ff6b35; }
        .module-toggle.on .thumb { transform: translateX(24px); }
        #shoutout-config.disabled { opacity: 0.5; pointer-events: none; }

        .preview-so-cadre { background: rgba(10,10,10,0.9); border-radius: 12px; padding: 20px; min-width: 280px; max-width: 100%; border: 2px solid rgba(255, 107, 53, 0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
        #so-preview-cadre.shoutout-content { min-width: 280px; }
        .preview-so-cadre .so-preview-title { font-weight: 700; line-height: 1; margin-bottom: 8px; }
        .preview-so-cadre .so-preview-msg { font-size: 0.95rem; opacity: 0.9; margin-bottom: 4px; }
        .preview-so-cadre .so-preview-msg2 { font-size: 0.85rem; opacity: 0.7; }
        .preview-so-cadre .so-preview-clip-placeholder { margin-top: 12px; height: 80px; border-radius: 8px; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 0.8rem; }