/* Base styles for Muhsaib homepage v6 */
:root{--brand:#0b5aa7;--accent:#0b66d6;--muted:#6b7280;--bg:#f6f9fb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:#07223a}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{background:linear-gradient(90deg,var(--brand),#0f6bbd);color:#fff;padding:12px 0;position:sticky;top:0;z-index:60}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800}nav.nav a{color:#fff;margin-left:14px;text-decoration:none}
.hero{display:flex;gap:20px;padding:24px 0}
.program-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.program-card{background:#fff;padding:14px;border-radius:10px;box-shadow:0 8px 20px rgba(11,90,167,0.06)}
.notices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}

/* Extracted preloader styles (exact) */

:root{
  --bg:#f6f9fb; --card:#ffffff; --accent:#0b66d6; --muted:#6b7280; --success:#16a34a;
}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{background:linear-gradient(180deg,#f3f7fb,#ffffff);color:#111;}
.container{max-width:980px;margin:0 auto;padding:20px;}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{font-size:28px;color:var(--accent);font-weight:700}
.sub{color:var(--muted);font-size:13px}
.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(13, 38, 76, .06);margin-bottom:16px}
.small{font-size:13px;color:var(--muted)}
.btn{padding:10px 16px;border-radius:8px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.btn-ghost{background:transparent;border:1px solid #d1d5db;color:var(--accent);padding:10px 14px;border-radius:8px}
.input{width:100%;padding:12px;border-radius:8px;border:1px solid #e6e9ee;margin-top:8px}
.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:1fr 360px;gap:18px}
@media(max-width:880px){.grid{grid-template-columns:1fr}}
.profile-photo{width:120px;height:120px;border-radius:12px;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 20px rgba(16,24,40,.08)}
.preloader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0b66d61a;z-index:9999}
.pre-box{background:#fff;padding:36px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,.12);text-align:center}
.progress{height:10px;background:#e9eef8;border-radius:10px;overflow:hidden;margin-top:18px}
.progress-inner{height:100%;width:0%;background:linear-gradient(90deg,#f59e0b,#0b66d6)}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;background:#e6f4ea;color:var(--success);font-weight:600;font-size:12px}
.alert{padding:12px;border-radius:8px;background:#fff5f5;color:#b91c1c;border:1px solid #fee2e2;margin-bottom:12px}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.link-card{display:block;padding:12px;border-radius:8px;border:1px dashed #e6eef8;color:var(--accent);text-decoration:none;margin-bottom:8px}
.install-banner{position:fixed;bottom:16px;right:16px;background:#0b66d6;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(11,102,214,.18);z-index:999}
.footer{font-size:13px;color:var(--muted);text-align:center;margin-top:36px;padding-bottom:40px}
.message{padding:12px;border-radius:8px;background:#eef2ff;color:#1e3a8a;border:1px solid #e0e7ff;margin-bottom:12px}
.online-banner{position:fixed;top:0;left:50%;transform:translateX(-50%);background:#eef2ff;padding:8px 12px;border-radius:0 0 12px 12px;color:#0b66d6;font-weight:600;display:none}