/* The auth panel keeps its own neutral palette and spacious, grouped fields. */
    :is(#vjtop-ref #authModal, #accountLogin) .auth-card { box-sizing:border-box; width:min(572px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:48px 70px 35px; border:0; border-radius:32px; background:#202020; color:#eee; box-shadow:0 1px 0 #ffffff08 inset,0 18px 50px #00000020; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-card * { box-sizing:border-box; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-close { display:grid; place-items:center; top:18px; right:18px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#2b2b2b; color:#aaa; box-shadow:none; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-close:hover { background:#353535; color:#fff; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-welcome { display:flex; align-items:center; justify-content:center; gap:14px; min-height:42px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-motif { display:block; flex:none; width:36px; height:36px; object-fit:contain; }
    :is(#vjtop-ref #authModal, #accountLogin) h2 { margin:0; font-size:25px; line-height:1.5; font-weight:500; letter-spacing:.01em; white-space:nowrap; color:#fff; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-tabs { width:224px; max-width:100%; margin:29px auto 27px; padding:4px; gap:4px; border:0; border-radius:26px; background:#2a2a2a; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-tabs button { min-width:0; height:38px; padding:0 16px; border-radius:22px; background:transparent; color:#999; font-size:14px; font-weight:400; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-tabs button.active { background:#444; color:#fff; font-weight:500; box-shadow:0 1px 3px #00000012; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-tabs button:not(.active):hover { background:#333; color:#ddd; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-back { display:flex; align-items:center; justify-content:center; min-height:46px; margin:29px auto 27px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-back button { min-height:44px; padding:0 18px; border:0; border-radius:22px; background:#2a2a2a; color:#ccc; font-size:13px; cursor:pointer; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-channel { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; margin:0 4px 10px; color:#aaa; font-size:12px; line-height:20px; }
    :is(#vjtop-ref #authModal, #accountLogin) :is(#authLoginIdentifierToggle, #accountLoginIdentifierToggle) { flex:none; min-height:28px; padding:0; border:0; background:transparent; color:#bcbcbc; font-size:12px; line-height:20px; cursor:pointer; }
    :is(#vjtop-ref #authModal, #accountLogin) :is(#authLoginIdentifierToggle, #accountLoginIdentifierToggle):hover { color:#fff; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-inputs { padding:2px 0; border-radius:19px; background:#2b2b2b; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row { position:relative; display:flex; align-items:center; gap:13px; min-width:0; height:60px; padding:0 19px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row + .auth-input-row::before { content:""; position:absolute; top:0; left:19px; right:19px; height:1px; background:#ffffff07; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-country { flex:none; min-width:31px; color:#fff; font-size:16px; font-weight:500; line-height:22px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row input { min-width:0; flex:1; width:100%; height:42px; margin:0; padding:0 2px; border:0; border-radius:7px; outline:0; background:transparent; color:#fff; font-size:14px; line-height:22px; box-shadow:none; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row input::placeholder { color:#aaa; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row input:focus-visible { box-shadow:none; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row input:-webkit-autofill { -webkit-text-fill-color:#fff; caret-color:#fff; box-shadow:0 0 0 1000px #2b2b2b inset; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-code-row { display:flex; gap:13px; align-items:center; }
    :is(#vjtop-ref #authModal, #accountLogin) #authCodeButton, :is(#vjtop-ref #authModal, #accountLogin) #recoverySendCode { flex:none; min-width:94px; height:32px; margin:0; padding:0 0 0 14px; border:0; border-left:1px solid #ffffff18; border-radius:0; background:transparent; box-shadow:none; color:#eee; font-size:13px; line-height:20px; white-space:nowrap; }
    :is(#vjtop-ref #authModal, #accountLogin) #authCodeButton:disabled, :is(#vjtop-ref #authModal, #accountLogin) #recoverySendCode:disabled { color:#888; opacity:1; cursor:default; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-eye { display:grid; place-items:center; flex:none; width:36px; height:44px; margin-right:-8px; padding:0; border:0; border-radius:10px; background:transparent; color:#999; cursor:pointer; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-eye svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-eye:hover, :is(#vjtop-ref #authModal, #accountLogin) .auth-eye[aria-pressed="true"] { color:#eee; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-login-options { display:flex; justify-content:flex-end; min-height:36px; margin:12px 3px 0; }
    :is(#vjtop-ref #authModal, #accountLogin) #authForgotPassword { min-height:28px; margin:0; padding:0; color:#bcbcbc; font-size:12px; line-height:20px; text-decoration:none; }
    :is(#vjtop-ref #authModal, #accountLogin) #authForgotPassword:hover { color:#fff; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-submit { display:block; width:100%; min-height:52px; margin-top:27px; padding:12px 22px; border:0; border-radius:17px; background:#c1adee; color:#222; box-shadow:none; font-size:15px; line-height:22px; font-weight:500; letter-spacing:.08em; transition:filter .16s,transform .16s; }
    :is(#vjtop-ref #authModal, #accountLogin) :is(#authLoginSubmit, #accountLoginSubmit) { margin-top:16px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-submit:hover { background:#c1adee; color:#222; box-shadow:none; filter:brightness(1.06); }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-submit:active { transform:translateY(1px); }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-submit:disabled { opacity:.55; cursor:wait; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-dev-hint { margin:15px 0 0; color:#aaa; font-size:12px; line-height:1.6; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha { margin-top:16px; padding:16px; border:1px solid #ffffff18; border-radius:16px; background:#292929; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha p { margin:0 0 10px; font-size:13px; line-height:1.5; color:#ddd; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha img { display:block; width:264px; max-width:100%; height:auto; border-radius:8px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha input { display:block; box-sizing:border-box; width:100%; min-width:0; height:44px; margin:12px 0 8px; padding:8px; border:1px solid #ffffff30; border-radius:8px; background:#202020; color:#fff; font-size:16px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha .auth-captcha-status { font-size:12px; color:#bbb; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha-actions button { min-height:44px; margin:0; padding:8px 10px; border:0; border-radius:10px; background:#3b3b3b; color:#eee; font-size:13px; cursor:pointer; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha-actions button:last-child { background:#c1adee; color:#222; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-captcha-actions button:disabled { opacity:.5; cursor:wait; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-status { min-height:0; margin:15px 0 0; color:#ddd; font-size:12px; line-height:1.6; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-status:empty { display:none; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-status.error { color:#eee; }
    :is(#vjtop-ref #authModal, #accountLogin) .auth-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    :is(#vjtop-ref #authModal, #accountLogin) [hidden] { display:none!important; }
    @media(max-width:520px) { :is(#vjtop-ref #authModal, #accountLogin) { padding:12px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-card { max-height:calc(100dvh - 24px); padding:51px 32px 32px; } :is(#vjtop-ref #authModal, #accountLogin) h2 { font-size:24px; } }
    @media(max-width:360px) { :is(#vjtop-ref #authModal, #accountLogin) .auth-card { padding-left:23px; padding-right:23px; } :is(#vjtop-ref #authModal, #accountLogin) h2 { font-size:22px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-welcome { gap:11px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-motif { width:32px; height:32px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row { padding-left:14px; padding-right:14px; gap:10px; } :is(#vjtop-ref #authModal, #accountLogin) #authCodeButton, :is(#vjtop-ref #authModal, #accountLogin) #recoverySendCode { min-width:86px; padding-left:10px; font-size:12px; } }
    @media(pointer:coarse) { :is(#vjtop-ref #authModal, #accountLogin) .auth-close { width:44px; height:44px; top:12px; right:12px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-tabs button, :is(#vjtop-ref #authModal, #accountLogin) #authCodeButton, :is(#vjtop-ref #authModal, #accountLogin) #recoverySendCode, :is(#vjtop-ref #authModal, #accountLogin) #authForgotPassword, :is(#vjtop-ref #authModal, #accountLogin) :is(#authLoginIdentifierToggle, #accountLoginIdentifierToggle) { min-height:44px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-eye { width:44px; } :is(#vjtop-ref #authModal, #accountLogin) .auth-input-row input { font-size:16px; } }
    @media(prefers-reduced-motion:reduce) { :is(#vjtop-ref #authModal, #accountLogin) .auth-submit { transition:none; } }

/* Native subscription dialog uses the same card and fields as the homepage. */
#accountLogin { width:min(612px,100%); max-height:100dvh; padding:20px; border:0; background:transparent; color:#eee; overflow:auto; }
#accountLogin::backdrop { background:rgba(0,0,0,.62); }
#accountLogin .auth-card { position:relative; margin:auto; }
#accountLogin .auth-close { position:absolute; cursor:pointer; font-size:24px; }
#accountLogin .auth-channel { margin-top:28px; }
#accountLogin .auth-status { overflow-wrap:anywhere; }
#accountLogin .auth-status:empty { display:none; }
#accountLogin :is(input,button):focus-visible { outline:2px solid #c1adee; outline-offset:3px; }