:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.la-page { margin: 0; min-height: 100svh; box-sizing: border-box; display: grid; place-items: center; padding: 32px 20px; color: #ecf1f2; background: radial-gradient(ellipse at 85% 5%, #1b373445, transparent 55%), #101318; }
.la-card { width: min(100%, 430px); box-sizing: border-box; padding: 36px; border: 1px solid #334347; border-radius: 24px; background: linear-gradient(145deg, #1a2529, #171c22 70%); box-shadow: 0 24px 100px #0003; }
.la-logo { display: inline-flex; gap: 9px; align-items: center; color: #eef2f3; font-size: 32px; font-weight: 750; text-decoration: none; }
.la-logo > span { display: grid; width: 36px; height: 38px; place-items: center; border: 1px solid #ffac7050; border-radius: 9px; background: #382a21; color: #ffa564; font-size: 25px; }
.la-logo i { color: #ffa564; font-style: normal; margin-left: -9px; }
.la-eyebrow { margin: 36px 0 13px; color: #8fa2b2; font-size: 10px; letter-spacing: .16em; font-weight: 650; }
.la-card h1 { margin: 0; font-size: clamp(25px, 7vw, 32px); letter-spacing: -.04em; line-height: 1.18; }
.la-card h1 span { color: #ffa564; }
.la-intro { margin: 13px 0 27px; color: #a5b4bd; font-size: 14px; line-height: 1.6; }
.la-form { display: grid; gap: 9px; }
.la-form > label:not(.la-remember) { font-size: 13px; font-weight: 600; }
.la-form > input { width: 100%; min-width: 0; box-sizing: border-box; margin-bottom: 12px; padding: 13px 14px; border: 1px solid #40515a; border-radius: 10px; background: #10191e; color: #f0f4f6; font: inherit; min-height: 48px; }
.la-form > input:focus { outline: 2px solid #8acdb8; outline-offset: 2px; }
.la-remember { display: flex; align-items: flex-start; gap: 11px; margin: 2px 0 15px; cursor: pointer; }
.la-remember input { accent-color: #96d3bb; width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; }
.la-remember strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; }
.la-remember small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.6; color: #95a9b4; }
.la-submit { display: flex; justify-content: center; gap: 13px; align-items: center; border: 1px solid #ffb378; border-radius: 11px; min-height: 51px; background: #ffab70; color: #25190f; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.la-submit:hover { background: #ffb984; }
.la-submit:focus-visible { outline: 2px solid #a5ddcc; outline-offset: 4px; }
.la-submit:disabled { opacity: .65; cursor: wait; }
.la-private { display: flex; gap: 7px; justify-content: center; margin: 25px 0 0; font-size: 10px; color: #8298a5; line-height: 1.6; text-align: center; }
.la-private > span { color: #94cfba; }
.la-error { margin: 0 0 8px; border: 1px solid #98674888; border-radius: 8px; padding: 10px 12px; background: #3b2c23; color: #ffbd92; font-size: 12px; line-height: 1.5; }
.la-error[hidden] { display: none; }
.life-sign-out { border: 1px solid #3b484f; background: transparent; color: #9cafbb; border-radius: 8px; padding: 8px 10px; min-height: 40px; font: inherit; font-size: 12px; cursor: pointer; }
.life-sign-out:hover { background: #263237; color: #d8e6ea; }
@media (max-width: 440px) { .la-page { padding: 20px 16px; } .la-card { padding: 27px 23px; border-radius: 20px; } }
@media (max-width: 340px) { .la-card { padding: 24px 18px; } .la-eyebrow { letter-spacing: .12em; } }