.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: 400px;
    }

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

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

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

    .login-header p {
      color: #64748b;
      font-size: 14px;
      font-weight: 500;
      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: #1666a8;
    }

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

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

    .password-wrapper input::-ms-reveal,
    .password-wrapper input::-ms-clear {
      display: none;
    }

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

    .password-toggle:hover {
      color: #1666a8;
      background-color: rgba(22, 102, 168, 0.08);
    }

    .password-toggle:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(22, 102, 168, 0.15);
    }

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

    .password-toggle .eye-closed {
      display: none;
    }

    .password-toggle.show-password .eye-open {
      display: none;
    }

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

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

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

    .btn-text {
      display: inline-block;
      line-height: 1;
      transition: opacity .2s, visibility .2s;
    }

    .login-btn.is-loading .btn-text {
      opacity: 0;
      visibility: hidden;
    }

    .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;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .login-btn.is-loading .spinner {
      display: inline-block;
    }

    @keyframes spin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

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

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

    .forgot-link {
      color: #187bcb;
      font-weight: 600;
      text-decoration: none;
    }

    .forgot-link:hover {
      text-decoration: underline;
    }

    .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;
    }


    #flash-container {
      width: 100%;
    }

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

    @media (max-width: 480px) {
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      body.gradient {
        background-image: none !important;
        background-color: #1666a8 !important;
        background-attachment: scroll;
        background-size: auto;
      }

      body {
        min-height: 100dvh;
        height: 100dvh;
        padding: 20px;
      }

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

      .login-card {
        padding: 40px 32px;
        border-radius: 24px;
        margin-top: -100px;
      }
    }

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