.fouryu-login-site { background: #1c1c19; color: #f4eee5; }
.login-shell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 36px 24px; background: radial-gradient(circle at 77% 20%, rgba(178, 121, 73, .26), transparent 28%), #1c1c19; }
.login-brand { position: absolute; top: 32px; left: 40px; color: #f4eee5; font: 850 1.6rem var(--sans); letter-spacing: -.13em; text-decoration: none; }
.login-brand span { color: var(--wood-light); }
.login-card { width: min(100%, 440px); box-sizing: border-box; padding: 48px; border: 1px solid rgba(242, 234, 222, .16); background: rgba(37, 36, 31, .9); box-shadow: 0 26px 90px rgba(0, 0, 0, .27); }
.login-card .eyebrow { color: #d29c69; }
.login-card h1 { margin: 20px 0 10px; font: 400 clamp(2.7rem, 8vw, 4rem)/.95 var(--serif); letter-spacing: -.06em; }
.login-intro { margin: 0 0 29px; color: #b8afa4; font-size: .86rem; line-height: 1.65; }
.login-form label { display: block; margin: 18px 0; color: #e8e0d6; font: 700 .69rem var(--sans); letter-spacing: .04em; }
.login-form input[type="text"], .login-form input[type="password"] { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid rgba(243, 237, 227, .24); background: #292824; padding: 13px; color: #f4eee5; font: 400 .9rem var(--sans); }
.login-form input:focus { outline: 2px solid #c7915e; outline-offset: 1px; }
.login-form .login-remember { display: flex; align-items: center; gap: 8px; color: #bdb4a9; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.login-remember input { accent-color: #c18a57; }
.login-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; border: 1px solid #c28c59; background: #c18a57; padding: 14px; color: #211b16; font: 850 .7rem var(--sans); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.login-submit:hover { background: #d7a26e; }
.login-error { margin: 0 0 20px; border-left: 3px solid #d79870; background: rgba(190, 103, 70, .16); padding: 12px 14px; color: #f0d0be; font-size: .75rem; line-height: 1.5; }
@media (max-width: 560px) { .login-shell { align-items: flex-start; padding-top: 114px; } .login-brand { top: 24px; left: 24px; } .login-card { padding: 35px 25px; } }