/* alizon-practical-glass.css
   Glassmorphism theme for all practicals — light, black letters, red for important.
   Matches the Module 1 Unit 1 aesthetic. Applies only in light mode (html:not(.dark)),
   so the theme toggle still works. Loaded AFTER each lab's own <style> so it wins.
*/
html:not(.dark) body{
  background:linear-gradient(135deg,#f6f1ec 0%,#efe8f3 44%,#e7f0f7 100%) !important;
  background-attachment:fixed;
  color:#221a1c !important;
}
/* frosted-glass cards / panels */
html:not(.dark) .card,
html:not(.dark) .acc,
html:not(.dark) .ebx,
html:not(.dark) .guide,
html:not(.dark) .repbox,
html:not(.dark) .alertc,
html:not(.dark) .plate,
html:not(.dark) .cbox,
html:not(.dark) .casecard,
html:not(.dark) .expbrief{
  background:rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 18px 50px -24px rgba(70,30,45,.42) !important;
}
/* glassy sticky tab bar (don't let content scroll through it) */
html:not(.dark) .tabs,
html:not(.dark) nav.pills{
  background:rgba(246,241,236,.72) !important;
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
}
/* black letters */
html:not(.dark) .card,
html:not(.dark) .card p,
html:not(.dark) .card li,
html:not(.dark) .ebx-body,
html:not(.dark) .ebx-head h2,
html:not(.dark) .acc .body,
html:not(.dark) td{ color:#221a1c !important; }
/* red for important / emphasised text */
html:not(.dark) .ebx-body b,
html:not(.dark) .ebx-body strong,
html:not(.dark) .card b,
html:not(.dark) .card strong,
html:not(.dark) .acc .body strong{ color:#B1040E !important; }
/* inputs stay legible on glass */
html:not(.dark) input[type=text],
html:not(.dark) input[type=number],
html:not(.dark) input[type=date],
html:not(.dark) select,
html:not(.dark) textarea{ background:rgba(255,255,255,.72) !important; color:#221a1c !important; }