@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  font-family: "Titillium Web", sans-serif;
  color: #102342;
  background: #fff;
  --oa-text: #102342;
  --oa-muted: #3d5272;
  --oa-blue: #075bcb;
  --oa-blue-dark: #064797;
  --oa-orange: #f68d2e;
  --oa-border: #d9e5f2;
  --oa-surface: #f4f8fd;
  --oa-error: #a12b25;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }

.auth-page { min-height: 100vh; background: #f4f8fd; }
.auth-layout { min-height: 100vh; display: grid; place-items: center; padding: 42px 20px; }
.auth-card { width: min(100%, 460px); padding: 36px; border: 1px solid var(--oa-border); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(16, 35, 66, .14); }
.auth-card-wide { width: min(100%, 720px); }
.auth-card-modal { width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }

.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.auth-brand img { width: 47px; height: 47px; object-fit: contain; }
.auth-brand strong { display: block; font-size: 24px; line-height: 1; letter-spacing: -.03em; }
.auth-brand strong span:last-child { color: var(--oa-orange); }
.auth-brand small { display: block; margin-top: 3px; color: #65758e; font-size: 12px; }
.auth-copy { margin-bottom: 24px; }
.auth-copy h1, .auth-copy h2 { margin: 4px 0 8px; color: var(--oa-text); font-size: clamp(28px, 5vw, 38px); line-height: 1.08; letter-spacing: -.025em; }
.auth-copy p { margin: 0; color: var(--oa-muted); line-height: 1.5; }
.auth-copy .auth-eyebrow { color: var(--oa-blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-form { display: grid; gap: 10px; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 16px; }
.auth-field { min-width: 0; }
.auth-field-full { grid-column: 1 / -1; }
.auth-form label { display: block; margin: 0 0 6px; color: var(--oa-text); font-size: 14px; font-weight: 600; }
.auth-form label span { color: #71809a; font-weight: 400; }
.auth-form input, .auth-form select { width: 100%; min-height: 48px; border: 1px solid #c7d6e7; border-radius: 9px; background: #fff; color: var(--oa-text); padding: 0 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.auth-form input:focus, .auth-form select:focus { border-color: var(--oa-blue); box-shadow: 0 0 0 3px rgba(7, 91, 203, .15); }
.auth-form select:disabled { color: #7a879b; background: #f2f5f8; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle { position: absolute; inset: 6px 7px 6px auto; border: 0; background: transparent; color: var(--oa-blue); font-weight: 600; cursor: pointer; }
.auth-primary { min-height: 50px; margin-top: 13px; border: 1px solid #dc7417; border-radius: 9px; background: var(--oa-orange); color: #101820; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(246, 141, 46, .24); }
.auth-primary:hover { background: #ee7f1d; }
.auth-primary:focus-visible { outline: 3px solid rgba(7, 91, 203, .35); outline-offset: 2px; }
.auth-primary:disabled { cursor: wait; opacity: .65; }
.auth-error { margin: 8px 0 0; border-radius: 8px; background: #fff0ef; color: var(--oa-error); padding: 11px 13px; font-size: 14px; line-height: 1.4; }
.auth-switch { margin: 22px 0 0; color: #5f708a; text-align: center; font-size: 15px; }
.auth-switch a { color: var(--oa-blue); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .auth-layout { padding: 0; place-items: stretch; }
  .auth-card, .auth-card-wide { width: 100%; min-height: 100vh; padding: 28px 22px; border: 0; border-radius: 0; box-shadow: none; }
  .auth-card-modal { min-height: auto; padding: 0; }
  .auth-grid { grid-template-columns: 1fr; gap: 10px; }
  .auth-field-full { grid-column: auto; }
}