:root{
      --bg-1: #20160f;
      --card: rgba(255,255,255,.08);
      --card-stroke: rgba(255,255,255,.18);
      --text: #eef2ff;
      --muted: #cbd5e1;
      --accent: #eebb80;
      --accent-2: #af7946;
      --danger: #ef4444;
      --ring: #763a1a70;
      --shadow: 0 20px 40px rgba(0,0,0,.35);
    }

    @media (prefers-color-scheme: light){
      :root{
        --bg-1: #f6f7fb;
        --card: rgba(255,255,255,.7);
        --card-stroke: rgba(15,16,32,.08);
        --text: #0f1020;
        --muted: #334155;
        --ring: rgba(124,58,237,.35);
        --shadow: 0 20px 40px rgba(2,6,23,.08);
      }
    }

    * { box-sizing: border-box; }
    html, body{ height:100%; }
    body{
      margin:0; color:var(--text); font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      /* Animated gradient background */
      background: radial-gradient(1200px 800px at 10% 10%, #90c461, transparent 60%),
                  radial-gradient(1000px 900px at 90% 90%, #90c461, transparent 55%),
                  linear-gradient(120deg, var(--bg-1), #763a1a8f 60%, var(--bg-1));
      animation: floatHue 16s ease-in-out infinite alternate;
      display:grid; place-items:center;
      padding: 24px;
    }

    @keyframes floatHue {
      0% { filter:hue-rotate(0deg) saturate(1); }
      100% { filter:hue-rotate(18deg) saturate(1.05); }
    }

    /* ------------ Card ------------ */
    .card{
      width:min(460px, 92vw);
      background: var(--card);
      border: 1px solid var(--card-stroke);
      backdrop-filter: blur(14px) saturate(1.3);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .card-header{
      position:relative;
      padding: 28px 28px 12px;
    }

    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px; border-radius: 999px;
      background: linear-gradient(135deg, rgba(58, 237, 153, 0.25), rgba(34,211,238,.25));
      border:1px solid var(--card-stroke);
      font-weight:600; letter-spacing:.2px; font-size:.85rem; color:var(--text);
    }
    .chip svg{ width:16px; height:16px }

    .title{ font-size:1.6rem; margin:14px 0 4px; font-weight:800; letter-spacing:.3px; }
    .sub{ margin:0; color:var(--muted); font-size:.95rem; }

    .card-body{ padding: 20px 28px 28px; }

    /* ------------ Form ------------ */
    form{ display:grid; gap: 16px; }

    .field{
      position:relative;
    }
    .icon{
      position:absolute; left:14px; top:50%; translate:0 -50%; pointer-events:none; opacity:.75;
    }
    .icon svg{ width:18px; height:18px; }

    .input{
      width:100%;
      padding: 14px 14px 14px 42px;
      border-radius: 14px;
      border:1px solid var(--card-stroke);
      background: rgba(255,255,255,.06);
      color:var(--text);
      outline: none;
      transition: box-shadow .2s, border-color .2s, transform .08s;
    }
    .input::placeholder{ color: transparent; }
    .input:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 6px var(--ring);
    }

    /* Floating label */
    .label{
      position:absolute; left:42px; top:50%; translate:0 -50%;
      font-size: .95rem; color: var(--muted);
      transition: all .18s ease;
      pointer-events:none;
    }
    .input:not(:placeholder-shown) + .label,
    .input:focus + .label{
      top: -8px; left: 12px; padding: 0 6px; background: var(--card);
      border: 1px solid var(--card-stroke); border-radius: 999px; font-size: .75rem; color: var(--text);
    }

    .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .remember{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.92rem; }

    .btn{
      cursor:pointer; border:0; border-radius:14px; padding:14px 16px; width:100%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color:white; font-weight:700; letter-spacing:.3px; font-size:1rem;
      box-shadow: 0 12px 24px rgba(255, 255, 255, 0.35);
      transition: transform .08s ease, filter .2s ease;
    }
    .btn:hover{ filter: brightness(1.05); }
    .btn:active{ transform: translateY(1px); }

    .meta{
      margin-top:12px; text-align:center; color:var(--muted); font-size:.9rem;
    }

    /* Tiny helper links */
    a{ color:inherit; }
    .link{ color:var(--text); font-weight:600; text-decoration: none; border-bottom:1px dashed transparent; }
    .link:hover{ border-bottom-color: currentColor; }

    /* Divider */
    .divider{ position:relative; margin: 6px 0 4px; height:1px; background: var(--card-stroke); }
    .divider span{ position:absolute; inset-inline:0; inset-block:-12px auto; text-align:center; color:var(--muted); font-size:.8rem; }

    /* Footer note */
    .tiny{ opacity:.8; font-size:.8rem; margin-top:8px; }

    /* Accessibility focus for links */
    .link:focus-visible{ outline: 4px solid var(--ring); outline-offset: 3px; border-radius:6px; }
    .errSpan{
      color: red;
    }