/* ============================================================
   Auth pages (login / register) — two-panel card.
   External stylesheet, brand-driven. No inline styles.
   Layered after app.css; reuses app.css design tokens.
   ============================================================ */

.vh-au-body { background: #eef1f8; }

.vh-au-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

.vh-au-card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

/* ---------- Left brand panel ---------- */
.vh-au-brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 48px 46px;
    display: flex;
    flex-direction: column;
    background: radial-gradient(130% 130% at 100% 0%, #4c1d95 0%, #312e81 42%, #1e1b4b 100%);
}
.vh-au-logo { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 38px; color: #fff; position: relative; z-index: 2; }
.vh-au-logo img { height: 40px; max-width: 200px; object-fit: contain; }
.vh-au-logo-mark { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; }
.vh-au-logo-txt { font-weight: 800; font-size: 22px; line-height: 1.05; display: flex; flex-direction: column; color: #fff; }
.vh-au-logo-txt small { font-size: 10px; letter-spacing: 2px; font-weight: 600; color: #a5b4fc; margin-top: 2px; }

.vh-au-h { font-size: 34px; line-height: 1.18; font-weight: 800; margin: 0; position: relative; z-index: 2; color: #fff; }
.vh-au-h span { color: #a78bfa; }
.vh-au-sub { margin: 16px 0 0; max-width: 380px; color: #c7d2fe; font-size: 15px; line-height: 1.6; position: relative; z-index: 2; }

.vh-au-feats { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 2; }
.vh-au-feats li { display: flex; align-items: center; gap: 14px; }
.vh-au-fico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #c4b5fd; background: rgba(139, 92, 246, .22); border: 1px solid rgba(167, 139, 250, .28); }
.vh-au-feats b { display: block; font-size: 15px; color: #fff; }
.vh-au-feats li > div > span { font-size: 13px; color: #a5b4fc; }

/* decorative isometric wireframe cubes */
.vh-au-deco { position: absolute; pointer-events: none; z-index: 1; color: rgba(167, 139, 250, .5); }
.vh-au-deco.is-top { top: 30px; right: -46px; width: 220px; opacity: .45; }
.vh-au-deco.is-bottom { bottom: -60px; right: 20px; width: 320px; opacity: .3; }
.vh-au-deco svg { width: 100%; height: auto; display: block; }

/* ---------- Right form panel ---------- */
.vh-au-form { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.vh-au-title { font-size: 27px; font-weight: 800; color: var(--vh-ink); margin: 0; }
.vh-au-lead { margin: 9px 0 26px; color: var(--vh-muted); font-size: 14px; }
.vh-au-lead a { color: var(--vh-primary); font-weight: 700; }

.vh-au-alert { margin-bottom: 18px; }

.vh-au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 20px; }
.vh-au-row .vh-check { font-size: 14px; margin: 0; }
.vh-au-row a { color: var(--vh-primary); font-weight: 600; font-size: 14px; }

.vh-au-or { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--vh-faint); font-size: 13px; }
.vh-au-or::before, .vh-au-or::after { content: ""; flex: 1; height: 1px; background: var(--vh-line); }

.vh-au-social { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vh-au-sbtn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--vh-line); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--vh-body); background: #fff; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.vh-au-sbtn:hover { border-color: var(--vh-primary); background: #fbfaff; box-shadow: 0 4px 14px rgba(79, 70, 229, .08); }
.vh-au-sbtn svg { width: 18px; height: 18px; flex-shrink: 0; }

.vh-au-legal { margin: 24px 0 0; text-align: center; color: var(--vh-faint); font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.vh-au-legal a { color: var(--vh-primary); font-weight: 600; }
.vh-au-legal svg { flex-shrink: 0; }

/* trust badge (shown below the card on mobile) */
.vh-au-secure { display: none; align-items: center; justify-content: center; gap: 13px; padding: 22px 24px 30px; color: var(--vh-muted); font-size: 13.5px; line-height: 1.5; }
.vh-au-secure b { color: var(--vh-ink); }
.vh-au-sfico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--vh-primary-soft); color: var(--vh-primary); display: grid; place-items: center; }

.vh-au-form.is-register { padding-top: 40px; padding-bottom: 40px; }

/* ---------- Mobile app-style bottom tab bar ---------- */
.vh-tabbar { display: none; }

/* ============================================================
   Mobile: dark brand banner on top, form card overlapping it,
   fixed bottom tab bar. Matches the app-style demo.
   ============================================================ */
@media (max-width: 900px) {
    .vh-au-body { background: #f1f2f7; padding-bottom: 74px; }
    .vh-au-wrap { max-width: none; padding: 0; }

    .vh-au-card { grid-template-columns: 1fr; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }

    /* brand becomes a top banner */
    .vh-au-brand { border-radius: 0; padding: 30px 22px 62px; }
    .vh-au-brand .vh-au-logo { display: none; }
    .vh-au-feats { display: none; }
    .vh-au-h { font-size: 28px; }
    .vh-au-sub { max-width: none; margin-top: 12px; }
    .vh-au-deco.is-bottom { display: none; }
    .vh-au-deco.is-top { top: 24px; right: -30px; width: 210px; opacity: .6; }

    /* white form card overlaps the banner with rounded top corners */
    .vh-au-form,
    .vh-au-form.is-register {
        background: #fff;
        border-radius: 26px 26px 0 0;
        margin-top: -40px;
        padding: 30px 22px 30px;
        position: relative;
        z-index: 3;
        box-shadow: 0 -8px 26px rgba(15, 23, 42, .05);
    }

    .vh-au-legal { display: none; }
    .vh-au-secure { display: flex; }

    /* replace the heavy storefront footer with the app tab bar */
    .vh-au-body .vh-footer { display: none; }

    .vh-tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        background: #fff;
        border-top: 1px solid var(--vh-line);
        padding: 9px 4px calc(9px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 18px rgba(15, 23, 42, .06);
    }
    .vh-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--vh-muted); position: relative; }
    .vh-tabbar a.is-active { color: var(--vh-primary); }
    .vh-tab-badge { position: absolute; top: -5px; left: 50%; transform: translateX(6px); background: var(--vh-primary); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; }
}

@media (max-width: 480px) {
    .vh-au-social { grid-template-columns: 1fr 1fr; }
    .vh-au-h { font-size: 26px; }
}