:root{
      --bg:#f5f7fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e6eaf2;
      --shadow: 0 18px 50px rgba(15, 23, 42, .14);
      --radius:18px;

      --accent:#2dd4bf;
      --accent2:#3b82f6;

      --btn:#2dd4bf;
      --btnText:#053b34;
      --danger:#ef4444;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    /* Background with soft geometric shapes */
    .bg{
      min-height:100dvh;
      display:grid;
      place-items:center;
      padding: 26px 16px;
      background:
        radial-gradient(circle at 18% 20%, rgba(45,212,191,.18), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.16), transparent 42%),
        radial-gradient(circle at 78% 82%, rgba(45,212,191,.12), transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f5f7fb 55%, #f3f6ff 100%);
      position:relative;
      overflow:hidden;
    }

    .shape{
      position:absolute;
      inset:auto;
      opacity:.22;
      filter: blur(.2px);
      pointer-events:none;
    }
    .shape.s1{ width:520px; height:520px; left:-180px; top:-160px; border-radius: 140px; transform: rotate(12deg);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
    }
    .shape.s2{ width:420px; height:420px; right:-180px; top:-120px; border-radius: 999px; transform: rotate(-8deg);
      background: linear-gradient(135deg, rgba(59,130,246,1), rgba(45,212,191,1));
    }
    .shape.s3{ width:700px; height:280px; left:50%; bottom:-170px; transform: translateX(-50%) rotate(-4deg);
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(15,23,42,.14), rgba(59,130,246,.10));
      opacity:.18;
    }

    /* Single column layout */
    .wrap{
      width: min(520px, 100%);
      z-index:1;
    }

    /* Card */
    .card{
      background: rgba(255,255,255,.92);
      border:1px solid rgba(230,234,242,.9);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
      position:relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-120px -120px auto auto;
      width:260px;height:260px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(45,212,191,.26), transparent 65%);
      pointer-events:none;
    }

    .cardTop{
      display:flex;
      justify-content:center;
      margin-bottom: 10px;
      position:relative;
      z-index:1;
    }
    .brand{
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    /*.brand img{
      display:block;
      margin:0 auto;
      max-width: 220px;
      height:auto;
    }*/

    h1{
      margin: 10px 0 6px;
      font-size: 20px;
      letter-spacing:-.01em;
      position:relative;
      z-index:1;
      text-align:center;
    }
    .sub{
      margin: 0 0 14px;
      color: var(--muted);
      font-weight:650;
      font-size: 13px;
      position:relative;
      z-index:1;
      text-align:center;
    }

    .alert{
      margin: 10px 0 0;
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 750;
      font-size: 12px;
      border: 1px solid rgba(230,234,242,.9);
      background: rgba(255,255,255,.9);
      position:relative;
      z-index:1;
    }
    .alert.ok{
      border-color: rgba(45,212,191,.45);
      background: rgba(45,212,191,.12);
      color: #075b51;
    }
    .alert.err{
      border-color: rgba(239,68,68,.35);
      background: rgba(239,68,68,.10);
      color: #7f1d1d;
    }

    .field{margin: 10px 0; position:relative; z-index:1;}
    label{
      display:block;
      font-size:12px;
      color: var(--muted);
      font-weight:800;
      margin: 0 0 8px;
    }
    .input{
      width:100%;
      height:44px;
      border-radius: 14px;
      border:1px solid rgba(230,234,242,.9);
      background: rgba(255,255,255,.95);
      padding: 0 12px;
      font-size: 14px;
      outline:none;
      transition: box-shadow .2s ease, border-color .2s ease;
    }
    .input:focus{
      border-color: rgba(45,212,191,.55);
      box-shadow: 0 0 0 4px rgba(45,212,191,.14);
    }

    .btn{
      width:100%;
      height:46px;
      border:none;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--btn), var(--accent2));
      color: white;
      font-weight:900;
      letter-spacing:.4px;
      cursor:pointer;
      box-shadow: 0 18px 36px rgba(59,130,246,.18);
      transition: transform .08s ease, filter .2s ease;
      position:relative;
      z-index:1;
    }
    .btn:hover{filter: brightness(.98)}
    .btn:active{transform: translateY(1px)}
    .btn[disabled]{opacity:.6; cursor:not-allowed; box-shadow:none}

    .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
      margin-top: 12px;
      position:relative;
      z-index:1;
      flex-wrap:wrap;
    }
    .link{
      font-size:12px;
      font-weight:850;
      color: var(--accent2);
      text-decoration:none;
    }
    .link:hover{text-decoration:underline}

    .muted{
      font-size:12px;
      color: var(--muted);
      font-weight:650;
    }

    /* Mobile */
    @media (max-width: 520px){
      .card{padding: 18px}
      /*.brand img{max-width: 200px}*/
    }