.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.login-card{background:#fff;border-radius:20px;padding:40px;width:100%;max-width:400px;box-shadow:0 20px 60px #0000004d;animation:slideUp .5s ease-out}.login-header{text-align:center;margin-bottom:30px}.login-header h1{color:#667eea;font-size:28px;margin-bottom:10px;font-weight:700}.login-header p{color:#666;font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group input{padding:12px 16px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:all .3s ease;outline:none}.form-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.login-button{padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.login-button:disabled{opacity:.6;cursor:not-allowed}.domain-whitelist-container{padding:20px;max-width:800px;margin:0 auto}.domain-whitelist-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000001a}.domain-whitelist-card h2{margin:0 0 8px;color:#333;font-size:24px}.domain-whitelist-description{color:#666;margin:0 0 24px;font-size:14px;line-height:1.5}.add-domain-form{margin-bottom:32px}.add-domain-form .form-group{display:flex;gap:12px}.domain-input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:border-color .3s}.domain-input:focus{outline:none;border-color:#25d366}.add-domain-button{padding:12px 24px;background:#25d366;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s}.add-domain-button:hover:not(:disabled){background:#20ba5a}.add-domain-button:disabled{background:#ccc;cursor:not-allowed}.domains-list h3{margin:0 0 16px;color:#333;font-size:18px}.domains-list-items{list-style:none;padding:0;margin:0}.domain-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;transition:background .2s}.domain-item:hover{background:#eee}.domain-name{font-size:14px;color:#333;font-weight:500}.delete-domain-button{background:#f44;color:#fff;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:700;transition:background .2s}.delete-domain-button:hover:not(:disabled){background:#c00}.delete-domain-button:disabled{background:#ccc;cursor:not-allowed}.empty-state{text-align:center;padding:40px;color:#999;font-size:14px}.loading{text-align:center;padding:40px;color:#666;font-size:14px}.error-message{background:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}.success-message{background:#efe;color:#3c3;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}.dev-mode-section{margin-top:32px;padding-top:24px;border-top:2px solid #e0e0e0}.dev-mode-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dev-mode-header h3{margin:0;color:#333;font-size:18px}.dev-mode-toggle{padding:8px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:70px}.dev-mode-toggle.on{background:#25d366;color:#fff}.dev-mode-toggle.off{background:#f0f0f0;color:#666}.dev-mode-toggle:hover:not(:disabled){opacity:.9;transform:scale(1.02)}.dev-mode-toggle:disabled{opacity:.5;cursor:not-allowed}.dev-mode-description{color:#666;font-size:13px;line-height:1.5;margin:0;padding:12px;background:#f8f9fa;border-radius:8px;border-left:3px solid #25D366}.dashboard-container{min-height:100vh;padding:32px 20px;max-width:1200px;margin:0 auto;background:#f8f9fa}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding:20px 24px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.dashboard-header h1{font-size:24px;font-weight:600;color:#1a1a1a;margin:0}.logout-button{padding:8px 16px;background:#f5f5f5;color:#666;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:#eee;color:#333}.uwaba-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-bottom:32px}.domain-whitelist-section{margin-top:32px}.uwaba-box{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000000a;transition:all .2s ease;border:1px solid #e8e8e8}.uwaba-box.connected{border-color:#25d366;box-shadow:0 2px 12px #25d36626}.uwaba-box.connected:hover{box-shadow:0 4px 16px #25d36633;transform:translateY(-2px)}.uwaba-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}.uwaba-title-section{display:flex;align-items:center;gap:12px}.uwaba-header h2{font-size:18px;color:#1a1a1a;font-weight:600;margin:0}.header-buttons{display:flex;align-items:center;gap:8px}.toggle-switch{display:flex;align-items:center}.toggle-button{padding:6px 16px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px}.toggle-button.on{background:#25d366;color:#fff}.toggle-button.off{background:#f0f0f0;color:#666}.toggle-button:hover:not(:disabled){opacity:.9;transform:scale(1.02)}.toggle-button:disabled{opacity:.5;cursor:not-allowed}.logout-whatsapp-button{padding:6px 16px;background:#fee;color:#d32f2f;border:1px solid #ffcdd2;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.logout-whatsapp-button:hover:not(:disabled){background:#ffebee;border-color:#ef9a9a}.logout-whatsapp-button:disabled{opacity:.5;cursor:not-allowed}.status-indicator{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-indicator.connected .status-dot{background:#25d366;box-shadow:0 0 0 3px #25d36633}.status-indicator.connecting .status-dot{background:#ff9800;animation:pulse 2s infinite}.status-indicator.disconnected .status-dot{background:#ccc}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.qr-container{margin-top:20px;text-align:center;padding:20px;background:#f8f9fa;border-radius:8px;border:1px solid #e8e8e8}.qr-instruction{font-size:13px;color:#666;margin-bottom:12px;font-weight:500}.qr-code{max-width:200px;border-radius:8px;margin-bottom:8px;border:1px solid #e8e8e8}.qr-note{font-size:12px;color:#999;margin-top:8px}@media (max-width: 768px){.dashboard-container{padding:20px 16px}.uwaba-boxes{grid-template-columns:1fr;gap:16px}.dashboard-header{flex-direction:column;gap:16px;align-items:stretch}.dashboard-header h1{text-align:center}.logout-button{width:100%}}.message-sender-container{min-height:100vh;padding:40px 20px;display:flex;justify-content:center;align-items:center}.message-sender-card{background:#fff;border-radius:20px;padding:40px;width:100%;max-width:600px;box-shadow:0 20px 60px #0000004d;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.message-sender-header{margin-bottom:30px}.back-button{background:none;border:none;color:#667eea;font-size:16px;cursor:pointer;padding:8px 0;margin-bottom:15px;font-weight:600;transition:all .3s ease}.back-button:hover{color:#764ba2;transform:translate(-5px)}.message-sender-header h1{color:#333;font-size:28px;font-weight:700}.message-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#333;font-size:14px;font-weight:600}.phone-input-wrapper{width:100%}.phone-input-container{position:relative;display:flex;align-items:center}.phone-input-container input{padding:12px 50px 12px 16px;width:100%}.check-number-button{position:absolute;right:8px;background:#f0f0f0;border:none;border-radius:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:18px}.check-number-button:hover:not(:disabled){background:#e0e0e0;transform:scale(1.1)}.check-number-button:disabled{opacity:.5;cursor:not-allowed}.form-group input,.form-group textarea{padding:12px 16px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:all .3s ease;outline:none;font-family:inherit}.form-group input.input-valid{border-color:#10b981}.form-group input.input-valid:focus{border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.form-group input.input-invalid{border-color:#ef4444}.form-group input.input-invalid:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.form-group input:focus,.form-group textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{resize:vertical;min-height:120px}.form-hint{font-size:12px;color:#999;margin-top:-4px}.send-button{padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px}.send-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.send-button:disabled{opacity:.6;cursor:not-allowed}.error-message{background:#fee;color:#c33;padding:12px;border-radius:8px;font-size:14px;text-align:center;border:1px solid #fcc}.success-message{background:#efe;color:#3c3;padding:12px;border-radius:8px;font-size:14px;text-align:center;border:1px solid #cfc}.number-check-message{margin-top:8px;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:500;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.number-check-message.checking{background:#fef3c7;color:#92400e;border:1px solid #fde68a}.number-check-message.registered{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}.number-check-message.not_registered,.number-check-message.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8f9fa;min-height:100vh;color:#1a1a1a}#root{min-height:100vh}