.auth-hero {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(0,229,255,.05), rgba(255,75,209,.035)) , var(--card);
    }
    .auth-hero::before{
      content:""; position:absolute; inset:0;
      background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px,
        transparent 2px, transparent 4px
      );
      mix-blend-mode: soft-light; pointer-events:none;
    }
    .glitch {
      position: relative; display:inline-block;
      text-shadow: 0 0 0 transparent;
      animation: glitchShift 2.3s infinite;
    }
    .glitch::before, .glitch::after{
      content:attr(data-text); position:absolute; inset:0; pointer-events:none;
    }
    .glitch::before{ left:1px; text-shadow:-1px 0 var(--cyan); clip-path: inset(0 0 65% 0); animation: glitchClipA 2s infinite linear alternate; }
    .glitch::after{ left:-1px; text-shadow:1px 0 var(--pink); clip-path: inset(35% 0 0 0); animation: glitchClipB 1.7s infinite linear alternate; }
    @keyframes glitchShift{ 0%,100%{ transform:translateZ(0) } 42%{ transform:translate(.3px,.2px) } 43%{ transform:translate(-.3px,-.2px) } 70%{ transform:translate(.2px,-.3px)} }
    @keyframes glitchClipA{ 0%{ clip-path: inset(0 0 82% 0) } 100%{ clip-path: inset(0 0 10% 0) } }
    @keyframes glitchClipB{ 0%{ clip-path: inset(70% 0 0 0) } 100%{ clip-path: inset(5% 0 0 0) } }

    .auth-grid{ display:grid; gap:18px; grid-template-columns:1fr; margin:32px 0 }
    @media (min-width:860px){ .auth-grid{ grid-template-columns: 1.2fr .8fr } }

    .field{ display:flex; flex-direction:column; gap:8px }
    .field label{ font-size:14px; color:var(--muted) }
    .input{
      width:100%; padding:12px 14px; border-radius:12px;
      border:1px solid var(--border); background:#0e1423; color:var(--text);
    }
    .input:focus{ outline:2px solid color-mix(in oklab, var(--accent) 55%, var(--border)); outline-offset:2px }

    .inline{ display:flex; align-items:center; justify-content:space-between; gap:12px }
    .muted{ color:var(--muted); font-size:13px }

    .strength{ height:8px; border-radius:999px; background:#0e1423; border:1px solid var(--border); overflow:hidden }
    .strength > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #ff4bd1, #00e5ff) }

    .status {
      display:flex; align-items:center; gap:10px; min-height:22px; color:var(--muted); font-size:14px;
    }
    .spinner{ width:16px; height:16px; border-radius:50%;
      border:2px solid color-mix(in oklab, var(--accent) 30%, #000);
      border-top-color: var(--accent); animation: spin 1s linear infinite; display:none;
    }
    @keyframes spin{ to{ transform: rotate(360deg) } }

    .progress-dots{ letter-spacing:2px; min-width:24px; display:inline-block }
    .caps{ display:none; color:var(--pink); font-size:12px; margin-top:6px }

    .divider{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--muted); font-size:12px; opacity:.9 }
    .divider::before, .divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent) }

    .keyline{ border-top:1px dashed var(--border); padding-top:12px; margin-top:8px; }
    .tiny{ font-size:12px; color:var(--muted) }
    .code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

    .qr{
      display:grid; place-items:center; height:120px; border-radius:10px; border:1px dashed var(--border); background:#0e1423; color:var(--muted); font-size:12px;
    }
    .success{ color:var(--cyan) }
    .error{ color:var(--pink) }