:root {
      --card-width: 380px;
      --primary-blue: #1f67b3;
      --primary-blue-dark: #195696;
    }

    /* Fondo con gradiente y mancha grande a la izquierda */
    body {
      min-height: 100vh;
      margin: 0;
      font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: radial-gradient(circle at 10% 50%, rgba(153, 138, 255, 0.35) 0%, rgba(153, 138, 255, 0.15) 12%, rgba(233, 243, 255, 0) 30%),
        linear-gradient(180deg, #dff8ff 0%, #cffeef 40%, #eaf8ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Gran "mancha" translúcida para simular el globo difuso */
    .bg-blob {
      position: fixed;
      left: -10%;
      top: 20%;
      width: 560px;
      height: 560px;
      background: radial-gradient(circle at 30% 30%, #d6c9ff 0%, #a7a0ff 25%, rgba(167, 160, 255, 0.25) 45%, transparent 60%);
      filter: blur(40px);
      opacity: 0.9;
      pointer-events: none;
      z-index: 0;
    }

    /* Card estilo */
    .login-card {
      width: var(--card-width);
      border: none;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(20, 40, 60, 0.12);
      overflow: visible;
      z-index: 2;
      background: transparent;
    }

    .login-inner {
      background: #ffffff;
      border-radius: 10px;
      padding: 28px 28px 0 28px;
      box-shadow: none;
    }

    .logo-wrap {
      text-align: center;
      margin-bottom: 6px;
    }

    .logo-title {
      font-weight: 600;
      color: #0b3b55;
      font-size: 14px;
      margin-top: 6px;
    }

    .form-label {
      color: #3b6a8a;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .user-id {
      font-weight: 700;
      color: #0d4a6a;
    }

    .input-underline {
      border: 0;
      border-bottom: 1px solid #e6e6e6;
      border-radius: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none;
    }

    .input-underline:focus {
      outline: none;
      box-shadow: none;
      border-bottom-color: #c6dff5;
    }

    .password-row {
      position: relative;
    }



    /* footer bar with rounded bottom corners */
    .card-footer-bar {
      background: var(--primary-blue);
      color: #fff;
      text-align: center;
      padding: 12px 20px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: background .12s ease;
    }

    .card-footer-bar:hover {
      background: var(--primary-blue-dark);
    }

    .login-link {
      margin-top: 14px;
      text-align: center;
      font-size: 14px;
    }

    .login-link a {
      color: #6ea1c2;
      text-decoration: underline;
    }

    /* Small subtle divider line under icon area */
    .divider-space {
      height: 6px;
    }

    /* responsive tweaks */
    @media (max-width: 480px) {
      :root {
        --card-width: 92vw;
      }

      .bg-blob {
        display: none;
      }
    }