:root {
  color-scheme: dark;
  --sso-bg: #13243a;
  --sso-card: rgba(28, 48, 73, 0.94);
  --sso-line: rgba(151, 177, 208, 0.22);
  --sso-text: #f4f7fb;
  --sso-muted: #aebdd0;
  --sso-blue: #168cf0;
  --sso-blue-hover: #0875cd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  color: var(--sso-text);
  background:
    radial-gradient(circle at 15% 10%, rgba(22, 140, 240, 0.2), transparent 512px),
    linear-gradient(145deg, #0f1d30, var(--sso-bg) 58%, #182f49);
}

.sso-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.sso-card {
  width: 100%;
  max-width: 500px;
  padding: 42px;
  border: 1px solid var(--sso-line);
  border-radius: 22px;
  background: var(--sso-card);
  box-shadow: 0 28px 80px rgba(3, 10, 20, 0.38);
  backdrop-filter: blur(16px);
}

.sso-brand { display: block; width: 190px; margin: 0 auto 28px; }
.sso-brand img { width: 100%; height: auto; display: block; }
.sso-security-mark { width: 50px; height: 50px; margin: 0 auto 18px; padding: 11px; border-radius: 15px; color: #6fc0ff; background: rgba(22, 140, 240, 0.14); }
.sso-security-mark svg { width: 100%; fill: currentColor; }
h1 { margin: 0; text-align: center; font-size: clamp(26px, 6vw, 34px); letter-spacing: -0.64px; }
.sso-lead { max-width: 390px; margin: 13px auto 30px; color: var(--sso-muted); text-align: center; font-size: 15px; line-height: 1.6; }
label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; }
input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  color: var(--sso-text);
  border: 1px solid rgba(165, 188, 216, 0.32);
  border-radius: 11px;
  outline: none;
  background: rgba(7, 19, 34, 0.54);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus { border-color: var(--sso-blue); box-shadow: 0 0 0 4px rgba(22, 140, 240, 0.15); }
.sso-help, .sso-footnote { color: var(--sso-muted); font-size: 12px; line-height: 1.55; }
.sso-help { margin: 9px 0 20px; }
.sso-footnote { margin: 26px 0 0; text-align: center; }
.sso-field-error { color: #ffb6b6; margin: 7px 0 0; font-size: 13px; }
button, .sso-local-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font: 600 15px/1 "Inter", sans-serif;
  text-decoration: none;
}
button { width: 100%; color: white; border: 0; background: var(--sso-blue); cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
button:hover { background: var(--sso-blue-hover); transform: translateY(-1px); }
.sso-local-link { color: #d7e8fa; border: 1px solid var(--sso-line); background: rgba(255,255,255,0.025); }
.sso-local-link:hover { border-color: rgba(111, 192, 255, 0.55); }
.sso-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #8395aa; font-size: 12px; }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--sso-line); }
.sso-alert { margin-bottom: 20px; padding: 12px 14px; color: #ffd2d2; border: 1px solid rgba(255, 119, 119, 0.3); border-radius: 10px; background: rgba(145, 32, 32, 0.2); font-size: 13px; line-height: 1.45; }
.sso-alert p { margin: 0; }

@media (max-width: 560px) {
  .sso-card { padding: 30px 22px; border-radius: 18px; }
  .sso-page { padding: 18px 12px; }
}