/* contentmanagment.net. Dark blue, sky blue and silver, frosted glass over a sky wash, like the IMNETS panel. */
:root {
  --navy: #0b2a5b;
  --navy-hover: #123a7a;
  --sky: #0ea5e9;
  --sky-soft: #e0f2fe;
  --silver: #cbd5e1;
  --text: #0f172a;
  --muted: #475569;
  --error: #b91c1c;
  --error-soft: #fef2f2;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px -8px rgba(11, 42, 91, 0.22);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #bae6fd 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #e2e8f0 0%, transparent 55%),
    linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.brand b { color: var(--sky); font-weight: 650; }

.card {
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 28px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
.lead { margin: 0 0 24px; color: var(--muted); font-size: 15px; }

label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }

input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  margin: 0 0 16px;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--silver);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25); }
input:disabled { background: #f1f5f9; }

.password { position: relative; }
.password input { padding-right: 72px; }
.show {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.show:hover { background: var(--sky-soft); }
.show:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }

.hint { margin: -10px 0 16px; font-size: 13px; color: var(--muted); }

.error {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--error);
  background: var(--error-soft);
  border: 1px solid #fecaca;
  border-radius: 10px;
}

.primary {
  width: 100%;
  height: 48px;
  font: inherit;
  font-weight: 650;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.primary:hover { background: var(--navy-hover); }
.primary:active { transform: scale(0.98); }
.primary:focus-visible { outline: 3px solid rgba(14, 165, 233, 0.5); outline-offset: 2px; }
.primary:disabled { opacity: 0.6; cursor: progress; transform: none; }

.progress { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.progress[hidden], .error[hidden] { display: none; }
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--silver);
  border-top-color: var(--sky);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } .primary { transition: none; } }

.switch { margin: 0; font-size: 15px; color: var(--muted); }
.switch a, footer a { color: var(--navy); font-weight: 600; text-decoration: none; }
.switch a:hover, footer a:hover { text-decoration: underline; }

footer { font-size: 13px; color: var(--muted); }