:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI",
               system-ui, sans-serif;

  color: #f3f6fc;
  background: #020817;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100svh;

  display: grid;
  place-items: center;

  padding: 32px 16px;

  background:
    linear-gradient(
      100deg,
      #03152af2,
      #0829488c
    ),
    url('/assets/phestos-hero-amsterdam.png')
      center / cover fixed;
}

.login-panel {
  width: min(100%, 510px);

  padding: 42px;

  border: 1px solid #52729177;
  border-radius: 20px;

  background: #06192dec;

  box-shadow:
    0 24px 80px #0007;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.brand strong {
  display: block;

  font-size: 1.7rem;
  font-weight: 750;

  letter-spacing: -.03em;
}

.brand small {
  display: block;

  margin-top: 3px;

  font-size: .8rem;
  font-weight: 400;

  color: #bacee1;
}

.eyebrow {
  margin-top: 34px;

  color: #ffb638;

  font-size: .72rem;
  font-weight: 700;

  letter-spacing: .12em;
}

h1 {
  font-size: 2.35rem;
  line-height: 1.12;

  margin: 16px 0;
}

p {
  line-height: 1.65;
  color: #c5d4e4;
}

.intro {
  margin-bottom: 28px;
}

label {
  display: block;

  font-weight: 600;

  margin: 24px 0 9px;
}

input,
button {
  width: 100%;

  padding: 14px;

  font: inherit;

  border-radius: 9px;
}

input {
  border: 1px solid #65839d;

  background: #041325;
  color: white;
}

button {
  margin-top: 16px;

  border: 1px solid #ffb638;

  background: #ffb638;
  color: #071a2c;

  font-weight: 700;
}

button:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.status {
  min-height: 1.6em;

  color: #ffd284;

  font-size: .85rem;
}

footer {
  margin-top: 30px;

  padding-top: 20px;

  border-top: 1px solid #33516a;
}

footer p {
  font-size: .85rem;
  color: #a6bdd3;
}

.security {
  color: #ffb638;
}

:focus-visible {
  outline: 3px solid #ffce76;
  outline-offset: 3px;
}

@media (max-width: 540px) {

  .login-panel {
    padding: 27px 22px;
  }

  h1 {
    font-size: 2rem;
  }
}

/* Native verborgen schermstappen behouden. */
[hidden] { display: none !important; }

#phestos-security-overlay {
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:linear-gradient(180deg,#07173357,#07173385);
  backdrop-filter:blur(6px);
}
.security-pending-card {
  width:min(100%,420px); display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:20px;
  align-items:center; padding:24px; border-radius:22px;
  border:1px solid #93c5fd52;
  background:linear-gradient(135deg,#0a2552f5,#081c3ef5);
  box-shadow:0 28px 72px #081c3e61;
}
.security-pending-card strong {color:white;font-size:1.08rem}
.security-pending-card p {margin:8px 0;font-size:.95rem}
.security-pending-card small {color:#dbeafe}
.security-pending-spinner {
  width:56px;height:56px;border-radius:50%;border:4px solid #bfdbfe42;
  border-top-color:#bfdbfe;border-right-color:#60a5fa;
  animation:security-pending-spin .95s linear infinite;
}
@keyframes security-pending-spin {to {transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce) {
  .security-pending-spinner {animation:none}
}
@media(max-width:440px) {
  .security-pending-card {
    grid-template-columns:1fr;justify-items:center;text-align:center;
  }
}