/* =============================================================================
   V1DShorts — Auth Pages (login / register / forgot)
   -----------------------------------------------------------------------------
   • Dark theme + magenta→violet gradient + glassmorphism + neon glow
   • CSS-only 3D icons (no SVG illustration, no image)
   • Mobile-first, responsive
   ============================================================================ */

/* ---- 1. Layout shell ---- */
.va-shell{
    min-height: calc(100vh - 0px);
    display:flex; align-items:center; justify-content:center;
    padding: clamp(20px, 4vw, 48px) clamp(14px, 4vw, 32px);
    position:relative; z-index:1;
}
.va-card{
    width:100%; max-width:440px;
    background: linear-gradient(160deg, rgba(28,26,40,.72) 0%, rgba(14,13,21,.78) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: clamp(22px, 5vw, 36px) clamp(20px, 5vw, 34px);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 30px 70px -20px rgba(120, 34, 220, .35),
        0 18px 44px -16px rgba(255, 0, 128, .22),
        inset 0 1px 0 rgba(255,255,255,.06);
    position:relative;
    overflow:hidden;
}
.va-card::before{
    /* inner top highlight */
    content:""; position:absolute; inset:0 0 auto 0; height:2px;
    background: linear-gradient(90deg, transparent, rgba(255,0,128,.55), rgba(120,34,220,.45), transparent);
    opacity:.7;
}
.va-eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; letter-spacing:.18em; font-weight:600;
    text-transform:uppercase;
    padding: 5px 11px; border-radius:999px;
    background: linear-gradient(90deg, rgba(255,0,128,.16), rgba(120,34,220,.16));
    border: 1px solid rgba(255,0,128,.28);
    color: #ffcfe3;
    margin: 0 0 14px;
}
.va-h1{
    font-size: clamp(22px, 5vw, 30px);
    line-height:1.15; letter-spacing:-.02em;
    margin: 0 0 6px; font-weight:800;
}
.va-h1 .grad{
    background: linear-gradient(90deg,#ff0080 0%, #ad3df0 55%, #7822dc 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.va-sub{
    margin: 0 0 22px; color:#9b9bb0; font-size:14.2px; line-height:1.55;
}

/* ---- 2. Form fields ---- */
.va-field{ display:block; position:relative; margin: 0 0 14px; }
.va-label{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:12px; color:#c9c9d8; font-weight:600;
    letter-spacing:.02em; margin-bottom:6px;
}
.va-label .va-opt{ color:#7a7a8c; font-weight:500; font-size:11px; letter-spacing:.05em; }
.va-input{
    width:100%; box-sizing:border-box;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 13px 14px 13px 42px;
    color:#fff; font-size:15px; font-family:inherit;
    transition: border-color .18s ease, box-shadow .25s ease, background .18s ease;
    outline:none;
}
.va-input::placeholder{ color:#5e5e72; }
.va-input:focus{
    border-color: rgba(255,0,128,.55);
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 0 4px rgba(255,0,128,.10);
}
.va-input.is-error{
    border-color: #ff6b6b;
    box-shadow: 0 0 0 4px rgba(255,107,107,.12);
}
.va-field-ic{
    position:absolute; left:13px; top:50%; transform:translateY(calc(-50% + 11px));
    width:18px; height:18px; pointer-events:none; color:#9c9caf;
}
.va-field-pw-toggle{
    position:absolute; right:8px; top:50%; transform:translateY(calc(-50% + 11px));
    width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer; color:#9c9caf; border-radius:8px;
}
.va-field-pw-toggle:hover{ color:#fff; background:rgba(255,255,255,.04); }
.va-msg{
    display:none; margin-top:6px; font-size:12.2px; line-height:1.4;
}
.va-msg.is-error{ display:block; color:#ff8a8a; }
.va-msg.is-ok{    display:block; color:#7be3a8; }

.va-row{
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; margin: -2px 0 18px; color:#a6a6ba;
}
.va-row a{ color:#ffb1d2; text-decoration:none; }
.va-row a:hover{ color:#fff; text-decoration:underline; }

/* ---- 3. Submit button (gradient + neon glow) ---- */
.va-submit{
    width:100%; box-sizing:border-box;
    padding: 14px 18px; border-radius: 999px;
    background: linear-gradient(90deg,#ff0080,#7822dc);
    color:#fff; font-weight:700; font-size:15px;
    border:0; cursor:pointer;
    box-shadow:
        0 14px 30px -8px rgba(255,0,128,.55),
        0 8px 18px -10px rgba(120,34,220,.55),
        inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
    letter-spacing:.01em;
}
.va-submit:hover{ filter: brightness(1.06); box-shadow:
        0 18px 38px -10px rgba(255,0,128,.65),
        0 12px 22px -10px rgba(120,34,220,.6),
        inset 0 1px 0 rgba(255,255,255,.22); }
.va-submit:active{ transform: translateY(1px); }
.va-submit[disabled]{ opacity:.55; cursor:not-allowed; transform:none; filter:none; }
.va-submit .spin{
    display:inline-block; width:14px; height:14px; vertical-align:-2px;
    border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
    animation: va-spin .8s linear infinite; margin-right:8px;
}
@keyframes va-spin{ to{ transform:rotate(360deg); } }

/* ---- 4. Foot links ---- */
.va-foot{
    margin: 18px 0 0; text-align:center;
    color:#8b8b9c; font-size:13.5px;
}
.va-foot a{ color:#ffb1d2; text-decoration:none; font-weight:600; }
.va-foot a:hover{ color:#fff; text-decoration:underline; }

/* =============================================================================
   5. 3D ICONS  (pure CSS — no SVG illustration, no image)
   ============================================================================ */
.va-3d-wrap{
    width:100%; display:flex; justify-content:center;
    margin: 6px 0 22px; perspective: 800px;
}
.va-3d{
    position:relative; width:128px; height:128px;
    transform-style: preserve-3d;
    transform: rotateX(14deg) rotateY(-16deg);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.va-3d-wrap:hover .va-3d{ transform: rotateX(8deg) rotateY(-8deg); }
@media (prefers-reduced-motion: reduce){
    .va-3d{ transition: none; }
}
/* floor reflection */
.va-3d::after{
    content:""; position:absolute; left:50%; bottom:-22px; transform:translateX(-50%) rotateX(70deg);
    width:88px; height:32px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(255,0,128,.45), rgba(120,34,220,.10) 60%, transparent 75%);
    filter: blur(6px); opacity:.7; pointer-events:none;
}

/* ----- 5a. Shield + User (LOGIN) ----- */
.va-3d-shield{
    position:absolute; inset:0;
    background: linear-gradient(160deg,#ff2a8f 0%, #b53de4 55%, #5b1ebd 100%);
    clip-path: polygon(50% 0, 100% 18%, 100% 60%, 80% 90%, 50% 100%, 20% 90%, 0 60%, 0 18%);
    box-shadow:
        0 22px 36px -10px rgba(255,0,128,.5),
        inset 0 2px 0 rgba(255,255,255,.18),
        inset 0 -10px 22px rgba(0,0,0,.35);
    transform: translateZ(0);
}
.va-3d-shield::before{
    /* inner bevel */
    content:""; position:absolute; inset:6px;
    clip-path: polygon(50% 0, 100% 18%, 100% 60%, 80% 90%, 50% 100%, 20% 90%, 0 60%, 0 18%);
    background: linear-gradient(160deg, rgba(255,255,255,.12), transparent 60%);
}
.va-3d-shield-back{
    /* depth duplicate behind shield */
    position:absolute; inset:0; transform: translateZ(-22px) translateY(6px);
    background: rgba(120,34,220,.35);
    clip-path: polygon(50% 0, 100% 18%, 100% 60%, 80% 90%, 50% 100%, 20% 90%, 0 60%, 0 18%);
    filter: blur(4px); opacity:.85;
}
.va-3d-user{
    position:absolute; left:50%; top:46%;
    transform: translate(-50%, -50%) translateZ(18px);
    width:62px; height:62px; pointer-events:none;
}
.va-3d-user-head{
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:26px; height:26px; border-radius:50%;
    background: linear-gradient(180deg,#fff,#ffd1e6);
    box-shadow:
        0 4px 10px rgba(0,0,0,.35),
        inset 0 -3px 6px rgba(255,0,128,.25);
}
.va-3d-user-body{
    position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:48px; height:30px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    background: linear-gradient(180deg,#fff,#ffd1e6);
    box-shadow:
        0 6px 12px rgba(0,0,0,.35),
        inset 0 -3px 6px rgba(255,0,128,.25);
}

/* ----- 5b. Register — Card + User Plus ----- */
.va-3d-card{
    position:absolute; inset:6px;
    background: linear-gradient(160deg,#1c1a2e 0%, #14121f 100%);
    border-radius: 18px;
    box-shadow:
        0 24px 40px -14px rgba(255,0,128,.45),
        inset 0 1px 0 rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.08);
}
.va-3d-card::before{
    /* magenta strip across the top */
    content:""; position:absolute; left:14%; right:14%; top:16%; height:6px;
    border-radius:99px;
    background: linear-gradient(90deg,#ff0080,#7822dc);
    box-shadow: 0 0 14px rgba(255,0,128,.6);
}
.va-3d-card::after{
    /* hint of profile lines below */
    content:""; position:absolute; left:18%; right:36%; bottom:18%; height:5px;
    border-radius:99px; background: rgba(255,255,255,.07);
    box-shadow: 0 -10px 0 0 rgba(255,255,255,.04);
}
.va-3d-reg-user{
    position:absolute; left:50%; top:42%;
    transform: translate(-50%, -50%) translateZ(20px);
    width:48px; height:48px; pointer-events:none;
}
.va-3d-reg-user-head{
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:22px; height:22px; border-radius:50%;
    background: linear-gradient(180deg,#fff,#ffd1e6);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.va-3d-reg-user-body{
    position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:40px; height:24px;
    border-top-left-radius: 28px; border-top-right-radius: 28px;
    background: linear-gradient(180deg,#fff,#ffd1e6);
    box-shadow: 0 6px 12px rgba(0,0,0,.35);
}
.va-3d-plus{
    position:absolute; right:-2px; top:-6px;
    width:38px; height:38px; border-radius:50%;
    background: linear-gradient(160deg,#ff0080,#b53de4);
    transform: translateZ(34px);
    box-shadow:
        0 12px 22px -4px rgba(255,0,128,.7),
        inset 0 1px 0 rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:22px; font-weight:800; line-height:1;
}
.va-3d-plus::before, .va-3d-plus::after{
    content:""; position:absolute; background:#fff; border-radius:2px;
    box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.va-3d-plus::before{ width:16px; height:3px; }
.va-3d-plus::after{  width:3px;  height:16px; }

/* ----- 5c. Key + Shield (FORGOT) ----- */
.va-3d-shield-bg{
    position:absolute; inset:0; transform: translateZ(-8px);
    background: linear-gradient(160deg, rgba(255,0,128,.16), rgba(120,34,220,.12));
    border: 1px solid rgba(255,0,128,.25);
    clip-path: polygon(50% 0, 100% 18%, 100% 60%, 80% 90%, 50% 100%, 20% 90%, 0 60%, 0 18%);
    box-shadow:
        0 22px 36px -10px rgba(120,34,220,.40),
        inset 0 2px 0 rgba(255,255,255,.08);
}
.va-3d-key{
    position:absolute; left:50%; top:50%;
    transform: translate(-50%, -50%) translateZ(22px) rotate(-30deg);
    width:96px; height:34px; pointer-events:none;
}
.va-3d-key-head{
    position:absolute; left:0; top:50%; transform: translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background: linear-gradient(160deg,#ffd166 0%,#ff8a3d 55%,#c64a2a 100%);
    box-shadow:
        0 14px 28px -6px rgba(255,138,61,.55),
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -6px 12px rgba(0,0,0,.35);
}
.va-3d-key-head::before{
    /* hole */
    content:""; position:absolute; left:50%; top:50%;
    width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%);
    background: radial-gradient(circle at 30% 30%, #1a1224, #0a0810);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
}
.va-3d-key-body{
    position:absolute; left:36px; top:50%; transform: translateY(-50%);
    width:62px; height:14px; border-radius:5px;
    background: linear-gradient(180deg,#ffd166 0%,#ff8a3d 50%,#c64a2a 100%);
    box-shadow:
        0 10px 20px -6px rgba(255,138,61,.5),
        inset 0 2px 0 rgba(255,255,255,.30),
        inset 0 -3px 6px rgba(0,0,0,.35);
}
.va-3d-key-body::before, .va-3d-key-body::after{
    /* teeth */
    content:""; position:absolute; bottom:-7px;
    width:8px; height:11px; border-radius:0 0 3px 3px;
    background: inherit;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.25);
}
.va-3d-key-body::before{ right:6px; }
.va-3d-key-body::after { right:22px; height:8px; }

/* ---- 6. Mobile tweaks ---- */
@media (max-width: 480px){
    .va-3d-wrap{ margin: 4px 0 18px; }
    .va-3d{ width:112px; height:112px; transform: rotateX(10deg) rotateY(-10deg); }
    .va-card{ border-radius:18px; }
}

/* ---- 7. Header tweaks (for clean URL header reuse) ---- */
.va-back{
    display:inline-flex; align-items:center; gap:6px;
    color:#a6a6ba; font-size:13px; text-decoration:none;
    margin-bottom: 14px;
}
.va-back:hover{ color:#fff; }

/* ---- 8. Toast (for forgot-success generic message) ---- */
.va-toast-region{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
    z-index:9999; pointer-events:none;
}
.va-toast{
    background: rgba(20,18,32,.92); color:#fff; padding: 12px 18px; border-radius:999px;
    border:1px solid rgba(255,0,128,.25); font-size:13.5px;
    box-shadow: 0 18px 36px -10px rgba(255,0,128,.45);
    backdrop-filter: blur(8px); opacity:0; transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
}
.va-toast.show{ opacity:1; transform: translateY(0); }