:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #615b6a; background: #faf9fc; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background: #faf9fc; }
.login-shell { width: min(100%,320px); padding: 24px 0; animation: arrive .35s ease-out; }
.login-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border: 1px solid #efd9e6; border-radius: 18px; background: #faeaf2; color: #bc84a5; box-shadow: 0 5px 18px #aa829210; }
.login-mark svg { width: 27px; height: 27px; fill: #f2cedf; stroke-width: 1.6; }
h1 { margin: 0 0 34px; font-size: 27px; line-height: 34px; font-weight: 600; text-align: center; }
label { display: block; margin: 18px 0 8px; color: #9d889f; font-size: 12px; }
.password-field { display: flex; align-items: center; width: 100%; height: 52px; background: #fff; border: 1px solid #e7ddea; border-radius: 8px; transition: border-color .15s,box-shadow .15s; }
.password-field:focus-within { border-color: #c69bb9; box-shadow: 0 0 0 3px #e9d5e64a; }
input { width: 100%; min-width: 0; height: 100%; padding: 0 15px; border: 0; outline: none; background: transparent; color: #615b6a; font: 16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#passwordVisibility { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 0; background: transparent; color: #ac91ae; border-radius: 6px; }
#passwordVisibility:hover { color: #8c6686; background: #faf5fa; }
#passwordVisibility svg { width: 19px; height: 19px; stroke-width: 1.6; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; margin-top: 20px; padding: 12px; border: 1px solid #b985a4; border-radius: 8px; background: #be8eac; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 5px 14px #9c6b8b1a; transition: background .15s,transform .15s; }
.login-submit svg { width: 18px; height: 18px; stroke-width: 1.6; }
.login-submit:hover { background: #b47e9e; }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { opacity: .7; cursor: wait; }
button:focus-visible { outline: 2px solid #9a7499; outline-offset: 3px; }
.login-error { margin: 12px 0 0; font-size: 12px; color: #ad567b; line-height: 18px; }
[hidden] { display: none !important; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }