:root { --navy:#1e2f4a; --blue:#4655e9; --violet:#6a36b0; --cyan:#35c7f2; --muted:#6a7d96; --field:#edf3fb; --border:#dce6f2; }
    * { box-sizing:border-box; }
    body { margin:0; min-height:100vh; font-family:Inter,Arial,sans-serif; background:#fbfcfe; color:var(--navy); }
    .page { min-height:100vh; display:grid; grid-template-columns:50% 50%; overflow:hidden; }
    .visual { position:relative; min-height:100vh; overflow:hidden; padding:52px 64px; color:white; background:linear-gradient(155deg,#4b58e7 0%,#4545c8 48%,#30216f 100%); }
    .visual:before,.visual:after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
    .visual:before { width:700px;height:700px;left:-260px;top:-250px;background:rgba(180,190,255,.17); }
    .visual:after { width:600px;height:600px;right:-300px;bottom:-290px;background:rgba(30,20,120,.25); }
    .visual-header { position:relative;z-index:2; }
    .eyebrow { margin:0 0 14px; font-size:16px; font-weight:800; letter-spacing:.13em; color:#d9efff; }
    h1 { margin:0; max-width:660px; font-size:clamp(28px,3.2vw,46px); line-height:1.02; letter-spacing:-.04em; }
    h1 span {color: #d8efff; font-size: 0.6em; letter-spacing: 0.01em;}
.tagline {
  margin: 18px 0 0;
  color: #e0e8ff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}    #scene { position:absolute; inset:265px 0 55px; width:100%; height:calc(100% - 320px); display:block; z-index:1; }
    .scene-label { position:absolute;z-index:2;left:0;right:0;bottom:28px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding:0 28px;color:#e4edff;font-size:11px;font-weight:800;letter-spacing:.02em; }
    .scene-label span { padding:9px 13px;border:1px solid rgba(219,238,255,.42);border-radius:9px;background:rgba(28,45,132,.48);box-shadow:0 6px 16px rgba(18,22,91,.15);white-space:nowrap; }
    .live { position:absolute;z-index:2;top:270px;left:64px;display:flex;align-items:center;gap:9px;color:#e0f8ff;font-size:12px;font-weight:800;letter-spacing:.08em; }
    .live i { width:9px;height:9px;border-radius:50%;background:#35bd8c;box-shadow:0 0 0 6px rgba(53,189,140,.18); }
    .scene-legend { position:absolute;z-index:3;top:305px;left:64px;display:flex;flex-wrap:wrap;gap:7px;max-width:470px; }
    .scene-legend span { padding:6px 9px;border:1px solid rgba(218,236,255,.4);border-radius:999px;color:#f0f7ff;background:rgba(25,39,123,.38);font-size:10px;font-weight:800;letter-spacing:.04em; }
    .form-panel { min-height:100vh; display:grid; place-items:center; padding:42px 7vw; background:#fbfcfe; }
    .form { width:min(100%,480px); }
    .product { margin-bottom:48px; color:var(--violet); font-size:12px; font-weight:800; letter-spacing:.13em; }
    h2 { margin:0; font-size:32px; letter-spacing:-.04em; }
    .sub { margin:12px 0 38px; color:var(--muted); font-size:14px; }
    .tabs { display:flex;gap:30px;margin-bottom:28px;border-bottom:2px solid var(--border); }
    .tab { position:relative;border:0;padding:0 0 14px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer; }
    .tab.active { color:var(--violet); }
    .tab.active:after { content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;border-radius:4px;background:var(--violet); }
    .field { margin-bottom:22px; }
    label { display:block;margin-bottom:8px;font-size:13px;font-weight:800; }
    input { width:100%;height:56px;border:1px solid var(--border);border-radius:10px;padding:0 17px;background:var(--field);color:var(--navy);outline:none; }
    input:focus { border-color:var(--blue);box-shadow:0 0 0 4px rgba(70,85,233,.12); }
    .password { position:relative; }
    .password input { padding-right:72px; }
    .show { position:absolute;right:14px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--violet);font-size:12px;font-weight:800;cursor:pointer; }
    .options { display:flex;justify-content:space-between;margin:3px 0 25px;font-size:12px;color:var(--muted); }
    .options a { color:var(--violet);font-weight:800;text-decoration:none; }
    button.primary,button.secondary { width:100%;height:58px;border-radius:10px;font-weight:800;cursor:pointer; }
    button.primary { border:0;color:white;background:linear-gradient(100deg,#4655e9,#6a36b0);box-shadow:0 10px 20px rgba(88,67,190,.18); }
    button.secondary { border:1px solid #b89ad8;color:var(--violet);background:white; }
    .divider { display:flex;align-items:center;gap:14px;margin:29px 0 22px;color:var(--muted);font-size:12px; }
    .divider:before,.divider:after { content:"";height:1px;flex:1;background:var(--border); }
    .security { margin-top:19px;text-align:center;color:var(--muted);font-size:11px; }
    .hidden { display:none; }
    #message { min-height:18px;margin-top:10px;text-align:center;color:var(--violet);font-size:12px; }
    @media (max-width:850px) { .page{grid-template-columns:1fr}.visual{min-height:560px}.form-panel{min-height:650px}.visual h1{font-size:48px}#scene{inset:250px 0 20px;height:310px}.live{top:250px} }
    @media (prefers-reduced-motion:reduce) { #scene { } }