:root { --blue: #075bc7; --ink: #17191d; --muted: #6c6e73; --line: #e4e5e7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased; }
.login-page { display: grid; grid-template-columns: minmax(460px, 1fr) minmax(460px, 1fr); min-height: 100vh; }
.login-panel { display: flex; justify-content: center;align-items: center; padding: 80px 64px; background: #fff; }
.login-content { width: min(100%, 547px); }
.brand { display: block; width: 92px; height: 78px; margin: 0 auto 19px; color: var(--blue); text-align: center; font-weight: 800; letter-spacing: 1.5px; text-decoration: none; }
.brand-mark { height: 77px; margin: 0 auto 2px; display: block; object-fit: cover; filter: invert(29%) sepia(99%) saturate(2144%) hue-rotate(201deg) brightness(83%) contrast(104%); }
.brand-name { display: block; font-size: 15px; line-height: 1; }
h1 { margin: 0; text-align: center; font-size: 24px; line-height: 1.25; font-weight: 700; }
.intro { margin: 7px 0 20px; color: var(--muted); text-align: center; font-size: 14px; }
.alert { margin: 0 0 16px; padding: 11px 13px; border-radius: 6px; color: #9f1239; background: #fff1f2; font-size: 13px; }
.field { margin-bottom: 22px; }
.field-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
label, .forgot { font-size: 12px; font-weight: 600; }
.forgot { color: #52555a; text-decoration: none; }
input[type=text], input[type=email], input[type=password] { display: block; width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: #fafbfc; color: var(--ink); font: inherit; font-size: 12px; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: #7ab0ed; box-shadow: 0 0 0 3px rgba(7, 91, 199, .1); }
.invalid { border-color: #dc3545 !important; }
.error { display: block; margin-top: 5px; color: #dc3545; font-size: 11px; }
.remember { display: flex; align-items: center; gap: 9px; margin: 2px 0 20px; color: #55585c; font-size: 11px; }
.remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.primary-button { width: 100%; height: 48px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; cursor: pointer; font: 600 12px Inter, sans-serif; }
.divider { display: flex; align-items: center; gap: 15px; margin: 27px 0 21px; color: #77a9e8; font-size: 12px; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: #9ac1f2; }
.google-button { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 48px; border: 1px solid #aeb0b3; border-radius: 9px; background: #fff; color: #55565a; font: 600 12px Inter, sans-serif; }
.google-g { width: 20px; height: 20px; object-fit: contain; }
.signup { margin-top: 35px; color: #55585c; text-align: center; font-size: 11px; }
.signup a { color: var(--blue); font-weight: 700; text-decoration: none; }
.art-panel { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eff8ff; }
.art { display: block; width: min(72%, 500px); height: auto; }
@media (max-width: 800px) { .login-page { grid-template-columns: 1fr; } .art-panel { display: none; } .login-panel { padding: 48px 24px; } }