:root{
      --brand:#6FC04A;
      --brand2:#2FA8E1;
      --text:#1f2a24;
      --muted:#51635a;
      --ring: rgba(47,168,225,.35);
      --card: rgba(255,255,255,.82);
      --border: rgba(228,221,210,.75);
      --shadow: 0 22px 60px rgba(27, 39, 33, .16);
    }
    body{
      font-family:'Public Sans',sans-serif;
      min-height:100vh;
      margin:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 1.25rem;
      color: var(--text);
      background:
        radial-gradient(900px 520px at 10% 12%, rgba(111,192,74,.22), transparent 60%),
        radial-gradient(900px 520px at 90% 0%, rgba(47,168,225,.25), transparent 60%),
        linear-gradient(120deg, #f4fbf2, #ffffff 45%, #eef6ff);
    }

    .auth-box{
      width: 100%;
      max-width: 440px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 2.1rem 1.85rem;
      position: relative;
    }

    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.45rem .8rem;
      border-radius: 999px;
      background: rgba(111,192,74,.18);
      border: 1px solid rgba(28,79,184,.2);
      color:#1C4FB8;
      font-weight:800;
      font-size:.9rem;
    }

    .brand-title{
      margin: .75rem 0 .25rem;
      font-weight: 800;
      letter-spacing: -.02em;
      text-align:center;
      font-family:'Public Sans',sans-serif;
    }
    .brand-sub{
      text-align:center;
      color: var(--muted);
      font-size: .95rem;
      margin-bottom: 1.25rem;
    }

    .input-group-text{
      background: rgba(255,255,255,.65);
      border-color: rgba(2,6,23,.10);
    }
    .form-control{
      border-color: rgba(2,6,23,.10);
      padding-top: .85rem;
      padding-bottom: .85rem;
    }
    .form-control:focus{
      border-color: rgba(107,143,113,.45);
      box-shadow: 0 0 0 .25rem var(--ring);
    }

    .custom-green-btn{
      width: 100%;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      border: none;
      border-radius: 14px;
      font-weight: 800;
      padding: .95rem 1rem;
      color: #fff;
      box-shadow: 0 14px 30px rgba(47,168,225,.25);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .custom-green-btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(47,168,225,.32);
      filter: brightness(1.02);
    }

    .fineprint{
      margin-top: 1rem;
      text-align:center;
      color: #64748b;
      font-size: .82rem;
    }

    /* success animation (optional) */
    .checkmark-container{
      width: 46px;
      height: 46px;
      margin: 0 auto;
      border-radius: 999px;
      background: rgba(111,192,74,.18);
      border: 1px solid rgba(28,79,184,.2);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .checkmark{
      width: 26px;
      height: 26px;
      fill: none;
      stroke: #1C4FB8;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fade-out{
      opacity: 0;
      transition: opacity .5s ease;
    }

    @media (max-width: 480px){
      .auth-box{ padding: 1.85rem 1.35rem; }
    }