:root {
      color-scheme: light dark;
      --bg: #0b1020;
      --bg-accent: hsl(222 62% 14% / 0.6);
      --card: #0f172a;
      --card-contrast: #111827;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --primary: #0ea5e9; /* sky-500 */
      --primary-600: #0284c7;
      --border: #1f2937;
      --focus: #22d3ee; /* cyan-400 */
      --danger: #ef4444;
      --success: #22c55e;
      --warning: #f59e0b;
      --ring: 0 0 0 3px var(--focus);
      --radius: 16px;
      --shadow-lg: 0 10px 30px hsl(220 40% 2% / .6);
      --shadow-sm: 0 2px 10px hsl(220 40% 2% / .4);
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #eef2ff; /* slate-50/indigo-50 */
        --bg-accent: hsl(226 80% 96% / .7);
        --card: #ffffff;
        --card-contrast: #f8fafc;
        --text: #0f172a;
        --muted: #475569;
        --primary: #0ea5e9;
        --primary-600: #0284c7;
        --border: #e5e7eb;
        --shadow-lg: 0 20px 40px hsl(220 35% 60% / .25);
        --shadow-sm: 0 2px 8px hsl(220 35% 60% / .2);
      }
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: var(--font);
      background: radial-gradient(1200px 800px at 10% -10%, var(--bg-accent), transparent),
                  radial-gradient(1200px 800px at 110% 110%, var(--bg-accent), transparent),
                  var(--bg);
      color: var(--text);
    }
    .container {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 24px;
    }
    .card {
      width: min(100%, 1024px);
      border-radius: calc(var(--radius) + 4px);
      background: linear-gradient(180deg, var(--card), var(--card-contrast));
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
    }
    @media (max-width: 900px) {
      .card { grid-template-columns: 1fr; }
      .brand { display: none; }
    }

    /* Brand / cover side */
    .brand {
      position: relative;
      padding: 40px;  
      isolation: isolate;
      overflow: clip;
    }
    .brand::before,
    .brand::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(600px 380px at 10% 10%, hsl(200 90% 50% / .20), transparent),
                  radial-gradient(480px 360px at 90% 90%, hsl(260 95% 60% / .18), transparent);
    }
    .brand h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); letter-spacing: .4px; }
    .brand p { margin: 0; color: var(--muted); }
    .badges { display:flex; gap:8px; flex-wrap: wrap; margin-top: 16px; }
    .badge { border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted); background: hsl(220 10% 10% / .06); }
    @media (prefers-color-scheme: light) {
      .badge { background: hsl(220 40% 98% / .9); }
    }
    .illustration {
      margin-top: 28px;
      aspect-ratio: 16 / 10;
      border-radius: calc(var(--radius) + 8px);
      background:
        radial-gradient(120px 80px at 20% 30%, hsl(199 89% 48% / .7), transparent 70%),
        radial-gradient(100px 80px at 60% 40%, hsl(262 89% 68% / .65), transparent 70%),
        radial-gradient(140px 90px at 80% 60%, hsl(158 68% 45% / .65), transparent 70%),
        linear-gradient(135deg, hsl(222 44% 14%), hsl(216 36% 10%));
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
      display: grid; place-items: center; color: #fff9;
      font-weight: 600; letter-spacing: .3px;
    }

    /* Form side */
    .panel { padding: 28px; }
    .tabs { display:flex; gap:8px; background:hsl(220 15% 12% / .25); padding:6px; border-radius: 12px; border:1px solid var(--border); width: max-content; }
    @media (prefers-color-scheme: light) { .tabs { background: #f3f4f6; } }
    .tab {
      appearance: none; border:0; background: transparent; color: var(--muted);
      padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px;
      transition: transform .15s ease, color .15s ease, background .15s ease;
    }
    .tab[aria-selected="true"] { color: var(--text); background: #ffffff12; }
    @media (prefers-color-scheme: light) { .tab[aria-selected="true"] { background: #fff; } }

    .form { margin-top: 18px; display: grid; gap: 14px; }
    .field { display:grid; gap:6px; }
    .label { font-size: 13px; color: var(--muted); }
    .input, .select { width: 100%; padding: 12px 14px; border-radius: 10px; border:1px solid var(--border); background: transparent; color: var(--text); outline: none; transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease; }
    .input:focus, .select:focus { border-color: var(--primary); box-shadow: var(--ring); }
    .row { display:flex; gap:12px; }
    .row > * { flex:1; }
    .hint { font-size: 12px; color: var(--muted); }

    .actions { display:flex; align-items:center; justify-content: space-between; gap:12px; margin-top:4px; }
    .button {
      appearance:none; border:0; padding:12px 16px; border-radius: 12px; font-weight:700; cursor:pointer;
      background: var(--primary); color:white; box-shadow: 0 6px 18px hsl(199 87% 48% / .35);
      transition: transform .05s ease, filter .15s ease, background .2s ease;
    }
    .button:hover { filter: brightness(1.05); }
    .button:active { transform: translateY(1px); }
    .button.secondary { background: transparent; color: var(--text); border:1px solid var(--border); box-shadow:none; }
    .button.ghost { background: transparent; color: var(--muted); border:0; padding:8px 10px; font-weight:600; }
    .button.full { width: 100%; }

    .checkbox { display:flex; gap:10px; align-items:flex-start; font-size: 13px; color: var(--muted); }
    .checkbox input { accent-color: var(--primary); margin-top: 3px; }

    .forgot { font-size: 13px; color: var(--primary); text-decoration:none; }

    .divider { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 8px; color: var(--muted); font-size: 12.5px; }
    .divider::before, .divider::after { content:""; height:1px; background: var(--border); }

    .socials { display:flex; gap:12px; }
    .socials .button { flex:1; background: transparent; border:1px solid var(--border); color: var(--muted); }

    .error { color: var(--danger); font-size: 12.5px; }
    .success { color: var(--success); font-size: 13px; }

    /* Wizard */
    .wizard { margin-top: 18px; }
    .steps { display:flex; align-items:center; gap:10px; font-size:12px; color: var(--muted); }
    .step { display:flex; align-items:center; gap:8px; }
    .dot { width:10px; height:10px; border-radius:50%; background: var(--border); transition: background .2s ease, transform .2s ease; }
    .step[aria-current="step"] .dot { background: var(--primary); transform: scale(1.05); }
    .progress { height: 6px; background: #ffffff10; border-radius: 999px; margin-top: 10px; overflow: hidden; border:1px solid var(--border); }
    .bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--focus)); transition: width .3s ease; }

    /* Password strength */
    .meter { height: 8px; display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; }
    .meter > span { height: 8px; border-radius: 999px; background: #ffffff18; border:1px solid var(--border); }
    .meter > span.active.w { background: var(--danger); }
    .meter > span.active.m { background: var(--warning); }
    .meter > span.active.s { background: var(--success); }
    .meter-label { font-size: 12px; color: var(--muted); }

    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }