@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.watermark {
  position: fixed;
  top: 14px;
  right: 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #9aa4b2;
  font-weight: 500;
}

.footer-note {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #aeb6c2;
}

.portal-card {
  width: min(460px, 90vw);
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20, 30, 50, 0.08);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #1c2430;
}

.portal-card.flicker {
  animation: flicker 5.5s infinite;
}

/* A very faint, irregular flicker -- almost unnoticeable, not a "glitch" effect */
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.96; }
  94% { opacity: 1; }
  95.5% { opacity: 0.985; }
  96% { opacity: 1; }
}

.portal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #eceff3;
}

.portal-logo {
  width: 20px;
  height: 20px;
  color: #1a3c6e;
  flex-shrink: 0;
}

.portal-org {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: #33404f;
}

/* Padlock is drawn open (shackle not closed) -- a quiet, easy-to-miss red flag */
.padlock {
  width: 16px;
  height: 16px;
  color: #b9433f;
  flex-shrink: 0;
}

.portal-body {
  padding: 26px 24px 22px;
}

.portal-body h1 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1c2430;
}

.portal-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5b6572;
  margin-bottom: 22px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid #dde3ea;
  border-top-color: #1a3c6e;
  border-radius: 50%;
  margin: 0 auto 22px;
  animation: spin 0.9s linear infinite;
}

.spinner.done {
  animation: none;
  border-color: #1a8f4c;
  border-top-color: #1a8f4c;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status-lines {
  background: #f7f9fb;
  border: 1px solid #eceff3;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
}

.status-line {
  display: flex;
  justify-content: space-between;
  color: #4a5563;
  padding: 3px 0;
}

.status-line .label {
  color: #93a0b0;
}

.portal-progress {
  height: 3px;
  background: #eceff3;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.portal-progress-fill {
  height: 100%;
  width: 0%;
  background: #1a3c6e;
}