/* Skeleton and reveal styles for the owner sign-in page.
   Extracted from an inline <style> block so this page can be served with a
   style-src that has no 'unsafe-inline' (see tightenScriptDirectives in
   src/backend/app.js). Linked at the same position the block occupied, so
   the cascade order is unchanged. */

body { opacity: 0; }

#login-skeleton {
  position: fixed; inset: 0; z-index: 999;
  background: #f3f5f8;
  display: flex; flex-direction: column;
}
#login-skeleton .sk-header {
  height: 64px; background: #03162D;
  display: flex; align-items: center; padding: 0 20px;
}
#login-skeleton .sk-logo {
  width: 120px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,0.12);
}
#login-skeleton .sk-body {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px;
}
#login-skeleton .sk-card {
  background: #fff; border-radius: 20px;
  padding: 28px 24px; width: 100%; max-width: 420px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  display: flex; flex-direction: column; gap: 14px;
}
.sk-bar {
  border-radius: 6px; background: #e5e7eb;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0%,100% { opacity: 1; } 50% { opacity: 0.45; }
}
#login-skeleton.fade-out {
  opacity: 0; transition: opacity 180ms ease;
}