:root {
      --brand-1: #60a5fa; /* Azul Suave */
      --brand-2: #3b82f6; /* Azul Médio */
      --brand-3: #93c5fd; /* Azul Claro */
      --bg-base: #ffffff;
      --bg-spot-1: #d9e9ff;
      --bg-spot-2: #d7eeff;
      --bg-spot-3: #d7e3ff;
      --bg-spot-4: #eff6ff;
      --orb-1: rgba(193, 221, 255, 0.82); /* azul gelo */
      --orb-2: rgba(185, 229, 255, 0.78); /* azul ceu claro */
      --orb-3: rgba(255, 255, 255, 0.98); /* branco quase total */
      --orb-4: rgba(170, 212, 255, 0.72); /* azul medio suave */
      --orb-5: rgba(227, 241, 255, 0.84); /* azul quase branco */
      --ink: #1e293b;     /* Slate 800 */
      --muted: #64748b;   /* Slate 500 */
      --bg: #f8fafc;      /* Slate 50 */
      --white: #ffffff;
      --error: #ef4444;
      --success: #22c55e;
      --gradient-main: linear-gradient(145deg, #60a5fa 0%, #3b82f6 100%);
      --shadow-soft: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
      --shadow-strong: 0 30px 60px -12px rgba(0, 0, 0, 0.2), 0 18px 36px -18px rgba(0, 0, 0, 0.25);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --radius-lg: 32px;
      --radius-md: 16px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-base);
      background-image:
        radial-gradient(ellipse at 12% 10%, var(--bg-spot-1) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 8%, var(--bg-spot-2) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 102%, var(--bg-spot-3) 0%, transparent 54%),
        linear-gradient(160deg, #ffffff 0%, var(--bg-spot-4) 46%, #eef5ff 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 24px;
      position: relative;
    }

    #popupLogin2 {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 8% 10%, rgba(193, 221, 255, 0.88) 0%, rgba(193, 221, 255, 0.5) 24%, transparent 52%),
        radial-gradient(ellipse at 92% 8%, rgba(185, 229, 255, 0.84) 0%, rgba(185, 229, 255, 0.46) 24%, transparent 52%),
        radial-gradient(ellipse at 50% 104%, rgba(201, 210, 255, 0.32) 0%, rgba(201, 210, 255, 0.08) 22%, transparent 56%),
        radial-gradient(ellipse at 15% 94%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.72) 42%, transparent 70%),
        radial-gradient(circle at 52% 44%, rgba(223, 239, 255, 0.55) 0%, transparent 42%),
        var(--bg-base);
    }

    .bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08) 0%, rgba(183, 220, 255, 0.12) 100%);
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.86;
      animation: drift 18s ease-in-out infinite alternate;
    }

    .blob-1 {
      width: 460px;
      height: 460px;
      background: var(--orb-1);
      top: -130px;
      left: -90px;
      animation-delay: 0s;
    }

    .blob-2 {
      width: 360px;
      height: 360px;
      background: var(--orb-2);
      top: -40px;
      right: -70px;
      animation-delay: -5s;
    }

    .blob-3 {
      width: 420px;
      height: 420px;
      background: var(--orb-3);
      bottom: -160px;
      left: 20px;
      animation-delay: -9s;
    }

    .blob-4 {
      width: 340px;
      height: 340px;
      background: var(--orb-4);
      bottom: -70px;
      right: 20px;
      animation-delay: -3s;
    }

    .blob-5 {
      width: 300px;
      height: 300px;
      background: var(--orb-5);
      top: 34%;
      left: 42%;
      animation-delay: -7s;
    }

    .grid-overlay {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(96, 165, 250, 0.04) 1px, transparent 1px);
      background-size: 36px 36px;
    }

    @keyframes drift {
      0% {
        transform: translate(0, 0) scale(1);
      }
      100% {
        transform: translate(24px, 18px) scale(1.07);
      }
    }

    .login-container {
      display: flex;
      width: 980px;
      max-width: 95vw;
      min-height: 600px;
      background: var(--white);
      border-radius: var(--radius-lg);
      /* Sombra muito mais suave e profunda para o fundo claro */
      box-shadow:
        0 52px 120px -28px rgba(30, 64, 175, 0.22),
        0 28px 56px -24px rgba(30, 64, 175, 0.18),
        0 10px 22px -10px rgba(15, 23, 42, 0.12);
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 1);
    }

    .login-visual {
      flex: 1;
      background: var(--gradient-main);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 60px;
      color: var(--white);
      overflow: hidden;
    }

    /* Efeito de Bolhas - Menores e mais sutis */
    .bubbles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .bubble {
      position: absolute;
      bottom: -20px;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 50%;
      animation: rise 15s infinite ease-in;
    }

    .bubble:nth-child(1) { left: 10%; width: 25px; height: 25px; animation-duration: 12s; }
    .bubble:nth-child(2) { left: 30%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 2s; }
    .bubble:nth-child(3) { left: 70%; width: 35px; height: 35px; animation-duration: 20s; animation-delay: 1s; }
    .bubble:nth-child(4) { left: 90%; width: 18px; height: 18px; animation-duration: 15s; animation-delay: 4s; }
    .bubble:nth-child(5) { left: 50%; width: 15px; height: 15px; animation-duration: 14s; animation-delay: 3s; }
    .bubble:nth-child(6) { left: 20%; width: 10px; height: 10px; animation-duration: 19s; }
    .bubble:nth-child(7) { left: 80%; width: 30px; height: 30px; animation-duration: 16s; animation-delay: 5s; }
    .bubble:nth-child(8) { left: 40%; width: 20px; height: 20px; animation-duration: 17s; }

    @keyframes rise {
      0% { transform: translateY(0) scale(1); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translateY(-700px) scale(1.1); opacity: 0; }
    }

    .visual-content {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .visual-icon {
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 32px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .visual-icon img {
      width: 60px;
      height: 60px;
      object-fit: contain;
    }

    .visual-title {
      font-size: 2.2rem;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.03em;
    }

    .visual-subtitle {
      font-size: 1.05rem;
      font-weight: 400;
      opacity: 0.9;
      line-height: 1.6;
      max-width: 320px;
      margin: 0 auto;
    }

    .visual-features {
      margin-top: 48px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center; /* Centralizado para harmonizar */
      width: 100%;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.92rem;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.08);
      padding: 12px 24px;
      border-radius: 100px;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: var(--transition);
      width: 340px; /* Largura fixa para uniformidade baseada na maior frase */
      justify-content: flex-start;
    }

    .feature-item:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

    .feature-item svg {
      width: 18px;
      height: 18px;
      fill: #fff;
      flex-shrink: 0;
    }

    .login-form-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 35px;
      background: var(--white);
    }

    .form-header {
      margin-bottom: 40px;
    }

    .form-header h2 {
      font-size: 1.85rem;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }

    .form-header p {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .input-group {
      position: relative;
      margin-bottom: 24px;
    }

    .input-group label {
      display: block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .input-wrapper {
      position: relative;
    }

    .input-wrapper input {
      width: 100%;
      padding: 18px 18px 18px 56px; /* Mais largo e alto */
      border: 2px solid #f1f5f9;
      border-radius: var(--radius-md);
      font-size: 1rem;
      font-family: inherit;
      color: var(--ink);
      background: #f8fafc;
      transition: var(--transition);
      outline: none;
    }

    .input-wrapper input:focus {
      border-color: var(--brand-1);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
    }

    .input-wrapper input.invalid {
      border-color: #dc2626;
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
      background: #fff;
    }

    .input-icon {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      z-index: 2;
      pointer-events: none;
      transition: var(--transition);
    }

    .input-icon svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      display: block;
    }

    .input-wrapper:focus-within .input-icon {
      color: var(--brand-2);
    }

    .btn-primary {
      width: 100%;
      padding: 20px; /* Botão mais robusto */
      background: var(--gradient-main);
      color: var(--white);
      border: none;
      border-radius: var(--radius-md);
      font-size: 1.05rem;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.3);
      margin-top: 8px;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.4);
      filter: brightness(1.05);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .user-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border: 1px solid #dbeafe;
      border-radius: 14px;
      margin-bottom: 24px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 10px 24px -16px rgba(37, 99, 235, 0.35);
    }

    .left-user {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }

    .circle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 2px solid #dbeafe;
      background: #fff;
      flex-shrink: 0;
    }

    .user-contact {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .user-label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #64748b;
      font-weight: 700;
    }

    #userEmail {
      font-size: 0.95rem;
      line-height: 1.2;
      color: #1e293b;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .back-btn {
      flex-shrink: 0;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
      border-radius: 999px;
      padding: 10px 16px;
      font-size: 0.84rem;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition);
    }

    .back-btn:hover {
      background: #dbeafe;
      border-color: #93c5fd;
    }

    .code-inputs {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      margin-top: 10px;
    }

    .code-input {
      width: 100%;
      height: 72px;
      border: 2px solid #dbeafe;
      border-radius: 14px;
      text-align: center;
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--brand-2);
      transition: var(--transition);
      background: #f8fbff;
    }

    .code-input:focus {
      border-color: var(--brand-1);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
      outline: none;
    }

    .code-input.invalid {
      border-color: #dc2626;
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
      color: #b91c1c;
      background: #fff;
    }

    #buttloadlogin {
      margin-top: 14px;
      background: linear-gradient(140deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%);
      box-shadow: 0 14px 30px -12px rgba(29, 78, 216, 0.55);
    }

    #buttloadlogin:hover {
      box-shadow: 0 18px 34px -12px rgba(29, 78, 216, 0.62);
      filter: brightness(1.04);
    }

    .form-footer {
      margin-top: 20px; /* Reduzido de 48px para aproximar do botão */
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .form-footer a {
      color: var(--brand-2);
      text-decoration: none;
      font-weight: 700;
      transition: var(--transition);
    }

    .form-footer a:hover {
      color: var(--brand-1);
      text-decoration: underline;
    }

    @media (max-width: 900px) {
      .login-container {
        flex-direction: column;
        border-radius: 24px;
      }
      .login-visual {
        padding: 40px;
        min-height: auto;
      }
      .login-form-section {
        padding: 40px;
      }
    }


    @media (max-width: 480px) {
      body {
        padding: 12px;
      }

      .login-container {
        width: 100%;
        border-radius: 16px;
      }

      .login-form-section {
        padding: 28px 20px;
      }

      .code-inputs {
        gap: 8px;
      }

      .code-input {
        height: 58px;
        font-size: 1.35rem;
      }

      .user-summary {
        flex-direction: column;
        align-items: stretch;
      }

      .back-btn {
        width: 100%;
      }
    }

    /* Utility Classes */
    .loader {
      display: none;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: var(--white);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto;
    }

    .btn-primary.loading .text {
      display: none;
    }

    .btn-primary.loading .loader {
      display: block;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .field-error {
      color: var(--error);
      font-size: 0.875rem;
      margin-top: 8px;
      min-height: 20px;
    }

    #form_login_code {
      display: none;
    }