/* EduPortal - Glassmorphism Utilities | Datamex College of Saint Adeline
   Palette: #0F172A (slate-900), #059669 (emerald-600), #F8FAFC
   Spec: backdrop-filter: blur(16px), translucent frosted containers
*/
:root{
  --glass-bg: rgba(255,255,255,0.15);
  --glass-border: rgba(255,255,255,0.20);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.37);
  --navy:#0F172A; --emerald:#059669; --slate:#F8FAFC;
}
*{box-sizing:border-box}
body{
  background: linear-gradient(135deg,#0F172A 0%, #1E293B 45%, #0F3D2E 100%);
  background-attachment: fixed;
  min-height:100vh;
}
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius:24px;
}
.glass-card{
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  border-radius:18px;
}
.glass-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:.82rem;
  border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.14);
  color:#fff; backdrop-filter: blur(8px); cursor:pointer; transition:.18s;
  text-decoration:none;
}
.glass-btn:hover{ background: rgba(255,255,255,0.22); transform: translateY(-1px); }
.glass-btn--primary{ background: linear-gradient(135deg,#0F172A 0%, #1E293B 100%); border-color: rgba(15,23,42,0.9); }
.glass-btn:disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.glass-input{
  background: rgba(255,255,255,0.10) !important;
  border:1px solid rgba(255,255,255,0.20) !important;
  color:#fff !important; border-radius:10px !important;
}
.glass-input::placeholder{ color: rgba(248,250,252,0.65) !important; }
.glass-muted{ color: rgba(248,250,252,0.70) !important; font-size:.78rem; }
.glass-text{ color:#F8FAFC !important; }
.glass-link{ color:#FDE68A !important; text-decoration:underline; }
.ambient{ position:fixed; inset:0; pointer-events:none; background:
  radial-gradient(600px 400px at 18% 18%, rgba(5,150,105,0.22), transparent 60%),
  radial-gradient(520px 380px at 82% 72%, rgba(56,189,248,0.18), transparent 60%); }
@keyframes floatIn{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }
.animate-in{ animation: floatIn .45s ease both; }