:root {
  --bg: #f3f6ff;
  --bg-2: #e3ebff;
  --card: #ffffff;
  --text: #1f2758;
  --muted: #5c6aa5;
  --border: #d6defb;
  --accent: #6280ff;
  --accent-2: #9a6bff;
  --field: #eef2ff;
  --shadow: 0 24px 60px rgba(108, 123, 255, .18);
  --text-contrast: #0b1120;
  --star-blend: multiply;
  --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell,
    'Noto Sans', sans-serif;
}

[data-theme="light"] {
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[data-theme="dark"] {
  --bg: #111827;
  --bg-2: #1a2235;
  --card: #181e2b;
  --text: #f1f4fb;
  --muted: #c1c8d6;
  --border: #2f3749;
  --accent: #7c7dff;
  --accent-2: #22d3ee;
  --field: #1c2332;
  --shadow: 0 18px 48px rgba(0, 0, 0, .35);
  --text-contrast: #f8fafc;
  --star-blend: screen;
  --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell,
    'Noto Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, var(--bg-2) 0%, var(--bg) 60%);
}

.login {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 5vh, 48px);
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

canvas.star-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: var(--star-blend);
}

.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
  width: min(420px, 92vw);
  z-index: 1;
}

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.notifications-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--field) 55%, transparent 45%);
  color: var(--text);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.notifications-btn__icon {
  width: 18px;
  height: 18px;
}

.notifications-btn__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 700 0.7rem/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
}

.notifications-btn:hover,
.notifications-btn:focus {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--field) 88%);
  outline: none;
}

.notifications-btn--has-unread {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.notifications-btn--active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.theme-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 13px/1 var(--font-sans);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.stack {
  display: grid;
  gap: 10px;
}

h1 {
  font: 700 22px/1.1 var(--font-sans);
  margin: 4px 0 6px;
  text-align: center;
  letter-spacing: .3px;
}

.field {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
}

.message {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font: 400 14px/1.4 var(--font-sans);
  margin-bottom: 12px;
}

.message ul {
  margin: 0;
  padding-left: 18px;
}

.message-success {
  background: color-mix(in srgb, #16a34a 12%, var(--card));
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
  color: color-mix(in srgb, #0f5132 70%, var(--text));
}

.message-error {
  background: color-mix(in srgb, #fee2e2 55%, var(--card));
  border-color: color-mix(in srgb, #ef4444 48%, var(--border));
  color: color-mix(in srgb, #7f1d1d 70%, var(--text));
}

label {
  font: 400 13px/1 var(--font-sans);
  color: var(--muted);
}

input[type="email"],
input[type="password"] {
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  font: 400 15px/1 var(--font-sans);
}

input::placeholder {
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}

input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn-primary {
  width: 100%;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent)
  );
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font: 700 15px/1 var(--font-sans);
  cursor: pointer;
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn-primary[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .82;
}

.logo {
  margin: 4px auto 12px;
}

.glow-breathe {
  animation: glow 4.6s ease-in-out infinite;
}

.draw-seq {
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--dash);
  animation: dash 2.2s ease forwards;
}

.scan-eye {
  animation: scan 7.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.orbit {
  animation: orbit var(--orbit-duration, 12s) linear infinite;
}

.orbit.reverse {
  animation-direction: reverse;
}

.orbit.pause-offset {
  animation-delay: var(--orbit-delay, 0s);
}

[data-theme="dark"] .message-error {
  background: color-mix(in srgb, #7f1d1d 65%, transparent 35%);
  border-color: color-mix(in srgb, #f87171 70%, transparent 30%);
  color: color-mix(in srgb, #fee2e2 90%, #ffffff 10%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent 65%);
}

@keyframes glow {
  0%,
  100% {
    opacity: .7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes scan {
  0%,
  18% {
    transform: translate(-8px, -8px) scaleY(1);
  }
  26% {
    transform: translate(8px, -4px) scaleY(.55);
  }
  38% {
    transform: translate(10px, 8px) scaleY(.95);
  }
  50% {
    transform: translate(0, 10px) scaleY(.12);
  }
  64% {
    transform: translate(-10px, 4px) scaleY(1);
  }
  74% {
    transform: translate(6px, -6px) scaleY(.2);
  }
  86%,
  100% {
    transform: translate(-8px, -8px) scaleY(1);
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .panel {
    padding: clamp(16px, 4vw, 24px);
  }
}