/* ===== Page Loader (theme-aware) ===== */
#page-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  background: var(--pl-bg, rgba(15, 32, 39, 0.96));
  backdrop-filter: blur(6px);
}
#page-loader .pl-card{
  width:min(420px, 92vw);
  padding:26px 22px;
  border-radius:22px;
  text-align:center;
  background: var(--pl-card, rgba(255,255,255,0.10));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}
#page-loader .pl-logo{
  max-width: 240px;
  height:auto;
  display:block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}
#page-loader .pl-spinner{
  width:64px;height:64px;
  margin: 10px auto 8px;
  border-radius:50%;
  border: 6px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.92);
  animation: pl-spin 1s linear infinite;
}
#page-loader .pl-text{
  color: rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.4px;
}
@keyframes pl-spin{to{transform:rotate(360deg)}}

body.loaded #page-loader{
  opacity:0;
  pointer-events:none;
  transition: opacity .35s ease;
}
/* Light mode overrides (if body has class 'theme-light' or data-theme='light') */
body.theme-light #page-loader, body[data-theme="light"] #page-loader{
  --pl-bg: rgba(245, 247, 251, 0.96);
  --pl-card: rgba(255,255,255,0.78);
}
body.theme-light #page-loader .pl-card, body[data-theme="light"] #page-loader .pl-card{
  border: 1px solid rgba(27,42,68,0.14);
  box-shadow: 0 18px 55px rgba(17, 24, 39, 0.18);
}
body.theme-light #page-loader .pl-spinner, body[data-theme="light"] #page-loader .pl-spinner{
  border: 6px solid rgba(27,42,68,.14);
  border-top-color: rgba(27,42,68,.80);
}
body.theme-light #page-loader .pl-text, body[data-theme="light"] #page-loader .pl-text{
  color: rgba(27,42,68,.92);
}