:root {
font-family:var(--ui-font-family); 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:var(--ui-text-body-size); line-height:var(--ui-text-body-line); color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0px; min-width: 320px;
}
button {
font: inherit;
}
input {
font: inherit;
}
select {
font: inherit;
}
button {
-webkit-tap-highlight-color: transparent;
}
a {
-webkit-tap-highlight-color: transparent;
}
input {
-webkit-tap-highlight-color: transparent;
}
select {
-webkit-tap-highlight-color: transparent;
}
button {
cursor: pointer;
}
a {
color: inherit;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
p {
margin: 0px;
}
h1 {
line-height:var(--ui-text-body-line); letter-spacing: -0.02em;
}
h2 {
line-height:var(--ui-text-body-line); letter-spacing: -0.02em;
}
h3 {
line-height:var(--ui-text-body-line); letter-spacing: -0.02em;
}
h1 {
font-size:var(--ui-text-title-size);
}
h2 {
font-size:var(--ui-text-title-size);
}
h3 {
font-size:var(--ui-text-section-size);
}
[hidden] {
display: none !important;
}
.muted {
color: var(--muted);
}
.eyebrow {
display: block; font-size:var(--ui-text-help-size); font-weight:var(--ui-font-emphasis); 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; --ui-control-padding: 10px 16px; --ui-control-border: 1px solid transparent; font-weight:var(--ui-font-emphasis); text-decoration: none; white-space: nowrap; line-height:var(--ui-text-body-line);
}
.button-primary {
--ui-control-background: var(--accent); --ui-control-color: rgb(255, 255, 255); --ui-control-border: var(--ui-border-width) solid var(--accent);
}
.button-primary:hover {
--ui-hover-background: var(--accent-hover); --ui-hover-border-color: var(--accent-hover);
}
.button-full {
width: 100%; margin-top: 7px; min-height: var(--ui-auth-height);
}
.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:var(--ui-text-title-size); font-weight:var(--ui-font-emphasis); line-height:var(--ui-text-title-line); letter-spacing: -0.035em;
}
.auth-intro-copy p {
max-width: 430px; color: rgb(177, 193, 208); font-size:var(--ui-text-section-size); line-height:var(--ui-text-section-line); margin-top: 24px;
}
.auth-footer {
font-size:var(--ui-text-help-size); 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:var(--ui-text-title-size); margin-bottom: 11px;
}
.auth-card > .muted {
margin-bottom: 28px;
}
.auth-card form {
margin-top: 24px;
}
.auth-help {
font-size:var(--ui-text-help-size); line-height:var(--ui-text-help-line); 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: var(--ui-auth-height); --ui-control-background: rgb(255, 255, 255);
}
.field {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; min-width: 0px;
}
.field label {
font-size:var(--ui-text-help-size); font-weight:var(--ui-font-emphasis); color: rgb(49, 68, 90);
}
.field input {
width: 100%; min-width: 0px; --ui-control-border: 1px solid rgb(199, 211, 224); min-height: 42px; --ui-control-padding: 9px 11px; --ui-control-color: var(--ink); --ui-control-background: rgb(255, 255, 255);
}
.field select {
width: 100%; min-width: 0px; --ui-control-border: 1px solid rgb(199, 211, 224); min-height: 42px; --ui-control-padding: 9px 11px; --ui-control-color: var(--ink); --ui-control-background: rgb(255, 255, 255);
}
.field input::placeholder {
color: rgb(139, 152, 168);
}
.field input[readonly] {
--ui-control-background: rgb(242, 245, 248); --ui-control-color: rgb(103, 120, 140);
}
.field input:disabled {
--ui-control-background: rgb(242, 245, 248);
}
.field small {
font-size:var(--ui-text-help-size); color: var(--muted); line-height:var(--ui-text-help-line);
}
.password-input {
position: relative; display: flex;
}
.password-input input {
padding-right: 69px;
}
.reveal-button {
position: absolute; right: 4px; top: 4px; bottom: 4px; width: var(--ui-auth-reveal-width); --ui-control-background: rgb(242, 245, 248); --ui-control-color: rgb(77, 99, 121); --ui-control-border: 0px; font-size:var(--ui-text-help-size); font-weight:var(--ui-font-emphasis);
}
.reveal-button:hover {
--ui-hover-background: rgb(230, 237, 244);
}
.notice {
border: 1px solid rgb(203, 221, 236); background: rgb(240, 247, 252); border-radius: var(--ui-radius); padding: 11px 13px; color: rgb(49, 87, 115); font-size:var(--ui-text-help-size); line-height:var(--ui-text-help-line); 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: var(--ui-radius); font-size:var(--ui-text-help-size); 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:var(--ui-text-title-size);
}
.auth-intro-copy p {
font-size:var(--ui-text-help-size);
}
.auth-form-panel {
padding: 34px 25px;
}
.auth-card h2 {
font-size:var(--ui-text-title-size);
}
.auth-card > .muted {
font-size:var(--ui-text-help-size);
}
}
@media (max-width: 650px) {
.auth-shell {
display: flex; flex-direction: column;
}
.auth-intro {
padding: 23px 25px;
}
.auth-intro-copy {
display: none;
}
.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;
}
}