.settings-wizard { max-width: 900px; margin: 0 auto; } .settings-description { color: #666; margin-bottom: 2rem; } .settings-section { background: white; border-radius: 8px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #f0f0f0; } .settings-header h3 { margin: 0; color: #333; } .settings-form { margin-top: 1.5rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .form-group small { display: block; color: #999; font-size: 0.85rem; margin-top: 0.25rem; } .info-box { background: #f8f9fa; border-left: 4px solid #667eea; padding: 1rem; margin: 1.5rem 0; border-radius: 4px; } .info-box strong { display: block; margin-bottom: 0.5rem; color: #333; } .info-box ol { margin: 0.5rem 0 0 1.5rem; padding: 0; } .info-box li { margin: 0.25rem 0; color: #666; } .info-box a { color: #667eea; text-decoration: none; } .info-box a:hover { text-decoration: underline; } .info-box pre { background: white; padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.85rem; margin-top: 0.5rem; } .toggle-switch { position: relative; display: inline-block; width: 60px; height: 34px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } .toggle-switch input:checked + .toggle-slider { background-color: #667eea; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(26px); } .btn-secondary { background: #6c757d; color: white; margin-top: 1rem; } .btn-secondary:hover:not(:disabled) { background: #5a6268; } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .test-result { padding: 1rem; border-radius: 8px; margin: 1.5rem 0; } .test-result.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .test-result.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .test-result strong { display: block; margin-bottom: 0.5rem; } .test-result p { margin: 0; } .settings-actions { display: flex; justify-content: center; margin-top: 2rem; } .btn-large { padding: 1rem 3rem; font-size: 1.1rem; }