/* VEDA auth pages (login / otp) — redesign per approved mockup
   https://claude.ai/code/artifact/8ee35735-9adb-41e5-9691-7a1e1c160b40 */

.vd-auth{
    position:fixed; inset:0; z-index:1000; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:
        radial-gradient(50% 55% at 70% 15%, rgba(26,107,244,.30), transparent 62%),
        radial-gradient(40% 48% at 20% 80%, rgba(0,254,229,.10), transparent 60%),
        linear-gradient(180deg,#070b13 0%,#0a1020 55%,#0e1626 100%);
    font-family:'Montserrat','Segoe UI',sans-serif;
}
.vd-auth canvas{position:absolute; inset:0; width:100%; height:100%}
.vd-peaks{position:absolute; left:0; right:0; bottom:0; width:100%; height:26%; opacity:.9}

/* pre-staged entrance: scene starts invisible on the dark backdrop and the warp
   intro reveals it (static styles, not keyframes — reduced-motion safe). JS drops
   .vd-pre when the intro starts / is skipped; a head failsafe drops it at 2.5s. */
.vd-auth.vd-pre .vd-peaks,
.vd-auth.vd-pre .vd-tag,
.vd-auth.vd-pre .vd-viz,
.vd-auth.vd-pre .vd-right,
.vd-auth.vd-pre #vdStars{opacity:0}

.vd-card{
    position:relative; z-index:2; width:min(380px,88vw);
    display:flex; flex-direction:column; align-items:center; gap:14px;
    background:rgba(13,20,34,.55); border:1px solid rgba(140,180,255,.18); border-radius:20px;
    padding:34px 34px 30px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 0 0 1px rgba(0,254,229,.06), 0 30px 80px rgba(0,0,0,.55);
}
.vd-brand{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.vd-brand svg{width:44px; height:44px}
.vd-brand b{font-size:26px; letter-spacing:.3em; color:#fff; font-weight:700; padding-left:.3em}

.vd-card form{width:100%; display:flex; flex-direction:column; gap:14px; margin:0}
.vd-in{
    width:100%; height:44px; border-radius:12px; border:1px solid rgba(120,160,220,.35);
    background:rgba(9,14,24,.7); color:#e8eefb; text-align:center;
    font-family:inherit; font-size:14px; outline:none;
    transition:border-color .15s, box-shadow .15s;
}
.vd-in::placeholder{color:#7787a0}
.vd-in:focus{border-color:#1a6bf4; box-shadow:0 0 0 1px #1a6bf4, 0 0 18px rgba(26,107,244,.4)}
/* Chrome autofill paints white — keep the dark pill */
.vd-in:-webkit-autofill{
    -webkit-text-fill-color:#e8eefb;
    -webkit-box-shadow:0 0 0 1000px #0a1120 inset;
    caret-color:#e8eefb; transition:background-color 9999s;
}
.vd-btn{
    width:100%; height:44px; border:0; border-radius:12px; cursor:pointer;
    font-family:inherit; font-size:14.5px; font-weight:700; color:#04121f; letter-spacing:.02em;
    background:linear-gradient(90deg,#1a6bf4,#00fee5);
    box-shadow:0 6px 24px rgba(26,107,244,.45);
    transition:box-shadow .15s;
}
.vd-btn:hover{box-shadow:0 6px 30px rgba(0,254,229,.5)}
.vd-btn-ghost{
    background:none; border:1px solid rgba(120,160,220,.35); color:#9fb4d4; box-shadow:none;
}
.vd-btn-ghost:hover{border-color:#00fee5; color:#fff; box-shadow:none}

.vd-who{font-size:13px; color:#9fb4d4; text-align:center; margin:0}
.vd-who b{color:#fff; font-weight:600}
.vd-err{
    width:100%; text-align:center; font-size:12.5px; color:#ff8a80; margin:0;
    text-shadow:0 0 12px rgba(255,80,70,.35);
}

/* ── login v2: split panel — analytics illustration left, one-step form right ──
   stars/peaks live on .vd-auth (full-bleed scene); panels sit transparent/frosted
   on top so the background is continuous — no "two pages" seam on wide screens */
.vd-auth.vd-split{display:grid; grid-template-columns:1fr min(45vw,600px); align-items:stretch}
.vd-left{position:relative; overflow:hidden}
.vd-right{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(10,15,26,.55); border-left:1px solid rgba(140,180,255,.12);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
@media (max-width:900px){
    .vd-auth.vd-split{grid-template-columns:1fr; overflow-y:auto}
    .vd-left{display:none}
    .vd-right{
        border-left:0; background:transparent;
        backdrop-filter:none; -webkit-backdrop-filter:none;
        justify-content:flex-start; min-height:100%; padding:84px 18px 20px;
    }
    .vd-right .vd-card{margin:auto}
    .vd-copy{position:static; margin-top:16px}
}

.vd-tag{position:absolute; top:34px; left:38px; z-index:3; display:flex; align-items:center; gap:14px}
.vd-tag svg{width:40px; height:40px}
.vd-tag b{display:block; font-size:22px; letter-spacing:.3em; color:#fff; font-weight:700}
.vd-tag small{display:block; font-size:10.5px; letter-spacing:.24em; color:#7787a0; text-transform:uppercase; margin-top:3px}

/* viz scales continuously with the viewport: width tracks 38vw and ONE
   viewport-driven font-size (1em ≈ width/56, the 560px reference look)
   drives every inner size via em — chart, chips, padding grow as a unit */
.vd-viz{position:absolute; z-index:2; left:50%; top:54%; transform:translate(-50%,-50%);
    width:clamp(340px,38vw,1000px); font-size:clamp(7px,.679vw,17.9px)}
.vd-viz-panel{
    background:rgba(13,20,34,.6); border:1px solid rgba(140,180,255,.16); border-radius:1.6em;
    padding:1.8em 1.8em 1em; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}
/* charts-only collage v3 (2026-09-03, approved): main trend panel + four mini
   chart panels scattered around it — anchor offsets in em so the collage scales
   with the viz; JS jitters each mini's position (margins) and tilt per load */
.vd-vzmain{padding:1.6em 1.6em 1em}
.vd-vzs{
    position:absolute; width:17.6em; z-index:3; padding:1.2em;
    box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.vd-vzs1{top:-6.4em; left:-6.4em}
.vd-vzs2{top:-5.6em; right:-5.8em}
.vd-vzs3{bottom:-6em; left:-5em}
.vd-vzs4{bottom:-6.6em; right:-6.4em}

.vd-copy{position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:11px; color:#5a6a80; letter-spacing:.06em; z-index:3}

/* language dropdown — top-right of the form panel; UI only until translations land */
.vd-lang{position:absolute; top:16px; right:18px; z-index:5}
.vd-lang > button{
    display:flex; align-items:center; gap:7px; background:rgba(13,20,34,.7);
    border:1px solid rgba(120,160,220,.3); border-radius:16px; cursor:pointer;
    color:#9fb4d4; font-family:inherit; font-size:12px; padding:6px 13px;
}
.vd-lang > button:hover{border-color:#00fee5; color:#fff}
.vd-lang ul{
    position:absolute; right:0; top:calc(100% + 6px); margin:0; padding:5px; list-style:none;
    background:rgba(13,20,34,.95); border:1px solid rgba(120,160,220,.3); border-radius:12px;
    display:none; min-width:130px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.vd-lang.open ul{display:block}
.vd-lang li{padding:7px 12px; border-radius:8px; font-size:12.5px; color:#9fb4d4; cursor:pointer}
.vd-lang li:hover{background:rgba(26,107,244,.2); color:#fff}
.vd-lang li.on{color:#00fee5}