:root {
    color-scheme: light;
    font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-synthesis: none;
    --page: #f1f5fc;
    --text: #273755;
    --muted: #75849c;
    --quiet: #96a5bc;
    --accent: #366ce9;
    --button: #3669e6;
    --button-hover: #2c5ed7;
    --panel: #ffffffbd;
    --field: #f5f8ff;
    --field-focus: #fff;
    --line: #8da6d12e;
    --line-focus: #85a9fa;
    --hero-start: #eaf2ff;
    --hero-end: #dfeaff;
    --chip: #ffffffdb;
    --shadow: 0 28px 90px #365e9f0e, 0 4px 20px #365e9f06, inset 0 1px 0 #ffffff;
    --success: #3b9980;
    --error: #cb5366;
    color: var(--text);
    background: var(--page);
}
:root[data-theme=dark] {
    color-scheme: dark;
    --page: #0d1421;
    --text: #e0e9fc;
    --muted: #a0afc9;
    --quiet: #7e90ae;
    --accent: #94b8ff;
    --button: #4075ea;
    --button-hover: #5485ee;
    --panel: #182338d6;
    --field: #111d32;
    --field-focus: #15243c;
    --line: #a0bbf026;
    --line-focus: #698fcf;
    --hero-start: #203758;
    --hero-end: #14233c;
    --chip: #273a55e8;
    --shadow: 0 28px 90px #03071238, 0 4px 20px #03071220, inset 0 1px 0 #a4c4ff0a;
    --success: #83c5ad;
    --error: #ef9ba9;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #8fb5ff; outline-offset: 4px; }
.auth-page { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--page); transition: background-color .25s; }
.auth-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(72px); animation: ambient-drift 20s ease-in-out infinite alternate; }
.ambient-orb-blue { top: -210px; left: -90px; width: 700px; height: 700px; background: #b8d2ff50; }
.ambient-orb-pearl { right: -130px; bottom: -240px; width: 660px; height: 660px; background: #c2d5ff58; animation-delay: -9s; }
.backdrop-grid { position: absolute; inset: 0; background-image: linear-gradient(#7296d00b 1px, transparent 1px), linear-gradient(90deg, #7296d00b 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse at center, transparent 24%, #000 100%); }
[data-theme=dark] .ambient-orb-blue { background: #24519129; }
[data-theme=dark] .ambient-orb-pearl { background: #2954a125; }
.login-header, .login-footer { width: min(1256px, 100%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding-inline: 44px; flex: none; }
.login-header { min-height: 106px; }
.product-brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 25px; font-weight: 740; letter-spacing: -.9px; }
.product-avatar { display: block; width: 46px; height: 46px; border: 3px solid #ffffffa6; border-radius: 16px; object-fit: cover; box-shadow: 0 3px 15px #263e6711; transition: transform .25s, box-shadow .25s; }
.product-brand:hover .product-avatar { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 6px 20px #365e9f1c; }
.product-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .5px; }
[data-theme=dark] .product-avatar { border-color: #31425b; }
.theme-switch { display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: 0 4px 14px #263e6704; backdrop-filter: blur(16px); }
.theme-switch button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--quiet); transition: color .2s, background .2s, transform .2s, box-shadow .2s; }
.theme-switch button:hover { color: var(--accent); transform: translateY(-1px); }
.theme-switch button[aria-pressed=true] { color: var(--accent); background: #e4edff; box-shadow: 0 2px 5px #365e9f0a; }
[data-theme=dark] .theme-switch button[aria-pressed=true] { background: #344d74; }
.theme-switch svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(1096px, calc(100% - 96px)); min-height: 596px; margin: auto; padding: 12px; border: 1px solid var(--line); border-radius: 32px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(28px); }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; padding: 38px 40px 24px; border: 1px solid #ffffff48; border-radius: 23px; background: linear-gradient(145deg, var(--hero-start), var(--hero-end)); animation: story-enter .8s ease-out both; }
.auth-story::after { content: ''; position: absolute; width: 360px; height: 360px; top: -200px; right: -130px; border: 1px solid #ffffff69; border-radius: 50%; box-shadow: 0 0 0 55px #ffffff0e, 0 0 0 110px #ffffff08; pointer-events: none; }
[data-theme=dark] .auth-story { border-color: #789ccd12; }
[data-theme=dark] .auth-story::after { border-color: #a4c5ff13; box-shadow: 0 0 0 55px #d3e3ff03, 0 0 0 110px #d3e3ff02; }
.story-decoration { display: flex; gap: 5px; margin-bottom: 25px; }
.story-decoration i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .25; }
.story-decoration i:first-child { width: 21px; border-radius: 5px; opacity: .75; }
.auth-story h2 { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: clamp(31px, 3vw, 39px); line-height: 1.55; font-weight: 650; letter-spacing: .5px; }
.headline-accent { color: var(--accent); white-space: nowrap; }
.story-bottom { display: flex; align-items: center; gap: 14px; height: 22px; margin-top: 4px; color: var(--accent); opacity: .45; }
.story-line { height: 1px; width: 42px; background: currentColor; }
.story-star { font-size: 19px; }
.auth-card { width: 100%; min-width: 0; align-self: center; padding: 38px 44px; animation: card-enter .75s .1s ease-out both; }
.card-topline { margin-bottom: 23px; }
.access-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #d2dfff; border-radius: 16px; background: linear-gradient(145deg, #f8fbff, #e3edff); color: var(--accent); box-shadow: 0 4px 12px #3c6fde0a, inset 0 1px 0 #fff; }
.access-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-theme=dark] .access-icon { background: linear-gradient(145deg, #2d456b, #233856); border-color: #4b679244; box-shadow: 0 4px 12px #0000000a, inset 0 1px 0 #b2ceff0c; }
h1 { margin: 0 0 10px; color: var(--text); font-size: 30px; font-weight: 650; letter-spacing: .6px; line-height: 1.5; }
.intro { margin: 0 0 30px; color: var(--muted); font-size: 12px; line-height: 1.7; }
form label { display: block; color: var(--text); font-size: 12px; font-weight: 550; }
form > label, .field-group > label { margin-bottom: 9px; }
.password-field { position: relative; display: flex; align-items: center; min-height: 53px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); transition: border-color .22s, background-color .22s, box-shadow .22s, transform .22s; }
.password-field:hover { border-color: #8faee062; }
.password-field:focus-within { border-color: var(--line-focus); background: var(--field-focus); box-shadow: 0 0 0 4px #6798f60c, 0 3px 12px #326cd808; transform: translateY(-1px); }
.field-icon { width: 18px; height: 18px; margin-left: 16px; color: var(--quiet); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: color .2s; }
.password-field:focus-within .field-icon { color: var(--accent); }
.password-field input { min-width: 0; width: 100%; height: 51px; padding: 12px 11px; color: var(--text); border: 0; border-radius: 12px; outline: none; background: transparent; font-size: 13px; letter-spacing: .5px; }
.password-field input::placeholder { color: var(--quiet); font-size: 12px; letter-spacing: 0; }
.visibility-toggle { display: grid; place-items: center; flex: none; width: 39px; height: 39px; margin-right: 6px; padding: 10px; border: 0; border-radius: 10px; color: var(--quiet); background: transparent; transition: color .2s, background .2s; }
.visibility-toggle:hover { color: var(--accent); background: #7ea8f512; }
.visibility-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eye-open, .visibility-toggle[aria-pressed=true] .eye-closed { display: none; }
.visibility-toggle[aria-pressed=true] .eye-open { display: block; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 19px; }
.remember { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.remember input { width: 14px; height: 14px; margin: 0; accent-color: var(--button); cursor: pointer; }
.remember-period { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--quiet); font-size: 9px; font-weight: 400; line-height: 1.3; }
.text-button { padding: 3px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; transition: color .2s; }
.text-button:hover { color: var(--accent); }
.login-help-text { margin: 14px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); color: var(--muted); font-size: 11px; line-height: 1.9; }
.message { min-height: 20px; margin: 14px 0 13px; color: var(--error); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
button[type=submit] { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; min-height: 53px; padding: 14px 20px; overflow: hidden; border: 1px solid #6693f542; border-radius: 13px; background: linear-gradient(135deg, var(--button), #4a7bf0); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 7px 16px #3976ee22, inset 0 1px 0 #ffffff21; transition: transform .22s, box-shadow .22s, filter .22s; }
button[type=submit]::before { content: ''; position: absolute; inset: 0; transform: translateX(-110%) skewX(-15deg); background: linear-gradient(100deg, transparent, #ffffff16, transparent); transition: transform .6s ease; pointer-events: none; }
button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 10px 23px #3976ee30, inset 0 1px 0 #ffffff30; filter: brightness(1.04); }
button[type=submit]:hover::before { transform: translateX(110%) skewX(-15deg); }
button[type=submit]:active { transform: translateY(0); }
.submit-label { position: relative; }
.submit-arrow { position: relative; width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s; }
button[type=submit]:hover .submit-arrow { transform: translateX(4px); }
.submit-spinner { display: none; width: 15px; height: 15px; border: 1.5px solid #ffffff60; border-top-color: #fff; border-radius: 50%; }
button:disabled { cursor: wait; }
.is-submitting .submit-arrow { display: none; }
.is-submitting .submit-spinner { display: block; animation: orbit-spin .7s linear infinite; }
.is-submitting button[type=submit] { opacity: .8; transform: none; box-shadow: none; }
.is-success button[type=submit] { background: #3c9380; border-color: #69b49d; }
.has-error > .password-field, .password-field.is-invalid { border-color: #ce8c99; box-shadow: 0 0 0 3px #cb4d5b06; animation: field-shake .32s ease-out; }
.password-field.is-matched:not(.is-invalid) { border-color: #77b9a272; }
.login-footer { min-height: 80px; gap: 20px; color: var(--quiet); font-size: 10px; letter-spacing: .3px; }
.login-footer p { margin: 0; }
.login-footer nav { display: flex; align-items: center; gap: 18px; }
.login-footer nav > span { opacity: .5; }
.login-footer a { transition: color .2s; }
.login-footer a:hover { color: var(--accent); }

/* Creator orbit, built from local assets and lightweight CSS animation. */
.orbit-scene { position: relative; isolation: isolate; height: 310px; width: 424px; max-width: 100%; margin-top: 19px; }
.scene-grid { position: absolute; inset: 2px -20px -10px; z-index: -1; background-image: radial-gradient(#789ad54d .9px, transparent .9px); background-size: 18px 18px; mask-image: radial-gradient(ellipse, #000 16%, transparent 69%); }
.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid #86a8df3b; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-ring-outer { width: 350px; height: 250px; border-style: dashed; transform: translate(-50%, -50%) rotate(-19deg); }
.orbit-ring-inner { width: 272px; height: 196px; border-color: #90b0e74f; transform: translate(-50%, -50%) rotate(22deg); }
.orbit-trail { position: absolute; width: 238px; height: 238px; top: calc(50% - 119px); left: calc(50% - 119px); border-radius: 50%; animation: orbit-spin 32s linear infinite; }
.orbit-trail > span { display: block; width: 5px; height: 5px; margin-left: 48%; border-radius: 50%; background: #7ba6f3; box-shadow: 0 0 0 5px #8aaeed0c; }
.creator-core { position: absolute; left: calc(50% - 66px); top: calc(50% - 66px); width: 132px; height: 132px; padding: 7px; border: 1px solid #ffffffcf; border-radius: 50%; background: #fff; box-shadow: 0 14px 35px #4e77b120, 0 0 0 11px #ffffff47; transition: scale .35s, box-shadow .35s; }
.creator-core > img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; }
.orbit-scene:hover .creator-core { scale: 1.04; box-shadow: 0 18px 42px #4e77b128, 0 0 0 16px #ffffff47; }
.creator-dot { position: absolute; bottom: 8px; right: 8px; width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; background: #8dbda9; }
.platform-satellite { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 10px 16px; border: 1px solid #ffffff5c; border-radius: 17px; background: var(--chip); box-shadow: 0 9px 22px #46618c0a, inset 0 1px 0 #ffffff20; color: var(--muted); font-size: 11px; backdrop-filter: blur(10px); animation: satellite-float 6s ease-in-out infinite; transition: scale .25s; }
.platform-satellite:hover { scale: 1.06; }
.platform-satellite img { object-fit: contain; }
.satellite-bili { left: -1px; top: 54px; transform: rotate(-8deg); animation-delay: -1s; }
.satellite-douyin { right: -1px; top: 56px; transform: rotate(9deg); animation-delay: -3s; }
.satellite-xhs { right: -1px; bottom: 45px; transform: rotate(-6deg); animation-delay: -4.5s; }
.message-satellite { position: absolute; display: flex; align-items: center; gap: 10px; left: -3px; bottom: 39px; width: 126px; height: 46px; padding: 11px 13px; border: 1px solid #ffffff70; border-radius: 13px; background: var(--chip); box-shadow: 0 7px 22px #46618c07; color: #88a8df; backdrop-filter: blur(10px); animation: satellite-float 7s -2s ease-in-out infinite; }
.message-satellite > svg { width: 20px; height: 20px; }
.message-lines { display: grid; gap: 5px; flex: 1; }
.message-lines i { display: block; height: 3px; width: 100%; border-radius: 3px; background: #98b3dd5c; }
.message-lines i:last-child { width: 65%; }
.message-satellite > b { width: 4px; height: 4px; border-radius: 50%; background: #8dbda9; }
.scene-spark { position: absolute; border-radius: 50%; animation: spark-pulse 4s ease-in-out infinite; }
.spark-one { width: 6px; height: 6px; background: #dcb6a4; right: 96px; top: 23px; }
.spark-two { width: 4px; height: 4px; background: #81a5dd; left: 148px; bottom: 19px; animation-delay: -2s; }
[data-theme=dark] .creator-core { border-color: #819bc03b; background: #354d71; box-shadow: 0 14px 35px #050d1c30, 0 0 0 11px #91b5ee0b; }
[data-theme=dark] .creator-dot { border-color: #354d71; }
[data-theme=dark] .orbit-scene:hover .creator-core { box-shadow: 0 18px 42px #050d1c38, 0 0 0 16px #91b5ee0b; }
[data-theme=dark] .platform-satellite, [data-theme=dark] .message-satellite { border-color: #91b5ee18; }

/* Password settings use the same shell and field treatments. */
.security-layout { min-height: 648px; }
.security-card { padding: 27px 44px; }
.security-card .card-topline { margin-bottom: 17px; }
.security-card h1 { font-size: 27px; }
.security-card .intro { margin-bottom: 23px; }
.field-group + .field-group { margin-top: 16px; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; margin-bottom: 9px; }
.field-meta { color: var(--quiet); font-size: 10px; }
.match-caption { color: var(--success); font-size: 10px; }
.security-card .message { margin-top: 10px; margin-bottom: 12px; }
.secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.secondary-actions a, .secondary-actions button { color: var(--muted); font-size: 11px; }
.secondary-actions a:hover, .secondary-actions button:hover { color: var(--accent); }
.is-setup .secondary-actions { justify-content: flex-end; }
.security-scene { position: relative; width: 100%; height: 333px; margin-top: 18px; isolation: isolate; }
.security-halo { position: absolute; top: 50%; left: 50%; border: 1px solid #86a8df40; border-radius: 50%; }
.halo-outer { width: 286px; height: 286px; transform: translate(-50%, -50%); border-style: dashed; animation: halo-rotate 60s linear infinite; }
.halo-inner { width: 224px; height: 224px; transform: translate(-50%, -50%); background: #ffffff0a; box-shadow: 0 0 0 15px #ffffff0c; }
.shield-sculpture { position: absolute; width: 173px; height: 205px; left: calc(50% - 86px); top: 49px; transform: rotate(-9deg); filter: drop-shadow(0 19px 18px #5079be2e); animation: satellite-float 7s -2s ease-in-out infinite; transition: rotate .4s; }
.security-scene:hover .shield-sculpture { rotate: 6deg; }
.shield-sculpture svg { width: 100%; height: 100%; }
.shield-face { fill: #89b3fb5c; stroke: #ffffffcf; stroke-width: 1.5; }
.shield-inset { fill: #f2f7ff; stroke: #bed3f5; stroke-width: 1; }
.shield-shackle { stroke: #86aceb; stroke-width: 9; stroke-linecap: round; }
.shield-lock { fill: #6495ed; stroke: #ffffff8c; stroke-width: 1; }
.shield-keyhole { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.password-sculpture { position: absolute; display: flex; align-items: center; gap: 17px; width: 255px; height: 66px; padding: 15px 17px; top: 224px; left: calc(50% - 111px); border: 1px solid #ffffffb3; border-radius: 18px; background: var(--chip); box-shadow: 0 14px 30px #456fa21b; backdrop-filter: blur(16px); transform: rotate(5deg); animation: satellite-float 6s -1s ease-in-out infinite; }
.password-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #95b4ee17; color: #91afe3; }
.password-symbol svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.password-dots { display: flex; gap: 8px; }
.password-dots i { width: 5px; height: 5px; border-radius: 50%; background: #90a9cc; }
.password-check { display: grid; place-items: center; width: 25px; height: 25px; margin-left: auto; border-radius: 50%; background: #9bbdab1a; color: #7eaf99; }
.password-check svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.security-spark { position: absolute; color: #9bb7e5; animation: spark-pulse 4s ease-in-out infinite; }
.security-spark-one { left: 36px; top: 98px; font-size: 25px; }
.security-spark-two { right: 30px; top: 56px; font-size: 11px; animation-delay: -2s; }
[data-theme=dark] .shield-face { fill: #739bd544; stroke: #a5c7ff3b; }
[data-theme=dark] .shield-inset { fill: #2b4365; stroke: #6c8dbb5c; }
[data-theme=dark] .shield-lock { fill: #769fe7; stroke: #d2e4ff3b; }
[data-theme=dark] .password-sculpture { border-color: #a5c7ff2b; }

@keyframes ambient-drift { to { translate: 45px 35px; scale: 1.1; } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes halo-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes satellite-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes spark-pulse { 0%, 100% { opacity: .45; scale: .85; } 50% { opacity: 1; scale: 1; } }
@keyframes card-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-enter { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: translateX(0); } }
@keyframes field-shake { 0%, 100% { translate: 0; } 25%, 75% { translate: -3px; } 50% { translate: 3px; } }
@media (max-width: 1120px) { .auth-layout { width: calc(100% - 64px); } .auth-story { padding-inline: 30px; } .auth-card { padding-inline: 34px; } .auth-story h2 { font-size: 33px; } .orbit-scene { width: 390px; } .platform-satellite { padding-inline: 12px; gap: 6px; } }
@media (max-width: 900px) { .auth-layout { width: calc(100% - 48px); grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } .auth-story { padding-inline: 24px; } .auth-card { padding-inline: 28px; } .auth-story h2 { font-size: 29px; } .orbit-ring-outer { width: 288px; height: 225px; } .platform-satellite { padding-inline: 10px; font-size: 10px; } .platform-satellite img { width: 25px; height: 25px; } .message-satellite { width: 104px; padding-inline: 10px; } .security-card h1 { font-size: 25px; } .password-sculpture { width: 222px; left: calc(50% - 108px); gap: 12px; } .password-dots { gap: 6px; } }
@media (max-width: 760px) { .login-header, .login-footer { padding-inline: 28px; width: min(590px, 100%); } .login-header { min-height: 100px; } .auth-layout { display: block; width: min(430px, calc(100% - 40px)); min-height: 0; margin-block: auto; padding: 5px; border-radius: 28px; } .auth-story { display: none; } .auth-card { padding: 35px 30px; } .login-card { padding-block: 38px; } .auth-card h1 { font-size: 28px; } .security-card { padding-block: 29px; } .security-card .card-topline { display: none; } .security-card h1 { font-size: 26px; } .login-footer { min-height: 90px; } .security-layout { margin-block: 18px; } .security-page .login-footer { margin-top: auto; } }
@media (max-width: 480px) { .login-header { min-height: 94px; padding-inline: 20px; gap: 12px; } .product-brand { gap: 10px; font-size: 23px; } .product-avatar { width: 41px; height: 41px; border-radius: 14px; } .product-brand small { font-size: 9px; letter-spacing: .2px; } .theme-switch { gap: 0; padding: 4px; border-radius: 12px; } .theme-switch button { width: 26px; height: 28px; border-radius: 8px; } .theme-switch svg { width: 15px; height: 15px; } .auth-layout { width: calc(100% - 36px); border-radius: 26px; } .auth-card { padding: 30px 23px; } .login-card { padding-block: 34px; } .card-topline { margin-bottom: 21px; } .auth-card h1 { font-size: 27px; } .intro { font-size: 11px; margin-bottom: 27px; } .security-card h1 { font-size: 25px; } .security-card .intro { margin-bottom: 24px; } .field-group + .field-group { margin-top: 15px; } .login-footer { padding: 22px 25px; min-height: 93px; gap: 13px; flex-direction: column; justify-content: center; font-size: 9px; } .login-footer nav { gap: 15px; } }
@media (max-width: 359px) { .login-header { padding-inline: 16px; gap: 8px; } .product-brand { gap: 8px; } .product-avatar { width: 37px; height: 37px; } .product-brand small { font-size: 8px; } .theme-switch { padding: 3px; } .theme-switch button { width: 24px; height: 27px; } .auth-card { padding-inline: 19px; } .security-card h1 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }