:root{ --bg:#1a1a1a; --panel:#1f1f1f; --muted:#8b92a1; --text:#eef2ff; --button:#3b82f6; --radius:16px }
    *{box-sizing:border-box} html,body{height:100%}
    body{
      margin:0; font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; color:var(--text);
      background:
        radial-gradient(1000px 500px at 20% -10%, rgba(59,130,246,.55), transparent 60%),
        radial-gradient(1200px 600px at 80% -10%, rgba(239,68,68,.55), transparent 60%),
        var(--bg);
    }
    a, a:visited{ color:inherit; text-decoration:none }
    header.nav{
      position:fixed; inset:0 0 auto 0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
      backdrop-filter: blur(8px); background: rgba(26,26,26,.65); border-bottom:1px solid rgba(255,255,255,.12); z-index:10
    }
    .brand a{ font-weight:700; font-size:1.6rem }

    .shell{ height:100%; display:grid; place-items:center }
    .stage{ width:min(1000px, 94vw); min-height: 480px; margin-top:64px; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); background:var(--panel) }
    .slides{ display:flex; width:400%; transition: transform .45s ease }
    .slide{ width:25%; padding:56px 48px }

    h1{ margin:0 0 10px; font-size:clamp(28px,3.2vw,36px) }
    p.muted{ color:var(--muted); margin:0 0 18px }
    form{ display:grid; gap:16px }
    label{ font-weight:600; margin-bottom:6px; display:block }
    .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
    input,select{
      width:100%; background:#161616; color:var(--text); border:1px solid rgba(255,255,255,.14);
      border-radius:12px; padding:12px; outline:none; transition:.15s border-color, .15s box-shadow; appearance:none
    }
    input:focus,select:focus{ border-color:var(--button); box-shadow:0 0 0 3px color-mix(in srgb,var(--button) 45%, transparent) }

    .actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
    .btn{ padding:12px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color:var(--text); cursor:pointer }
    .btn.primary{ background:var(--button); border-color:var(--button) }
    .btn.primary:hover{ background:color-mix(in srgb,var(--button) 85%, white) }

    .hint{ color:var(--muted); font-size:.95rem; min-height:20px }
    .error{ color:#e63946 }

    /* OTP boxes */
    .otp-boxes{ display:flex; gap:10px; justify-content:center; margin-top:8px }
    .otp-boxes input{
      width:52px; height:60px; text-align:center; font-size:1.6rem; border-radius:10px;
      border:1px solid rgba(255,255,255,.2); background:#161616; color:var(--text);
    }
    .otp-boxes input:focus{ outline:none; border-color:var(--button); box-shadow:0 0 0 3px color-mix(in srgb,var(--button) 45%, transparent) }

    .login-link,.login-link:visited{ color:#3b82f6; text-decoration:none; font-weight:500 }
    .login-link:hover{ text-decoration:underline }

    html, body { height:100% }
    body { display:flex; flex-direction:column }
    main { flex:1 }
    .footer { padding:24px; text-align:center; color:var(--muted); background:none; border:none }
    .footer a { color:#3b82f6; text-decoration:none; font-weight:500 }
    .footer a:hover { text-decoration:underline }

    /* Consent note */
    .consent{ color:var(--muted); font-size:.9rem; margin-top:4px }
    .consent a{ color:#93c5fd; text-decoration:underline }

    /* Responsive */
    @media (max-width: 900px) {
      .container { padding: 16px; }
      header.nav { padding: 12px 16px; }
      .brand { font-size: 1.6rem; }
      .card { margin: 12px 16px 0; }
    }
    @media (max-width: 720px) {
      header.nav { gap: 8px }
      .stage { width:96vw; min-height:unset }
      .slide { padding:32px 20px }
      .row { grid-template-columns:1fr; gap:10px }
      .otp-boxes { gap:8px }
      .otp-boxes input { width:44px; height:52px; font-size:1.4rem }
      .footer { padding:16px; line-height:1.5 }
    }