  <style>
    body { 
      font-family: 'Inter', sans-serif;
      background: linear-gradient(white, #fdfdfd);
      box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.4);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
    }
    
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.85);
      z-index: -1;
    }
    
    .fade-in { animation: fadeIn 0.6s ease-in-out; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .input-error { 
      border-color: #dc2626 !important; 
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important; 
    }
    .input-success { 
      border-color: #16a34a !important; 
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1) !important; 
    }
    
    /* 🆕 ESTILOS PARA SISTEMA FLEXÍVEL */
    .input-email {
      border-color: #3b82f6 !important;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }
    
    .input-document {
      border-color: #10b981 !important;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    }
    
    .input-detected {
      animation: inputDetected 0.3s ease-in-out;
    }
    
    @keyframes inputDetected {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    #inputTypeIndicator {
      transition: all 0.3s ease;
    }
    
    #inputTypeIndicator.show {
      display: block !important;
    }
    
    .helper-success {
      color: #059669 !important;
    }
    
    .helper-info {
      color: #0284c7 !important;
    }
    
    /* 🆕 ESTILOS PARA SELEÇÃO DE MÚLTIPLAS CONTAS */
    .account-card {
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #f8fafc, #f1f5f9);
      position: relative;
      overflow: hidden;
    }
    
    .account-card:hover {
      border-color: #3b82f6;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
      transform: translateY(-2px);
    }
    
    .account-card.selected {
      border-color: #3b82f6;
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
    }
    
    .account-card.primary {
      border-color: #10b981;
      background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    }
    
    .account-card.primary:hover,
    .account-card.primary.selected {
      border-color: #059669;
      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
    }
    
    .account-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #3b82f6;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
    }
    
    .account-badge.primary {
      background: #10b981;
    }
    
    .account-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .account-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
      font-size: 16px;
    }
    
    .account-details {
      flex: 1;
    }
    
    .account-name {
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 2px;
    }
    
    .account-type {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 1px;
    }
    
    .account-document {
      font-size: 11px;
      color: #9ca3af;
      font-family: 'Courier New', monospace;
    }
    
    .account-status {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
    }
    
    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
    }
    
    .status-text {
      font-size: 11px;
      color: #059669;
      font-weight: 500;
    }
    
    .account-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #f3f4f6;
    }
    
    .last-login {
      font-size: 10px;
      color: #9ca3af;
    }
    
    .selection-indicator {
      width: 20px;
      height: 20px;
      border: 2px solid #d1d5db;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    
    .account-card.selected .selection-indicator {
      border-color: #3b82f6;
      background: #3b82f6;
    }
    
    .account-card.primary.selected .selection-indicator {
      border-color: #10b981;
      background: #10b981;
    }
    
    .selection-indicator i {
      color: white;
      font-size: 10px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    .account-card.selected .selection-indicator i {
      opacity: 1;
    }
    
    @keyframes slideInAccount {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .account-card {
      animation: slideInAccount 0.4s ease-out forwards;
    }
    
    .account-card:nth-child(1) { animation-delay: 0.1s; }
    .account-card:nth-child(2) { animation-delay: 0.2s; }
    .account-card:nth-child(3) { animation-delay: 0.3s; }
    .account-card:nth-child(4) { animation-delay: 0.4s; }
    
    /* 🆕 ESTILOS PARA RECUPERAÇÃO SEGURA */
    .email-preview {
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
      border: 2px solid #0ea5e9;
      border-radius: 12px;
      padding: 16px;
      margin: 16px 0;
      text-align: center;
      animation: slideDown 0.4s ease-out;
    }
    
    .email-masked {
      font-size: 18px;
      font-weight: bold;
      color: #0369a1;
      font-family: 'Courier New', monospace;
      letter-spacing: 1px;
    }
    
    .security-note {
      background: linear-gradient(135deg, #f0fdf4, #dcfce7);
      border: 1px solid #22c55e;
      border-radius: 8px;
      padding: 12px;
      margin: 12px 0;
      font-size: 13px;
      color: #15803d;
    }
    
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 🔧 CORREÇÃO: Indicador de email preservado */
    .email-preserved-indicator {
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      border: 1px solid #3b82f6;
      border-radius: 8px;
      padding: 8px 12px;
      margin: 8px 0;
      font-size: 12px;
      color: #1d4ed8;
      text-align: center;
    }
    
    /* ESTILOS ORIGINAIS MANTIDOS */
    .msg-erro { font-size: 0.875rem; color: #dc2626; margin-top: 0.25rem; }
    .msg-sucesso { font-size: 0.875rem; color: #16a34a; margin-top: 0.25rem; }
    
    .btn-loading { 
      opacity: 0.7; pointer-events: none; position: relative;
    }
    .btn-loading::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 16px; height: 16px; margin: -8px 0 0 -8px;
      border: 2px solid transparent; border-top: 2px solid #fff;
      border-radius: 50%; animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .alert-erro, .alert-sucesso, .alert-info, .alert-warning {
      padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem;
      font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem;
      animation: slideDown 0.3s ease-out;
    }
    .alert-erro { background-color: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
    .alert-sucesso { background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
    .alert-info { background-color: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; }
    .alert-warning { background-color: #fffbeb; border: 1px solid #fed7aa; color: #d97706; }
    
    .alert-blocked {
      background: linear-gradient(135deg, #fee2e2, #fecaca);
      border: 2px solid #dc2626;
      color: #7f1d1d;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }
    
    .password-toggle { 
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%); 
      cursor: pointer; color: #6b7280; transition: color 0.2s;
    }
    .password-toggle:hover { color: #374151; }
    
    .step-container { display: none; }
    .step-container.active { display: block; }
    
    .progress-bar { 
      width: 100%; height: 4px; background: #e5e7eb; border-radius: 2px; 
      overflow: hidden; margin-bottom: 2rem; position: fixed; top: 0; left: 0; z-index: 50;
    }
    .progress-fill { 
      height: 100%; background: linear-gradient(90deg, #10b981, #059669); 
      transition: width 0.3s ease; 
    }
    
    .recovery-modal { 
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      z-index: 100; opacity: 0; visibility: hidden;
      transition: all 0.3s ease;
    }
    .recovery-modal.active { opacity: 1; visibility: visible; }
    .recovery-content {
      background: white; border-radius: 16px; padding: 2rem;
      max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
      transform: scale(0.9); transition: transform 0.3s ease;
    }
    .recovery-modal.active .recovery-content { transform: scale(1); }
    
    .security-indicator {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-size: 0.75rem; color: #10b981; background: #f0fdf4;
      padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: 1px solid #bbf7d0;
    }
    
    .connection-status {
      position: fixed; top: 4rem; right: 1rem; z-index: 60;
      padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.75rem;
      transition: all 0.3s ease;
    }
    .connection-status.connected {
      background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a;
    }
    .connection-status.disconnected {
      background: #fef2f2; border: 1px solid #fecaca; color: #dc2626;
    }
    .connection-status.connecting {
      background: #fffbeb; border: 1px solid #fed7aa; color: #d97706;
    }

    .main-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  </style>