:root{
      --bg:#2f2f55;/*#2f2f55*/
      --card:#ffffff;
      --primary:#3a0ca3;
      --primary-2:#2c0a85;
      --muted:#7a7a8c;
      --field:#eeeeef;
      --shadow: 0 18px 40px rgba(0,0,0,.18);
      --radius:14px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background-color: var(--bg);
      background-image:
        linear-gradient(rgba(20, 18, 48, 0.55), rgba(20, 18, 48, 0.55)),
        url("../images/Login%20Background.png");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      min-height:100%;
    }

    /* Card */
    .login-card{
      width:min(520px, 92vw);
      background: var(--card);
      border-radius: 12px;
      box-shadow: 0 22px 48px rgba(0,0,0,.35);
      padding: 36px 44px 44px;
      text-align:center;
      position: relative;
      z-index: 1;
    }

    /* Logo */
    .logo{
      width:92px;
      height:92px;
      margin: 0 auto 14px;
      border-radius: 50%;
      display:grid;
      place-items:center;
      overflow:hidden;
      background:#fff;
    }
    .logo img{
      width:100%;
      height:100%;
      object-fit:contain;
      padding:6px;
    }

    .subtitle{
      margin: 2px 0 18px;
      color: var(--primary);
      font-size: 15px;
      font-weight: 500;
    }

    #title{
      margin: 0;
      color: var(--primary);
      font-size: 28px;
      font-weight: 800;
      letter-spacing:.2px;
    }

    .mainform{
      width:40px;
      height:3px;
      border-radius:999px;
      background: var(--primary);
      margin: 10px auto 26px;
    }

    /* Inputs — icon sits inside the field, left of the placeholder */
    .input-field{
      position:relative;
      display:block;
      margin: 14px auto;
      max-width: 330px;
      text-align:left;
    }

    .input-field input{
      width:100%;
      height: 48px;
      border: 0;
      outline: none;
      background: var(--field);
      border-radius: 4px;
      padding: 0 14px 0 46px;
      font-size: 14px;
      color:#222;
    }

    /* Kill any leftover square marker from older CSS */
    .input-field::before,
    .input-field::after{
      content: none !important;
      display: none !important;
    }

    .input-field .input-icon{
      position:absolute;
      left:0;
      top:0;
      width:46px;
      height:48px;
      margin:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--primary);
      opacity:.9;
      pointer-events:none;
      z-index:2;
      line-height:1;
    }

    .input-field .input-icon svg{
      display:block;
      width:16px;
      height:16px;
    }

    .input-field:focus-within .input-icon{
      opacity:1;
      color: var(--primary-2);
    }

    #forgotpassword{
      margin: 10px auto 28px;
      max-width: 330px;
      font-size: 13.5px;
      color:#1f1f1f;
      text-align:left;
    }
    #forgotpassword a{
      color: var(--primary);
      text-decoration:none;
      font-weight: 700;
    }
    #forgotpassword a:hover{ text-decoration:underline; }

    /* Button */
    #signin{
      display:inline-block;
      border:0;
      outline:none;
      cursor:pointer;
      padding: 12px 44px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--primary), var(--primary-2));
      color:#fff;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 10px 18px rgba(58,12,163,.25);
      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }
    #signin:hover{
      transform: translateY(-1px);
      filter: brightness(1.03);
      box-shadow: 0 14px 22px rgba(58,12,163,.28);
    }
    #signin:active{ transform: translateY(0); }

    /* Small screen spacing */
    @media (max-width:420px){
      .login-card{ padding: 28px 20px 34px; }
      h1{ font-size: 24px; }
    }