:root { font-family: "Segoe UI", Arial, sans-serif; color: rgb(20, 34, 53); background: rgb(241, 244, 248); font-synthesis: none; --ink: #142235; --muted: #66768a; --line: #dce4ee; --navy: #0b1622; --accent: #ff7a1a; --accent-hover: #e9680c; --surface: #fff; --radius: 12px; font-size: 14px; line-height: 1.5; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0px; min-width: 320px; }
button,  input,  select { font: inherit; }
button,  a,  input,  select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.65; }
a { color: inherit; }
button:focus-visible,  a:focus-visible,  input:focus-visible,  select:focus-visible { outline: rgb(43, 120, 199) solid 3px; outline-offset: 3px; }
input:focus-visible,  select:focus-visible { outline-offset: 1px; }
h1,  h2,  h3,  p { margin: 0px; }
h1,  h2,  h3 { line-height: 1.25; letter-spacing: -0.02em; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { display: block; font-size: 11px; font-weight: 750; letter-spacing: 0.13em; color: rgb(100, 117, 139); margin-bottom: 8px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 7px; font-weight: 650; text-decoration: none; white-space: nowrap; line-height: 1.3; transition: background 0.15s, border-color 0.15s; }
.button-primary { background: var(--accent); color: rgb(255, 255, 255); border-color: var(--accent); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-full { width: 100%; margin-top: 7px; min-height: 46px; }
.auth-shell { display: grid; grid-template-columns: minmax(360px, 46%) minmax(360px, 54%); min-height: 100dvh; }
.auth-intro { background: var(--navy); color: rgb(246, 248, 251); display: flex; flex-direction: column; padding: 44px clamp(30px, 5vw, 80px); position: relative; overflow: hidden; }
.auth-intro::after { content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid rgb(39, 64, 84); border-radius: 50%; bottom: -340px; left: -120px; pointer-events: none; }
.auth-intro-copy { margin: auto 0px; padding: 60px 0px; position: relative; z-index: 1; }
.auth-intro-copy .eyebrow { color: rgb(255, 171, 107); margin-bottom: 22px; }
.auth-intro-copy h1 { font-size: clamp(32px, 3.4vw, 49px); font-weight: 650; line-height: 1.2; letter-spacing: -0.035em; }
.auth-intro-copy p { max-width: 430px; color: rgb(177, 193, 208); font-size: 15px; line-height: 1.85; margin-top: 24px; }
.auth-footer { font-size: 12px; color: rgb(126, 148, 167); }
.auth-form-panel { display: grid; place-items: center; padding: 42px 30px; background: rgb(246, 248, 251); }
.auth-card { width: 100%; max-width: 410px; }
.auth-card h2 { font-size: 28px; margin-bottom: 11px; }
.auth-card > .muted { margin-bottom: 28px; }
.auth-card form { margin-top: 24px; }
.auth-help { font-size: 12px; line-height: 1.7; color: rgb(117, 132, 150); margin-top: 25px; border-top: 1px solid var(--line); padding-top: 19px; }
.auth-card .field { margin-bottom: 19px; }
.auth-card input { min-height: 46px; background: rgb(255, 255, 255); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; min-width: 0px; }
.field label { font-size: 13px; font-weight: 650; color: rgb(49, 68, 90); }
.field input,  .field select { width: 100%; min-width: 0px; border: 1px solid rgb(199, 211, 224); border-radius: 6px; min-height: 42px; padding: 9px 11px; color: var(--ink); background: rgb(255, 255, 255); }
.field input::placeholder { color: rgb(139, 152, 168); }
.field input[readonly] { background: rgb(242, 245, 248); color: rgb(103, 120, 140); }
.field input:disabled { background: rgb(242, 245, 248); }
.field small { font-size: 12px; color: var(--muted); line-height: 1.65; }
.password-input { position: relative; display: flex; }
.password-input input { padding-right: 69px; }
.reveal-button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 61px; background: rgb(242, 245, 248); color: rgb(77, 99, 121); border: 0px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.reveal-button:hover { background: rgb(230, 237, 244); }
.notice { border: 1px solid rgb(203, 221, 236); background: rgb(240, 247, 252); border-radius: 7px; padding: 11px 13px; color: rgb(49, 87, 115); font-size: 13px; line-height: 1.6; margin: 14px 0px; overflow-wrap: anywhere; }
.notice.error { border-color: rgb(240, 199, 193); background: rgb(255, 244, 241); color: rgb(155, 61, 49); }
.notice.success { border-color: rgb(191, 223, 209); background: rgb(239, 249, 243); color: rgb(33, 105, 67); }
.tenant-name { overflow-wrap: anywhere; }
.tenant-label { display: inline-block; color: rgb(69, 97, 122); border: 1px solid rgb(219, 229, 238); background: rgb(242, 246, 249); padding: 6px 11px; border-radius: 6px; font-size: 12px; margin-bottom: 20px; overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 850px) {
.auth-shell { grid-template-columns: minmax(280px, 42%) minmax(360px, 58%); }
.auth-intro { padding: 30px 28px; }
.auth-intro-copy h1 { font-size: 32px; }
.auth-intro-copy p { font-size: 13px; }
.auth-form-panel { padding: 34px 25px; }
.auth-card h2 { font-size: 24px; }
.auth-card > .muted { font-size: 13px; }
}
@media (max-width: 650px) {
.auth-shell { display: flex; flex-direction: column; }
.auth-intro { padding: 23px 25px; }
.auth-intro-copy,  .auth-footer { display: none; }
.auth-form-panel { padding: 39px 25px; flex: 1 1 0%; align-items: start; }
.auth-card { max-width: 430px; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important; }
}