:root{color-scheme:light;--ink:#0c0730;--muted:#625d7c;--purple:#782bfa;--blue:#238fff;--green:#159560;--danger:#a32254;--gradient:linear-gradient(115deg,#ab2df8 0%,#552bfc 50%,#2199fb 100%)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;background:#c5b7ff}
body{margin:0;min-height:100vh;min-height:100svh;font-family:Arial,Helvetica,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 63% 15%,#bbedff 0%,transparent 34%),radial-gradient(ellipse at 8% 45%,#dcb9ff 0%,transparent 43%),linear-gradient(125deg,#ad87f7 0%,#d8d0ff 50%,#aba6fa 100%);isolation:isolate;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #361fc0;outline-offset:4px}button{transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}button:not(:disabled):active{transform:translateY(1px)}button:not(:disabled):hover{filter:brightness(1.04)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.scene{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}





.page-shell{width:100%;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:70px 24px 92px;position:relative}.access-card{width:100%;border:1.5px solid #ffffffd9;border-radius:38px;background:linear-gradient(135deg,#ffffffcf 0%,#fafaffed 48%,#eeedffe3 100%);box-shadow:inset 0 1px 3px #fff,0 22px 80px #6554ba28,0 2px 5px #fff8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.login-card{max-width:590px;text-align:center;padding:48px 38px 56px}.shield-tile{width:122px;height:122px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#bc5aff 0%,#602cf4 48%,#4424f2 68%,#3199ff 100%);border:3px solid #f5e8ffe0;border-radius:33px;box-shadow:inset 0 2px 4px #fff9,0 0 0 2px #b9b4ff75,0 13px 27px #7c55f140}.shield-tile svg{width:76px;height:76px;stroke-width:2.2}.login-card>.shield-tile{margin:0 auto 30px}h1,h2,p{margin:0}h1{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.15;letter-spacing:-1.1px;white-space:nowrap}.login-intro{margin-top:34px}.login-intro h2{font-size:31px;letter-spacing:-.5px;font-weight:700}.login-intro p{font-size:21px;line-height:1.45;color:#555b89;margin-top:9px}.login-card form{margin-top:32px}.username-field{padding:22px;text-align:left;background:#ffffff9c;border:1px solid #dfdcf4;border-radius:24px;box-shadow:inset 0 1px 2px #fff}.username-field label{font-size:21px;font-weight:700;color:#424879;display:block;margin:0 0 12px 4px}.username-field input{width:100%;min-width:0;border:1px solid #d9d3f5;border-radius:17px;background:#efedffb3;padding:18px 21px;color:#231944;font-size:23px;height:67px;box-shadow:inset 0 1px 3px #b6aee712;transition:border-color .15s,box-shadow .15s}.username-field input::placeholder{color:#79758d;opacity:1}.username-field input:focus{border-color:#8160fa;outline:2px solid #8160fa30;outline-offset:1px}.username-field input[aria-invalid=true]{border-color:var(--danger)}.continue-button{display:block;width:calc(100% - 12px);margin:27px auto 0;min-height:76px;color:#fff;font-size:29px;font-weight:700;border-radius:45px;border:2px solid #ffffffb5;background:var(--gradient);box-shadow:0 10px 24px #865aec33,inset 0 1px 3px #eac5ff}.continue-button:disabled{opacity:.65}
.account-card{max-width:650px;padding:43px 36px 22px}.account-header{display:flex;align-items:center;gap:17px;margin:0 12px 38px}.account-header .shield-tile{height:96px;width:96px;border-radius:26px}.account-header .shield-tile svg{height:64px;width:64px}.account-header h1{font-size:34px;letter-spacing:-1px;outline:none}.connection-status{display:flex;align-items:center;gap:12px;color:#68627c;font-size:18px;line-height:1.4;margin-top:9px}.status-dot{width:15px;height:15px;flex:none;border-radius:50%;background:#2ac377;box-shadow:0 0 0 5px #78daa454}.connection-status.is-offline .status-dot{background:#f0a441;box-shadow:0 0 0 5px #f0a44125}.connection-status.is-offline{color:#8a642d}.credentials{display:grid;gap:27px}.credential-group h2{font-size:23px;font-weight:700;letter-spacing:-.5px;margin:0 3px 12px}.credential-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:15px;min-height:88px;border:1px solid #dcd9e9;background:#ffffffd6;border-radius:23px;padding:9px 9px 9px 24px;box-shadow:0 1px 2px #42327304,inset 0 1px 2px #fff}.field-icon{color:#736b86;width:28px;height:28px;stroke-width:1.9}.credential-value{min-width:0;display:block;color:#635e79;font-size:22px;line-height:1.4;overflow-wrap:anywhere;direction:ltr}.email-value{letter-spacing:-.35px}.copy-button{display:flex;align-items:center;justify-content:center;gap:11px;min-width:133px;min-height:64px;padding:12px 18px;background:var(--gradient);border:0;border-radius:15px;color:#fff;font-weight:700;font-size:21px;box-shadow:inset 0 1px 1px #fff2,0 7px 16px #855aee10}.copy-button svg{width:28px;height:28px;stroke-width:2}.copy-button:disabled{opacity:.45}.copy-button.is-copied{background:linear-gradient(115deg,#218b7f,#19a9a1)}.password-row{grid-template-columns:30px minmax(0,1fr) 28px auto;gap:10px}.password-value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:18px}.password-value.is-masked{font:700 24px Arial,sans-serif;letter-spacing:5px;white-space:nowrap;overflow:hidden}.reveal-button{padding:3px;border:0;border-radius:7px;background:none;color:#9a91ad;display:grid;place-items:center;width:29px;height:40px}.reveal-button svg{width:20px;height:20px}.code-row{position:relative;overflow:hidden;padding-bottom:19px;row-gap:11px}.verification-code{color:var(--ink);font-size:35px;letter-spacing:1px;line-height:1.1;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}.code-row.is-stale .verification-code{color:#9691ac;font-size:28px;letter-spacing:4px}.countdown{grid-column:2/-1;display:flex;align-items:center;gap:10px;color:#79738b;font-size:17px;padding:1px 0 1px;min-height:27px}.countdown svg{color:#21966a;width:24px;height:24px}.countdown strong{font-variant-numeric:tabular-nums;color:#17845c;font-weight:700}.code-progress{position:absolute;bottom:0;left:0;display:block;width:100%;height:3px;border:0;appearance:none;-webkit-appearance:none;background:#ede9fc;color:#a59cf6}.code-progress::-webkit-progress-bar{background:#ede9fc}.code-progress::-webkit-progress-value{background:linear-gradient(90deg,#b8a0ff,#68cbfc)}.code-progress::-moz-progress-bar{background:#a79af6}
.account-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:23px 5px 0;color:#8b83a0;font-size:12px}.signed-in{min-width:0;overflow-wrap:anywhere}.signed-in strong{font-weight:600;color:#716683}.signout-button{display:flex;align-items:center;gap:6px;flex:none;color:#776d93;border:0;background:none;border-radius:7px;font-size:12px;padding:6px 0 6px 8px;min-height:32px}.signout-button svg{width:16px;height:16px}.message{font-size:14px;line-height:1.5;margin-top:16px}.error-message{background:#fff4f8;border:1px solid #edd1df;border-radius:12px;color:var(--danger);padding:11px 15px}.toast{position:fixed;z-index:20;bottom:max(23px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 36px);padding:13px 22px;border:1px solid #ffffffa6;border-radius:15px;background:#27164aeb;color:#fff;box-shadow:0 10px 35px #48317444;text-align:center;font-size:14px;line-height:1.4;backdrop-filter:blur(12px)}.clipboard-helper{position:fixed;left:-10000px;top:0;opacity:0;font-size:16px}

@media(max-width:700px){.page-shell{padding:42px 20px 66px}.login-card{max-width:500px;padding:35px 18px 43px;border-radius:33px}.login-card>.shield-tile{width:106px;height:106px;border-radius:29px;margin-bottom:26px}.login-card>.shield-tile svg{width:68px;height:68px}.login-card h1{font-size:clamp(25px,6.15vw,35px);letter-spacing:-.7px}.login-intro{margin-top:29px}.login-intro h2{font-size:clamp(22px,5.3vw,29px)}.login-intro p{font-size:clamp(16px,3.8vw,20px)}.login-card form{margin-top:27px}.username-field{padding:17px;border-radius:21px}.username-field label{font-size:18px;margin-bottom:10px}.username-field input{height:58px;font-size:20px;padding:15px 18px;border-radius:15px}.continue-button{min-height:64px;font-size:25px;margin-top:23px}.account-card{max-width:570px;padding:32px 23px 18px;border-radius:32px}.account-header{margin:0 0 31px;gap:13px}.account-header .shield-tile{height:79px;width:79px;border-radius:22px}.account-header .shield-tile svg{height:51px;width:51px}.account-header h1{font-size:clamp(20px,5.3vw,31px);letter-spacing:-.75px}.connection-status{font-size:clamp(12px,3.1vw,16px);gap:10px;margin-top:8px;white-space:nowrap}.status-dot{width:11px;height:11px;box-shadow:0 0 0 4px #78daa454}.credential-group h2{font-size:21px;margin-bottom:11px}.credential-row{padding:8px 8px 8px 17px;gap:12px;grid-template-columns:26px minmax(0,1fr) auto;min-height:79px;border-radius:21px}.credentials{gap:24px}.field-icon{width:25px;height:25px}.credential-value{font-size:19px}.copy-button{min-width:108px;min-height:59px;font-size:18px;padding:11px 14px;gap:8px;border-radius:14px}.copy-button svg{width:25px;height:25px}.password-row{grid-template-columns:26px minmax(0,1fr) 24px auto;gap:7px}.password-value{font-size:16px}.password-value.is-masked{font-size:21px;letter-spacing:3px}.reveal-button{width:24px}.verification-code{font-size:30px}.code-row{padding-bottom:18px;row-gap:10px}.countdown{font-size:15px;gap:8px}.countdown svg{width:22px;height:22px}.account-footer{font-size:11px;margin-top:20px}.signout-button{font-size:11px}}
@media(max-width:430px){.page-shell{padding:30px 17px 55px}.account-card{padding:29px 19px 17px}.account-header{gap:11px}.account-header .shield-tile{width:65px;height:65px;border-radius:18px}.account-header .shield-tile svg{width:44px;height:44px}.account-header h1{font-size:23px;letter-spacing:-.75px}.connection-status{font-size:12px;gap:8px}.credential-row{padding-left:12px;gap:9px;grid-template-columns:22px minmax(0,1fr) auto}.credential-value{font-size:17px}.field-icon{width:22px;height:22px}.copy-button{min-width:89px;min-height:55px;padding:10px 12px;font-size:16px;gap:7px}.copy-button svg{width:23px;height:23px}.password-row{grid-template-columns:22px minmax(0,1fr) 22px auto;gap:6px}.password-value{font-size:14px}.password-value.is-masked{font-size:19px;letter-spacing:2px}.reveal-button{width:22px}.verification-code{font-size:27px;letter-spacing:.3px}.countdown{font-size:14px}.countdown svg{width:20px;height:20px}.credential-group h2{font-size:19px}.credentials{gap:22px}}
@media(max-width:360px){.page-shell{padding:25px 12px 52px}.login-card{padding-left:15px;padding-right:15px}.account-card{padding:25px 14px 14px}.account-header h1{font-size:20px}.connection-status{font-size:10px}.account-header .shield-tile{width:58px;height:58px;border-radius:16px}.account-header .shield-tile svg{height:39px;width:39px}.copy-button{min-width:77px;font-size:14px;padding:9px;gap:5px}.copy-button svg{width:20px;height:20px}.credential-value{font-size:15px}.verification-code{font-size:25px}.password-value.is-masked{font-size:18px;letter-spacing:1px}.password-row{gap:5px}.credential-row{padding-left:10px}.countdown{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Mobile: images/IMG_Mobile.jpg. Desktop: IMG_Desktop.webp with IMG_Desktop.PNG fallback. */
.scene-picture{display:block;width:100%;height:100%}
.scene-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none}

/* Compact cards leave the products around the background's central space visible. */
.scene { z-index: 0; }
.page-shell { z-index: 1; padding: 88px 24px 88px; }
.access-card { border-radius: 26px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.login-card { max-width: 390px; padding: 26px 24px 28px; }
.login-card > .shield-tile { width: 68px; height: 68px; border-radius: 20px; margin-bottom: 16px; }
.login-card > .shield-tile svg { width: 43px; height: 43px; }
.login-card h1 { font-size: 26px; letter-spacing: -.6px; }
.login-intro { margin-top: 18px; }
.login-intro h2 { font-size: 21px; }
.login-intro p { font-size: 14px; margin-top: 6px; }
.login-card form { margin-top: 20px; }
.username-field { padding: 13px; border-radius: 17px; }
.username-field label { font-size: 15px; margin: 0 0 8px 2px; }
.username-field input { height: 46px; padding: 11px 13px; font-size: 16px; border-radius: 12px; }
.continue-button { min-height: 48px; margin-top: 16px; font-size: 20px; border-radius: 26px; }
.account-card { max-width: 470px; padding: 24px 22px 18px; }
.account-header { gap: 12px; margin: 0 0 22px; }
.account-header .shield-tile { width: 54px; height: 54px; border-radius: 16px; }
.account-header .shield-tile svg { width: 35px; height: 35px; }
.account-header h1 { font-size: 25px; letter-spacing: -.6px; }
.connection-status { font-size: 12px; gap: 8px; margin-top: 6px; }
.status-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px #78daa454; }
.credentials { gap: 17px; }
.credential-group h2 { font-size: 16px; letter-spacing: -.2px; margin: 0 2px 8px; }
.credential-row { min-height: 60px; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 9px; padding: 6px 6px 6px 12px; border-radius: 16px; }
.field-icon { width: 20px; height: 20px; }
.credential-value { font-size: 18px; }
.email-value { --email-font-size: 18; white-space: nowrap; overflow: hidden; overflow-wrap: normal; letter-spacing: -.2px; }
.copy-button { min-width: 80px; min-height: 44px; padding: 9px 12px; gap: 6px; font-size: 15px; border-radius: 11px; }
.copy-button svg { width: 19px; height: 19px; }
.password-row { grid-template-columns: 20px minmax(0, 1fr) 24px auto; gap: 7px; }
.password-value { font-size: 14px; }
.password-value.is-masked { font-size: 20px; letter-spacing: 2px; }
.reveal-button { width: 24px; height: 40px; }
.reveal-button svg { width: 20px; height: 20px; }
.verification-code { font-size: 28px; letter-spacing: .5px; }
.code-row { padding-bottom: 12px; row-gap: 5px; }
.countdown { font-size: 12px; gap: 7px; min-height: 20px; }
.countdown svg { width: 18px; height: 18px; }
.account-footer { margin: 15px 2px 0; font-size: 10px; }
.signout-button { min-height: 32px; font-size: 10px; }
.message { font-size: 12px; margin-top: 12px; }
.subscription-summary { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #dcd7f1; border-radius: 15px; background: #f5f2ffb3; color: #63528e; }
.subscription-summary > svg { width: 22px; height: 22px; }
.subscription-summary > div { min-width: 0; }
.subscription-summary h2 { font-size: 12px; font-weight: 400; line-height: 1.4; }
.subscription-summary p { margin-top: 3px; font-size: 16px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.subscription-summary.is-expired { color: var(--danger); border-color: #edd1df; background: #fff4f8; }
.subscription-ended { padding: 23px 16px; border: 1px solid #edd1df; border-radius: 17px; text-align: center; background: #fff4f8; }
.subscription-ended h2 { color: var(--danger); font-size: 21px; line-height: 1.6; }
.subscription-ended p { margin: 8px 0 17px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.renew-button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 46px; padding: 11px 15px; border-radius: 12px; background: #137b4a; color: #fff; text-decoration: none; font-size: 16px; line-height: 1.5; }
.renew-button:hover { background: #106b40; }
.renew-button:focus-visible { outline: 3px solid #361fc0; outline-offset: 4px; }

@media (max-width: 700px) {
    .page-shell { padding: max(90px, 27svh) 24px max(64px, 12svh); }
    .access-card { border-radius: 23px; }
    .login-card { max-width: 330px; padding: 20px 18px 22px; }
    .login-card > .shield-tile { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 12px; }
    .login-card > .shield-tile svg { width: 34px; height: 34px; }
    .login-card h1 { font-size: 22px; }
    .login-intro { margin-top: 14px; }
    .login-intro h2 { font-size: 18px; }
    .login-intro p { font-size: 12px; }
    .login-card form { margin-top: 16px; }
    .username-field { padding: 10px; border-radius: 14px; }
    .username-field label { font-size: 13px; margin-bottom: 6px; }
    .username-field input { height: 44px; font-size: 16px; }
    .continue-button { min-height: 44px; font-size: 18px; margin-top: 12px; }
    .account-card { max-width: 350px; padding: 14px 14px 10px; }
    .account-header { gap: 9px; margin-bottom: 10px; }
    .account-header .shield-tile { width: 40px; height: 40px; border-radius: 13px; border-width: 2px; }
    .account-header .shield-tile svg { width: 27px; height: 27px; }
    .account-header h1 { font-size: 20px; letter-spacing: -.4px; }
    .subscription-summary { gap: 8px; margin-bottom: 11px; padding: 8px 10px; border-radius: 12px; }
    .subscription-summary > svg { width: 19px; height: 19px; }
    .subscription-summary h2 { font-size: 10px; }
    .subscription-summary p { font-size: 13px; margin-top: 2px; }
    .subscription-ended { padding: 19px 12px; border-radius: 13px; }
    .subscription-ended h2 { font-size: 19px; }
    .subscription-ended p { font-size: 13px; }
    .renew-button { font-size: 15px; }
    .connection-status { font-size: 10px; gap: 6px; margin-top: 4px; white-space: normal; }
    .status-dot { width: 7px; height: 7px; }
    .credentials { gap: 8px; }
    .credential-group h2 { font-size: 14px; margin-bottom: 4px; }
    .credential-row { min-height: 50px; padding: 2px 4px 2px 8px; gap: 6px; grid-template-columns: 17px minmax(0, 1fr) auto; border-radius: 13px; }
    .field-icon { width: 17px; height: 17px; }
    .email-value { --email-font-size: 15; font-size: 15px; }
    .copy-button { min-width: 70px; padding: 8px; font-size: 13px; gap: 5px; }
    .copy-button svg { width: 17px; height: 17px; }
    .password-row { grid-template-columns: 17px minmax(0, 1fr) 22px auto; gap: 5px; }
    .password-value { font-size: 13px; }
    .password-value.is-masked { font-size: 17px; letter-spacing: 1px; }
    .reveal-button { width: 22px; }
    .reveal-button svg { width: 18px; height: 18px; }
    .verification-code { font-size: 24px; letter-spacing: .3px; }
    .code-row { padding-bottom: 6px; row-gap: 3px; }
    .countdown { min-height: 18px; font-size: 11px; gap: 5px; }
    .countdown svg { width: 16px; height: 16px; }
    .account-footer { margin-top: 6px; gap: 6px; font-size: 9px; }
    .signout-button { min-height: 28px; font-size: 9px; }
}
@media (max-width: 360px) {
    .page-shell { padding-inline: 17px; }
    .account-card { padding-inline: 11px; }
    .account-header h1 { font-size: 18px; }
    .connection-status { font-size: 9px; }
    .login-card { padding-inline: 15px; }
    .login-card h1 { font-size: 21px; }
}
@media (max-height: 550px) and (max-width: 700px) {
    .page-shell { padding-block: 78px 36px; }
}

/* Translucent glass with dark text stays readable over the decorative background. */
.services-link {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 98px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1.5px solid #ffffffcc;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .64), rgba(238, 231, 255, .60));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #2d1453;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffffa6;
    box-shadow: 0 0 0 2px #b69aef85, 0 5px 16px #623be926, inset 0 2px 4px #ffffffb3, inset 0 -2px 3px #9c78d633;
    transition: transform .15s ease, background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.services-link-icon { width: 18px; height: 18px; stroke-width: 1.9; }
.services-link:visited { color: #2d1453; }
.services-link:hover { background-color: #ffffff26; }
.services-link:active { transform: translateY(1px); }
.services-link:focus-visible { outline: 3px solid #361fc0; outline-offset: 4px; }