.gradient {
      background-color: #1666a8;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23145f9c' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3Cpolygon fill='%23135991' points='800 200 0 400 0 800 1600 800 1600 400'/%3E%3Cpolygon fill='%23125286' points='800 300 0 600 0 800 1600 800 1600 600'/%3E%3Cpolygon fill='%23124c7c' points='1600 800 800 400 0 800'/%3E%3Cpolygon fill='%23114672' points='1280 800 800 500 320 800'/%3E%3Cpolygon fill='%23114169' points='533.3 800 1066.7 800 800 600'/%3E%3Cpolygon fill='%23103b60' points='684.1 800 914.3 800 800 700'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-attachment: fixed;
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .login-container { width:100%; max-width:420px; }

    .login-card {
      background:#fff;
      border-radius:24px;
      padding:40px 32px;
      box-shadow:0 10px 25px rgba(0,0,0,.15);
      animation: fadeIn 0.6s ease-out;
    }

    .login-header { text-align:center; margin-bottom:28px; }

    .logo img { width:130px; margin-bottom:10px; }

    .login-header p {
      color:#64748b;
      font-weight:500;
      font-size:15px;
      margin-bottom: -10px;
    }

    .form-group { margin-bottom:18px; }

    .form-group label {
      display:block;
      font-size:13px;
      font-weight:600;
      margin-bottom:6px;
      color:#374151;
    }

    .form-group input {
      width:100%;
      padding:12px 14px;
      border-radius:8px;
      border:1.5px solid #e2e8f0;
      font-size:16px;
    }

    .form-group input:focus {
      outline:none;
      border-color:#74b5ff;
      box-shadow:0 0 0 3px rgba(39, 140, 229, 0.15);
    }

    /* Password Field */
    .password-wrapper {
      position: relative;
    }

    .password-wrapper input {
      padding-right: 44px;
    }

    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #64748b;
      padding: 6px;
      border-radius: 4px;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }

    .password-toggle:hover {
      color: #1666a8;
    }

    .password-toggle svg {
      width: 24px;
      height: 24px;
      display: block;
      pointer-events: none;
    }

    /* Esconde o botão nativo de revelar senha do Edge/IE para não duplicar o olho */
    .password-wrapper input::-ms-reveal,
    .password-wrapper input::-ms-clear {
      display: none;
    }

    /* Estado inicial: mostra apenas o olho aberto */
    .password-toggle .eye-closed {
      display: none;
    }

    /* Quando a senha está visível: mostra apenas o olho fechado */
    .password-toggle.show-password .eye-open {
      display: none;
    }

    .password-toggle.show-password .eye-closed {
      display: block;
    }

    .form-group small {
      display:block;
      margin-top:6px;
      font-size:10px;
      color:#64748b;
    }

    .input-com-bandeira {
      display:flex;
      align-items:center;
      border:1.5px solid #e2e8f0;
      border-radius:8px;
      padding:0 10px;
    }

    .input-com-bandeira:focus-within {
      border-color:#74b5ff;
      box-shadow:0 0 0 3px rgba(39, 140, 229, 0.15);
    }

    .input-com-bandeira img {
      width:22px;
      margin-right:8px;
    }

    .input-com-bandeira input {
      border:none;
      padding:12px 0;
      flex:1;
      outline:none;
      font-size:16px;
      box-shadow:none;
    }

    .input-com-bandeira input:focus {
      border:none;
      box-shadow:none;
    }

    .login-btn {
      width:100%;
      background:#1666a8;
      border:none;
      color:#fff;
      padding:12px;
      border-radius:8px;
      font-size:15px;
      font-weight:600;
      cursor:pointer;
      position:relative;
      min-height: 43px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .login-btn:disabled { opacity:.7; cursor:not-allowed; }

    .spinner {
      display:none;
      width:16px;
      height:16px;
      border:2px solid rgba(255,255,255,.4);
      border-top:2px solid #fff;
      border-radius:50%;
      animation:spin 1s linear infinite;
      position:absolute;
    }

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

    .form-options {
      margin-top:18px;
      text-align:center;
      font-size:13px;
    }

    .form-options a {
      color:#187bcb;
      font-weight:600;
      text-decoration:none;
    }

    .codigo-info {
      text-align:center;
      color:#64748b;
      font-size:13px;
      line-height:1.45;
      margin-bottom:20px;
    }

    .codigo-destaque {
      font-weight:700;
      color:#1666a8;
    }

    #codigo-email {
      text-align:center;
      letter-spacing:6px;
      font-size:20px;
      font-weight:700;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  


    .flash {
      margin: 12px 0 16px;
      padding: 12px 14px;
      border-radius: 12px;
      text-align: center;
      font-size: 14px;
      line-height: 1.35;

      background: #fff5f5;
      color: #8a1f1f;
      border: 1px solid #ffd6d6;
      border-left: 6px solid #ff6b6b;

      box-shadow: 0 8px 18px rgba(0,0,0,.06);
    }

    .flash.success {
      background: #f1fff6;
      color: #14532d;
      border: 1px solid #bbf7d0;
      border-left: 6px solid #22c55e;
    }

    @media (max-width: 420px) {
      .flash { font-size: 13px; padding: 10px; }
    }

    @media (max-width: 450px) {
      .flash { font-size: 13px; padding: 10px; }
    }