:root{
      --blue:#3157d6;
      --blue2:#39b7ff;
      --navy:#071d49;
      --ink:#17243f;
      --muted:#607089;
      --line:#dbe9f7;
      --gold:#ffc928;
      --green:#20b857;
      --red:#ff4655;
      --display:'Plus Jakarta Sans',Manrope,system-ui,sans-serif;
      --body:Manrope,system-ui,sans-serif;
      --shadow:0 28px 78px rgba(7,63,143,.14);
      --soft:0 12px 30px rgba(7,63,143,.075);
    }

    *{box-sizing:border-box}
    html,body{min-height:100%;margin:0}
    body{
      font-family:var(--body);
      color:var(--ink);
      background:
        radial-gradient(circle at 18% 18%,rgba(49,87,214,.10),transparent 30%),
        radial-gradient(circle at 82% 20%,rgba(255,201,40,.14),transparent 25%),
        radial-gradient(circle at 50% 92%,rgba(57,183,255,.16),transparent 34%),
        linear-gradient(135deg,#f8fdff 0%,#eef9ff 48%,#dff4ff 100%);
      -webkit-font-smoothing:antialiased;
      overflow:auto;
    }
    a{text-decoration:none;color:inherit}
    button,input{font-family:inherit}
    button{border:0;cursor:pointer;background:none}
    button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(49,87,214,.22);outline-offset:3px}

    .page{
      min-height:100svh;
      display:grid;
      place-items:center;
      padding:18px;
      position:relative;
      overflow:hidden;
    }

    .decor-item{
      position:absolute;
      pointer-events:none;
      z-index:1;
    }

    .decor-plus{
      width:70px;
      height:70px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(32,184,87,.07);
      border:1px solid rgba(32,184,87,.10);
      color:rgba(32,184,87,.26);
      font-family:var(--display);
      font-size:21px;
      font-weight:950;
      box-shadow:0 14px 30px rgba(32,184,87,.05);
    }

    .decor-gift,
    .decor-trophy{
      display:grid;
      place-items:center;
      border-radius:24px;
      box-shadow:0 14px 30px rgba(7,63,143,.04);
    }

    .decor-gift{
      width:86px;
      height:86px;
      background:rgba(255,201,40,.055);
      border:1px solid rgba(255,201,40,.10);
      color:rgba(236,159,12,.22);
    }

    .decor-trophy{
      width:82px;
      height:82px;
      background:rgba(49,87,214,.055);
      border:1px solid rgba(49,87,214,.10);
      color:rgba(7,29,73,.24);
    }

    .decor-gift svg,.decor-trophy svg{
      width:42px;
      height:42px;
      stroke:currentColor;
      stroke-width:2.1;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .plus-1{left:6%;top:10%;transform:rotate(-10deg)}
    .plus-2{left:12%;top:33%;transform:rotate(8deg)}
    .plus-3{left:18%;bottom:14%;transform:rotate(-6deg)}
    .plus-4{right:12%;top:12%;transform:rotate(9deg)}
    .plus-5{right:7%;top:35%;transform:rotate(-7deg)}
    .plus-6{right:15%;bottom:15%;transform:rotate(6deg)}
    .plus-7{left:48%;bottom:8%;transform:translateX(-50%) rotate(-4deg)}

    .gift-1{left:25%;top:14%;transform:rotate(-8deg)}
    .gift-2{right:22%;top:24%;transform:rotate(7deg)}
    .gift-3{left:8%;bottom:26%;transform:rotate(9deg)}
    .gift-4{right:24%;bottom:11%;transform:rotate(-10deg)}

    .trophy-1{left:35%;top:5%;transform:rotate(-5deg)}
    .trophy-2{right:32%;bottom:21%;transform:rotate(6deg)}

    .auth-card{
      width:min(470px,100%);
      background:rgba(255,255,255,.97);
      border:1px solid rgba(7,119,217,.14);
      border-radius:30px;
      box-shadow:var(--shadow);
      padding:24px 26px 22px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      overflow:hidden;
      z-index:2;
    }
    .auth-card:before{
      content:"";
      position:absolute;
      inset:0 0 auto;
      height:5px;
      background:linear-gradient(90deg,var(--blue),var(--blue2));
    }

    .auth-logo{
      display:flex;
      justify-content:center;
      align-items:center;
      margin:0 auto 14px;
    }
    .auth-logo img{
      height:52px;
      width:auto;
      max-width:240px;
      object-fit:contain;
    }

    .form-head{
      text-align:center;
      margin-bottom:14px;
      min-height:66px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
    }
    .form-head h1{
      margin:0;
      font-family:var(--display);
      color:var(--navy);
      font-size:clamp(30px,4vw,40px);
      line-height:1;
      letter-spacing:-1.4px;
      font-weight:800;
    }
    .form-head p{
      margin:8px auto 0;
      max-width:390px;
      color:#566b86;
      font-size:14.5px;
      font-weight:600;
      line-height:1.35;
      min-height:20px;
    }

    .login-tabs{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:7px;
      background:linear-gradient(180deg,#f4f9ff,#eef7ff);
      border:1px solid #d5e8fb;
      border-radius:22px;
      padding:6px;
      margin-bottom:14px;
    }
    .login-tab{
      height:46px;
      border-radius:17px;
      color:#52647f;
      font-family:var(--display);
      font-size:17px;
      font-weight:800;
      letter-spacing:-.3px;
      transition:.18s ease;
    }
    .login-tab.active{
      background:#fff;
      color:var(--navy);
      box-shadow:0 12px 24px rgba(7,63,143,.10);
      border:1px solid #dbeafd;
    }

    .form-zone{min-height:204px}
    .form{display:none;min-height:204px;align-content:start}
    .form.active{display:grid;gap:10px}
    .field{display:grid;gap:6px}
    .field label{font-size:12.5px;font-weight:900;color:#243856}
    .input-wrap{
      height:48px;
      border:1.5px solid #d8e6f4;
      background:#fff;
      border-radius:17px;
      display:flex;
      align-items:center;
      padding:0 14px 0 16px;
      box-shadow:0 8px 20px rgba(7,63,143,.035);
      position:relative;
    }
    .input-wrap:focus-within{border-color:#78b8f3;box-shadow:none}
    .input-wrap input{
      width:100%;
      height:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--ink);
      font-size:15px;
      font-weight:700;
      padding-right:38px;
    }
    .input-wrap input:focus,.input-wrap input:focus-visible{outline:0!important;box-shadow:none!important}
    .input-wrap input::-ms-reveal,.input-wrap input::-ms-clear{display:none!important}
    .input-wrap input::-webkit-credentials-auto-fill-button{visibility:hidden!important;display:none!important;pointer-events:none!important;position:absolute!important;right:0!important}
    .input-wrap input:-webkit-autofill,
    .input-wrap input:-webkit-autofill:hover,
    .input-wrap input:-webkit-autofill:focus{
      -webkit-text-fill-color:var(--ink)!important;
      -webkit-box-shadow:0 0 0 1000px #fff inset!important;
      box-shadow:0 0 0 1000px #fff inset!important;
      transition:background-color 9999s ease-out 0s;
    }
    .password-toggle{
      position:absolute;
      right:11px;
      top:50%;
      transform:translateY(-50%);
      width:36px;
      height:36px;
      border-radius:11px;
      display:grid;
      place-items:center;
      color:#607089;
    }
    .password-toggle:hover{background:#f1f7ff;color:var(--blue)}
    .password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

    .primary{
      width:100%;
      height:48px;
      border-radius:17px;
      background:linear-gradient(135deg,#071d49,#3157d6);
      color:#fff;
      font-weight:950;
      font-size:15.5px;
      box-shadow:0 16px 30px rgba(7,63,143,.20);
      margin-top:4px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .primary:hover{transform:translateY(-1px)}

    .forgot-link{
      text-align:center;
      min-height:18px;
      line-height:1;
    }
    .forgot-link a{color:var(--blue);font-size:12px;font-weight:900}

    .status{
      min-height:18px;
      text-align:center;
      color:#607089;
      font-size:12px;
      font-weight:800;
      margin-top:8px;
    }
    .status.error{color:#c93643}
    .status.success{color:#16964a}

    .signup-link-panel{
      margin:8px 0 0;
      padding:10px 12px;
      border:1px solid #d8e7f7;
      border-radius:16px;
      background:linear-gradient(135deg,#f7fbff,#fff);
      text-align:center;
      box-shadow:0 6px 16px rgba(7,63,143,.04);
    }
    .signup-link-panel a{display:inline-flex;color:var(--blue);font-size:13px;font-weight:900}

    .smallprint{
      text-align:center;
      margin:10px 0 0;
      color:#7f8fa8;
      font-size:10.8px;
      font-weight:600;
      line-height:1.35;
    }
    .smallprint a{color:var(--blue);font-weight:900}

    @media(max-width:620px){
      .page{padding:12px;place-items:start center;overflow:auto}
      .decor-item{display:none}
      .auth-card{border-radius:26px;padding:18px 17px 16px;margin-top:10px}
      .auth-logo img{height:44px}
      .form-head{min-height:60px;margin-bottom:10px}
      .form-head h1{font-size:28px}
      .form-head p{font-size:13px;margin-top:6px}
      .login-tabs{padding:5px;margin-bottom:10px}
      .login-tab{height:42px;font-size:15px}
      .input-wrap,.primary{height:44px}
      .form-zone,.form{min-height:194px}
      .smallprint{font-size:10.2px}
    }

    @media(max-height:700px) and (min-width:621px){
      .page{padding:10px}
      .auth-card{padding:18px 24px 16px;border-radius:28px}
      .auth-logo{margin-bottom:10px}
      .auth-logo img{height:44px}
      .form-head{min-height:58px;margin-bottom:10px}
      .form-head h1{font-size:30px}
      .form-head p{font-size:13px;margin-top:6px}
      .login-tabs{margin-bottom:10px}
      .login-tab{height:42px;font-size:15px}
      .input-wrap,.primary{height:44px}
      .form-zone,.form{min-height:190px}
      .status{margin-top:5px}
      .signup-link-panel{padding:7px 10px;margin-top:6px}
      .smallprint{margin-top:7px}
    }

/* Page section */

/* Parent and Child sign-in options must sit side by side. */
  .login-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .login-tab{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  @media(max-width:420px){
    .login-tabs{
      grid-template-columns:repeat(2,minmax(0,1fr))!important;
      gap:6px!important;
    }

    .login-tab{
      font-size:14px!important;
      height:42px!important;
    }
  }

/* Page section */

.access-note{margin:2px 0 0;padding:9px 11px;border-radius:13px;background:#f6faff;border:1px solid #dce9f7;color:#5b6e88;font-size:10.8px;font-weight:700;line-height:1.35;text-align:left}
  .access-note b{color:#071d49}.access-note.child{background:#fffaf0;border-color:#f5df9b}
  @media(max-width:620px){.access-note{font-size:10.4px}}