:root { color-scheme: light; --ink: #17202b; --muted: #687382; --line: #d9e0e8; --panel: #fff; --blue: #155dfc; --green: #1f8f68; --ui-glass-blur: 12px; --ui-glass-sat: 200%; --ui-glass-film: rgb(255 255 255 / 0.55); --ui-glass-toolbar: rgb(255 255 255 / 0.28); --ui-glass-window: rgb(255 255 255 / 0.72); --ui-glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); --ui-glass-rim: rgb(255 255 255 / 0.95); --ui-glass-rim-2: rgb(255 255 255 / 0.55); --ui-glass-edge: rgb(16 18 32 / 0.12); --ui-glass-amb: 0 24px 54px -30px rgb(30 26 70 / 0.45); --ui-glass-overlay: rgb(16 18 32 / 0.16); --ui-glass-control: rgb(255 255 255 / 0.72); --ui-glass-control-focus: rgb(245 249 255); --ui-glass-control-hover: rgb(248 251 255 / 0.8); --ui-glass-menu: rgb(255 255 255 / 0.42); --ui-glass-item-hover: rgb(255 255 255 / 0.28); --ui-glass-control-border: rgb(255 255 255 / 0.55); --ui-glass-control-blur: 8px; --ui-glass-control-sat: 120%; --ui-glass-menu-blur: 22px; --ui-glass-button: rgb(255 255 255 / 0.18); --ui-glass-button-hover: rgb(255 255 255 / 0.32); --ui-glass-button-border: rgb(255 255 255 / 0.55); --ui-glass-button-blur: 12px; --ui-glass-accent: #8bb8ff; --ui-radius-control: 14px; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  color: var(--ink);
  background-color: #f2f4fb;
  background-image:
    radial-gradient(54% 46% at 16% 16%, rgb(165 180 252 / 0.5) 0%, transparent 62%), radial-gradient(46% 40% at 84% 14%, rgb(153 246 228 / 0.42) 0%, transparent 58%), radial-gradient(50% 44% at 78% 88%, rgb(249 168 212 / 0.38) 0%, transparent 60%), radial-gradient(42% 36% at 16% 90%, rgb(254 240 138 / 0.36) 0%, transparent 58%),
    radial-gradient(circle at 0 0, rgba(255,255,255,.88) 0 2px, transparent 2px);
  background-size: auto, auto, auto, auto, 42px 42px;
}
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px 24px 52px; }
.auth-panel {
  width: min(100%, 392px);
  border-radius: 28px;
  padding: 34px 32px;
  background: var(--ui-glass-noise), var(--ui-glass-film); border: 1px solid var(--ui-glass-edge); box-shadow: inset 0 1px 0 var(--ui-glass-rim), inset 0 -1px 0 var(--ui-glass-rim-2), var(--ui-glass-amb); -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-sat)); backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-sat));
}
.brand { width: 44px; height: 44px; border-radius: 8px; display: block; object-fit: cover; }
h1 { margin: 22px 0 8px; font-size: 26px; line-height: 1.15; color: #08266f; letter-spacing: 0; }
p { margin: 0 0 24px; color: var(--muted); }
.providers { display: grid; gap: 12px; }
.developer-form { margin: 0; }
.provider { width: 100%; min-height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font: inherit; font-weight: 700; border: 1px solid var(--ui-glass-edge); cursor: pointer; }
.provider.google { color: var(--ink); background: rgb(255 255 255 / 0.42); -webkit-backdrop-filter: blur(10px) saturate(var(--ui-glass-sat)); backdrop-filter: blur(10px) saturate(var(--ui-glass-sat)); box-shadow: inset 0 1px 0 var(--ui-glass-rim-2); }
.provider.jumpcloud { color: #fff; background: var(--green); border-color: var(--green); }
.provider.developer { color: #fff; background: #08266f; border-color: #08266f; }
.google-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--blue); border: 1px solid var(--line); font-weight: 700; }
.message { margin-bottom: 16px; border-radius: 6px; padding: 10px 12px; }
.message.error { border: 1px solid #f0c36d; background: #fff6df; color: #684800; }
.secondary-link { color: #08266f; font-weight: 700; text-decoration: none; }
.secondary-link:hover { text-decoration: underline; }
.auth-version { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--muted); font-size: 11px; line-height: 1; white-space: nowrap; }
@media (max-width: 420px) {
  .auth-shell { padding: 14px 14px 48px; }
  .auth-panel { padding: 26px 20px; }
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .auth-panel { background: rgb(255 255 255 / 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .auth-panel { background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}