:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
html { background: #0d4c38; }
body { color: #17201d; background: radial-gradient(circle at 85% 8%, rgba(244,184,74,.2), transparent 28rem), linear-gradient(150deg, #0d4c38 0, #146247 48%, #eaf0ec 48.2%, #f4f6f4 100%); -webkit-tap-highlight-color: transparent; }
.login-shell { min-height: 100vh; min-height: 100dvh; padding: calc(28px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); display: grid; place-items: center; }
.login-card { width: min(430px, 100%); padding: 27px; border: 1px solid rgba(255,255,255,.72); border-radius: 28px; background: rgba(249,251,249,.95); box-shadow: 0 28px 75px rgba(4,40,29,.3); backdrop-filter: blur(18px); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 9px 22px rgba(7,57,41,.22); }
.login-brand span, .login-brand strong { display: block; }
.login-brand span { color: #728079; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.login-brand strong { margin-top: 2px; color: #0d4c38; font-size: 17px; }
.login-copy { margin: 33px 0 25px; }
.login-copy p { margin: 0 0 8px; color: #146247; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.login-copy h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(34px, 10vw, 46px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.login-copy span { display: block; margin-top: 12px; color: #6d7772; font-size: 12px; line-height: 1.6; }
form { display: grid; gap: 14px; }
label span { display: block; margin: 0 0 7px 3px; color: #55625c; font-size: 11px; font-weight: 750; }
input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid #d7e0db; border-radius: 14px; outline: none; color: #17201d; background: white; font: inherit; font-size: 16px; transition: border-color 150ms ease, box-shadow 150ms ease; }
input:focus { border-color: #2a8060; box-shadow: 0 0 0 4px rgba(20,98,71,.1); }
button { min-height: 52px; margin-top: 3px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #197554, #0d4c38); box-shadow: 0 12px 25px rgba(13,76,56,.22); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
.login-error { margin: 0; padding: 11px 13px; border: 1px solid #efb8b3; border-radius: 11px; color: #842d2d; background: #feeae8; font-size: 11px; line-height: 1.45; }
.hidden { display: none !important; }
.login-security { margin: 20px 0 0; color: #7a8580; font-size: 9px; line-height: 1.5; text-align: center; }
.login-security span { margin-right: 5px; color: #2c8a63; }
@media (max-width: 480px) { .login-card { padding: 23px 20px; border-radius: 23px; } .login-copy { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }