/* ---------------------------------------
   SekaiZ Preloader (global)
   Glassmorphism + gradient spinner
---------------------------------------- */

.preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(10,16,32,0.45); backdrop-filter: blur(14px); transition: opacity .28s ease, visibility .28s ease; pointer-events: none; }
.preloader.hidden { opacity: 0; visibility: hidden; }

.preloader-inner { display: grid; gap: 0.75rem; align-items: center; justify-items: center; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--bg-glass); border: 1px solid var(--border-glass); box-shadow: 0 10px 30px var(--shadow-glass); }
.preloader-text { color: var(--text-primary); font-weight: 700; }

.preloader-spinner { width: 72px; height: 72px; border-radius: 9999px; background: conic-gradient(#3b82f6, #9333ea, #ec4899, #f59e0b, #3b82f6); animation: spin 1.1s linear infinite; position: relative; box-shadow: 0 8px 24px rgba(17,24,39,.28); }
.preloader-spinner::after { content: ''; position: absolute; inset: 8px; border-radius: 9999px; background: rgba(0,0,0,0.35); }
@keyframes spin { to { transform: rotate(360deg); } }

.preloader-progress { width: 220px; height: 8px; border-radius: 9999px; background: var(--bg-glass); border: 1px solid var(--border-glass); overflow: hidden; }
.preloader-bar { height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #9333ea, #ec4899); transition: width .4s ease; }

/* Light mode tweak */
html.light-mode .preloader { background: rgba(255,255,255,0.45); }
html.light-mode .preloader-spinner::after { background: rgba(255,255,255,0.55); }

/* Mobile-friendly sizing */
@media (max-width: 480px) {
  .preloader-inner { padding: .85rem 1rem; border-radius: .9rem; }
  .preloader-spinner { width: 64px; height: 64px; }
  .preloader-progress { width: 180px; }
}