/* Shared visual language: quiet glass surfaces, violet accents and the lock mark. */
:root {
  color-scheme: dark;
  --background: #09090f;
  --surface: #14141d;
  --surface-raised: #1c1c28;
  --input: #101019;
  --ink: #f5f5f8;
  --muted: #aaa9bb;
  --faint: #78788b;
  --line: #2b2b3c;
  --soft: #ffffff08;
  --teal: #bcabfb;
  --teal-dark: #a78bfa;
  --success: #80dab3;
  --error: #ffb6c6;
  --white: var(--surface);
  --c1: #a78bfa;
  --c2: #22d3ee;
  --c3: #f472b6;
  --card: #14141de8;
  --shadow: 0 24px 80px -28px #000000a6;
  --aura-o: .85;
  --grid: #ffffff07;
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --s: clamp(250px, min(42svh, 80vw), 420px);
}
:root[data-theme="light"] {
  color-scheme: light;
  --background: #f7f7fb;
  --surface: #ffffff;
  --surface-raised: #efedf7;
  --input: #f9f8fc;
  --ink: #202030;
  --muted: #696679;
  --faint: #898696;
  --line: #e2dfea;
  --soft: #26203f06;
  --teal: #6a47c8;
  --teal-dark: #5836b3;
  --success: #167d57;
  --error: #b83552;
  --card: #ffffffec;
  --shadow: 0 24px 80px -32px #685d9438;
  --aura-o: .4;
  --grid: #3e2f6b08;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; min-height: 100svh; background: var(--background); color: var(--ink); font: 14px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .35s,color .35s; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 84% 14%,#a78bfa0c,transparent 48%),radial-gradient(ellipse at 8% 88%,#22d3ee07,transparent 46%); }
a { color: inherit; text-decoration: none; }
button,input,select { font: inherit; }
button { color: inherit; }
button,select { cursor: pointer; }
button:disabled,input:disabled { cursor: not-allowed; opacity: .55; }
svg { display: block; max-width: 100%; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { color: #21182f; background: #d6c9ff; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -70px; padding: 10px 18px; background: var(--surface); border: 1px solid var(--teal); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.page-width,.site-header { width: min(1180px,calc(100% - 80px)); margin-inline: auto; }
.site-header { position: relative; z-index: 5; min-height: 88px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 0; filter: drop-shadow(0 0 10px #a78bfa55); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: grid; gap: 3px; line-height: 1.3; }
.brand-copy strong { font-size: 14px; font-weight: 600; letter-spacing: -.025em; }
.brand-copy > span { font-size: 11px; color: var(--muted); }
.primary-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.nav-link,.nav-register { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; width: 78px; padding: 8px; border: 1px solid transparent; border-radius: 999px; text-align: center; transition: color .2s,background .2s; }
.nav-link { color: var(--muted); }
.nav-link:hover,.nav-link[aria-current="page"] { color: var(--ink); background: var(--soft); }
.nav-register { width: 100px; color: var(--ink); background: var(--surface-raised); border-color: var(--line); }
.nav-register:hover { border-color: var(--teal); }
.header-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-control,.language-control { display: flex; align-items: center; gap: 6px; height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); padding: 0 10px; }
.theme-control { width: 78px; }
.language-control { width: 83px; }
.language-control > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.theme-control select,.language-control select { border: 0; width: 100%; min-width: 0; padding: 0; background: transparent; color: var(--ink); font-size: 12px; }
.theme-control option,.language-control option { background: var(--surface); color: var(--ink); }
.button { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 12px; font-weight: 600; font-size: 14px; line-height: 1.5; text-align: center; border: 1px solid transparent; transition: background .2s,transform .25s var(--ease),box-shadow .25s,border-color .2s; }
.button:active:not(:disabled) { transform: scale(.98); }
.button-primary { background: var(--ink); color: var(--background); border-color: var(--ink); }
.button-primary:hover:not(:disabled) { box-shadow: 0 8px 28px -10px #a78bfa99; transform: translateY(-1px); }
.button-secondary { background: var(--soft); color: var(--ink); border-color: var(--line); }
.button-secondary:hover:not(:disabled) { background: var(--surface-raised); border-color: var(--teal); }
.full-width { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 8px 0; }
.text-link:hover { color: var(--teal); }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 600; color: var(--teal); letter-spacing: .06em; }
.small-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.auth-layout { display: flex; justify-content: center; align-items: flex-start; padding-block: clamp(24px,4svh,50px) 64px; }
.auth-card { position: relative; width: 100%; max-width: 450px; min-width: 0; padding: 34px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: var(--shadow); animation: enter .45s var(--ease) both; }
.auth-card::before { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent); }
.auth-card h1 { margin: 12px 0 10px; font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.auth-card h2 { margin: 12px 0 10px; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -.03em; }
.auth-card-heading { text-align: center; margin-bottom: 24px; }
.auth-logo { width: 36px; height: 36px; margin: 0 auto 14px; filter: drop-shadow(0 0 14px #a78bfa60); }
.card-intro,.section-description { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 24px; border: 1px solid var(--line); background: var(--soft); border-radius: 12px; }
.auth-tabs a { display: flex; justify-content: center; align-items: center; min-height: 36px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.auth-tabs a[aria-current="page"] { background: var(--surface-raised); color: var(--ink); }
.form-field { margin-bottom: 17px; min-width: 0; }
.form-field > label,.vault-field-label { display: inline-block; margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 500; }
.form-field input,.vault-toolbar input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; color: var(--ink); background: var(--input); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; transition: border-color .2s,box-shadow .2s; }
.form-field input::placeholder,.vault-toolbar input::placeholder { color: var(--faint); opacity: 1; }
.form-field input:focus,.vault-toolbar input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #a78bfa15; outline: none; }
.form-field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100px var(--input) inset; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle { position: absolute; top: 6px; bottom: 6px; right: 6px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; }
.password-toggle:hover { background: var(--surface-raised); color: var(--ink); }
.field-hint,.password-hint { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 7px 0 0; }
.checkbox-label { display: flex; align-items: flex-start; gap: 9px; width: fit-content; margin: 6px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.7; cursor: pointer; }
.checkbox-label input { flex-shrink: 0; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--teal); }
.turnstile-field { min-width: 0; margin: 0 0 20px; }
.turnstile-label { margin: 0 0 9px; color: var(--muted); font-size: 13px; font-weight: 500; }
.turnstile-widget { width: 100%; max-width: 100%; min-width: 0; min-height: 65px; overflow-x: auto; }
.turnstile-status { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.submit-button { width: 100%; margin-top: 4px; }
.form-footer { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.form-footer a { color: var(--teal); margin-left: 3px; font-weight: 550; }
.form-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.back-home { display: flex; justify-content: center; gap: 7px; align-items: center; padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.recovery-link { display: flex; margin: 12px auto 0; justify-content: center; }
.form-status { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
[data-state="error"] { color: var(--error); }
.form-status[data-state="error"] { color: var(--error); background: #d23b6410; border-color: #d23b6440; }
[data-state="success"] { color: var(--success); }
.form-status[data-state="success"] { color: var(--success); background: #20a77a10; border-color: #20a77a40; }
[data-state="pending"] { color: var(--teal); }
.form-status[data-state="pending"] { color: var(--teal); background: #a78bfa0b; border-color: #a78bfa38; }
.account-welcome { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.account-avatar,.credential-emblem { display: grid; place-items: center; flex-shrink: 0; color: var(--teal); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; }
.account-avatar { width: 44px; height: 44px; }
.account-avatar svg { width: 24px; height: 24px; }
.account-welcome p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.account-welcome h2,.account-welcome h3 { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.account-details { margin: 0; border-top: 1px solid var(--line); }
.account-details > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.account-details dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.account-details dd { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.account-layout { max-width: 680px; }
.account-settings { display: grid; gap: 22px; }
.account-section,.danger-zone { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-section h3 { margin: 8px 0 9px; font-size: 20px; font-weight: 600; }
.account-action-panel { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--soft); }
.danger-zone button { color: var(--error); }
.stack-actions { display: flex; flex-direction: column; gap: 10px; }
.cloud-panel { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 9px 11px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); margin-top: 24px; }
.cloud-icon { width: 22px; color: var(--teal); margin-top: 2px; }
.cloud-panel h3 { margin: 0 0 5px; font-size: 14px; font-weight: 550; }
.profile-status { margin: 0; font-size: 12px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.cloud-panel .button { grid-column: 2; justify-self: start; min-height: 36px; padding: 7px 12px; font-size: 12px; }
.logout-button,.vault-entry { width: 100%; margin-top: 22px; }
.vault-entry + .logout-button { margin-top: 10px; }
.vault-layout { padding-block: 36px 64px; min-height: calc(100svh - 88px); }
.vault-gate { max-width: 500px; margin: 30px auto; }
#vaultDashboard { animation: enter .4s var(--ease) both; }
.vault-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.vault-heading h1 { margin: 0 0 8px; font-size: clamp(28px,4vw,40px); font-weight: 600; line-height: 1.25; letter-spacing: -.04em; }
.vault-intro,.vault-greeting { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.vault-tools,.vault-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vault-toolbar { margin: 26px 0; }
.vault-toolbar input { flex: 1; min-width: 180px; }
.vault-search-wrap { flex: 1; min-width: 200px; }
.vault-search-wrap input { width: 100%; }
.vault-tool-label { color: var(--muted); font-size: 13px; }
.vault-protection-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.vault-group { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.security-summary { color: var(--muted); font-size: 13px; line-height: 1.7; }
.vault-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.vault-section-heading h2 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.03em; }
.credential-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 20px 0; }
.credential-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--line); background: var(--card); border-radius: 16px; transition: border-color .2s,background .2s; }
.credential-card:hover { border-color: #a78bfa66; background: var(--surface); }
.credential-emblem { width: 42px; height: 42px; font-size: 17px; font-weight: 600; }
.credential-card-copy { flex: 1; min-width: 0; }
.credential-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.credential-card p,.credential-card-copy > span { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.credential-count { display: inline-block; padding: 2px 8px; font-size: 12px; margin-left: 9px; color: var(--teal); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 6px; vertical-align: middle; }
.vault-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 310px; padding: 48px 24px; text-align: center; border: 1px dashed var(--line); border-radius: 24px; background: var(--soft); }
.vault-empty h3 { margin: 20px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.vault-empty p { max-width: 380px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.empty-add { width: 74px; height: 74px; font-size: 36px; border: 1px solid #a78bfa44; border-radius: 24px; color: var(--teal); background: var(--surface-raised); cursor: pointer; transition: transform .25s var(--spring),box-shadow .25s; }
.empty-add:hover { transform: scale(1.06); box-shadow: 0 10px 40px -16px #a78bfa66; }
.vault-load-more { display: flex; margin: 22px auto 0; }
.credential-dialog { width: min(510px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 40px); overflow-y: auto; margin: auto; color: var(--ink); }
.credential-dialog::backdrop { background: #08081288; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.credential-dialog .vault-section-heading { margin-bottom: 0; }
.credential-dialog h2 { font-size: 25px; }
.slide-dialog[open] { animation: panel-in .3s var(--ease); }
.credential-details { margin-top: 20px; }
.credential-details a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.credential-detail-note { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 20px 0 0; }
.generated-password { display: block; margin: 24px 0; padding: 18px; background: var(--input); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; font: 19px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.protection-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.protection-option { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 18px; padding: 20px 16px; background: var(--soft); color: var(--ink); transition: background .2s,border-color .2s; }
.protection-option:hover:not(:disabled) { border-color: var(--teal); background: var(--surface-raised); }
.protection-option strong { font-size: 15px; font-weight: 600; }
.protection-option p,.protection-option span { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.protection-option svg { width: 28px; height: 28px; color: var(--teal); }
.dialog-actions,.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dialog-actions > .button,.form-actions > .button { flex: 1; }
.page-loader { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--background); }
.loading-lock { width: 34px; height: 34px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-status[data-state="pending"]::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; margin-right: 9px; vertical-align: -2px; animation: spin .8s linear infinite; }
.skeleton { border-radius: 8px; background: linear-gradient(100deg,var(--surface-raised) 25%,var(--line) 50%,var(--surface-raised) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease infinite; }
.bot-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.qa-banner { padding: 9px 20px; text-align: center; background: #443818; border-bottom: 1px solid #806c30; color: #ffe6a1; font-size: 12px; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
/* Homepage artwork is adapted from the supplied design; it does not control authentication. */
#particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 55% at 50% 45%,#000 20%,transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%,#000 20%,transparent 75%); }
.home-main { position: relative; z-index: 1; min-height: calc(100svh - 88px); display: grid; align-items: center; }
.hero-centered { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; padding-block: 25px 40px; }
.home-title { height: 2.2em; margin: 0 0 8px; font-size: clamp(36px,5vw,60px); font-weight: 600; letter-spacing: -.055em; line-height: 1.08; }
.home-title > span { display: block; }
:root[lang="zh-CN"] .home-title { letter-spacing: -.025em; }
.grad-text { background: linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-shift 8s linear infinite; }
.home-actions { display: flex; justify-content: center; gap: 12px; min-height: 48px; margin-top: 2px; }
.home-actions .button { min-width: 135px; min-height: 48px; border-radius: 999px; }
.stage { --rx: 0deg; --ry: 0deg; --mx: 0px; --my: 0px; position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; perspective: 900px; }
.stage > * { grid-area: 1 / 1; }
.aura { width: 92%; height: 92%; border-radius: 50%; background: radial-gradient(circle at 40% 40%,#a78bfa8c,transparent 55%),radial-gradient(circle at 62% 60%,#22d3ee61,transparent 55%),radial-gradient(circle at 50% 50%,#f472b638,transparent 65%); filter: blur(38px); opacity: var(--aura-o); transform: translate(var(--mx),var(--my)); animation: breathe 7s ease-in-out infinite,hue 14s linear infinite; }
.pulse { width: 46%; height: 46%; border-radius: 50%; border: 1px solid #a78bfa80; opacity: 0; animation: pulse 6s cubic-bezier(.2,.6,.3,1) infinite; }
.p2 { animation-delay: 2s; border-color: #22d3ee73; }
.p3 { animation-delay: 4s; border-color: #f472b666; }
.orbits { width: 100%; height: 100%; animation: spin 90s linear infinite; overflow: visible; }
.orbit { fill: none; stroke: var(--line); }
.o1 { stroke-dasharray: 1 8; stroke-linecap: round; stroke-width: 1.4; }
.o2 { stroke: var(--line); stroke-width: 1; }
.track { position: relative; border-radius: 50%; animation: spin 16s linear infinite; }
.t1 { width: 80%; height: 80%; }
.t2 { width: 97.6%; height: 97.6%; animation-duration: 28s; animation-direction: reverse; }
.dot { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--c2),0 0 24px 6px #22d3ee80; }
.t2 .dot { box-shadow: 0 0 10px 2px var(--c3),0 0 24px 6px #f472b673; width: 4px; height: 4px; margin-left: -2px; top: -2px; }
.ring { width: 64%; height: 64%; border-radius: 50%; background: conic-gradient(from 0deg,transparent 0 8%,var(--c1) 25%,var(--c2) 42%,var(--c3) 55%,transparent 70% 100%); -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); animation: spin 7s linear infinite; }
.ring-blur { filter: blur(10px); opacity: .85; -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 4px)); mask: radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 4px)); }
.floor { align-self: end; width: 46%; height: 8%; margin-bottom: 10%; border-radius: 50%; background: radial-gradient(ellipse,#a78bfa8c,#22d3ee33 45%,transparent 70%); filter: blur(12px); opacity: var(--aura-o); animation: floor-pulse 6s ease-in-out infinite; }
.lock-tilt { transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); z-index: 2; }
.lock { width: calc(var(--s) * .36); aspect-ratio: 200 / 240; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 0 22px #a78bfa8c) drop-shadow(0 18px 50px #22d3ee47); }
:root[data-theme="light"] .lock { filter: drop-shadow(0 10px 24px #6366f159) drop-shadow(0 22px 50px #22d3ee33); }
.lock-svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 70%; }
.shackle { transition: transform .9s var(--spring); }
.stage:hover .shackle { transform: translateY(-5px); }
.sheen { transform-box: fill-box; transform-origin: center; animation: sheen 5.5s var(--ease) infinite; }
.key-glow { transform-box: fill-box; transform-origin: center; animation: key-glow 3s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes breathe { 0%,100% { scale: .9; } 50% { scale: 1.06; } }
@keyframes hue { to { filter: blur(38px) hue-rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(.85); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(2.15); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floor-pulse { 0%,100% { transform: scaleX(1); opacity: calc(var(--aura-o) * .9); } 50% { transform: scaleX(.82); opacity: calc(var(--aura-o) * .55); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sheen { 0% { transform: translateX(0) skewX(-20deg); } 45%,100% { transform: translateX(300px) skewX(-20deg); } }
@keyframes key-glow { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes grad-shift { to { background-position: 300% 0; } }
@media(max-width:1050px) { .page-width,.site-header { width: calc(100% - 48px); }.site-header { gap: 14px; }.brand-copy strong { font-size: 13px; }.primary-nav { gap: 2px; }.nav-link { width: 65px; }.nav-register { width: 92px; } }
@media(max-width:900px) { .site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding-block: 18px 12px; min-height: 120px; }.primary-nav { grid-row: 2; grid-column: 1 / -1; justify-content: center; gap: 10px; }.header-controls { grid-row: 1; grid-column: 2; }.brand-copy strong { font-size: 14px; }.home-main { min-height: calc(100svh - 120px); }.vault-heading { align-items: flex-start; }.vault-tools { max-width: 300px; justify-content: flex-end; }.vault-layout { padding-top: 28px; } }
@media(max-width:600px) { .page-width,.site-header { width: calc(100% - 32px); }.site-header { gap: 12px; }.brand { gap: 8px; }.brand-copy strong { font-size: 12px; max-width: 165px; }.brand-mark { width: 25px; height: 25px; flex-basis: 25px; }.header-controls { gap: 6px; }.theme-control { width: 68px; }.language-control { width: 74px; }.theme-control,.language-control { height: 34px; padding-inline: 8px; }.primary-nav { font-size: 12px; gap: 5px; }.nav-link { width: 70px; }.nav-register { width: 90px; }.auth-layout { padding-top: 20px; }.auth-card { padding: 28px 22px; }.auth-card h1 { font-size: 26px; }.vault-heading { display: block; }.vault-tools { margin-top: 18px; max-width: none; justify-content: flex-start; }.vault-toolbar input,.vault-search-wrap { flex-basis: 100%; }.vault-toolbar .button { flex: 1; padding-inline: 12px; }.vault-group { padding: 16px; }.credential-card { padding: 16px; gap: 12px; }.credential-emblem { width: 38px; height: 38px; }.credential-card .button { padding: 10px 14px; }.vault-empty { min-height: 290px; padding: 38px 18px; }.vault-empty h3 { font-size: 18px; }.credential-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 28px 22px; }.protection-options { grid-template-columns: 1fr; }.protection-option { padding: 16px; }.account-action-panel { padding: 18px; }.hero-centered { padding-block: 25px 32px; }.home-title { font-size: clamp(34px,8.6vw,44px); }.home-actions .button { min-width: 125px; padding-inline: 18px; } }
@media(max-width:380px) { .brand-copy strong { font-size: 11px; max-width: 104px; }.brand { gap: 6px; }.brand-mark { width: 23px; height: 23px; flex-basis: 23px; }.header-controls { gap: 4px; }.theme-control { width: 64px; }.language-control { width: 68px; }.theme-control select,.language-control select { font-size: 11px; }.primary-nav { gap: 2px; }.auth-card { padding: 25px 18px; }.credential-card { flex-wrap: wrap; }.credential-card .button { margin-left: 50px; }.account-welcome h2 { font-size: 18px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; }.pulse { opacity: .25; }.stage { --rx: 0deg !important; --ry: 0deg !important; --mx: 0px !important; --my: 0px !important; } }
.auth-form-options { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; margin:2px 0 20px; }
.auth-form-options .checkbox-label { margin:0; }
.auth-form-options .text-link { font-size:12px; }
.account-disclosure { border:1px solid var(--line); border-radius:16px; background:var(--soft); overflow:hidden; }
.account-disclosure summary { cursor:pointer; padding:16px 18px; color:var(--ink); font-size:14px; font-weight:550; }
.account-disclosure[open] summary { border-bottom:1px solid var(--line); }
.account-disclosure > :not(summary) { margin:18px; }
.account-disclosure .account-action-panel { margin:16px; padding:0; background:none; border:0; }
.account-disclosure.danger-zone { padding-top:0; margin-top:0; }
.account-disclosure.danger-zone summary { color:var(--error); }
.dialog-close { flex-shrink:0; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--soft); color:var(--muted); font-size:26px; line-height:1; transition:background .2s,color .2s; }
.dialog-close:hover { background:var(--surface-raised); color:var(--ink); }
.vault-secondary-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.vault-empty h2 { margin:20px 0 8px; font-size:20px; font-weight:600; letter-spacing:-.025em; }
#vaultGate { margin:24px auto; }
#gateStatus { color:var(--muted); line-height:1.75; }
.auth-form-options .recovery-link { margin:0; }
.cloud-panel { display:block; }
.cloud-panel h2 { margin:0 0 6px; font-size:16px; }
.cloud-panel .button { margin-top:12px; }
@media(max-width:600px) { .vault-empty h2 { font-size:18px; }.vault-secondary-actions { justify-content:flex-start; } }
/* Rotating decorative layers can have square transform bounds wider than
   their visible circles. Clip at the viewport, leaving the lock stage intact. */
body[data-page="home"] { overflow-x:hidden; overflow-x:clip; }
/* The supplied header uses real segmented language buttons and an icon theme picker. */
.site-header { display:flex; flex-wrap:nowrap; min-height:88px; padding-block:18px; gap:18px; }
.header-controls { display:flex; align-items:center; gap:10px; margin-left:auto; }
.brand { margin-right:auto; }
.primary-nav { display:flex; width:auto; align-items:center; gap:6px; font-size:13.5px; }
.primary-nav .nav-link { min-width:0; width:auto; min-height:36px; padding:0 12px; background:none; }
.primary-nav .nav-link:hover { background:var(--soft); }
.primary-nav .nav-link[aria-current="page"] { color:var(--ink); }
.primary-nav .nav-register { min-width:88px; width:auto; min-height:34px; padding:0 16px; border-radius:999px; background:var(--ink); border-color:var(--ink); color:var(--background); font-size:13px; font-weight:600; }
.primary-nav .nav-register:hover { box-shadow:0 8px 28px -10px #a78bfa99; }
.primary-nav a[data-i18n="common.home"] { color:var(--faint); }
.primary-nav a[data-auth-user].nav-register { color:var(--ink); border-color:var(--line); background:var(--soft); }
.language-segment { position:relative; display:grid; grid-template-columns:repeat(2,1fr); width:84px; height:36px; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--soft); flex-shrink:0; }
.language-segment button { position:relative; z-index:1; display:grid; place-items:center; width:38px; height:28px; padding:0; border:0; border-radius:999px; background:none; color:var(--muted); font-size:12px; font-weight:600; transition:color .3s var(--ease); }
.language-segment button[aria-pressed="true"] { color:var(--ink); }
.language-thumb { position:absolute; top:3px; left:3px; width:38px; height:28px; border-radius:999px; background:var(--surface-raised); transition:transform .45s var(--spring); }
.language-segment.zh .language-thumb { transform:translateX(100%); }
.theme-picker { position:relative; flex-shrink:0; }
.theme-icon-button { position:relative; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--soft); color:var(--ink); display:grid; place-items:center; transition:background .3s,transform .3s var(--ease); }
.theme-icon-button:hover { background:var(--surface-raised); }
.theme-icon-button:active { transform:scale(.92); }
.theme-icon-button svg { position:absolute; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .6s var(--spring),opacity .35s; }
:root[data-theme="dark"] .theme-moon,:root[data-theme="light"] .theme-sun { opacity:0; transform:rotate(-90deg) scale(.5); }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
@media(max-width:1050px) { .site-header { gap:12px; }.brand-copy strong { font-size:13px; }.primary-nav { gap:3px; }.primary-nav .nav-link { padding-inline:9px; } }
@media(max-width:780px) { .brand-copy { display:none; }.site-header { min-height:80px; }.home-main { min-height:calc(100svh - 80px); }.primary-nav { gap:5px; }.brand-mark { width:24px; height:24px; flex-basis:24px; } }
@media(max-width:600px) { .site-header { width:calc(100% - 40px); gap:10px; padding-block:20px; }.primary-nav a[data-i18n="common.home"] { display:none; }.primary-nav .nav-link { padding-inline:7px; font-size:13px; }.primary-nav .nav-register { min-width:78px; padding-inline:13px; }.header-controls { gap:8px; }.home-title { margin-top:0; } }
@media(max-width:380px) { .site-header { width:calc(100% - 32px); gap:8px; }.header-controls { gap:6px; }.language-segment { width:80px; }.language-segment button,.language-thumb { width:36px; }.primary-nav [data-auth-guest].nav-link { display:none; }.primary-nav [data-auth-user].nav-link { padding-inline:2px; font-size:12px; }.primary-nav [data-auth-user].nav-register { min-width:68px; padding-inline:8px; font-size:12px; }.site-header:has([data-auth-user]:not([hidden])) { flex-wrap:wrap; }.site-header:has([data-auth-user]:not([hidden])) .primary-nav { flex-basis:100%; justify-content:center; }.site-header:has([data-auth-user]:not([hidden])) .brand-copy { display:block; font-size:11px; max-width:160px; } }
@media(prefers-reduced-motion:reduce) { .language-thumb,.theme-icon-button svg,.theme-icon-button { transition:none; } }
.credential-dialog .vault-section-heading { margin-bottom:18px; }
/* Reserve text widths so translation never shifts the supplied header controls. */
.primary-nav .nav-link[data-auth-guest] { width:72px; }
.primary-nav .nav-link[data-i18n="common.home"] { width:62px; }
.primary-nav .nav-link[data-auth-user] { width:66px; }
.primary-nav .nav-register { width:92px; }
.primary-nav .nav-register[data-auth-user] { width:104px; }
@media(max-width:600px) { .primary-nav .nav-link[data-auth-guest] { width:59px; }.primary-nav .nav-register { width:78px; }.primary-nav .nav-register[data-auth-user] { width:92px; }.primary-nav .nav-link[data-auth-user] { width:56px; } }