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

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    body {
      min-height: 100vh;
      font-family: 'Manrope', sans-serif;
      background: linear-gradient(135deg, #3ec6e0 0%, #7b6cf6 40%, #d83cf7 70%, #f02eff 100%);
      position: relative;
      overflow-x: hidden;
      overflow-y: hidden;
      padding: clamp(12px, 4vw, 24px) clamp(10px, 3.5vw, 16px);
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    .login-shell {
      width: 100%;
      min-height: calc(100vh - (clamp(12px, 4vw, 24px) * 2));
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    /* Decorative geometric shapes */
    .bg-shape {
      position: absolute;
      border-radius: 18px;
      opacity: 0.18;
      background: rgba(255,255,255,0.35);
      backdrop-filter: blur(2px);
    }
    .shape-1 {
      width: 220px; height: 220px;
      top: -60px; left: -60px;
      transform: rotate(30deg);
    }
    .shape-2 {
      width: 160px; height: 160px;
      bottom: 20px; left: 40px;
      transform: rotate(15deg);
    }
    .shape-3 {
      width: 200px; height: 200px;
      top: 30px; right: -50px;
      transform: rotate(-20deg);
    }
    .shape-4 {
      width: 300px; height: 160px;
      bottom: -60px; right: -80px;
      transform: rotate(10deg);
    }

    /* Card */
    .card {
      position: relative;
      background: #fff;
      border-radius: 22px;
      padding: clamp(22px, 6vw, 44px) clamp(16px, 5.5vw, 44px) clamp(20px, 5.5vw, 38px);
      width: min(420px, 100%);
      max-width: 420px;
      margin: 0 auto;
      box-shadow: 0 24px 80px rgba(100, 40, 200, 0.22), 0 4px 24px rgba(0,0,0,0.10);
      animation: cardIn 0.55s cubic-bezier(.22,1,.36,1) both;
    }

    @supports (height: 100dvh) {
      body {
        min-height: 100dvh;
      }
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(32px) scale(0.97); }
      to   { opacity: 1; transform: none; }
    }

    h1 {
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: clamp(1.7rem, 4.5vw, 2.4rem);
      color: #111;
      text-align: center;
      margin-bottom: clamp(18px, 5.5vw, 32px);
      letter-spacing: -0.5px;
    }

    .field {
      margin-bottom: 28px;
    }

    label {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: #444;
      margin-bottom: 10px;
      letter-spacing: 0.01em;
    }

    .input-wrap {
      display: flex;
      align-items: center;
      border-bottom: 2px solid #e0e0e0;
      transition: border-color 0.2s;
      padding-bottom: 8px;
      gap: 10px;
    }

    .input-wrap:focus-within {
      border-color: #c030f0;
    }

    .input-wrap svg {
      color: #aaa;
      flex-shrink: 0;
      transition: color 0.2s;
    }

    .input-wrap:focus-within svg {
      color: #c030f0;
    }

    .input-wrap input {
      border: none;
      outline: none;
      font-family: 'Manrope', sans-serif;
      font-size: 0.97rem;
      color: #222;
      width: 100%;
      background: transparent;
      padding: 0;
    }

    .input-wrap input::placeholder {
      color: #bbb;
      font-weight: 400;
    }

    .btn {
      margin-top: 16px;
      display: block;
      width: 100%;
      padding: 17px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(90deg, #3ecfe0 0%, #c030f0 50%, #f02eff 100%);
      background-size: 200% auto;
      color: #fff;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.12em;
      cursor: pointer;
      transition: background-position 0.4s ease, transform 0.15s, box-shadow 0.2s;
      box-shadow: 0 8px 30px rgba(180, 40, 240, 0.35);
    }

    .btn:hover {
      background-position: right center;
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(180, 40, 240, 0.45);
    }

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

    @media (max-width: 768px) {
      body {
        min-height: 100vh;
        width: 100%;
        padding: 14px 12px;
        overflow-x: clip;
      }

      .login-shell {
        min-height: calc(100vh - 28px);
      }

      .card {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin: 0 auto;
        border-radius: 18px;
        padding: 20px 16px 18px;
      }

      h1 {
        margin-bottom: 20px;
      }

      .field {
        margin-bottom: 18px;
      }

      label {
        margin-bottom: 8px;
      }

      .input-wrap {
        gap: 8px;
        padding-bottom: 6px;
      }

      .input-wrap input {
        font-size: 16px;
      }

      .btn {
        margin-top: 12px;
        padding: 15px;
      }

      .bg-shape {
        max-width: 45vw;
      }

      .shape-1 { width: 140px; height: 140px; top: -55px; left: -70px; }
      .shape-2 { width: 110px; height: 110px; bottom: 10px; left: -30px; }
      .shape-3 { width: 130px; height: 130px; top: 12px; right: -50px; }
      .shape-4 { width: 180px; height: 100px; bottom: -45px; right: -55px; }
    }

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

      .login-shell {
        min-height: calc(100vh - 24px);
        align-items: flex-start;
      }

      .card {
        border-radius: 14px;
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        padding: 18px 14px 16px;
      }

      label {
        font-size: 0.82rem;
      }

      .input-wrap {
        padding-bottom: 7px;
      }

      .input-wrap input {
        font-size: 16px;
      }

      .btn {
        margin-top: 10px;
        font-size: 0.92rem;
        letter-spacing: 0.08em;
      }

      .bg-shape {
        opacity: 0.1;
      }
    }

    @media (max-width: 600px) {
      .shape-1 { width: 170px; height: 170px; top: -70px; left: -70px; }
      .shape-2 { width: 130px; height: 130px; bottom: 10px; left: 10px; }
      .shape-3 { width: 160px; height: 160px; top: 10px; right: -60px; }
      .shape-4 { width: 240px; height: 130px; bottom: -70px; right: -90px; }
    }

    @media (max-height: 760px), (max-width: 480px) {
      body {
        overflow-y: auto;
        overflow-x: clip;
      }

      .login-shell {
        align-items: flex-start;
      }
    }

    @media (max-width: 360px) {
      .btn {
        font-size: 0.88rem;
        letter-spacing: 0.06em;
      }
    }