@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ============================================================================
   glass-theme.css: Melophonics glass skin, ALL portals
   (admin.html, teacher.html, partner.html, parents-portal/index.html)
   ----------------------------------------------------------------------------
   This file is OVERRIDE-ONLY. It changes no markup, ids, handlers or JS, and it
   hides nothing. Every element each portal renders today is still rendered, in
   the same place in the DOM, with the same behaviour.

   INSTALL (per page, two edits; see README.md):
     1. <html lang="en" data-glass-portal="admin|teacher|partner|parents">
     2. As the LAST stylesheet in <head>:
          <link rel="stylesheet" href="/css/glass-theme.css?v=2">
   The parents portal deploys to its own site, so it gets its own copy of this
   file at parents-portal/css/glass-theme.css. Keep the two byte-identical.

   KEPT FROM THE BRAND: --brand #ffc100 and its family, the status colours, the
   six --nvc-* nav category colours, Noir for the school name (.brand-name and
   every inline font-family:'Noir'), Phosphor icons.
   CHANGED: UI type is Manrope (replacing Plus Jakarta Sans), with a slightly
   larger scale for secondary text and a darker --text-muted (#a1a5b7 measured
   2.5:1 on white; #6f7388 is 4.6:1).

   ESCAPE HATCHES
     <html class="glass-off">   the whole skin is off (runtime, no reload)
     <html class="glass-lite">  opaque surfaces, no blur, same shapes
     prefers-reduced-transparency  glass kept, made denser
     no backdrop-filter support    opaque fallbacks
   ========================================================================= */

:root {
  --glass-font: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --glass-blur: 22px;
  --glass-sat: 165%;
  --glass-white: rgba(255, 255, 255, 0.42);
  --glass-white-strong: var(--gw86, rgba(255, 255, 255, 0.86));
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-line: rgba(24, 28, 50, 0.07);
  --glass-shadow: 0 16px 40px rgba(24, 28, 50, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow-lg: 0 30px 80px rgba(24, 28, 50, 0.22), inset 0 1px 0 #fff;
  --glass-brand-a: rgba(255, 184, 0, 0.76);
  --glass-brand-b: rgba(240, 160, 0, 0.72);
  --glass-gap: 14px;
  --glass-sb: 260px;              /* teacher + partner sidebar column */
  --glass-r-lg: 22px;
  --glass-r-md: 14px;
  --glass-r-sm: 10px;
}
/* Surface + ink tokens. Light values here; dark values in §22. Every white
   glass surface in this file reads one of these, which is what lets dark
   mode swap the whole skin in one place. */
:root {
  --gw04: rgba(255, 255, 255, 0.04);
  --gw05: rgba(255, 255, 255, 0.05);
  --gw06: rgba(255, 255, 255, 0.06);
  --gw13: rgba(255, 255, 255, 0.13);
  --gw32: rgba(255, 255, 255, 0.32);
  --gw38: rgba(255, 255, 255, 0.38);
  --gw40: rgba(255, 255, 255, 0.4);
  --gw42: rgba(255, 255, 255, 0.42);
  --gw45: rgba(255, 255, 255, 0.45);
  --gw50: rgba(255, 255, 255, 0.5);
  --gw55: rgba(255, 255, 255, 0.55);
  --gw58: rgba(255, 255, 255, 0.58);
  --gw60: rgba(255, 255, 255, 0.6);
  --gw62: rgba(255, 255, 255, 0.62);
  --gw68: rgba(255, 255, 255, 0.68);
  --gw70: rgba(255, 255, 255, 0.7);
  --gw72: rgba(255, 255, 255, 0.72);
  --gw75: rgba(255, 255, 255, 0.75);
  --gw78: rgba(255, 255, 255, 0.78);
  --gw80: rgba(255, 255, 255, 0.8);
  --gw84: rgba(255, 255, 255, 0.84);
  --gw85: rgba(255, 255, 255, 0.85);
  --gw86: rgba(255, 255, 255, 0.86);
  --gw88: rgba(255, 255, 255, 0.88);
  --gw90: rgba(255, 255, 255, 0.9);
  --gw92: rgba(255, 255, 255, 0.92);
  --gw94: rgba(255, 255, 255, 0.94);
  --gw95: rgba(255, 255, 255, 0.95);
  --gw96: rgba(255, 255, 255, 0.96);
  --gw100: #fff;
  --g-sel: rgba(255, 245, 214, 0.95);
  --g-unread: rgba(255, 250, 235, 0.7);
  --g-callout: rgba(255, 250, 235, 0.8);
  --g-ok-tint: rgba(232, 255, 243, 0.8);
  --g-out: rgba(232, 244, 255, 0.8);
  --g-sticky: rgba(250, 251, 253, 0.94);
  --g-chatbody: rgba(245, 248, 250, 0.5);
  --g-door-field: rgba(15, 17, 22, 0.7);
  --g-ink2: #3f4254;
  --g-ink3: #4a4d66;
}
html[data-glass-portal="admin"] { --glass-sb: var(--fluid-sidebar); }
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) { --text-muted: #6f7388; }

/* ── 0. Type + the backdrop the glass sits on ──────────────────────────── */
html:not(.glass-off) body,
html:not(.glass-off) button,
html:not(.glass-off) input,
html:not(.glass-off) select,
html:not(.glass-off) textarea {
  font-family: var(--glass-font);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html:not(.glass-off) body { letter-spacing: -0.003em; }
/* The page colour lives on <html>, and <body> is transparent. That way the
   fixed glow layer (body::before) always shows across the whole viewport.
   If <body> painted its own background, it would cover the glows over its
   own box only, leaving a hard seam on short pages. */
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) { background: var(--bg-main); }
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body { background: transparent !important; }
/* Pages that run transparent inside a portal iframe on purpose (sheets.html
   sets body.embedded) stay transparent: the portal's glass shows through, and
   no second set of glows is drawn. */
html:not(.glass-off):has(> body.embedded) { background: transparent; }
html:not(.glass-off) body.embedded::before { display: none; }
/* Inline Plus Jakarta Sans declarations follow the new face. Inline Noir is
   NOT matched, so the school name keeps its font. */
html:not(.glass-off) [style*="Plus Jakarta Sans"] { font-family: var(--glass-font) !important; }
html:not(.glass-off) .brand-name,
html:not(.glass-off) [style*="Noir"] { font-family: 'Noir', sans-serif; }

html:not(.glass-off) body::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(260px 260px at 6% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%),
    radial-gradient(340px 340px at 15% 58%, rgba(0,158,247,0.30), rgba(0,158,247,0) 70%),
    radial-gradient(320px 320px at 2% 84%, rgba(241,65,108,0.24), rgba(241,65,108,0) 70%),
    radial-gradient(300px 300px at 17% 8%, rgba(89,60,125,0.22), rgba(89,60,125,0) 70%),
    radial-gradient(760px 760px at -4% -10%, rgba(255,193,0,0.42), rgba(255,193,0,0) 68%),
    radial-gradient(900px 900px at 104% 112%, rgba(255,193,0,0.34), rgba(255,193,0,0) 66%),
    radial-gradient(700px 700px at 58% -18%, rgba(0,158,247,0.13), rgba(0,158,247,0) 66%),
    radial-gradient(620px 620px at 34% 118%, rgba(89,60,125,0.11), rgba(89,60,125,0) 66%);
}
/* Parents has no sidebar, so its glows sit evenly behind the header and dock. */
html[data-glass-portal="parents"]:not(.glass-off) body::before {
  background:
    radial-gradient(520px 520px at 8% -6%, rgba(255,193,0,0.45), rgba(255,193,0,0) 68%),
    radial-gradient(520px 520px at 96% 4%, rgba(0,158,247,0.16), rgba(0,158,247,0) 68%),
    radial-gradient(700px 700px at 100% 100%, rgba(255,193,0,0.32), rgba(255,193,0,0) 66%),
    radial-gradient(520px 520px at 0% 92%, rgba(89,60,125,0.14), rgba(89,60,125,0) 66%),
    radial-gradient(420px 420px at 50% 104%, rgba(241,65,108,0.12), rgba(241,65,108,0) 66%);
}

/* ── 1. Sidebar (admin, teacher, partner) ──────────────────────────────── */
html:not(.glass-off) .sidebar {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--glass-brand-a), var(--glass-brand-b));
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.05);
          backdrop-filter: blur(30px) saturate(190%) brightness(1.05);
  border-right: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9), inset 1px 0 0 rgba(255,255,255,0.45),
    inset -1px 0 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(176,125,0,0.22),
    0 24px 60px rgba(176,125,0,0.24);
}
/* Frost grain, so the pane reads as etched glass. It never takes a click. */
html:not(.glass-off) .sidebar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html:not(.glass-off) .sidebar > * { position: relative; z-index: 1; }
@media (min-width: 993px) {
  /* Floats inside its own column. The column keeps its width and
     .main-content's margin-left is untouched, so nothing else reflows. */
  html:not(.glass-off) .sidebar {
    top: var(--glass-gap); left: var(--glass-gap);
    height: calc(100% - var(--glass-gap) * 2);
    width: calc(var(--glass-sb) - var(--glass-gap) * 2);
    border-radius: 24px; border: 1px solid rgba(255,255,255,0.55);
    overflow: hidden; transform-origin: 26px 26px;
  }
  html:not(.glass-off) .menu-toggle { top: calc(var(--glass-gap) + 14px); left: calc(var(--glass-gap) + 14px); }
  html[data-glass-portal="admin"]:not(.glass-off) .sidebar-brand h1 { font-size: clamp(13px, calc((var(--fluid-sidebar) - var(--glass-gap) * 2 - 95px) * 0.115), 20px); }
  html[data-glass-portal="teacher"]:not(.glass-off) .sidebar-brand h1 { font-size: 15px; letter-spacing: 0.02em; }
  html:not(.glass-off) .main-content:not(.expanded) > .top-header .header-left { margin-left: 0; }
}
html:not(.glass-off) .sidebar-brand h1 { font-weight: 800; letter-spacing: 0.04em; }
html:not(.glass-off) .sidebar-brand h1 span { letter-spacing: 0.12em; color: rgba(0,0,0,0.55); }

/* Category headers: admin's are inline-styled divs, partner's .nav-section-label */
html:not(.glass-off) .nav-bar-vertical > div[style*="uppercase"],
html:not(.glass-off) .nav-bar-vertical > div > div[style*="uppercase"],
html:not(.glass-off) .nav-section-label {
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.14em !important;
  color: rgba(0,0,0,0.58) !important; opacity: 1 !important; padding-left: 10px !important;
}
html:not(.glass-off) .nav-bar-vertical > div[style*="border-top"] { border-top-color: rgba(255,255,255,0.5) !important; }
html:not(.glass-off) .sidebar-divider { background: var(--gw50); }
html:not(.glass-off) .nav-bar-vertical { gap: 2px; padding: 18px 12px; }

html:not(.glass-off) .nav-btn {
  gap: 10px; padding: 6px 10px 6px 6px; min-height: 42px;
  border: 1px solid transparent; border-radius: 13px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; box-shadow: none;
}
html:not(.glass-off) .nav-btn:hover { transform: none; }
/* Icon tile. Colour is whatever the page gives the icon (admin: category
   colour by id); the tint is derived from it via currentColor. */
html:not(.glass-off) .nav-btn > i {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px !important; opacity: 1;
  background: var(--gw42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(176,125,0,0.12);
  transition: background 0.2s ease;
}
html:not(.glass-off) .nav-btn:hover:not(.active) { background: var(--gw32); color: #000; }
html:not(.glass-off) .nav-btn.active {
  background: var(--gw72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.95); border-left: 1px solid rgba(255,255,255,0.95);
  border-radius: 13px; padding-left: 6px; font-weight: 700;
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(176,125,0,0.18);
}
html:not(.glass-off) .nav-btn.active > i { background: color-mix(in srgb, currentColor 13%, transparent); }

/* Partner: the account card at the foot of the sidebar */
html:not(.glass-off) .sidebar-footer { border-top-color: rgba(255,255,255,0.5); }
html:not(.glass-off) .user-card {
  background: var(--gw42); border: 1px solid rgba(255,255,255,0.7); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
html:not(.glass-off) .user-card-avatar { border-radius: 11px; background: var(--gw60); overflow: hidden; }
html:not(.glass-off) .user-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
html:not(.glass-off) .user-card-name { font-size: 13px; }

/* Burger: frosted pane over the yellow; matches the header glass when the
   sidebar is closed. */
html:not(.glass-off) .menu-toggle {
  border-radius: 12px;
  background: var(--gw38); border: 1px solid rgba(255,255,255,0.7); color: #111;
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(176,125,0,0.14);
}
html:not(.glass-off) .menu-toggle:hover { background: var(--gw55); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(176,125,0,0.18); }
html:not(.glass-off) .menu-toggle.mobile-open { background: var(--gw38); border-color: rgba(255,255,255,0.7); color: #111; }
html:not(.glass-off) .menu-toggle.desktop-closed { background: var(--glass-white-strong); border-color: var(--glass-edge); box-shadow: 0 6px 16px rgba(24,28,50,0.08), inset 0 1px 0 #fff; }
@media (max-width: 992px) {
  html:not(.glass-off) .menu-toggle:not(.mobile-open) { background: var(--glass-white-strong); border-color: var(--glass-edge); }
}
html:not(.glass-off) .sidebar-overlay { background: rgba(24,28,50,0.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── 2. Top bars: .top-header (admin, teacher, parents), .topbar (partner) ─ */
html:not(.glass-off) .top-header,
html[data-glass-portal="partner"]:not(.glass-off) .topbar {
  background: var(--gw58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 10px 30px rgba(24,28,50,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
@media (min-width: 993px) {
  html:not(.glass-off) .main-content > .top-header,
  html:not(.glass-off) .main-content > .topbar {
    top: var(--glass-gap); height: 64px;
    margin: var(--glass-gap) var(--glass-gap) 0 0;
    border: 1px solid var(--glass-edge); border-radius: 20px;
  }
  html:not(.glass-off) .main-content > .top-header { padding: 0 12px 0 22px; }
  html:not(.glass-off) .main-content > .topbar { padding: 0 12px 0 22px; }
  html:not(.glass-off) .main-content.expanded > .top-header,
  html:not(.glass-off) .main-content.expanded > .topbar { margin-left: var(--glass-gap); padding-left: 70px; }
  html:not(.glass-off) .content-wrapper { padding: 18px var(--glass-gap) 30px 0; }
  html:not(.glass-off) .main-content.expanded .content-wrapper { padding-left: var(--glass-gap); }
  html:not(.glass-off) .page-body { padding: 18px var(--glass-gap) 80px 0; }
  html:not(.glass-off) .main-content.expanded .page-body { padding-left: var(--glass-gap); }
  /* Sticky list panel scrolls on its own. A % max-height resolved to "none"
     (its parent has no fixed height), so the list grew to full length and the
     page scrolled instead. Same viewport-based cap the page itself uses
     (100vh - 110px), adjusted for the floating header. */
  html:not(.glass-off) .content-wrapper .split-list { top: calc(64px + var(--glass-gap) * 2 + 4px); max-height: calc(100vh - 64px - var(--glass-gap) * 2 - 30px); }
  html:not(.glass-off) .content-wrapper .split-list > .split-list-content { min-height: 0; overscroll-behavior: contain; }
  /* parents: header floats too */
  html[data-glass-portal="parents"]:not(.glass-off) #app-view > .top-header {
    top: 12px; margin: 12px 12px 0; height: 68px;
    border: 1px solid var(--glass-edge); border-radius: 20px;
  }
}
html:not(.glass-off) .page-title,
html:not(.glass-off) .topbar-title { font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; }
html:not(.glass-off) .page-title { font-size: 20px; }
html:not(.glass-off) .topbar-title { font-size: 18px; }
html:not(.glass-off) .page-title i,
html:not(.glass-off) .topbar-title > i {
  flex: none; width: 36px; height: 36px; border-radius: 11px; margin-right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #111 !important; vertical-align: middle; font-size: 19px;
  box-shadow: 0 6px 16px rgba(255,193,0,0.42), inset 0 1px 0 rgba(255,255,255,0.5);
}
html:not(.glass-off) .topbar-subtitle { font-size: 12.5px; }
html:not(.glass-off) .header-right { gap: 10px; }
html:not(.glass-off) .notif-wrapper {
  width: 44px; height: 44px; border-radius: var(--glass-r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--gw60); border: 1px solid var(--glass-edge);
}
html:not(.glass-off) .notif-wrapper > i { font-size: 21px !important; }
html:not(.glass-off) .notif-wrapper > .badge { top: -4px !important; right: -4px !important; border: 2px solid #fff; }
html:not(.glass-off) #notifBell { width: 44px; height: 44px; border-radius: var(--glass-r-md) !important; background: var(--gw60) !important; border: 1px solid var(--glass-edge) !important; box-shadow: none; }
html:not(.glass-off) .user-profile,
html:not(.glass-off) .topbar-user {
  border-radius: var(--glass-r-md); padding: 4px 14px 4px 4px; min-height: 44px;
  background: var(--gw60); border: 1px solid var(--glass-edge);
}
html:not(.glass-off) .topbar-user:hover { background: var(--gw85); }
html:not(.glass-off) .user-avatar,
html:not(.glass-off) .topbar-avatar { border-radius: 11px; width: 36px; height: 36px; overflow: hidden; }
html:not(.glass-off) .topbar-avatar { border: 0; box-shadow: 0 0 0 2px #fff; }
html:not(.glass-off) .user-avatar img { border-radius: 11px !important; }
html:not(.glass-off) .user-name { font-size: 13.5px; white-space: nowrap; }
html:not(.glass-off) .user-role { font-size: 10.5px; letter-spacing: 0.08em; font-weight: 600; white-space: nowrap; }
@media (max-width: 992px) {
  html:not(.glass-off) .user-profile { padding: 3px; border-radius: 12px; min-height: 42px; }
  html:not(.glass-off) .notif-wrapper { width: 42px; height: 42px; }
  html:not(.glass-off) .page-title { font-size: 16px; }
  html:not(.glass-off) .page-title i { width: 30px; height: 30px; border-radius: 9px; margin-right: 9px; font-size: 16px; }
}

/* ── 3. Floating menus ─────────────────────────────────────────────────── */
html:not(.glass-off) .header-dropdown,
html:not(.glass-off) .kebab-dropdown,
html:not(.glass-off) .user-dropdown,
html:not(.glass-off) #notifDropdown,
html:not(.glass-off) #globalKebabMenu {
  background: var(--gw84) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glass-edge) !important; border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(24,28,50,0.16), inset 0 1px 0 #fff !important;
}
html:not(.glass-off) #globalKebabMenu:empty { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not(.glass-off) .header-dropdown { padding: 6px; }
html:not(.glass-off) .dropdown-item,
html:not(.glass-off) .user-dropdown-item { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }
html:not(.glass-off) .dropdown-item:hover,
html:not(.glass-off) .user-dropdown-item:hover { background: rgba(24,28,50,0.05); }
html:not(.glass-off) .dropdown-header-info { background: transparent; border-radius: 10px; }
html:not(.glass-off) .kebab-item { border-radius: 9px; font-size: 12.5px; }
html:not(.glass-off) .kebab-item:hover { background: rgba(24,28,50,0.05); }
html:not(.glass-off) .kebab-btn { border-radius: 10px; }
html:not(.glass-off) .kebab-btn:hover { background: rgba(24,28,50,0.06); }

/* ── 4. Surfaces ───────────────────────────────────────────────────────── */
html:not(.glass-off) .card,
html:not(.glass-off) .split-list,
html:not(.glass-off) .stat-card {
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-r-lg);
  box-shadow: var(--glass-shadow);
}
html:not(.glass-off) .card .card,
html:not(.glass-off) .split-list .card,
html:not(.glass-off) .alert-card .card,
html:not(.glass-off) .modal-card .card {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--gw60); border-radius: 16px; box-shadow: none;
}
html:not(.glass-off) .card h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
html:not(.glass-off) .card h3,
html:not(.glass-off) .split-list h3 { font-weight: 800; letter-spacing: -0.01em; }
html:not(.glass-off) .stat-box {
  background: var(--gw55); border: 1px solid var(--glass-edge);
  border-radius: 16px; box-shadow: inset 0 1px 0 #fff;
}
html:not(.glass-off) .stat-box h3 { font-size: 11px; letter-spacing: 0.08em; }
/* Boxes that carry a coloured rule down their left edge (inline): keep that
   edge straight so it reads as a bar, not a bracket. */
html:not(.glass-off) .stat-box[style*="border-left"],
html:not(.glass-off) .card[style*="border-left"] { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
html:not(.glass-off) .stat-box .val { font-family: var(--glass-font); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
html:not(.glass-off) label { letter-spacing: 0.06em; }

/* Partner cards: header strip, stats, tables */
html:not(.glass-off) .card-header { border-bottom-color: var(--glass-line); padding: 16px 20px; }
html:not(.glass-off) .card-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
html:not(.glass-off) .stats-row { gap: 14px; }
html:not(.glass-off) .stat-card { padding: 18px 20px; position: relative; overflow: hidden; }
html:not(.glass-off) .stat-card .stat-label { font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); }
html:not(.glass-off) .stat-card .stat-value { font-size: 30px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
html:not(.glass-off) .stat-card .stat-icon {
  float: none; position: absolute; top: 16px; right: 16px; margin: 0;
  width: 38px; height: 38px; border-radius: 12px; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,193,0,0.18); color: var(--brand-ink); font-size: 19px;
}
html:not(.glass-off) .table-wrap th {
  background: var(--gw45); border-bottom: 1px solid var(--glass-line);
  font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted);
}
html:not(.glass-off) .table-wrap td { border-bottom-color: var(--glass-line); font-size: 13.5px; }
html:not(.glass-off) .table-wrap tbody tr { transition: background 0.15s ease; }
html:not(.glass-off) .table-wrap tbody tr:hover td { background: var(--gw55); }
html:not(.glass-off) .tab-btn { font-weight: 700; }
html:not(.glass-off) .tab-btn.active { border-bottom-width: 3px; }
html:not(.glass-off) .empty-state { color: var(--text-muted); }

/* ── 5. List rows (.result-item: admin, teacher, parents) + photos ─────── */
html:not(.glass-off) .split-list-content { display: flex; flex-direction: column; gap: 2px; }
html:not(.glass-off) .result-item {
  background: transparent; border: 1px solid transparent; border-radius: 14px;
  padding: 11px 12px;
}
html:not(.glass-off) .result-item:hover:not(.active) { background: var(--gw75); padding-left: 12px; }
html:not(.glass-off) .result-item.active {
  background: var(--g-sel);
  border: 1px solid rgba(255,193,0,0.55); border-left: 1px solid rgba(255,193,0,0.55);
  border-radius: 14px; box-shadow: 0 6px 16px rgba(255,193,0,0.22);
}
html:not(.glass-off) .result-item strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
html:not(.glass-off) .result-item small { font-size: 12px; color: var(--text-muted); }

/* Student photo, or initials (js/rosterAvatar.js). Base rules are NOT gated
   on glass, so the photos look right with the skin switched off too. */
.ri-avatar {
  flex: none; width: 38px; height: 38px; margin-right: 12px;
  border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand-ink);
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
}
.ri-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-item.active .ri-avatar { box-shadow: 0 0 0 2px var(--brand); }
/* Rows that are a plain name + caption (teacher, parents) become a 2-column
   grid so the avatar sits beside both lines. */
.result-item:has(> .ri-avatar) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 0; row-gap: 3px; align-items: center;
}
.result-item:has(> .ri-avatar) > .ri-avatar { grid-row: 1 / span 2; }
.result-item:has(> .ri-avatar) > strong { align-self: end; min-width: 0; }
.result-item:has(> .ri-avatar) > small { align-self: start; grid-column: 2; min-width: 0; }
html:not(.glass-off) .ri-avatar {
  border-radius: 12px;
  background: rgba(255,193,0,0.16); color: var(--brand-ink);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 3px 8px rgba(24,28,50,0.08);
}
html:not(.glass-off) .result-item.active .ri-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
/* The student's picture beside the name at the top of the session tracker
   (admin Student Records, teacher My Students). */
.tracker-title { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 260px; }
.tracker-title > h3 { min-width: 0; overflow-wrap: anywhere; }
.ri-avatar.ri-avatar-tracker { width: 52px; height: 52px; margin-right: 0; font-size: 17px; border-radius: 50%; }
html:not(.glass-off) .ri-avatar.ri-avatar-tracker { border-radius: 16px; box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px var(--brand), 0 6px 16px rgba(24,28,50,0.12); }
@media (max-width: 600px) { .ri-avatar.ri-avatar-tracker { width: 44px; height: 44px; font-size: 15px; } }
/* Dark: initials in brand yellow on a deeper tint, a soft rim instead of white */
html[data-glass-theme="dark"]:not(.glass-off) .ri-avatar { background: rgba(255,193,0,0.14); color: #ffd54d; box-shadow: 0 0 0 1.5px rgba(255,193,0,0.35), 0 3px 8px rgba(0,0,0,0.3); }
html[data-glass-theme="dark"]:not(.glass-off) .result-item.active .ri-avatar { box-shadow: 0 0 0 2px #171b24, 0 0 0 4px var(--brand); }
html[data-glass-theme="dark"]:not(.glass-off) .ri-avatar.ri-avatar-tracker { box-shadow: 0 0 0 2px #171b24, 0 0 0 4px var(--brand), 0 6px 16px rgba(0,0,0,0.4); }
html[data-glass-theme="dark"]:not(.glass-off) .ri-avatar-xs { box-shadow: 0 0 0 2px #171b24 !important; }

/* ── 6. Sub-tabs (admin/teacher .ds-subtabs) → segmented glass ─────────── */
html:not(.glass-off) .ds-subtabs {
  width: fit-content; max-width: 100%;
  gap: 4px !important; padding: 4px; border-radius: var(--glass-r-md);
  background: var(--gw50);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-edge);
}
html:not(.glass-off) .ds-tab {
  border: 1px solid transparent; background: transparent; color: var(--g-ink2);
  border-radius: var(--glass-r-sm); padding: 8px 16px; font-size: 13px; font-weight: 700;
}
html:not(.glass-off) .ds-tab:hover:not(.active) { background: var(--gw70); transform: none; box-shadow: none; }
html:not(.glass-off) .ds-tab.active {
  background: var(--brand); border-color: var(--brand); color: #181c32;
  box-shadow: 0 4px 12px rgba(255,193,0,0.4);
}

/* ── 7. Form controls (font sizes unchanged: owner ruling, mobile wrap) ── */
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) select,
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) textarea {
  border-radius: 12px; border-color: var(--glass-line);
  background-color: var(--gw78);
  box-shadow: inset 0 1px 2px rgba(24,28,50,0.04);
}
html:not(.glass-off) input[style*="background: var(--bg-main)"],
html:not(.glass-off) select[style*="background: var(--bg-main)"] { background: var(--gw78) !important; }
html:not(.glass-off) .search-box input { border-radius: 12px; background: var(--gw78); border-color: var(--glass-line); }
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) input:focus,
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) select:focus,
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) textarea:focus,
html:not(.glass-off) .search-box input:focus {
  border-color: var(--brand); background-color: var(--gw100);
  box-shadow: 0 0 0 4px rgba(255,193,0,0.18);
}

/* ── 8. Buttons (colours unchanged; shape and depth only) ──────────────── */
:where(html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"])) button { border-radius: 11px; }
html:not(.glass-off) .btn { border-radius: 12px; }
html:not(.glass-off) .btn-primary { box-shadow: 0 6px 16px rgba(255,193,0,0.38), inset 0 1px 0 rgba(255,255,255,0.45); font-weight: 700; }
html:not(.glass-off) .btn-secondary,
html:not(.glass-off) .inline-action-btn {
  border-radius: var(--glass-r-sm);
  background: var(--gw70); border-color: var(--glass-edge);
  box-shadow: 0 1px 2px rgba(24,28,50,0.05), inset 0 1px 0 #fff;
}
html:not(.glass-off) .btn-secondary:hover,
html:not(.glass-off) .inline-action-btn:hover { background: var(--gw100); }
html:not(.glass-off) .btn-sm { border-radius: 9px; }
html:not(.glass-off) .btn-icon { border-radius: 10px; background: var(--gw60); border-color: var(--glass-edge); }
html:not(.glass-off) .badge { box-shadow: 0 2px 6px rgba(241,65,108,0.35); }

/* ── 9. Dialogs: .alert-card (admin, teacher, parents), .modal-card (partner) */
html:not(.glass-off) .modal-overlay::before {
  background: rgba(24,28,50,0.34);
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
}
html[data-glass-portal="partner"]:not(.glass-off) .modal-overlay {
  background: rgba(24,28,50,0.34);
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
}
html:not(.glass-off) .alert-card,
html:not(.glass-off) .modal-card,
html:not(.glass-off) .auth-card {
  border-top: 0;
  background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, var(--gw88);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 24px;
  box-shadow: var(--glass-shadow-lg);
}
html:not(.glass-off) .alert-card h2,
html:not(.glass-off) .modal-card h2,
html:not(.glass-off) .auth-card h2 { font-weight: 800; letter-spacing: -0.015em; }
html:not(.glass-off) .modal-card p.modal-sub { font-size: 13px; }

/* ── 10. Chat (teacher, partner, parents) ──────────────────────────────── */
html:not(.glass-off) .chat-panel {
  background: var(--gw86);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 22px;
  box-shadow: var(--glass-shadow-lg);
}
@media (max-width: 768px) { html:not(.glass-off) .chat-panel { border-radius: 0; } }
html:not(.glass-off):not([data-glass-portal="partner"]) .chat-header {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,199,30,0.92), rgba(255,186,0,0.86));
  box-shadow: inset 0 -1px 0 rgba(176,125,0,0.2);
}
html:not(.glass-off) .chat-header-pic { border-radius: 11px; overflow: hidden; }
html:not(.glass-off) .chat-header-pic img { border-radius: 11px !important; }
html:not(.glass-off) .chat-fab,
html:not(.glass-off):not([data-glass-portal="partner"]) .chat-fab-btn,
html:not(.glass-off) .fab {
  box-shadow: 0 12px 28px rgba(176,125,0,0.35), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 4px rgba(255,255,255,0.55);
}

/* ── 11. Parents portal: header, dock, login ───────────────────────────── */
html[data-glass-portal="parents"]:not(.glass-off) .top-header { height: 68px; }
html[data-glass-portal="parents"]:not(.glass-off) .top-header h1.brand-name { letter-spacing: 0.04em; }
html[data-glass-portal="parents"]:not(.glass-off) .content-area { padding-bottom: 120px; }
/* The bottom bar becomes a floating dock. The original declares these
   !important, so this has to as well. */
html[data-glass-portal="parents"]:not(.glass-off) .bottom-nav {
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  left: 50% !important; transform: translateX(-50%);
  width: min(620px, calc(100% - 20px)) !important;
  padding: 6px !important; gap: 2px;
  background: var(--gw62) !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) !important; backdrop-filter: blur(26px) saturate(190%) !important;
  border: 1px solid var(--glass-edge) !important; border-top: 1px solid var(--glass-edge) !important;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(24,28,50,0.16), inset 0 1px 0 #fff;
}
html[data-glass-portal="parents"]:not(.glass-off) .nav-item {
  padding: 8px 2px 7px; border-radius: 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--g-ink3);
}
html[data-glass-portal="parents"]:not(.glass-off) .nav-item.active {
  color: #111; transform: none;
  background: linear-gradient(180deg, rgba(255,199,30,0.95), rgba(255,186,0,0.85));
  box-shadow: 0 6px 16px rgba(255,193,0,0.42), inset 0 1px 0 rgba(255,255,255,0.6);
}
html[data-glass-portal="parents"]:not(.glass-off) .fab-container { bottom: calc(96px + env(safe-area-inset-bottom)); }
/* List rows: the parent page sets these !important */
html[data-glass-portal="parents"]:not(.glass-off) .result-item {
  background: var(--gw62) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-edge) !important; border-radius: 18px !important;
  box-shadow: 0 8px 20px rgba(24,28,50,0.06), inset 0 1px 0 #fff !important;
  margin-bottom: 10px !important;
}
html[data-glass-portal="parents"]:not(.glass-off) .result-item:hover { transform: none; border-color: rgba(255,193,0,0.55) !important; }
html[data-glass-portal="parents"]:not(.glass-off) .result-item.active {
  background: var(--g-sel) !important;
  border: 1px solid rgba(255,193,0,0.6) !important; border-left: 1px solid rgba(255,193,0,0.6) !important;
  box-shadow: 0 10px 25px rgba(255,193,0,0.22), inset 0 1px 0 #fff !important;
}
html[data-glass-portal="parents"]:not(.glass-off) .ri-avatar { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }
html[data-glass-portal="parents"]:not(.glass-off) .auth-card img { box-shadow: 0 10px 26px rgba(255,193,0,0.35); }
html[data-glass-portal="parents"]:not(.glass-off) .card { border-radius: 22px; }

/* ── 12. Scrollbars ────────────────────────────────────────────────────── */
html:not(.glass-off) .split-list-content::-webkit-scrollbar-thumb { background-color: rgba(24,28,50,0.15); }

/* ── 13. Fallbacks ─────────────────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.glass-off) .card, html:not(.glass-off) .split-list, html:not(.glass-off) .stat-card,
  html:not(.glass-off) .top-header, html[data-glass-portal="partner"]:not(.glass-off) .topbar,
  html:not(.glass-off) .header-dropdown, html:not(.glass-off) .kebab-dropdown,
  html:not(.glass-off) .user-dropdown, html:not(.glass-off) .chat-panel { background-color: var(--gw95); }
  html:not(.glass-off) .sidebar { background: var(--sidebar-bg); }
  html:not(.glass-off) .alert-card, html:not(.glass-off) .modal-card, html:not(.glass-off) .auth-card {
    background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, var(--gw100);
  }
  html[data-glass-portal="parents"]:not(.glass-off) .bottom-nav { background: var(--gw96) !important; }
}
/* 2026-10-21: the computer-wide "Transparency effects: off" setting (Windows) no longer makes the panels dense: the owner wants the glass look whatever that setting says (glass-off / glass-lite remain for people who need solid). */
@media (prefers-reduced-transparency: reduce) and (width: 1px) {
  :root {
    --glass-brand-a: rgba(255, 199, 30, 0.82);
    --glass-brand-b: rgba(255, 186, 0, 0.74);
    --glass-white: var(--gw84);
  }
  html:not(.glass-off) .top-header, html[data-glass-portal="partner"]:not(.glass-off) .topbar { background-color: var(--gw80); }
}
html.glass-lite:not(.glass-off) .card, html.glass-lite:not(.glass-off) .split-list,
html.glass-lite:not(.glass-off) .stat-card,
html.glass-lite:not(.glass-off) .top-header, html.glass-lite[data-glass-portal="partner"]:not(.glass-off) .topbar,
html.glass-lite:not(.glass-off) .header-dropdown, html.glass-lite:not(.glass-off) .kebab-dropdown,
html.glass-lite:not(.glass-off) .user-dropdown, html.glass-lite:not(.glass-off) .ds-subtabs,
html.glass-lite:not(.glass-off) .chat-panel {
  background-color: var(--gw100); -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.glass-lite:not(.glass-off) .sidebar { background: var(--sidebar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.glass-lite:not(.glass-off) .sidebar::after { display: none; }
html.glass-lite[data-glass-portal="parents"]:not(.glass-off) .bottom-nav,
html.glass-lite[data-glass-portal="parents"]:not(.glass-off) .result-item {
  background: var(--gw100) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ── 15. Embedded apps and the staff login ─────────────────────────────
   index.html (login), invoice.html, accountingapp.html, expensesApp.html,
   sheets.html (both copies), eventplanner.html, bugadmin.html.
   Each is opened on its own AND inside a portal's iframe; either way it now
   reads as the same glass system. Invoice paper, ledgers and anything printed
   stay solid white. */
html:is([data-glass-portal="app"], [data-glass-portal="public"], [data-glass-portal="classroom"], [data-glass-portal="door"]):not(.glass-off) *:not(i):not([class*="ph-"]):not(pre):not(code):not(.ep-mono):not(.ep-seatchip):not(.tid):not(.brand-name):not(.paper-company-name):not([style*="Noir"]):not(.invoice-paper):not(.invoice-paper *) {
  font-family: var(--glass-font);
}
/* The printed invoice paper keeps the fonts it is laid out in (excluded above). */

/* Top navigation strip (invoice / accounting / expenses) */
html:not(.glass-off) .navbar {
  background: var(--gw58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 10px 30px rgba(24,28,50,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
}
html:not(.glass-off) .tab-nav { gap: 4px; }
html:not(.glass-off) .navbar .tab-btn { border-radius: 12px; padding: 9px 16px; font-weight: 700; color: var(--g-ink3); }
html:not(.glass-off) .navbar .tab-btn:hover:not(.active) { background: var(--gw70); color: #181c32; }
html:not(.glass-off) .navbar .tab-btn.active { color: #111; box-shadow: 0 6px 16px rgba(255,193,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
@media (max-width: 768px) {
  html:not(.glass-off) .navbar { background: transparent; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:not(.glass-off) .tab-nav { background: var(--gw86); border-color: var(--glass-edge); border-radius: 16px; }
}
html:not(.glass-off) .custom-select-box,
html:not(.glass-off) #customBranchSelector {
  border-radius: 12px; background: var(--gw78); border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 #fff;
}
html:not(.glass-off) .custom-select-options,
html:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu,
html:not(.glass-off) .shared-dropdown {
  background: var(--gw88);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(24,28,50,0.16), inset 0 1px 0 #fff;
}

/* Surfaces: KPI cards, charts, ledgers, filters, action bars, list rails */
html:not(.glass-off) .chart-container,
html:not(.glass-off) .ledger-container,
html:not(.glass-off) .filter-bar,
html:not(.glass-off) .save-action-bar,
html:not(.glass-off) .ticket,
html:not(.glass-off) .memo-card,
html:not(.glass-off) .ep-card {
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge); border-radius: 20px;
  box-shadow: var(--glass-shadow);
}
html:not(.glass-off) .kpi-card {
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius: 20px;
}
/* KPI cards keep the page's own coloured left rule (colour per card type):
   only the other three edges are restyled, and that edge stays straight. */
html:not(.glass-off) .kpi-card { border-top: 0; border-right: 0; border-bottom: 0; border-left-width: 6px; border-left-style: solid; border-top-left-radius: 6px; border-bottom-left-radius: 6px; box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(255,255,255,0.8); }
html:not(.glass-off) .kpi-card .kpi-value { font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
html:not(.glass-off) .kpi-card .kpi-title { letter-spacing: 0.08em; }
html:not(.glass-off) .ledger-header { background: var(--gw40); border-bottom-color: var(--glass-line); }
html:not(.glass-off) .ledger-table th { background: var(--gw45); border-bottom-color: var(--glass-line); letter-spacing: 0.08em; }
html:not(.glass-off) .ledger-table td { border-bottom-color: var(--glass-line); font-variant-numeric: tabular-nums; }
html:not(.glass-off) .ledger-table tbody tr:hover td { background: var(--gw55); }
html:not(.glass-off) .list-sidebar {
  background: var(--gw60);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-right: 1px solid var(--glass-edge);
}
html:not(.glass-off) .list-sidebar-header { background: var(--gw45); border-bottom-color: var(--glass-line); }
html:not(.glass-off) .invoice-list-container { background: transparent; }
/* the paper itself: solid, lifted */
html:not(.glass-off) .invoice-paper { box-shadow: 0 24px 60px rgba(24,28,50,0.14), 0 2px 6px rgba(24,28,50,0.06); }

/* Buttons in the apps */
html:not(.glass-off) .btn-dark { background: #1e2235; box-shadow: 0 6px 16px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.12); }
html:not(.glass-off) .btn.secondary,
html:not(.glass-off) .reload-btn,
html:not(.glass-off) .ep-btn {
  background: var(--gw72); border-color: var(--glass-edge);
  box-shadow: 0 1px 2px rgba(24,28,50,0.05), inset 0 1px 0 #fff;
}
html:not(.glass-off) .fchip { background: var(--gw68); border-color: var(--glass-edge); }
html:not(.glass-off) .fchip.active { box-shadow: 0 4px 12px rgba(255,193,0,0.4); }

/* Dialogs in the apps */
html:not(.glass-off) .modal-content,
html:not(.glass-off) .overlay > .modal,
html:not(.glass-off) .mpc-card,
html:not(.glass-off) .ep-modal {
  background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, var(--gw90);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--glass-edge); border-top: 0; border-radius: 24px;
  box-shadow: var(--glass-shadow-lg);
}
html:not(.glass-off) .modal-header { font-weight: 800; letter-spacing: -0.015em; }
html:not(.glass-off) .overlay { background: rgba(24,28,50,0.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-glass-portal="app"]:not(.glass-off) .modal-overlay { background: rgba(24,28,50,0.34); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }

/* Sheets + Bug Center: the navy hero becomes frosted brand glass */
html[data-glass-portal="app"]:not(.glass-off) .topbar {
  color: #14172b;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.1) 35%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,199,30,0.70), rgba(255,186,0,0.55));
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(176,125,0,0.18);
}
html[data-glass-portal="app"]:not(.glass-off) .topbar .logo { background: var(--gw55); color: #14172b; box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(176,125,0,0.18); }
html[data-glass-portal="app"]:not(.glass-off) .topbar h1 { font-weight: 800; letter-spacing: -0.015em; }
html[data-glass-portal="app"]:not(.glass-off) .topbar h1 span { color: #7a5600; }
html[data-glass-portal="app"]:not(.glass-off) .topbar p { color: rgba(20,23,43,0.72); }
html:not(.glass-off) .ptabs { background: var(--gw55); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html:not(.glass-off) .ptabs button.active { box-shadow: 0 4px 12px rgba(255,193,0,0.4); }
html:not(.glass-off) .sheet-row { border-bottom-color: var(--glass-line); }
html:not(.glass-off) .view-toggle { border-color: var(--glass-edge); background: var(--gw60); }

/* Event Planner: glass header + rail */
html:not(.glass-off) .ep-head,
html:not(.glass-off) .ep-rail {
  background: var(--gw58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-edge);
}
html:not(.glass-off) .ep-brand-icon { box-shadow: 0 6px 16px rgba(255,193,0,0.42), inset 0 1px 0 rgba(255,255,255,0.5); }
html:not(.glass-off) .ep-tab { border-radius: 12px; }
html:not(.glass-off) .ep-tab:hover { background: var(--gw70); }
html:not(.glass-off) .ep-tab[aria-current="page"] { background: var(--brand); box-shadow: 0 6px 16px rgba(255,193,0,0.38), inset 0 1px 0 rgba(255,255,255,0.5); }

/* Staff login */
html:not(.glass-off) .login-box {
  background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, var(--gw72);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 26px;
  box-shadow: var(--glass-shadow-lg);
}
html:not(.glass-off) .login-box h2:not(.brand-name) { font-family: var(--glass-font); letter-spacing: -0.01em; text-transform: none; }
html:not(.glass-off) .login-box input { background: var(--gw80); border-color: var(--glass-line); border-radius: 12px; }
html:not(.glass-off) .login-box button { border-radius: 12px; font-family: var(--glass-font); letter-spacing: 0.06em; }
html:not(.glass-off) .login-box button:not(.btn-secondary) { box-shadow: 0 8px 20px rgba(255,193,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
html:not(.glass-off) .login-box .btn-secondary { background: var(--gw70); border-color: var(--glass-edge); }
@media (max-width: 768px) {
  html:not(.glass-off) .login-box { border-radius: 0; background: linear-gradient(var(--brand), var(--brand)) top / 100% 6px no-repeat, var(--gw70); }
}
@media print {
  html:not(.glass-off) .invoice-paper { box-shadow: none; }
}

/* ── 16. Schedules (teacher My Schedule, admin Master Calendar) and the
   partner portal's inline confirm / notice boxes ──────────────────────── */
html:not(.glass-off) .calendar-controls {
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge); border-radius: 20px; box-shadow: var(--glass-shadow);
}
html:not(.glass-off) .cal-grid-wrapper {
  background: var(--gw70);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge); border-radius: 20px; box-shadow: var(--glass-shadow);
}
/* Sticky header row and time column stay near-opaque: grid content scrolls
   underneath them. */
html:not(.glass-off) .cal-header-cell { background: var(--g-sticky); border-bottom-color: var(--glass-line); letter-spacing: 0.08em; }
html:not(.glass-off) .cal-time-col { background: var(--gw94); border-right-color: var(--glass-line); font-variant-numeric: tabular-nums; }
html:not(.glass-off) .cal-slot { border-radius: 9px; }
html:not(.glass-off) .slot-booked { box-shadow: 0 3px 10px rgba(255,193,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45); }
html:not(.glass-off) .slot-open { background: var(--gw60); }
html:not(.glass-off) .slot-tooltip { border-radius: 9px; box-shadow: 0 8px 20px rgba(24,28,50,0.25); }

html[data-glass-portal="partner"]:not(.glass-off) #confirmModal,
html[data-glass-portal="partner"]:not(.glass-off) #toastModal {
  background: rgba(24,28,50,0.34) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
}
html[data-glass-portal="partner"]:not(.glass-off) #confirmModal > div,
html[data-glass-portal="partner"]:not(.glass-off) #toastModal > div {
  background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, var(--gw90) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 22px !important;
  box-shadow: var(--glass-shadow-lg) !important;
}
html[data-glass-portal="partner"]:not(.glass-off) #confirmModal button,
html[data-glass-portal="partner"]:not(.glass-off) #toastModal button { border-radius: 11px !important; }

/* ── 17. Public pages: enroll, contact, event, programme, privacy,
   data-deletion, T&C and manual (both sites). Printed documents (the T&C and
   manual books, programme booklet pages) keep their paper exactly. ──────── */
html[data-glass-portal="public"]:not(.glass-off) .hero {
  color: #14172b;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.1) 35%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,199,30,0.72), rgba(255,186,0,0.56));
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(176,125,0,0.18);
}
html[data-glass-portal="public"]:not(.glass-off) .hero h1 { color: #14172b; font-weight: 800; letter-spacing: -0.015em; }
html[data-glass-portal="public"]:not(.glass-off) .hero h1 span { color: #7a5600; }
html[data-glass-portal="public"]:not(.glass-off) .hero p { color: rgba(20,23,43,0.74); }
html[data-glass-portal="public"]:not(.glass-off) .hero .logo { box-shadow: 0 10px 26px rgba(176,125,0,0.28), inset 0 1px 0 #fff; }
html[data-glass-portal="public"]:not(.glass-off) .btn { box-shadow: 0 8px 20px rgba(255,193,0,0.38), inset 0 1px 0 rgba(255,255,255,0.5); }
html[data-glass-portal="public"]:not(.glass-off) .btn.ghost { background: var(--gw70); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 #fff; color: var(--g-ink2); }
html[data-glass-portal="public"]:not(.glass-off) .pager-track { background: rgba(24,28,50,0.08); }
html[data-glass-portal="public"]:not(.glass-off) .pager-fill { box-shadow: 0 0 10px rgba(255,193,0,0.6); }
html[data-glass-portal="public"]:not(.glass-off) .callout { background: var(--g-callout); border-color: rgba(245,215,142,0.8); border-left-color: var(--brand); }
html[data-glass-portal="public"]:not(.glass-off) .stamp,
html[data-glass-portal="public"]:not(.glass-off) .sep { border-color: var(--glass-line); }
html[data-glass-portal="public"]:not(.glass-off) .tnc-panel { border-radius: 22px; border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow-lg); }
html[data-glass-portal="public"]:not(.glass-off) .tnc-overlay { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Event tickets page: already frosted; brought onto the same system */
html[data-glass-portal="public"]:not(.glass-off) .ev-card { border-radius: 22px; box-shadow: var(--glass-shadow); }
html[data-glass-portal="public"]:not(.glass-off) .ev-btn:not(.ev-btn-quiet) { box-shadow: 0 8px 20px rgba(255,193,0,0.38), inset 0 1px 0 rgba(255,255,255,0.5); }
html[data-glass-portal="public"]:not(.glass-off) .ev-btn-quiet { background: var(--gw72); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 #fff; }
html[data-glass-portal="public"]:not(.glass-off) .ev-input { background: var(--gw80); border-color: var(--glass-line); }
html[data-glass-portal="public"]:not(.glass-off) .ev-modal { background: rgba(24,28,50,0.34); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
html[data-glass-portal="public"]:not(.glass-off) .ev-bar { background: var(--gw70); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--glass-edge); box-shadow: 0 14px 34px rgba(24,28,50,0.14), inset 0 1px 0 #fff; }
/* Programme booklet: glass bar only */
html[data-glass-portal="public"]:not(.glass-off) .pg-bar {
  background: var(--gw62);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-edge);
}
html[data-glass-portal="public"]:not(.glass-off) .pg-name { font-weight: 800; letter-spacing: -0.01em; }
/* T&C and manual books: the grey desk becomes the glow backdrop */
html[data-glass-portal="public"]:not(.glass-off) .download-btn {
  border-radius: 12px; letter-spacing: 0.06em;
  box-shadow: 0 10px 26px rgba(24,28,50,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── 18. Virtual classroom: DARK glass (classroom.html, classroom-camera.html,
   both sites). Kept dark on purpose: tokens.css, "a lit room behind a video
   call is a lamp pointed at the person using it". Only the surfaces become
   frosted; every --cr-* colour keeps its meaning. ─────────────────────── */
html[data-glass-portal="classroom"]:not(.glass-off) {
  --cr-surface: rgba(30, 34, 45, 0.64);
  --cr-line: rgba(255, 255, 255, 0.10);
}
html[data-glass-portal="classroom"]:not(.glass-off) body::before {
  background:
    radial-gradient(620px 620px at -6% -10%, rgba(255,193,0,0.13), rgba(255,193,0,0) 68%),
    radial-gradient(700px 700px at 106% 0%, rgba(0,158,247,0.11), rgba(0,158,247,0) 66%),
    radial-gradient(760px 760px at 100% 108%, rgba(89,60,125,0.16), rgba(89,60,125,0) 66%),
    radial-gradient(520px 520px at 0% 100%, rgba(255,193,0,0.08), rgba(255,193,0,0) 66%);
}
html[data-glass-portal="classroom"]:not(.glass-off) .cr-card {
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.07);
}
html[data-glass-portal="classroom"]:not(.glass-off) .cr-bar,
html[data-glass-portal="classroom"]:not(.glass-off) body > header {
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-glass-portal="classroom"]:not(.glass-off) .cr-ctl {
  background: var(--gw06); border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
html[data-glass-portal="classroom"]:not(.glass-off) .cr-ctl:hover { background: var(--gw13); }
html[data-glass-portal="classroom"]:not(.glass-off) .cr-primary { box-shadow: 0 8px 22px rgba(255,193,0,0.30), inset 0 1px 0 rgba(255,255,255,0.45); }
html[data-glass-portal="classroom"]:not(.glass-off) .cr-ghost { background: var(--gw05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
html[data-glass-portal="classroom"]:not(.glass-off) .cr-toggle { background: var(--gw04); border-radius: 12px; }
html[data-glass-portal="classroom"]:not(.glass-off) .cr-dialog {
  background: rgba(8,10,16,0.5);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
}
html[data-glass-portal="classroom"]:not(.glass-off) .cr-banner { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* CONTRAST PASS 2026-10-29: the in-room panels (tracker, queue, chat, reaction menu) and the small
   labels laid over video took the translucent --cr-surface / black-at-55% fill but NO blur, so the
   live picture showed through un-blurred behind the text. Same frosted treatment as .cr-card. */
html[data-glass-portal="classroom"]:not(.glass-off) :is(#tracker, #queue, #chat, #reactMenu, .cr-rail-toggle, .cr-pin, .cr-hand, .cr-tile-label, .cr-tile-bind, .cr-pointer > span, .pipx-bar) {
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
html[data-glass-portal="classroom"]:not(.glass-off) :is(#tracker, #queue, #chat, #reactMenu) { --cr-surface: rgba(30, 34, 45, 0.84); }
html[data-glass-portal="classroom"]:not(.glass-off) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-glass-portal="classroom"]:not(.glass-off) select,
html[data-glass-portal="classroom"]:not(.glass-off) textarea { border-radius: 10px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass-portal="classroom"]:not(.glass-off) { --cr-surface: #1e222d; --cr-line: #2d3341; }
}
html.glass-lite[data-glass-portal="classroom"]:not(.glass-off) { --cr-surface: #1e222d; --cr-line: #2d3341; }

/* ── 19. Mailbox (admin › Support › Mail, and the Memos composer) ─────── */
html:not(.glass-off) #view-mailbox .mb-card {
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge); border-radius: 20px; box-shadow: var(--glass-shadow);
}
html:not(.glass-off) #view-mailbox .mb-tabs { gap: 4px; padding: 4px; width: fit-content; max-width: 100%; border-radius: 14px; background: var(--gw50); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html:not(.glass-off) #view-mailbox .mb-tab { border-color: transparent; background: transparent; border-radius: 10px; color: var(--g-ink2); }
html:not(.glass-off) #view-mailbox .mb-tab:hover:not(.on) { background: var(--gw70); }
html:not(.glass-off) #view-mailbox .mb-tab.on { background: var(--brand); border-color: var(--brand); color: #181c32; box-shadow: 0 4px 12px rgba(255,193,0,0.4); }
html:not(.glass-off) #view-mailbox .mb-btn { border-radius: 11px; background: var(--gw72); border-color: var(--glass-edge); box-shadow: 0 1px 2px rgba(24,28,50,0.05), inset 0 1px 0 #fff; }
html:not(.glass-off) #view-mailbox .mb-btn:hover { background: var(--gw100); }
html:not(.glass-off) #view-mailbox .mb-btn.primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 6px 16px rgba(255,193,0,0.38), inset 0 1px 0 rgba(255,255,255,0.45); }
html:not(.glass-off) #view-mailbox .mb-thread { border-bottom-color: var(--glass-line); border-radius: 12px; transition: background 0.15s ease; }
html:not(.glass-off) #view-mailbox .mb-thread:hover { background: var(--gw75); }
html:not(.glass-off) #view-mailbox .mb-thread.unread { background: var(--g-unread); }
html:not(.glass-off) #view-mailbox .mb-thread.on { background: var(--g-sel); box-shadow: inset 0 0 0 1px rgba(255,193,0,0.55); }
html:not(.glass-off) #view-mailbox .mb-msg { border-color: var(--glass-line); border-radius: 14px; background: var(--gw70); }
html:not(.glass-off) #view-mailbox .mb-msg.out { background: var(--g-out); border-color: rgba(0,158,247,0.22); }
html:not(.glass-off) #view-mailbox .mb-alert { border-radius: 12px; }
html:not(.glass-off) #view-mailbox .mb-replywrap,
html:not(.glass-off) :is(#view-mailbox, #view-memos, #mpc-compose-body) .mbc-wrap {
  background: var(--gw90);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 20px; overflow: hidden;
  box-shadow: var(--glass-shadow-lg);
}
html:not(.glass-off) :is(#view-mailbox, #view-memos, #mpc-compose-body) .mbc-head {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,199,30,0.9), rgba(255,186,0,0.82));
  border-bottom-color: rgba(176,125,0,0.18);
}
html:not(.glass-off) :is(#view-mailbox, #view-memos, #mpc-compose-body) .mbc-toolbar { border-color: var(--glass-line); border-radius: 12px; background: var(--gw60); }
html:not(.glass-off) :is(#view-mailbox, #view-memos, #mpc-compose-body) .mbc-send { box-shadow: 0 6px 16px rgba(255,193,0,0.4), inset 0 1px 0 rgba(255,255,255,0.45); }
html:not(.glass-off) :is(#view-mailbox, #view-memos, #mpc-compose-body) .mbc-backdrop { background: rgba(24,28,50,0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 768px) {
  html:not(.glass-off) #view-mailbox .mb-replywrap { border-radius: 20px 20px 0 0; }
}

/* ── 20. Event door scanner (event-door.html): DARK glass, like the
   classroom. It is used on a phone at a dark venue door, so it stays dark.
   The result colours (go / wait / stop) are untouched. ─────────────────── */
html[data-glass-portal="door"]:not(.glass-off) {
  --dp-card: rgba(30, 33, 41, 0.66);
  --dp-line: rgba(255, 255, 255, 0.10);
}
html[data-glass-portal="door"]:not(.glass-off) body::before {
  background:
    radial-gradient(560px 560px at -8% -8%, rgba(255,193,0,0.14), rgba(255,193,0,0) 68%),
    radial-gradient(600px 600px at 108% 4%, rgba(0,158,247,0.10), rgba(0,158,247,0) 66%),
    radial-gradient(700px 700px at 100% 108%, rgba(89,60,125,0.15), rgba(89,60,125,0) 66%);
}
html[data-glass-portal="door"]:not(.glass-off) .dp-card,
html[data-glass-portal="door"]:not(.glass-off) .dp-status,
html[data-glass-portal="door"]:not(.glass-off) .dp-ask-box,
html[data-glass-portal="door"]:not(.glass-off) .dp-undo {
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
}
html[data-glass-portal="door"]:not(.glass-off) .dp-card { border-radius: 20px; }
html[data-glass-portal="door"]:not(.glass-off) .dp-tab,
html[data-glass-portal="door"]:not(.glass-off) .dp-btn:not(.dp-btn-main) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
html[data-glass-portal="door"]:not(.glass-off) .dp-tab[aria-selected="true"],
html[data-glass-portal="door"]:not(.glass-off) .dp-btn-main,
html[data-glass-portal="door"]:not(.glass-off) .dp-seat[aria-pressed="true"] { box-shadow: 0 8px 22px rgba(255,193,0,0.30), inset 0 1px 0 rgba(255,255,255,0.45); }
html[data-glass-portal="door"]:not(.glass-off) .dp-ask { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-glass-portal="door"]:not(.glass-off) .dp-field,
html[data-glass-portal="door"]:not(.glass-off) .dp-seat { background: var(--g-door-field); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass-portal="door"]:not(.glass-off) { --dp-card: #1e2129; --dp-line: #2e323d; }
}
html.glass-lite[data-glass-portal="door"]:not(.glass-off) { --dp-card: #1e2129; --dp-line: #2e323d; }

/* ── 21. Chat (admin, teacher, partner, parents): inside the panel ─────
   Bubble colours keep each portal's meaning: your messages stay brand
   yellow (admin, teacher), navy (parents) or blue (partner). Received
   messages become white glass. Partner's chat keeps its blue identity,
   because its header text is white. */
html:not(.glass-off) .chat-directory,
html:not(.glass-off) #chatDirectory { background: transparent; }
html:not(.glass-off) #chatSearchContainer,
html:not(.glass-off) #chatDirectoryWrapper > div:first-child[style*="background:var(--gw100)"] {
  background: var(--gw55) !important; border-bottom: 1px solid var(--glass-line) !important;
}
/* the search strip is frosted glass too (owner 2026-10-22: it looked like a solid dark band): see-through tint plus a blur of whatever scrolls under it */
html:not(.glass-off) #chatSearchContainer { -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); background: transparent !important; }
html[data-glass-theme="dark"]:not(.glass-off) #chatSearchContainer { background: transparent !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #chatSearchInput { background: rgba(255,255,255,0.10) !important; color: #eceef4; border-color: rgba(255,255,255,0.16) !important; }
html:not(.glass-off) #chatSearchInput {
  background: var(--gw90) !important; border: 1px solid var(--glass-line) !important;
  border-radius: 14px !important; height: 38px; box-shadow: inset 0 1px 2px rgba(24,28,50,0.04);
}
html:not(.glass-off) #chatSearchInput:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(255,193,0,0.18); }
html:not(.glass-off) .chat-dir-item { border-bottom-color: var(--glass-line); transition: background 0.15s ease; }
html:not(.glass-off) .chat-dir-item:hover { background: var(--gw75); }
html:not(.glass-off) .chat-dir-pic {
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(24,28,50,0.08);
}
html:not(.glass-off) .chat-dir-pic img { border-radius: 14px !important; }
html:not(.glass-off) .chat-cat-chip { background: var(--gw70); border-color: var(--glass-edge); border-radius: 999px; }
html:not(.glass-off) .chat-cat-chip:hover { background: var(--gw100); }
html:not(.glass-off) .chat-body { background: var(--g-chatbody); }
/* bubbles: a little more air, softer corners, depth */
html:not(.glass-off) .chat-bubble { border-radius: 18px; padding: 10px 14px; line-height: 1.5; }
html:not(.glass-off) .chat-sent { border-radius: 18px 18px 6px 18px; box-shadow: 0 6px 16px rgba(255,193,0,0.28), inset 0 1px 0 rgba(255,255,255,0.45); }
html[data-glass-portal="parents"]:not(.glass-off) .chat-sent { box-shadow: 0 6px 16px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.12); }
html:not(.glass-off) .chat-received,
html:not(.glass-off) .chat-bubble.them,
html:not(.glass-off) .chat-typing {
  background: var(--gw92); color: #181c32;
  border: 1px solid var(--glass-edge); border-radius: 18px 18px 18px 6px;
  box-shadow: 0 4px 12px rgba(24,28,50,0.07), inset 0 1px 0 #fff;
}
html:not(.glass-off) .chat-bubble.me { border-radius: 18px 18px 6px 18px; box-shadow: 0 6px 16px rgba(0,158,247,0.28), inset 0 1px 0 rgba(255,255,255,0.3); }
html:not(.glass-off) .chat-media { border-radius: 12px; }
html:not(.glass-off) .chat-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
/* composer row */
html:not(.glass-off) .chat-footer {
  background: var(--gw72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-line);
}
html:not(.glass-off) .chat-input {
  background: var(--gw92); border: 1px solid var(--glass-line); border-radius: 22px;
  min-height: 40px; box-shadow: inset 0 1px 2px rgba(24,28,50,0.04);
}
html:not(.glass-off) .chat-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255,193,0,0.18); }
html[data-glass-portal="partner"]:not(.glass-off) .chat-input:focus { border-color: var(--info); box-shadow: 0 0 0 4px rgba(0,158,247,0.16); }
/* send: a filled round button (partner's is already one, in blue) */
html:not(.glass-off):not([data-glass-portal="partner"]) .chat-send-btn {
  width: 40px; height: 40px; padding: 0; flex: none; border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--brand); color: #111;
  box-shadow: 0 6px 16px rgba(255,193,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
html[data-glass-portal="partner"]:not(.glass-off) .chat-send-btn { box-shadow: 0 6px 16px rgba(0,158,247,0.35), inset 0 1px 0 rgba(255,255,255,0.3); }
html:not(.glass-off) .chat-attach-btn { color: var(--brand-ink); }
/* partner header: frosted blue */
html[data-glass-portal="partner"]:not(.glass-off) .chat-header {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(0,158,247,0.94), rgba(0,132,220,0.9));
}
html[data-glass-portal="partner"]:not(.glass-off) .chat-fab-btn { box-shadow: 0 12px 28px rgba(0,132,220,0.4), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 4px rgba(255,255,255,0.55); }
/* full-screen photo viewer */
html:not(.glass-off) .chat-img-overlay { background: rgba(8,10,16,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html:not(.glass-off) .chat-img-overlay img { border-radius: 14px; }
html:not(.glass-off) .chat-img-close { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18) !important; }

/* ── 22. DARK MODE ──────────────────────────────────────────────────────
   On when <html data-glass-theme="dark"> (set by js/glass-mode.js from the
   person's choice: Light / Dark / Auto). Same glass, same brand: the yellow
   sidebar, hero bands and chat headers stay yellow; the page, cards, menus
   and dialogs go dark. Documents stay paper-white (invoice paper, T&C and
   manual books, programme booklet, certificates, the email canvas). The
   classroom and the door scanner are dark already and are not affected. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) {
  color-scheme: dark;
  --gw04: rgba(30, 35, 46, 0.12);
  --gw05: rgba(30, 35, 46, 0.13);
  --gw06: rgba(30, 35, 46, 0.14);
  --gw13: rgba(30, 35, 46, 0.21);
  --gw32: rgba(30, 35, 46, 0.40);
  --gw38: rgba(30, 35, 46, 0.46);
  --gw40: rgba(30, 35, 46, 0.48);
  --gw42: rgba(30, 35, 46, 0.50);
  --gw45: rgba(30, 35, 46, 0.53);
  --gw50: rgba(30, 35, 46, 0.58);
  --gw55: rgba(30, 35, 46, 0.63);
  --gw58: rgba(30, 35, 46, 0.66);
  --gw60: rgba(30, 35, 46, 0.68);
  --gw62: rgba(30, 35, 46, 0.70);
  --gw68: rgba(30, 35, 46, 0.76);
  --gw70: rgba(30, 35, 46, 0.78);
  --gw72: rgba(30, 35, 46, 0.80);
  --gw75: rgba(30, 35, 46, 0.83);
  --gw78: rgba(30, 35, 46, 0.86);
  --gw80: rgba(30, 35, 46, 0.88);
  --gw84: rgba(30, 35, 46, 0.92);
  --gw85: rgba(30, 35, 46, 0.93);
  --gw86: rgba(30, 35, 46, 0.94);
  --gw88: rgba(30, 35, 46, 0.96);
  --gw90: rgba(30, 35, 46, 0.97);
  --gw92: rgba(30, 35, 46, 0.97);
  --gw94: rgba(30, 35, 46, 0.97);
  --gw95: rgba(30, 35, 46, 0.97);
  --gw96: rgba(30, 35, 46, 0.97);
  --gw100: rgba(30, 35, 46, 0.97);
  --g-sel: rgba(255, 193, 0, 0.16);
  --g-unread: rgba(255, 193, 0, 0.07);
  --g-callout: rgba(255, 193, 0, 0.10);
  --g-ok-tint: rgba(80, 205, 137, 0.14);
  --g-out: rgba(0, 158, 247, 0.16);
  --g-sticky: rgba(24, 28, 37, 0.96);
  --g-chatbody: rgba(14, 17, 23, 0.5);
  --g-ink2: #c9cddb;
  --g-ink3: #a9aec0;
  /* the page's own tokens (tokens.css). !important because Global Settings
     writes the light values inline on <html> (style="--bg-main:…"), and an
     inline declaration beats any normal stylesheet rule. */
  --bg-main: #0e1117 !important;
  --card-bg: #171b24 !important;
  --bg-card: #171b24 !important;
  --bg-color: #0e1117 !important;
  --text-dark: #eceef4 !important;
  --text-main: #eceef4 !important;
  --text-muted: #9ba1b5 !important;
  --border-color: rgba(255, 255, 255, 0.08) !important;
  --brand-light: rgba(255, 193, 0, 0.14) !important;
  --danger-light: rgba(241, 65, 108, 0.14) !important;
  --success-light: rgba(80, 205, 137, 0.14) !important;
  --info-light: rgba(0, 158, 247, 0.14) !important;
  --warning-light: rgba(255, 149, 0, 0.14) !important;
  --bg-hover: rgba(255, 255, 255, 0.05) !important;
  /* readable ink for status text (tokens.css --*-ink): bright originals read well on dark */
  --info-ink: #3fb5ff !important;
  --success-ink: #5fdc98 !important;
  --warning-ink: #ffab3d !important;
  --danger-ink: #ff6f93 !important;
  --brand-ink: #ffd45c !important;
  --info-solid: #0068a8 !important;
  /* glass */
  --glass-edge: rgba(255, 255, 255, 0.09);
  --glass-line: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* the sidebar stays yellow, a touch deeper so it doesn't glare at night */
  --glass-brand-a: rgba(255, 193, 0, 0.82);
  --glass-brand-b: rgba(240, 170, 0, 0.72);
  /* ink used by the pages' own CSS for light surfaces */
  --ep-ink-1: #c9cddb;
}
/* Surfaces that sit ON yellow keep the light glass values */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .sidebar,
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .menu-toggle:not(.desktop-closed),
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-header,
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"])[data-glass-portal="app"] .topbar,
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"])[data-glass-portal="public"] .hero,
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(#view-mailbox, #view-memos, #mpc-compose-body) .mbc-head {
  --gw04: rgba(255, 255, 255, 0.04);
  --gw05: rgba(255, 255, 255, 0.05);
  --gw06: rgba(255, 255, 255, 0.06);
  --gw13: rgba(255, 255, 255, 0.13);
  --gw32: rgba(255, 255, 255, 0.32);
  --gw38: rgba(255, 255, 255, 0.38);
  --gw40: rgba(255, 255, 255, 0.4);
  --gw42: rgba(255, 255, 255, 0.42);
  --gw45: rgba(255, 255, 255, 0.45);
  --gw50: rgba(255, 255, 255, 0.5);
  --gw55: rgba(255, 255, 255, 0.55);
  --gw58: rgba(255, 255, 255, 0.58);
  --gw60: rgba(255, 255, 255, 0.6);
  --gw62: rgba(255, 255, 255, 0.62);
  --gw68: rgba(255, 255, 255, 0.68);
  --gw70: rgba(255, 255, 255, 0.7);
  --gw72: rgba(255, 255, 255, 0.72);
  --gw75: rgba(255, 255, 255, 0.75);
  --gw78: rgba(255, 255, 255, 0.78);
  --gw80: rgba(255, 255, 255, 0.8);
  --gw84: rgba(255, 255, 255, 0.84);
  --gw85: rgba(255, 255, 255, 0.85);
  --gw86: rgba(255, 255, 255, 0.86);
  --gw88: rgba(255, 255, 255, 0.88);
  --gw90: rgba(255, 255, 255, 0.9);
  --gw92: rgba(255, 255, 255, 0.92);
  --gw94: rgba(255, 255, 255, 0.94);
  --gw95: rgba(255, 255, 255, 0.95);
  --gw96: rgba(255, 255, 255, 0.96);
  --gw100: #fff;
  --g-sel: rgba(255, 245, 214, 0.95);
  --g-unread: rgba(255, 250, 235, 0.7);
  --g-callout: rgba(255, 250, 235, 0.8);
  --g-ok-tint: rgba(232, 255, 243, 0.8);
  --g-out: rgba(232, 244, 255, 0.8);
  --g-sticky: rgba(250, 251, 253, 0.94);
  --g-chatbody: rgba(245, 248, 250, 0.5);
  --g-door-field: rgba(15, 17, 22, 0.7);
  --g-ink2: #3f4254;
  --g-ink3: #4a4d66;
  --text-dark: #181c32;
  --text-muted: #5e6278;
  color-scheme: light;
}
/* Documents keep paper colours */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts) {
  --bg-main: #f5f8fa; --card-bg: #ffffff; --bg-card: #ffffff;
  --text-dark: #181c32; --text-main: #181c32; --text-muted: #6f7388;
  --border-color: #eff2f5;
  color-scheme: light;
}
/* Glow layer, dimmed */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before {
  background:
    radial-gradient(620px 620px at -6% -10%, rgba(255,193,0,0.16), rgba(255,193,0,0) 68%),
    radial-gradient(420px 420px at 14% 58%, rgba(0,158,247,0.10), rgba(0,158,247,0) 70%),
    radial-gradient(700px 700px at 104% 0%, rgba(0,158,247,0.08), rgba(0,158,247,0) 66%),
    radial-gradient(760px 760px at 100% 108%, rgba(89,60,125,0.16), rgba(89,60,125,0) 66%),
    radial-gradient(520px 520px at 30% 110%, rgba(255,193,0,0.07), rgba(255,193,0,0) 66%);
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body { color: var(--text-dark); }
/* Text the pages hard-code dark */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(h1, h2, h3, h4, h5, strong, b, label, th, td, .page-title, .topbar-title, .card-title, .modal-header, .kpi-value, .stat-value, .user-name, .dropdown-name) {
  color: inherit;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .split-detail, .stat-card, .stat-box, .kpi-card, .ledger-container, .chart-container, .filter-bar, .alert-card, .modal-card, .modal-content, .header-dropdown, .kebab-dropdown, .user-dropdown, .mb-card, .ep-card, .ticket, .memo-card, .login-box, .auth-card, .chat-panel, .content-wrapper, .page-body, .content-area, .container, .shell, .top-header, .topbar, .navbar, .tab-section, .view-section) {
  color: var(--text-dark);
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .kpi-value, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .stat-card .stat-value, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .stat-box .val { color: var(--text-dark) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ledger-table td { color: var(--g-ink2); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .modal-header { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .result-item strong { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .sidebar-brand h1, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .nav-btn, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .nav-btn.active { color: #111; }
/* Yellow surfaces keep dark text */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.btn-primary, .ds-tab.active, .tab-btn.active, .mb-tab.on, .mb-btn.primary, .fchip.active, .ptabs button.active, .nav-item.active, .chat-sent, .mbc-send, .cr-primary, .dp-btn-main, .slot-booked, .ep-tab[aria-current="page"]) { color: #111 !important; }
/* Inline styles the portals write by hand. Light surfaces become dark glass;
   dark ink becomes light, except on yellow. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#fff;"], [style*="background: #fff;"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background:white"], [style*="background: white"], [style*="background-color:#fff;"], [style*="background-color: #fff;"], [style*="background-color: white"], [style*="background:#f9f9f9"], [style*="background: #f9f9f9"], [style*="background:#f8fafc"], [style*="background: #f8fafc"], [style*="background:#f5f8fa"], [style*="background: #f5f8fa"], [style*="background:#f1f5f9"], [style*="background: #f1f5f9"], [style*="background: #f0f2f5"], [style*="background:#f0f2f5"], [style*="background:#fafafa"], [style*="background: #fafafa"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) {
  background-color: var(--g-surface) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style$="background:#fff"], [style$="background: #fff"], [style$="background:white"], [style$="background: white"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) {
  background-color: var(--g-surface) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="color:#111"], [style*="color: #111"], [style*="color:#333"], [style*="color: #333"], [style*="color:#181c32"], [style*="color: #181c32"], [style*="color:#1e293b"], [style*="color: #1e293b"], [style*="color:#3f4254"], [style*="color: #3f4254"], [style*="color:#334155"], [style*="color: #334155"], [style*="color:#475569"], [style*="color: #475569"], [style*="color:black"], [style*="color: black"]):not([style*="--brand"]):not([style*="ffc100"]):not([style*="--primary"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map, .sidebar, .chat-header) *) {
  color: var(--text-dark) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="border:1px solid #e"], [style*="border: 1px solid #e"], [style*="border-bottom:1px solid #e"], [style*="border-bottom: 1px solid #e"], [style*="border-top: 1px solid #e"]):not(:is(.invoice-paper, .book-wrapper, #pg-main) *) {
  border-color: var(--border-color) !important;
}
/* Page CSS with hard-coded light surfaces */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.cal-time-col, .cal-header-cell) { background: var(--g-sticky) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .slot-open { background: var(--gw40); border-color: rgba(255,255,255,0.14); color: #6b7186; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .slot-unavailable { background: repeating-linear-gradient(45deg, #161a22, #161a22 10px, #1e232d 10px, #1e232d 20px); border-color: rgba(255,255,255,0.08); color: #8a90a4; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.slot-reserved, .slot-tentative) { background: rgba(255,193,0,0.10); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.slot-trial, .slot-absent) { background: rgba(241,65,108,0.14); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .slot-start_on { background: rgba(80,205,137,0.14); color: #6ee7a8; border-color: rgba(80,205,137,0.35); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .slot-excused { background: rgba(255,255,255,0.04); color: #8a90a4; border-color: rgba(255,255,255,0.08); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .slot-moved { background: rgba(124,92,214,0.18); color: #c4b5fd; border-color: rgba(124,92,214,0.35); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.slot-only, .slot-temporary, .slot-makeup, .slot-sub) { background: rgba(0,158,247,0.14); color: #7cc8ff; border-color: rgba(0,158,247,0.35); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .slot-vacation { background: rgba(255,149,0,0.14); color: #ffbf66; border-color: rgba(255,149,0,0.35); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.rate-box, .dropdown-header-info, .list-sidebar-header, .ledger-header, .custom-select-box, .custom-select-options, .shared-dropdown, .tnc-panel, .ep-modal, .overlay > .modal, .mpc-card) { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .tnc-panel { background: var(--gw94); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.callout) { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #view-mailbox .mb-msg { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-received, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-bubble.them, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-typing { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .badge { box-shadow: 0 2px 8px rgba(241,65,108,0.45); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .split-list-content::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) img[src*="logo"]:not([src*="logo-splash"]):not(#appSplashLoader img):not(#portalSplash img) { background-color: #fff; }
/* Pale inline tints (notes, callouts, status boxes) become translucent
   tints of the same hue, so their text stays readable in dark mode. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#fffdf5"], [style*="background: #fffdf5"], [style*="background-color:#fffdf5"], [style*="background-color: #fffdf5"], [style*="background:#fffbeb"], [style*="background: #fffbeb"], [style*="background-color:#fffbeb"], [style*="background-color: #fffbeb"], [style*="background:#fff8e1"], [style*="background: #fff8e1"], [style*="background-color:#fff8e1"], [style*="background-color: #fff8e1"], [style*="background:#fef9e7"], [style*="background: #fef9e7"], [style*="background-color:#fef9e7"], [style*="background-color: #fef9e7"], [style*="background:#fffaeb"], [style*="background: #fffaeb"], [style*="background-color:#fffaeb"], [style*="background-color: #fffaeb"], [style*="background:#fff9e6"], [style*="background: #fff9e6"], [style*="background-color:#fff9e6"], [style*="background-color: #fff9e6"], [style*="background:#fff5d6"], [style*="background: #fff5d6"], [style*="background-color:#fff5d6"], [style*="background-color: #fff5d6"], [style*="background:#fffbf0"], [style*="background: #fffbf0"], [style*="background-color:#fffbf0"], [style*="background-color: #fffbf0"], [style*="background:#fffcf0"], [style*="background: #fffcf0"], [style*="background-color:#fffcf0"], [style*="background-color: #fffcf0"], [style*="background:#fff8ec"], [style*="background: #fff8ec"], [style*="background-color:#fff8ec"], [style*="background-color: #fff8ec"], [style*="background:#fef3c7"], [style*="background: #fef3c7"], [style*="background-color:#fef3c7"], [style*="background-color: #fef3c7"], [style*="background:#fff7e6"], [style*="background: #fff7e6"], [style*="background-color:#fff7e6"], [style*="background-color: #fff7e6"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(255,193,0,0.14) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background: rgb(255, 253, 245)"], [style*="background: rgb(255, 253, 245)"], [style*="background-color: rgb(255, 253, 245)"], [style*="background-color: rgb(255, 253, 245)"], [style*="background: rgb(255, 251, 235)"], [style*="background: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background: rgb(255, 248, 225)"], [style*="background: rgb(255, 248, 225)"], [style*="background-color: rgb(255, 248, 225)"], [style*="background-color: rgb(255, 248, 225)"], [style*="background: rgb(254, 249, 231)"], [style*="background: rgb(254, 249, 231)"], [style*="background-color: rgb(254, 249, 231)"], [style*="background-color: rgb(254, 249, 231)"], [style*="background: rgb(255, 250, 235)"], [style*="background: rgb(255, 250, 235)"], [style*="background-color: rgb(255, 250, 235)"], [style*="background-color: rgb(255, 250, 235)"], [style*="background: rgb(255, 249, 230)"], [style*="background: rgb(255, 249, 230)"], [style*="background-color: rgb(255, 249, 230)"], [style*="background-color: rgb(255, 249, 230)"], [style*="background: rgb(255, 245, 214)"], [style*="background: rgb(255, 245, 214)"], [style*="background-color: rgb(255, 245, 214)"], [style*="background-color: rgb(255, 245, 214)"], [style*="background: rgb(255, 251, 240)"], [style*="background: rgb(255, 251, 240)"], [style*="background-color: rgb(255, 251, 240)"], [style*="background-color: rgb(255, 251, 240)"], [style*="background: rgb(255, 252, 240)"], [style*="background: rgb(255, 252, 240)"], [style*="background-color: rgb(255, 252, 240)"], [style*="background-color: rgb(255, 252, 240)"], [style*="background: rgb(255, 248, 236)"], [style*="background: rgb(255, 248, 236)"], [style*="background-color: rgb(255, 248, 236)"], [style*="background-color: rgb(255, 248, 236)"], [style*="background: rgb(254, 243, 199)"], [style*="background: rgb(254, 243, 199)"], [style*="background-color: rgb(254, 243, 199)"], [style*="background-color: rgb(254, 243, 199)"], [style*="background: rgb(255, 247, 230)"], [style*="background: rgb(255, 247, 230)"], [style*="background-color: rgb(255, 247, 230)"], [style*="background-color: rgb(255, 247, 230)"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(255,193,0,0.14) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#f0f7ff"], [style*="background: #f0f7ff"], [style*="background-color:#f0f7ff"], [style*="background-color: #f0f7ff"], [style*="background:#e8f4ff"], [style*="background: #e8f4ff"], [style*="background-color:#e8f4ff"], [style*="background-color: #e8f4ff"], [style*="background:#eff6ff"], [style*="background: #eff6ff"], [style*="background-color:#eff6ff"], [style*="background-color: #eff6ff"], [style*="background:#e0f2fe"], [style*="background: #e0f2fe"], [style*="background-color:#e0f2fe"], [style*="background-color: #e0f2fe"], [style*="background:#f0f9ff"], [style*="background: #f0f9ff"], [style*="background-color:#f0f9ff"], [style*="background-color: #f0f9ff"], [style*="background:#e8f0fe"], [style*="background: #e8f0fe"], [style*="background-color:#e8f0fe"], [style*="background-color: #e8f0fe"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(0,158,247,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background: rgb(240, 247, 255)"], [style*="background: rgb(240, 247, 255)"], [style*="background-color: rgb(240, 247, 255)"], [style*="background-color: rgb(240, 247, 255)"], [style*="background: rgb(232, 244, 255)"], [style*="background: rgb(232, 244, 255)"], [style*="background-color: rgb(232, 244, 255)"], [style*="background-color: rgb(232, 244, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background: rgb(224, 242, 254)"], [style*="background: rgb(224, 242, 254)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background: rgb(240, 249, 255)"], [style*="background: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background: rgb(232, 240, 254)"], [style*="background: rgb(232, 240, 254)"], [style*="background-color: rgb(232, 240, 254)"], [style*="background-color: rgb(232, 240, 254)"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(0,158,247,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#e8fff3"], [style*="background: #e8fff3"], [style*="background-color:#e8fff3"], [style*="background-color: #e8fff3"], [style*="background:#ecfdf5"], [style*="background: #ecfdf5"], [style*="background-color:#ecfdf5"], [style*="background-color: #ecfdf5"], [style*="background:#f0fdf4"], [style*="background: #f0fdf4"], [style*="background-color:#f0fdf4"], [style*="background-color: #f0fdf4"], [style*="background:#dcfce7"], [style*="background: #dcfce7"], [style*="background-color:#dcfce7"], [style*="background-color: #dcfce7"], [style*="background:#e6fffa"], [style*="background: #e6fffa"], [style*="background-color:#e6fffa"], [style*="background-color: #e6fffa"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(80,205,137,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background: rgb(232, 255, 243)"], [style*="background: rgb(232, 255, 243)"], [style*="background-color: rgb(232, 255, 243)"], [style*="background-color: rgb(232, 255, 243)"], [style*="background: rgb(236, 253, 245)"], [style*="background: rgb(236, 253, 245)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background: rgb(240, 253, 244)"], [style*="background: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background: rgb(220, 252, 231)"], [style*="background: rgb(220, 252, 231)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background: rgb(230, 255, 250)"], [style*="background: rgb(230, 255, 250)"], [style*="background-color: rgb(230, 255, 250)"], [style*="background-color: rgb(230, 255, 250)"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(80,205,137,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#fff5f8"], [style*="background: #fff5f8"], [style*="background-color:#fff5f8"], [style*="background-color: #fff5f8"], [style*="background:#fef2f2"], [style*="background: #fef2f2"], [style*="background-color:#fef2f2"], [style*="background-color: #fef2f2"], [style*="background:#fdf2f8"], [style*="background: #fdf2f8"], [style*="background-color:#fdf2f8"], [style*="background-color: #fdf2f8"], [style*="background:#fee2e2"], [style*="background: #fee2e2"], [style*="background-color:#fee2e2"], [style*="background-color: #fee2e2"], [style*="background:#fff1f2"], [style*="background: #fff1f2"], [style*="background-color:#fff1f2"], [style*="background-color: #fff1f2"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(241,65,108,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background: rgb(255, 245, 248)"], [style*="background: rgb(255, 245, 248)"], [style*="background-color: rgb(255, 245, 248)"], [style*="background-color: rgb(255, 245, 248)"], [style*="background: rgb(254, 242, 242)"], [style*="background: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background: rgb(253, 242, 248)"], [style*="background: rgb(253, 242, 248)"], [style*="background-color: rgb(253, 242, 248)"], [style*="background-color: rgb(253, 242, 248)"], [style*="background: rgb(254, 226, 226)"], [style*="background: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background: rgb(255, 241, 242)"], [style*="background: rgb(255, 241, 242)"], [style*="background-color: rgb(255, 241, 242)"], [style*="background-color: rgb(255, 241, 242)"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(241,65,108,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#f9f0ff"], [style*="background: #f9f0ff"], [style*="background-color:#f9f0ff"], [style*="background-color: #f9f0ff"], [style*="background:#f5f3ff"], [style*="background: #f5f3ff"], [style*="background-color:#f5f3ff"], [style*="background-color: #f5f3ff"], [style*="background:#ede9fe"], [style*="background: #ede9fe"], [style*="background-color:#ede9fe"], [style*="background-color: #ede9fe"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(124,92,214,0.14) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background: rgb(249, 240, 255)"], [style*="background: rgb(249, 240, 255)"], [style*="background-color: rgb(249, 240, 255)"], [style*="background-color: rgb(249, 240, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background: rgb(237, 233, 254)"], [style*="background: rgb(237, 233, 254)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background-color: rgb(237, 233, 254)"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(124,92,214,0.14) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background:#eef0f8"], [style*="background: #eef0f8"], [style*="background-color:#eef0f8"], [style*="background-color: #eef0f8"], [style*="background:#e4e6ef"], [style*="background: #e4e6ef"], [style*="background-color:#e4e6ef"], [style*="background-color: #e4e6ef"], [style*="background:#eff2f5"], [style*="background: #eff2f5"], [style*="background-color:#eff2f5"], [style*="background-color: #eff2f5"], [style*="background:#e2e8f0"], [style*="background: #e2e8f0"], [style*="background-color:#e2e8f0"], [style*="background-color: #e2e8f0"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is([style*="background: rgb(238, 240, 248)"], [style*="background: rgb(238, 240, 248)"], [style*="background-color: rgb(238, 240, 248)"], [style*="background-color: rgb(238, 240, 248)"], [style*="background: rgb(228, 230, 239)"], [style*="background: rgb(228, 230, 239)"], [style*="background-color: rgb(228, 230, 239)"], [style*="background-color: rgb(228, 230, 239)"], [style*="background: rgb(239, 242, 245)"], [style*="background: rgb(239, 242, 245)"], [style*="background-color: rgb(239, 242, 245)"], [style*="background-color: rgb(239, 242, 245)"], [style*="background: rgb(226, 232, 240)"], [style*="background: rgb(226, 232, 240)"], [style*="background-color: rgb(226, 232, 240)"], [style*="background-color: rgb(226, 232, 240)"]):not(:is(.invoice-paper, .book-wrapper, #pg-main, .dp-map) *) { background-color: rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .topbar-avatar, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-dir-pic { background-color: rgba(255,255,255,0.08); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .sidebar .user-card-avatar { background-color: rgba(255,255,255,0.6); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.btn-secondary, .btn.secondary, .inline-action-btn, .ep-btn, .reload-btn, .fchip:not(.active), .btn-icon, .user-dropdown-item, .dropdown-item, .kebab-item) { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(#customBranchSelector, .custom-select-box) { background: var(--gw78) !important; color: var(--text-dark) !important; border-color: var(--glass-line) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .custom-select-option:hover { background: rgba(255,255,255,0.06); }
/* Inverted "dark" buttons write background: var(--text-dark) inline, which
   turns light in dark mode. Keep them a raised dark-glass button. */
html[data-glass-theme="dark"]:not(.glass-off) :is([style*="background: var(--text-dark)"], [style*="background:var(--text-dark)"]) { background: rgba(255,255,255,0.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.14) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .cal-time-col { border-bottom-color: var(--glass-line) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea):not(:is(.invoice-paper, .book-wrapper, #pg-main) *) { background-color: rgba(255,255,255,0.06) !important; color: var(--text-dark) !important; border-color: rgba(255,255,255,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off) select option { background: #1b2029; color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off) input::placeholder, html[data-glass-theme="dark"]:not(.glass-off) textarea::placeholder { color: #7d8399; }
html[data-glass-theme="dark"]:not(.glass-off) input[type="date"]::-webkit-calendar-picker-indicator, html[data-glass-theme="dark"]:not(.glass-off) input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }
/* Light / Dark / Auto switch beside the bell */
.glass-mode-switch { position: relative; display: inline-flex; flex: none; }
.glass-mode-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1000; min-width: 236px; padding: 4px 0 2px; border-radius: 16px; background: var(--gw94, rgba(255,255,255,0.94)); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid var(--glass-edge, rgba(255,255,255,0.8)); box-shadow: 0 18px 44px rgba(24,28,50,0.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; }
.glass-mode-switch.open .glass-mode-pop { opacity: 1; visibility: visible; transform: none; }
.glass-mode-pop .glass-mode-picker { margin: 4px 8px 8px; }
@media (max-width: 992px) { .glass-mode-switch .glass-mode-fab { width: 42px; height: 42px; } }
/* Notifications dropdown: content stays inside the box at every width */
html:not(.glass-off) #notif-dropdown-menu { box-sizing: border-box; width: min(380px, calc(100vw - 24px)); max-width: calc(100vw - 24px); overflow: hidden; display: flex; flex-direction: column; padding: 0; }
html:not(.glass-off) #notif-dropdown-menu * { box-sizing: border-box; }
html:not(.glass-off) #notif-dropdown-menu :is(img, video, table, pre, iframe) { max-width: 100%; }
html:not(.glass-off) #notif-dropdown-menu > div:first-child { flex-wrap: wrap; gap: 8px; padding: 14px 14px 12px !important; }
html:not(.glass-off) #notif-dropdown-menu > div:first-child > span,
html:not(.glass-off) #notif-dropdown-menu > div:first-child > div { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; flex: none; }
html:not(.glass-off) #notif-dropdown-menu > div:first-child button { white-space: nowrap; }
html:not(.glass-off) #notif-dropdown-menu > div:not(:first-child) { min-width: 0; overflow-x: hidden; overflow-wrap: anywhere; word-break: break-word; }
html:not(.glass-off) #notif-dropdown-menu :is(code, pre, kbd) { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
/* Phones: the notification box is pinned to the screen (it used to be positioned inside the 24px bell
   wrapper, so left/right 12px squeezed it to 16px wide and pushed it off screen). top is below the header
   whether the header is the containing block (blurred) or not (glass-lite). */
@media (max-width: 992px) {
  html:not(.glass-off) #notif-dropdown-menu {
    position: fixed !important; top: 80px !important; left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important; margin-top: 0 !important; z-index: 2147483000 !important;
  }
}
/* Parent Portal tab (admin): parent picture + linked students' pictures */
#admin-parent-list .result-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
#admin-parent-list .result-item > .ri-avatar { grid-row: 1 / span 3; margin-right: 0; }
#admin-parent-list .result-item > :not(.ri-avatar) { grid-column: 2; min-width: 0; }
#admin-parent-list .result-item > small:last-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ri-avatar-lg { width: 56px !important; height: 56px !important; font-size: 18px !important; margin-right: 4px !important; }
.ri-avatar-xs { width: 22px !important; height: 22px !important; font-size: 9px !important; margin-right: 0 !important; box-shadow: 0 0 0 2px var(--card-bg, #fff) !important; border-radius: 50% !important; }
.ri-stack { display: inline-flex; align-items: center; padding-left: 6px; }
.ri-stack > .ri-avatar-xs { margin-left: -6px !important; }
.ri-more { background: #f5f8fa !important; color: var(--text-muted) !important; }
#admin-parent-detail .ri-avatar:not(.ri-avatar-lg) { width: 36px; height: 36px; margin-right: 12px; }
html:not(.glass-off) .ri-avatar-lg { border-radius: 18px; }
html:not(.glass-off) #admin-parent-detail [style*="background:#f5f8fa"] { border-radius: 14px !important; }
/* ── Hover states, dark mode ─────────────────────────────────────────────
   In light mode hover brightens a surface to whiter glass. Reusing those
   tokens in dark would DARKEN on hover (or do nothing), and a few hovers set
   #181c32 ink, which is invisible on dark. Dark hover = a light lift of
   the same surface + light ink, consistently, everywhere off the yellow. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.dropdown-item, .user-dropdown-item, .kebab-item, .custom-select-option, .result-item:not(.active), .chat-dir-item, .ds-tab:not(.active), .ep-tab:not([aria-current="page"]), .navbar .tab-btn:not(.active), .tab-btn:not(.active), #view-mailbox .mb-tab:not(.on), #view-mailbox .mb-thread, .glass-mode-picker button[aria-pressed="false"]):hover {
  background: rgba(255,255,255,0.07) !important; color: var(--text-dark) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.btn-secondary, .btn.secondary, .inline-action-btn, .reload-btn, .chat-cat-chip, #view-mailbox .mb-btn:not(.primary), .kebab-btn, .btn-icon, .glass-mode-fab, .notif-wrapper, #notifBell, .user-profile, .topbar-user):hover {
  background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.18) !important; color: var(--text-dark) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.table-wrap, .ledger-table, .data-table, table) tbody tr:hover td { background: rgba(255,255,255,0.04) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .btn-dark:hover { background: #2a3048 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.btn-primary, .ds-tab.active, .mbc-send, .cr-primary):hover { filter: brightness(1.06); color: #111 !important; }
/* light mode: the two hovers that set a fixed dark ink keep it only where the surface is light */
html:not(.glass-off):not([data-glass-theme="dark"]) .navbar .tab-btn:hover:not(.active) { color: #181c32; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .navbar .tab-btn:hover:not(.active) { color: var(--text-dark) !important; }
/* inline green "Export CSV" (color:#166534 on #dcfce7) reads as mud on dark */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) [style*="color: #166534"], html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) [style*="color:#166534"] { color: #6ee7a8 !important; border-color: rgba(80,205,137,0.4) !important; }

/* ── Accounting: date filter on the same line as the action buttons ──────
   No markup moves and nothing overlaps. Desktop only (≥993px); the page's own
   phone/tablet layout below that is kept exactly. The page container becomes
   a wrapping flex row: the filter (now a compact pill) sits first, the
   buttons after it, pushed right. When the two don't fit side by side, the
   buttons wrap onto their own line. Every other child of the container keeps
   a full-width row of its own, in its original order. */
@media (min-width: 993px) {
  html[data-glass-portal="app"]:not(.glass-off) .container.g-tar-bar {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px;
  }
  html[data-glass-portal="app"]:not(.glass-off) .container.g-tar-bar > * { flex: 1 1 100%; min-width: 0; }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar {
    order: -2; flex: 0 1 auto; width: auto; max-width: 100%;
    margin: 0 0 16px 0 !important; padding: 4px 4px 4px 14px !important; min-height: 46px;
    display: flex; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important;
    border-radius: 14px;
  }
  html[data-glass-portal="app"]:not(.glass-off) .container.g-tar-bar > .top-action-row {
    order: -1; flex: 1 1 auto; width: auto; margin-bottom: 16px; min-height: 46px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row .btn { height: 42px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar .filter-date-wrapper { flex: 0 1 auto !important; gap: 12px !important; flex-wrap: nowrap !important; align-items: center; min-width: 0; }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar .input-group { flex-direction: row !important; align-items: center; gap: 6px !important; width: auto; flex: 0 1 auto !important; min-width: 0; }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar label { margin: 0 !important; font-size: 10.5px !important; letter-spacing: 0.08em; white-space: nowrap; color: var(--text-muted); }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar input[type="date"] { width: 140px !important; min-width: 0; height: 36px; padding: 0 10px !important; font-size: 13px !important; border-radius: 10px; }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar .filter-btn-wrapper { flex: none !important; align-items: center !important; }
  html[data-glass-portal="app"]:not(.glass-off) .container > .top-action-row + .filter-bar #genBtn { height: 36px !important; padding: 0 12px !important; font-size: 13px; border-radius: 10px; white-space: nowrap; }
}

/* the light-mode picker inside menus */
.glass-mode-picker { display: flex; gap: 4px; padding: 4px; margin: 4px 6px 6px; border-radius: 12px; background: var(--gw50, rgba(24,28,50,0.04)); border: 1px solid var(--glass-line, rgba(24,28,50,0.07)); }
.glass-mode-picker button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 6px; min-height: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font: 700 12px/1 var(--glass-font); cursor: pointer; box-shadow: none; white-space: nowrap; }
.glass-mode-picker button:hover { background: var(--gw70, rgba(255,255,255,0.7)); color: var(--text-dark); transform: none; }
.glass-mode-picker button[aria-pressed="true"] { background: var(--brand); color: #111; box-shadow: 0 3px 10px rgba(255,193,0,0.35); }
.glass-mode-picker button i { font-size: 14px; }
.glass-mode-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 0; }
.glass-mode-fab { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; border: 1px solid var(--glass-edge); background: var(--gw60, rgba(255,255,255,0.6)); color: var(--text-dark); cursor: pointer; box-shadow: none; padding: 0; }
.glass-mode-fab:hover { background: var(--gw85, rgba(255,255,255,0.85)); transform: none; }
.glass-mode-fab.is-floating { position: fixed; top: 14px; right: 14px; z-index: 50; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ── 23. DARK MODE, PAGE-SPECIFIC SURFACES (generated) ─────────────────
   Generated from each page's own <style> blocks (backup/2026-10-19): every
   rule that paints a light surface or hard-codes dark ink gets a dark-mode
   counterpart here, scoped to that portal. Documents, toggles and print
   rules are skipped. Each selector keeps the page's own specificity (the dark-mode prefix is
   inside :where()), so it overrides only the page's light rule, by source
   order, and never beats this theme's own rules, which already go dark
   through the surface tokens. */

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .dropdown-header-info,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .cb-ledger-header,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .cb-compact-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .result-item,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .kebab-item.danger-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .pay-badge,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .breakdown-header,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ae-range-bar,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ae-range-select,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .ae-range-chip,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .iframe-container,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ds-panel-report .filter-run-row > #br-month-wrap > input[type="month"],
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .cal-header-cell,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .cal-time-col,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-open,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-reserved,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-trial,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-excused,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-absent,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-tentative,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .ef-resp-tool:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .ef-resp-sig,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .ds-tab,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-search input,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-clear,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-pop input[type="text"],
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-pop input[type="number"],
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-tools button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-foot .mtf-reset,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-none button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .dsm-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .dsm-yr button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .dsm-grid button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .dsm-presets button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .br-controls .br-more .kebab-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .br-filter-actions button:not(.btn-primary),
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-rt,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-rt-size,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-rt-link { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-pic-opt,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-reveal,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-field-row.has-reveal .ef-reveal,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-reveal-opt,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-icon-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-faux-parts span,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-choice > input[data-k="opt"],
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-other-text,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-more,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efSheetModal .ef-sheet-open,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-section-input,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-cond,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-choice-price { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-lyr-add select,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-lyr-foot select,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pnum,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-psteps button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-psteps button:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pcol-sw,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pcol-x,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pcol-x:disabled,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pseg,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pseg button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pseg button:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-ptrack::after,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pbtn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-chip,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-chip:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-mergesel:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-field input[type="text"],
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-field textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-block,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-seg button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-seg button:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-icon:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-actionbar,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-settings,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-formpick,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-askmelo,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-lookideas,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-lookscard,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-look:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-blocktools,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-parttools,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-partsize,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-blockgrip,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-sizefield,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-steps button,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-steps button:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-colourbtn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-colourbtn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-replywrap,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-replyhead { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) input,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) select,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .sd-promo-day span,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-tab,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox #mb-actionbar > .mpc-kebab-host .kebab-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-blocktools select.mb-tmerge,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox input.mb-ptext,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pbtn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-mergesel,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-icon,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-ideabtn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-ideabtn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-look,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-looksbtn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-blocktools select.mb-fontsel { background-color: var(--gw86);color: var(--text-dark); }

html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off) .cb-compact-search,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off) #efEditorModal .ef-field-row.is-info { background-color: var(--g-surface) !important; }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-vacation,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #calendarOnlyBanner,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .ds-rpt-table tr.ds-subtotal td,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ds-table tr.ds-subtotal td,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-chip,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ds-table tr.ds-capped td,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-rt-btn.is-on,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-icon-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-icon-btn.is-on,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-tool.is-open,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-reveal-badge,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-section-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-type-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-how-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .sd-idea-btn.is-on,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-posts .sd-post-state.is-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-ideas .sd-post-state.is-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-video .sd-post-state.is-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-lapses .sd-lapse-chip,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-lapses .sd-lapse-fix-tag.is-wiring,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sdResultModal .sd-result-ring.is-warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-price-tree .sd-tree-banner,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-camprow[aria-busy="true"],
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-save.dirty,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-save.saving,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-save.held,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-lyr-row.is-on,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-cnote.busy { background-color: rgba(255,193,0,0.10); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-review-note.warn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-at-pill,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-merged-list li.lb-tickable:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-edited-pill { background-color: rgba(255,193,0,0.10); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .kebab-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .inline-action-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .avatar-preview,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .camera-badge,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-search .mtf-x:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .mtf-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ds-table tr.ds-month-head td,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-rt-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-head-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-q-section,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-choice-pic img,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efEditorModal .ef-tool:hover { background-color: rgba(255,255,255,0.07); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-start_on,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efSheetModal .ef-sheet-open:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-posts .sd-post-state.is-ok,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-ideas .sd-post-state.is-ok,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-video .sd-post-state.is-ok,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-lapses .sd-lapse-fix-tag,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sdResultModal .sd-result-ring.is-good,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-save.saved,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-cnote.good,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-chip-approved,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-review-note.ok,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-at-pill.done { background-color: rgba(80,205,137,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-moved { background-color: rgba(124,92,214,0.14); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-only,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-temporary,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-makeup,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .slot-sub,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #ds-table tr.ds-month-total td,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .lb-chip-pending { background-color: rgba(0,158,247,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #efSheetModal .ef-sheet-err,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-posts .sd-post-state.is-bad,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-ideas .sd-post-state.is-bad,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-video .sd-post-state.is-bad,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-lapses .sd-lapse-chip.is-open,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-lapses .sd-lapse-fix-tag.is-decision,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sd-panel-promos .sd-promo-chip.is-bad,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #sdResultModal .sd-result-ring.is-bad,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-save.bad,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pcol-x:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pbtn.danger:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-icon.danger:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-draftwarn,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-cnote.bad { background-color: rgba(241,65,108,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-thread.unread .who,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-thread.unread .subj,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pnum input,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pcol-hex,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-pphoto,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-formrow,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-parttools button:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-partsize:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-blockgrip:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-blocktools input.mb-sizenum,
:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-replyx:hover { color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) #view-mailbox .mb-looksbtn:hover { background-color: rgba(255,193,0,0.10);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off)) .chat-received { background-color: rgba(255,255,255,0.07);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .dropdown-header-info,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .result-item,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .pay-badge,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .breakdown-header,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .hist-controls .hist-dl,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .cal-header-cell,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .cal-time-col,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-open,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-reserved,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-trial,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-excused,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-absent,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-tentative,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .kebab-item.danger-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-directory,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-dir-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-body,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-footer,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-media,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-panel,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-sheets .wt-demo-card,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-sheets .wt-row,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-hub .wt-demo-card,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-hub .wt-row { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) input,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) select,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-sheets .wt-btn.ghost,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-hub .wt-btn.ghost { background-color: var(--gw86);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-vacation { background-color: rgba(255,193,0,0.10); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .hist-controls .hist-dl:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .inline-action-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .avatar-preview,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .camera-badge,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .kebab-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-dir-pic,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-typing,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-input { background-color: rgba(255,255,255,0.07); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-start_on { background-color: rgba(80,205,137,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-moved { background-color: rgba(124,92,214,0.14); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-only,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-temporary,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-makeup,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .slot-sub { background-color: rgba(0,158,247,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) .chat-received { background-color: rgba(255,255,255,0.07);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-sheets,
:where(html[data-glass-theme="dark"][data-glass-portal="teacher"]:not(.glass-off)) #wt-cr-hub { color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .user-card-name { color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .topbar-avatar,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .chat-dir-pic { background-color: rgba(255,255,255,0.07); }

:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) tr:hover td,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .search-box input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .modal-card,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .input-group input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .input-group select:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .input-group textarea:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .profile-field-input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .chat-panel,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .chat-body,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .chat-footer,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .chat-bubble.them,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .chat-typing { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .upload-zone:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off)) .upload-zone.drag-over { background-color: rgba(255,193,0,0.10); }

:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .inline-action-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-dir-pic,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-typing,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-input,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .kebab-btn:hover { background-color: rgba(255,255,255,0.07); }

:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) input,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) select,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) textarea:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) select:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .auth-card img,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .result-item,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-panel,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-directory,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-dir-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-body,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-footer,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-media,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .btn-secondary:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .inline-action-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .invoice-footer,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-sheets .wt-demo-card,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-sheets .wt-row,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-hub .wt-demo-card,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-hub .wt-row { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) .chat-received { background-color: rgba(255,255,255,0.07);color: var(--text-dark); }

html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .result-item,
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .lesson-item,
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .estimate-item,
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .invoice-card,
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .award-card { background-color: var(--g-surface) !important; }

:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-sheets,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-hub { color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-sheets .wt-btn.ghost,
:where(html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off)) #wt-cr-hub .wt-btn.ghost { background-color: var(--gw86);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .logo-container img,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .btn-secondary,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .inline-input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .list-sidebar,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .list-sidebar-header,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .invoice-list-container,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .invoice-list-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .items-group-header,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .shared-dropdown,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .shared-dropdown-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .modal-content,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .modal-summary,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .form-group input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .form-group select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .mc-close,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .inv-scope-tab,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .custom-select-options,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .custom-select-option:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ledger-header,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ledger-table th,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ledger-table tr:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kebab-dropdown,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kebab-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kebab-item.neutral-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .pdf-table th,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kebab-item.danger-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .filters input[type=text],
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .filters select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .form-grid input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .form-grid select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .form-grid textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .btn.secondary,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .btn.danger,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .pill.lvl,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) #libList.grid-view .kebab-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .modal,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) #docFullscreenIframe,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-head { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-picker select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-pill,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-rail,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-row,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-list,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-go,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-note,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-field input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-field select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-field textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-combo-list,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-batch-chip:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-modal,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-sticky-save,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-plan-stat-main,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-plan-template,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-plan-template:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-plan-template:focus-visible,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-toolbar,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-sub select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-pop,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-zoom,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-menu,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-panel,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-table input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-table select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-color-row input[type="color"],
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-sw-4,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-tray,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-restore-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-walkbar,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-subnav-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-sv-zoom,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-sw-picked,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-bd-count,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-bd-count-main,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-bd-filter select { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-bd-party:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-pk-total,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-vn-editbar,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .reload-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .error-banner,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .km-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ticket.just-in,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .row-head:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-invalid,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-unknown,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .detail,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) pre.memo-pre,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .memo-preview,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .fix-card,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .lightbox img,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ob-void,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .owner-box .ob-verdict,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .rate-box,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .rate-actions button { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .btn-secondary:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .badge-payroll,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .sheet-ico.link,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .pill.staff,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-seat-free,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-seat-house,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-fixed,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .mpc-modal.t-info .mpc-ico,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .owner-box.ob-nodefect { background-color: rgba(0,158,247,0.12); }

html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) input,
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) select,
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) datalist,
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .inline-input,
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) option { background-color: var(--g-surface) !important;color: var(--text-dark) !important; }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .checkbox-container label,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .db-header-title,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .tc-area,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ili-name,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ili-amount,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .items-group-header span:first-child,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .shared-dropdown-item,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .modal-header,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .modal-summary span,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .mc-head .modal-header,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .custom-select-option,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kpi-value,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ledger-table td,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kebab-item.neutral-item,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .memo-preview strong,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .queue-bar .q-title,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .q-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .m-aud b { color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .totals-table tr.bal-due,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .items-group-count,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-live-polling,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-sw-3,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .fchip .cnt,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .km-item .cnt,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .shot { background-color: rgba(255,255,255,0.07); }

html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .item-select:focus,
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .preset-search:focus { background-color: var(--g-surface) !important; }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .export-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .export-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) input,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) select,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .custom-select-box,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) #toast,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .fab-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .tar-kebab .kebab-btn,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .queue-bar { background-color: var(--gw86);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .items-group-row.bulk-selected,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .sheet-ico,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .pill.ext,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .combo-item:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .asg-group.has-sel .asg-count,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-combo-opt:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-combo-opt.is-on,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-ed-rowsel,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-seat-held,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-investigating,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .mpc-modal.t-brand .mpc-ico,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .owner-box,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .rate-ask { background-color: rgba(255,193,0,0.10); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .kebab-btn:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .btn-secondary:hover { background-color: rgba(0,158,247,0.12);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .badge-income,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .pill.lic,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-resolved,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-deployed,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .fix-card .kind,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .fix-memoline,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .mpc-modal.t-success .mpc-ico,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ob-done { background-color: rgba(80,205,137,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .badge-opex,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-row-show:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-list a:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-need-go:hover,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-new,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .mpc-modal.t-danger .mpc-ico { background-color: rgba(241,65,108,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-practice-pill,
:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .st-needs-info { background-color: rgba(124,92,214,0.14); }

:where(html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off)) .ep-seat-blocked { background-color: rgba(255,255,255,0.07);color: var(--text-dark); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .hero .logo,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input[type=text],
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input[type=email],
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input[type=tel],
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input[type=number],
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input[type=date],
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input[type=time],
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field select,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field textarea,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field select:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field textarea:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field .opt input.other-input,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .opt,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .opt.checked,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .terms-box,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .info-block,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .form-error,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .scale-opt,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .scale-opt.checked,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .grid-opt,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .grid-opt.checked,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .upload-item,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .teacher-empty,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .dd-trigger,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .dd-trigger:focus,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .dd.is-open .dd-trigger,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .dd-trigger:focus-visible,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .dd-pop,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .tnc-panel,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .field input,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-card,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-tab,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-chip-unpaid,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-chip-ask,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-kid,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-kchip { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-av,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-said,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-pi-tile,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-lseat.is-taken,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-tk-art,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .pb-s-fit { background-color: var(--g-surface); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .branch-card .b-icon,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ref-chip,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .success-wrap .s-icon.is-closed,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .callout { background-color: rgba(255,193,0,0.10); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .form-pic.is-loading,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .tnc-body { background-color: rgba(255,255,255,0.07); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .success-wrap .s-icon { background-color: rgba(80,205,137,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-practice { background-color: rgba(124,92,214,0.14); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-you,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .ev-lseat { background-color: rgba(0,158,247,0.12); }

:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .content h2,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .content p,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .content li,
:where(html[data-glass-theme="dark"][data-glass-portal="public"]:not(.glass-off)) .content strong { color: var(--text-dark); }



/* Light gradient surfaces from the pages, dark mode: replaced by a tint */
html[data-glass-theme="dark"][data-glass-portal="partner"]:not(.glass-off) .interest-alert-card { background: rgba(0,158,247,0.10) !important; }

html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .balance-card { background: rgba(255,193,0,0.14) !important; }

html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .award-icon-circle { background: rgba(255,193,0,0.14) !important; }


/* Runtime-injected app CSS the generator can't see (event planner, sheets) */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-banner { background: rgba(0,158,247,0.12) !important; border-color: rgba(0,158,247,0.35) !important; color: #a8d8ff !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-banner-warn { background: rgba(255,149,0,0.12) !important; border-color: rgba(255,149,0,0.35) !important; color: #ffc98a !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-banner-error { background: rgba(241,65,108,0.12) !important; border-color: rgba(241,65,108,0.35) !important; color: #ffa3ba !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-banner-ok { background: rgba(80,205,137,0.12) !important; border-color: rgba(80,205,137,0.35) !important; color: #93e9ba !important; }
html:not(.glass-off) .ep-pill:not([aria-pressed="true"]) { background: var(--g-surface); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-pill:not([aria-pressed="true"]) { color: var(--text-dark); border-color: rgba(255,255,255,0.14); }
html:not(.glass-off) .view-toggle button:not(.active) { background: var(--g-surface); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .view-toggle button:not(.active):hover { background: rgba(255,255,255,0.08); color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .balance-card { border-color: rgba(255,193,0,0.55) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .balance-card [style*="color: #b07d00"], html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .balance-card [style*="color:#b07d00"] { color: #ffcf4d !important; }

html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-fab, .chat-fab-btn, .fab) { box-shadow: 0 12px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 4px rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-fab:not([style*="--brand"]):not(.chat-fab-btn) { background-color: rgba(40,46,60,0.85); color: var(--text-dark); }

/* Parent portal chat widget (.fab-internal) paints itself var(--text-dark),
   which is near-white in dark mode. Its dark-mode colour is a token so it
   can be tuned in one place: --glass-chat-fab-dark (+ its icon colour).
   Default: brand yellow, dark icon, matching the staff chat button. */
:root { --glass-chat-fab-dark: rgba(139, 108, 232, 0.62); --glass-chat-fab-dark-ink: #ffffff; --glass-chat-fab-rim: rgba(205, 190, 255, 0.7); --glass-chat-fab-glow: rgba(139, 108, 232, 0.42); }
/* Frosted brand-yellow glass: #ffc100 at 72% over a blur, a light sheen on the
   top-left, a bright rim, and a soft yellow glow under it. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .fab-internal {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 60%),
    var(--glass-chat-fab-dark) !important;
  color: var(--glass-chat-fab-dark-ink) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-chat-fab-rim) !important;
  box-shadow: 0 12px 30px var(--glass-chat-fab-glow), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(60,40,140,0.3), 0 0 0 4px rgba(139,108,232,0.14) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .fab-internal i { color: inherit !important; }

/* Parents "My Students" column: no panel of its own. The page already makes
   it transparent, but the theme's blur on it re-rendered the background glow
   inside its box, so it showed as a second, smaller gradient. The rows keep
   their own glass. */
html[data-glass-portal="parents"]:not(.glass-off) .split-list {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ── Compose widget (admin: #mpc-compose-fab + #mpc-compose-panel) ──────
   The button: same frosted brand-yellow glass as the chat buttons. The panel:
   a glass window (it painted itself solid white, so in dark mode the page's
   light text sat on white and the tabs and labels vanished). Its yellow head
   stays yellow. Drag, resize and every handler are untouched. */
html:not(.glass-off) .mpc-compose-fab {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 60%),
    rgba(255, 193, 0, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 224, 130, 0.8);
  box-shadow: 0 12px 30px rgba(255,193,0,0.38), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 6px rgba(176,125,0,0.25), 0 0 0 4px rgba(255,193,0,0.14);
}
html:not(.glass-off) .mpc-compose-fab:hover { background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%), rgba(255, 193, 0, 0.9); }
html:not(.glass-off) .mpc-compose-panel {
  background: var(--g-surface-pop, rgba(255,255,255,0.88));
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-edge); border-radius: 22px; overflow: hidden;
  box-shadow: var(--glass-shadow-lg, 0 30px 80px rgba(24,28,50,0.25));
}
html:not(.glass-off) .mpc-compose-head {
  background: linear-gradient(145deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(255,199,30,0.94), rgba(255,186,0,0.88));
  box-shadow: inset 0 -1px 0 rgba(176,125,0,0.2);
}
html:not(.glass-off) .mpc-compose-head button { border-radius: 10px; width: 34px; }
html:not(.glass-off) .mpc-compose-head button:hover { background: rgba(255,255,255,0.4); }
html:not(.glass-off) .mpc-compose-tabs { background: transparent; border-bottom-color: var(--glass-line); padding: 6px 12px 0; gap: 4px; }
html:not(.glass-off) .mpc-compose-tabs button { border-radius: 10px 10px 0 0; padding: 9px 0; font-size: 12.5px; }
html:not(.glass-off) .mpc-compose-tabs button:hover:not(.active) { background: var(--gw50, rgba(255,255,255,0.5)); color: var(--text-dark); }
html:not(.glass-off) #mpc-compose-body #sd-pb-text { border-radius: 14px !important; }
/* dark: everything inside the panel on dark glass */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .mpc-compose-panel { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .mpc-compose-tabs button { color: var(--text-muted); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .mpc-compose-tabs button.active { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .mpc-compose-tabs button:hover:not(.active) { background: rgba(255,255,255,0.06); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body :is(label, h3, h4, strong) { color: var(--text-dark); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body #sd-pb-text,
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body [contenteditable="true"] {
  background: rgba(255,255,255,0.05) !important; color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body [contenteditable="true"]:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(255,193,0,0.16); outline: none; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body [contenteditable][data-placeholder]:empty::before { color: #7d8399 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body button:not(.btn-primary):not([style*="--brand"]):not([style*="ffc100"]):not(.active) {
  background: rgba(255,255,255,0.07) !important; color: var(--text-dark) !important; border-color: rgba(255,255,255,0.16) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body button:not(.btn-primary):not([style*="--brand"]):not([style*="ffc100"]):not(.active):hover { background: rgba(255,255,255,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body button:disabled { opacity: 0.55; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body input[type="file"] { color: var(--text-muted); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body input[type="file"]::file-selector-button { background: rgba(255,255,255,0.1); color: var(--text-dark); border: 1px solid rgba(255,255,255,0.16); border-radius: 9px; padding: 6px 12px; margin-right: 10px; cursor: pointer; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body input[type="checkbox"] { color-scheme: dark; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body hr, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body [style*="border-top"] { border-color: rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(#view-social-desk, #mpc-compose-body) .sd-lift-btn { background: rgba(255,255,255,0.07); color: var(--text-dark); border-color: rgba(255,255,255,0.2); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(#view-social-desk, #mpc-compose-body) .sd-switch { background: rgba(255,255,255,0.18); }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(#view-social-desk, #mpc-compose-body) .sd-pic-declare { background: rgba(255,255,255,0.04); }

/* ── 24. TRANSLUCENT SURFACES (both modes) ──────────────────────────────
   No solid white (light) or solid near-black (dark) sheets anywhere off
   paper. Fixed base colour on <html>; the page tokens the portals paint with
   (--card-bg, --bg-main…) become frosted tints, so every card, panel and
   inner box lets the ambient glow through. Popovers, dialogs and sticky
   headers get a blur and a denser tint so text never sits on text.
   !important on the tokens because Global Settings writes them inline on
   <html>. Documents keep real paper (they re-declare their own tokens). */
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) {
  --g-surface: rgba(255, 255, 255, 0.58);
  --g-surface-2: rgba(255, 255, 255, 0.42);
  --g-surface-pop: rgba(255, 255, 255, 0.86);
  --card-bg: var(--g-surface) !important;
  --bg-card: var(--g-surface) !important;
  --bg-main: var(--g-surface-2) !important;
  --bg-color: var(--g-surface-2) !important;
  background: #eef1f6 !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) {
  --g-surface: rgba(28, 33, 45, 0.55);
  --g-surface-2: rgba(255, 255, 255, 0.04);
  --g-surface-pop: rgba(24, 28, 38, 0.9);
  --glass-white: rgba(28, 33, 45, 0.55);
  --glass-white-strong: rgba(24, 28, 38, 0.82);
  --card-bg: var(--g-surface) !important;
  --bg-card: var(--g-surface) !important;
  --bg-main: var(--g-surface-2) !important;
  --bg-color: var(--g-surface-2) !important;
  background: #0b0e14 !important;
}
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body { background: transparent !important; }
/* the glow layer, a little stronger so the frost has colour to work with */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before {
  background:
    radial-gradient(640px 640px at -6% -10%, rgba(255,193,0,0.22), rgba(255,193,0,0) 68%),
    radial-gradient(460px 460px at 14% 58%, rgba(0,158,247,0.14), rgba(0,158,247,0) 70%),
    radial-gradient(760px 760px at 104% 0%, rgba(0,158,247,0.12), rgba(0,158,247,0) 66%),
    radial-gradient(820px 820px at 100% 108%, rgba(124,92,214,0.22), rgba(124,92,214,0) 66%),
    radial-gradient(560px 560px at 34% 112%, rgba(255,193,0,0.10), rgba(255,193,0,0) 66%);
}
/* Real paper stays paper */
html:not(.glass-off) :is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts) {
  --card-bg: #ffffff; --bg-card: #ffffff; --bg-main: #f5f8fa; --bg-color: #f5f8fa;
}
/* Floating things: denser tint + blur */
html:not(.glass-off) :is(.modal-content, .modal-card, .overlay > .modal, .ep-modal, .custom-select-options, .shared-dropdown, .slot-tooltip, .tooltip, .popover, .tnc-panel, .mpc-card, [role="dialog"], [role="menu"], [role="listbox"]):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts)) {
  background-color: var(--g-surface-pop) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
}
html:not(.glass-off) :is([style*="position:fixed"], [style*="position: fixed"], [style*="position:absolute"], [style*="position: absolute"]):is([style*="var(--card-bg)"], [style*="var(--bg-card)"], [style*="background:#fff"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"]):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts) *) {
  background-color: var(--g-surface-pop) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
/* Sticky table headers: content scrolls under them */
html:not(.glass-off) :is(thead th, .ledger-table th, .data-table th):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts) *) {
  background-color: var(--g-sticky) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* Hand-written inline white boxes, light mode too (dark had this already) */
html:not(.glass-off):not([data-glass-theme="dark"]) :is([style*="background:#fff;"], [style*="background: #fff;"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background:white"], [style*="background: white"], [style*="background-color:#fff;"], [style*="background-color: #fff;"], [style*="background-color: white"], [style*="background:#f9f9f9"], [style*="background: #f9f9f9"], [style*="background:#f8fafc"], [style*="background: #f8fafc"], [style*="background:#f5f8fa"], [style*="background: #f5f8fa"], [style*="background:#fafafa"], [style*="background: #fafafa"]):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts) *):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts)):not(:is([style*="position:fixed"], [style*="position: fixed"], [style*="position:absolute"], [style*="position: absolute"])) {
  background-color: var(--g-surface) !important;
}
html:not(.glass-off):not([data-glass-theme="dark"]) :is([style$="background:#fff"], [style$="background: #fff"], [style$="background:white"], [style$="background: white"]):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, [id*="cert-canvas"], [class*="mb-canvas"], .mpc-own-fonts) *) {
  background-color: var(--g-surface) !important;
}

/* ── 25. Embedded apps + white controls + button groups ───────────────── */
/* An app inside a portal iframe draws no background of its own: the
   portal's one background (base colour + glow) shows through. */
html[data-glass-embedded]:not(.glass-off) { background: transparent !important; }
html[data-glass-embedded]:not(.glass-off) body { background: transparent !important; }
html[data-glass-embedded]:not(.glass-off) body::before { display: none !important; }
html:not(.glass-off) iframe:not([src*="youtube"]):not([src*="drive.google"]):not([src*=".pdf"]):not([src^="blob:"]) { background: transparent !important; color-scheme: normal; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) iframe:not([src*="youtube"]):not([src*="drive.google"]):not([src*=".pdf"]):not([src^="blob:"]) { color-scheme: dark; }

/* Controls that painted themselves solid white (tagged by glass-mode.js) */
html:not(.glass-off) .g-solid-white { background-color: var(--g-surface) !important; border-color: var(--glass-edge) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html:not(.glass-off) .g-solid-white:hover { background-color: var(--gw85, rgba(255,255,255,0.85)) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .g-solid-white { color: var(--text-dark) !important; border-color: rgba(255,255,255,0.14) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .g-solid-white:hover { background-color: rgba(255,255,255,0.12) !important; }

/* Button groups: a rounded group never shows square fills. The unselected
   buttons inside are clear (the group is the surface); every button in a
   group is rounded; the group clips its children. */
html:not(.glass-off) :is(.ptabs, .view-toggle, .ds-subtabs, .tab-nav, .seg, .segmented, .btn-group, .toggle-group, .ep-seg, .sd-seg, [role="tablist"], [role="radiogroup"]) { overflow: hidden; }
html:not(.glass-off) :is(.ptabs, .view-toggle, .seg, .segmented, .btn-group, .toggle-group, .ep-seg, .sd-seg, [role="radiogroup"]) > :is(button, a, label, [role="tab"], [role="radio"]):not(.active):not(.on):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]) {
  background: transparent !important; box-shadow: none !important;
}
html:not(.glass-off) :is(.ptabs, .view-toggle, .seg, .segmented, .btn-group, .toggle-group, .ep-seg, .sd-seg, .ds-subtabs, [role="tablist"], [role="radiogroup"]) > :is(button, a, label, [role="tab"], [role="radio"]) { border-radius: 10px !important; }
html:not(.glass-off) .view-toggle { padding: 3px; gap: 3px; border-radius: 12px; background: var(--g-surface); }
html:not(.glass-off) .view-toggle button { border-radius: 9px !important; }
html:not(.glass-off) :is(.ptabs, .view-toggle, .seg, .segmented, .btn-group, .toggle-group) > :is(button, a, label):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]):hover { background: var(--gw50, rgba(255,255,255,0.5)) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ptabs, .view-toggle, .seg, .segmented, .btn-group, .toggle-group) > :is(button, a, label):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]):hover { background: rgba(255,255,255,0.07) !important; }

/* ── 26. Contrast sweep, round 5 (from the 2026-10-19 live snapshots) ───
   A. The ink guard's tags (js/glass-mode.js): text that failed against the
      surface it really sits on. .g-ink-light and .g-pale are dark-mode only;
      .g-ink-tone (a deeper or lighter shade of the same hue) and .g-ink-dark
      apply in both modes, for clear failures only.
   B. Named fixes for what the snapshots showed, so they hold even before
      the guard has run. */
html[data-glass-theme="dark"]:not(.glass-off) .g-ink-light { color: var(--text-dark) !important; }
html:not(.glass-off) .g-ink-dark { color: #181c32 !important; }
html:not(.glass-off) .g-ink-tone { color: var(--g-ink) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .g-pale { background-color: var(--g-pale-tint, rgba(255,255,255,0.05)) !important; border-color: var(--glass-edge) !important; }

/* Embedded apps: §24's fixed base colour on <html> outranked §25's
   "transparent", so every iframe (sheets, classroom, invoice…) showed as a
   solid #0b0e14 (dark) or #eef1f6 (light) box inside the portal. */
html[data-glass-embedded]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]),
html[data-glass-embedded][data-glass-theme]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) { background: transparent !important; }

/* Mail (admin › Support › Mail): its rows and notes were black ink */
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox :is(.mb-thread .who, .mb-thread .who .nm, .mb-thread.unread .subj, .mb-thread.unread .who) { color: var(--text-dark) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-thread.read :is(.who, .who .nm) { color: var(--g-ink2) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-thread.read .subj { color: var(--g-ink3) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox :is(.mb-thread .snip, .mb-thread.read .snip, .mb-thread .mb-note, .mb-note, .mb-conn .conn-text) { color: var(--text-muted) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-msg :is(strong, div, .mb-note) { color: inherit; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-msg > div:first-child { color: var(--g-ink2) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-btn:not(.primary) { color: var(--text-dark) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-btn:not(.primary) :is(.mb-lbl, i, .mb-attach-name) { color: inherit !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-btn.primary, html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-btn.primary * { color: #181c32 !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-attach-size { color: var(--text-muted) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-pill { background-color: rgba(255,255,255,0.08); color: var(--g-ink2); }
/* Light mode: three inks that sat under 3:1 */
html:not(.glass-off):not([data-glass-theme="dark"]) #view-mailbox .mb-thread.read .snip { color: rgba(0,0,0,0.55); }
html:not(.glass-off):not([data-glass-theme="dark"]) .ri-avatar { color: #7a5600; }
html:not(.glass-off):not([data-glass-theme="dark"]) .slot-excused { color: #6f7388; }
html[data-glass-theme="dark"]:not(.glass-off) #view-mailbox .mb-thread.read .mb-pill { opacity: .85; }

/* Student Records: the PDF button painted itself the (now light) text colour */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) button.inline-action-btn.pdf-btn, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) button.inline-action-btn.pdf-btn.g-pale, html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) button.inline-action-btn.pdf-btn:disabled { background: rgba(255,255,255,0.14) !important; background-image: none !important; color: #eceef4 !important; border: 1px solid rgba(255,255,255,0.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important; opacity: 1 !important; }
html[data-glass-theme="dark"]:not(.glass-off) .pdf-btn:hover { background: rgba(255,255,255,0.22) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .pdf-btn * { color: inherit !important; }

/* Icons hand-painted the old dark ink inside dark controls (e.g. the
   teacher tracker's ⋮ button); an icon has no text, so the guard can't see it */
html[data-glass-theme="dark"]:not(.glass-off) :is(.kebab-btn, .inline-action-btn, .btn-secondary, .reload-btn) > i:is([style*="color: #181c32"], [style*="color:#181c32"], [style*="color: #111"], [style*="color:#111"], [style*="color: #333"], [style*="color:#333"]) { color: var(--text-dark) !important; }

/* Log Book: the merged checklist box and its tick boxes were white */
html[data-glass-theme="dark"]:not(.glass-off) .lb-merged { background: rgba(255,193,0,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off) :is(.lb-ed, .lb-view, .lb-merged-list) li.lbchk::before { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
html[data-glass-theme="dark"]:not(.glass-off) :is(.lb-ed, .lb-view, .lb-merged-list) li.lbchk[data-ck="1"]::before { background: var(--brand); border-color: var(--brand); color: #111; }
html[data-glass-theme="dark"]:not(.glass-off) :is(.lb-ed, .lb-view) li.lbchk, html[data-glass-theme="dark"]:not(.glass-off) .lb-merged-list li.lbchk { background-color: transparent; }
html[data-glass-theme="dark"]:not(.glass-off) .lb-chk-by { color: var(--text-muted) !important; }

/* Inquiries: the website-chat transcript card and Melo's bubbles */
html[data-glass-theme="dark"]:not(.glass-off) :is([style*="background:#fffaea"], [style*="background: #fffaea"]) { background: rgba(255,193,0,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off) :is([style*="background:#f0f0f3"], [style*="background: #f0f0f3"]) { background: rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .inq-melo-turns [style*="background:var(--brand)"] { color: #181c32 !important; }
/* Enrollment Forms: the "publishes immediately" notice */
html[data-glass-theme="dark"]:not(.glass-off) :is([style*="background: #fff8e1"], [style*="background:#fff8e1"]) { background: rgba(255,193,0,0.09) !important; border-color: rgba(255,193,0,0.3) !important; }
html[data-glass-theme="dark"]:not(.glass-off) :is([style*="color: #6b4a00"], [style*="color:#6b4a00"]) { color: #f3d58a !important; }
html[data-glass-theme="dark"]:not(.glass-off) :is([style*="color: #9c6500"], [style*="color:#9c6500"]) { color: #ffc94d !important; }

/* Generate Enrollment: the schedule box was near-white */
html[data-glass-theme="dark"]:not(.glass-off) #view-generate .enrol-schedule { background: rgba(80,205,137,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .day-label { background: rgba(255,255,255,0.05); color: var(--g-ink2); }
html[data-glass-theme="dark"]:not(.glass-off) .day-checkbox:checked + .day-label { background: var(--brand); color: #111; }

/* Website editor: the empty-state line */
html[data-glass-theme="dark"]:not(.glass-off) .ws-empty strong { color: var(--text-dark) !important; }

/* Master Calendar: tentative amber reads brighter on dark */
html[data-glass-theme="dark"]:not(.glass-off) .cal-slot.slot-tentative :is(span, .slot-sub-text) { color: #fbbf24; }

/* Invoices app (iframe): the right pane, the selected row, status words */
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) { --zoho-bg: rgba(255,255,255,0.02); }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .invoice-list-item.selected { background: rgba(255,193,0,0.12) !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .ili-meta { color: var(--text-muted) !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .ili-logs { color: #8a90a6 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .txt-paid { color: #4ade80 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .txt-unpaid { color: #fbbf24 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .txt-partial { color: #38bdf8 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .txt-void { color: #9ba1b5 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .txt-writeoff { color: #d58ae3 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .preview-side > [style*="color"] h3,
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .preview-side h3[style*="color"] { color: var(--text-muted) !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .preview-side h2[style*="#1e293b"] { color: var(--text-dark) !important; }

/* Bug Center (iframe): ticket ids, status chips, the active filter */
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .tid { color: #a9b4c8 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .st-resolved { color: #4ade80 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .st-deployed { color: #2dd4bf !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .st-invalid { color: #a9aec0 !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) :is(.m-aud, .m-aud b) { color: var(--text-muted) !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .fchip.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #14172b !important; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .fchip.active .cnt { background: rgba(20,23,43,0.14) !important; color: #14172b !important; }

/* Event planner (iframe): the Practice pill's violet ink */
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .ep-practice-pill { color: #c4b1f5 !important; border-color: rgba(124,92,214,0.45) !important; }

/* The invoice paper is a white document: its fields keep the page's own
   white-with-dark-ink, in dark mode too (the app-wide dark field rule had
   tinted them grey). */
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) :is(.invoice-paper, .paperWrapper) :is(input, select, textarea, datalist, option, .inline-input) { background-color: #ffffff !important; color: #111111 !important; border-color: transparent; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) :is(.invoice-paper, .paperWrapper) :is(input, select, textarea, .inline-input):hover { border-color: #cccccc; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) :is(.invoice-paper, .paperWrapper) :is(input, select, textarea, .inline-input):focus { background-color: #fffdf5 !important; border-color: var(--brand); }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) :is(.invoice-paper, .paperWrapper) :is(input, textarea)::placeholder { color: #8a8fa3; }

/* Staff chat button (admin, teacher, partner), dark: violet glass, so it is
   distinct from the yellow compose pencil. Same tokens as the parent widget
   (--glass-chat-fab-dark, -ink, -rim, -glow in :root). */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .chat-fab.chat-fab:not(.chat-fab-btn) {
  background: linear-gradient(145deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0) 60%), var(--glass-chat-fab-dark) !important;
  color: var(--glass-chat-fab-dark-ink) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-chat-fab-rim) !important;
  box-shadow: 0 12px 30px var(--glass-chat-fab-glow), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(60,40,140,0.3), 0 0 0 4px rgba(139,108,232,0.14) !important;
}
html[data-glass-theme="dark"]:not(.glass-off) .chat-fab i, html[data-glass-theme="dark"]:not(.glass-off) .chat-fab svg { color: inherit !important; }

/* Dialogs: frosted, nearly see-through glass (was ~90-97% opaque, so they
   read as solid sheets). Strong blur keeps text legible over the page; a
   top sheen and a bright rim sell the glass. Off for people who ask their
   device for reduced transparency (they keep the solid version). */
html:not(.glass-off):not(.glass-lite) :is(.alert-card, .modal-card, .auth-card, .modal-content, .ep-modal, .mpc-modal, [role="dialog"]):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview) *):not(.invoice-paper) {
  background:
    linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat,
    linear-gradient(160deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.34) 38%, rgba(255,255,255,0.46) 100%) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(38px) saturate(140%); backdrop-filter: blur(38px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 30px 80px rgba(24,28,50,0.28), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) :is(.alert-card, .modal-card, .auth-card, .modal-content, .ep-modal, .mpc-modal, [role="dialog"]):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview) *):not(.invoice-paper) {
  background:
    linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat,
    linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 38%, rgba(255,255,255,0.07) 100%),
    rgba(26,30,42,0.66) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

/* 2026-10-21: the computer-wide "Transparency effects: off" setting (Windows) no longer makes the panels dense: the owner wants the glass look whatever that setting says (glass-off / glass-lite remain for people who need solid). */
@media (prefers-reduced-transparency: reduce) and (width: 1px) {
  html:not(.glass-off) :is(.alert-card, .modal-card, .auth-card, .modal-content, .ep-modal, .mpc-modal, [role="dialog"]):not(.invoice-paper) { background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, var(--gw100) !important; border-color: var(--glass-edge) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* §28 Frostier panels in dark (owner, 2026-10-19: "make them frosty so it
   shows the gradient main background colors"). The panel tint drops from
   55% to about 30%, the blur goes up, the ambient glow behind gets stronger
   so there is colour to frost, and each panel has a faint sheen and a bright
   rim. Menus and dialogs keep their own denser tints. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) {
  --g-surface: rgba(30, 36, 52, 0.30);
  --glass-white: rgba(30, 36, 52, 0.30);
  --card-bg: rgba(30, 36, 52, 0.30) !important;
  --bg-card: rgba(30, 36, 52, 0.30) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before {
  background:
    radial-gradient(760px 760px at -6% -10%, rgba(255,193,0,0.34), rgba(255,193,0,0) 68%),
    radial-gradient(560px 560px at 16% 58%, rgba(0,158,247,0.24), rgba(0,158,247,0) 70%),
    radial-gradient(860px 860px at 104% 0%, rgba(0,158,247,0.22), rgba(0,158,247,0) 66%),
    radial-gradient(900px 900px at 100% 108%, rgba(139,108,232,0.36), rgba(139,108,232,0) 66%),
    radial-gradient(640px 640px at 36% 112%, rgba(255,193,0,0.18), rgba(255,193,0,0) 66%);
}
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .stat-card, .kpi-card, .top-header, .topbar, .chat-panel, .user-dropdown):not(.invoice-paper) {
  background-color: rgba(30, 36, 52, 0.30) !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.03) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border-color: rgba(255,255,255,0.13) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) .top-header, html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) .topbar { background-color: rgba(30, 36, 52, 0.38) !important; }
/* the detail column is only a wrapper: the card inside is the glass */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .split-detail.split-detail {
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* a card the page paints transparent on purpose (empty states, wrappers) stays
   transparent: no second tinted box inside a panel */
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .card.card.card:is([style*="background: transparent"], [style*="background:transparent"], [style*="background: none"], [style*="background:none"]) {
  background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* panels nested inside a frosted panel don't stack another blur */
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.split-list, .split-detail) .card.card:not([style*="border-top"]):not([style*="background: transparent"]):not([style*="background:transparent"]) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255,255,255,0.04) !important; box-shadow: none !important; }
/* the card's own yellow top edge (teacher/admin detail) is a border-top: keep it */
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .card.card.card[style*="border-top: 4px solid var(--brand)"], html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .card.card.card[style*="border-top:4px solid var(--brand)"] { border-top-color: var(--brand) !important; }
/* inner rows (accordions, session cards, notice bars) frost too */
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) :is(.accordion, .collapsible, details, .session-card, .lesson-card, .history-accordion) { background-color: rgba(255,255,255,0.045) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) :is([style*="background: var(--text-dark)"], [style*="background:var(--text-dark)"]):not(button):not(.badge) { background: rgba(30,36,52,0.38) !important; color: var(--text-dark) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,0.12); }
/* ledger / table headers stay a little denser so rows scroll under them cleanly */
html[data-glass-theme="dark"]:not(.glass-off) :is(thead th, .ledger-table th, .data-table th) { background-color: rgba(24,28,40,0.72) !important; }

/* Session tracker rows: the paid-on date pill, and frosty session cards */
html[data-glass-theme="dark"]:not(.glass-off) .status-badge.pay-badge { color: #ffd15c !important; border-color: rgba(255,209,92,0.55) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) .lesson-item { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §29 Invoices app (public/invoice.html, shown in the Invoices & SOA tab)
   — a UI pass. The paper is a document and looks the same in both modes;
   everything around it is glass. */

/* The paper: yellow title and header row, grey balance row, black ink —
   in dark too (the dark table-header rule had turned it grey). */
html:not(.glass-off) .invoice-paper { color: #111; }
html:not(.glass-off) .invoice-paper .paper-title-area h1 { color: var(--primary, #ffc100) !important; }
html:not(.glass-off) .invoice-paper .paper-table th { background: var(--primary, #ffc100) !important; color: #111 !important; }
html:not(.glass-off) .invoice-paper .paper-table td, html:not(.glass-off) .invoice-paper .totals-table td { color: #111; }
html:not(.glass-off) .invoice-paper .totals-table tr.bal-due { background: #f0f0f0 !important; color: #111; }

/* Left column (Invoices / Customers / Receivables): one frosted panel */
html:not(.glass-off) .list-sidebar {
  background: rgba(255,255,255,0.52) !important; border-right: 1px solid var(--glass-edge, rgba(24,28,50,0.08));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
}
html:not(.glass-off) .list-sidebar-header { background: transparent !important; border-bottom: 1px solid var(--glass-line, rgba(24,28,50,0.06)); padding: 16px 16px 14px; }
html[data-glass-theme="dark"]:not(.glass-off) .list-sidebar { background: rgba(30,36,52,0.34) !important; border-right-color: rgba(255,255,255,0.10); }
html[data-glass-theme="dark"]:not(.glass-off) .list-sidebar-header { border-bottom-color: rgba(255,255,255,0.08); }

/* Rows are soft cards instead of full-width ruled lines */
html:not(.glass-off) .invoice-list-item {
  margin: 4px 10px; padding: 13px 14px; border: 1px solid transparent !important; border-radius: 14px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
html:not(.glass-off) .invoice-list-item:hover { background: rgba(255,255,255,0.7); box-shadow: 0 6px 16px rgba(24,28,50,0.08); }
html:not(.glass-off) .invoice-list-item.selected { background: rgba(255,193,0,0.16); box-shadow: inset 3px 0 0 var(--primary, #ffc100), 0 6px 18px rgba(255,193,0,0.16); border-color: rgba(255,193,0,0.35) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .invoice-list-item { border-bottom-color: transparent !important; }
html[data-glass-theme="dark"]:not(.glass-off) .invoice-list-item:hover { background: rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
html[data-glass-theme="dark"]:not(.glass-off) .invoice-list-item.selected { background: rgba(255,193,0,0.14) !important; }
html:not(.glass-off) .ili-name { letter-spacing: -0.01em; }
html:not(.glass-off) .ili-amount { font-variant-numeric: tabular-nums; font-size: 1rem; }
html:not(.glass-off) .ili-logs { opacity: 0.85; }

/* Status words become pills */
html:not(.glass-off) .txt-status {
  padding: 3px 9px; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.06em;
  background: color-mix(in srgb, currentColor 13%, transparent); border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* Active / Drafts, and the toolbar over the paper */
html:not(.glass-off) .inv-scope-tabs { background: rgba(24,28,50,0.05); padding: 4px; border-radius: 14px; gap: 4px; border: 1px solid var(--glass-line, rgba(24,28,50,0.06)); }
html[data-glass-theme="dark"]:not(.glass-off) .inv-scope-tabs { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
html:not(.glass-off) .inv-scope-tab:not(.is-on) { border-radius: 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html:not(.glass-off) .inv-scope-tab.is-on, html:not(.glass-off) .inv-scope-tab.active, html:not(.glass-off) .inv-scope-tab[aria-selected="true"] { background: var(--primary, #ffc100) !important; color: #181c32 !important; box-shadow: 0 4px 12px rgba(255,193,0,0.38) !important; }
html:not(.glass-off) .render-action-bar { padding: 8px 10px; border-radius: 16px; background: rgba(255,255,255,0.5); border: 1px solid var(--glass-edge, rgba(24,28,50,0.08)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-glass-theme="dark"]:not(.glass-off) .render-action-bar { background: rgba(30,36,52,0.34); border-color: rgba(255,255,255,0.10); }
html:not(.glass-off) .render-action-bar .db-header-title { letter-spacing: -0.01em; }
html:not(.glass-off) .zoom-controls { border-radius: 12px; }
html:not(.glass-off) .invoice-paper { border-radius: 4px; }
/* the grey well behind the paper: let the glow through, keep the paper lifted */
html:not(.glass-off) .preview-side { background: transparent !important; }
html:not(.glass-off) .invoice-paper { box-shadow: 0 30px 70px rgba(24,28,50,0.22), 0 4px 10px rgba(24,28,50,0.08); }
html[data-glass-theme="dark"]:not(.glass-off) .invoice-paper { box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); }

/* §30 Global frost (js/glass-mode.js tags any big, near-opaque, neutral
   surface .g-frost and sets --g-frost-bg to its own colour at ~1/3 strength).
   Glass everywhere, whatever the page called it. */
html:not(.glass-off):not(.glass-lite) .g-frost {
  background-color: var(--g-frost-bg) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 10px 30px rgba(24,28,50,0.08), inset 0 1px 0 rgba(255,255,255,0.55);
}
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite) .g-frost {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 14px 36px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* no second blur inside a blur */
html:not(.glass-off) .g-frost .g-frost { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none; }

/* §31 Themed dropdown list (js/glass-mode.js replaces the browser's own
   <select> popup with this) */
.g-select-pop {
  position: fixed; z-index: 2147483000; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.25;
  background: rgba(255,255,255,0.80); color: #181c32;
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 24px 60px rgba(24,28,50,0.28), 0 2px 8px rgba(24,28,50,0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  transform-origin: top center; animation: g-pop-in 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
  scrollbar-width: thin;
}
.g-select-pop.is-up { transform-origin: bottom center; }
@keyframes g-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.g-select-pop .g-opt { position: relative; padding: 9px 36px 9px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
.g-select-pop .g-opt.is-active { background: rgba(255,193,0,0.20); }
.g-select-pop .g-opt.is-sel { background: var(--brand, #ffc100); color: #181c32; box-shadow: 0 4px 12px rgba(255,193,0,0.34); }
.g-select-pop .g-opt.is-sel::after { content: ''; position: absolute; right: 13px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #181c32; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g-select-pop .g-opt.g-sep { padding: 0; margin: 2px 12px; height: 1px; font-size: 0; line-height: 0; background: rgba(0,0,0,.16); opacity: 1; pointer-events: none; }
.g-select-pop .g-opt { padding-top: 7px; padding-bottom: 7px; }
.g-select-pop .g-opt.is-dis { opacity: 0.4; cursor: default; }
.g-select-pop .g-optgroup { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
html[data-glass-theme="dark"] .g-select-pop {
  background: rgba(26,30,42,0.84); color: #eceef4; border-color: rgba(255,255,255,0.16);
  box-shadow: 0 28px 64px rgba(0,0,0,0.6), 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14);
}
html[data-glass-theme="dark"] .g-select-pop .g-opt.is-active { background: rgba(255,255,255,0.09); }
html[data-glass-theme="dark"] .g-select-pop .g-opt.is-sel { background: var(--brand, #ffc100); color: #181c32; }
@media (prefers-reduced-motion: reduce) { .g-select-pop { animation: none; } }
/* the closed <select> keeps its own look; its chevron signals it opens */
html:not(.glass-off) select:not([multiple]):not([size]) { cursor: pointer; }

/* §31b Calendar, time and month pickers; search box; suggestion list */
.g-select-pop.g-dp { width: 304px; padding: 12px; overflow-x: hidden; }
.g-select-pop.g-dp-time { width: 236px; }
.g-select-pop.g-dp-month { width: 264px; }
.g-dp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.g-dp-head button, .g-dp-foot button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; }
.g-dp-head button { width: 32px; height: 32px; font-size: 18px; line-height: 1; opacity: 0.8; flex: none; }
.g-dp-head button:hover { background: rgba(255,193,0,0.22); opacity: 1; }
.g-dp-head .g-dp-title { flex: 1; width: auto; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; opacity: 1; }
span.g-dp-title { flex: 1; text-align: center; font-size: 14.5px; font-weight: 800; }
.g-dp-dow, .g-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.g-dp-dow span { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; padding: 4px 0 6px; }
.g-dp-d { height: 36px; border: 0; border-radius: 11px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.12s ease; }
.g-dp-d:hover:not(.is-dis) { background: rgba(255,193,0,0.24); }
.g-dp-d.is-out { opacity: 0.38; }
.g-dp-d.is-today { box-shadow: inset 0 0 0 1.5px var(--brand, #ffc100); font-weight: 800; }
.g-dp-d.is-sel, .g-dp-m.is-sel, .g-tp-i.is-sel { background: var(--brand, #ffc100) !important; color: #181c32 !important; font-weight: 800; box-shadow: 0 4px 12px rgba(255,193,0,0.36); }
.g-dp-d.is-dis { opacity: 0.22; cursor: default; text-decoration: line-through; }
.g-dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-dp-m { height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.g-dp-m:hover:not(.is-sel) { background: rgba(255,193,0,0.24); }
.g-dp-m.is-today { box-shadow: inset 0 0 0 1.5px var(--brand, #ffc100); }
.g-dp-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(127,133,160,0.2); }
.g-dp-foot button { padding: 7px 12px; font-size: 12.5px; font-weight: 700; }
.g-dp-foot button:hover { background: rgba(255,193,0,0.22); }
.g-dp-foot .g-dp-ok { background: var(--brand, #ffc100); color: #181c32; margin-left: auto; }
.g-dp-foot .g-dp-ok:hover { background: #ffd24d; }
.g-tp { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 6px; margin-top: 4px; }
.g-dp:not(.g-dp-time) .g-tp { padding-top: 10px; margin-top: 8px; border-top: 1px solid rgba(127,133,160,0.2); }
.g-tp-col { max-height: 188px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; scrollbar-width: thin; }
.g-tp-i { flex: none; height: 34px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.g-tp-i:hover:not(.is-sel) { background: rgba(255,193,0,0.24); }
.g-search { position: sticky; top: -6px; z-index: 1; width: 100%; box-sizing: border-box; margin: -2px 0 6px; padding: 9px 12px; border-radius: 11px; border: 1px solid rgba(127,133,160,0.3) !important; background: rgba(127,133,160,0.12) !important; color: inherit !important; font: inherit; font-size: 13px; outline: none; }
.g-search { background-color: #f4f5f9 !important; background-image: linear-gradient(rgba(127,133,160,0.12), rgba(127,133,160,0.12)) !important; box-shadow: 0 8px 0 0 #fbfbfd; }
html[data-glass-theme="dark"] .g-search { background-color: #232838 !important; box-shadow: 0 8px 0 0 #1c2030; }
.g-search:focus { border-color: var(--brand, #ffc100) !important; box-shadow: 0 0 0 3px rgba(255,193,0,0.22), 0 9px 0 0 #fbfbfd; }
html[data-glass-theme="dark"] .g-search:focus { box-shadow: 0 0 0 3px rgba(255,193,0,0.22), 0 9px 0 0 #1c2030; }
.g-search::placeholder { color: inherit; opacity: 0.5; }
.g-select-pop .g-opt-sub { display: block; font-size: 11.5px; font-weight: 500; opacity: 0.6; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-select-pop.g-dl .g-opt { padding-right: 12px; }

/* §33 Base polish, everywhere: scrollbars, checkboxes and radios, focus
   rings, text selection. */
/* Thin glass scrollbars (replaces the arrow-button grey ones) */
:where(html:not(.glass-off), html:not(.glass-off) *) { scrollbar-width: thin; scrollbar-color: rgba(127,133,160,0.5) transparent; }
:where(html[data-glass-theme="dark"]:not(.glass-off), html[data-glass-theme="dark"]:not(.glass-off) *) { scrollbar-color: rgba(190,196,225,0.34) transparent; }
/* Ad strips and carousels never show scrollbars */
html:not(.glass-off) :is([class*="ad-track"], [id*="ads-track"], [class*="ad-slider"], [class*="carousel"], [class*="ad-strip"]) { scrollbar-width: none !important; -ms-overflow-style: none; }
html:not(.glass-off) :is([class*="ad-track"], [id*="ads-track"], [class*="ad-slider"], [class*="carousel"], [class*="ad-strip"])::-webkit-scrollbar { display: none; width: 0; height: 0; }
@supports not (scrollbar-color: auto) {
  html:not(.glass-off) ::-webkit-scrollbar { width: 9px; height: 9px; }
  html:not(.glass-off) ::-webkit-scrollbar-thumb { background: rgba(127,133,160,0.5); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
  html:not(.glass-off) ::-webkit-scrollbar-track, html:not(.glass-off) ::-webkit-scrollbar-corner { background: transparent; }
  html:not(.glass-off) ::-webkit-scrollbar-button { display: none; }
}
/* Brand selection colour and one focus ring for keyboard users */
html:not(.glass-off) ::selection { background: rgba(255,193,0,0.42); color: inherit; }
:where(html:not(.glass-off)) :where(button, a, summary, [role="button"], [role="tab"], [tabindex]):focus-visible { outline: 2px solid rgba(255,193,0,0.9); outline-offset: 2px; }
:where(html:not(.glass-off)) :where(input, select, textarea):focus-visible { outline: none; }
/* Native checkboxes and radios (tagged .g-check by js/glass-mode.js) */
html:not(.glass-off) .g-check {
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 18px; height: 18px; margin-top: 0; margin-bottom: 0; vertical-align: middle; cursor: pointer;
  border: 1.5px solid rgba(127,133,160,0.65); border-radius: 6px; background: rgba(255,255,255,0.6);
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
html:not(.glass-off) .g-check[type="radio"] { border-radius: 50%; }
html:not(.glass-off) .g-check:hover { border-color: var(--brand, #ffc100); }
html:not(.glass-off) .g-check:checked { background: var(--brand, #ffc100); border-color: var(--brand, #ffc100); box-shadow: 0 3px 10px rgba(255,193,0,0.4); }
html:not(.glass-off) .g-check[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid #181c32; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html:not(.glass-off) .g-check[type="radio"]:checked::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #181c32; }
html:not(.glass-off) .g-check:focus-visible { outline: 2px solid rgba(255,193,0,0.9); outline-offset: 2px; }
html:not(.glass-off) .g-check:disabled { opacity: 0.45; cursor: not-allowed; }
html[data-glass-theme="dark"]:not(.glass-off) .g-check { border-color: rgba(255,255,255,0.36); background: rgba(255,255,255,0.07); }
html[data-glass-theme="dark"]:not(.glass-off) .g-check:checked { background: var(--brand, #ffc100); border-color: var(--brand, #ffc100); }

/* Type: nothing below 11px (js/glass-mode.js tags the offenders .g-fs), and
   one typeface everywhere. Documents (paper, books, certificates, tickets),
   code, icons and the Noir school name keep their own faces. */
html:not(.glass-off) .g-fs { font-size: 11px !important; }
/* Chat role tags (Admin/Group/Parent...) are written at 8-10px inline: set the final size in CSS so they do not grow when the script tags them after opening */
html:not(.glass-off) :is(.chat-panel, .chat-dir-item, #chatDirectory, #chatDirectoryWrapper) :is([style*="font-size:8px"],[style*="font-size: 8px"],[style*="font-size:9px"],[style*="font-size: 9px"],[style*="font-size:10px"],[style*="font-size: 10px"]) { font-size: 11px !important; }
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) *:not(i):not(.ph):not(.ph-bold):not(.ph-fill):not([class*="ph-"]):not(pre):not(code):not(kbd):not(samp):not(.ep-mono):not(.ep-seatchip):not(.brand-name):not(.brand-name *):not([style*="Noir"]):not([style*="Noir"] *):not(.mpc-own-fonts):not(.mpc-own-fonts *):not(.invoice-paper *):not(.invoice-paper):not(.paperWrapper *):not(.book-wrapper *):not(#pg-main *):not(.pg-pages *):not(.cert-preview *):not(#certPreview *):not([id*="cert-canvas"] *):not(.cert-portrait):not(.cert-portrait *):not(#certificate-print-area *):not([class*="mb-canvas"] *):not(svg *):not(canvas) {
  font-family: var(--glass-font) !important;
}
html:not(.glass-off) :is(button.ws-bld-name, .ws-bld-name) { border-radius: 10px; }

/* Small labels that sat at 9-10.5px */
html:not(.glass-off) :is(.lb-branch-pill, .lb-chip, .status-badge, .txt-status, .user-role, .ili-logs) { font-size: 11px; }
html:not(.glass-off) .sidebar .nav-bar-vertical > div:not([class]), html:not(.glass-off) .sidebar [class*="nav-section"], html:not(.glass-off) .sidebar [class*="nav-cat"] { font-size: 11px; letter-spacing: 0.08em; }
/* Log Book editor: glass, not a white sheet */
html:not(.glass-off) .lb-ed { background: rgba(255,255,255,0.55) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .lb-ed { background: rgba(255,255,255,0.05) !important; }

/* A frosted toolbar is its own layer, so a menu opening from it must sit above the next frosted panel */
html:not(.glass-off) :is(.calendar-controls, .cal-controls) { position: relative; z-index: 30; }
/* Light mode: dark navy notice bars (background: var(--text-dark)) become glass */
html:not(.glass-off):not([data-glass-theme="dark"]) :is([style*="background: var(--text-dark)"], [style*="background:var(--text-dark)"]):not(button):not(.badge):not(.btn-primary) { background: rgba(255,255,255,0.6) !important; color: var(--text-dark) !important; border: 1px solid rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 8px 24px rgba(24,28,50,0.08); }
/* Small captions and badges that sat just under 4.5:1 */
html:not(.glass-off):not([data-glass-theme="dark"]) .result-item small { color: #5f6478; }
html:not(.glass-off) .sub-badge { color: #181c32; }
html:not(.glass-off) :is(.nav-section-label, .user-card-role) { opacity: 1; color: rgba(24,28,50,0.78); }
html[data-glass-theme="dark"]:not(.glass-off) :is(.nav-section-label, .user-card-role) { color: rgba(24,28,50,0.82); }
html:not(.glass-off) [data-glass-portal="parents"] .logo-sub, html[data-glass-portal="parents"]:not(.glass-off) .top-header h2 { color: #5c4300; }
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off) .top-header h2 { color: #ffd15c; }

/* Master Calendar: the "Select Teachers…" multi-select list */
html:not(.glass-off) #compareMenu#compareMenu#compareMenu { background: rgba(255,255,255,0.88) !important; color: #181c32; border-radius: 16px !important; padding: 6px; border: 1px solid rgba(255,255,255,0.7) !important; -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: 0 24px 60px rgba(24,28,50,0.28) !important; z-index: 5000 !important; }
html[data-glass-theme="dark"]:not(.glass-off) #compareMenu#compareMenu#compareMenu { background: rgba(26,30,42,0.86) !important; color: #eceef4; border-color: rgba(255,255,255,0.16) !important; box-shadow: 0 28px 64px rgba(0,0,0,0.6) !important; }
html:not(.glass-off) #compareMenu > * { border-radius: 10px; }
html:not(.glass-off) #compareMenu label { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; border-radius: 10px; }
html:not(.glass-off) #compareMenu label:hover { background: rgba(255,193,0,0.18); }
html:not(.glass-off) #btn-compare-teachers, html:not(.glass-off) #customBranchSelector { border-radius: 12px !important; }
html[data-glass-theme="dark"]:not(.glass-off) #btn-compare-teachers { background: rgba(255,255,255,0.06) !important; color: var(--text-dark) !important; border-color: rgba(255,255,255,0.14) !important; }

/* The browser's own calendar/clock icon must not open its popup (ours opens on click) */
html:not(.glass-off) :is(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]):not([data-native])::-webkit-calendar-picker-indicator { pointer-events: none; }
/* The picker lists must never inherit dialog, button or field styling from the page or the theme:
   solid glass of their own, flat day/time cells. */
html:not(.glass-off) .g-select-pop, html:not(.glass-off) .g-select-pop.g-dp {
  background: rgba(255,255,255,0.90) !important; border: 1px solid rgba(255,255,255,0.8) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 24px 60px rgba(24,28,50,0.30), 0 2px 8px rgba(24,28,50,0.10), inset 0 1px 0 rgba(255,255,255,0.85) !important;
  color: #181c32; z-index: 2147483000;
}
html[data-glass-theme="dark"]:not(.glass-off) .g-select-pop, html[data-glass-theme="dark"]:not(.glass-off) .g-select-pop.g-dp {
  background: rgba(26,30,42,0.90) !important; border-color: rgba(255,255,255,0.16) !important; color: #eceef4;
  box-shadow: 0 28px 64px rgba(0,0,0,0.6), 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
html:not(.glass-off) .g-select-pop :is(button, .g-opt) {
  box-shadow: none !important; border: 0 !important; text-shadow: none; filter: none; margin: 0; min-height: 0; transform: none;
}
html:not(.glass-off) .g-select-pop button { background: transparent !important; color: inherit !important; font-family: inherit !important; min-width: 0 !important; width: auto; letter-spacing: normal; text-transform: none; }
html:not(.glass-off) .g-select-pop .g-dp-head button { padding: 0 !important; width: 32px; height: 32px; flex: none; }
html:not(.glass-off) .g-select-pop .g-dp-head .g-dp-title { width: auto; flex: 1 1 auto; min-width: 0 !important; padding: 0 4px !important; white-space: nowrap; }
html:not(.glass-off) .g-select-pop .g-dp-d, html:not(.glass-off) .g-select-pop .g-dp-m, html:not(.glass-off) .g-select-pop .g-tp-i { padding: 0 !important; width: auto; }
html:not(.glass-off) .g-select-pop .g-dp-foot button { padding: 7px 12px !important; }
html:not(.glass-off) .g-select-pop button:hover:not(.is-sel):not(.is-dis) { background: rgba(255,193,0,0.24) !important; }
html:not(.glass-off) .g-select-pop button.is-sel, html:not(.glass-off) .g-select-pop button.g-dp-ok { background: var(--brand, #ffc100) !important; color: #181c32 !important; }
html:not(.glass-off) .g-select-pop button.is-sel { box-shadow: 0 4px 12px rgba(255,193,0,0.36) !important; }
html:not(.glass-off) .g-select-pop .g-dp-d.is-today:not(.is-sel), html:not(.glass-off) .g-select-pop .g-dp-m.is-today:not(.is-sel) { box-shadow: inset 0 0 0 1.5px var(--brand, #ffc100) !important; }
html:not(.glass-off) .g-select-pop .g-dp-d { height: 36px; border-radius: 11px; }
html:not(.glass-off) .g-select-pop .g-dp-d.is-out { opacity: 0.38; }
html:not(.glass-off) .g-select-pop .g-dp-d.is-dis { opacity: 0.25; }

/* §32 Accounting + Expenses apps (embedded in the admin portal) */
html:not(.glass-off) .kpi-card { border-radius: 18px; border: 1px solid var(--glass-edge, rgba(24,28,50,0.08)); border-left-width: 6px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
html:not(.glass-off) .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(24,28,50,0.12); }
html:not(.glass-off) .kpi-card :is(.kpi-value, .kpi-val, h2, .amount) { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
html[data-glass-theme="dark"]:not(.glass-off) .kpi-card { border-color: rgba(255,255,255,0.10); border-left-color: inherit; }
html[data-glass-theme="dark"]:not(.glass-off) .kpi-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.4); }
html[data-glass-theme="dark"]:not(.glass-off) .kpi-card.income { border-left-color: var(--success); }
html[data-glass-theme="dark"]:not(.glass-off) .kpi-card.expense { border-left-color: var(--danger); }
/* chart cards: glass panels, with room for the canvas */
html:not(.glass-off) :is(.chart-card, .chart-container, .chart-box, .card):has(> canvas), html:not(.glass-off) :is(.chart-card, .chart-container, .chart-box):not(:has(> canvas)) { border-radius: 20px; }
html:not(.glass-off) canvas { max-width: 100%; }
/* ledger / table wrappers: soft rows, no hard rules */
html:not(.glass-off) .ledger-container { border-radius: 20px; overflow: hidden; }
html:not(.glass-off) .ledger-row { transition: background 0.15s ease; }
html:not(.glass-off) .ledger-row:hover { background: rgba(255,193,0,0.08); }
html[data-glass-theme="dark"]:not(.glass-off) .ledger-row { border-bottom-color: rgba(255,255,255,0.06) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .ledger-row:hover { background: rgba(255,193,0,0.07); }
html:not(.glass-off) .ledger-table th { letter-spacing: 0.07em; }
/* report buttons grouped in the filter bar */
html:not(.glass-off) .tab-nav .tab-btn, html:not(.glass-off) .tab-btn { border-radius: 12px; }

/* §34 Frostier panels in LIGHT (owner: light mode should be frosty globally,
   inside the main pages too). Same recipe as §28: about a third white over a
   strong blur, a bright rim and sheen, and more colour in the glow behind so
   there is something to frost. Menus and dialogs keep their denser tints. */
html:not(.glass-off):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) {
  --g-surface: rgba(255, 255, 255, 0.36);
  --g-surface-2: rgba(255, 255, 255, 0.24);
  --card-bg: rgba(255, 255, 255, 0.36) !important;
  --bg-card: rgba(255, 255, 255, 0.36) !important;
  --bg-main: rgba(255, 255, 255, 0.24) !important;
  --bg-color: rgba(255, 255, 255, 0.24) !important;
}
html:not(.glass-off):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before {
  background:
    radial-gradient(260px 260px at 6% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
    radial-gradient(420px 420px at 15% 58%, rgba(0,158,247,0.38), rgba(0,158,247,0) 70%),
    radial-gradient(380px 380px at 2% 84%, rgba(241,65,108,0.30), rgba(241,65,108,0) 70%),
    radial-gradient(360px 360px at 17% 8%, rgba(139,108,232,0.30), rgba(139,108,232,0) 70%),
    radial-gradient(860px 860px at -4% -10%, rgba(255,193,0,0.52), rgba(255,193,0,0) 68%),
    radial-gradient(1000px 1000px at 104% 112%, rgba(255,193,0,0.44), rgba(255,193,0,0) 66%),
    radial-gradient(800px 800px at 58% -18%, rgba(0,158,247,0.20), rgba(0,158,247,0) 66%),
    radial-gradient(720px 720px at 34% 118%, rgba(139,108,232,0.20), rgba(139,108,232,0) 66%),
    radial-gradient(600px 600px at 82% 50%, rgba(80,205,137,0.10), rgba(80,205,137,0) 66%);
}
html:not(.glass-off):not(.glass-lite):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .stat-card, .kpi-card, .top-header, .topbar, .chat-panel, .user-dropdown):not(.invoice-paper) {
  background-color: rgba(255, 255, 255, 0.36) !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(175%); backdrop-filter: blur(26px) saturate(175%);
  border-color: rgba(255,255,255,0.72) !important;
  box-shadow: 0 18px 44px rgba(24,28,50,0.10), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
html:not(.glass-off):not(.glass-lite):not([data-glass-theme="dark"]) :is(.top-header, .topbar) { background-color: rgba(255,255,255,0.46) !important; }
html:not(.glass-off):not([data-glass-theme="dark"]) .split-detail.split-detail { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not(.glass-off):not([data-glass-theme="dark"]) .card.card.card:is([style*="background: transparent"], [style*="background:transparent"], [style*="background: none"]) { background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not(.glass-off):not([data-glass-theme="dark"]) :is(.split-list, .split-detail) .card.card:not([style*="border-top"]):not([style*="background: transparent"]):not([style*="background:transparent"]) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255,255,255,0.30) !important; box-shadow: none !important; }
/* table headers stay denser so rows scroll under them cleanly */
html:not(.glass-off):not([data-glass-theme="dark"]) :is(thead th, .ledger-table th, .data-table th):not(.invoice-paper *) { background-color: rgba(255,255,255,0.78) !important; }
/* inner rows and accordions */
html:not(.glass-off):not(.glass-lite):not([data-glass-theme="dark"]) :is(.accordion, .collapsible, details, .session-card, .lesson-card, .history-accordion) { background-color: rgba(255,255,255,0.34) !important; }
html:not(.glass-off):not(.glass-lite):not([data-glass-theme="dark"]) .result-item:not(.active) { background-color: rgba(255,255,255,0.34); }

/* Parent portal "My Students": the panel had no inner padding, so the title,
   the Claim button, the student cards and the ad banner all sat on its edge. */
html[data-glass-portal="parents"]:not(.glass-off) .split-list { padding: 18px 18px 20px !important; box-sizing: border-box; }
html[data-glass-portal="parents"]:not(.glass-off) .split-list > div:first-child { padding: 0 2px; margin-bottom: 4px; }
html[data-glass-portal="parents"]:not(.glass-off) .split-list-content { padding: 0; }
html[data-glass-portal="parents"]:not(.glass-off) .split-list #dashboard-ads-wrapper, html[data-glass-portal="parents"]:not(.glass-off) .split-list .ad-carousel-wrapper { margin-top: 14px; border-radius: 16px; overflow: hidden; }

/* §35 Chat bubbles: the same clean translucent box as the stat cards. No solid
   white fill and no hard white top line (owner: "i like the clean box like
   in the Active Students box"). Sent bubbles keep their colour. */
html:not(.glass-off):not([data-glass-theme="dark"]) :is(.chat-received, .chat-bubble.them, .chat-typing) {
  background-color: rgba(255,255,255,0.40) !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.2) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 8px 22px rgba(24,28,50,0.07), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-received, .chat-bubble.them, .chat-typing) {
  background-color: rgba(30,36,52,0.30) !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.03) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  color: var(--text-dark) !important;
}
html[data-glass-theme="dark"]:not(.glass-off) .chat-bubble.me { box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
/* the typing dots are soft, not bright */
html[data-glass-theme="dark"]:not(.glass-off) .chat-typing :is(i, .dot, span:empty) { background-color: rgba(255,255,255,0.28); }
html[data-glass-theme="dark"]:not(.glass-off) .chat-typing span:not(:empty) { background: transparent; color: var(--text-muted, #aeb4cf); }

/* §36 No solid white highlight on dark glass (js/glass-mode.js sets --g-nohi-shadow
   on anything that carried a bright white inset). Static fallback for the usual suspects: */
html[data-glass-theme="dark"]:not(.glass-off) .g-nohi { box-shadow: var(--g-nohi-shadow) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.inline-action-btn, .btn-secondary, .btn.secondary, .btn-icon, .kebab-btn, .menu-toggle, .stat-box, #view-mailbox .mb-btn, .reload-btn, .chat-cat-chip):not(.btn-primary):not(.primary):not([style*="background"]) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14);
  background-color: rgba(255,255,255,0.07) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-glass-theme="dark"]:not(.glass-off) :is(.inline-action-btn, .btn-secondary, .btn.secondary, .btn-icon, .kebab-btn, .reload-btn):not(.btn-primary):not([style*="background"]):hover { background-color: rgba(255,255,255,0.13) !important; }
html[data-glass-theme="dark"]:not(.glass-off) :is(.header-dropdown, .kebab-dropdown, .user-dropdown, #notifDropdown, #globalKebabMenu, .glass-mode-pop, .custom-select-options, .shared-dropdown) {
  box-shadow: 0 22px 54px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html[data-glass-theme="dark"]:not(.glass-off) .btn-primary { box-shadow: 0 6px 16px rgba(255,193,0,0.30), inset 0 1px 0 rgba(255,255,255,0.22); }

/* Hamburger / menu button: black lines vanished on dark, and the square did not blend */
html[data-glass-theme="dark"]:not(.glass-off) .menu-toggle:not(.sidebar *):not(.mobile-open), html[data-glass-theme="dark"]:not(.glass-off) .menu-toggle:not(.sidebar *):not(.mobile-open) * { color: #eceef4 !important; --text-dark: #eceef4; }
/* sidebar open on a phone: the button sits over the YELLOW sidebar, so its lines go dark (both modes) */
html:not(.glass-off) .menu-toggle.mobile-open, html:not(.glass-off) .menu-toggle.mobile-open * { color: #181c32 !important; --text-dark: #181c32; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .menu-toggle.menu-toggle.menu-toggle.mobile-open { background-color: rgba(255,255,255,0.38) !important; border-color: rgba(24,28,50,0.18) !important; box-shadow: 0 4px 12px rgba(176,125,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .menu-toggle { background-color: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.14) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important; }

/* §37 Glass buttons, disabled look, rounded text boxes, frosty notification box */
/* dark solid neutral buttons (tagged .g-btn by js/glass-mode.js) become translucent glass */
html[data-glass-theme="dark"]:not(.glass-off) .g-btn {
  background-color: rgba(255,255,255,0.08) !important; color: #eceef4 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
html[data-glass-theme="dark"]:not(.glass-off) .g-btn:hover { background-color: rgba(255,255,255,0.15) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .g-btn :is(i, span, svg) { color: inherit !important; }
/* disabled buttons: quiet glass, not a muddy half-transparent colour */
html[data-glass-theme="dark"]:not(.glass-off) :is(button, .btn, .btn-primary, .mb-btn, .mbc-send, .inline-action-btn, input[type="button"], input[type="submit"]):disabled,
html[data-glass-theme="dark"]:not(.glass-off) :is(button, .btn, .mb-btn)[aria-disabled="true"] {
  background-color: rgba(255,255,255,0.08) !important; background-image: none !important; color: rgba(236,238,244,0.64) !important;
  border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed;
}
html[data-glass-theme="dark"]:not(.glass-off) :is(button, .btn, .mb-btn):disabled :is(i, span, svg) { color: inherit !important; }
/* notification box: frosted. A backdrop-filter nested inside another one (the header's) only sees the
   header, not the page, so the text behind showed through sharp. While a menu is open the header
   gives up its own blur so the menu's blur can see the page; the menu is dense enough to read. */
html:not(.glass-off) :is(.top-header, .topbar):has(:is(.header-dropdown.active, #notifDropdown.open, #notifDropdown.show, #notifDropdown.active, #notifDropdown.g-open)) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-glass-theme="dark"]:not(.glass-off) :is(#notif-dropdown-menu, #notifDropdown, .header-dropdown) {
  background-color: rgba(26,30,42,0.80) !important; -webkit-backdrop-filter: blur(34px) saturate(170%) !important; backdrop-filter: blur(34px) saturate(170%) !important;
}
html:not(.glass-off):not([data-glass-theme="dark"]) :is(#notif-dropdown-menu, #notifDropdown, .header-dropdown) {
  background-color: rgba(255,255,255,0.80) !important; -webkit-backdrop-filter: blur(34px) saturate(170%) !important; backdrop-filter: blur(34px) saturate(170%) !important;
}
/* rounded text boxes (js tags square ones .g-round); the compose window's fields by name */
html:not(.glass-off) .g-round { border-radius: 12px !important; }
html:not(.glass-off) :is(textarea, [contenteditable="true"]).g-round { border-radius: 14px !important; }
html:not(.glass-off) :is(.mbc-chips, input.mbc-subject, input.mbc-in, .mbc-finput, .mbc-audsel) { border-radius: 12px !important; }
html:not(.glass-off) .mbc-editor { border-radius: 14px !important; }
html:not(.glass-off) .mbc-row { padding-top: 6px; padding-bottom: 6px; }

/* Phone header: the title takes the space that is left and ends in an ellipsis (it was cut off hard
   against the buttons), and the header is a little tighter so the title, burger, theme switch, bell
   and avatar all fit on a 390px screen. */
@media (max-width: 600px) {
  html:not(.glass-off) .main-content > .top-header, html:not(.glass-off) .top-header { padding-left: 12px; padding-right: 12px; }
  html:not(.glass-off) .top-header .header-left { flex: 1 1 auto; min-width: 0; gap: 8px; margin-left: 58px; margin-right: 6px; }
  html:not(.glass-off) .top-header .header-right { flex: 0 0 auto; gap: 6px !important; }
  html:not(.glass-off) .top-header .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; display: block; }
  html:not(.glass-off) .top-header .page-title i { vertical-align: middle; margin-right: 6px; }
  html:not(.glass-off) .top-header .glass-mode-fab { width: 38px; height: 38px; min-width: 38px; }
  html:not(.glass-off) .top-header .notif-wrapper { min-width: 38px; }
  /* partner portal header */
  html[data-glass-portal="partner"]:not(.glass-off) .topbar-title { display: block !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 40px; height: 40px; }
  html[data-glass-portal="partner"]:not(.glass-off) .topbar-title > i { display: inline-flex; vertical-align: middle; margin-right: 8px; }
  html[data-glass-portal="partner"]:not(.glass-off) .topbar > :has(> .topbar-title) { min-width: 0; flex: 1 1 0; margin-right: 6px; }
  html[data-glass-portal="partner"]:not(.glass-off) .topbar { gap: 6px; padding-right: 12px; }
}

/* Notification box buttons (See All, refresh, mark read…): never black on the dark panel */
html[data-glass-theme="dark"]:not(.glass-off) :is(#notif-dropdown-menu, #notifDropdown, .header-dropdown) :is(.inline-action-btn, .btn-secondary, button):not([style*="background"]):not(.btn-primary) { color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off) :is(#notif-dropdown-menu, #notifDropdown, .header-dropdown) :is(.inline-action-btn, .btn-secondary, button) :is(i, span, svg) { color: inherit !important; }

/* Partner portal tables: the cells had 9px 2px padding on phones, so the text sat on the card's edge */
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap :is(th, td) { padding: 13px 12px !important; }
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap :is(th, td):first-child { padding-left: 18px !important; }
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap :is(th, td):last-child { padding-right: 16px !important; }
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap :is(th, td).col-num { padding-left: 14px !important; padding-right: 8px !important; width: 48px !important; min-width: 48px !important; white-space: nowrap; text-align: left; }
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap th { padding-top: 11px !important; padding-bottom: 11px !important; }

/* §38 Fixes from the partner/phone pass */
/* Bug-report button (bottom-left): it painted the page's text colour, so it was a pale grey disc with an invisible icon */
html:not(.glass-off) #mpcBugBtn { background: rgba(255,255,255,0.55) !important; color: #181c32 !important; border: 1px solid rgba(255,255,255,0.8) !important; opacity: 0.9 !important; -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: 0 6px 18px rgba(24,28,50,0.18), inset 0 1px 0 rgba(255,255,255,0.6) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #mpcBugBtn { background: rgba(255,255,255,0.10) !important; color: #eceef4 !important; border-color: rgba(255,255,255,0.22) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12) !important; }
html:not(.glass-off) #mpcBugBtn:hover { opacity: 1 !important; }
html:not(.glass-off) #mpcBugBtn svg { color: inherit; stroke: currentColor; }
/* Partner tables: room for the row menu (the 5% kebab column was 12px wide and touched the names) */
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap th.col-kebab, html[data-glass-portal="partner"]:not(.glass-off) .table-wrap td.col-kebab { width: 52px !important; min-width: 52px !important; padding-left: 6px !important; padding-right: 12px !important; text-align: center; }
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap td.col-clip { padding-right: 14px !important; }
/* phones: the name column takes what is left; program / date / referral get a fixed, readable width */
@media (max-width: 600px) {
  html[data-glass-portal="partner"]:not(.glass-off) .table-wrap th.col-clip:nth-child(2) { width: calc(100% - 188px) !important; }
  html[data-glass-portal="partner"]:not(.glass-off) .table-wrap th.col-clip:nth-child(3) { width: 92px !important; }
  html[data-glass-portal="partner"]:not(.glass-off) .table-wrap td.col-clip:nth-child(3), html[data-glass-portal="partner"]:not(.glass-off) .table-wrap th.col-clip:nth-child(3) { padding-left: 6px !important; padding-right: 8px !important; }
  html[data-glass-portal="partner"]:not(.glass-off) .table-wrap :is(th, td).col-num { width: 44px !important; min-width: 44px !important; padding-left: 12px !important; }
}
html[data-glass-portal="partner"]:not(.glass-off) .table-wrap .row-kebab-btn { width: 32px !important; min-width: 32px !important; margin: 0 auto; }
/* Partner / glass dropdowns: solid enough to read (the frost rules had made them ~30% opaque) */
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.user-dropdown, #notifDropdown, .chat-panel):not(.invoice-paper) { background-color: rgba(26,30,42,0.88) !important; -webkit-backdrop-filter: blur(34px) saturate(170%) !important; backdrop-filter: blur(34px) saturate(170%) !important; }
html:not(.glass-off):not(.glass-lite):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.user-dropdown, #notifDropdown, .chat-panel):not(.invoice-paper) { background-color: rgba(255,255,255,0.88) !important; -webkit-backdrop-filter: blur(34px) saturate(170%) !important; backdrop-filter: blur(34px) saturate(170%) !important; }
html:not(.glass-off) :is(.top-header, .topbar):has(:is(.user-dropdown.open, .user-dropdown.show)) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Chat button: closer to the screen edge on phones */
@media (max-width: 600px) {
  html:not(.glass-off) .chat-fab { right: 12px !important; }
  /* partner: the button sits (position: relative) inside a fixed wrapper that holds the 24px offsets */
  html:not(.glass-off)[data-glass-portal="partner"] div:has(> .chat-fab-btn) { right: 12px !important; bottom: 14px !important; }
  html:not(.glass-off) .chat-fab-btn { right: auto !important; bottom: auto !important; }
}

/* §39 Team Management and the portfolio: pictures are rounded squares like everywhere else (they were circles) */
html:not(.glass-off) .result-item.kebab-row > div:first-child:is([style*="border-radius:50%"], [style*="border-radius: 50%"]) { border-radius: 12px !important; }
html:not(.glass-off) .result-item.kebab-row > div:first-child:is([style*="border-radius:50%"], [style*="border-radius: 50%"]) :is(img, div, span) { border-radius: 0 !important; }
html:not(.glass-off) :is([onclick^="openPublicPortfolio"]):is([style*="border-radius:50%"], [style*="border-radius: 50%"]) { border-radius: 22px !important; }
html:not(.glass-off) .portfolio-avatar { border-radius: 30px !important; }

/* §27 Light <-> Dark switch animation (js/glass-mode.js).
   View Transitions browsers crossfade the page; the rest fade colours. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
html.g-switching:not(.glass-off), html.g-switching:not(.glass-off) *, html.g-switching:not(.glass-off) *::before, html.g-switching:not(.glass-off) *::after {
  transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease, fill 0.38s ease, stroke 0.38s ease, opacity 0.2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.g-switching, html.g-switching * { transition: none !important; }
}

/* Event planner left menu: smooth fold / unfold (desk only, ≥1100px).
   The column eases between 212px and 68px; the names fade and slide out
   instead of vanishing (they stay in the tab, clipped to zero width). The
   page's own rule had "no width animation" for slow PCs, so it is short
   (0.22s) and off for reduced-motion and the flat glass-lite mode. */
@media (min-width: 1100px) {
  html:not(.glass-off):not(.glass-lite) .ep-app { transition: grid-template-columns 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
  html:not(.glass-off):not(.glass-lite) .ep-rail { overflow: hidden; overflow: clip; } /* clip, not only hidden: hidden makes the rail a scroll box, and the sticky tab list inside it then never sticks to the screen (owner 2026-10-21) */
  html:not(.glass-off):not(.glass-lite) .ep-tab, html:not(.glass-off):not(.glass-lite) .ep-railfold-btn { white-space: nowrap; transition: background 0.15s ease, padding 0.22s ease, gap 0.22s ease; }
  html:not(.glass-off):not(.glass-lite) .ep-tab .ep-tab-long,
  html:not(.glass-off):not(.glass-lite) .ep-railfold-lab { display: inline-block; max-width: 180px; overflow: hidden; vertical-align: middle; transition: max-width 0.22s ease, opacity 0.18s ease, transform 0.22s ease; }
  html:not(.glass-off):not(.glass-lite) .ep-app.is-railfold .ep-tab .ep-tab-long,
  html:not(.glass-off):not(.glass-lite) .ep-app.is-railfold .ep-railfold-lab { display: inline-block; max-width: 0; opacity: 0; transform: translateX(-6px); }
  html:not(.glass-off):not(.glass-lite) .ep-app.is-railfold .ep-tab, html:not(.glass-off):not(.glass-lite) .ep-app.is-railfold .ep-railfold-btn { gap: 0; }
  html:not(.glass-off):not(.glass-lite) .ep-railfold-btn i { transition: transform 0.22s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-app, .ep-tab, .ep-railfold-btn, .ep-tab .ep-tab-long, .ep-railfold-lab, .ep-railfold-btn i { transition: none !important; }
}

/* Invoice paper action buttons (Add Line Item / Add New Item): they turned a
   flat grey on the white paper. Brand yellow instead, in both modes. */
html:not(.glass-off) .invoice-paper button.btn-secondary.btn-secondary.btn-secondary {
  background: var(--brand, #ffc100) !important; color: #181c32 !important;
  border: 1px solid #e5ad00 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(255,193,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
html:not(.glass-off) .invoice-paper button.btn-secondary.btn-secondary.btn-secondary * { color: #181c32 !important; }
html:not(.glass-off) .invoice-paper button.btn-secondary.btn-secondary.btn-secondary:hover { background: #ffd24d !important; }
/* the second one ("Add New Item", has the coins icon) is the quieter twin: outlined */
html:not(.glass-off) .invoice-paper button.btn-secondary.btn-secondary.btn-secondary:has(.ph-coins, .ph-database, .ph-stack) {
  background: #fff8e1 !important; border: 1.5px solid #e5ad00 !important; box-shadow: none !important; color: #7a5600 !important;
}
html:not(.glass-off) .invoice-paper button.btn-secondary.btn-secondary.btn-secondary > :is(.ph-coins, .ph-database, .ph-stack), html:not(.glass-off) .invoice-paper button.btn-secondary.btn-secondary.btn-secondary > :is(.ph-coins, .ph-database, .ph-stack) ~ * { color: #7a5600 !important; }

/* Invoices: the branch menu floats over the white paper, so it must be solid
   (the translucent glass tint let the paper show through the options). */
html:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu { background: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 5000 !important; box-shadow: 0 14px 36px rgba(24,28,50,0.22) !important; }
html:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu > div { color: #181c32 !important; background: transparent !important; }
html:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu > div:hover { background: #f3f5f9 !important; }
html[data-glass-theme="dark"]:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu { background: #1d222d !important; border-color: rgba(255,255,255,0.14) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.6) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu > div { color: #eceef4 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #customBranchMenu#customBranchMenu#customBranchMenu > div:hover { background: rgba(255,193,0,0.14) !important; }

/* Round 5, last pass */
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .ledger-row > td { color: #b4bacb; }
html[data-glass-theme="dark"][data-glass-portal="app"]:not(.glass-off) .ep-tk-railttl { color: #9ba1b5 !important; }
html[data-glass-theme="dark"]:not(.glass-off) .ili-logs { color: #9096ac !important; }
html[data-glass-theme="dark"]:not(.glass-off) .lb-board-count .open { color: #ff7a9b; }
html[data-glass-theme="dark"]:not(.glass-off) .ws-size { color: #55536a; }

/* ── 14. Print: no glass on paper ──────────────────────────────────────── */
@media print {
  html:not(.glass-off) { background: #fff !important; color-scheme: light; --card-bg: #fff !important; --bg-card: #fff !important; --bg-main: #f5f8fa !important; --bg-color: #f5f8fa !important; }
  html[data-glass-theme="dark"]:not(.glass-off) { --bg-main: #f5f8fa !important; --card-bg: #fff !important; --bg-card: #fff !important; --text-dark: #181c32 !important; --text-main: #181c32 !important; --text-muted: #6f7388 !important; --border-color: #eff2f5 !important; }
  html:not(.glass-off) body::before, html:not(.glass-off) .sidebar::after { display: none; }
  html:not(.glass-off) * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* §40 Partner avatars (no photo): themed tile with a dark icon, both modes */
html[data-glass-portal="partner"]:not(.glass-off) :is(.topbar-avatar, .user-card-avatar):not(:has(img)) { background: linear-gradient(145deg, var(--brand, #ffc400), #ffb300) !important; color: #181c32 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.45) !important; border: 0 !important; }
html[data-glass-portal="partner"]:not(.glass-off) :is(.topbar-avatar, .user-card-avatar) > i { color: #181c32 !important; }
html[data-glass-portal="partner"]:not(.glass-off) .topbar-avatar:not(:has(img)) { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 2px 8px rgba(0,0,0,0.18) !important; }
/* Partner tables: the hidden "Date Added" column is kept as a zero-width column (display:none made the 5-column empty/loading rows add a phantom column that stole a third of the width) */
html[data-glass-portal="partner"]:not(.glass-off) :is(#view-partnerActive, #view-partnerArchived) :is(th, td).col-date-added { display: table-cell !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; visibility: hidden; }

/* §41 Login page on phones: the card was only as tall as its content (min-height:100% of an auto-height page), leaving the lower half empty */
@media (max-width: 600px) {
  html:not(.glass-off) body:has(> #loginContainer.login-box) { min-height: 100vh; min-height: 100dvh; }
  html:not(.glass-off) #loginContainer.login-box { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
}

/* §42 Dark mode: small buttons that carry their own pale tint + neon border (Upload, View...) become quiet glass; the text keeps its hue */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .inline-action-btn[style*="background"]:not(.g-btn) {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
}
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .inline-action-btn[style*="background"]:hover { background: rgba(255,255,255,0.13) !important; border-color: rgba(255,255,255,0.32) !important; }
/* �43 pastel buttons on dark (tagged .g-pbtn): glass fill, soft edge, own text colour */
html[data-glass-theme="dark"]:not(.glass-off) .g-pbtn { background-color: rgba(255,255,255,0.08) !important; background-image: none !important; border-color: rgba(255,255,255,0.22) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .g-pbtn:hover { background-color: rgba(255,255,255,0.15) !important; }
/* �44 Dark: buttons that carry their own pastel fill (mint Redate / Upload, pale blue, white...) become neutral glass with a soft edge; the text keeps its hue */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main) button:is([style*="background:#e8fff3"], [style*="background: #e8fff3"], [style*="background-color:#e8fff3"], [style*="background-color: #e8fff3"], [style*="background:#ecfdf5"], [style*="background: #ecfdf5"], [style*="background-color:#ecfdf5"], [style*="background-color: #ecfdf5"], [style*="background:#f0fdf4"], [style*="background: #f0fdf4"], [style*="background-color:#f0fdf4"], [style*="background-color: #f0fdf4"], [style*="background:#dcfce7"], [style*="background: #dcfce7"], [style*="background-color:#dcfce7"], [style*="background-color: #dcfce7"], [style*="background:#e6fffa"], [style*="background: #e6fffa"], [style*="background-color:#e6fffa"], [style*="background-color: #e6fffa"], [style*="background:#f0f7ff"], [style*="background: #f0f7ff"], [style*="background-color:#f0f7ff"], [style*="background-color: #f0f7ff"], [style*="background:#e8f4ff"], [style*="background: #e8f4ff"], [style*="background-color:#e8f4ff"], [style*="background-color: #e8f4ff"], [style*="background:#eff6ff"], [style*="background: #eff6ff"], [style*="background-color:#eff6ff"], [style*="background-color: #eff6ff"], [style*="background:#e0f2fe"], [style*="background: #e0f2fe"], [style*="background-color:#e0f2fe"], [style*="background-color: #e0f2fe"], [style*="background:#f0f9ff"], [style*="background: #f0f9ff"], [style*="background-color:#f0f9ff"], [style*="background-color: #f0f9ff"], [style*="background:#e8f0fe"], [style*="background: #e8f0fe"], [style*="background-color:#e8f0fe"], [style*="background-color: #e8f0fe"], [style*="background:#fff5f8"], [style*="background: #fff5f8"], [style*="background-color:#fff5f8"], [style*="background-color: #fff5f8"], [style*="background:#fef2f2"], [style*="background: #fef2f2"], [style*="background-color:#fef2f2"], [style*="background-color: #fef2f2"], [style*="background:#fdf2f8"], [style*="background: #fdf2f8"], [style*="background-color:#fdf2f8"], [style*="background-color: #fdf2f8"], [style*="background:#fee2e2"], [style*="background: #fee2e2"], [style*="background-color:#fee2e2"], [style*="background-color: #fee2e2"], [style*="background:#fff1f2"], [style*="background: #fff1f2"], [style*="background-color:#fff1f2"], [style*="background-color: #fff1f2"], [style*="background:#f9f0ff"], [style*="background: #f9f0ff"], [style*="background-color:#f9f0ff"], [style*="background-color: #f9f0ff"], [style*="background:#f5f3ff"], [style*="background: #f5f3ff"], [style*="background-color:#f5f3ff"], [style*="background-color: #f5f3ff"], [style*="background:#ede9fe"], [style*="background: #ede9fe"], [style*="background-color:#ede9fe"], [style*="background-color: #ede9fe"], [style*="background:#fffdf5"], [style*="background: #fffdf5"], [style*="background-color:#fffdf5"], [style*="background-color: #fffdf5"], [style*="background:#fffbeb"], [style*="background: #fffbeb"], [style*="background-color:#fffbeb"], [style*="background-color: #fffbeb"], [style*="background:#fff8e1"], [style*="background: #fff8e1"], [style*="background-color:#fff8e1"], [style*="background-color: #fff8e1"], [style*="background:#fef9e7"], [style*="background: #fef9e7"], [style*="background-color:#fef9e7"], [style*="background-color: #fef9e7"], [style*="background:#fffaeb"], [style*="background: #fffaeb"], [style*="background-color:#fffaeb"], [style*="background-color: #fffaeb"], [style*="background:#fff9e6"], [style*="background: #fff9e6"], [style*="background-color:#fff9e6"], [style*="background-color: #fff9e6"], [style*="background:#fff5d6"], [style*="background: #fff5d6"], [style*="background-color:#fff5d6"], [style*="background-color: #fff5d6"], [style*="background:#eef0f8"], [style*="background: #eef0f8"], [style*="background-color:#eef0f8"], [style*="background-color: #eef0f8"], [style*="background:#e4e6ef"], [style*="background: #e4e6ef"], [style*="background-color:#e4e6ef"], [style*="background-color: #e4e6ef"], [style*="background:#eff2f5"], [style*="background: #eff2f5"], [style*="background-color:#eff2f5"], [style*="background-color: #eff2f5"], [style*="background:#e2e8f0"], [style*="background: #e2e8f0"], [style*="background-color:#e2e8f0"], [style*="background-color: #e2e8f0"], [style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background:#f8f9fa"], [style*="background: #f8f9fa"], [style*="background-color:#f8f9fa"], [style*="background-color: #f8f9fa"], [style*="background:#f5f6fa"], [style*="background: #f5f6fa"], [style*="background-color:#f5f6fa"], [style*="background-color: #f5f6fa"]) { background-color: rgba(255,255,255,0.08) !important; background-image: none !important; border-color: rgba(255,255,255,0.22) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main) button:is([style*="background: rgb(232, 255, 243)"], [style*="background: rgb(232, 255, 243)"], [style*="background-color: rgb(232, 255, 243)"], [style*="background-color: rgb(232, 255, 243)"], [style*="background: rgb(236, 253, 245)"], [style*="background: rgb(236, 253, 245)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background: rgb(240, 253, 244)"], [style*="background: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background: rgb(220, 252, 231)"], [style*="background: rgb(220, 252, 231)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background: rgb(230, 255, 250)"], [style*="background: rgb(230, 255, 250)"], [style*="background-color: rgb(230, 255, 250)"], [style*="background-color: rgb(230, 255, 250)"], [style*="background: rgb(240, 247, 255)"], [style*="background: rgb(240, 247, 255)"], [style*="background-color: rgb(240, 247, 255)"], [style*="background-color: rgb(240, 247, 255)"], [style*="background: rgb(232, 244, 255)"], [style*="background: rgb(232, 244, 255)"], [style*="background-color: rgb(232, 244, 255)"], [style*="background-color: rgb(232, 244, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background: rgb(224, 242, 254)"], [style*="background: rgb(224, 242, 254)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background: rgb(240, 249, 255)"], [style*="background: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background: rgb(232, 240, 254)"], [style*="background: rgb(232, 240, 254)"], [style*="background-color: rgb(232, 240, 254)"], [style*="background-color: rgb(232, 240, 254)"], [style*="background: rgb(255, 245, 248)"], [style*="background: rgb(255, 245, 248)"], [style*="background-color: rgb(255, 245, 248)"], [style*="background-color: rgb(255, 245, 248)"], [style*="background: rgb(254, 242, 242)"], [style*="background: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background: rgb(253, 242, 248)"], [style*="background: rgb(253, 242, 248)"], [style*="background-color: rgb(253, 242, 248)"], [style*="background-color: rgb(253, 242, 248)"], [style*="background: rgb(254, 226, 226)"], [style*="background: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background: rgb(255, 241, 242)"], [style*="background: rgb(255, 241, 242)"], [style*="background-color: rgb(255, 241, 242)"], [style*="background-color: rgb(255, 241, 242)"], [style*="background: rgb(249, 240, 255)"], [style*="background: rgb(249, 240, 255)"], [style*="background-color: rgb(249, 240, 255)"], [style*="background-color: rgb(249, 240, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background: rgb(237, 233, 254)"], [style*="background: rgb(237, 233, 254)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background: rgb(255, 253, 245)"], [style*="background: rgb(255, 253, 245)"], [style*="background-color: rgb(255, 253, 245)"], [style*="background-color: rgb(255, 253, 245)"], [style*="background: rgb(255, 251, 235)"], [style*="background: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background: rgb(255, 248, 225)"], [style*="background: rgb(255, 248, 225)"], [style*="background-color: rgb(255, 248, 225)"], [style*="background-color: rgb(255, 248, 225)"], [style*="background: rgb(254, 249, 231)"], [style*="background: rgb(254, 249, 231)"], [style*="background-color: rgb(254, 249, 231)"], [style*="background-color: rgb(254, 249, 231)"], [style*="background: rgb(255, 250, 235)"], [style*="background: rgb(255, 250, 235)"], [style*="background-color: rgb(255, 250, 235)"], [style*="background-color: rgb(255, 250, 235)"], [style*="background: rgb(255, 249, 230)"], [style*="background: rgb(255, 249, 230)"], [style*="background-color: rgb(255, 249, 230)"], [style*="background-color: rgb(255, 249, 230)"], [style*="background: rgb(255, 245, 214)"], [style*="background: rgb(255, 245, 214)"], [style*="background-color: rgb(255, 245, 214)"], [style*="background-color: rgb(255, 245, 214)"], [style*="background: rgb(238, 240, 248)"], [style*="background: rgb(238, 240, 248)"], [style*="background-color: rgb(238, 240, 248)"], [style*="background-color: rgb(238, 240, 248)"], [style*="background: rgb(228, 230, 239)"], [style*="background: rgb(228, 230, 239)"], [style*="background-color: rgb(228, 230, 239)"], [style*="background-color: rgb(228, 230, 239)"], [style*="background: rgb(239, 242, 245)"], [style*="background: rgb(239, 242, 245)"], [style*="background-color: rgb(239, 242, 245)"], [style*="background-color: rgb(239, 242, 245)"], [style*="background: rgb(226, 232, 240)"], [style*="background: rgb(226, 232, 240)"], [style*="background-color: rgb(226, 232, 240)"], [style*="background-color: rgb(226, 232, 240)"], [style*="background: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(248, 249, 250)"], [style*="background: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background: rgb(245, 246, 250)"], [style*="background: rgb(245, 246, 250)"], [style*="background-color: rgb(245, 246, 250)"], [style*="background-color: rgb(245, 246, 250)"]) { background-color: rgba(255,255,255,0.08) !important; background-image: none !important; border-color: rgba(255,255,255,0.22) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main) button:is([style*="background:#e8fff3"], [style*="background: #e8fff3"], [style*="background-color:#e8fff3"], [style*="background-color: #e8fff3"], [style*="background:#ecfdf5"], [style*="background: #ecfdf5"], [style*="background-color:#ecfdf5"], [style*="background-color: #ecfdf5"], [style*="background:#f0fdf4"], [style*="background: #f0fdf4"], [style*="background-color:#f0fdf4"], [style*="background-color: #f0fdf4"], [style*="background:#dcfce7"], [style*="background: #dcfce7"], [style*="background-color:#dcfce7"], [style*="background-color: #dcfce7"], [style*="background:#e6fffa"], [style*="background: #e6fffa"], [style*="background-color:#e6fffa"], [style*="background-color: #e6fffa"], [style*="background:#f0f7ff"], [style*="background: #f0f7ff"], [style*="background-color:#f0f7ff"], [style*="background-color: #f0f7ff"], [style*="background:#e8f4ff"], [style*="background: #e8f4ff"], [style*="background-color:#e8f4ff"], [style*="background-color: #e8f4ff"], [style*="background:#eff6ff"], [style*="background: #eff6ff"], [style*="background-color:#eff6ff"], [style*="background-color: #eff6ff"], [style*="background:#e0f2fe"], [style*="background: #e0f2fe"], [style*="background-color:#e0f2fe"], [style*="background-color: #e0f2fe"], [style*="background:#f0f9ff"], [style*="background: #f0f9ff"], [style*="background-color:#f0f9ff"], [style*="background-color: #f0f9ff"], [style*="background:#e8f0fe"], [style*="background: #e8f0fe"], [style*="background-color:#e8f0fe"], [style*="background-color: #e8f0fe"], [style*="background:#fff5f8"], [style*="background: #fff5f8"], [style*="background-color:#fff5f8"], [style*="background-color: #fff5f8"], [style*="background:#fef2f2"], [style*="background: #fef2f2"], [style*="background-color:#fef2f2"], [style*="background-color: #fef2f2"], [style*="background:#fdf2f8"], [style*="background: #fdf2f8"], [style*="background-color:#fdf2f8"], [style*="background-color: #fdf2f8"], [style*="background:#fee2e2"], [style*="background: #fee2e2"], [style*="background-color:#fee2e2"], [style*="background-color: #fee2e2"], [style*="background:#fff1f2"], [style*="background: #fff1f2"], [style*="background-color:#fff1f2"], [style*="background-color: #fff1f2"], [style*="background:#f9f0ff"], [style*="background: #f9f0ff"], [style*="background-color:#f9f0ff"], [style*="background-color: #f9f0ff"], [style*="background:#f5f3ff"], [style*="background: #f5f3ff"], [style*="background-color:#f5f3ff"], [style*="background-color: #f5f3ff"], [style*="background:#ede9fe"], [style*="background: #ede9fe"], [style*="background-color:#ede9fe"], [style*="background-color: #ede9fe"], [style*="background:#fffdf5"], [style*="background: #fffdf5"], [style*="background-color:#fffdf5"], [style*="background-color: #fffdf5"], [style*="background:#fffbeb"], [style*="background: #fffbeb"], [style*="background-color:#fffbeb"], [style*="background-color: #fffbeb"], [style*="background:#fff8e1"], [style*="background: #fff8e1"], [style*="background-color:#fff8e1"], [style*="background-color: #fff8e1"], [style*="background:#fef9e7"], [style*="background: #fef9e7"], [style*="background-color:#fef9e7"], [style*="background-color: #fef9e7"], [style*="background:#fffaeb"], [style*="background: #fffaeb"], [style*="background-color:#fffaeb"], [style*="background-color: #fffaeb"], [style*="background:#fff9e6"], [style*="background: #fff9e6"], [style*="background-color:#fff9e6"], [style*="background-color: #fff9e6"], [style*="background:#fff5d6"], [style*="background: #fff5d6"], [style*="background-color:#fff5d6"], [style*="background-color: #fff5d6"], [style*="background:#eef0f8"], [style*="background: #eef0f8"], [style*="background-color:#eef0f8"], [style*="background-color: #eef0f8"], [style*="background:#e4e6ef"], [style*="background: #e4e6ef"], [style*="background-color:#e4e6ef"], [style*="background-color: #e4e6ef"], [style*="background:#eff2f5"], [style*="background: #eff2f5"], [style*="background-color:#eff2f5"], [style*="background-color: #eff2f5"], [style*="background:#e2e8f0"], [style*="background: #e2e8f0"], [style*="background-color:#e2e8f0"], [style*="background-color: #e2e8f0"], [style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background:#f8f9fa"], [style*="background: #f8f9fa"], [style*="background-color:#f8f9fa"], [style*="background-color: #f8f9fa"], [style*="background:#f5f6fa"], [style*="background: #f5f6fa"], [style*="background-color:#f5f6fa"], [style*="background-color: #f5f6fa"]):hover { background-color: rgba(255,255,255,0.15) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main) button:is([style*="background: rgb(232, 255, 243)"], [style*="background: rgb(232, 255, 243)"], [style*="background-color: rgb(232, 255, 243)"], [style*="background-color: rgb(232, 255, 243)"], [style*="background: rgb(236, 253, 245)"], [style*="background: rgb(236, 253, 245)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background: rgb(240, 253, 244)"], [style*="background: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background: rgb(220, 252, 231)"], [style*="background: rgb(220, 252, 231)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background: rgb(230, 255, 250)"], [style*="background: rgb(230, 255, 250)"], [style*="background-color: rgb(230, 255, 250)"], [style*="background-color: rgb(230, 255, 250)"], [style*="background: rgb(240, 247, 255)"], [style*="background: rgb(240, 247, 255)"], [style*="background-color: rgb(240, 247, 255)"], [style*="background-color: rgb(240, 247, 255)"], [style*="background: rgb(232, 244, 255)"], [style*="background: rgb(232, 244, 255)"], [style*="background-color: rgb(232, 244, 255)"], [style*="background-color: rgb(232, 244, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background: rgb(224, 242, 254)"], [style*="background: rgb(224, 242, 254)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background: rgb(240, 249, 255)"], [style*="background: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background: rgb(232, 240, 254)"], [style*="background: rgb(232, 240, 254)"], [style*="background-color: rgb(232, 240, 254)"], [style*="background-color: rgb(232, 240, 254)"], [style*="background: rgb(255, 245, 248)"], [style*="background: rgb(255, 245, 248)"], [style*="background-color: rgb(255, 245, 248)"], [style*="background-color: rgb(255, 245, 248)"], [style*="background: rgb(254, 242, 242)"], [style*="background: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background: rgb(253, 242, 248)"], [style*="background: rgb(253, 242, 248)"], [style*="background-color: rgb(253, 242, 248)"], [style*="background-color: rgb(253, 242, 248)"], [style*="background: rgb(254, 226, 226)"], [style*="background: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background: rgb(255, 241, 242)"], [style*="background: rgb(255, 241, 242)"], [style*="background-color: rgb(255, 241, 242)"], [style*="background-color: rgb(255, 241, 242)"], [style*="background: rgb(249, 240, 255)"], [style*="background: rgb(249, 240, 255)"], [style*="background-color: rgb(249, 240, 255)"], [style*="background-color: rgb(249, 240, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background: rgb(237, 233, 254)"], [style*="background: rgb(237, 233, 254)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background: rgb(255, 253, 245)"], [style*="background: rgb(255, 253, 245)"], [style*="background-color: rgb(255, 253, 245)"], [style*="background-color: rgb(255, 253, 245)"], [style*="background: rgb(255, 251, 235)"], [style*="background: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background: rgb(255, 248, 225)"], [style*="background: rgb(255, 248, 225)"], [style*="background-color: rgb(255, 248, 225)"], [style*="background-color: rgb(255, 248, 225)"], [style*="background: rgb(254, 249, 231)"], [style*="background: rgb(254, 249, 231)"], [style*="background-color: rgb(254, 249, 231)"], [style*="background-color: rgb(254, 249, 231)"], [style*="background: rgb(255, 250, 235)"], [style*="background: rgb(255, 250, 235)"], [style*="background-color: rgb(255, 250, 235)"], [style*="background-color: rgb(255, 250, 235)"], [style*="background: rgb(255, 249, 230)"], [style*="background: rgb(255, 249, 230)"], [style*="background-color: rgb(255, 249, 230)"], [style*="background-color: rgb(255, 249, 230)"], [style*="background: rgb(255, 245, 214)"], [style*="background: rgb(255, 245, 214)"], [style*="background-color: rgb(255, 245, 214)"], [style*="background-color: rgb(255, 245, 214)"], [style*="background: rgb(238, 240, 248)"], [style*="background: rgb(238, 240, 248)"], [style*="background-color: rgb(238, 240, 248)"], [style*="background-color: rgb(238, 240, 248)"], [style*="background: rgb(228, 230, 239)"], [style*="background: rgb(228, 230, 239)"], [style*="background-color: rgb(228, 230, 239)"], [style*="background-color: rgb(228, 230, 239)"], [style*="background: rgb(239, 242, 245)"], [style*="background: rgb(239, 242, 245)"], [style*="background-color: rgb(239, 242, 245)"], [style*="background-color: rgb(239, 242, 245)"], [style*="background: rgb(226, 232, 240)"], [style*="background: rgb(226, 232, 240)"], [style*="background-color: rgb(226, 232, 240)"], [style*="background-color: rgb(226, 232, 240)"], [style*="background: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(248, 249, 250)"], [style*="background: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background: rgb(245, 246, 250)"], [style*="background: rgb(245, 246, 250)"], [style*="background-color: rgb(245, 246, 250)"], [style*="background-color: rgb(245, 246, 250)"]):hover { background-color: rgba(255,255,255,0.15) !important; }

/* §45 Compact date boxes (Cashbox ledger, payout filters): 105px was too narrow for "mm/dd/yyyy" plus the picker icon in the theme font, so the icon was cut in half */
html:not(.glass-off) input[type="date"].cb-compact-input { width: 118px !important; min-width: 118px !important; padding-right: 4px !important; }
@media (max-width: 768px) {
  html:not(.glass-off) input[type="date"].cb-compact-input { width: 0 !important; flex: 1 1 92px; min-width: 92px !important; }
  /* a row of filters (type, two dates, filter / refresh / download) wraps onto a second line instead of running past the screen */
  html:not(.glass-off) div:has(> input.cb-compact-input) { flex-wrap: wrap !important; row-gap: 8px; }
}
/* �46 glass-lite (iPhone / iPad and anyone who opts in): no blur layers at all. Surfaces keep their opaque lite colours. */
html.glass-lite.glass-lite.glass-lite:not(.glass-off) *, html.glass-lite.glass-lite.glass-lite:not(.glass-off) *::before, html.glass-lite.glass-lite.glass-lite:not(.glass-off) *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §47 THE GLOW LAYER IS A PICTURE. Five to nine big radial gradients on a fixed full-screen layer were re-drawn on every repaint
   (any spinner, hover or animation anywhere on the page): in WebKit that kept a 40,000-element page busy all the time and made iPhones
   crawl and crash. The same glows are now a small pre-rendered image (images/glow/*.png), drawn once. */
html:not(.glass-off):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before { background: url(/images/glow/glow-light-d.png) 0 0 / 100% 100% no-repeat !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before { background: url(/images/glow/glow-dark-d.png) 0 0 / 100% 100% no-repeat !important; }
@media (max-width: 768px) {
  html:not(.glass-off):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before { background: url(/images/glow/glow-light-p.png) 0 0 / 100% 100% no-repeat !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before { background: url(/images/glow/glow-dark-p2.png) 0 0 / 100% 100% no-repeat !important; }
}

/* §48 Split lists on phones/tablets (Team Management, Student Records...): the card was capped at 500px while its own header, tabs, search and buttons already take about that much, so the list spilled out of the bottom of the card. The card now grows with its content and only the list scrolls (inside the card). */
@media (max-width: 992px) {
  html:not(.glass-off) .split-view > .split-list { max-height: none !important; }
  html:not(.glass-off) .split-view > .split-list > .split-list-content { max-height: 58vh; min-height: 180px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* §49 glass-lite (iPhone / iPad): with no blur behind them, floating panels must be nearly solid, or the page shows through and text overlaps (Compose, dialogs, menus, chat, notification box, picker popups) */
html.glass-lite:not(.glass-off):not([data-glass-theme="dark"]) :is(#mpc-compose-panel, .mpc-compose-panel, .alert-card, .modal-card, .modal-content, .auth-card, .ep-modal, .mpc-modal, [role="dialog"], [role="menu"], [role="listbox"], .user-dropdown, #notifDropdown, .header-dropdown, .kebab-dropdown, .chat-panel, .g-select-pop, .custom-select-options, .shared-dropdown, .popover, .tooltip):not(.invoice-paper) { background-color: rgba(255,255,255,0.97) !important; background-image: none !important; }
html.glass-lite:not(.glass-off)[data-glass-theme="dark"] :is(#mpc-compose-panel, .mpc-compose-panel, .alert-card, .modal-card, .modal-content, .auth-card, .ep-modal, .mpc-modal, [role="dialog"], [role="menu"], [role="listbox"], .user-dropdown, #notifDropdown, .header-dropdown, .kebab-dropdown, .chat-panel, .g-select-pop, .custom-select-options, .shared-dropdown, .popover, .tooltip):not(.invoice-paper) { background-color: rgba(23,27,39,0.98) !important; background-image: none !important; }

/* §50 glass-mobile (iPhone / iPad): still frosty, far cheaper. Big surfaces (header, cards, panels, dialogs) keep a light blur (the script also caps every blur in this stylesheet at 9px); the small repeated controls (kebab buttons, row buttons, table cells, list rows: thousands on a long list) do not blur at all. */
html.glass-mobile:not(.glass-off) { --glass-blur: 16px; --glass-sat: 125%; }
html.glass-mobile.glass-mobile.glass-mobile:not(.glass-off) :is(.kebab-btn, .inline-action-btn, .g-solid-white, .g-btn, .g-pbtn, th, td, .nav-btn, .result-item, .chat-dir-item, .kebab-menu *, .lesson-item, .badge) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §51 glass-mobile: the Compose window and other floating panels are dense frost (about 90% fill + the light blur), so the page behind them cannot overlap their text */
html.glass-mobile:not(.glass-off):not([data-glass-theme="dark"]) :is(#mpc-compose-panel, .mpc-compose-panel, .alert-card, .modal-card, .modal-content, .auth-card, .ep-modal, .mpc-modal, [role="dialog"], .user-dropdown, #notifDropdown, .chat-panel, .g-select-pop):not(.invoice-paper) { background-color: rgba(255,255,255,0.90) !important; }
html.glass-mobile:not(.glass-off)[data-glass-theme="dark"] :is(#mpc-compose-panel, .mpc-compose-panel, .alert-card, .modal-card, .modal-content, .auth-card, .ep-modal, .mpc-modal, [role="dialog"], .user-dropdown, #notifDropdown, .chat-panel, .g-select-pop):not(.invoice-paper) { background-color: rgba(23,27,39,0.91) !important; }

/* §52 phones: the pulsing badges are off, and the notification bell, the loading spinners and the typing dots pause while the page is being scrolled. A running animation keeps a big page busy, and a busy page lets the fixed buttons (Compose, chat, bug) lag behind the scroll. */
html.glass-mobile:not(.glass-off) :is(.mpc-redate-nudge, [style*="animation: pulse"], [style*="animation:pulse"]) { animation: none !important; }
html.glass-mobile.g-scrolling:not(.glass-off) :is(.ph-spin, .spinner, .notif-btn-spin, .chat-typing i, .ph-bell, #notifBellIcon) { animation-play-state: paused !important; }

/* §53 glass-lite (opt-in flat mode, localStorage mpc_glass_lite=1), no blur at all. The frost on phones is a small pre-rendered picture (images/glow/frost-*.png: a milky fill with a soft sheen), not a live blur, so it costs nothing to draw and the page behind cannot show through. */
html.glass-lite.glass-lite.glass-lite:not(.glass-off) *, html.glass-lite.glass-lite.glass-lite:not(.glass-off) *::before, html.glass-lite.glass-lite.glass-lite:not(.glass-off) *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-lite.glass-lite:not(.glass-off):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .stat-card, .stat-box, .kpi-card, .top-header, .topbar, .ds-subtabs, .chat-panel, .user-dropdown, #notifDropdown, #mpc-compose-panel, .mpc-compose-panel, .alert-card, .modal-card, .modal-content, .auth-card, .ep-modal, .mpc-modal, [role="dialog"], .g-select-pop, .g-frost):not(.invoice-paper) { background: url(/images/glow/frost-light.png) 0 0 / 100% 100% no-repeat !important; }
html.glass-lite.glass-lite:not(.glass-off)[data-glass-theme="dark"]:not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .stat-card, .stat-box, .kpi-card, .top-header, .topbar, .ds-subtabs, .chat-panel, .user-dropdown, #notifDropdown, #mpc-compose-panel, .mpc-compose-panel, .alert-card, .modal-card, .modal-content, .auth-card, .ep-modal, .mpc-modal, [role="dialog"], .g-select-pop, .g-frost):not(.invoice-paper) { background: url(/images/glow/frost-dark.png) 0 0 / 100% 100% no-repeat !important; }

/* §54 phones: panels that sit on the page background (cards, list columns, stat boxes, sub-tabs) use the THIN frost, mostly see-through so the glow shows. Panels that float over page content (header, Compose, dialogs, menus, chat) keep the dense frost from §53, so nothing behind them overlaps their text. */
html.glass-lite.glass-lite.glass-lite:not(.glass-off):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .stat-card, .stat-box, .kpi-card, .ds-subtabs):not(.invoice-paper) { background: url(/images/glow/frost-thin2-light.png) 0 0 / 100% 100% no-repeat !important; }
html.glass-lite.glass-lite.glass-lite:not(.glass-off)[data-glass-theme="dark"]:not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.card, .split-list, .stat-card, .stat-box, .kpi-card, .ds-subtabs):not(.invoice-paper) { background: url(/images/glow/frost-thin2-dark.png) 0 0 / 100% 100% no-repeat !important; }

/* §55 iPhone / iPad: Safari's toolbars leave the fixed layer shorter than the screen, so a plain band showed under the glow at the bottom of the page (and it jumped as the toolbar moved). The glow layer is drawn taller than the screen above and below, so whatever the toolbars do, the background is already there. */
html.glass-mobile:not(.glass-off) body::before { top: -12vh !important; bottom: -40vh !important; height: auto !important; }

/* §56 phones: the chat window and the Compose window use the main page's own background (the page colour plus the same glow picture) instead of blurring the page behind them, one blurred layer fewer and nothing from the page behind can show through. Only the things inside them stay glass. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not([data-glass-theme="dark"]) :is(.chat-panel, #adminChatPanel, #mpc-compose-panel, .mpc-compose-panel) { background: url(/images/glow/glow-light-p.png) 0 0 / 100% 100% no-repeat, #f5f8fa !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off)[data-glass-theme="dark"] :is(.chat-panel, #adminChatPanel, #mpc-compose-panel, .mpc-compose-panel) { background: url(/images/glow/glow-dark-p2.png) 0 0 / 100% 100% no-repeat, #0e1117 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }





html.glass-mobile:not(.glass-off) body::before { top: -12vh !important; bottom: -40vh !important; height: auto !important; }

/* §58 the glow layer's height comes from the measured screen height (--g-vh, see glass-mode.js), with generous extra above and below */
html.glass-mobile:not(.glass-off) body::before { top: -12vh !important; bottom: auto !important; height: calc(var(--g-vh, 100vh) * 1.65) !important; }

/* §59 Square-cornered boxes (tagged .g-rad by glass-mode.js) get the theme's rounded corners; a details panel rounds its summary row too */
html:not(.glass-off) .g-rad { border-radius: 14px !important; }
html:not(.glass-off) details.g-rad > summary:first-child { border-radius: 14px !important; }
html:not(.glass-off) details.g-rad[open] > summary:first-child { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* §60 phones: the Log Book window follows the chat / Compose rule (the main page's own background, no blur); the Compose and Log Book bodies stay transparent so that background is what shows, with only the things inside them as glass */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not([data-glass-theme="dark"]) :is(#lbFloat) { background: url(/images/glow/glow-light-p.png) 0 0 / 100% 100% no-repeat, #f5f8fa !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off)[data-glass-theme="dark"] :is(#lbFloat) { background: url(/images/glow/glow-dark-p2.png) 0 0 / 100% 100% no-repeat, #0e1117 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off) :is(#mpc-compose-body, #lbFloatBody) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §61 Embedded pages on phones (invoice, accounting, expenses, sheets...): the panels are fully transparent so the main page's own background and glow show straight through, with no tint of their own. Only dialogs and menus keep a fill. */

/* §62 profile pictures that open large when tapped (see glass-mode.js, PICTURE VIEWER) */
html:not(.glass-off) :is(.ri-avatar-tracker img, .ri-avatar-lg img, .chat-header-pic img, .tracker-title .ri-avatar img) { cursor: zoom-in; }

/* §63 phones, Mail: the email composer window takes the main page's own background (page colour + glow picture) so nothing from the inbox behind it shows through; the Drafts list, menus and the formatting bar are solid. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not([data-glass-theme="dark"]) :is(.mbc-wrap, #mbc) { background: url(/images/glow/glow-light-p.png) 0 0 / 100% 100% no-repeat, #f5f8fa !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off)[data-glass-theme="dark"] :is(.mbc-wrap, #mbc) { background: url(/images/glow/glow-dark-p2.png) 0 0 / 100% 100% no-repeat, #0e1117 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not([data-glass-theme="dark"]) :is(.mbc-pop, .mbc-menu, .mbc-draftmenu, .mbc-toolbar, .mbc-sug, #mbc-sug) { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off)[data-glass-theme="dark"] :is(.mbc-pop, .mbc-menu, .mbc-draftmenu, .mbc-toolbar, .mbc-sug, #mbc-sug) { background: #171b27 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off) :is(.mbc-backdrop) { background: rgba(8,10,18,0.55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §64 phones: NO blur inside the chat, Compose, Mail composer and Log Book windows or the Mail page. A very tall message (a bot reply with a long list of commands is several screens high) with a blur behind it made Safari allocate one enormous layer and the page crashed while scrolling the thread. These areas get their depth from the solid page background of §56 / §60 / §63 instead. */
html.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none) :is(.chat-panel, #adminChatPanel, #mpc-compose-panel, .mpc-compose-panel, .mbc-wrap, #mbc, #lbFloat, #view-mailbox, #view-memos) :is(*, *::before, *::after) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §65 phones, Mail: the small pop-ups (Drafts list, menus, suggestions) are frosted again, not solid: a mostly-clear tint with a light blur. They are small, so the blur is cheap (the crash came from the very tall chat messages, not from these). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not([data-glass-theme="dark"]) :is(.mbc-pop, .mbc-menu, .mbc-draftmenu, .mbc-sug, #mbc-sug) { background: rgba(255,255,255,0.72) !important; -webkit-backdrop-filter: blur(14px) saturate(125%) !important; backdrop-filter: blur(14px) saturate(125%) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none)[data-glass-theme="dark"] :is(.mbc-pop, .mbc-menu, .mbc-draftmenu, .mbc-sug, #mbc-sug) { background: rgba(26,31,46,0.62) !important; -webkit-backdrop-filter: blur(14px) saturate(125%) !important; backdrop-filter: blur(14px) saturate(125%) !important; }

/* §66 Embedded pages on phones (invoice, accounting, expenses...): bars that stay on screen over the page's own content (the sticky Save / PDF bar, fixed headers; tagged .g-float by glass-mode.js) are frosted with a light blur, so the page text behind them cannot show through. A blur in a frame can only see the frame's own content, and that is exactly what lies behind these bars. */

/* �67 Embedded pages (invoice, accounting, expenses, sheets...) on phones look exactly like the normal pages: their own page colour, their own glow picture behind everything, and the same frosted panels with a light blur. A blur inside a frame only sees the frame, so the frame draws the glow itself instead of relying on the portal behind it. */
html.glass-mobile[data-glass-embedded]:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) { background: #eef1f6 !important; }
html.glass-mobile[data-glass-embedded][data-glass-theme="dark"]:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) { background: #0b0e14 !important; }
html.glass-mobile[data-glass-embedded]:not(.glass-off):not(#g-none):not(#g-none-2) body::before { display: block !important; }

/* §68 phones: the dim layer behind a dialog no longer blurs. Safari draws only one blurred layer in a stack: the dialog's own blur showed for a moment and then dropped back to plain transparent because the dim layer behind it (also blurred) took over. The dim layer is now a plain dark tint, so the dialog keeps its frosted blur. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none) .modal-overlay::before { background: rgba(8,10,18,0.50) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none) :is(.modal-overlay, .overlay, .modal-backdrop, .mbc-backdrop) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not([data-glass-theme="dark"]) :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(255,255,255,0.84) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2)[data-glass-theme="dark"] :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(26,30,42,0.80) !important; }

/* §69 phones, light mode: the side navigation was washed out (a 48-60% yellow over a pale page, and the phone's lighter blur no longer boosts it). It is now a rich, mostly solid brand yellow with only a light sheen. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not([data-glass-theme="dark"]) .sidebar { background: linear-gradient(145deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 38%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,201,31,0.98), rgba(250,182,0,0.96)) !important; }

/* §70 phones: Safari's bottom bar sits outside the area fixed layers can paint, so the glow ended in a hard line above it. The glow now fades into the plain page colour over its last stretch (the page colour is what shows under the bar), so there is no step. The layer is 1.65 x the screen tall starting 12vh above it: the screen's bottom edge is at about 68% of the layer. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not([data-glass-theme="dark"]):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before { background: linear-gradient(to bottom, rgba(238,241,246,0) 0%, rgba(238,241,246,0) 56%, #eef1f6 68%, #eef1f6 100%), url(/images/glow/glow-light-p.png) 0 0 / 100% 100% no-repeat !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none)[data-glass-theme="dark"]:not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) body::before { background: linear-gradient(to bottom, rgba(11,14,20,0) 0%, rgba(11,14,20,0) 56%, #0b0e14 68%, #0b0e14 100%), url(/images/glow/glow-dark-p2.png) 0 0 / 100% 100% no-repeat !important; }

/* §71 Segmented tab bars: the bar is a full pill, so its buttons are pills too (they had a 10px corner inside a pill-shaped track, which looked like two different shapes). Sheet Library's Library / Assignments bar. */
html:not(.glass-off):not(#g-none):not(#g-none-2) .ptabs > button, html:not(.glass-off):not(#g-none):not(#g-none-2) .ptabs > a { border-radius: 999px !important; }

/* �72 phones, My Timesheet: the Download (PDF) button of Transaction History sits on the heading line, at the right, instead of wrapping onto its own row under the filters */
@media (max-width: 768px) {
  html:not(.glass-off) .payout-header-container:has(> .payout-filter-group > button[onclick="txExportPdf()"]) { position: relative; }
  html:not(.glass-off) .payout-header-container > .payout-filter-group > button[onclick="txExportPdf()"] { position: absolute !important; top: 3px; right: 0; margin: 0; }
}

/* §73 Radios and checkboxes drawn by the theme (.g-check, appearance: none) ignore the page's blanket `input { padding: 10px 15px }` rule: with the native look the padding does nothing, but once the box is drawn by CSS it made them wide ovals (about 32 x 22 instead of 16-18 square). */
html:not(.glass-off):not(#g-none) .g-check { padding: 0 !important; box-sizing: border-box !important; min-width: 0 !important; }

/* §74 Mail pop-ups on every screen (Drafts list, menus, address suggestions): frosted and dense enough that the list behind cannot show through their text (on phones §65 sets its own, lighter tint). */
html:not(.glass-off):not(#g-none) :is(.mbc-pop, .mbc-menu, .mbc-draftmenu, .mbc-sug, #mbc-sug) { background-color: rgba(255,255,255,0.90) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 16px 40px rgba(24,28,50,0.22); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-none) :is(.mbc-pop, .mbc-menu, .mbc-draftmenu, .mbc-sug, #mbc-sug) { background-color: rgba(24,29,43,0.90) !important; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }

/* �75 The header keeps its blur while a menu or the notification box is open. The old rule (above) dropped the
   header blur so the menu could blur the page, which left the header see-through. The blur now sits on the
   header's ::before (a sibling layer, not an ancestor of the menu), so both blur the page. */
html:not(.glass-off) :is(.top-header, .topbar):has(:is(.header-dropdown.active, .user-dropdown.open, .user-dropdown.show, #notifDropdown.open, #notifDropdown.show, #notifDropdown.active, #notifDropdown.g-open))::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}

/* �76 phones: the page behind a dialog is blurred again. The blur sits on the dim layer only (one blurred layer, so Safari keeps it) and the dialog itself no longer blurs: its translucent tint sits on top of the already blurred layer, so it still looks frosted. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2) .modal-overlay::before { -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2) :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �77 The splash / authenticating screen is frosted at every screen size: a blurred, tinted sheet over the page behind it (it used the page colour, which the theme makes see-through, so the page showed through sharp). */
html:not(.glass-off):not(#g-none) :is(#appSplashLoader, #portalSplash) { background: rgba(238,241,246,0.62) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; backdrop-filter: blur(18px) saturate(150%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-none) :is(#appSplashLoader, #portalSplash) { background: rgba(11,14,20,0.62) !important; }

/* �78 phones: while a dialog is open, nothing UNDER it keeps a blur of its own. The dialog's dim layer blurs the whole page anyway, but every frosted card, the header and the side panels still held a blur layer of their own as well; on a heavy page (Student Records) that was enough for iOS to run out of memory and RELOAD the page just as the dialog opened (debug log: PAGE HIDDEN, then PAGE LOADED (reload)), so the dialog came up with no blur at all. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3).g-modal-open :not(.modal-overlay):not(.modal-overlay *):not(#mpcBugOverlay):not(#mpcBugOverlay *) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �79 phones: smooth dialog in/out. The dim layer carries the blur, and iOS re-draws a blurred layer on every frame while its opacity fades, which made the animation jerky. The dim layer now switches on and off without a fade (on instantly, off after the card has gone) and only the dialog card animates (a short fade and rise, which is cheap). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay { opacity: 1 !important; transition: visibility 0s linear 0.2s !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active { transition: visibility 0s linear 0s !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay > :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card) { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); margin-top: 0 !important; transition: opacity 0.18s ease, transform 0.18s ease !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active > :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card) { opacity: 1; transform: none; transition: opacity 0.24s ease, transform 0.24s cubic-bezier(.2,.8,.2,1) !important; }

/* �80 phones: dialogs fade properly. A blurred layer cannot fade smoothly on iOS (the blur is redrawn every frame), so the fade is split in two: the dark tint (::before, no blur) fades in and out smoothly, and the blur (::after) is switched on as the tint finishes and off the moment closing starts. Every direct child of the overlay (the card, or a wrapper around it) fades and rises. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 0; transition: opacity 0.22s ease !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active::before { opacity: 1; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; visibility: hidden; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: visibility 0s linear 0s; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active::after { visibility: visible; transition: visibility 0s linear 0.22s; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay > * { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); margin-top: 0 !important; transition: opacity 0.2s ease, transform 0.2s ease !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active > * { opacity: 1; transform: none; transition: opacity 0.26s ease 0.04s, transform 0.26s cubic-bezier(.2,.8,.2,1) 0.04s !important; }

/* �81 phones: the blur ramps in and out in five coarse steps (2, 5, 8, 11, 14px) instead of being switched on at once or animated every frame (iOS redraws a blurred layer per frame, which was the jerk). Few redraws, but it still reads as a frosting that grows. Replaces the delayed switch-on of �80. */
@keyframes g-frost-in { 0% { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } 25% { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } 50% { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } 75% { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); } 100% { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
@keyframes g-frost-out { 0% { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } 25% { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); } 50% { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } 75% { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } 100% { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay::after { visibility: inherit !important; transition: none !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: g-frost-out 0.22s step-end both; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active::after { visibility: inherit !important; transition: none !important; animation: g-frost-in 0.26s step-end both; }

/* �82 phones: no animated blur (the five-step ramp of �81 made the dialog re-render again and again, and the last render lost the blur). ONE static blur layer, switched on after the tint has faded in and off the moment closing starts. The card is denser too (90%), so it reads clearly even if iOS does not draw the blur on a very heavy page. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay::after, html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active::after { animation: none !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay::after { visibility: hidden !important; transition: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay.active::after { visibility: visible !important; transition: visibility 0s linear 0.22s !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not([data-glass-theme="dark"]) .modal-overlay :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(255,255,255,0.90) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3)[data-glass-theme="dark"] .modal-overlay :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(26,30,42,0.92) !important; }

/* �83 phones, Student Records: this page holds about 15,000 rendered elements (334 list rows, 75 session cards) and the dialog's blur has to re-draw everything behind it, which is where iOS dropped the blur. Rows and session cards that are off screen are now skipped by the browser until they scroll into view (it remembers each one's real height after the first time). */
html.glass-mobile:not(.glass-off) #view-search .lesson-item { content-visibility: auto; contain-intrinsic-size: auto 340px; }
/* (row skipping removed: it clipped the kebab menus) */

/* �84 phones: now that the blur holds, the dialog card is see-through again (about 58%) so the colours behind it show, soft and blurred, and the dim layer is a little lighter. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not([data-glass-theme="dark"]) .modal-overlay :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(255,255,255,0.58) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3)[data-glass-theme="dark"] .modal-overlay :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(26,30,42,0.56) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) .modal-overlay::before { background: rgba(8,10,18,0.34) !important; }

/* �85 phones: the Report a bug dialog follows the other dialogs: one blur on its dim layer, the card see-through on top of it (it kept a dense 88% tint plus its own blur). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3) #mpcBugOverlay { background: rgba(8,10,18,0.34) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not([data-glass-theme="dark"]) #mpcBugOverlay #mpcBugModal { background-color: rgba(255,255,255,0.58) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3)[data-glass-theme="dark"] #mpcBugOverlay #mpcBugModal { background-color: rgba(26,30,42,0.56) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �86 phones: small pop-up menus (the row menu with Reassign Branch, Rename, Earnings Summary...) had their blur removed for speed and were left with a thin tint, so the page behind showed through the words. They are dense now (94%) and keep one small 16px blur. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not([data-glass-theme="dark"]) :is(.kebab-dropdown, #globalKebabMenu:not(:empty), .user-dropdown, .header-dropdown, .custom-select-options, .shared-dropdown, .glass-mode-pop, #notifDropdown) { background-color: rgba(255,255,255,0.94) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3)[data-glass-theme="dark"] :is(.kebab-dropdown, #globalKebabMenu:not(:empty), .user-dropdown, .header-dropdown, .custom-select-options, .shared-dropdown, .glass-mode-pop, #notifDropdown) { background-color: rgba(24,28,40,0.95) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; }

/* �87 phones: with a dialog open the page behind it does not scroll (it used to, and the blur dropped while the page moved underneath). A drag on the dim area does nothing; a drag on the dialog scrolls the dialog and stops there instead of passing on to the page. */
html.glass-mobile:not(.glass-off) :is(.modal-overlay.active, #mpcBugOverlay) { touch-action: none; overscroll-behavior: contain; }
html.glass-mobile:not(.glass-off) :is(.modal-overlay.active > :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card), #mpcBugModal) { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* �88 phones: content-visibility (�83) clips whatever sticks out of a row, which cut the row's kebab menu down to a sliver. A row or card with an open menu is drawn in full while the menu is open. */
/* (open-menu exception removed with it) */

/* �89 phones: the blur of �86 belongs only to a menu that is OPEN. Every row on Student Records carries a hidden kebab menu (hundreds), and each one held a blur layer again, which brought back the overload that dropped the dialog blur. Closed menus have no blur; an open dialog also strips every blur beneath it (�78) and now beats �86. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4) :is(.kebab-dropdown, #globalKebabMenu, .user-dropdown, .header-dropdown, .custom-select-options, .shared-dropdown, .glass-mode-pop, #notifDropdown):not(.show):not(.open):not(.active) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4).g-modal-open :not(.modal-overlay):not(.modal-overlay *):not(#mpcBugOverlay):not(#mpcBugOverlay *) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �90 phones: the Report a bug dim layer is built exactly like the dialogs that hold their blur: the overlay itself carries NO blur or tint, a tint layer (::before) sits behind and ONE blur layer (::after) behind the card. (A blur on the overlay element itself, switched on by display:flex, was dropped by iOS.) */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5) #mpcBugOverlay { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5) #mpcBugOverlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: rgba(8,10,18,0.34); }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5) #mpcBugOverlay::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* �91 Report a bug: back to the build that held its blur (�85: the blur and tint on the overlay itself, the card see-through on top). The two-layer rebuild of �90 lost it. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6) #mpcBugOverlay { background: rgba(8,10,18,0.34) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6) #mpcBugOverlay::before, html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6) #mpcBugOverlay::after { content: none !important; display: none !important; }

/* �92 phones: the notification box (and the other header menus) is see-through and blurred like the dialogs: one blur on the panel, about 58% tint, and while it is open nothing else on the page keeps a blur layer of its own (the header's own blur sits on its ::before, see �75). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not([data-glass-theme="dark"]) .header-dropdown.active { background-color: rgba(255,255,255,0.60) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7)[data-glass-theme="dark"] .header-dropdown.active { background-color: rgba(26,30,42,0.58) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7).g-menu-open :not(:is(.header-dropdown, .kebab-dropdown, .mtf-pop, .user-dropdown, .custom-select-options, .shared-dropdown)):not(:is(.header-dropdown, .kebab-dropdown, .mtf-pop, .user-dropdown, .custom-select-options, .shared-dropdown) *) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �93 phones: a dialog opened OVER a floating window (Compose, chat, the Mail composer) did not blur that window: it stayed sharp behind the see-through card. The page's blur layer does not reach these fixed windows on iOS, so while a dialog is open the window itself is blurred (a plain filter on one small layer, not a backdrop effect). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8).g-modal-open :is(#mpc-compose-panel, #mpc-compose-fab, .chat-panel, #chat-panel, .mbc-wrap) { -webkit-filter: blur(7px) !important; filter: blur(7px) !important; pointer-events: none; }

/* �94 phones: the row menus (Deactivate / Refund / Delete, Reassign Branch...) are dense AND blurred: 94% tint plus an 18px blur. While one is open every other blur layer is switched off (an open menu nested in the frosted list card could only blur that card, so the names behind it stayed sharp). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not([data-glass-theme="dark"]) :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show, html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not([data-glass-theme="dark"]) .user-dropdown.open { background-color: rgba(255,255,255,0.84) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9)[data-glass-theme="dark"] :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show, html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9)[data-glass-theme="dark"] .user-dropdown.open { background-color: rgba(24,28,40,0.82) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }

/* �95 phones: date / time boxes never grow past the box they sit in. iOS gives a date-time input a width of its own text ("Oct 19, 2026 at 20:20") that a flex or grid parent does not shrink, so it ran past the card edge (Edit Cash Count). */
html.glass-mobile:not(.glass-off) :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; -webkit-appearance: none; appearance: none; }
html.glass-mobile:not(.glass-off) :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"])::-webkit-date-and-time-value { min-width: 0; max-width: 100%; text-align: center; }

/* �96 phones: row menus look frosted without needing the page behind them: a row menu sits inside the frosted list card, where iOS cannot blur what is behind it, and the old fix (switching other blur off) closed the menu. So the frost is painted: a soft light sheen across a 90% tint, a bright top edge and a glass border. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not([data-glass-theme="dark"]) :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.40) 100%), rgba(238,242,250,0.88) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10)[data-glass-theme="dark"] :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.08) 100%), rgba(32,38,56,0.92) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; }

/* �97 dark mode: the row menus are lighter and bluer, close to the page colours, not near-black. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11)[data-glass-theme="dark"] :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.14) 100%), rgba(58,74,108,0.90) !important; border-color: rgba(255,255,255,0.24) !important; }

/* �98 phones: a REAL blur for the row menus. A menu nested in a frosted card can only blur that card, so the text and lines behind stayed sharp. Only the frosted boxes that hold the OPEN menu give up their own blur (switching the whole page's blur off closed the menu and dimmed the header and chat button), which lets the menu blur what is behind it. The menu is see-through again (62%) with an 18px blur. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12) :is(.card, .split-list, .split-detail, .ledger-container, .chart-container, .filter-bar, .stat-card):has(:is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not([data-glass-theme="dark"]) :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%), rgba(238,242,250,0.26) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(18px) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12)[data-glass-theme="dark"] :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), rgba(24,34,58,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(18px) !important; }

/* �99 every screen size: the row / user / select menus get the same clear glass as on phones (a 26-30% tint over a 14px blur with extra colour, a bright edge), and the frosted box holding an OPEN menu gives up its own blur so the menu can blur what is behind it (a blur nested in a blurred box only sees that box, on desktop browsers too). The notification box and header menus follow the same look. */
html:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13):not([data-glass-theme="dark"]) :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%), rgba(238,242,250,0.26) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
html:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13)[data-glass-theme="dark"] :is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), rgba(24,34,58,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
html:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13) :is(.card, .split-list, .split-detail, .ledger-container, .chart-container, .filter-bar, .stat-card):has(:is(.kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown).show) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13):not([data-glass-theme="dark"]) .header-dropdown.active { background-color: rgba(255,255,255,0.60) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }
html:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13)[data-glass-theme="dark"] .header-dropdown.active { background-color: rgba(26,30,42,0.58) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }

/* �100 phones, Social Desk: its pictures leave iOS no room for a blur behind a dialog (the dialog came up with text and cards behind it sharp and readable through the card). While that page is showing, dialogs are DENSE (90%) so they always read clearly, blur or not. */

/* �101 phones: while a dialog is open the page behind it STANDS STILL: no running animation, no promoted layers. A layer that keeps animating behind a blur makes iOS redraw it every frame and it gives up the blur (the Social Desk dialogs). */

/* �102 phones, Social Desk: its Posts list is about 100 tall rows (and the Prices tree is thousands of pixels more). Rows and tree groups that are off screen are skipped until they scroll into view, so a dialog blur has far less to hold (the Student Records fix, now here too). */
html.glass-mobile:not(.glass-off) #view-social-desk .sd-post-row { content-visibility: auto; contain-intrinsic-size: auto 190px; }
html.glass-mobile:not(.glass-off) #view-social-desk .sd-tree-cat { content-visibility: auto; contain-intrinsic-size: auto 400px; }
html.glass-mobile:not(.glass-off) #view-social-desk .sd-promo-card { content-visibility: auto; contain-intrinsic-size: auto 220px; }

/* �103 phones: every dialog that lost its blur was opened over a page that holds a chart (canvas) or a video: Business Report, the Social Desk (2 canvases + 1 video), Compose over a report. A canvas or video is its own graphics layer, and iOS does not blur a page that has one behind the dialog. While a dialog is open those are hidden (they sit behind the dim layer anyway) and they come straight back when it closes. */

/* �105 phones: what the page keeps drawn while a dialog is open. Measured on the Social Desk with a dialog open: about 9,600 elements are being drawn, and only 1,350 of them are the page itself: 3,200 are the CLOSED chat panel (invisible but still laid out) and about 1,100 more are the other 110 dialogs that are not open. The Student Records fix was to give iOS less to hold behind the blur; this does the same for every page: while a dialog is open, the closed chat panel and the closed dialogs are skipped completely. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13):not(#g-none-14):not(#g-none-15):not(#g-none-16):not(#g-none-17).g-modal-open :is(#adminChatPanel, .chat-panel):not(.open):not(.active):not(.show) { content-visibility: hidden !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13):not(#g-none-14):not(#g-none-15):not(#g-none-16):not(#g-none-17).g-modal-open .modal-overlay:not(.active):not(:focus-within) { content-visibility: hidden !important; }

/* �106 phones: closed things are not drawn. Every page carries the whole chat panel (about 3,200 elements) and some 110 dialogs that nobody has opened; they were laid out and kept as graphics on every page (the Social Desk had about 9,600 drawn elements, only 1,350 its own). They are skipped until they are opened: the browser keeps their contents and sizes, and draws them the moment their open class is added. */
html.glass-mobile:not(.glass-off) #adminChatPanel:not(.active):not(.open):not(.show), html.glass-mobile:not(.glass-off) .modal-overlay:not(.active):not(.open):not(.show):not(:focus-within):not([style*="visibility: visible"]):not([style*="visibility:visible"]) { content-visibility: hidden; }

/* �107 phones: a dialog opened over another dialog: only the top one keeps its blur layer (two full-screen blurs stacked hung iOS). The one underneath keeps its tint. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(.glass-off):not(#g-none):not(#g-none-2):not(#g-none-3):not(#g-none-4):not(#g-none-5):not(#g-none-6):not(#g-none-7):not(#g-none-8):not(#g-none-9):not(#g-none-10):not(#g-none-11):not(#g-none-12):not(#g-none-13):not(#g-none-14):not(#g-none-15):not(#g-none-16):not(#g-none-17):not(#g-none-18):not(#g-none-19) .modal-overlay[data-gunder]::after { visibility: hidden !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �108 phones (Safari): while a text box inside a dialog has focus, the keyboard is opening, shown or closing, and the screen keeps changing size. A full-screen blur re-drawn on every one of those frames made Safari lag (Chrome is fine). The blur layer is switched off for exactly that time (the dim tint stays) and comes back as soon as the box loses focus. */


/* �110 SPEED. A full re-layout of Student Records took about 800 ms even on a desktop (a phone is several times slower: this is the lag and the crash when the keyboard slides away and the screen grows back, which also happens on the published site). Two things were 90% of it: the CLOSED notification dropdown (3,100 elements, laid out though nobody sees it) and the 334 student rows. The closed dropdown is skipped on every screen size; on phones the rows that are off screen are skipped (the row of an open menu is drawn in full, see glass-mode.js). Measured: 796 ms -> 96 ms. */
#notif-dropdown-menu:not(.active):not(.open):not(.show) { content-visibility: hidden; }
html.glass-mobile:not(.glass-off) #view-search .result-item { content-visibility: auto; contain-intrinsic-size: auto 96px; }

/* �111 EVERY SCREEN SIZE: the notification box shows the glass. (a) its rows were tinted one by one (about 30% each, 227 of them) and covered the glass: they are now nearly clear, so the blurred page shows between and through them; (b) while the box is open the page's other blur layers are switched off on every size, not only on phones (a blur nested in a blurred header can only see that header, in Safari on a Mac too); the header keeps its own blur on its ::before layer. */
html:not(.glass-off):not(#g-nx):not(#g-nx-2):not(#g-nx-3):not(#g-nx-4):not(#g-nx-5):not(#g-nx-6):not(#g-nx-7):not(#g-nx-8):not(#g-nx-9):not(#g-nx-10):not(#g-nx-11):not(#g-nx-12):not(#g-nx-13):not(#g-nx-14):not(#g-nx-15):not(#g-nx-16):not(#g-nx-17):not(#g-nx-18):not(#g-nx-19):not(#g-nx-20):not(#g-nx-21):not(#g-nx-22):not(#g-nx-23):not(#g-nx-24):not(#g-nx-25):not(#g-nx-26):not([data-glass-theme="dark"]) .header-dropdown.active .notif-item { background-color: rgba(255,255,255,0.30) !important; }
html:not(.glass-off):not(#g-nx):not(#g-nx-2):not(#g-nx-3):not(#g-nx-4):not(#g-nx-5):not(#g-nx-6):not(#g-nx-7):not(#g-nx-8):not(#g-nx-9):not(#g-nx-10):not(#g-nx-11):not(#g-nx-12):not(#g-nx-13):not(#g-nx-14):not(#g-nx-15):not(#g-nx-16):not(#g-nx-17):not(#g-nx-18):not(#g-nx-19):not(#g-nx-20):not(#g-nx-21):not(#g-nx-22):not(#g-nx-23):not(#g-nx-24):not(#g-nx-25):not(#g-nx-26)[data-glass-theme="dark"] .header-dropdown.active .notif-item { background-color: rgba(255,255,255,0.06) !important; }
html:not(.glass-off):not(#g-nx):not(#g-nx-2):not(#g-nx-3):not(#g-nx-4):not(#g-nx-5):not(#g-nx-6):not(#g-nx-7):not(#g-nx-8):not(#g-nx-9):not(#g-nx-10):not(#g-nx-11):not(#g-nx-12):not(#g-nx-13):not(#g-nx-14):not(#g-nx-15):not(#g-nx-16):not(#g-nx-17):not(#g-nx-18):not(#g-nx-19):not(#g-nx-20):not(#g-nx-21):not(#g-nx-22):not(#g-nx-23):not(#g-nx-24):not(#g-nx-25):not(#g-nx-26).g-menu-open :not(:is(.header-dropdown, .kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown)):not(:is(.header-dropdown, .kebab-dropdown, .user-dropdown, .custom-select-options, .shared-dropdown) *) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �112 LIGHT MODE: the notification box is see-through. A 60% white tint plus white rows and white inner panels hid the colours behind it. The box is now a 26% white tint over a saturated 18px blur, its inner panels are clear, and its rows are light glass (18% white with a soft edge), so the colours of the page show through, soft and blurred. */
html:not(.glass-off):not(#g-ny):not(#g-ny-2):not(#g-ny-3):not(#g-ny-4):not(#g-ny-5):not(#g-ny-6):not(#g-ny-7):not(#g-ny-8):not(#g-ny-9):not(#g-ny-10):not(#g-ny-11):not(#g-ny-12):not(#g-ny-13):not(#g-ny-14):not(#g-ny-15):not(#g-ny-16):not(#g-ny-17):not(#g-ny-18):not(#g-ny-19):not(#g-ny-20):not(#g-ny-21):not(#g-ny-22):not(#g-ny-23):not(#g-ny-24):not(#g-ny-25):not(#g-ny-26):not(#g-ny-27):not(#g-ny-28):not([data-glass-theme="dark"]) .header-dropdown.active { background-color: rgba(255,255,255,0.26) !important; -webkit-backdrop-filter: blur(18px) saturate(170%) !important; backdrop-filter: blur(18px) saturate(170%) !important; }
html:not(.glass-off):not(#g-ny):not(#g-ny-2):not(#g-ny-3):not(#g-ny-4):not(#g-ny-5):not(#g-ny-6):not(#g-ny-7):not(#g-ny-8):not(#g-ny-9):not(#g-ny-10):not(#g-ny-11):not(#g-ny-12):not(#g-ny-13):not(#g-ny-14):not(#g-ny-15):not(#g-ny-16):not(#g-ny-17):not(#g-ny-18):not(#g-ny-19):not(#g-ny-20):not(#g-ny-21):not(#g-ny-22):not(#g-ny-23):not(#g-ny-24):not(#g-ny-25):not(#g-ny-26):not(#g-ny-27):not(#g-ny-28):not([data-glass-theme="dark"]) .header-dropdown.active > div, html:not(.glass-off):not(#g-ny):not(#g-ny-2):not(#g-ny-3):not(#g-ny-4):not(#g-ny-5):not(#g-ny-6):not(#g-ny-7):not(#g-ny-8):not(#g-ny-9):not(#g-ny-10):not(#g-ny-11):not(#g-ny-12):not(#g-ny-13):not(#g-ny-14):not(#g-ny-15):not(#g-ny-16):not(#g-ny-17):not(#g-ny-18):not(#g-ny-19):not(#g-ny-20):not(#g-ny-21):not(#g-ny-22):not(#g-ny-23):not(#g-ny-24):not(#g-ny-25):not(#g-ny-26):not(#g-ny-27):not(#g-ny-28):not([data-glass-theme="dark"]) .header-dropdown.active #notif-dropdown-content { background: transparent !important; background-color: transparent !important; }
html:not(.glass-off):not(#g-ny):not(#g-ny-2):not(#g-ny-3):not(#g-ny-4):not(#g-ny-5):not(#g-ny-6):not(#g-ny-7):not(#g-ny-8):not(#g-ny-9):not(#g-ny-10):not(#g-ny-11):not(#g-ny-12):not(#g-ny-13):not(#g-ny-14):not(#g-ny-15):not(#g-ny-16):not(#g-ny-17):not(#g-ny-18):not(#g-ny-19):not(#g-ny-20):not(#g-ny-21):not(#g-ny-22):not(#g-ny-23):not(#g-ny-24):not(#g-ny-25):not(#g-ny-26):not(#g-ny-27):not(#g-ny-28):not([data-glass-theme="dark"]) .header-dropdown.active .notif-item { background-color: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.55) !important; }

/* �113 DARK MODE: while the side navigation is open its yellow panel sits behind the menu button, so the button's three lines must be dark, as in light mode (they stayed white on the yellow). Closed, the button is on the dark header and keeps its light lines. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-nz):not(#g-nz-2):not(#g-nz-3):not(#g-nz-4):not(#g-nz-5):not(#g-nz-6) .menu-toggle:not(.desktop-closed) i, html[data-glass-theme="dark"]:not(.glass-off):not(#g-nz):not(#g-nz-2):not(#g-nz-3):not(#g-nz-4):not(#g-nz-5):not(#g-nz-6) .menu-toggle.mobile-open i, html[data-glass-theme="dark"]:not(.glass-off):not(#g-nz):not(#g-nz-2):not(#g-nz-3):not(#g-nz-4):not(#g-nz-5):not(#g-nz-6) .menu-toggle:not(.desktop-closed), html[data-glass-theme="dark"]:not(.glass-off):not(#g-nz):not(#g-nz-2):not(#g-nz-3):not(#g-nz-4):not(#g-nz-5):not(#g-nz-6) .menu-toggle.mobile-open { color: #1a1608 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-nz):not(#g-nz-2):not(#g-nz-3):not(#g-nz-4):not(#g-nz-5):not(#g-nz-6) .menu-toggle.desktop-closed:not(.mobile-open) i { color: #eceef4 !important; }

/* �114 SHEET LIBRARY: its row menu (#kebabMenu: Assign to student, Edit details...) is the same clear glass as the other menus, on every portal that shows the library (admin, teacher, partner, parents) and every screen size. It was left with the page's plain card colour. */
html:not(.glass-off):not(#g-nk):not(#g-nk-2):not(#g-nk-3):not(#g-nk-4):not(#g-nk-5):not(#g-nk-6):not(#g-nk-7):not(#g-nk-8):not(#g-nk-9):not(#g-nk-10):not(#g-nk-11):not(#g-nk-12):not(#g-nk-13):not(#g-nk-14):not(#g-nk-15):not(#g-nk-16):not(#g-nk-17):not(#g-nk-18):not(#g-nk-19):not(#g-nk-20):not(#g-nk-21):not(#g-nk-22):not(#g-nk-23):not(#g-nk-24):not(#g-nk-25):not(#g-nk-26):not(#g-nk-27):not(#g-nk-28):not(#g-nk-29):not(#g-nk-30):not([data-glass-theme="dark"]) #kebabMenu { background: linear-gradient(150deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.22) 100%), rgba(238,242,250,0.34) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
html:not(.glass-off):not(#g-nk):not(#g-nk-2):not(#g-nk-3):not(#g-nk-4):not(#g-nk-5):not(#g-nk-6):not(#g-nk-7):not(#g-nk-8):not(#g-nk-9):not(#g-nk-10):not(#g-nk-11):not(#g-nk-12):not(#g-nk-13):not(#g-nk-14):not(#g-nk-15):not(#g-nk-16):not(#g-nk-17):not(#g-nk-18):not(#g-nk-19):not(#g-nk-20):not(#g-nk-21):not(#g-nk-22):not(#g-nk-23):not(#g-nk-24):not(#g-nk-25):not(#g-nk-26):not(#g-nk-27):not(#g-nk-28):not(#g-nk-29):not(#g-nk-30)[data-glass-theme="dark"] #kebabMenu { background: linear-gradient(150deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%), rgba(24,34,58,0.34) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
html:not(.glass-off):not(#g-nk):not(#g-nk-2):not(#g-nk-3):not(#g-nk-4):not(#g-nk-5):not(#g-nk-6):not(#g-nk-7):not(#g-nk-8):not(#g-nk-9):not(#g-nk-10):not(#g-nk-11):not(#g-nk-12):not(#g-nk-13):not(#g-nk-14):not(#g-nk-15):not(#g-nk-16):not(#g-nk-17):not(#g-nk-18):not(#g-nk-19):not(#g-nk-20):not(#g-nk-21):not(#g-nk-22):not(#g-nk-23):not(#g-nk-24):not(#g-nk-25):not(#g-nk-26):not(#g-nk-27):not(#g-nk-28):not(#g-nk-29):not(#g-nk-30) #kebabMenu button { background: transparent !important; }
html:not(.glass-off):not(#g-nk):not(#g-nk-2):not(#g-nk-3):not(#g-nk-4):not(#g-nk-5):not(#g-nk-6):not(#g-nk-7):not(#g-nk-8):not(#g-nk-9):not(#g-nk-10):not(#g-nk-11):not(#g-nk-12):not(#g-nk-13):not(#g-nk-14):not(#g-nk-15):not(#g-nk-16):not(#g-nk-17):not(#g-nk-18):not(#g-nk-19):not(#g-nk-20):not(#g-nk-21):not(#g-nk-22):not(#g-nk-23):not(#g-nk-24):not(#g-nk-25):not(#g-nk-26):not(#g-nk-27):not(#g-nk-28):not(#g-nk-29):not(#g-nk-30) #kebabMenu button:hover { background: rgba(255,255,255,0.14) !important; }

/* �115 EMBEDDED PAGES BLEND INTO THEIR PORTAL (teacher, partner, parents; phones): transparent page and no glow layer of their own, so the portal's background runs unbroken behind the page and there is no sharp edge where the frame ends. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nb):not(#g-nb-2):not(#g-nb-3):not(#g-nb-4):not(#g-nb-5):not(#g-nb-6):not(#g-nb-7):not(#g-nb-8):not(#g-nb-9):not(#g-nb-10):not(#g-nb-11):not(#g-nb-12):not(#g-nb-13):not(#g-nb-14):not(#g-nb-15):not(#g-nb-16):not(#g-nb-17):not(#g-nb-18):not(#g-nb-19):not(#g-nb-20):not(#g-nb-21):not(#g-nb-22):not(#g-nb-23):not(#g-nb-24):not(#g-nb-25):not(#g-nb-26):not(#g-nb-27):not(#g-nb-28):not(#g-nb-29):not(#g-nb-30):not(#g-nb-31):not(#g-nb-32), html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nb):not(#g-nb-2):not(#g-nb-3):not(#g-nb-4):not(#g-nb-5):not(#g-nb-6):not(#g-nb-7):not(#g-nb-8):not(#g-nb-9):not(#g-nb-10):not(#g-nb-11):not(#g-nb-12):not(#g-nb-13):not(#g-nb-14):not(#g-nb-15):not(#g-nb-16):not(#g-nb-17):not(#g-nb-18):not(#g-nb-19):not(#g-nb-20):not(#g-nb-21):not(#g-nb-22):not(#g-nb-23):not(#g-nb-24):not(#g-nb-25):not(#g-nb-26):not(#g-nb-27):not(#g-nb-28):not(#g-nb-29):not(#g-nb-30):not(#g-nb-31):not(#g-nb-32)[data-glass-theme="dark"] { background: transparent !important; background-color: transparent !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nb):not(#g-nb-2):not(#g-nb-3):not(#g-nb-4):not(#g-nb-5):not(#g-nb-6):not(#g-nb-7):not(#g-nb-8):not(#g-nb-9):not(#g-nb-10):not(#g-nb-11):not(#g-nb-12):not(#g-nb-13):not(#g-nb-14):not(#g-nb-15):not(#g-nb-16):not(#g-nb-17):not(#g-nb-18):not(#g-nb-19):not(#g-nb-20):not(#g-nb-21):not(#g-nb-22):not(#g-nb-23):not(#g-nb-24):not(#g-nb-25):not(#g-nb-26):not(#g-nb-27):not(#g-nb-28):not(#g-nb-29):not(#g-nb-30):not(#g-nb-31):not(#g-nb-32) body { background: transparent !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nb):not(#g-nb-2):not(#g-nb-3):not(#g-nb-4):not(#g-nb-5):not(#g-nb-6):not(#g-nb-7):not(#g-nb-8):not(#g-nb-9):not(#g-nb-10):not(#g-nb-11):not(#g-nb-12):not(#g-nb-13):not(#g-nb-14):not(#g-nb-15):not(#g-nb-16):not(#g-nb-17):not(#g-nb-18):not(#g-nb-19):not(#g-nb-20):not(#g-nb-21):not(#g-nb-22):not(#g-nb-23):not(#g-nb-24):not(#g-nb-25):not(#g-nb-26):not(#g-nb-27):not(#g-nb-28):not(#g-nb-29):not(#g-nb-30):not(#g-nb-31):not(#g-nb-32) body::before { display: none !important; }

/* �116 PARENTS PORTAL, PHONES: the bottom navigation and the floating buttons lagged behind while scrolling (they were left half-way up the screen). Two causes, both fixed: (a) the fixed bars were drawn on the page's own layer, so a busy page left them behind; they are now on their own graphics layer, positioned by the compositor; (b) the dashboard draws every session card at once (40+), which keeps the page busy: cards that are off screen are skipped until scrolled to. */
html.glass-mobile:not(.glass-off) :is(.chat-fab, #mpcBugBtn, .glass-mode-fab.is-floating, .mpc-compose-fab, #mpc-compose-fab) { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
html.glass-mobile[data-glass-portal="parents"]:not(.glass-off) .lesson-item { content-visibility: auto; contain-intrinsic-size: auto 300px; }

/* �117 PARENTS PORTAL, AWARDS: the award box around each certificate was solid white (the page set background:#fff with !important). It is clear glass now: a light tint over a blur, so the portal's colours show through. The certificate paper inside stays white. */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-na):not(#g-na-2):not(#g-na-3):not(#g-na-4):not(#g-na-5):not(#g-na-6):not([data-glass-theme="dark"]) .award-card { background: linear-gradient(150deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 60%, rgba(255,255,255,0.30) 100%), rgba(255,255,255,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 12px 30px rgba(24,28,50,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-na):not(#g-na-2):not(#g-na-3):not(#g-na-4):not(#g-na-5):not(#g-na-6)[data-glass-theme="dark"] .award-card { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.05) 100%), rgba(30,36,52,0.34) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-na):not(#g-na-2):not(#g-na-3):not(#g-na-4):not(#g-na-5):not(#g-na-6) .award-card:hover { border-color: var(--brand) !important; }

/* �118 PHONES: the bottom navigation is fixed flush to the bottom edge, full width (it floated 12px above the bottom with side gaps). The safe area under it is part of the bar. */
@media (max-width: 768px) {
  html[data-glass-portal="parents"]:not(.glass-off) .bottom-nav { bottom: 0 !important; left: 0 !important; width: 100% !important; transform: none !important; border-radius: 22px 22px 0 0 !important; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -10px 30px rgba(24,28,50,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important; border-bottom: 0 !important; }
}

/* �119 DARK MODE, CERTIFICATES: the certificate is PAPER. It stays white with dark ink and its own logo, whatever the theme (in dark mode the thumbnail went dark and translucent, with a white box behind the logo). */
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off):not(#g-nc):not(#g-nc-2):not(#g-nc-3):not(#g-nc-4) .cert-portrait { background: #fff !important; background-color: #fff !important; color: #111 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off):not(#g-nc):not(#g-nc-2):not(#g-nc-3):not(#g-nc-4) .cert-portrait img { background: transparent !important; }

/* �120 A frosted box that holds an OPEN menu gives up its own blur (a blur nested inside a blur can only see its parent). The boxes are found when the menu opens (glass-mode.js sets data-gflat on them), so it works in every list: My Timesheet, Memos, the team list, not only the classes named in the older rule. */
html:not(.glass-off) [data-gflat] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §121 The App Walkthrough card (#wt-popover, parents + teacher) is a dialog: frosted like the other dialogs, not the see-through card colour (the page showed through its text). */
html:not(.glass-off) #wt-popover {
  border-top: 0;
  background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, linear-gradient(160deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.34) 38%, rgba(255,255,255,0.46) 100%) !important;
  -webkit-backdrop-filter: blur(38px) saturate(140%); backdrop-filter: blur(38px) saturate(140%);
  border: 1px solid var(--glass-edge); border-radius: 24px;
  box-shadow: var(--glass-shadow-lg);
}
html[data-glass-theme="dark"]:not(.glass-off) #wt-popover { background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, rgba(26,30,42,0.66) !important; }

/* §122 App Walkthrough demo scenes (Sheet Music + Virtual Classroom previews in the parents' and teachers' tours): the demo ships its own white card / dark-ink styles, which beat the theme, so in dark mode the card stayed white with unreadable text. Frosted card, theme text colours, both modes. */
html:not(.glass-off) #wt-cr-sheets, html:not(.glass-off) #wt-cr-hub { color: var(--text-dark); }
html:not(.glass-off) #wt-cr-sheets h2, html:not(.glass-off) #wt-cr-hub h2,
html:not(.glass-off) #wt-cr-sheets h3, html:not(.glass-off) #wt-cr-hub h3,
html:not(.glass-off) #wt-cr-sheets .wt-row strong, html:not(.glass-off) #wt-cr-hub .wt-row strong { color: var(--text-dark); }
html:not(.glass-off) #wt-cr-sheets .wt-row small, html:not(.glass-off) #wt-cr-hub .wt-row small { color: var(--text-muted); }
html:not(.glass-off) #wt-cr-sheets .wt-demo-card, html:not(.glass-off) #wt-cr-hub .wt-demo-card {
  background: var(--g-surface); border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--glass-shadow-lg);
}
html:not(.glass-off) #wt-cr-sheets .wt-row, html:not(.glass-off) #wt-cr-hub .wt-row {
  background: var(--gw86); border-top-color: var(--glass-edge); border-right-color: var(--glass-edge); border-bottom-color: var(--glass-edge);
}
html:not(.glass-off) #wt-cr-sheets .wt-btn.ghost, html:not(.glass-off) #wt-cr-hub .wt-btn.ghost { background: var(--gw86); color: var(--text-dark); border-color: var(--glass-edge); }
html:not(.glass-off) #wt-cr-sheets input { background: var(--gw86); color: var(--text-dark); border-color: var(--glass-edge); }
html[data-glass-theme="dark"]:not(.glass-off) #wt-cr-sheets > span, html[data-glass-theme="dark"]:not(.glass-off) #wt-cr-hub > span { background: rgba(255,193,0,0.16) !important; color: #ffc100 !important; border-color: rgba(255,193,0,0.45) !important; }

/* §123 One tint for the floating surfaces (owner 10-20: "the others are still not the same opacity"). Dialogs and the walkthrough card are 66% (dark 26,30,42); the bottom bar and the walkthrough demo cards now use the same tint. Page cards and the top header stay lighter (36% / 30%) on purpose: they sit on the page, dialogs float above it. */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-t1):not(#g-t2) .bottom-nav { background: rgba(255,255,255,0.66) !important; }
html[data-glass-theme="dark"][data-glass-portal="parents"]:not(.glass-off):not(#g-t1):not(#g-t2) .bottom-nav { background: rgba(26,30,42,0.66) !important; }
html:not(.glass-off) #wt-cr-sheets .wt-demo-card, html:not(.glass-off) #wt-cr-hub .wt-demo-card { background: rgba(255,255,255,0.5); }
html[data-glass-theme="dark"]:not(.glass-off) #wt-cr-sheets .wt-demo-card, html[data-glass-theme="dark"]:not(.glass-off) #wt-cr-hub .wt-demo-card { background: rgba(26,30,42,0.66); }
html:not(.glass-off) #wt-cr-sheets .wt-row, html:not(.glass-off) #wt-cr-hub .wt-row { background: rgba(255,255,255,0.45); }
html[data-glass-theme="dark"]:not(.glass-off) #wt-cr-sheets .wt-row, html[data-glass-theme="dark"]:not(.glass-off) #wt-cr-hub .wt-row { background: rgba(255,255,255,0.06); }

/* §124 ADMIN PORTAL, EMBEDDED PAGES (Sheet Library, Expenses, Bug Center, Classroom Monitor...): the box the portal draws around the frame (.iframe-container) was a tinted frosted panel (white in light, dark glass in dark), so the page sat inside a second box that native pages such as Student Records do not have. It is clear now: the page's own cards sit straight on the portal background, like a native page. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-if1):not(#g-if2):not(#g-if3):not(#g-if4) .iframe-container { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0; }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-if1):not(#g-if2):not(#g-if3):not(#g-if4) .iframe-loader { background: transparent !important; }

/* �125 EMBEDDED PAGES BLEND INTO THE PORTAL AT EVERY SCREEN SIZE (owner 10-20: check all portals): �115 only did phones, so on tablets and desktops the embedded Sheet Library / Classroom page still drew its own background and glow inside the portal. Same rule, no size limit. */
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nd):not(#g-nd-2):not(#g-nd-3):not(#g-nd-4):not(#g-nd-5):not(#g-nd-6):not(#g-nd-7):not(#g-nd-8):not(#g-nd-9):not(#g-nd-10):not(#g-nd-11):not(#g-nd-12):not(#g-nd-13):not(#g-nd-14):not(#g-nd-15):not(#g-nd-16):not(#g-nd-17):not(#g-nd-18):not(#g-nd-19):not(#g-nd-20):not(#g-nd-21):not(#g-nd-22):not(#g-nd-23):not(#g-nd-24):not(#g-nd-25):not(#g-nd-26):not(#g-nd-27):not(#g-nd-28):not(#g-nd-29):not(#g-nd-30):not(#g-nd-31):not(#g-nd-32), html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nd):not(#g-nd-2):not(#g-nd-3):not(#g-nd-4):not(#g-nd-5):not(#g-nd-6):not(#g-nd-7):not(#g-nd-8):not(#g-nd-9):not(#g-nd-10):not(#g-nd-11):not(#g-nd-12):not(#g-nd-13):not(#g-nd-14):not(#g-nd-15):not(#g-nd-16):not(#g-nd-17):not(#g-nd-18):not(#g-nd-19):not(#g-nd-20):not(#g-nd-21):not(#g-nd-22):not(#g-nd-23):not(#g-nd-24):not(#g-nd-25):not(#g-nd-26):not(#g-nd-27):not(#g-nd-28):not(#g-nd-29):not(#g-nd-30):not(#g-nd-31):not(#g-nd-32)[data-glass-theme="dark"] { background: transparent !important; background-color: transparent !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nd):not(#g-nd-2):not(#g-nd-3):not(#g-nd-4):not(#g-nd-5):not(#g-nd-6):not(#g-nd-7):not(#g-nd-8):not(#g-nd-9):not(#g-nd-10):not(#g-nd-11):not(#g-nd-12):not(#g-nd-13):not(#g-nd-14):not(#g-nd-15):not(#g-nd-16):not(#g-nd-17):not(#g-nd-18):not(#g-nd-19):not(#g-nd-20):not(#g-nd-21):not(#g-nd-22):not(#g-nd-23):not(#g-nd-24):not(#g-nd-25):not(#g-nd-26):not(#g-nd-27):not(#g-nd-28):not(#g-nd-29):not(#g-nd-30):not(#g-nd-31):not(#g-nd-32) body { background: transparent !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-nd):not(#g-nd-2):not(#g-nd-3):not(#g-nd-4):not(#g-nd-5):not(#g-nd-6):not(#g-nd-7):not(#g-nd-8):not(#g-nd-9):not(#g-nd-10):not(#g-nd-11):not(#g-nd-12):not(#g-nd-13):not(#g-nd-14):not(#g-nd-15):not(#g-nd-16):not(#g-nd-17):not(#g-nd-18):not(#g-nd-19):not(#g-nd-20):not(#g-nd-21):not(#g-nd-22):not(#g-nd-23):not(#g-nd-24):not(#g-nd-25):not(#g-nd-26):not(#g-nd-27):not(#g-nd-28):not(#g-nd-29):not(#g-nd-30):not(#g-nd-31):not(#g-nd-32) body::before { display: none !important; }

/* �126 EMBEDDED PAGES FILL THE SCREEN AND USE THE PORTAL BACKGROUND (owner 10-20). Admin: the frame goes edge to edge over the content area's padding (glass-mode.js measures the padding and the top offset). Any embedded page: the page's own main panel colour (the invoice app's --zoho-bg grey) is clear, so the portal background shows. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-fl1):not(#g-fl2):not(#g-fl3):not(#g-fl4):not(#g-fl5):not(#g-fl6) .view-section:not(#view-event-planner-app) .iframe-container { margin: calc(-1 * var(--g-cwp, 0px)); width: calc(100% + 2 * var(--g-cwp, 0px)); height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px)) !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-fl1):not(#g-fl2):not(#g-fl3):not(#g-fl4):not(#g-fl5):not(#g-fl6) { --zoho-bg: transparent !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-fl1):not(#g-fl2):not(#g-fl3):not(#g-fl4):not(#g-fl5):not(#g-fl6) :is(#create-panel.active, .preview-side) { background: transparent !important; }

/* �127 INVOICES & SOA: the branch picker and its list are frosted glass, not a solid white / dark box (the page paints them with inline white). */
html:not(.glass-off):not(#g-bs1):not(#g-bs2):not(#g-bs3):not(#g-bs4) #customBranchSelector { background: var(--g-surface) !important; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--glass-edge) !important; color: #181c32 !important; box-shadow: var(--glass-shadow-lg); }
html:not(.glass-off):not(#g-bs1):not(#g-bs2):not(#g-bs3):not(#g-bs4) #customBranchMenu { background: rgba(255,255,255,0.66) !important; -webkit-backdrop-filter: blur(38px) saturate(140%); backdrop-filter: blur(38px) saturate(140%); border: 1px solid var(--glass-edge) !important; }
html:not(.glass-off):not(#g-bs1):not(#g-bs2):not(#g-bs3):not(#g-bs4) #customBranchMenu > div { color: #181c32 !important; border-color: var(--glass-edge) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-bs1):not(#g-bs2):not(#g-bs3):not(#g-bs4) #customBranchSelector { color: #f1f4fa !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-bs1):not(#g-bs2):not(#g-bs3):not(#g-bs4) #customBranchMenu { background: rgba(26,30,42,0.66) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-bs1):not(#g-bs2):not(#g-bs3):not(#g-bs4) #customBranchMenu > div { color: #f1f4fa !important; }

/* �128 INVOICES & SOA, PHONES / TABLETS: the Invoices / Customers / Receivables list panel was a square slab running to the screen edge. Rounded like the other glass boxes, with a small inset so the corners show. */
@media (max-width: 1024px) {
  html:not(.glass-off):not(#g-ls1):not(#g-ls2):not(#g-ls3):not(#g-ls4) :is(#list-panel, #customers-panel, #arr-panel) .list-sidebar { border-radius: 24px !important; border: 1px solid var(--glass-edge) !important; overflow: hidden; width: calc(100% - 20px) !important; left: 10px !important; height: calc(100% - 10px) !important; }
  html:not(.glass-off) :is(#list-panel, #customers-panel, #arr-panel).show-preview .list-sidebar { transform: translateX(calc(-100% - 12px)) !important; }
}

/* �129 INVOICES & SOA, PHONES / TABLETS: the Items Catalog panel is rounded and inset like the list panels (it was a square slab running to the screen edge). */
@media (max-width: 1024px) {
  html:not(.glass-off):not(#g-it1):not(#g-it2):not(#g-it3):not(#g-it4) #items-panel.active { border-radius: 24px !important; border: 1px solid var(--glass-edge) !important; margin: 0 10px 10px 10px; }
}

/* �130 ACCOUNTING + EXPENSES, PHONES: the five tabs (Dash, Ledger, Recurring, A/R, A/P) wrapped onto two lines. One line now: the tabs share the width equally, smaller text, no icons. (Only the tab bars whose buttons are #nav-*, so the Invoices tab menu is untouched.) */
@media (max-width: 600px) {
  html:not(.glass-off):not(#g-tn1):not(#g-tn2):not(#g-tn3):not(#g-tn4) .tab-nav:has(> .tab-btn[id^="nav-"]) { flex-wrap: nowrap !important; overflow: hidden !important; gap: 2px !important; }
  html:not(.glass-off):not(#g-tn1):not(#g-tn2):not(#g-tn3):not(#g-tn4) .tab-nav > .tab-btn[id^="nav-"] { flex: 1 1 0 !important; min-width: 0 !important; padding: 9px 2px !important; font-size: 0.74rem !important; gap: 0 !important; justify-content: center; white-space: nowrap; }
  html:not(.glass-off):not(#g-tn1):not(#g-tn2):not(#g-tn3):not(#g-tn4) .tab-nav > .tab-btn[id^="nav-"] i { display: none !important; }
}

/* �131 ACCOUNTING + EXPENSES TABS = SHEET LIBRARY TABS (owner 10-20): same tinted box, edge and blur as .ptabs, inactive tabs clear, active tab the same gold with the same glow. */
html:not(.glass-off):not(#g-tm1):not(#g-tm2):not(#g-tm3):not(#g-tm4) .tab-nav:has(> .tab-btn[id^="nav-"]) { background: var(--gw55) !important; border: 1px solid var(--glass-edge) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 14px; padding: 4px; box-shadow: none; }
html:not(.glass-off):not(#g-tm1):not(#g-tm2):not(#g-tm3):not(#g-tm4) .tab-nav > .tab-btn[id^="nav-"]:not(.active) { background: transparent !important; box-shadow: none !important; }
html:not(.glass-off):not(#g-tm1):not(#g-tm2):not(#g-tm3):not(#g-tm4) .tab-nav > .tab-btn[id^="nav-"].active { background: var(--brand) !important; color: #14172b !important; box-shadow: 0 4px 12px rgba(255,193,0,0.4) !important; border-radius: 10px; }

/* �132 FORM CREATOR TABLE: the table's dark header row ran square past the rounded corners of its card. The table box has rounded corners (20px, the card's radius less its 8px padding) (it already scrolls sideways, which clips to the radius). */
html:not(.glass-off):not(#g-ef1):not(#g-ef2) #ef-table { border-radius: 20px; }

/* �133 EVENT PLANNER, PHONES + TABLETS (owner 10-20: round the edges, refine the shapes, all pages): the header, the tab strip (tablet) and the bottom bar (phone) were square slabs running edge to edge. They are rounded glass bars now, inset from the screen edge like the parents' bottom bar. */
@media (max-width: 1099px) {
  html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-head { margin: 8px 10px 0; border: 1px solid var(--glass-edge) !important; border-radius: 22px; box-shadow: var(--glass-shadow-lg); }
  html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-rail { margin: 8px 10px 0; border: 1px solid var(--glass-edge) !important; border-radius: 22px; }
  html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-picker select, html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-main :is(select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], textarea) { border-radius: 14px; }
  html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-main :is(.ep-btn, button.ep-btn) { border-radius: 14px; }
}
@media (max-width: 699px) {
  html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-rail { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0; border-radius: 24px; padding: 6px; box-shadow: var(--glass-shadow-lg); }
  html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4) .ep-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* �134 EVENT PLANNER (admin): fills the screen like the other embedded pages (�126 left it out because its frame height allows for the text-size zoom; this does the same sum with --mpc-ui-zoom), and its page, grid and content area are clear so the portal background shows. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-fp1):not(#g-fp2):not(#g-fp3):not(#g-fp4):not(#g-fp5):not(#g-fp6) #view-event-planner-app .iframe-container { margin: calc(-1 * var(--g-cwp, 0px)); width: calc(100% + 2 * var(--g-cwp, 0px)); height: calc(100dvh / var(--mpc-ui-zoom, 1) - var(--g-cwtop, 0px)) !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(#g-fp1):not(#g-fp2):not(#g-fp3):not(#g-fp4):not(#g-fp5):not(#g-fp6) :is(.ep-app, .ep-main, .ep-pane, .ep-banners) { background: transparent !important; }

/* �135 MEMOS "New" BUTTON: glass yellow (owner 10-20): a see-through amber over a blur, a gold edge and a soft glow, instead of the plain grey glass button. */
html:not(.glass-off):not(#g-nw1):not(#g-nw2):not(#g-nw3):not(#g-nw4) #view-memos button[onclick="openMemoComposer()"] { background: linear-gradient(160deg, rgba(255,213,74,0.78) 0%, rgba(255,193,0,0.46) 100%) !important; border: 1px solid rgba(255,206,60,0.85) !important; color: #3a2900 !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 6px 16px rgba(255,193,0,0.32), inset 0 1px 0 rgba(255,255,255,0.55) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-nw1):not(#g-nw2):not(#g-nw3):not(#g-nw4) #view-memos button[onclick="openMemoComposer()"] { background: linear-gradient(160deg, rgba(255,213,74,0.34) 0%, rgba(255,193,0,0.16) 100%) !important; border-color: rgba(255,206,60,0.7) !important; color: #ffe08a !important; box-shadow: 0 6px 18px rgba(255,193,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important; }

/* �136 TEACHER + PARENTS PORTALS: the embedded Sheet Library / Classroom page runs edge to edge across the screen instead of sitting inside the page's side padding (glass-mode.js measures the padding into --g-cwp). Their background is already clear (the portal background shows through). */
html[data-glass-portal="teacher"]:not(.glass-off):not(#g-fr1):not(#g-fr2):not(#g-fr3):not(#g-fr4) :is(#sheets-internal-frame, #classroom-internal-frame) { margin: calc(-1 * var(--g-cwp, 0px)) calc(-1 * var(--g-cwp, 0px)) 0 !important; width: calc(100% + 2 * var(--g-cwp, 0px)) !important; border-radius: 0 !important; background: transparent !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-fr1):not(#g-fr2):not(#g-fr3):not(#g-fr4) :is(#sheets-frame, #classroom-frame) { margin-left: calc(-1 * var(--g-cwp, 0px)) !important; margin-right: calc(-1 * var(--g-cwp, 0px)) !important; width: calc(100% + 2 * var(--g-cwp, 0px)) !important; background: transparent !important; }

/* �137 The page's own "img, iframe { max-width: 100% }" held the Sheet Library and Classroom frames to the padded width, so �136's wider frame stopped 32px short of the right edge (parents portal; the teacher frames have the same cap). Lifted for those four frames. */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-mw1):not(#g-mw2):not(#g-mw3):not(#g-mw4) :is(#sheets-frame, #classroom-frame), html[data-glass-portal="teacher"]:not(.glass-off):not(#g-mw1):not(#g-mw2):not(#g-mw3):not(#g-mw4) :is(#sheets-internal-frame, #classroom-internal-frame) { max-width: none !important; }

/* �138 TEACHER PORTAL: the embedded Sheet Library / Classroom frame reaches the bottom of the screen (it stopped about 40px short, with the portal's empty bottom padding below it): its minimum height is the rest of the screen under the header, and the page's bottom padding is taken back. The page inside still makes the frame taller when it has more to show. */
html[data-glass-portal="teacher"]:not(.glass-off):not(#g-hb1):not(#g-hb2):not(#g-hb3):not(#g-hb4) :is(#sheets-internal-frame, #classroom-internal-frame) { min-height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px)) !important; margin-bottom: calc(-1 * var(--g-cwpb, 0px)) !important; }
/* TEACHER SHEET LIBRARY (owner 2026-10-22): the frame ends exactly where the left nav bar ends, 14px above the screen edge, so the page does not scroll and its box lines up with the bar; the min-height above only ever made it LONGER than the screen. Same height rule as the admin Sheet Library. */
html[data-glass-portal="teacher"]:not(.glass-off):not(#g-hb1):not(#g-hb2):not(#g-hb3):not(#g-hb4):not(#g-hs1):not(#g-hs2):not(#g-hs3) #sheets-internal-frame { height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - 14px) !important; min-height: 0 !important; }   /* 18px = the content wrapper's top padding (the theme's own value; --g-cwp is its LEFT padding, which is 0 there) */

/* �139 THE APP'S DROPDOWN LISTS (.custom-select-options: branch, sort, category, frequency in Accounting, Expenses, Invoices): the same frost as the dialogs (66%, 38px blur) instead of an almost solid 88% white; glass-mode.js lets them see the page behind by switching off the blur of the boxes around them while one is open. */
html:not(.glass-off):not(#g-cs1):not(#g-cs2):not(#g-cs3):not(#g-cs4):not(#g-cs5) .custom-select-options { background: rgba(255,255,255,0.66) !important; -webkit-backdrop-filter: blur(38px) saturate(140%) !important; backdrop-filter: blur(38px) saturate(140%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-cs1):not(#g-cs2):not(#g-cs3):not(#g-cs4):not(#g-cs5) .custom-select-options { background: rgba(26,30,42,0.66) !important; }
html:not(.glass-off):not(#g-cs1):not(#g-cs2):not(#g-cs3):not(#g-cs4):not(#g-cs5) .custom-select-option { color: #181c32; border-bottom-color: var(--glass-edge); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-cs1):not(#g-cs2):not(#g-cs3):not(#g-cs4):not(#g-cs5) .custom-select-option { color: #f1f4fa; }

/* �140 INCENTIVES & CLAIMS, PHONES / TABLETS: the claims box stopped well above the bottom of the screen (it was as tall as its first few cards). It is as tall as the screen under the header now (less the page's side padding), and the cards scroll inside it. */
@media (max-width: 992px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ic1):not(#g-ic2):not(#g-ic3):not(#g-ic4) #view-incentives .split-list { max-height: none !important; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 2 * var(--g-cwp, 0px)) !important; }
}

/* �141 CALENDARS (Master Calendar, the teacher calendars): the sticky header row (names) and the sticky time column were an almost solid white / dark tint (94-96%). Frosted now: a 55% tint over a blur, so the slots scrolling under them show softly through. */
html:not(.glass-off):not(#g-cl1):not(#g-cl2):not(#g-cl3):not(#g-cl4):not(#g-cl5) :is(.cal-header-cell, .cal-time-col) { background: rgba(255,255,255,0.55) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-cl1):not(#g-cl2):not(#g-cl3):not(#g-cl4):not(#g-cl5) :is(.cal-header-cell, .cal-time-col) { background: rgba(26,30,42,0.55) !important; }

/* �142 INCENTIVES & CLAIMS: the cards list inside the box was still limited to 58% of the screen height by the general phone rule for split lists, so it ended before the (taller) box did. It takes the whole box now and scrolls inside it. */
@media (max-width: 992px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ib1):not(#g-ib2):not(#g-ib3):not(#g-ib4) #view-incentives .split-list > .split-list-content { max-height: none !important; flex: 1 1 auto; min-height: 0; }
}

/* �143 MASTER CALENDAR: the two search arrows (previous / next match) were thin pills, far shorter than the search box and the refresh button beside them. Same height as those (the refresh button's 35px), with a real tap width. */
html:not(.glass-off):not(#g-ar1):not(#g-ar2):not(#g-ar3):not(#g-ar4) button[onclick^="calSearchNav"] { height: 35px !important; min-width: 40px; padding: 0 10px !important; align-self: center; display: inline-flex; align-items: center; justify-content: center; }

/* �144 SHEET LIBRARY: the Library / Assigned tabs and the search + filter + Add sheet row are pinned at the top while the list scrolls (sheets.html publishes the tabs' height as --pin-tabs-h). Works where the page scrolls inside its own frame (the admin portal); in the teacher and parents portals the frame grows with the page, so the page itself scrolls and there is nothing to pin to. */
html:not(.glass-off):not(#g-pn1):not(#g-pn2):not(#g-pn3):not(#g-pn4) #parentTabs { position: sticky; top: 6px; z-index: 40; }
html:not(.glass-off):not(#g-pn1):not(#g-pn2):not(#g-pn3):not(#g-pn4) #browseCard .filters { position: sticky; top: calc(var(--pin-tabs-h, 56px) + 8px); z-index: 39; padding: 10px; margin: -4px -4px 6px; border-radius: 18px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: 0 8px 22px rgba(24,28,50,0.10); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-pn1):not(#g-pn2):not(#g-pn3):not(#g-pn4) #browseCard .filters { background: rgba(26,30,42,0.62); }

/* �145 CLASSROOM MONITOR: the status line and the Live now / Sessions history tabs are pinned at the top while the list scrolls (they sit in one box, .pin-top, frosted so the cards sliding under it show softly through). */
html:not(.glass-off):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4) .pin-top { position: sticky; top: 0; z-index: 40; padding: 8px 6px 2px; margin: 0 -6px 12px; border-radius: 0 0 18px 18px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4) .pin-top { background: rgba(26,30,42,0.62); }
html:not(.glass-off):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4) .pin-top > .tabs { margin-bottom: 8px; }

/* �146 SHEET LIBRARY, PINNED BAR: the pinned search/filter bar sits inside the frosted browse card, and on iOS a blur nested in a blur only sees its parent's own background, so the sheets scrolling under the bar showed through sharp. The card keeps its tint but gives up its own blur; the bar's blur then sees the sheets (and the page). Same trick as the menus (data-gflat). */
html:not(.glass-off):not(#g-bk1):not(#g-bk2):not(#g-bk3):not(#g-bk4):not(#g-bk5) #browseCard { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �147 CLASSROOM MONITOR: the two tabs share the whole width of the pinned box (they were two short buttons on the left). */
html:not(.glass-off):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4) .pin-top > .tabs { display: flex; gap: 8px; }
html:not(.glass-off):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4) .pin-top > .tabs > .tab { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; }

/* �148 ENROLLMENT FORMS (Form Creator / Responses tabs): pinned under the page header while the page scrolls, frosted, and the two tabs share the whole width. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-ef1):not(#g-ef2):not(#g-ef3):not(#g-ef4) :is(#view-enrollment-forms, #view-enrollments) > .ds-subtabs { position: sticky; top: calc(var(--g-cwtop, 70px) + 6px); z-index: 900; display: flex; gap: 8px; width: 100%; padding: 6px; border-radius: 20px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: 0 8px 22px rgba(24,28,50,0.10); box-sizing: border-box; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-ef1):not(#g-ef2):not(#g-ef3):not(#g-ef4) :is(#view-enrollment-forms, #view-enrollments) > .ds-subtabs { background: rgba(26,30,42,0.62); }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-ef1):not(#g-ef2):not(#g-ef3):not(#g-ef4) :is(#view-enrollment-forms, #view-enrollments) > .ds-subtabs > .ds-tab { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }

/* �149 MARKETING & ADS: the Ad Campaigns / Invoices tab card is pinned under the page header while the page scrolls (its own frosted card, so the campaigns sliding under it blur). */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-mk1):not(#g-mk2):not(#g-mk3):not(#g-mk4) #mkt-top { position: sticky; top: calc(var(--g-cwtop, 70px) + 6px); z-index: 900; }

/* �150 BUG CENTER: the status chips + kebab + Reload line is pinned at the top while the tickets scroll, as a frosted bar. (The page scrolls inside its frame in the admin portal, which is what it pins to.) */
html:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4) .chips-row { position: sticky; top: 6px; z-index: 50; padding: 8px; margin: -4px -4px 12px; border-radius: 20px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: 0 8px 22px rgba(24,28,50,0.10); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4) .chips-row { background: rgba(26,30,42,0.62); }

/* �151 EVERY ADMIN PAGE TAB ROW (.ds-subtabs: Business Report, Daily Sessions, Earnings, Archived, Mailbox groups...): pinned under the page header while the page scrolls, frosted, and the tabs share the whole width. (�148 did this for Enrollment Forms only.) */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-ds1):not(#g-ds2):not(#g-ds3):not(#g-ds4) .content-wrapper .ds-subtabs { position: sticky; top: calc(var(--g-cwtop, 70px) + 6px); z-index: 900; width: 100%; padding: 6px; border-radius: 20px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: 0 8px 22px rgba(24,28,50,0.10); box-sizing: border-box; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-ds1):not(#g-ds2):not(#g-ds3):not(#g-ds4) .content-wrapper .ds-subtabs { background: rgba(26,30,42,0.62); }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-ds1):not(#g-ds2):not(#g-ds3):not(#g-ds4) .content-wrapper .ds-subtabs > .ds-tab { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; }

/* �152 Same as �151 but without requiring .content-wrapper above the tab row (the Audit Log page sits where that selector did not reach). Any tab row that is a direct child of an admin page view. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-da1):not(#g-da2):not(#g-da3):not(#g-da4) .view-section > .ds-subtabs { position: sticky; top: calc(var(--g-cwtop, 70px) + 6px); z-index: 900; width: 100%; padding: 6px; border-radius: 20px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: 0 8px 22px rgba(24,28,50,0.10); box-sizing: border-box; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-da1):not(#g-da2):not(#g-da3):not(#g-da4) .view-section > .ds-subtabs { background: rgba(26,30,42,0.62); }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-da1):not(#g-da2):not(#g-da3):not(#g-da4) .view-section > .ds-subtabs > .ds-tab { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; }

/* �153 FILE STORAGE: the whole top group (Download folder / Refresh, the search and the folder path) is one card, pinned under the page header while the folders and files scroll. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4) #st-top { position: sticky; top: calc(var(--g-cwtop, 70px) + 6px); z-index: 900; }

/* �154 BUG CENTER: the selected status chip is a solid yellow fill with dark text, like the selected tab everywhere else (it was white with a yellow glow). */
html:not(.glass-off):not(#g-fc1):not(#g-fc2):not(#g-fc3):not(#g-fc4) .fchip.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #14172b !important; box-shadow: 0 4px 12px rgba(255,193,0,0.4) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not(.glass-off):not(#g-fc1):not(#g-fc2):not(#g-fc3):not(#g-fc4) .fchip.active .cnt { background: rgba(20,23,43,0.14) !important; color: #14172b !important; }

/* �155 MAIL, PHONES: the theme sized the tab box to its contents (width: fit-content), which beat the page's full-width rule, so the tabs stayed a short group on the left. Full width again; the tabs share it. */
@media (max-width: 640px) {
  html:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4) #view-mailbox .mb-tabs { width: 100% !important; box-sizing: border-box; }
  html:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4) #view-mailbox .mb-tabs > .mb-tab:not(.mb-tab-icon) { flex: 1 1 0 !important; min-width: 0; text-align: center; }
  html:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4) #view-mailbox .mb-tabs > .mb-tab.mb-tab-icon { flex: 0 0 auto !important; width: auto !important; min-width: 0; min-height: 32px; padding: 5px 9px !important; margin-left: auto; }
}

/* �156 MAIL, PHONES: the message list box stopped a hand's width above the bottom of the screen. mbFitPanes() sizes the panes to the screen, then shrinks them by however much the page still overflows, and the portal's bottom padding (--g-cwpb, measured by glass-mode.js) counted as overflow. The Mail view takes that padding back, so the panes run to the bottom. */
@media (max-width: 900px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4) #view-mailbox { margin-bottom: calc(-1 * var(--g-cwpb, 0px)); }
}

/* �157 TOASTS (the pop-up messages: ActionToast in every portal, and the Accounting / Expenses / Invoices #toast): frosted like the dialogs, 66% tint over a blur, with a light colour wash for loading / success / error instead of a pale solid. */
html:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast, html:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) #toast { background: rgba(255,255,255,0.66) !important; color: var(--text-dark, #181c32); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border-top: 1px solid var(--glass-edge); border-right: 1px solid var(--glass-edge); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 12px 32px rgba(24,28,50,0.16); }
html:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast.mpc-toast-loading { background: linear-gradient(rgba(212,160,23,0.14), rgba(212,160,23,0.14)), rgba(255,255,255,0.66) !important; }
html:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast.mpc-toast-success { background: linear-gradient(rgba(22,163,74,0.14), rgba(22,163,74,0.14)), rgba(255,255,255,0.66) !important; }
html:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast.mpc-toast-error { background: linear-gradient(rgba(225,29,72,0.14), rgba(225,29,72,0.14)), rgba(255,255,255,0.66) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast, html[data-glass-theme="dark"]:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) #toast { background: rgba(26,30,42,0.66) !important; color: #f1f4fa; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast.mpc-toast-loading { background: linear-gradient(rgba(212,160,23,0.18), rgba(212,160,23,0.18)), rgba(26,30,42,0.66) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast.mpc-toast-success { background: linear-gradient(rgba(22,163,74,0.18), rgba(22,163,74,0.18)), rgba(26,30,42,0.66) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4) .mpc-toast.mpc-toast-error { background: linear-gradient(rgba(225,29,72,0.18), rgba(225,29,72,0.18)), rgba(26,30,42,0.66) !important; }

/* �158 CHECKBOXES, DARK MODE: a ticked box kept the dark surface fill of the dark theme, so the dark tick vanished (invoice "email" box). Ticked = the yellow fill with the dark tick, in both themes; radios too. */
html:not(.glass-off):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4) .g-check:checked { background: var(--brand, #ffc100) !important; border-color: var(--brand, #ffc100) !important; box-shadow: 0 3px 10px rgba(255,193,0,0.4); }
html:not(.glass-off):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4) .g-check[type="checkbox"]:checked::after { border-color: #181c32 !important; }
html:not(.glass-off):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4) .g-check[type="radio"]:checked::after { background: #181c32 !important; }

/* �159 SHEET LIBRARY IN THE PARENTS + TEACHER PORTALS: the frame is one screen tall, right under the portal's header, and the sheets scroll INSIDE it, so the page's own sticky tabs + search bar (�144) are pinned by the browser itself: smooth, no script moving them. The redundant "Sheet Music" heading above the frame is hidden on this tab (the bottom navigation already names it) and the page's bottom padding is taken back, so the page itself has almost nothing to scroll. Classroom keeps growing with its page. */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4) #sheets-frame, html[data-glass-portal="teacher"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4) #sheets-internal-frame { position: static !important; height: calc(100dvh - var(--g-hb, 68px) - 28px) !important; min-height: 0 !important; margin-bottom: 0 !important; display: block; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4) #tab-sheets > div:first-child { display: none !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4) #tab-sheets { margin-bottom: calc(-1 * var(--g-cwpb, 0px)); }
html[data-glass-portal="teacher"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4) #view-sheets { margin-bottom: calc(-1 * var(--g-cwpb, 0px)); }

/* �161 PULL TO REFRESH pill ("Pull to refresh" / "Release to refresh" / "Refreshing..."; #pull-to-refresh in the admin, teacher and parents portals): frosted like the dialogs, 66% tint over a blur, instead of its see-through card colour. */
html:not(.glass-off):not(#g-pt1):not(#g-pt2):not(#g-pt3):not(#g-pt4) #pull-to-refresh > div { background: rgba(255,255,255,0.66) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; backdrop-filter: blur(24px) saturate(150%) !important; border: 1px solid var(--glass-edge, rgba(255,255,255,0.8)) !important; box-shadow: 0 8px 24px rgba(24,28,50,0.16) !important; }
html:not(.glass-off):not(#g-pt1):not(#g-pt2):not(#g-pt3):not(#g-pt4) #pull-to-refresh #ptr-text { color: #181c32 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-pt1):not(#g-pt2):not(#g-pt3):not(#g-pt4) #pull-to-refresh > div { background: rgba(26,30,42,0.66) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-pt1):not(#g-pt2):not(#g-pt3):not(#g-pt4) #pull-to-refresh #ptr-text { color: #f1f4fa !important; }

/* �162 THE "A NEW VERSION IS READY - Update now" PILL (#mpcUpdateBanner, from js/appVersion.js): its layout, buttons and spacing are left exactly as the script draws them; only the BACKGROUND is themed and frosted (66% tint + blur), with the text colour that stays readable on it. */
html:not(.glass-off):not(#g-ub1):not(#g-ub2):not(#g-ub3):not(#g-ub4) #mpcUpdateBanner { background: rgba(255,255,255,0.66) !important; color: #181c32 !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; backdrop-filter: blur(24px) saturate(150%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ub1):not(#g-ub2):not(#g-ub3):not(#g-ub4) #mpcUpdateBanner { background: rgba(26,30,42,0.66) !important; color: #f1f4fa !important; }

/* �163 BURGER BUTTON (.menu-toggle) LINES: the theme's automatic ink picker saw the yellow glow behind the header and painted the lines near-black even in dark mode. Dark mode + menu CLOSED: white lines. Menu OPEN (the button sits over the yellow sidebar): black lines, as on the desktop. Light mode closed stays dark. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not(#g-bg6) .menu-toggle:not(.mobile-open), html[data-glass-theme="dark"]:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not(#g-bg6) .menu-toggle:not(.mobile-open) i, html[data-glass-theme="dark"]:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not(#g-bg6) .menu-toggle:not(.mobile-open) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not(#g-bg6) .menu-toggle.mobile-open, html:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not(#g-bg6) .menu-toggle.mobile-open i, html:not(.glass-off):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not(#g-bg6) .menu-toggle.mobile-open * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; }
/* �164 DIALOGS ON PHONES: more see-through (owner 10-20: the Change Security PIN and My Portfolio dialogs "not translucent enough"). On a phone the dialog card carries no blur of its own (the blurred page is the overlay's), so the card's flat tint is what decides how solid it looks: 58% / 56% before, now 34% light / 40% dark. Every dialog card (.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card). */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(#g-dl1):not(#g-dl2):not(#g-dl3):not(#g-dl4):not(#g-dl5):not(#g-dl6):not(#g-dl7):not(#g-dl8):not(#g-dl9):not(#g-dl10):not(#g-dl11):not(#g-dl12):not(#g-dl13):not(#g-dl14):not(#g-dl15):not(#g-dl16):not(#g-dl17):not(#g-dl18):not(#g-dl19):not(#g-dl20):not(#g-dl21):not(#g-dl22):not(#g-dl23):not(#g-dl24):not(#g-dl25):not(#g-dl26):not(#g-dl27):not(#g-dl28):not(#g-dl29):not(#g-dl30):not(#g-dl31):not(#g-dl32):not(#g-dl33):not(#g-dl34):not(#g-dl35):not(#g-dl36):not(#g-dl37):not(#g-dl38):not(#g-dl39):not(#g-dl40):not(.glass-off):not([data-glass-theme="dark"]) .modal-overlay :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(255,255,255,0.34) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile:not(#g-dl1):not(#g-dl2):not(#g-dl3):not(#g-dl4):not(#g-dl5):not(#g-dl6):not(#g-dl7):not(#g-dl8):not(#g-dl9):not(#g-dl10):not(#g-dl11):not(#g-dl12):not(#g-dl13):not(#g-dl14):not(#g-dl15):not(#g-dl16):not(#g-dl17):not(#g-dl18):not(#g-dl19):not(#g-dl20):not(#g-dl21):not(#g-dl22):not(#g-dl23):not(#g-dl24):not(#g-dl25):not(#g-dl26):not(#g-dl27):not(#g-dl28):not(#g-dl29):not(#g-dl30):not(#g-dl31):not(#g-dl32):not(#g-dl33):not(#g-dl34):not(#g-dl35):not(#g-dl36):not(#g-dl37):not(#g-dl38):not(#g-dl39):not(#g-dl40):not(.glass-off)[data-glass-theme="dark"] .modal-overlay :is(.alert-card, .modal-card, .modal-content, .ep-modal, .mpc-modal, .auth-card):not(.invoice-paper) { background-color: rgba(26,30,42,0.40) !important; }

/* �165 A CLOSED header menu (notifications, profile) is only invisible, so the browser still styled and laid out its 3,000+ notification elements on every page change (admin page: 34,000 elements, first tap after a pause took ~9 s on iPhone). While closed its contents are skipped; opening shows them. */
html:not(.glass-off):not(#g-hc1):not(#g-hc2) .header-dropdown:not(.active):not(.open):not(.show) { content-visibility: hidden; }

/* �166 Bug Center filter menu (the three-dots list): it had only the page's own see-through card colour, so the cards behind showed through the text. Frosted and dense like the other menus. */
html:not(.glass-off):not(#g-km1):not(#g-km2):not(#g-km3) .kebab-wrap .kebab-menu { background-color: rgba(255,255,255,0.94) !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 14px 36px rgba(20,23,43,0.22); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-km1):not(#g-km2) .kebab-wrap .kebab-menu { background-color: rgba(24,28,40,0.94) !important; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 36px rgba(0,0,0,0.5); }

/* �167 Business Report / Daily Sessions "+3" branch list (.chip-fold-menu, floats on <body>): only a see-through card colour, so the page showed through its text. Frosted and dense like the other menus. */
html:not(.glass-off):not(#g-cf1):not(#g-cf2):not(#g-cf3) .chip-fold-menu { background-color: rgba(255,255,255,0.94) !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 14px 36px rgba(20,23,43,0.22); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-cf1):not(#g-cf2) .chip-fold-menu { background-color: rgba(24,28,40,0.94) !important; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 36px rgba(0,0,0,0.5); }
html:not(.glass-off):not(#g-cf1):not(#g-cf2):not(#g-cf3) .chip-fold-menu .ds-tab:not(.active) { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �168 dark versions of the �166 / �167 menus: the dark rules had fewer :not() ids than the light ones, so the light background won and the (light) text vanished. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-dk1):not(#g-dk2):not(#g-dk3):not(#g-dk4):not(#g-dk5) :is(.kebab-wrap .kebab-menu, .chip-fold-menu) { background-color: rgba(24,28,40,0.95) !important; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 36px rgba(0,0,0,0.5); color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-dk1):not(#g-dk2):not(#g-dk3):not(#g-dk4):not(#g-dk5) :is(.kebab-menu .km-item, .chip-fold-menu .ds-tab:not(.active)) { color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-dk1):not(#g-dk2):not(#g-dk3):not(#g-dk4):not(#g-dk5) .kebab-menu .km-head { color: #aab1c4; }

/* �169 The Bug Center filter list and the Business Report branch list use the SAME recipe as the student-record row menu (.kebab-dropdown): a light tint over a blur of the page behind it, so the letters behind are soft, not sharp. Replaces the near-solid �166-168 colours. */
html:not(.glass-off):not(#g-fm1):not(#g-fm2):not(#g-fm3):not(#g-fm4):not(#g-fm5):not(#g-fm6):not(#g-fm7):not([data-glass-theme="dark"]) :is(.kebab-wrap .kebab-menu, .chip-fold-menu) { background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%), rgba(238,242,250,0.26) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2):not(#g-fm3):not(#g-fm4):not(#g-fm5):not(#g-fm6):not(#g-fm7)[data-glass-theme="dark"] :is(.kebab-wrap .kebab-menu, .chip-fold-menu) { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), rgba(24,34,58,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; color: #eceef4; }

/* �170 The Bug Center filter list now floats on <body> when open (outside the frosted filter bar, so its blur sees the page). Same recipe as �169, which only matched inside .kebab-wrap. */
html:not(.glass-off):not(#g-fn1):not(#g-fn2):not(#g-fn3):not(#g-fn4):not(#g-fn5):not(#g-fn6):not(#g-fn7):not(#g-fn8):not([data-glass-theme="dark"]) body > #filterKebabMenu { background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%), rgba(238,242,250,0.26) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
html:not(.glass-off):not(#g-fn1):not(#g-fn2):not(#g-fn3):not(#g-fn4):not(#g-fn5):not(#g-fn6):not(#g-fn7):not(#g-fn8)[data-glass-theme="dark"] body > #filterKebabMenu { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), rgba(24,34,58,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-fn1):not(#g-fn2):not(#g-fn3):not(#g-fn4):not(#g-fn5):not(#g-fn6):not(#g-fn7):not(#g-fn8) body > #filterKebabMenu .km-item { color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-fn1):not(#g-fn2):not(#g-fn3):not(#g-fn4):not(#g-fn5):not(#g-fn6):not(#g-fn7):not(#g-fn8) body > #filterKebabMenu .km-head { color: #aab1c4; }

/* �171 DESKTOP ONLY (min-width 993px): the Invoices & SOA branch picker list is frosted like the other menus. It floats on <body> there (see invoice.html branchMenuPlace), so its blur sees the page. Phones and tablets keep the solid list above. */
@media (min-width: 993px) {
  html:not(.glass-off):not([data-glass-theme="dark"]) body > #customBranchMenu#customBranchMenu#customBranchMenu#customBranchMenu:not(#g-q1):not(#g-q2):not(#g-q3) { background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%), rgba(238,242,250,0.26) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
  html:not(.glass-off)[data-glass-theme="dark"] body > #customBranchMenu#customBranchMenu#customBranchMenu#customBranchMenu:not(#g-q1):not(#g-q2):not(#g-q3) { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), rgba(24,34,58,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
}

/* �172 DESKTOP ONLY (min-width 993px): the dropdown lists the theme draws for selects, suggestion lists and date/time pickers (.g-select-pop) were 90% opaque, so no blur showed. Same frosted recipe as the row menus (light tint over a 14px blur). Phones and tablets keep what they have. */
@media (min-width: 993px) {
  html:not(.glass-off):not(#g-sp1):not(#g-sp2):not(#g-sp3):not(#g-sp4):not(#g-sp5):not(#g-sp6):not([data-glass-theme="dark"]) .g-select-pop { background: linear-gradient(150deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%), rgba(238,242,250,0.26) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
  html:not(.glass-off):not(#g-sp1):not(#g-sp2):not(#g-sp3):not(#g-sp4):not(#g-sp5):not(#g-sp6)[data-glass-theme="dark"] .g-select-pop { background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), rgba(24,34,58,0.30) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
}
/* �173 DESKTOP ONLY (min-width 993px), dark theme: when a Timesheet & Pay list (teacher portal) is opened, the page's toggle rewrites its style and the browser stores the white panel as rgb(255, 255, 255), which the theme's inline-white rules do not match, so the panel stayed white under light text. Matched by id here, with the same glass the theme gives it elsewhere. */
@media (min-width: 993px) {
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tl1):not(#g-tl2) #unpaid-students-list,
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tl1):not(#g-tl2) #unpaid-incentives-list,
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tl1):not(#g-tl2) #outstanding-deductions-list { background: rgba(30,36,52,0.30) !important; }
}

/* �174 DESKTOP ONLY (min-width 993px, owner 2026-10-21): the Student Records Active / Archived tab row was a full-width bar with two huge halves. On desktop it is a small pill pair that sits at the left and is only as wide as its two labels. Phones and tablets keep the full-width row of �151/�152. */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4):not(#g-st5):not(#g-st6):not(#g-st7) :is(#view-search, #view-archived) > .ds-subtabs { width: fit-content !important; max-width: 100%; padding: 3px !important; border-radius: 13px !important; gap: 2px !important; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4):not(#g-st5):not(#g-st6):not(#g-st7) :is(#view-search, #view-archived) > .ds-subtabs > .ds-tab { flex: 0 0 auto !important; padding: 5px 14px !important; font-size: 12px !important; line-height: 1.3; min-height: 0 !important; border-radius: 10px !important; }
}

/* �175 SOFT REVEAL for the notification bell, the chat panel, the Compose window and the Log Book panel (owner 2026-10-21): the same unhurried curve as the side menu, ~0.55s, with a little rise and scale so they open like iOS sheets. The Compose window had no animation at all (it flipped from display:none), so it plays a keyframe animation when it opens. */
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) .header-dropdown { transform-origin: top right; transform: translateY(-14px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0s linear 0.6s allow-discrete !important; }
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) .header-dropdown.active { transform: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0s linear 0s allow-discrete !important; }   /* contents are skipped only AFTER the soft close has played (see �165) */
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) .chat-panel { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important; }
@keyframes mpcComposeIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) .mpc-compose-panel.is-open { transform-origin: bottom right; animation: mpcComposeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) #lbFloat { transform: translateY(-16px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important; }
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) #lbFloat.active { transform: none; }
@media (prefers-reduced-motion: reduce) { html:not(.glass-off) .header-dropdown, html:not(.glass-off) .chat-panel, html:not(.glass-off) #lbFloat { transition: none !important; } html:not(.glass-off) .mpc-compose-panel.is-open { animation: none; } }

/* �175b Compose close: a picture-copy of the window (see ghostClose in admin.html) fades and sinks away while the real one is already closed. */
@keyframes mpcComposeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(22px); } }
html:not(.glass-off) .mpc-compose-panel.mpc-ghost { display: flex !important; position: fixed; pointer-events: none; z-index: 99989; transform-origin: bottom right; animation: mpcComposeOut 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@media (prefers-reduced-motion: reduce) { html:not(.glass-off) .mpc-compose-panel.mpc-ghost { display: none !important; } }

/* �175c Opening prep (see toggleDropdown / toggleChat in admin.html): while a panel is only getting ready, its contents must lay out even though it is still invisible. The panels also get their own compositor layer so the slide keeps running when the page is busy. */
html:not(.glass-off) .header-dropdown.mpc-prep { content-visibility: visible !important; }
html:not(.glass-off) :is(.header-dropdown, .chat-panel) { will-change: transform, opacity; }

/* �175d No zoom in the reveals (owner 2026-10-21, iOS): the panels used to grow from 95-97% to 100% while sliding, which on iOS made their text look like it was resizing. Chat: rise + fade only. */
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) .chat-panel { transform: translateY(30px); }
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3) .chat-panel.active { transform: none; }

/* �175e The notification bell is a pure FADE now: no movement and no compositor layer (owner 2026-10-21, iOS): while the menu slid, iOS drew its small text (the 10px date and time on each notification) at one size and redrew it at another when the slide ended, which looked like the text resizing. Opacity only, nothing to re-draw. */
html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3):not(#g-rv4) .header-dropdown, html:not(.glass-off):not(#g-rv1):not(#g-rv2):not(#g-rv3):not(#g-rv4) .header-dropdown.active { transform: none !important; will-change: auto !important; }

/* �176 SWITCHING A PAGE / TAB, on every portal and every embedded page (owner 2026-10-21): one shared fade + rise on the side menu's curve for .view-section (admin, teacher, partner, Accounting, Expenses), .tab-section (parents portal) and a plain fade for .view-panel (Invoices, whose pages are big and heavy). It replaces each page's own quick fade (0.3-0.4s) or never-running transition. 'backwards' fill: the last frame equals the normal state, so no transform is left behind (a leftover transform would trap position:fixed dialogs inside the page). */
@keyframes mpcViewIn { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes mpcFadeOnly { from { opacity: 0; } to { opacity: 1; } }
html:not(.glass-off):not(#g-vw1):not(#g-vw2):not(#g-vw3) :is(.view-section.active, .tab-section.active) { opacity: 1; animation: mpcViewIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards !important; }   /* opacity 1 stated outright: some pages (Accounting) only reached it through their own animation fill */
html:not(.glass-off):not(#g-vw1):not(#g-vw2):not(#g-vw3) .view-panel.active { opacity: 1; animation: mpcFadeOnly 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards !important; }
/* partner portal profile menu: it flipped from display:none, so it fades in like the bell */
html:not(.glass-off):not(#g-vw1):not(#g-vw2):not(#g-vw3) .user-dropdown.open { animation: mpcFadeOnly 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@media (prefers-reduced-motion: reduce) { html:not(.glass-off) :is(.view-section.active, .tab-section.active, .view-panel.active, .user-dropdown.open) { animation: none !important; } }

/* �177 THE 11px FLOOR, APPLIED AT ONCE (owner 2026-10-21, Team Management and the bell): text written below 11px was only enlarged by js/glass-mode.js about half a second after it appeared, so it visibly grew. Anything whose size is written inline below 11px now gets the floor straight from the stylesheet (same exclusions as the script: paper, certificates, calendar grid, badges, the sidebar...). Sizes set in a class are still caught by the script's fast pass. */
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#g-fz1):not(#g-fz2) :is([style*="font-size:8px"], [style*="font-size: 8px"], [style*="font-size:8.5px"], [style*="font-size: 8.5px"], [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:9.5px"], [style*="font-size: 9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:10.5px"], [style*="font-size: 10.5px"]):not(.invoice-paper):not(.paperWrapper):not(.book-wrapper):not(#pg-main):not(.pg-pages):not(.dp-map):not(.cert-preview):not(#certPreview):not(#certificate-print-area):not(.cert-scale-wrapper):not(.cert-portrait):not(.cert-thumb-wrap):not(#pcert-print-area):not(.sidebar):not(.chat-header):not(.mpc-compose-head):not(.hero):not(#__glassbar):not(#__fabtweak):not([data-glass-keep]):not(.cal-grid):not(.cal-time-col):not(.badge):not(.lb-dock):not(#lbDockProbe):not(:is(.invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, .cert-portrait, .cert-thumb-wrap, #pcert-print-area, .sidebar, .chat-header, .mpc-compose-head, .hero, #__glassbar, #__fabtweak, [data-glass-keep], .cal-grid, .cal-time-col, .badge, .lb-dock, #lbDockProbe) *) { font-size: 11px !important; }

/* �178 TAB SWITCH INSIDE A PAGE (owner 2026-10-21; e.g. Student Records: Active -> Archived): only the CONTENTS fade, in and out, with no slide, and the tab strip itself stays exactly where it is. glass-mode.js marks the page you arrive on .mpc-tabswitch (and the one fading away .mpc-tabswitch-out) when both pages carry their own .ds-subtabs strip. A sidebar page change keeps the fade + rise. */
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch.active { animation: none !important; }
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch.active > :not(.ds-subtabs):not(.split-view) { animation: mpcFadeOnly 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-leaving.mpc-tabswitch-out > .ds-subtabs { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { html:not(.glass-off) .view-section.mpc-tabswitch.active > :not(.ds-subtabs) { animation: none; } }

/* �179 PALE INLINE BACKGROUNDS, DARK IN THE FIRST FRAME (owner 2026-10-21: the Renumber / Redate buttons on a student's profile turned white and then dark): the theme turned pale hand-written backgrounds dark either by a fixed list of colours here or, for any colour not in the list, by a script that caught up half a second after the content appeared - so the element was white first. These 22 pale colours (found by scanning every page) are now covered by the stylesheet itself: each becomes a translucent tint of its own hue (green, red, blue, amber, neutral). Pale BUTTONS also take light text, as the existing pastel-button rule does. The email template is left light on purpose. */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background:#e6f4ea"], [style*="background: #e6f4ea"], [style*="background-color:#e6f4ea"], [style*="background-color: #e6f4ea"], [style*="background:#e7f5ec"], [style*="background: #e7f5ec"], [style*="background-color:#e7f5ec"], [style*="background-color: #e7f5ec"], [style*="background:#f0fff4"], [style*="background: #f0fff4"], [style*="background-color:#f0fff4"], [style*="background-color: #f0fff4"]):not(button):not(.g-solid-white) { background-color: rgba(80,205,137,0.13) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background: rgb(230, 244, 234)"], [style*="background: rgb(230, 244, 234)"], [style*="background-color: rgb(230, 244, 234)"], [style*="background-color: rgb(230, 244, 234)"], [style*="background: rgb(231, 245, 236)"], [style*="background: rgb(231, 245, 236)"], [style*="background-color: rgb(231, 245, 236)"], [style*="background-color: rgb(231, 245, 236)"], [style*="background: rgb(240, 255, 244)"], [style*="background: rgb(240, 255, 244)"], [style*="background-color: rgb(240, 255, 244)"], [style*="background-color: rgb(240, 255, 244)"]):not(button):not(.g-solid-white) { background-color: rgba(80,205,137,0.13) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background:#e6f4ea"], [style*="background: #e6f4ea"], [style*="background-color:#e6f4ea"], [style*="background-color: #e6f4ea"], [style*="background:#e7f5ec"], [style*="background: #e7f5ec"], [style*="background-color:#e7f5ec"], [style*="background-color: #e7f5ec"], [style*="background:#f0fff4"], [style*="background: #f0fff4"], [style*="background-color:#f0fff4"], [style*="background-color: #f0fff4"]) { background-color: rgba(80,205,137,0.13) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background: rgb(230, 244, 234)"], [style*="background: rgb(230, 244, 234)"], [style*="background-color: rgb(230, 244, 234)"], [style*="background-color: rgb(230, 244, 234)"], [style*="background: rgb(231, 245, 236)"], [style*="background: rgb(231, 245, 236)"], [style*="background-color: rgb(231, 245, 236)"], [style*="background-color: rgb(231, 245, 236)"], [style*="background: rgb(240, 255, 244)"], [style*="background: rgb(240, 255, 244)"], [style*="background-color: rgb(240, 255, 244)"], [style*="background-color: rgb(240, 255, 244)"]) { background-color: rgba(80,205,137,0.13) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background:#fff0f3"], [style*="background: #fff0f3"], [style*="background-color:#fff0f3"], [style*="background-color: #fff0f3"], [style*="background:#fdecea"], [style*="background: #fdecea"], [style*="background-color:#fdecea"], [style*="background-color: #fdecea"], [style*="background:#fff5f5"], [style*="background: #fff5f5"], [style*="background-color:#fff5f5"], [style*="background-color: #fff5f5"], [style*="background:#fff0f0"], [style*="background: #fff0f0"], [style*="background-color:#fff0f0"], [style*="background-color: #fff0f0"], [style*="background:#fdecef"], [style*="background: #fdecef"], [style*="background-color:#fdecef"], [style*="background-color: #fdecef"], [style*="background:#f5e0e3"], [style*="background: #f5e0e3"], [style*="background-color:#f5e0e3"], [style*="background-color: #f5e0e3"]):not(button):not(.g-solid-white) { background-color: rgba(241,65,108,0.13) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background: rgb(255, 240, 243)"], [style*="background: rgb(255, 240, 243)"], [style*="background-color: rgb(255, 240, 243)"], [style*="background-color: rgb(255, 240, 243)"], [style*="background: rgb(253, 236, 234)"], [style*="background: rgb(253, 236, 234)"], [style*="background-color: rgb(253, 236, 234)"], [style*="background-color: rgb(253, 236, 234)"], [style*="background: rgb(255, 245, 245)"], [style*="background: rgb(255, 245, 245)"], [style*="background-color: rgb(255, 245, 245)"], [style*="background-color: rgb(255, 245, 245)"], [style*="background: rgb(255, 240, 240)"], [style*="background: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background: rgb(253, 236, 239)"], [style*="background: rgb(253, 236, 239)"], [style*="background-color: rgb(253, 236, 239)"], [style*="background-color: rgb(253, 236, 239)"], [style*="background: rgb(245, 224, 227)"], [style*="background: rgb(245, 224, 227)"], [style*="background-color: rgb(245, 224, 227)"], [style*="background-color: rgb(245, 224, 227)"]):not(button):not(.g-solid-white) { background-color: rgba(241,65,108,0.13) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background:#fff0f3"], [style*="background: #fff0f3"], [style*="background-color:#fff0f3"], [style*="background-color: #fff0f3"], [style*="background:#fdecea"], [style*="background: #fdecea"], [style*="background-color:#fdecea"], [style*="background-color: #fdecea"], [style*="background:#fff5f5"], [style*="background: #fff5f5"], [style*="background-color:#fff5f5"], [style*="background-color: #fff5f5"], [style*="background:#fff0f0"], [style*="background: #fff0f0"], [style*="background-color:#fff0f0"], [style*="background-color: #fff0f0"], [style*="background:#fdecef"], [style*="background: #fdecef"], [style*="background-color:#fdecef"], [style*="background-color: #fdecef"], [style*="background:#f5e0e3"], [style*="background: #f5e0e3"], [style*="background-color:#f5e0e3"], [style*="background-color: #f5e0e3"]) { background-color: rgba(241,65,108,0.13) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background: rgb(255, 240, 243)"], [style*="background: rgb(255, 240, 243)"], [style*="background-color: rgb(255, 240, 243)"], [style*="background-color: rgb(255, 240, 243)"], [style*="background: rgb(253, 236, 234)"], [style*="background: rgb(253, 236, 234)"], [style*="background-color: rgb(253, 236, 234)"], [style*="background-color: rgb(253, 236, 234)"], [style*="background: rgb(255, 245, 245)"], [style*="background: rgb(255, 245, 245)"], [style*="background-color: rgb(255, 245, 245)"], [style*="background-color: rgb(255, 245, 245)"], [style*="background: rgb(255, 240, 240)"], [style*="background: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background: rgb(253, 236, 239)"], [style*="background: rgb(253, 236, 239)"], [style*="background-color: rgb(253, 236, 239)"], [style*="background-color: rgb(253, 236, 239)"], [style*="background: rgb(245, 224, 227)"], [style*="background: rgb(245, 224, 227)"], [style*="background-color: rgb(245, 224, 227)"], [style*="background-color: rgb(245, 224, 227)"]) { background-color: rgba(241,65,108,0.13) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background:#eef3ff"], [style*="background: #eef3ff"], [style*="background-color:#eef3ff"], [style*="background-color: #eef3ff"], [style*="background:#eef6ff"], [style*="background: #eef6ff"], [style*="background-color:#eef6ff"], [style*="background-color: #eef6ff"], [style*="background:#f5faff"], [style*="background: #f5faff"], [style*="background-color:#f5faff"], [style*="background-color: #f5faff"], [style*="background:#e8f1ff"], [style*="background: #e8f1ff"], [style*="background-color:#e8f1ff"], [style*="background-color: #e8f1ff"], [style*="background:#f4f7ff"], [style*="background: #f4f7ff"], [style*="background-color:#f4f7ff"], [style*="background-color: #f4f7ff"], [style*="background:#e9ecf5"], [style*="background: #e9ecf5"], [style*="background-color:#e9ecf5"], [style*="background-color: #e9ecf5"]):not(button):not(.g-solid-white) { background-color: rgba(74,144,255,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background: rgb(238, 243, 255)"], [style*="background: rgb(238, 243, 255)"], [style*="background-color: rgb(238, 243, 255)"], [style*="background-color: rgb(238, 243, 255)"], [style*="background: rgb(238, 246, 255)"], [style*="background: rgb(238, 246, 255)"], [style*="background-color: rgb(238, 246, 255)"], [style*="background-color: rgb(238, 246, 255)"], [style*="background: rgb(245, 250, 255)"], [style*="background: rgb(245, 250, 255)"], [style*="background-color: rgb(245, 250, 255)"], [style*="background-color: rgb(245, 250, 255)"], [style*="background: rgb(232, 241, 255)"], [style*="background: rgb(232, 241, 255)"], [style*="background-color: rgb(232, 241, 255)"], [style*="background-color: rgb(232, 241, 255)"], [style*="background: rgb(244, 247, 255)"], [style*="background: rgb(244, 247, 255)"], [style*="background-color: rgb(244, 247, 255)"], [style*="background-color: rgb(244, 247, 255)"], [style*="background: rgb(233, 236, 245)"], [style*="background: rgb(233, 236, 245)"], [style*="background-color: rgb(233, 236, 245)"], [style*="background-color: rgb(233, 236, 245)"]):not(button):not(.g-solid-white) { background-color: rgba(74,144,255,0.12) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background:#eef3ff"], [style*="background: #eef3ff"], [style*="background-color:#eef3ff"], [style*="background-color: #eef3ff"], [style*="background:#eef6ff"], [style*="background: #eef6ff"], [style*="background-color:#eef6ff"], [style*="background-color: #eef6ff"], [style*="background:#f5faff"], [style*="background: #f5faff"], [style*="background-color:#f5faff"], [style*="background-color: #f5faff"], [style*="background:#e8f1ff"], [style*="background: #e8f1ff"], [style*="background-color:#e8f1ff"], [style*="background-color: #e8f1ff"], [style*="background:#f4f7ff"], [style*="background: #f4f7ff"], [style*="background-color:#f4f7ff"], [style*="background-color: #f4f7ff"], [style*="background:#e9ecf5"], [style*="background: #e9ecf5"], [style*="background-color:#e9ecf5"], [style*="background-color: #e9ecf5"]) { background-color: rgba(74,144,255,0.12) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background: rgb(238, 243, 255)"], [style*="background: rgb(238, 243, 255)"], [style*="background-color: rgb(238, 243, 255)"], [style*="background-color: rgb(238, 243, 255)"], [style*="background: rgb(238, 246, 255)"], [style*="background: rgb(238, 246, 255)"], [style*="background-color: rgb(238, 246, 255)"], [style*="background-color: rgb(238, 246, 255)"], [style*="background: rgb(245, 250, 255)"], [style*="background: rgb(245, 250, 255)"], [style*="background-color: rgb(245, 250, 255)"], [style*="background-color: rgb(245, 250, 255)"], [style*="background: rgb(232, 241, 255)"], [style*="background: rgb(232, 241, 255)"], [style*="background-color: rgb(232, 241, 255)"], [style*="background-color: rgb(232, 241, 255)"], [style*="background: rgb(244, 247, 255)"], [style*="background: rgb(244, 247, 255)"], [style*="background-color: rgb(244, 247, 255)"], [style*="background-color: rgb(244, 247, 255)"], [style*="background: rgb(233, 236, 245)"], [style*="background: rgb(233, 236, 245)"], [style*="background-color: rgb(233, 236, 245)"], [style*="background-color: rgb(233, 236, 245)"]) { background-color: rgba(74,144,255,0.12) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background:#fff4d6"], [style*="background: #fff4d6"], [style*="background-color:#fff4d6"], [style*="background-color: #fff4d6"], [style*="background:#fff6d9"], [style*="background: #fff6d9"], [style*="background-color:#fff6d9"], [style*="background-color: #fff6d9"], [style*="background:#fffaf0"], [style*="background: #fffaf0"], [style*="background-color:#fffaf0"], [style*="background-color: #fffaf0"]):not(button):not(.g-solid-white) { background-color: rgba(255,193,0,0.11) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background: rgb(255, 244, 214)"], [style*="background: rgb(255, 244, 214)"], [style*="background-color: rgb(255, 244, 214)"], [style*="background-color: rgb(255, 244, 214)"], [style*="background: rgb(255, 246, 217)"], [style*="background: rgb(255, 246, 217)"], [style*="background-color: rgb(255, 246, 217)"], [style*="background-color: rgb(255, 246, 217)"], [style*="background: rgb(255, 250, 240)"], [style*="background: rgb(255, 250, 240)"], [style*="background-color: rgb(255, 250, 240)"], [style*="background-color: rgb(255, 250, 240)"]):not(button):not(.g-solid-white) { background-color: rgba(255,193,0,0.11) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background:#fff4d6"], [style*="background: #fff4d6"], [style*="background-color:#fff4d6"], [style*="background-color: #fff4d6"], [style*="background:#fff6d9"], [style*="background: #fff6d9"], [style*="background-color:#fff6d9"], [style*="background-color: #fff6d9"], [style*="background:#fffaf0"], [style*="background: #fffaf0"], [style*="background-color:#fffaf0"], [style*="background-color: #fffaf0"]) { background-color: rgba(255,193,0,0.11) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background: rgb(255, 244, 214)"], [style*="background: rgb(255, 244, 214)"], [style*="background-color: rgb(255, 244, 214)"], [style*="background-color: rgb(255, 244, 214)"], [style*="background: rgb(255, 246, 217)"], [style*="background: rgb(255, 246, 217)"], [style*="background-color: rgb(255, 246, 217)"], [style*="background-color: rgb(255, 246, 217)"], [style*="background: rgb(255, 250, 240)"], [style*="background: rgb(255, 250, 240)"], [style*="background-color: rgb(255, 250, 240)"], [style*="background-color: rgb(255, 250, 240)"]) { background-color: rgba(255,193,0,0.11) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background:#e8eaed"], [style*="background: #e8eaed"], [style*="background-color:#e8eaed"], [style*="background-color: #e8eaed"], [style*="background:#f1f1f1"], [style*="background: #f1f1f1"], [style*="background-color:#f1f1f1"], [style*="background-color: #f1f1f1"], [style*="background:#ebf0f4"], [style*="background: #ebf0f4"], [style*="background-color:#ebf0f4"], [style*="background-color: #ebf0f4"], [style*="background:#f9fafb"], [style*="background: #f9fafb"], [style*="background-color:#f9fafb"], [style*="background-color: #f9fafb"]):not(button):not(.g-solid-white) { background-color: rgba(255,255,255,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) :is([style*="background: rgb(232, 234, 237)"], [style*="background: rgb(232, 234, 237)"], [style*="background-color: rgb(232, 234, 237)"], [style*="background-color: rgb(232, 234, 237)"], [style*="background: rgb(241, 241, 241)"], [style*="background: rgb(241, 241, 241)"], [style*="background-color: rgb(241, 241, 241)"], [style*="background-color: rgb(241, 241, 241)"], [style*="background: rgb(235, 240, 244)"], [style*="background: rgb(235, 240, 244)"], [style*="background-color: rgb(235, 240, 244)"], [style*="background-color: rgb(235, 240, 244)"], [style*="background: rgb(249, 250, 251)"], [style*="background: rgb(249, 250, 251)"], [style*="background-color: rgb(249, 250, 251)"], [style*="background-color: rgb(249, 250, 251)"]):not(button):not(.g-solid-white) { background-color: rgba(255,255,255,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background:#e8eaed"], [style*="background: #e8eaed"], [style*="background-color:#e8eaed"], [style*="background-color: #e8eaed"], [style*="background:#f1f1f1"], [style*="background: #f1f1f1"], [style*="background-color:#f1f1f1"], [style*="background-color: #f1f1f1"], [style*="background:#ebf0f4"], [style*="background: #ebf0f4"], [style*="background-color:#ebf0f4"], [style*="background-color: #ebf0f4"], [style*="background:#f9fafb"], [style*="background: #f9fafb"], [style*="background-color:#f9fafb"], [style*="background-color: #f9fafb"]) { background-color: rgba(255,255,255,0.07) !important; color: #eceef4 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pc1):not(#g-pc2):not(#g-pc3):not(#g-pc4):not(#g-pc5) button:is([style*="background: rgb(232, 234, 237)"], [style*="background: rgb(232, 234, 237)"], [style*="background-color: rgb(232, 234, 237)"], [style*="background-color: rgb(232, 234, 237)"], [style*="background: rgb(241, 241, 241)"], [style*="background: rgb(241, 241, 241)"], [style*="background-color: rgb(241, 241, 241)"], [style*="background-color: rgb(241, 241, 241)"], [style*="background: rgb(235, 240, 244)"], [style*="background: rgb(235, 240, 244)"], [style*="background-color: rgb(235, 240, 244)"], [style*="background-color: rgb(235, 240, 244)"], [style*="background: rgb(249, 250, 251)"], [style*="background: rgb(249, 250, 251)"], [style*="background-color: rgb(249, 250, 251)"], [style*="background-color: rgb(249, 250, 251)"]) { background-color: rgba(255,255,255,0.07) !important; color: #eceef4 !important; }

/* �179b Dark solid neutral inline BUTTONS (#1e293b, #333, #181c32) were turned into glass by the script half a second after they appeared; now the stylesheet does it in the first frame (same look as .g-btn, without the blur). */
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pd1):not(#g-pd2):not(#g-pd3):not(#g-pd4) button:is([style*="background:#1e293b"], [style*="background: #1e293b"], [style*="background-color:#1e293b"], [style*="background-color: #1e293b"], [style*="background:#333333"], [style*="background: #333333"], [style*="background-color:#333333"], [style*="background-color: #333333"], [style*="background:#333"], [style*="background: #333"], [style*="background-color:#333"], [style*="background-color: #333"], [style*="background:#181c32"], [style*="background: #181c32"], [style*="background-color:#181c32"], [style*="background-color: #181c32"]):not(.btn-primary) { background-color: rgba(255,255,255,0.08) !important; color: #eceef4 !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#pg-main):not(#g-pd1):not(#g-pd2):not(#g-pd3):not(#g-pd4) button:is([style*="background: rgb(30, 41, 59)"], [style*="background: rgb(30, 41, 59)"], [style*="background-color: rgb(30, 41, 59)"], [style*="background-color: rgb(30, 41, 59)"], [style*="background: rgb(51, 51, 51)"], [style*="background: rgb(51, 51, 51)"], [style*="background-color: rgb(51, 51, 51)"], [style*="background-color: rgb(51, 51, 51)"], [style*="background: rgb(51, 51, 51)"], [style*="background: rgb(51, 51, 51)"], [style*="background-color: rgb(51, 51, 51)"], [style*="background-color: rgb(51, 51, 51)"], [style*="background: rgb(24, 28, 50)"], [style*="background: rgb(24, 28, 50)"], [style*="background-color: rgb(24, 28, 50)"], [style*="background-color: rgb(24, 28, 50)"]):not(.btn-primary) { background-color: rgba(255,255,255,0.08) !important; color: #eceef4 !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important; }

/* �180 above: for every rule that darkens a PALE hand-written background by its hex spelling, a copy that matches the rgb() spelling. When a script touches an element (the Redate nudge, the roster, a collapsible), the browser rewrites its inline style and #f0fdf4 becomes rgb(240, 253, 244); the hex rules then stopped matching and the element went pale until the script re-tagged it half a second later. */

/* �181 NO PER-ROW ENTRANCE IN BIG LISTS (owner 2026-10-21: Active Students tab jerky): motion.css gives every row of a list its own 0.26s entrance animation. A student list has 266-334 rows, so a tab switch started ~270 animations on top of the fade (measured with the debug recorder: mpcRowIn x266) and the page stuttered. The list panels (.split-list-content: students, archived, parents, team...) no longer animate row by row; the whole pane fades instead. Other row types are also still during a tab switch. */
html:not(.glass-off):not(#g-ra1):not(#g-ra2):not(#g-ra3) .split-list-content > div { animation: none !important; }
html:not(.glass-off):not(#g-ra1):not(#g-ra2):not(#g-ra3) .view-section.mpc-tabswitch.active :is(.lesson-item, .cashbox-row, .kebab-row, .notif-item, .stat-box, .branch-card, .payout-item) { animation: none !important; }

/* �178b TAB SWITCH - ONLY THE CONTENTS, NEVER THE BOXES (owner 2026-10-21: Active Students still jerky): fading a whole split view fades its frosted panels (backdrop-filter) with 300+ rows inside, which stutters. In a tab switch the frosted boxes and the tab strip now stay still and only the list rows and the profile content fade, in and out. */
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch.active > .split-view { animation: none !important; }
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch.active > .split-view .split-list-content { animation: mpcFadeOnly 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
/* the page being left: its boxes disappear at once, only its contents are still there (and fading, see glass-mode.js leave()) */
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch-out.mpc-contents-only * { visibility: hidden !important; }
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch-out.mpc-contents-only :is(.split-list-content, [id$="-detail-content"]), html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch-out.mpc-contents-only :is(.split-list-content, [id$="-detail-content"]) * { visibility: visible !important; }
html:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4) .view-section.mpc-tabswitch-out.mpc-contents-only :is(.split-view, .split-list, .split-detail) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-motion: reduce) { html:not(.glass-off) .view-section.mpc-tabswitch.active > .split-view .split-list-content { animation: none; } }

/* �178c the card of the profile you are LEAVING keeps its contents but loses its frame (yellow edge, fill, shadow, blur), so only the contents are seen fading away over the new card; same for the picture-copy of the old profile. */
html:not(.glass-off):not(#g-cf1):not(#g-cf2):not(#g-cf3) :is(.view-section.mpc-tabswitch-out.mpc-contents-only, .mpc-ghost-pane) .card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �182 DESKTOP ONLY (min-width 993px, owner 2026-10-21): on a page with a tab strip (Student Records: Active / Archived) the list box is pinned so it stays while the profile scrolls, but it was pinned at the height of the page header only, so it slid up under the pinned tab strip and the two overlapped. It is now pinned just BELOW the strip (strip top = header bottom + 6px, strip 36px tall, 8px gap) and its height is reduced by the same amount. */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-sl1):not(#g-sl2):not(#g-sl3):not(#g-sl4):not(#g-sl5) .view-section:has(> .ds-subtabs) > .split-view > .split-list { top: calc(var(--g-cwtop, 70px) + 50px) !important; max-height: calc(100vh - var(--g-cwtop, 70px) - 50px - 24px) !important; }
}

/* �183 DESKTOP ONLY: the Invoices branch list floats on <body> (see invoice.html branchMenuPlace) but sat at z-index 5000 while the page's own top bar (.navbar) is 10000, so the bar was drawn OVER the top of the list. The list is now above it. */
@media (min-width: 993px) {
  html:not(.glass-off):not(#g-zb1):not(#g-zb2):not(#g-zb3) body > #customBranchMenu#customBranchMenu#customBranchMenu#customBranchMenu:not(#g-zb4):not(#g-zb5) { z-index: 20000 !important; }
}

/* �184 THE 11px FLOOR FOR SIZES SET IN A CLASS (owner 2026-10-21: the ADMIN / PARTNER tags in Team Management resized): the pages' own style sheets give 79 selectors a font size under 11px (the team role tags at 9px, filter chips, table headers, mailbox labels...). The theme enlarged them to 11px only when a script reached them half a second after they appeared, so they visibly grew. This list is generated from the pages' own CSS and applies the floor in the first frame (same exclusions as the script: calendar, badges, paper, certificates, print, sidebar). Regenerate it if a page adds a new small class. */
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#g-sz1):not(#g-sz2):not(#g-sz3) :is(.ae-range-label, .tm-role-tag, #ds-table th, .ds-rpt-table th, .mtf-chip button, .mtf-pop h6, .mtf-range span, .mtf-tools button, .mtf-opt .n, .mtf-more, .dsm-presets button, #br-filter-count, #ef-table.ef-compact th.ef-col-responses, #ef-table th.ef-col-responses, #efEditorModal .ef-q-section, #efEditorModal .ef-hint, #efEditorModal #ef-fields .ef-choice-pic .ef-pic-x, #efEditorModal .ef-teacher-head, #efEditorModal .ef-how-hint, #sd-nav-list .sd-nav-group, #sd-panel-posts .sd-post-state, #sd-panel-ideas .sd-post-state, #sd-panel-video .sd-post-state, #sd-panel-lapses .sd-lapse-chip, #sd-panel-lapses .sd-lapse-fix-tag, #sd-mtabs .sd-mtab-count, #sd-price-tree .sd-tree-branchname, #view-mailbox .mb-railhead, #view-mailbox .mb-palette .mb-chip, #view-mailbox .mb-cardfold, #view-mailbox .mb-cardfold .mb-cardcount, #view-mailbox .mb-set-h, #view-mailbox .mb-pnum-unit, #view-mailbox .mb-psteps button, #view-mailbox .mb-composer.hasside .mb-palette .mb-chip, #view-mailbox .mb-seglabel, #view-mailbox .mb-parthandle, #view-mailbox .mb-sizehandle, #view-mailbox .mb-toolname, #view-mailbox .mb-sizeunit):not(:is(.cal-grid, .cal-time-col, .badge, .lb-dock, #lbDockProbe, .invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, .cert-portrait, .cert-thumb-wrap, #pcert-print-area, .sidebar, .chat-header, .mpc-compose-head, .hero, [data-glass-keep]) *) { font-size: 11px !important; }
html:not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not(#g-sz1):not(#g-sz2):not(#g-sz3) :is(#view-mailbox .mb-steps button i, #view-mailbox .mb-live, .gset-label, .pushset-row .pushset-tag, .privacy-notice, .lb-req, .lb-opt, .lb-carry-btn, .lb-branch-pill, .lb-at-pill, .lb-at-note, .lb-board-mine, .lb-board-count, .lb-merged-head span, .lb-chk-by, .lb-peer-note .when, .lb-edited-pill, .chat-sender-name, .svc-day, .nav-item, .profile-action-btns button, .award-meta-item small, ' + '.pr, ' + '.pr-lab, ' + '.pr-t, ' + '.pr-t th, .nav-section-label, .user-card-role, .chat-meta, .chat-unread-dot, .interest-alert-card .ia-label, .overdue-text, .notes-qr-area, .tc-area, .tc-title, .advanced-item-settings input, .advanced-item-settings select, .kebab-menu .km-head, .fix-dates label):not(:is(.cal-grid, .cal-time-col, .badge, .lb-dock, #lbDockProbe, .invoice-paper, .paperWrapper, .book-wrapper, #pg-main, .pg-pages, .dp-map, .cert-preview, #certPreview, #certificate-print-area, .cert-scale-wrapper, .cert-portrait, .cert-thumb-wrap, #pcert-print-area, .sidebar, .chat-header, .mpc-compose-head, .hero, [data-glass-keep]) *) { font-size: 11px !important; }

/* �185 DESKTOP ONLY (min-width 993px, owner 2026-10-21: Team Management role tags move on every tab change): the Active list is long enough to need a scrollbar and the Archived list is not, so the rows were 11px wider on one tab than the other and the right-aligned ADMIN / PARTNER tags shifted sideways each time. Both lists now always reserve the scrollbar's space, so rows have the same width on both tabs. */
@media (min-width: 993px) {
  html:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3) :is(#teacherListArea, #terminatedListArea, #admin-parent-list) { scrollbar-gutter: stable; }
}

/* �186 DESKTOP ONLY (min-width 993px, owner 2026-10-21): the Master Calendar box ended well above the bottom of the side menu - it was capped at 65% of the screen height. The calendar page now fills the screen height (screen - the content area's top - its 18px padding - the 14px gap the side menu leaves at the bottom) and the calendar box takes everything under the controls, so its bottom edge lines up with the side menu's. The box scrolls inside, as before; if the controls wrap to several lines the box keeps a 260px minimum and the page scrolls instead. */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #view-master-calendar.active { display: flex; flex-direction: column; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - var(--glass-gap, 14px)); min-height: 420px; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #view-master-calendar.active > .cal-grid-wrapper { flex: 1 1 auto; min-height: 260px; max-height: none !important; }
}

/* �187 Enrollment response "Delete" button: colours live in a class (not inline), so the dark theme is right from the first frame and does not flash pale pink on every response switch (owner 2026-10-21). Dark = soft translucent red with a light-red label. */
html:not(#g-ed1) .btn-primary.enr-del-btn { background: #fff5f8; color: var(--danger-ink); border: 1px solid var(--danger); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ed1):not(#g-ed2) .btn-primary.enr-del-btn { background: rgba(255, 92, 122, 0.14); color: #ff9aae; border: 1px solid rgba(255, 126, 150, 0.45); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ed1):not(#g-ed2) .btn-primary.enr-del-btn:hover { background: rgba(255, 92, 122, 0.24); }

/* �187b the dark theme's own button ink rules were winning: force the label and icon colour. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ed1):not(#g-ed2):not(#g-ed3) .btn-primary.enr-del-btn,
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ed1):not(#g-ed2):not(#g-ed3) .btn-primary.enr-del-btn i { color: #ff9aae !important; }

/* �188 Social Desk / Compose switches: the dark off-state rule (� .sd-switch) out-ranked the "on" colour, so every switch looked off. The on state gets the brand colour back, in both themes (owner 2026-10-21). */
html:not(#g-sw1) :is(#view-social-desk, #mpc-compose-body) input:checked + .sd-switch { background: var(--brand, #ffc100); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sw1):not(#g-sw2) :is(#view-social-desk, #mpc-compose-body) input:checked + .sd-switch { background: var(--brand, #ffc100); }

/* �189 Business Report daily/month total rows: the pale yellow cell background (#fff8e1, an ID rule) beat the zero-specificity dark rule, so the empty and number cells stayed cream in dark mode. Dark = a soft warm tint (owner 2026-10-21). */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ds1):not(#g-ds2) :is(#ds-table, .ds-rpt-table) tr.ds-subtotal td { background: rgba(255, 193, 0, 0.12); color: var(--text-dark); }

/* �190 Marketing & Ads (all sizes, owner 2026-10-21): the tab header and the body below it were two cards welded together with square inner corners. Both get full round corners and a gap between them (owner 2026-10-21). */
@media all {
  html:not(#g-mk1) #view-marketing > #mkt-top { border-radius: 20px !important; margin-bottom: 14px !important; }
  html:not(#g-mk1) #view-marketing > #mkt-top + .card { border-radius: 20px !important; border-top: 1px solid var(--border-color) !important; }
}

/* �191 TEAM MANAGEMENT (desktop only): the roster box ended about 20px above the bottom of the side menu. It is exactly as tall as the screen under the header now (the same measure the Master Calendar box uses, �186), and the list scrolls inside it (owner 2026-10-21). */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-tm1):not(#g-tm2):not(#g-tm3):not(#g-tm4) #view-teachers .split-list { max-height: none !important; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - var(--glass-gap, 14px)); }
}

/* �192 DESKTOP (owner 2026-10-21): (a) pages whose box ended above the bottom of the side menu - Student Records, Parent Portal, Payout & Advances, the teacher's My Schedule - now fill the screen under the header, like Master Calendar (�186): the page is a column as tall as the screen, its box takes everything under the tab strip and its list scrolls inside. (b) the burger button sits on the yellow side menu while the menu is open, so its lines are black in dark mode too. */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4) :is(#view-search, #view-parents, #view-payout-requests).active { display: flex; flex-direction: column; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - var(--glass-gap, 14px)); min-height: 420px; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4) :is(#view-search, #view-parents, #view-payout-requests).active > .split-view { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4) :is(#view-search, #view-parents, #view-payout-requests).active > .split-view > .split-list { max-height: none !important; height: auto !important; min-height: 0 !important; align-self: stretch; }
  html[data-glass-portal="teacher"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4) #view-schedule.active { display: flex; flex-direction: column; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - var(--glass-gap, 14px)); min-height: 420px; }
  html[data-glass-portal="teacher"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4) #view-schedule.active > .cal-grid-wrapper { flex: 1 1 auto; min-height: 260px; max-height: none !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4):not(#g-al5) .menu-toggle:not(.desktop-closed):not(.sidebar *), html[data-glass-theme="dark"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4):not(#g-al5) .menu-toggle:not(.desktop-closed):not(.sidebar *) i, html[data-glass-theme="dark"]:not(.glass-off):not(#g-al1):not(#g-al2):not(#g-al3):not(#g-al4):not(#g-al5) .menu-toggle:not(.desktop-closed):not(.sidebar *) span { color: #181c32 !important; --text-dark: #181c32; }
}

/* �193 CERTIFICATES (desktop only): the Generate card and the preview box ended at different heights, both above the bottom of the side menu. Both are as tall as the screen under the header now (the Master Calendar measure, �186). */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ce1):not(#g-ce2):not(#g-ce3):not(#g-ce4) #view-certificates.active { display: flex; flex-direction: column; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - var(--glass-gap, 14px)); min-height: 600px; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ce1):not(#g-ce2):not(#g-ce3):not(#g-ce4) #view-certificates.active > .cert-swipe-container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ce1):not(#g-ce2):not(#g-ce3):not(#g-ce4) #view-certificates.active .cert-split-view { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ce1):not(#g-ce2):not(#g-ce3):not(#g-ce4) #view-certificates.active .cert-form-panel { height: auto !important; align-self: stretch; overflow-y: auto; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ce1):not(#g-ce2):not(#g-ce3):not(#g-ce4) #view-certificates.active .cert-preview-panel { display: flex; flex-direction: column; align-self: stretch; min-height: 0; }
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-ce1):not(#g-ce2):not(#g-ce3):not(#g-ce4) #view-certificates.active .cert-preview-wrapper { flex: 1 1 auto; height: auto !important; min-height: 0; margin-bottom: 0 !important; }
}

/* �194 BURGER, DESKTOP, MENU OPEN: �192 only set the colour; �163 also sets -webkit-text-fill-color white, which wins. Both set here, with a longer :not chain than �163 (owner 2026-10-21: lines still white). */
@media (min-width: 993px) {
  html[data-glass-theme="dark"]:not(.glass-off):not(#g-bx1):not(#g-bx2):not(#g-bx3):not(#g-bx4):not(#g-bx5):not(#g-bx6):not(#g-bx7):not(#g-bx8) .menu-toggle:not(.desktop-closed), html[data-glass-theme="dark"]:not(.glass-off):not(#g-bx1):not(#g-bx2):not(#g-bx3):not(#g-bx4):not(#g-bx5):not(#g-bx6):not(#g-bx7):not(#g-bx8) .menu-toggle:not(.desktop-closed) i, html[data-glass-theme="dark"]:not(.glass-off):not(#g-bx1):not(#g-bx2):not(#g-bx3):not(#g-bx4):not(#g-bx5):not(#g-bx6):not(#g-bx7):not(#g-bx8) .menu-toggle:not(.desktop-closed) * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; }
}

/* �195 the tab strip above the box must keep its own height: in the fixed-height column of �192 a long student profile squeezed it flat (owner 2026-10-21). */
@media (min-width: 993px) {
  html[data-glass-portal="admin"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4):not(#g-st5) :is(#view-search, #view-parents, #view-payout-requests).active > :not(.split-view) { flex: 0 0 auto !important; }
}

/* �196 TEACHER MY SCHEDULE (desktop only): the calendar table stopped short of the right edge of its box. It is as wide as the box now, whatever the zoom buttons say (the zoom shrinks the table, so its width is 100% divided by the zoom). The columns share the width equally (owner 2026-10-21). */
@media (min-width: 993px) {
  html[data-glass-portal="teacher"]:not(.glass-off):not(#g-cw1):not(#g-cw2):not(#g-cw3) #teacher-calendar-grid { width: calc(100% / var(--cal-z, 1)); }
}

/* �197 LOGIN PAGE BACKDROP (owner 2026-10-21): the sign-in page drew its own two small blurred blobs (400px / 500px), which squeezed the theme's glow image into a 400px square. It now uses the same full-screen glow as the portals (light and dark), and its own blobs are off. */
html[data-glass-portal="app"]:not(.glass-off):not(#g-lg1):not(#g-lg2):not(#g-lg3) body:has(.login-box)::before { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; filter: none !important; opacity: 1 !important; animation: none !important; transform: none !important; border-radius: 0 !important; z-index: -1 !important; display: block !important; }
html[data-glass-portal="app"]:not(.glass-off):not(#g-lg1):not(#g-lg2):not(#g-lg3) body:has(.login-box)::after { display: none !important; }

/* �198 LOGIN BOX: more see-through frosted glass (owner 2026-10-21: "not translucent blurry frosty"). It was a 72% white sheet, which over the pale glow read as solid. Now ~40% over a strong blur so the glow shows softly through it; dark mode a 42% dark tint. */
html[data-glass-portal="app"]:not(.glass-off):not(#g-lb1):not(#g-lb2):not(#g-lb3) .login-box { background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, rgba(255, 255, 255, 0.38) !important; -webkit-backdrop-filter: blur(26px) saturate(170%) !important; backdrop-filter: blur(26px) saturate(170%) !important; border: 1px solid rgba(255, 255, 255, 0.6); }
html[data-glass-portal="app"][data-glass-theme="dark"]:not(.glass-off):not(#g-lb1):not(#g-lb2):not(#g-lb3) .login-box { background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, rgba(22, 26, 40, 0.42) !important; border: 1px solid rgba(255, 255, 255, 0.14); }

/* �199 PARENTS PORTAL NOTICE DIALOG (owner 2026-10-21: low contrast text): the card was so see-through that the blurred sign-in page showed through the words. The card is a firmer frosted tint and every word in the message is the full-strength text colour (light and dark). */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-nt1):not(#g-nt2):not(#g-nt3) #customAlert .alert-card { background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, rgba(255, 255, 255, 0.5) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-nt1):not(#g-nt2):not(#g-nt3) #customAlert .alert-card { background: linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat, rgba(20, 24, 38, 0.55) !important; -webkit-backdrop-filter: blur(28px) saturate(170%) !important; backdrop-filter: blur(28px) saturate(170%) !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-nt1):not(#g-nt2):not(#g-nt3) #customAlert #alertMessage, html[data-glass-portal="parents"]:not(.glass-off):not(#g-nt1):not(#g-nt2):not(#g-nt3) #customAlert #alertMessage :not(a):not(button) { color: #14172b !important; -webkit-text-fill-color: #14172b !important; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-nt1):not(#g-nt2):not(#g-nt3) #customAlert #alertMessage, html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-nt1):not(#g-nt2):not(#g-nt3) #customAlert #alertMessage :not(a):not(button) { color: #eef0f6 !important; -webkit-text-fill-color: #eef0f6 !important; }

/* �200 PARENTS PORTAL PAGE SCROLLBAR (owner 2026-10-21: "solid black at the right edge"): the sign-in page scrolls inside <body>, whose native scrollbar track is a solid dark strip in dark mode. A slim see-through track with a soft thumb now (light and dark). */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2) body { scrollbar-width: thin; scrollbar-color: rgba(24, 28, 50, 0.28) transparent; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2) body::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2) body::-webkit-scrollbar-track { background: transparent; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2) body::-webkit-scrollbar-thumb { background-color: rgba(24, 28, 50, 0.28); border-radius: 8px; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-sb1):not(#g-sb2) body { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-sb1):not(#g-sb2) body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); }

/* �200b the page scrollbar belongs to <html> (body's overflow is passed up to the viewport), so the same slim see-through scrollbar is set there too. */
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2):not(#g-sb3) { scrollbar-width: thin; scrollbar-color: rgba(24, 28, 50, 0.28) transparent; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2):not(#g-sb3)::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2):not(#g-sb3)::-webkit-scrollbar-track { background: transparent; }
html[data-glass-portal="parents"]:not(.glass-off):not(#g-sb1):not(#g-sb2):not(#g-sb3)::-webkit-scrollbar-thumb { background-color: rgba(24, 28, 50, 0.28); border-radius: 8px; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-sb1):not(#g-sb2):not(#g-sb3) { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-sb1):not(#g-sb2):not(#g-sb3)::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); }

/* �201 CHAT LISTS, DARK MODE (owner 2026-10-21: "Recent & Active Chats" flashes white on every switch): the section header is written with an inline pale background, and the dark rule for it only took effect about 0.2 s after the list was drawn, so every re-draw showed pale first. The dark colour is set here, in the stylesheet, so it is right on the first frame. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-rc1):not(#g-rc2):not(#g-rc3) :is(.chat-panel, #chatDirectory, #chatDirectoryWrapper, #chatBody) :is([style*="#f0f2f5"], [style*="#f4f6f8"], [style*="#f8f9fa"], [style*="#fafafa"], [style*="#f9f9f9"], [style*="#f5f5f5"], [style*="#fff5f8"], [style*="#f0f7ff"], [style*="#e8fff3"]) { background-color: var(--g-surface, rgba(105, 125, 155, 0.13)) !important; transition: none !important; }

/* �201b the page's own colour pass rewrites the inline style a split second later, so the hex written in it becomes rgb(...) and the hex selectors above stop matching: the same rule for the rgb spelling keeps it dark. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-rc1):not(#g-rc2):not(#g-rc3):not(#g-rc4) :is(.chat-panel, #chatDirectory, #chatDirectoryWrapper, #chatBody) :is([style*="background: rgb(240, 242, 245)"], [style*="background: rgb(244, 246, 248)"], [style*="background: rgb(248, 249, 250)"], [style*="background: rgb(250, 250, 250)"], [style*="background: rgb(249, 249, 249)"], [style*="background: rgb(245, 245, 245)"], [style*="background: rgb(255, 245, 248)"], [style*="background: rgb(240, 247, 255)"], [style*="background: rgb(232, 255, 243)"]) { background-color: var(--g-surface, rgba(105, 125, 155, 0.13)) !important; transition: none !important; }

/* �202 CHAT BOXES: NO PHONE TEXT AUTO-SIZING (owner 2026-10-21: the chat list's preview texts resize when a conversation is closed and the list comes back; same in the parents portal). Safari on a phone enlarges ("auto-sizes") blocks of text it judges to be the main text of a page, and re-judges every time a box is shown again - so the preview lines changed size on each return to the list. The conversation area already carried this guard (.chat-body); the whole panel gets it now: admin, teacher, partner and parents. */
.chat-panel, .chat-panel * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }

/* �203 UPDATES TO FAMILIES (the mail editor), owner 2026-10-21: (a) the formatting toolbar and the bottom Save bar let the email show through them (the theme turns solid-white bars into frosted glass, and the email paper is white), so words behind them cut across the buttons; both are solid surfaces now. (b) the zoom row: the "100%" figure was dark grey on dark, and the buttons read faded in dark mode; full-strength light text there. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5) #view-mailbox .mb-blocktools { background: rgba(255, 255, 255, 0.88) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5) #view-mailbox .mb-actionbar { background: rgba(255, 255, 255, 0.8) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5) #view-mailbox .mb-actionbar { background: rgba(20, 24, 38, 0.74) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; border-top-color: rgba(255, 255, 255, 0.14) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5) #view-mailbox .mb-zoombar .mb-zoomlevel { color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5) #view-mailbox .mb-zoombar :is(.mb-btn, .mb-icon), html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5) #view-mailbox .mb-zoombar :is(.mb-btn, .mb-icon) i { color: #eceef4 !important; opacity: 1 !important; }

/* �204 EVENT PLANNER, Seat Plan "Edit plan | Seating" switch (owner 2026-10-21: contrast): the chosen half is a white chip, and in dark mode the colour pass made its label light, so "Seating" was white on white. The chosen chip keeps its dark navy label (and icon) in dark mode. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sn1):not(#g-sn2):not(#g-sn3):not(#g-sn4):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-subnav-item[aria-current="page"], html[data-glass-theme="dark"]:not(.glass-off):not(#g-sn1):not(#g-sn2):not(#g-sn3):not(#g-sn4):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-subnav-item[aria-current="page"] i, html[data-glass-theme="dark"]:not(.glass-off):not(#g-sn1):not(#g-sn2):not(#g-sn3):not(#g-sn4):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-subnav-item[aria-current="page"] span { color: #14172b !important; -webkit-text-fill-color: #14172b !important; }

/* �205 EVENT PLANNER STICKY BARS (owner 2026-10-21: "the tabs are completely transparent"): the strip of sub-tabs (Event / Tickets / Online booking / Money / Emails / Advanced) and the Save / Discard bar are fixed to the top and bottom while the page scrolls under them, and the theme had made their backgrounds see-through, so the page's words ran across them. They are solid surfaces now (light and dark), under the planner's own frame. */
html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-subtabs { background: rgba(243, 245, 249, 0.76) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }
html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-sticky-save { background: rgba(255, 255, 255, 0.82) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-subtabs { background: rgba(18, 22, 42, 0.68) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-sticky-save { background: rgba(23, 27, 43, 0.74) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; border-color: rgba(255, 255, 255, 0.14) !important; }
html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-bk-table > thead > tr > th, html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-bk-table > tbody > tr > td.ep-bk-first, html:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-bk-table > tbody > tr > td.ep-bk-rowtools { background-clip: padding-box; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-bk-table > thead > tr > th { background: rgba(24, 28, 46, 0.76) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-bk-table > tbody > tr > td.ep-bk-first, html[data-glass-theme="dark"]:not(.glass-off):not(#g-ep1):not(#g-ep2):not(#g-ep3):not(#g-ep4):not(#g-ep5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-bk-table > tbody > tr > td.ep-bk-rowtools { background: rgba(20, 24, 41, 0.78) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }

/* §205b the chosen sub-tab (brand yellow) keeps its dark label in dark mode: it was light text on yellow (1.4 : 1) on the Events / Venues strip of the planner. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ep6):not(#g-ep7):not(#g-ep8):not(#g-ep9):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-subtab[aria-selected="true"], .ep-subtab[aria-selected="true"] *) { color: #14172b !important; -webkit-text-fill-color: #14172b !important; }

/* �206 EVENT PLANNER, dark mode (owner 2026-10-21): (a) a chosen sub-tab can be marked aria-pressed (Events / Venues, Families / Table, Overview / Costs ...), not only aria-selected: it kept a light label on the brand yellow (1.4 : 1) until a later pass fixed some of them. The dark label is set here, so it is right at once. (b) the seat map and the plan editor are drawn for a light sheet of paper (dark labels, light areas, white Stairs / Screen shapes), so on the dark glass the row letters, seat numbers, "Ground Hall", "Sound desk" and "Exit" were dark grey on dark. The map sits on a light paper-grey canvas in dark mode too. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-eq1):not(#g-eq2):not(#g-eq3):not(#g-eq4):not(#g-eq5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-subtab[aria-pressed="true"], .ep-subtab[aria-pressed="true"] *) { color: #14172b !important; -webkit-text-fill-color: #14172b !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-eq1):not(#g-eq2):not(#g-eq3):not(#g-eq4):not(#g-eq5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-sv-stage, html[data-glass-theme="dark"]:not(.glass-off):not(#g-eq1):not(#g-eq2):not(#g-eq3):not(#g-eq4):not(#g-eq5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ep-ed-stage { background: #e9edf3 !important; border-color: rgba(255, 255, 255, 0.18) !important; }

/* �207 FAMILY BOOKING PAGE (event.html), dark mode, owner 2026-10-21: the seat map is drawn for a light sheet of paper (navy seats, dark row letters and seat numbers, "Ground Hall", legend words), but it sat straight on the dark glass, so the numbers, labels and seats nearly disappeared. The map's own picture gets a light paper-grey sheet with rounded corners; the list view of the same box is not touched. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-ev1):not(#g-ev2):not(#g-ev3):not(#g-ev4):not(#g-ev5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .ev-map > svg { background: #e9edf3; border-radius: 12px; }

/* �209 PAPER IN THE EVENT PLANNER (owner 2026-10-21: "the programme should be white background because it's paper"): the printed programme / awards list and the document previews (receipts, invoices) show what will be printed, so they are a white sheet with dark print in dark mode too, not glass. */
html:not(.glass-off):not(#g-pp1):not(#g-pp2):not(#g-pp3):not(#g-pp4):not(#g-pp5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-pg-paper, .ep-dc-paper) { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: rgba(20, 23, 43, 0.14) !important; }
html:not(.glass-off):not(#g-pp1):not(#g-pp2):not(#g-pp3):not(#g-pp4):not(#g-pp5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-pg-paper, .ep-dc-paper), html:not(.glass-off):not(#g-pp1):not(#g-pp2):not(#g-pp3):not(#g-pp4):not(#g-pp5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-pg-paper, .ep-dc-paper) * { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; --text-dark: #1f2937; --text-muted: #6b7280; }
html:not(.glass-off):not(#g-pp1):not(#g-pp2):not(#g-pp3):not(#g-pp4):not(#g-pp5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-pg-paper, .ep-dc-paper) :is(small, .pg-muted, .pg-sub) { color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; }
html:not(.glass-off):not(#g-pp1):not(#g-pp2):not(#g-pp3):not(#g-pp4):not(#g-pp5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-pg-paper, .ep-dc-paper) :is(table, td, th, tr) { background-color: transparent !important; border-color: rgba(20, 23, 43, 0.16) !important; }

/* �210 THE BOOKLET'S PAGES ARE PAPER (owner 2026-10-21): the flip-book pages of the programme booklet (staff preview and the family programme page) are white sheets with dark print in dark mode too. The theme's text colours are re-pointed to dark ink inside a page, so the words drawn on it read as printed. */
html:not(.glass-off):not(#g-bk1):not(#g-bk2):not(#g-bk3):not(#g-bk4):not(#g-bk5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.pf-leaf, .pf-page) { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --text-dark: #1f2937; --text-muted: #6b7280; }
html:not(.glass-off):not(#g-bk1):not(#g-bk2):not(#g-bk3):not(#g-bk4):not(#g-bk5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.pf-leaf, .pf-page) :is(h1, h2, h3, h4, h5, p, span, div, li, td, th, b, strong, em, small):not([style*="color"]) { color: #1f2937; -webkit-text-fill-color: currentColor; }

/* �211 STICKY GLASS STRIPS NEED A CLEAN BACKDROP (owner 2026-10-21: "still not blurred, the text at the back is sharp"): reproduced with a copy of the page - Chrome only blurs what is behind a frosted strip when none of the boxes AROUND the strip is itself a frosted (backdrop-filter) box; inside a frosted card the strip's blur does nothing and the words scroll across it sharp. So the boxes that hold a sticky strip or bar (the planner's sub-tab strips, Save bar and bookings table, the mail editor's toolbar and Save bar) are plain tinted glass without their own blur, and the strip does the blurring. Their look hardly changes: what sits behind them is the smooth glow. */
html:not(.glass-off):not(#g-nb1):not(#g-nb2):not(#g-nb3):not(#g-nb4):not(#g-nb5):not(#g-nb6):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(*):has(.ep-subtabs, .ep-sticky-save, .ep-bk-table, .mb-actionbar, .mb-blocktools) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not(.glass-off):not(#g-nb1):not(#g-nb2):not(#g-nb3):not(#g-nb4):not(#g-nb5):not(#g-nb6):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.ep-subtabs, .ep-sticky-save, .mb-actionbar, .mb-blocktools, .ep-bk-table > thead > tr > th) { -webkit-backdrop-filter: blur(32px) saturate(170%) !important; backdrop-filter: blur(32px) saturate(170%) !important; }

/* �212 MAIL EDITOR SETTINGS BUTTONS ARE GLASS (owner 2026-10-21: the Line up / Room above and below choices were solid white): the page paints these small choice buttons #fff with an ID rule that out-ranked the theme. They are see-through glass now in both themes (the chosen one stays brand yellow), and the pale hover colours the page uses (cream) are a soft yellow tint in dark mode. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-seg button:not(.on), html[data-glass-portal="admin"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-lyr-acts .mb-icon, html[data-glass-portal="admin"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-pcol-x:disabled { background: rgba(255, 255, 255, 0.5) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-seg button:not(.on):hover { background: rgba(255, 255, 255, 0.78) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-seg button:not(.on), html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-lyr-acts .mb-icon, html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-pcol-x:disabled { background: rgba(255, 255, 255, 0.08) !important; color: #eceef4 !important; border-right-color: rgba(255, 255, 255, 0.14) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-seg button:not(.on):hover { background: rgba(255, 255, 255, 0.16) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox :is(.mb-pbtn, .mb-chip, .mb-mergesel, .mb-ideabtn, .mb-looksbtn):hover { background: rgba(255, 193, 0, 0.16) !important; color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sg1):not(#g-sg2):not(#g-sg3):not(#g-sg4):not(#g-sg5):not(#g-sg6) #view-mailbox .mb-seg { border-color: rgba(255, 255, 255, 0.18) !important; }

/* �213 MAIL EDITOR PANEL FIELDS ARE GLASS (owner 2026-10-21, the Buttons panel: Shape, Words size, steppers): the number box, its up/down steppers and the Shape choice row were painted solid white by ID rules in the page. See-through glass now, with readable text, in both themes; the chosen choice stays brand yellow. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox :is(.mb-pnum, .mb-pseg) { background: rgba(255, 255, 255, 0.5) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox :is(.mb-psteps button, .mb-pseg button:not(.on)) { background: rgba(255, 255, 255, 0.4) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox :is(.mb-psteps button, .mb-pseg button:not(.on)):hover { background: rgba(255, 255, 255, 0.72) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox :is(.mb-pnum, .mb-pseg) { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.18) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox :is(.mb-psteps button, .mb-pseg button:not(.on)) { background: rgba(255, 255, 255, 0.07) !important; color: #eceef4 !important; border-color: rgba(255, 255, 255, 0.14) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox :is(.mb-psteps button, .mb-pseg button:not(.on)):hover { background: rgba(255, 255, 255, 0.16) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox .mb-pnum input { color: #eceef4 !important; -webkit-text-fill-color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox .mb-pnum input::placeholder { color: rgba(236, 238, 244, 0.5) !important; -webkit-text-fill-color: rgba(236, 238, 244, 0.5) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox .mb-pnum-unit { color: rgba(236, 238, 244, 0.6) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-sh1):not(#g-sh2):not(#g-sh3):not(#g-sh4):not(#g-sh5):not(#g-sh6) #view-mailbox .mb-psteps { border-left-color: rgba(255, 255, 255, 0.14) !important; }

/* �214 MAIL EDITOR, DARK MODE: the theme already described dark surfaces for these controls (see the zero-weight rules above), but the page's own #view-mailbox rules (white backgrounds) out-ranked them, so the cream and white came through. The same surfaces are re-stated here with real weight (owner 2026-10-21: "this also is still white solid"). Generated from those rules, minus the ones restyled above. */
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-lyr-add select,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-lyr-foot select,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pcol-sw,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pcol-x,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pcol-x:disabled,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pbtn:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-chip,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-chip:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-mergesel:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-field input[type="text"],
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-field textarea,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-block,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-icon:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-settings,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-formpick,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-askmelo,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-lookideas,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-lookscard,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-look:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-parttools,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-partsize,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-blockgrip,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-sizefield,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-steps button,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-steps button:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-colourbtn,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-colourbtn:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-replywrap,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-replyhead { background-color: var(--g-surface) !important; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-tab:not(.on),
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-btn:not(.primary),
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox input.mb-ptext,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pbtn,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-mergesel,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-icon,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-ideabtn,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-ideabtn:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-look,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-looksbtn { background-color: var(--g-surface) !important; color: var(--text-dark) !important; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-camprow[aria-busy="true"],
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-save.dirty,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-save.saving,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-save.held,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-lyr-row.is-on,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-cnote.busy { background-color: rgba(255,193,0,0.14) !important; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-save.saved,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-cnote.good { background-color: rgba(80,205,137,0.12) !important; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-save.bad,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pcol-x:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pbtn.danger:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-icon.danger:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-draftwarn,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-cnote.bad { background-color: rgba(241,65,108,0.12) !important; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-thread.unread .who,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-thread.unread .subj,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pcol-hex,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-pphoto,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-formrow,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-parttools button:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-partsize:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-blockgrip:hover,
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-replyx:hover { color: var(--text-dark) !important; }
html[data-glass-theme="dark"][data-glass-portal="admin"]:not(.glass-off):not(#g-wh1):not(#g-wh2):not(#g-wh3):not(#g-wh4):not(#g-wh5):not(#g-wh6) #view-mailbox .mb-looksbtn:hover { background-color: rgba(255,193,0,0.14) !important; color: var(--text-dark) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-px1):not(#g-px2):not(#g-px3):not(#g-px4):not(#g-px5) #view-mailbox :is(.mb-pcol-x, .mb-pcol-sw) { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #eceef4 !important; }

/* �215 MAIL EDITOR TOOLBAR, DARK MODE (owner 2026-10-21: "these controls have a contrast problem"): the bar was a light sheet while its buttons (B I U, lists, alignment, the size box) are dark-mode controls with light symbols, so they faded into it. The bar is dark frosted glass in dark mode (light in light mode), and its fields keep light text. */
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools { background: rgba(20, 24, 38, 0.82) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools :is(input.mb-sizenum, input.mb-colourin, select.mb-fontsel, select.mb-tmerge) { background-color: rgba(255, 255, 255, 0.08) !important; color: #eceef4 !important; -webkit-text-fill-color: #eceef4 !important; border-color: rgba(255, 255, 255, 0.18) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools input.mb-sizenum::placeholder { color: rgba(236, 238, 244, 0.5) !important; -webkit-text-fill-color: rgba(236, 238, 244, 0.5) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools :is(button, .mb-icon, .mb-steps button) { color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools :is(button, .mb-icon, .mb-steps button) i { color: inherit !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools :is(button:not(.on):not(.primary), .mb-steps button, .mb-icon) { background-color: rgba(255, 255, 255, 0.08) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools button.on { background-color: var(--brand, #ffc100) !important; color: #14172b !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-tb1):not(#g-tb2):not(#g-tb3):not(#g-tb4):not(#g-tb5):not(#g-tb6) #view-mailbox .mb-blocktools button.on i { color: #14172b !important; }

/* �216 MAIL PAGE (owner 2026-10-21): (a) the chosen tab and the Compose button (primary) stay brand yellow with a dark label - the re-stated dark surfaces above had painted them dark with dark text; (b) "Melo 's replies" / "Updates  to families" had a gap between the word and its tail on the tabs (the theme's button gap), now none. */
html[data-glass-portal="admin"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4):not(#g-st5) #view-mailbox .mb-tab { gap: 0 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4):not(#g-st5) #view-mailbox :is(.mb-tab.on, .mb-btn.primary) { background-color: var(--brand, #ffc100) !important; border-color: var(--brand, #ffc100) !important; color: #181c32 !important; -webkit-text-fill-color: #181c32 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-st1):not(#g-st2):not(#g-st3):not(#g-st4):not(#g-st5) #view-mailbox :is(.mb-tab.on, .mb-btn.primary) * { color: #181c32 !important; -webkit-text-fill-color: #181c32 !important; }

/* �217 TOOLBAR WORDS (owner 2026-10-21: "WORDS stays black"): the bar's own captions ("WORDS", the "px" next to the size) were black on the now dark bar; they are light grey. The text-colour button shows a letter in the colour that will be used (it may be dark), so it keeps a light chip behind it in dark mode. */
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5):not(#g-lb6) #view-mailbox .mb-blocktools *:not(button):not(button *):not(input):not(select):not(option):not(svg *):not(i) { color: #c5cbdd !important; -webkit-text-fill-color: #c5cbdd !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5):not(#g-lb6) #view-mailbox .mb-blocktools .mb-colourbtn { background-color: #f3f5f9 !important; border-color: rgba(255, 255, 255, 0.3) !important; }

/* �218 MAIL EDITOR ZOOM ROW (owner 2026-10-21): "Fit the whole email" / "Actual size" had dark text on dark glass: the theme's own text-fill colour (set by its dark-ink pass) kept the words dark although the colour was light. Text fill is set too, so the words read. */
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-zm1):not(#g-zm2):not(#g-zm3):not(#g-zm4):not(#g-zm5):not(#g-zm6) #view-mailbox .mb-zoombar :is(.mb-btn, .mb-icon, .mb-zoomlevel), html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-zm1):not(#g-zm2):not(#g-zm3):not(#g-zm4):not(#g-zm5):not(#g-zm6) #view-mailbox .mb-zoombar :is(.mb-btn, .mb-icon) * { color: #eceef4 !important; -webkit-text-fill-color: #eceef4 !important; opacity: 1 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-zn1):not(#g-zn2):not(#g-zn3):not(#g-zn4):not(#g-zn5):not(#g-zn6) #view-mailbox :is(.mb-btn, .mb-icon, .mb-tab).g-ink-dark:not(.primary):not(.on):not(.danger), html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-zn1):not(#g-zn2):not(#g-zn3):not(#g-zn4):not(#g-zn5):not(#g-zn6) #view-mailbox :is(.mb-btn, .mb-icon, .mb-tab).g-ink-dark:not(.primary):not(.on):not(.danger) * { color: #eceef4 !important; -webkit-text-fill-color: #eceef4 !important; }

/* �219 MAIL EDITOR TEXT THAT WAS BLACK (found by scanning the editor with a block selected, owner 2026-10-21 "there might be more parts I have not seen"): the layer list's one-line previews, the settings headings (Layout, Look, Where it stands...), the field labels, the hints and the switch labels are written black-on-transparent by the page, and only turned light by the theme's colour pass a moment later, so they showed black (1.1 : 1) first. They are light from the first frame now. The "off" switch track was a solid light grey: glass. */
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox .mb-lyr-snip { color: rgba(236, 238, 244, 0.62) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox .mb-set-h { color: rgba(236, 238, 244, 0.7) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox :is(.mb-pf-lbl, .mb-pnum-unit) { color: rgba(236, 238, 244, 0.78) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox :is(.mb-set-hint, .mb-pwarn) { color: rgba(236, 238, 244, 0.66) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox .mb-pswitch .mb-pswlab { color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox .mb-set-crumbs button { color: #e6c15a !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox .mb-set-crumbs :is(b, span) { color: #eceef4 !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox .mb-lyr-row :is(span, i):not(.mb-lyr-snip) { color: inherit; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox :is(.mb-ptrack, .sd-switch):not(.on) { background-color: rgba(255, 255, 255, 0.2) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml1):not(#g-ml2):not(#g-ml3):not(#g-ml4):not(#g-ml5):not(#g-ml6) #view-mailbox input:checked + :is(.mb-ptrack, .sd-switch) { background-color: var(--brand, #ffc100) !important; }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(#g-ml7):not(#g-ml8):not(#g-ml9):not(#g-ma1):not(#g-ma2):not(#g-ma3) #view-mailbox .mb-set-crumbs { color: rgba(236, 238, 244, 0.6) !important; }

/* �220 FILE STORAGE FOLDER TILES: glass in both themes, from the first frame and after hover (owner 2026-10-21: "the hover is white and it does not subside"). */
html:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-tile { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
html:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-ico { background: rgba(255, 193, 0, 0.18); }
html:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-tile:hover { background: rgba(255, 255, 255, 0.72); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-tile { background: var(--g-surface, rgba(30, 36, 52, 0.3)); color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-tile * { color: inherit; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-tile:hover { background: rgba(255, 255, 255, 0.1); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-ico { background: rgba(255, 193, 0, 0.16); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-sf1):not(#g-sf2):not(#g-sf3):not(#g-sf4):not(#g-sf5):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) .st-folder-ico i { color: #ffc100 !important; }

/* �221 DESKTOP CHAT BOX AND COMPOSE WIDGET: real frosted glass (owner 2026-10-21: "I can't see the colors of the back elements"). They were an 88% solid tint, so what is behind them did not show. Now a light tint over a strong blur with the colours pushed up, so the colours of the page behind show through as soft washes, like the side menu; the areas inside them stay see-through so the blur is not covered up. The phone layout keeps its own picture backdrop. */
@media (min-width: 993px) {
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-panel, #adminChatPanel, #mpc-compose-panel, .mpc-compose-panel) { background-color: rgba(255, 255, 255, 0.34) !important; background-image: none !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-panel, #adminChatPanel, #mpc-compose-panel, .mpc-compose-panel) { background-color: rgba(14, 18, 32, 0.38) !important; background-image: none !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-panel, #adminChatPanel) :is(.chat-directory, #chatDirectoryWrapper, #chatDirectory) { background: transparent !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-panel, #adminChatPanel) .chat-body { background-color: rgba(14, 17, 28, 0.2) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-panel, #adminChatPanel) .chat-footer { background-color: rgba(20, 24, 38, 0.3) !important; }
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.chat-panel, #adminChatPanel) :is(.chat-directory, #chatDirectoryWrapper, #chatDirectory) { background: transparent !important; }
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-theme="dark"]) :is(.chat-panel, #adminChatPanel) .chat-body { background-color: rgba(255, 255, 255, 0.18) !important; }
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6):not(#g-cb7):not(#g-cb8):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-theme="dark"]) :is(.chat-panel, #adminChatPanel) .chat-footer { background-color: rgba(255, 255, 255, 0.4) !important; }
}

/* �222 PARENTS PORTAL, DESKTOP: the chat button sat 96px up (it is lifted over the phone's bottom bar), which is exactly where the open chat box stands (bottom 90px), so opening the chat covered its own button (owner 2026-10-21). On desktop the bottom bar is a narrow pill in the middle, so the chat button goes to the corner, 20px from the bottom, and the open box rises above it. Phones and tablets are unchanged. */
@media (min-width: 993px) {
  html[data-glass-portal="parents"]:not(.glass-off):not(#g-fb1):not(#g-fb2):not(#g-fb3):not(#g-fb4):not(#g-fb5) .fab-container { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  html[data-glass-portal="parents"]:not(.glass-off):not(#g-fb1):not(#g-fb2):not(#g-fb3):not(#g-fb4):not(#g-fb5) .chat-panel { bottom: calc(20px + 55px + 15px + env(safe-area-inset-bottom)) !important; max-height: calc(100vh - 120px); }
}

/* �223 PARENTS PORTAL CHAT BOX: the frosted glass of �221 at every width, not only on desktop (owner 2026-10-21: "use the blurry background there too"). A narrow desktop window or a tablet-sized window got the old near-solid tint. iPhone / iPad Safari (the .glass-mobile class) keeps its picture backdrop: live blur of that size crashes Safari there. */
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel { background-color: rgba(255, 255, 255, 0.34) !important; background-image: none !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel { background-color: rgba(14, 18, 32, 0.38) !important; background-image: none !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel :is(.chat-directory, #chatDirectoryWrapper, #chatDirectory) { background: transparent !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel .chat-body { background-color: rgba(255, 255, 255, 0.18) !important; }
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel .chat-footer { background-color: rgba(255, 255, 255, 0.4) !important; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel .chat-body { background-color: rgba(14, 17, 28, 0.2) !important; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-pq1):not(#g-pq2):not(#g-pq3):not(#g-pq4):not(#g-pq5):not(#g-pq6):not(#g-pq7):not(#g-pq8) .chat-panel .chat-footer { background-color: rgba(20, 24, 38, 0.3) !important; }

/* �224 PARENTS PORTAL CHAT BOX ON iPHONE / iPAD (owner 2026-10-21: "in mobile and tablet layout"): frosted glass there too instead of the picture backdrop. It is ONE blurred layer (26px, a little lighter than desktop), and while the chat is open nothing else on the page keeps a blur of its own - the same rule dialogs follow (see the dialog notes above) - so Safari has a single layer to draw and does not run out of memory. */
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel { background-color: rgba(255, 255, 255, 0.4) !important; background-image: none !important; -webkit-backdrop-filter: blur(26px) saturate(190%) !important; backdrop-filter: blur(26px) saturate(190%) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel { background-color: rgba(14, 18, 32, 0.44) !important; background-image: none !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel :is(.chat-directory, #chatDirectoryWrapper, #chatDirectory) { background: transparent !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel .chat-body { background-color: rgba(255, 255, 255, 0.18) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel .chat-footer { background-color: rgba(255, 255, 255, 0.45) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel .chat-body { background-color: rgba(14, 17, 28, 0.2) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4) .chat-panel .chat-footer { background-color: rgba(20, 24, 38, 0.34) !important; }
html.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile.glass-mobile[data-glass-portal="parents"]:not(.glass-off):not(#g-pr1):not(#g-pr2):not(#g-pr3):not(#g-pr4).g-chat-open :not(.chat-panel):not(.chat-panel *):not(#mpcBugOverlay):not(#mpcBugOverlay *):not(.modal-overlay):not(.modal-overlay *) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* �225 FAMILY BOOKING PAGE: the same glass as the portals (owner 2026-10-21: "apply the same glass theme here"). (a) the page drew two small 300px blobs of its own, which squeezed the theme's glow picture into a 300px square, so the page looked flat and white; the glow now fills the screen, like the staff sign-in page. (b) its cards were a 78% white sheet; they are lighter glass now (about 46% over a stronger blur) so the glow shows through them. */
html[data-glass-portal="public"]:not(.glass-off):not(#g-ev1):not(#g-ev2):not(#g-ev3):not(#g-ev4):not(#g-ev5):not(#g-ev6) body:has(.ev-wrap)::before { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; filter: none !important; opacity: 1 !important; animation: none !important; transform: none !important; border-radius: 0 !important; z-index: -1 !important; }
html[data-glass-portal="public"]:not(.glass-off):not(#g-ev1):not(#g-ev2):not(#g-ev3):not(#g-ev4):not(#g-ev5):not(#g-ev6) body:has(.ev-wrap)::after { display: none !important; }
html[data-glass-portal="public"]:not(.glass-off):not(#g-ev1):not(#g-ev2):not(#g-ev3):not(#g-ev4):not(#g-ev5):not(#g-ev6) .ev-card { background-color: rgba(255, 255, 255, 0.46) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; border-color: rgba(255, 255, 255, 0.7) !important; }
html[data-glass-portal="public"][data-glass-theme="dark"]:not(.glass-off):not(#g-ev1):not(#g-ev2):not(#g-ev3):not(#g-ev4):not(#g-ev5):not(#g-ev6) .ev-card { background-color: rgba(18, 22, 38, 0.46) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
html[data-glass-portal="public"]:not(.glass-off):not(#g-ev1):not(#g-ev2):not(#g-ev3):not(#g-ev4):not(#g-ev5):not(#g-ev6) .ev-tab:not([aria-pressed="true"]):not(.on):not(.is-on) { background-color: rgba(255, 255, 255, 0.5); }

/* �226 COMPOSE WIDGET CONTENT (owner 2026-10-21: "compose content still not blurry enough"): the panel itself was glass, but the area that holds the forms (#mpc-compose-body) was painted solid white by the page, so the glow and the blur stopped at the top bar. It is see-through now, and the fields in it are light glass instead of white boxes. */
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4):not(#g-cm5):not(#g-cm6):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) #mpc-compose-body { background: transparent !important; background-color: transparent !important; }
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4):not(#g-cm5):not(#g-cm6):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-theme="dark"]) #mpc-compose-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { background-color: rgba(255, 255, 255, 0.5) !important; border-color: rgba(255, 255, 255, 0.75) !important; }
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-cm1):not(#g-cm2):not(#g-cm3):not(#g-cm4):not(#g-cm5):not(#g-cm6):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-theme="dark"]) #mpc-compose-body input[type="file"] { background-color: rgba(255, 255, 255, 0.4) !important; border-radius: 12px; }


/* §228 a fading old profile copy never carries blurs: its blurred children made every frame of the fade re-blur the whole copy */
.mpc-ghost-pane, .mpc-ghost-pane * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* §229 desktop: the student page holds thousands of elements (session rows); rows below the fold are not laid out or drawn until scrolled near (as phones already do). A row whose menu is open is drawn in full so the menu is not clipped. */
html:not(.glass-mobile):not(.glass-off) #view-search .lesson-item { content-visibility: auto; contain-intrinsic-size: auto 340px; }
html:not(.glass-mobile):not(.glass-off) #view-search .lesson-item:has(.show, .open, .active, :focus-within) { content-visibility: visible; }

/* §227 framed pages in the portal (light): a blur cannot see the portal behind a frame, so the panels are made see-through instead (the portal glow shows through them) rather than near-white. */
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-eb1):not(#g-eb2):not(#g-eb3):not(#g-eb4):not(#g-eb5):not(#g-eb6):not(#g-eb7):not(#g-eb8):not(#g-eb9):not(#g-eb10):not(#g-eb11):not(#g-eb12):not(#g-eb13):not(#g-eb14):not(#g-eb15):not(#g-eb16):not(#g-eb17):not(#g-eb18):not(#g-eb19):not(#g-eb20):not(#g-eb21):not(#g-eb22):not(#g-eb23):not(#g-eb24):not(#g-eb25):not(#g-eb26):not(#g-eb27):not(#g-eb28):not(#g-eb29):not(#g-eb30):not(#g-eb31):not(#g-eb32):not(#g-eb33):not(#g-eb34):not(#g-eb35):not(#g-eb36):not(#g-eb37):not(#g-eb38):not(#g-eb39):not(#g-eb40):not(#g-eb41):not(#g-eb42):not(#g-eb43):not(#g-eb44):not(#g-eb45):not(#g-eb46):not(#g-eb47):not(#g-eb48):not([data-glass-theme="dark"]) :is(#parentTabs, .filters, #filters, #fQ, #fLevel, #fInstr, #btnWatchDl, #browseCard, .tabs, .toolbar, .card) { background-color: rgba(255, 255, 255, 0.34) !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-eb1):not(#g-eb2):not(#g-eb3):not(#g-eb4):not(#g-eb5):not(#g-eb6):not(#g-eb7):not(#g-eb8):not(#g-eb9):not(#g-eb10):not(#g-eb11):not(#g-eb12):not(#g-eb13):not(#g-eb14):not(#g-eb15):not(#g-eb16):not(#g-eb17):not(#g-eb18):not(#g-eb19):not(#g-eb20):not(#g-eb21):not(#g-eb22):not(#g-eb23):not(#g-eb24):not(#g-eb25):not(#g-eb26):not(#g-eb27):not(#g-eb28):not(#g-eb29):not(#g-eb30):not(#g-eb31):not(#g-eb32):not(#g-eb33):not(#g-eb34):not(#g-eb35):not(#g-eb36):not(#g-eb37):not(#g-eb38):not(#g-eb39):not(#g-eb40):not(#g-eb41):not(#g-eb42):not(#g-eb43):not(#g-eb44):not(#g-eb45):not(#g-eb46):not(#g-eb47):not(#g-eb48):not([data-glass-theme="dark"]) :is(#fQ, #fLevel, #fInstr, #btnWatchDl, select, input[type="text"], input[type="search"]) { background-color: rgba(255, 255, 255, 0.46) !important; }

/* §230 DESKTOP admin split pages (owner 2026-10-21: the left list still moved when the right side scrolled): the split view is exactly one screen tall; the list stays where it is and the right side scrolls inside its own box, so neither depends on position:sticky. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section > .split-view { height: calc(100vh - var(--g-cwtop, 70px) - 44px); align-items: stretch; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section:has(> .ds-subtabs) > .split-view { height: calc(100vh - var(--g-cwtop, 70px) - 50px - 44px); }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section > .split-view > .split-list { position: relative !important; top: 0 !important; height: 100%; max-height: none !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section > .split-view > .split-detail { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 4px; }
}

/* §231 the right side of a split page is its own scroll box: rounded corners so its top and bottom edges are curved, not cut straight */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section > .split-view > .split-detail { border-radius: 22px; }
}

/* §232 twin-view pages in the teacher / parents / partner portals (owner 2026-10-21: all twin views like Student Records): one screen tall, left list stays, right side scrolls in its own curved box. --g-svtop (set by glass-mode.js) is where the split view starts on the page. */
@media (min-width: 993px) {
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail),
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail),
html[data-glass-portal="partner"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) { height: calc(100vh - var(--g-svtop, 150px) - 24px); align-items: stretch; }
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) > .split-list,
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) > .split-list,
html[data-glass-portal="partner"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) > .split-list { position: relative !important; top: 0 !important; height: 100%; max-height: none !important; }
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) > .split-detail,
html[data-glass-portal="parents"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) > .split-detail,
html[data-glass-portal="partner"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fy1):not(#g-fy2):not(#g-fy3):not(#g-fy4):not(#g-fy5) .split-view:has(> .split-detail) > .split-detail { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 4px; border-radius: 22px; }
}

/* §233 admin: a split view with only a list (no detail) keeps its own layout */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section > .split-view:not(:has(> .split-detail)) { height: auto; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-fx1):not(#g-fx2):not(#g-fx3):not(#g-fx4):not(#g-fx5) .view-section > .split-view:not(:has(> .split-detail)) > .split-list { position: sticky !important; top: 90px !important; height: auto; max-height: calc(100vh - 110px) !important; }
}

/* §234 framed pages, light: even more see-through (owner: still looks solid). The frame cannot blur the portal behind it, so the panels carry very little white and the sheen is faint. */
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ec1):not(#g-ec2):not(#g-ec3):not(#g-ec4):not(#g-ec5):not(#g-ec6):not(#g-ec7):not(#g-ec8):not(#g-ec9):not(#g-ec10):not(#g-ec11):not(#g-ec12):not(#g-ec13):not(#g-ec14):not(#g-ec15):not(#g-ec16):not(#g-ec17):not(#g-ec18):not(#g-ec19):not(#g-ec20):not(#g-ec21):not(#g-ec22):not(#g-ec23):not(#g-ec24):not(#g-ec25):not(#g-ec26):not(#g-ec27):not(#g-ec28):not(#g-ec29):not(#g-ec30):not(#g-ec31):not(#g-ec32):not(#g-ec33):not(#g-ec34):not(#g-ec35):not(#g-ec36):not(#g-ec37):not(#g-ec38):not(#g-ec39):not(#g-ec40):not(#g-ec41):not(#g-ec42):not(#g-ec43):not(#g-ec44):not(#g-ec45):not(#g-ec46):not(#g-ec47):not(#g-ec48):not(#g-ec49):not(#g-ec50):not(#g-ec51):not(#g-ec52):not(#g-ec53):not(#g-ec54):not(#g-ec55):not(#g-ec56):not([data-glass-theme="dark"]) :is(#parentTabs, .filters, #filters, #browseCard, .tabs, .toolbar, .card) { background-color: rgba(255, 255, 255, 0.16) !important; background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)) !important; border-color: rgba(255, 255, 255, 0.5) !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ec1):not(#g-ec2):not(#g-ec3):not(#g-ec4):not(#g-ec5):not(#g-ec6):not(#g-ec7):not(#g-ec8):not(#g-ec9):not(#g-ec10):not(#g-ec11):not(#g-ec12):not(#g-ec13):not(#g-ec14):not(#g-ec15):not(#g-ec16):not(#g-ec17):not(#g-ec18):not(#g-ec19):not(#g-ec20):not(#g-ec21):not(#g-ec22):not(#g-ec23):not(#g-ec24):not(#g-ec25):not(#g-ec26):not(#g-ec27):not(#g-ec28):not(#g-ec29):not(#g-ec30):not(#g-ec31):not(#g-ec32):not(#g-ec33):not(#g-ec34):not(#g-ec35):not(#g-ec36):not(#g-ec37):not(#g-ec38):not(#g-ec39):not(#g-ec40):not(#g-ec41):not(#g-ec42):not(#g-ec43):not(#g-ec44):not(#g-ec45):not(#g-ec46):not(#g-ec47):not(#g-ec48):not(#g-ec49):not(#g-ec50):not(#g-ec51):not(#g-ec52):not(#g-ec53):not(#g-ec54):not(#g-ec55):not(#g-ec56):not([data-glass-theme="dark"]) :is(#fQ, #fLevel, #fInstr, #fInstrument, #btnWatchDl, select, input[type="text"], input[type="search"]) { background-color: rgba(255, 255, 255, 0.3) !important; }

/* §235 every framed page (Invoices, Accounting, Expenses, Bug Center, Classroom Monitor, Event Planner...), light: near-white panels (found by the theme as .g-solid-white, plus cards / panels / stat boxes) become the same very see-through glass as the Sheet Library, since a frame cannot blur the portal behind it. Dialogs and menus keep their readable fill. */
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ed1):not(#g-ed2):not(#g-ed3):not(#g-ed4):not(#g-ed5):not(#g-ed6):not(#g-ed7):not(#g-ed8):not(#g-ed9):not(#g-ed10):not(#g-ed11):not(#g-ed12):not(#g-ed13):not(#g-ed14):not(#g-ed15):not(#g-ed16):not(#g-ed17):not(#g-ed18):not(#g-ed19):not(#g-ed20):not(#g-ed21):not(#g-ed22):not(#g-ed23):not(#g-ed24):not(#g-ed25):not(#g-ed26):not(#g-ed27):not(#g-ed28):not(#g-ed29):not(#g-ed30):not(#g-ed31):not(#g-ed32):not(#g-ed33):not(#g-ed34):not(#g-ed35):not(#g-ed36):not(#g-ed37):not(#g-ed38):not(#g-ed39):not(#g-ed40):not(#g-ed41):not(#g-ed42):not(#g-ed43):not(#g-ed44):not(#g-ed45):not(#g-ed46):not(#g-ed47):not(#g-ed48):not(#g-ed49):not(#g-ed50):not(#g-ed51):not(#g-ed52):not(#g-ed53):not(#g-ed54):not(#g-ed55):not(#g-ed56):not([data-glass-theme="dark"]) :is(.g-solid-white, .card, .panel, .stat-card, .stat-box, .kpi-card, .box, .section, .table-wrap, .table-container, .ledger-container, .filter-bar, .toolbar, .summary-card, [class*="-card"]:not(button)):not(button):not(input):not(select):not(textarea):not(.btn):not([class*="btn-"]):not(.badge):not(:is(.modal-overlay, .modal, .modal-content, .modal-card, [role="dialog"], .swal2-popup, .kebab-dropdown, .dropdown-menu, select, option) *):not(.modal-content):not(.modal-card):not([role="dialog"]):not(.kebab-dropdown) { background-color: rgba(255, 255, 255, 0.18) !important; background-image: none !important; border-color: rgba(255, 255, 255, 0.5) !important; }

/* §236 framed pages, light: headers, tab bars, chart boxes, inputs, selects and white buttons follow the same very see-through glass (paper and dialogs excluded). */
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ee1):not(#g-ee2):not(#g-ee3):not(#g-ee4):not(#g-ee5):not(#g-ee6):not(#g-ee7):not(#g-ee8):not(#g-ee9):not(#g-ee10):not(#g-ee11):not(#g-ee12):not(#g-ee13):not(#g-ee14):not(#g-ee15):not(#g-ee16):not(#g-ee17):not(#g-ee18):not(#g-ee19):not(#g-ee20):not(#g-ee21):not(#g-ee22):not(#g-ee23):not(#g-ee24):not(#g-ee25):not(#g-ee26):not(#g-ee27):not(#g-ee28):not(#g-ee29):not(#g-ee30):not(#g-ee31):not(#g-ee32):not(#g-ee33):not(#g-ee34):not(#g-ee35):not(#g-ee36):not(#g-ee37):not(#g-ee38):not(#g-ee39):not(#g-ee40):not(#g-ee41):not(#g-ee42):not(#g-ee43):not(#g-ee44):not(#g-ee45):not(#g-ee46):not(#g-ee47):not(#g-ee48):not(#g-ee49):not(#g-ee50):not(#g-ee51):not(#g-ee52):not(#g-ee53):not(#g-ee54):not(#g-ee55):not(#g-ee56):not([data-glass-theme="dark"]) :is(.navbar, .tab-nav, .chart-container, .input-group, .mobile-tab-toggle, .save-action-bar):not(.modal-content):not(:is(.modal-overlay, .modal, .modal-content, .modal-card, [role="dialog"], .kebab-dropdown, .dropdown-menu, #createInvoicePaper, .invoice-paper, .paper) *) { background-color: rgba(255, 255, 255, 0.2) !important; background-image: none !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ee1):not(#g-ee2):not(#g-ee3):not(#g-ee4):not(#g-ee5):not(#g-ee6):not(#g-ee7):not(#g-ee8):not(#g-ee9):not(#g-ee10):not(#g-ee11):not(#g-ee12):not(#g-ee13):not(#g-ee14):not(#g-ee15):not(#g-ee16):not(#g-ee17):not(#g-ee18):not(#g-ee19):not(#g-ee20):not(#g-ee21):not(#g-ee22):not(#g-ee23):not(#g-ee24):not(#g-ee25):not(#g-ee26):not(#g-ee27):not(#g-ee28):not(#g-ee29):not(#g-ee30):not(#g-ee31):not(#g-ee32):not(#g-ee33):not(#g-ee34):not(#g-ee35):not(#g-ee36):not(#g-ee37):not(#g-ee38):not(#g-ee39):not(#g-ee40):not(#g-ee41):not(#g-ee42):not(#g-ee43):not(#g-ee44):not(#g-ee45):not(#g-ee46):not(#g-ee47):not(#g-ee48):not(#g-ee49):not(#g-ee50):not(#g-ee51):not(#g-ee52):not(#g-ee53):not(#g-ee54):not(#g-ee55):not(#g-ee56):not([data-glass-theme="dark"]) :is(.custom-select-box, input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="email"], textarea, select, .btn:not(.btn-primary):not(.btn-danger):not(.btn-success)):not(.modal-content *):not(:is(.modal-overlay, .modal, .modal-content, .modal-card, [role="dialog"], .kebab-dropdown, .dropdown-menu, #createInvoicePaper, .invoice-paper, .paper) *) { background-color: rgba(255, 255, 255, 0.34) !important; }

/* §237 Mail (light, owner: still looks solid): the cards were 84% white; now about 40% so the glow shows through, the blur stays. Controls 50%. The email body itself (a real email) is not touched. */
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-lite):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5):not(#g-mb6):not([data-glass-theme="dark"]) #view-mailbox :is(.mb-card, .mb-list-card, .mb-reader, .mb-detail) { background: rgba(255, 255, 255, 0.4) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-lite):not(#g-mb1):not(#g-mb2):not(#g-mb3):not(#g-mb4):not(#g-mb5):not(#g-mb6):not([data-glass-theme="dark"]) #view-mailbox :is(.mb-btn:not(.primary), .mb-tabs, select, input[type="text"], input[type="search"], .mb-filterbar > *:not(.mb-btn.primary)) { background-color: rgba(255, 255, 255, 0.5) !important; }

/* §238 Bug Center (framed, light): the ticket card and its opened details were solid near-white. */
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ef1):not(#g-ef2):not(#g-ef3):not(#g-ef4):not(#g-ef5):not(#g-ef6):not(#g-ef7):not(#g-ef8):not(#g-ef9):not(#g-ef10):not(#g-ef11):not(#g-ef12):not(#g-ef13):not(#g-ef14):not(#g-ef15):not(#g-ef16):not(#g-ef17):not(#g-ef18):not(#g-ef19):not(#g-ef20):not(#g-ef21):not(#g-ef22):not(#g-ef23):not(#g-ef24):not(#g-ef25):not(#g-ef26):not(#g-ef27):not(#g-ef28):not(#g-ef29):not(#g-ef30):not(#g-ef31):not(#g-ef32):not(#g-ef33):not(#g-ef34):not(#g-ef35):not(#g-ef36):not(#g-ef37):not(#g-ef38):not(#g-ef39):not(#g-ef40):not(#g-ef41):not(#g-ef42):not(#g-ef43):not(#g-ef44):not(#g-ef45):not(#g-ef46):not(#g-ef47):not(#g-ef48):not(#g-ef49):not(#g-ef50):not(#g-ef51):not(#g-ef52):not(#g-ef53):not(#g-ef54):not(#g-ef55):not(#g-ef56):not([data-glass-theme="dark"]) :is(.ticket, .km-item, .bug-filters, .toolbar, .filters, .tabbar):not(.modal-content *) { background-color: rgba(255, 255, 255, 0.2) !important; background-image: none !important; }
html[data-glass-embedded][data-glass-blend]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ef1):not(#g-ef2):not(#g-ef3):not(#g-ef4):not(#g-ef5):not(#g-ef6):not(#g-ef7):not(#g-ef8):not(#g-ef9):not(#g-ef10):not(#g-ef11):not(#g-ef12):not(#g-ef13):not(#g-ef14):not(#g-ef15):not(#g-ef16):not(#g-ef17):not(#g-ef18):not(#g-ef19):not(#g-ef20):not(#g-ef21):not(#g-ef22):not(#g-ef23):not(#g-ef24):not(#g-ef25):not(#g-ef26):not(#g-ef27):not(#g-ef28):not(#g-ef29):not(#g-ef30):not(#g-ef31):not(#g-ef32):not(#g-ef33):not(#g-ef34):not(#g-ef35):not(#g-ef36):not(#g-ef37):not(#g-ef38):not(#g-ef39):not(#g-ef40):not(#g-ef41):not(#g-ef42):not(#g-ef43):not(#g-ef44):not(#g-ef45):not(#g-ef46):not(#g-ef47):not(#g-ef48):not(#g-ef49):not(#g-ef50):not(#g-ef51):not(#g-ef52):not(#g-ef53):not(#g-ef54):not(#g-ef55):not(#g-ef56):not([data-glass-theme="dark"]) :is(.ticket .detail, .ticket .row-head):not(.modal-content *) { background-color: transparent !important; background-image: none !important; }

/* §239 burger button on the yellow nav bar (light): a slightly lighter yellow of the bar itself (a faint white wash, soft rim) instead of a cream tile, so it blends in */
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-bt1):not(#g-bt2):not(#g-bt3):not(#g-bt4) .menu-toggle:not(.desktop-closed):not(.mobile-open) { background: rgba(255, 236, 160, 0.30) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(176,125,0,0.16) !important; }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-bt1):not(#g-bt2):not(#g-bt3):not(#g-bt4) .menu-toggle:not(.desktop-closed):not(.mobile-open):hover { background: rgba(255, 236, 160, 0.46) !important; }

/* §240 a student row pressed in a list looks picked immediately (see the press feedback in glass-mode.js) */
html:not(.glass-off) .result-item.mpc-pressed { background: var(--g-sel) !important; background-color: var(--g-sel) !important; border: 1px solid rgba(255,193,0,0.55); border-radius: 14px; box-shadow: 0 6px 16px rgba(255,193,0,0.22); transition: none !important; }
/* a pressed row takes the FULL picked look at once (picture ring too) and the row that was open drops it at once, so two rows are never both yellow while the profile loads; no fade either way */
html:not(.glass-off) .result-item.mpc-pressed .ri-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand) !important; }
html:not(.glass-off) .split-list.mpc-picking .result-item.active:not(.mpc-pressed) { background: transparent !important; background-color: rgba(255,255,255,0.34) !important; border-color: transparent !important; box-shadow: none !important; transition: none !important; }
html:not(.glass-off) .split-list.mpc-picking .result-item.active:not(.mpc-pressed) .ri-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 3px 8px rgba(24,28,50,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .split-list.mpc-picking .result-item.active:not(.mpc-pressed) { background-color: transparent !important; }
html[data-glass-theme="dark"]:not(.glass-off) .split-list.mpc-picking .result-item.active:not(.mpc-pressed) .ri-avatar { box-shadow: 0 0 0 1.5px rgba(255,193,0,0.35), 0 3px 8px rgba(0,0,0,0.3) !important; }
html[data-glass-theme="dark"]:not(.glass-off) .result-item.mpc-pressed .ri-avatar { box-shadow: 0 0 0 2px #171b24, 0 0 0 4px var(--brand) !important; }


/* §241 DESKTOP split pages (owner 2026-10-21: "the profile's background scrolls and there is also a fixed one"): the profile's glass used to sit on the card INSIDE the scroll box, so it rolled away with the content while the box stayed put, giving two backgrounds and two bottom edges. Now the scroll box itself carries the one frosted panel and the card inside it is plain, so only the words scroll. Not for glass-lite (its own picture frames) or phone / tablet. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not([data-glass-theme="dark"]) .view-section > .split-view > .split-detail.split-detail.split-detail,
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not([data-glass-theme="dark"]) .split-view > .split-detail.split-detail.split-detail,
html[data-glass-portal="partner"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not([data-glass-theme="dark"]) .split-view > .split-detail.split-detail.split-detail {
  background-color: rgba(255,255,255,0.36) !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(175%) !important; backdrop-filter: blur(26px) saturate(175%) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 18px 44px rgba(24,28,50,0.10), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .view-section > .split-view > .split-detail.split-detail.split-detail,
html[data-glass-portal="teacher"][data-glass-theme="dark"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .split-view > .split-detail.split-detail.split-detail,
html[data-glass-portal="partner"][data-glass-theme="dark"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .split-view > .split-detail.split-detail.split-detail {
  background-color: rgba(30,36,52,0.30) !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.03) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important; backdrop-filter: blur(26px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .view-section > .split-view > .split-detail > .card.card.card,
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .view-section > .split-view > .split-detail > div > .card.card.card,
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .split-view > .split-detail > .card.card.card,
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .split-view > .split-detail > div > .card.card.card,
html[data-glass-portal="partner"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .split-view > .split-detail > .card.card.card,
html[data-glass-portal="partner"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) .split-view > .split-detail > div > .card.card.card {
  background: none transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: transparent !important; box-shadow: none !important;
}
}

/* §242 the calendar's red time highlight (hovering a class or a time label sets .active-time-highlight and an inline red) was painted over by the frosted 55% time column of 10-25, whose !important beats an inline colour: the row highlight looked gone. The class now wins. */
html:not(.glass-off):not(#g-hl1):not(#g-hl2):not(#g-hl3):not(#g-hl4):not(#g-hl5):not(#g-hl6) .cal-time-col.active-time-highlight { background: #f1416c !important; color: #fff !important; }

/* §243 SOCIAL DESK, desktop (owner 2026-10-21: "copy how Marketing & Ads divided the top tabs vs the content; the curved edge eats the top texts"). Like Marketing & Ads, the tab strip is its own frosted bar and the content sits in a separate frosted panel under it with a gap; the scroll box itself is clear. The panel is padded so the curved corners no longer clip the first line of text. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) #view-social-desk.view-section > .split-view > .split-detail.split-detail.split-detail {
  background: none transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0; display: flex !important; flex-direction: column; overflow: hidden !important;   /* the box itself never scrolls: the tab bar and the panel frame stay put, only the panel's contents scroll (owner 2026-10-21) */
}
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) #view-social-desk > .split-view > .split-detail > .sd-ptabs {
  flex: none; position: relative; z-index: 30; box-sizing: border-box; padding: 6px; margin: 0 0 14px; border-radius: 20px;
  background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-edge); box-shadow: 0 8px 22px rgba(24,28,50,0.10);
}
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) #view-social-desk > .split-view > .split-detail > .sd-ptabs { background: rgba(26,30,42,0.62); }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) #view-social-desk > .split-view > .split-detail > [id^="sd-panel-"] {
  box-sizing: border-box; padding: 22px 24px; border-radius: 22px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background-color: rgba(255,255,255,0.36); background-image: linear-gradient(150deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(175%); backdrop-filter: blur(26px) saturate(175%);
  border: 1px solid rgba(255,255,255,0.72); box-shadow: 0 18px 44px rgba(24,28,50,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
}
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off):not(.glass-mobile):not(.glass-lite) #view-social-desk > .split-view > .split-detail > [id^="sd-panel-"] {
  background-color: rgba(30,36,52,0.30); background-image: linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.03) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.13); box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
}
}

/* §244 SOCIAL DESK, desktop (owner 2026-10-21: "align the boxes' bottoms and only scroll the contents, not the boxes"): the intro line above the split view pushed it down so its bottom ran past the screen and the whole page scrolled. Its height now counts from where it really starts (--g-svtop, set by glass-mode.js), so both boxes end together just above the screen edge and only what is inside them scrolls. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-sd1):not(#g-sd2):not(#g-sd3):not(#g-sd4):not(#g-sd5):not(#g-sd6) #view-social-desk.view-section > .split-view { height: calc(100vh - var(--g-svtop, 148px) - 14px); margin-bottom: -18px; align-items: stretch; }   /* bottom edge = the left nav bar bottom (it sits 14px above the screen edge); the negative margin takes back the page padding under it so the page itself does not scroll */
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-sd1):not(#g-sd2):not(#g-sd3):not(#g-sd4):not(#g-sd5):not(#g-sd6) #view-social-desk.view-section > .split-view > .split-list { height: 100%; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
}

/* §245 SOCIAL DESK, desktop: the explanatory sentence above the boxes is gone (owner 2026-10-21). What is left of that row is the "saving / saved" status, which floats over the gap under the header so it takes no height and the boxes start right under the header. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off) #view-social-desk > #sd-intro { position: relative; height: 0; margin: 0 !important; gap: 0; }
html[data-glass-portal="admin"]:not(.glass-off) #view-social-desk > #sd-intro > #sd-status { position: absolute; right: 8px; top: 0; min-width: 0 !important; z-index: 40; }
}

/* §246 SOCIAL DESK, desktop (owner 2026-10-21): the boxes sit 18px under the header bar like every other page, not 32px, and the list's own "Social Desk" heading is dropped since the header already says it. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-sd1):not(#g-sd2):not(#g-sd3):not(#g-sd4):not(#g-sd5):not(#g-sd6) #view-social-desk.view-section > .split-view { margin-top: 0 !important;   /* = the same 18px under the header as every other page */ }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-sd1):not(#g-sd2):not(#g-sd3):not(#g-sd4):not(#g-sd5):not(#g-sd6) #view-social-desk.view-section > .split-view > .split-list > h3:first-child { display: none; }
}

/* §247 SOCIAL DESK: the pages inside it (Ideas' rows and idea card, Reach, Updates, Outbox, Posts, Rules, Safety...) had near-solid white boxes (owner 2026-10-21: "make them more blurry frosted"). Their boxes, buttons and fields now carry the same see-through frosted glass as the panel around them; the yellow primary buttons and the red / pink warning boxes keep their colour but let the glass through. */
html[data-glass-portal="admin"]:not(.glass-off):not([data-glass-theme="dark"]) #view-social-desk :is(.sd-twin-row, .sd-twin-detail, .sd-idea-box, .sd-idea-btn:not(.is-primary), .sd-fold, #sd-comp-chat) {
  background: rgba(255,255,255,0.30) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.7) !important;
}
html[data-glass-portal="admin"]:not(.glass-off):not([data-glass-theme="dark"]) #view-social-desk :is(.sd-twin-row.active, .sd-idea-btn.is-on) { background: rgba(255,248,225,0.5) !important; border-color: #ffc100 !important; }
html[data-glass-portal="admin"]:not(.glass-off):not([data-glass-theme="dark"]) #view-social-desk .sd-twin-row:hover { background: rgba(255,255,255,0.5) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not([data-glass-theme="dark"]) #view-social-desk :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  background-color: rgba(255,255,255,0.34) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.75) !important;
}
html[data-glass-portal="admin"]:not(.glass-off):not([data-glass-theme="dark"]) #view-social-desk :is(#sd-pb-file, #sd-comp-file) { background: rgba(255,255,255,0.34) !important; }
html[data-glass-portal="admin"]:not(.glass-off):not([data-glass-theme="dark"]) #view-social-desk :is(#sd-outbox-door, #sd-posting-state) { background-color: rgba(253,236,234,0.55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off) #view-social-desk :is(.sd-twin-row, .sd-twin-detail, .sd-idea-box, .sd-idea-btn:not(.is-primary), .sd-fold, #sd-comp-chat) {
  background: rgba(30,36,52,0.30) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html[data-glass-portal="admin"][data-glass-theme="dark"]:not(.glass-off) #view-social-desk :is(.sd-twin-row.active, .sd-idea-btn.is-on) { background: rgba(255,193,0,0.14) !important; border-color: #ffc100 !important; }

/* §248 SOCIAL DESK, phone and tablet (owner 2026-10-21): the floating Save / Add buttons are zero-height overlays, so on desktop the version line leaves room for them with a wide right padding. On a narrow screen that padding squeezed the line into a thin column of 4-6 wrapped rows. Here the buttons take their own row instead (still sticky under the header, so they stay reachable) and the line below gets the full width. */
@media (max-width: 992px) {
#view-social-desk :is(#sd-price-savebar, #sd-kb-savebar) { height: auto !important; top: 78px !important; margin: 0 0 8px !important; padding: 0; justify-content: flex-end !important; pointer-events: auto !important; }
#view-social-desk :is(#sd-price-meta, #sd-kb-meta) { padding-right: 0 !important; min-height: 0 !important; margin-bottom: 8px !important; }
}

/* §249 MARKETING & ADS, desktop (owner 2026-10-21: "same as Social Desk"): the page is one screen tall and ends at the left nav bar's bottom edge (14px above the screen edge); the header and the tab bar stay put and only the content panel scrolls inside its frame. Phone and tablet keep the normal page scroll. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-mk1):not(#g-mk2):not(#g-mk3):not(#g-mk4):not(#g-mk5):not(#g-mk6) #view-marketing.view-section.active { display: flex !important; flex-direction: column; height: calc(100vh - var(--g-cwtop, 78px) - 18px - 14px); margin-bottom: -18px; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-mk1):not(#g-mk2):not(#g-mk3):not(#g-mk4):not(#g-mk5):not(#g-mk6) #view-marketing > #mkt-top { flex: none; position: relative !important; top: auto !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-mk1):not(#g-mk2):not(#g-mk3):not(#g-mk4):not(#g-mk5):not(#g-mk6) #view-marketing > .card:not(#mkt-top) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0 !important; }
}

/* §250 INQUIRIES & LEADS, TEAM MANAGEMENT, SHEET LIBRARY, desktop (owner 2026-10-21: "same bottom level" as the left nav bar): these pages ended 12px short (split views) or ran 30px past the screen (the Sheet Library frame). They now end where the nav bar ends, 14px above the screen edge, and the page itself does not scroll. Phone and tablet are untouched. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-sb1):not(#g-sb2):not(#g-sb3):not(#g-sb4):not(#g-sb5):not(#g-sb6) :is(#view-inquiries, #view-teachers).view-section > .split-view { height: calc(100vh - var(--g-cwtop, 78px) - 32px); margin-bottom: -18px; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-sb1):not(#g-sb2):not(#g-sb3):not(#g-sb4):not(#g-sb5):not(#g-sb6) :is(#view-sheet-library-app, #view-accounting-app, #view-expenses-app).view-section > .iframe-container { height: calc(100vh - var(--g-cwtop, 78px) - 32px) !important; min-height: 0 !important; margin-bottom: -18px; }
}

/* §251 CASHBOX MONITOR, desktop: TWIN VIEW (owner 2026-10-21). Left column: title and branch picker, the four totals (2 x 2) and the IN / OUT / Remit buttons. Right: the ledger as its own panel, the full height of the page, with its heading fixed and only the rows scrolling. Ends at the left nav bar's bottom edge like the other twin pages. Phone and tablet keep the single column. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox.view-section.active {
  display: grid !important; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 18px; align-items: start;
  height: calc(100vh - var(--g-cwtop, 78px) - 32px); margin-bottom: -18px;
}
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > :first-child { grid-column: 1; grid-row: 1; margin-bottom: 14px !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .stat-grid-single { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .stat-grid-single + div { grid-column: 1; grid-row: 3; margin-bottom: 0 !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card {
  grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-height: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden;
}
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header { flex: none; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > #cb-ledger-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* the four totals are stacked, each one compact: the title with the amount UNDER it */
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .stat-grid-single > .stat-box { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px 18px; min-height: 0; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .stat-grid-single > .stat-box > h3 { margin: 0; min-width: 0; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .stat-grid-single > .stat-box > .val { font-size: 26px; line-height: 1.1; margin: 0; white-space: nowrap; align-self: flex-end; text-align: right; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header { flex-wrap: nowrap; gap: 10px; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-title { flex: 0 0 auto; white-space: nowrap; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-controls { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; gap: 6px; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-controls > input[type=date] { flex: 0 0 auto; width: 100px !important; min-width: 0 !important; max-width: 100px; padding-left: 6px !important; padding-right: 4px !important; font-size: 12px !important; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-controls > .cb-search-wrapper { flex: 1 1 64px; min-width: 64px; width: auto; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-controls > button { flex: none; }
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-controls > button[title="Export to CSV"] { font-size: 0 !important; padding-left: 10px !important; padding-right: 10px !important; }   /* icon only: the word CSV stays in the tooltip */
html[data-glass-portal="admin"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-cb1):not(#g-cb2):not(#g-cb3):not(#g-cb4):not(#g-cb5):not(#g-cb6) #view-cashbox > .card > .cb-ledger-header > .cb-ledger-controls > button[title="Export to CSV"] > i { font-size: 15px; }
}

/* TEACHER: ACTIVE STUDENTS (and every twin view) end exactly where the left nav bar ends, 14px above the screen edge (owner 2026-10-22). They stopped 24px short, and the wrapper's 30px bottom padding then made the page scroll; the bottom margin takes that padding back. */
@media (min-width: 993px) {
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-tz1):not(#g-tz2):not(#g-tz3):not(#g-tz4):not(#g-tz5):not(#g-tz6) .split-view:has(> .split-detail) { height: calc(100vh - var(--g-svtop, 150px) - 14px); margin-bottom: calc(-1 * var(--g-cwpb, 0px)); }
}

/* FRAMED APPS ALIGN TO THE HEADER AT EVERY SIDEBAR STATE (owner 2026-10-22): with the side bar closed the content wrapper has a 14px side gap, and the generic rule for framed pages pulled the frame out by that gap on both sides (margin -14px, width +28px), so Accounting / Expenses / Sheet Library bled to the screen edges and the right side was cut off. The header and the wrapper share the same 14px gap, so the frame simply fills the wrapper: no side margins, no extra width. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off):not(#g-fw1):not(#g-fw2):not(#g-fw3):not(#g-fw4):not(#g-fw5):not(#g-fw6) :is(#view-accounting-app, #view-expenses-app, #view-sheet-library-app).view-section > .iframe-container { margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; }
html[data-glass-portal="admin"]:not(.glass-off):not(#g-fw1):not(#g-fw2):not(#g-fw3):not(#g-fw4):not(#g-fw5):not(#g-fw6) #view-event-planner-app.view-section > .iframe-container { margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; }   /* the planner: same side alignment (its height rule is its own) */
}

/* TEACHER: TIMESHEET & PAY (owner 2026-10-22): the page is one screen tall and ends where the left nav bar ends (14px above the screen edge); the big glass card keeps its place and its background and only its CONTENT scrolls inside it. 18px = the content wrapper's top padding; the bottom margin takes back its bottom padding so the page itself does not scroll. */
@media (min-width: 993px) {
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4):not(#g-ts5):not(#g-ts6) #view-timesheet.view-section.active { display: flex; flex-direction: column; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 0px) - 18px - 14px); margin-bottom: calc(-1 * var(--g-cwpb, 0px)); }
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ts1):not(#g-ts2):not(#g-ts3):not(#g-ts4):not(#g-ts5):not(#g-ts6) #view-timesheet.view-section.active > .card { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; }
}

/* TEACHER: ACTIVE STUDENTS, NO SNAP (owner 2026-10-22: the boxes started small, then jumped to full size). Their height used to come from --g-svtop, a number glass-mode.js measures on a timer (every 1.5 s) and which went stale whenever anything above them appeared or left, so they were the wrong size until the next tick. Now the page itself is one screen tall (from the header height, which is stable) and the boxes simply FILL whatever room is under anything above them: nothing is measured, so nothing can be stale. */
@media (min-width: 993px) {
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ta1):not(#g-ta2):not(#g-ta3):not(#g-ta4):not(#g-ta5):not(#g-ta6):not(#g-ta7) #view-search.view-section.active { display: flex; flex-direction: column; height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 78px) - 18px - 14px); margin-bottom: calc(-1 * var(--g-cwpb, 30px)); transition: opacity 0.3s ease, transform 0.3s ease !important; /* the generic "transition: all" on .view-section animated every HEIGHT change as a slow resize */ }
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ta1):not(#g-ta2):not(#g-ta3):not(#g-ta4):not(#g-ta5):not(#g-ta6):not(#g-ta7) #view-search.view-section.active > .split-view { flex: 1 1 auto; min-height: 0; height: auto !important; margin-bottom: 0 !important; }
}
/* the red "complete your profile" banner sits above the page when it is showing (about 102px with its margin): the page gives up that much so it still ends at the nav bar */
@media (min-width: 993px) {
html[data-glass-portal="teacher"]:not(.glass-off):not(.glass-mobile):not(.glass-lite):not(#g-ta1):not(#g-ta2):not(#g-ta3):not(#g-ta4):not(#g-ta5):not(#g-ta6):not(#g-ta7) #profile-reminder-banner[style*="display: flex"] ~ #view-search.view-section.active { height: calc(100dvh / var(--g-z, 1) - var(--g-cwtop, 78px) - 18px - 14px - 102px); }
}

/* TIMESHEET & PAY LISTS ON PHONE AND TABLET, dark theme (owner 2026-10-22): the opened Unpaid Sessions / Incentives / Outstanding Deductions panels stayed SOLID WHITE under the dark theme below 993px, so their light text could not be read. The desktop rule above has been desktop-only; the same dark glass now applies at every width. */
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tm1):not(#g-tm2):not(#g-tm3) :is(#unpaid-students-list, #unpaid-incentives-list, #outstanding-deductions-list) { background: rgba(30,36,52,0.30) !important; }

/* SCREEN-TALL PAGES FADE IN, THEY DO NOT SLIDE (owner 2026-10-22: the Sheet Library and My Timesheet "wiggle" every time you switch to them). Those pages are exactly one screen tall, and the slide-in starts them 36px LOWER, which pushes their bottom past the screen edge: the browser adds a page scrollbar for the 0.8 s of the animation, the content shifts sideways to make room, and shifts back when it leaves. Desktop only (below 993px these pages flow normally). */
@media (min-width: 993px) {
html:not(.glass-off):not(#g-vw1):not(#g-vw2):not(#g-vw3):not(#g-vx1):not(#g-vx2):not(#g-vx3) :is(#view-search, #view-sheets, #view-timesheet, #view-schedule, #view-classroom, #view-parents, #view-teachers, #view-inquiries, #view-social-desk, #view-cashbox, #view-marketing, #view-accounting-app, #view-expenses-app, #view-sheet-library-app, #view-event-planner-app).view-section.active { animation: mpcFadeOnly 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards !important; }
}

/* NO SIDEWAYS SHIFT WHEN A PAGE OPENS (owner 2026-10-22: "as if the width is being adjusted on load"). Switching between a page that needs the page scrollbar and one that does not added or removed the scrollbar track, which moved the header, the chat buttons and every page edge by the track width (measured on the admin portal: header-right and the floating buttons shifted 10px on 12 of 22 page switches). The track is now always reserved on a desktop, so nothing moves. */
@media (min-width: 993px) {
html[data-glass-portal="admin"]:not(.glass-off), html[data-glass-portal="teacher"]:not(.glass-off), html[data-glass-portal="partner"]:not(.glass-off), html[data-glass-portal="admin"]:not(.glass-off) > body, html[data-glass-portal="teacher"]:not(.glass-off) > body, html[data-glass-portal="partner"]:not(.glass-off) > body { scrollbar-gutter: stable; }
}

/* §252 DESKTOP FLOATING LOG BOOK: real frosted glass (owner 2026-10-22: "too solid"). Panel, header and body were solid fills, so the page behind did not show. Now a light tint over a strong blur like the chat box, with see-through header/body and softly tinted cards. Phone layout unchanged. */
@media (min-width: 993px) {
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5):not([data-glass-theme="dark"]) #lbFloat { background: rgba(255,255,255,0.34) !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5) #lbFloat { background: rgba(14,18,32,0.38) !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5) #lbFloat :is(#lbFloatHead, #lbFloatBody) { background: transparent !important; }
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5):not([data-glass-theme="dark"]) #lbFloat #lbFloatBody .card { background: rgba(255,255,255,0.32) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-lb1):not(#g-lb2):not(#g-lb3):not(#g-lb4):not(#g-lb5) #lbFloat #lbFloatBody .card { background: rgba(30,36,52,0.30) !important; }
}

/* §253 DESKTOP BUG REPORT WINDOW: same frosted glass as the floating Log Book / chat box (owner 2026-10-22). Light tint over a 40px blur, see-through fields. Phone layout keeps its own rules. */
@media (min-width: 993px) {
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not([data-glass-theme="dark"]) #mpcBugModal { background: rgba(255,255,255,0.34) !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5) #mpcBugModal { background: rgba(14,18,32,0.38) !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important; backdrop-filter: blur(40px) saturate(210%) !important; }
  html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5):not([data-glass-theme="dark"]) #mpcBugModal :is(input[type=text], textarea, .mbr-ctx, .mbr-add) { background: rgba(255,255,255,0.32) !important; }
  html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-bg1):not(#g-bg2):not(#g-bg3):not(#g-bg4):not(#g-bg5) #mpcBugModal :is(input[type=text], textarea, .mbr-ctx, .mbr-add) { background: rgba(30,36,52,0.30) !important; }
}

/* §254 CALENDAR SLOT HOVER TEXT (contact): in light mode the tooltip is a white frosted pill but its text and phone icon stayed white / yellow, so they vanished. Light = dark text + amber-brown icon on a firmer white; dark = bright text, brighter icon. The pointer arrow matches the pill. */
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-tt1):not(#g-tt2):not(#g-tt3):not(#g-tt4) .slot-tooltip { color: #181c32 !important; background: rgba(255,255,255,0.94) !important; border: 1px solid rgba(24,28,50,0.14); font-weight: 600 !important; }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-tt1):not(#g-tt2):not(#g-tt3):not(#g-tt4) .slot-tooltip i { color: #b45309 !important; }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-tt1):not(#g-tt2):not(#g-tt3):not(#g-tt4) .slot-tooltip::after { border-top-color: rgba(255,255,255,0.94) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tt1):not(#g-tt2):not(#g-tt3):not(#g-tt4) .slot-tooltip { color: #f4f6fb !important; background: rgba(24,28,38,0.94) !important; border: 1px solid rgba(255,255,255,0.14); font-weight: 600 !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tt1):not(#g-tt2):not(#g-tt3):not(#g-tt4) .slot-tooltip i { color: #ffd54d !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-tt1):not(#g-tt2):not(#g-tt3):not(#g-tt4) .slot-tooltip::after { border-top-color: rgba(24,28,38,0.94) !important; }

/* §191 (owner, 2026-10-23) Business Report: the column-filter popup (.mtf-pop) is frosted like the row (kebab) menus, on every screen size: a light tint over a blur of the page behind it, never see-through. And the dark-mode cells that stayed pale: the month heading / total rows of the sessions table, the filter chips, "Clear all", the open filter button and "Reset column". Each had a pale background set by an ID or class rule that beat the zero-weight dark rules above. */
html:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3):not(#g-mp4):not([data-glass-theme="dark"]) body > .mtf-pop.mtf-pop.mtf-pop { background: linear-gradient(150deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 55%, rgba(255,255,255,0.40) 100%), rgba(238,242,250,0.55) !important; -webkit-backdrop-filter: blur(22px) saturate(170%) !important; backdrop-filter: blur(22px) saturate(170%) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 14px 34px rgba(24,28,50,0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important; color: #181c32; }
html:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3):not(#g-mp4)[data-glass-theme="dark"] body > .mtf-pop.mtf-pop.mtf-pop { background: linear-gradient(150deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.07) 100%), rgba(24,34,58,0.62) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; backdrop-filter: blur(22px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important; color: #eceef4; }

html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) #ds-table tr.ds-month-head td { background: rgba(0,158,247,0.16); color: #eceef4; border-top-color: rgba(255,255,255,0.16); border-bottom-color: rgba(255,255,255,0.12); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) #ds-table tr.ds-month-total td { background: rgba(0,158,247,0.24); color: #eceef4; border-bottom-color: rgba(255,255,255,0.16); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) #ds-table tr.ds-capped td { background: rgba(255,193,0,0.14); color: #ffd666; border-top-color: rgba(255,193,0,0.55); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-chip { background: rgba(255,193,0,0.16); color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-chip button { background: rgba(255,255,255,0.14); color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-clear { background: rgba(255,255,255,0.06); color: #ff8a98; border-color: rgba(255,255,255,0.18); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-btn.open { background: rgba(255,255,255,0.16); color: #eceef4; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-foot .mtf-reset { background: rgba(255,255,255,0.08); color: #d6d9e4; border-color: rgba(255,255,255,0.2); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-search input::placeholder, html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-pop input::placeholder { color: #a8aec2; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-tools button, html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) .mtf-none button { background: rgba(255,255,255,0.08); color: #d6d9e4; border-color: rgba(255,255,255,0.2); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) body > .mtf-pop input[type="text"], html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) body > .mtf-pop input[type="number"], html[data-glass-theme="dark"]:not(.glass-off):not(#g-mp1):not(#g-mp2):not(#g-mp3) body > .mtf-pop input[type="date"] { background: rgba(255,255,255,0.07); color: #eceef4; border-color: rgba(255,255,255,0.2); }

/* Teacher request dialog (#teacherSlotModal): the dashed panels (move-or-extra,
   makeup, schedule change, unavailable, missed class) keep their own coloured
   dashed border, but their fill is the theme's neutral translucent surface
   (--g-surface-2, the same as the tracker button) with the dialog's blur: frost,
   not colour. */
html:not(.glass-off) :is(.t-move-box, #teacherSlotModal div[style*="dashed"]) {
  background: var(--g-surface-2) !important;
  -webkit-backdrop-filter: blur(38px) saturate(140%); backdrop-filter: blur(38px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
html:not(.glass-off) .t-move-box { text-align: left; width: 100%; margin-bottom: 12px; padding: 14px 16px; border-radius: 8px; border: 1px dashed var(--warning, #e0a800); }
html:not(.glass-off) .t-move-box .t-move-msg { font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--text-dark); margin-bottom: 8px; }
html:not(.glass-off) .t-move-box #t-modal-move-btns > label { padding: 8px 10px !important; border-radius: var(--glass-r-sm); background: var(--gw50); border: 1px solid var(--glass-edge); }
html:not(.glass-off) .t-move-box #t-modal-move-btns > label:has(input:checked) { background: var(--gw86, rgba(255,255,255,0.86)); border-color: var(--brand); }
html[data-glass-theme="dark"]:not(.glass-off) .t-move-box #t-modal-move-btns > label { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
html[data-glass-theme="dark"]:not(.glass-off) .t-move-box #t-modal-move-btns > label:has(input:checked) { background: rgba(255,255,255,0.14); border-color: var(--brand); }

/* Teacher request dialog fields: translucent glass instead of near-solid white
   (the dropdown lists use the theme's own .g-select-pop). */
html:not(.glass-off) #teacherSlotModal :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]) {
  background: rgba(255,255,255,0.30) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.6) !important;
}
html:not(.glass-off) #teacherSlotModal :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):focus { background: rgba(255,255,255,0.55) !important; }
html:not(.glass-off) .t-move-box #t-modal-move-btns > label { background: rgba(255,255,255,0.30); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-glass-theme="dark"]:not(.glass-off) #teacherSlotModal :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]) { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.2) !important; }
html[data-glass-theme="dark"]:not(.glass-off) #teacherSlotModal :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):focus { background: rgba(255,255,255,0.14) !important; }
html:not(.glass-off) :is(#t-modal-student-list, #t-un-sub-list) .g-opt:hover { background: rgba(255,193,0,0.20); }
html[data-glass-theme="dark"]:not(.glass-off) :is(#t-modal-student-list, #t-un-sub-list) .g-opt:hover { background: rgba(255,255,255,0.09); }

/* Clear (x) button floated over single-line text fields (js/glass-mode.js) */
.g-clr { position: fixed; transition: none !important; z-index: 2147483100; display: none; width: 20px; height: 20px; padding: 0 !important; margin: 0; min-width: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(127,133,160,0.28) !important; color: inherit; font: 700 15px/20px Arial, sans-serif !important; text-align: center; cursor: pointer; box-shadow: none !important; transform: none !important; opacity: 0.85; }
.g-clr:hover { background: rgba(255,193,0,0.55) !important; color: #181c32; opacity: 1; transform: none !important; }
html[data-glass-theme="dark"] .g-clr { color: #eceef4; }
html[data-glass-theme="dark"] .g-clr:hover { color: #181c32; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ============================================================================
   §FM FLAG / REQUEST FAMILY (2026-10-26): the teacher's Flag Session modal boxes,
   the alert and confirm dialogs, the toasts, the admin Schedule Request card, its
   block rows and the floating request bar, as one frosted family. PRESENTATION
   ONLY: ids, names and wording are untouched. Classes replace the pale-yellow
   dashed inline boxes (#fff8e6). Light and dark, phone widths, reduced motion.
   Selectors carry two :not(#id) bumps so the older dialog rules above do not win.
   ========================================================================= */
:root {
  --gf-fill: rgba(255,255,255,0.46);
  --gf-fill-hi: rgba(255,255,255,0.72);
  --gf-line: rgba(24,28,50,0.10);
  --gf-rim: rgba(255,255,255,0.85);
  --gf-ink: #181c32;
  --gf-sub: #5b6075;
  --gf-brand-tint: rgba(255,193,0,0.20);
  --gf-info-tint: rgba(0,158,247,0.12);
  --gf-danger-tint: rgba(225,29,72,0.12);
  --gf-ok-tint: rgba(22,163,74,0.14);
  --gf-pop: 0.18s cubic-bezier(0.2,0.8,0.2,1);
}
html[data-glass-theme="dark"] {
  --gf-fill: rgba(255,255,255,0.07);
  --gf-fill-hi: rgba(255,255,255,0.12);
  --gf-line: rgba(255,255,255,0.16);
  --gf-rim: rgba(255,255,255,0.22);
  --gf-ink: #eef0f6;
  --gf-sub: #aab0c4;
  --gf-brand-tint: rgba(255,193,0,0.20);
  --gf-info-tint: rgba(0,158,247,0.20);
  --gf-danger-tint: rgba(225,29,72,0.22);
  --gf-ok-tint: rgba(22,163,74,0.24);
}
@keyframes g-fm-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes g-fm-scale { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }

/* -- A. Flag Session modal ------------------------------------------------ */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-flag-card .g-flag-h2 { margin-bottom: 4px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fsub { font-size: 13px; font-weight: 700; color: var(--gf-sub); margin: 0 0 14px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fprofile { margin-bottom: 14px; width: 100%; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox {
  box-sizing: border-box; width: 100%; margin: 0 0 12px; padding: 12px 14px; text-align: left;
  background: linear-gradient(rgba(255,193,0,0.85), rgba(255,193,0,0.85)) left / 3px 100% no-repeat, var(--gf-fill);
  border: 1px solid var(--gf-line); border-radius: var(--glass-r-md);
  box-shadow: inset 0 1px 0 var(--gf-rim);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  animation: g-fm-in var(--gf-pop);
}
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-info { background: linear-gradient(rgba(0,158,247,0.55), rgba(0,158,247,0.55)) left / 3px 100% no-repeat, var(--gf-fill); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-danger { background: linear-gradient(rgba(225,29,72,0.6), rgba(225,29,72,0.6)) left / 3px 100% no-repeat, var(--gf-danger-tint); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-center { text-align: center; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-ico { display: block; font-size: 26px; margin-bottom: 8px; color: var(--danger, #e11d48); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-note { font-size: 12px; font-weight: 700; color: var(--gf-ink); margin: 0 0 10px; line-height: 1.45; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-title { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gf-sub); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox-title-info { color: var(--info, #009ef7); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopts-tight { margin-bottom: 6px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopt,
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-opt {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: -0.005em; color: var(--gf-ink);
  background: var(--gf-fill); border: 1px solid var(--gf-line); border-radius: 12px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopt[style*="display:none"] { display: none; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopt:hover,
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-opt:hover { border-color: var(--brand, #ffc100); background: var(--gf-fill-hi); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopt:has(input:checked),
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-opt:has(input:checked) { background: var(--gf-brand-tint); border-color: var(--brand, #ffc100); box-shadow: 0 4px 14px rgba(255,193,0,0.22); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fopt:has(input:focus-visible),
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-opt:has(input:focus-visible) { outline: 2px solid var(--brand, #ffc100); outline-offset: 2px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) :is(.g-fopt, .t-blk-opt) input[type="radio"] { width: 16px; height: 16px; min-width: 16px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--brand, #ffc100); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-frow { display: flex; flex-direction: row; gap: 10px; width: 100%; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-frow[style*="display:none"] { display: none; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-frow-range { margin-bottom: 12px; text-align: left; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-frow > .input-group { margin: 0; flex: 1; min-width: 0; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fgap { margin: 0 0 10px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fhint { margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--gf-sub); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px;
  font-size: 12px; font-weight: 800; border-radius: 12px; cursor: pointer; box-shadow: none;
}
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbtn-ghost { color: var(--info, #009ef7); background: var(--gf-info-tint); border: 1px solid var(--gf-line); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbtn-ghost:hover { background: var(--gf-fill-hi); border-color: var(--info, #009ef7); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbtn-danger { color: #fff; background: var(--danger, #e11d48); border: 0; }
/* block-over-booked-classes cards */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-card {
  margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--gf-line); border-left: 4px solid var(--brand, #ffc100); border-radius: 14px;
  background: var(--gf-fill-hi); box-shadow: inset 0 1px 0 var(--gf-rim); transition: border-color 0.15s ease, background 0.15s ease;
}
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-card:has(input:checked) { border-left-color: var(--success, #16a34a); background: var(--gf-ok-tint); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-name { font-size: 14px; font-weight: 800; color: var(--gf-ink); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-chip { padding: 2px 10px; font-size: 11px; font-weight: 800; border-radius: 999px; color: var(--gf-ink); background: var(--gf-brand-tint); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .t-blk-opts { display: flex; flex-direction: column; gap: 6px; }

/* -- B. Alerts (showAlert): one badge, one title, one message, one button -- */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-card { display: flex; flex-direction: column; align-items: center; text-align: center; animation: g-fm-scale var(--gf-pop); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-badge,
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-gc-badge {
  display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 2px auto 12px; border-radius: 50%; font-size: 28px;
  color: #9a6b00; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), var(--gf-brand-tint) 70%);
  border: 1px solid var(--gf-rim); box-shadow: 0 8px 22px rgba(255,193,0,0.28), inset 0 1px 0 var(--gf-rim);
}
html[data-glass-theme="dark"]:not(.glass-off):not(#g-fm1):not(#g-fm2) :is(.g-alert-badge, .g-gc-badge) { color: var(--brand, #ffc100); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-card[data-kind="bad"] .g-alert-badge,
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-gc-card[data-tone="danger"] .g-gc-badge { color: var(--danger, #e11d48); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), var(--gf-danger-tint) 70%); box-shadow: 0 8px 22px rgba(225,29,72,0.26), inset 0 1px 0 var(--gf-rim); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-card[data-kind="ok"] .g-alert-badge { color: var(--success, #16a34a); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), var(--gf-ok-tint) 70%); box-shadow: 0 8px 22px rgba(22,163,74,0.24), inset 0 1px 0 var(--gf-rim); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) :is(.g-alert-title, .g-gc-title) { justify-content: center; margin: 0 0 8px; padding: 0; border: 0; font-size: 18px; text-align: center; color: var(--gf-ink); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-msg { width: 100%; margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--gf-ink); overflow-wrap: anywhere; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-msg > i:first-child { display: none; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-alert-btn { width: 100%; }

/* -- D. Confirm dialogs (askConfirm / showGenericConfirm) ------------------ */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-gc-card { animation: g-fm-scale var(--gf-pop); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-gc-msg { width: 100%; margin: 0 0 16px; font-size: 13px; line-height: 1.5; text-align: center; white-space: pre-line; color: var(--gf-sub); overflow-wrap: anywhere; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) #gc-confirm-btn { color: #181c32; background: var(--brand, #ffc100); border: 0; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) #gc-confirm-btn.g-gc-yes-danger { color: #fff; background: var(--danger, #e11d48); box-shadow: 0 8px 20px rgba(225,29,72,0.30); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) #gc-cancel-btn { color: var(--gf-ink); background: var(--gf-fill-hi) !important; border: 1px solid var(--gf-line); }

/* -- B/D. Toasts: icon badge + glass tint, long refusals scroll ------------- */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast { align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border-left: 1px solid var(--glass-edge) !important; max-width: min(420px, 100%); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; border-radius: 50%; font-size: 18px; background: var(--gf-brand-tint); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast-success .mpc-toast-icon { background: var(--gf-ok-tint); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast-error .mpc-toast-icon { background: var(--gf-danger-tint); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast-msg { display: block; max-height: 40vh; overflow-y: auto; overflow-wrap: anywhere; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast-action { border-radius: 10px; background: var(--brand, #ffc100); color: #181c32; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .mpc-toast-close { border-radius: 50%; }

/* -- C. Admin Schedule Request card ----------------------------------------- */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .notif-msg div[style*="background:#f5f8fa"] {
  background: var(--gf-fill-hi) !important; color: var(--gf-ink) !important; border: 1px solid var(--gf-line) !important; border-left: 3px solid var(--info, #009ef7) !important;
  border-radius: 12px !important; box-shadow: inset 0 1px 0 var(--gf-rim); line-height: 1.55;
}
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-actions { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-btn { flex: 1 1 0; min-width: 0; padding: 8px 12px; border: 0; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 1.2; color: #fff; box-shadow: none; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-approve { background: var(--info, #009ef7); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-view { background: var(--brand, #ffc100); color: #181c32; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-decline { background: var(--danger, #e11d48); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-close { flex: 0 0 auto; color: inherit; background: transparent; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--gf-sub); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-head i { color: var(--warning, #e0a800); font-size: 14px; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--gf-line); border-left: 4px solid var(--brand, #ffc100); border-radius: 12px;
  background: linear-gradient(90deg, var(--gf-brand-tint), transparent 70%), var(--gf-fill-hi); box-shadow: inset 0 1px 0 var(--gf-rim);
}
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-who { flex: 1; min-width: 0; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-name { font-size: 12.5px; font-weight: 800; color: var(--gf-ink); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-ans { font-size: 11px; line-height: 1.35; color: var(--gf-sub); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; color: #181c32; background: var(--brand, #ffc100); box-shadow: 0 4px 12px rgba(255,193,0,0.34); cursor: pointer; }

/* floating request bar over the calendar */
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-reqbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 99990; box-sizing: border-box; width: min(560px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px;
  color: var(--gf-ink); background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.5)); border: 1.5px solid var(--brand, #ffc100);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 18px 44px rgba(24,28,50,0.28), inset 0 1px 0 var(--gf-rim); animation: g-fm-scale var(--gf-pop);
}
html[data-glass-theme="dark"]:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-reqbar { background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), rgba(26,30,42,0.72); box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 1px 0 var(--gf-rim); }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-reqbar-text { flex: 1 1 160px; min-width: 0; font-size: 12px; line-height: 1.3; }
html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-reqbar .sr-btn { flex: 0 0 auto; }

/* -- select popup (global): hairline separators, tighter rows ---------------- */
.g-select-pop .g-opt.g-sep { margin: 4px 12px; background: var(--gf-line); }
html[data-glass-theme="dark"] .g-select-pop .g-opt.g-sep { background: rgba(255,255,255,0.16); }

/* -- phones ------------------------------------------------------------------- */
@media (max-width: 480px) {
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-fbox { padding: 10px 11px; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-frow { flex-direction: column; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-frow-range { flex-direction: row; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-actions { flex-wrap: wrap; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-actions .sr-btn { flex: 1 1 30%; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .sr-blk-row { flex-wrap: wrap; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-reqbar .sr-btn { flex: 1 1 auto; }
  html:not(.glass-off):not(#g-fm1):not(#g-fm2) .g-reqbar .sr-close { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.glass-off) :is(.g-fbox, .g-alert-card, .g-gc-card, .g-reqbar) { animation: none !important; }
  html:not(.glass-off) :is(.g-fopt, .t-blk-opt, .t-blk-card, .sr-btn) { transition: none !important; }
  html:not(.glass-off) .sr-btn:hover { transform: none; }
  html:not(.glass-off) .mpc-toast .ph-spin { animation-duration: 3s !important; }
}
/* glass-lite / transparency off: opaque fills, no blur */
html.glass-lite:not(.glass-off) :is(.g-fbox, .g-reqbar) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.glass-off) .g-fbox { background-color: var(--gw90); }
  html:not(.glass-off) .g-reqbar { background: var(--gw95); }
}

/* ── §MC  Master Calendar: fields, slots and Manage Slot panels on the glass family ──
   Presentation only (ids, names, wording untouched). Fields get a real blur like the
   cards they sit on; slots stay translucent WITHOUT backdrop-filter (a board holds
   ~1,200 of them), so the tints are alpha colours, not pastel hex. */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#view-master-calendar, #adminSlotModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea),
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#btn-compare-teachers, .zoom-controls) {
  background-color: rgba(255,255,255,0.46) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 3px 10px rgba(24,28,50,0.06);
}
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#view-master-calendar, #adminSlotModal) :is(input, select, textarea):focus {
  background-color: rgba(255,255,255,0.7) !important; border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(255,193,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-substatus { box-shadow: 0 0 0 2px rgba(255,193,0,0.45), inset 0 1px 0 rgba(255,255,255,0.85); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-eff-date { box-shadow: 0 0 0 2px rgba(0,158,247,0.38), inset 0 1px 0 rgba(255,255,255,0.85); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-substatus-box select { text-overflow: ellipsis; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#view-master-calendar, #adminSlotModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea),
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#btn-compare-teachers, .zoom-controls) {
  background-color: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(0,0,0,0.22);
}
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#view-master-calendar, #adminSlotModal) :is(input, select, textarea):focus {
  background-color: rgba(255,255,255,0.11) !important; border-color: var(--brand) !important;
}
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-substatus { box-shadow: 0 0 0 2px rgba(255,193,0,0.4); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-eff-date { box-shadow: 0 0 0 2px rgba(0,158,247,0.4); }

/* Manage Slot panels: frosted tints, soft edges, no hard dashed boxes */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#a-modal-substatus-box.open, #a-modal-sub-toggle-box, #a-modal-makeup-box, #adminFamilySyncContainer.open) {
  border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.7) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 18px rgba(24,28,50,0.06);
}
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#a-modal-substatus-box.open, #a-modal-sub-toggle-box) { background: rgba(255,193,0,0.16) !important; border-color: rgba(255,193,0,0.42) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-makeup-box { background: rgba(0,158,247,0.10) !important; border-color: rgba(0,158,247,0.30) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-sub-toggle-box.open { background: rgba(255,193,0,0.20) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-profile-btn button {
  background: rgba(0,158,247,0.10) !important; border: 1px solid rgba(0,158,247,0.32) !important; border-radius: 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-date-day-hint { border-radius: 12px !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#a-modal-substatus-box.open, #a-modal-sub-toggle-box, #a-modal-makeup-box, #adminFamilySyncContainer.open) { border-color: rgba(255,255,255,0.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 22px rgba(0,0,0,0.25); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(#a-modal-substatus-box.open, #a-modal-sub-toggle-box) { background: rgba(255,193,0,0.11) !important; border-color: rgba(255,193,0,0.35) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-sub-toggle-box label { color: #ffd45c !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-makeup-box { background: rgba(0,158,247,0.12) !important; border-color: rgba(0,158,247,0.35) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) #a-modal-profile-btn button { background: rgba(0,158,247,0.14) !important; border-color: rgba(0,158,247,0.4) !important; box-shadow: none; }

/* Slots, light: alpha tints with a glass highlight instead of flat pastel blocks */
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .cal-slot { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-booked { box-shadow: 0 3px 10px rgba(255,193,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-reserved { background: rgba(255,193,0,0.12); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-unavailable { background: repeating-linear-gradient(45deg, rgba(24,28,50,0.04) 0 10px, rgba(24,28,50,0.09) 10px 20px); border-color: rgba(24,28,50,0.08); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-trial { background: rgba(225,29,72,0.10); border-color: rgba(225,29,72,0.26); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-start_on { background: rgba(4,120,87,0.10); border-color: rgba(4,120,87,0.26); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-excused { background: rgba(24,28,50,0.05); border-color: rgba(24,28,50,0.10); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-absent { background: rgba(225,29,72,0.08); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-moved { background: rgba(90,50,163,0.10); border-color: rgba(90,50,163,0.24); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) :is(.slot-only, .slot-temporary, .slot-makeup) { background: rgba(0,158,247,0.10); border-color: rgba(0,158,247,0.26); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-tentative { background: rgba(217,119,6,0.10); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-vacation { background: rgba(246,150,60,0.14); border-color: rgba(246,150,60,0.30); }
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-sub { background: rgba(2,132,199,0.12); border-color: rgba(2,132,199,0.28); }
/* No Teacher: glass-smoked stripes, readable white text, in both themes */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-noteacher {
  background: repeating-linear-gradient(45deg, rgba(24,28,50,0.82) 0 10px, rgba(24,28,50,0.66) 10px 20px);
  border-color: rgba(255,255,255,0.25); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4) .slot-noteacher { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 10px, rgba(255,255,255,0.07) 10px 20px); border-color: rgba(255,255,255,0.22); }

/* §MC: Select Teachers menu. .calendar-controls is itself a backdrop-filter layer, which
   makes it a backdrop root: the menu inside could blur only the bar, not the grid it
   overlaps, so the board showed through sharp. While the menu is open the bar drops its
   own blur (same pattern as the cards that hold an open dropdown) and the menu blurs the board. */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5) .calendar-controls:has(#compareMenu[style*="opacity: 1"]) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255,255,255,0.62) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5) .calendar-controls:has(#compareMenu[style*="opacity: 1"]) { background-color: rgba(30,36,52,0.62) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5) #compareMenu#compareMenu#compareMenu { background: rgba(255,255,255,0.66) !important; -webkit-backdrop-filter: blur(26px) saturate(180%) !important; backdrop-filter: blur(26px) saturate(180%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5) #compareMenu#compareMenu#compareMenu { background: rgba(26,30,42,0.62) !important; }

/* §MC: every colored box on the calendar is frosted, not just tinted. Slots blur what is
   behind them (the board's own glass and its glow); No Teacher stays smoked glass. The
   phone/low-power modes already drop backdrop blur in bulk (glass-lite / glass-mobile),
   so the ~1,200-slot board is not blurred there. */
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6) .cal-slot:not(.slot-booked) {
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6) .slot-booked {
  background: linear-gradient(160deg, rgba(255,214,77,0.92), rgba(255,193,0,0.80)); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6) :is(.slot-open, .slot-reserved, .slot-unavailable, .slot-excused) { background-color: rgba(255,255,255,0.34); }
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6) :is(.slot-open, .slot-reserved, .slot-unavailable, .slot-excused) { background-color: rgba(255,255,255,0.05); }
/* Cells with a hover tooltip or flash must not be clipped by their own blur layer */
html:not(.glass-off) .cal-slot:hover { -webkit-backdrop-filter: blur(10px) saturate(150%); }

/* §MC: Select Teachers menu, lighter. The board behind stays visible, softened by the blur
   (owner: "colors and texts at the back should be visible but a bit blurred, not sharp"). */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6) #compareMenu#compareMenu#compareMenu { background: rgba(255,255,255,0.34) !important; -webkit-backdrop-filter: blur(7px) saturate(170%) !important; backdrop-filter: blur(7px) saturate(170%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6) #compareMenu#compareMenu#compareMenu { background: rgba(26,30,42,0.30) !important; }

/* §MC: one softness level across the whole calendar. Whatever is behind a glass part stays
   visible, only softened (owner 2026-10-27: "visible but a bit blurred, not sharp"). */
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) .cal-slot:not(.slot-booked) { -webkit-backdrop-filter: blur(6px) saturate(150%); backdrop-filter: blur(6px) saturate(150%); }
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) .slot-booked { -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) :is(#view-master-calendar, #adminSlotModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea),
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) :is(#btn-compare-teachers, .zoom-controls) { background-color: rgba(255,255,255,0.34) !important; -webkit-backdrop-filter: blur(7px) saturate(150%); backdrop-filter: blur(7px) saturate(150%); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) :is(#view-master-calendar, #adminSlotModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea),
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) :is(#btn-compare-teachers, .zoom-controls) { background-color: rgba(255,255,255,0.05) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) :is(#a-modal-substatus-box.open, #a-modal-sub-toggle-box, #a-modal-makeup-box, #adminFamilySyncContainer.open, #a-modal-profile-btn button) { -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) .calendar-controls { background-color: rgba(255,255,255,0.30); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) .calendar-controls { background-color: rgba(30,36,52,0.24); }
/* Manage Slot: the card and the page behind it stay readable, softened */
html:not(.glass-off):not(.glass-lite):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) #adminSlotModal .alert-card { background: rgba(255,255,255,0.40) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(.glass-lite):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) #adminSlotModal .alert-card { background: rgba(26,30,42,0.36) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7) #adminSlotModal.modal-overlay::before { background: rgba(24,28,50,0.16); -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); }

/* §MC FLAT: one flat frosted texture for every calendar part, light and dark (owner
   2026-10-27, copying the Manage Slot field look): a translucent fill, a thin quiet border,
   a backdrop blur. No inset highlights, no drop shadows, no gradients, no stripes. */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#view-master-calendar, #adminSlotModal) :is(input, select, textarea, button, .cal-slot:not(.cal-slot-flash), .cal-header-cell, .cal-time-col, .cal-grid-wrapper, .calendar-controls, .zoom-controls, .morph-box, #a-modal-substatus-box, #a-modal-sub-toggle-box, #a-modal-makeup-box, #adminFamilySyncContainer),
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#btn-compare-teachers, #compareMenu, #adminSlotModal .alert-card, .cal-slot:hover:not(.cal-slot-flash), #a-modal-substatus, #a-modal-eff-date) { box-shadow: none !important; text-shadow: none !important; }
/* fields, buttons and panels: quiet 1px edge */
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#view-master-calendar, #adminSlotModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea),
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#btn-compare-teachers, .zoom-controls) { background-color: rgba(255,255,255,0.40) !important; border: 1px solid rgba(24,28,50,0.10) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#view-master-calendar, #adminSlotModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea),
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#btn-compare-teachers, .zoom-controls) { background-color: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; }
/* the two accent fields keep only a thin tinted edge, no ring */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #a-modal-substatus { border-color: rgba(255,193,0,0.55) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #a-modal-eff-date { border-color: rgba(0,158,247,0.55) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#view-master-calendar, #adminSlotModal) :is(input, select, textarea):focus { box-shadow: none !important; }
/* colored boxes: flat tint, thin edge of the same hue, blur */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #a-modal-profile-btn button { background: rgba(0,158,247,0.12) !important; border: 1px solid rgba(0,158,247,0.38) !important; border-radius: 12px; box-shadow: none !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(#a-modal-substatus-box.open, #a-modal-sub-toggle-box) { background: rgba(255,193,0,0.12) !important; border: 1px solid rgba(255,193,0,0.38) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #a-modal-makeup-box { background: rgba(0,158,247,0.10) !important; border: 1px solid rgba(0,158,247,0.32) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #a-modal-sub-toggle-box.open { background: rgba(255,193,0,0.12) !important; }
/* the boxes nested inside the yellow override box must not stack a second tint */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #a-modal-substatus-box #a-modal-makeup-box { background: rgba(0,158,247,0.10) !important; }
/* Slots: flat translucent tint + thin edge of the same hue, no stripes, no gradient, no glow */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) .slot-booked { background: rgba(255,193,0,0.72); border-color: rgba(255,193,0,0.9); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) .slot-unavailable { background: rgba(24,28,50,0.08); border-color: rgba(24,28,50,0.12); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) .slot-noteacher { background: rgba(24,28,50,0.62); border-color: rgba(24,28,50,0.7); color: #fff; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) .slot-unavailable { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) .slot-noteacher { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.28); }
/* Header cells, time column and the board itself: same flat frosted fill */
html:not(.glass-off):not([data-glass-theme="dark"]):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(.cal-header-cell, .cal-time-col):not(.active-time-highlight) { background: rgba(255,255,255,0.40) !important; border-color: rgba(24,28,50,0.08) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) :is(.cal-header-cell, .cal-time-col):not(.active-time-highlight) { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) .cal-grid-wrapper { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Menu */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #compareMenu#compareMenu#compareMenu { border: 1px solid rgba(24,28,50,0.10) !important; }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8) #compareMenu#compareMenu#compareMenu { border: 1px solid rgba(255,255,255,0.12) !important; }

/* §MC STRIPES: Unavailable and No Teacher keep their diagonal stripes, but as flat translucent
   bands over the frosted slot (the slot's backdrop blur still shows through). */
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8):not(#g-mc9) .slot-unavailable { background: repeating-linear-gradient(45deg, rgba(24,28,50,0.05) 0 10px, rgba(24,28,50,0.14) 10px 20px); }
html:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8):not(#g-mc9) .slot-noteacher { background: repeating-linear-gradient(45deg, rgba(24,28,50,0.42) 0 10px, rgba(24,28,50,0.66) 10px 20px); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8):not(#g-mc9) .slot-unavailable { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, rgba(255,255,255,0.13) 10px 20px); }
html[data-glass-theme="dark"]:not(.glass-off):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8):not(#g-mc9) .slot-noteacher { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 10px, rgba(255,255,255,0.24) 10px 20px); }
html:not(.glass-off):not(.glass-lite):not(.glass-mobile):not(#g-mc1):not(#g-mc2):not(#g-mc3):not(#g-mc4):not(#g-mc5):not(#g-mc6):not(#g-mc7):not(#g-mc8):not(#g-mc9) :is(.slot-unavailable, .slot-noteacher) { -webkit-backdrop-filter: blur(6px) saturate(150%); backdrop-filter: blur(6px) saturate(150%); }

/* ============================================================================
   §TS TRACKER SCHEDULE STRIP (2026-10-27): the student's regular class(es) and this
   week's one-off classes, between the tracker details and the action buttons. Same flat
   frosted texture as §MC FLAT: translucent fill, 1px quiet edge, blur. No inset
   highlight, no shadow, no gradient. Regular = brand-yellow tint, one-off = info-blue
   tint (the Manage Slot box colours). Chips tile in an auto-fill grid: one column on a
   phone, two or more on tablet and desktop; the two sections sit side by side when
   the card is wide enough.
   ========================================================================= */
.trk-sched { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 12px; box-sizing: border-box; }
.trk-sched-sec { flex: 1 1 280px; min-width: 0; }
.trk-sched-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.trk-sched-chip { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline; min-width: 0; padding: 8px 10px; border: 1px solid rgba(255,193,0,0.38); border-radius: 10px; background: rgba(255,193,0,0.12); font-size: 12px; line-height: 1.3; }
.trk-sched-chip.is-temp { border-color: rgba(0,158,247,0.38); background: rgba(0,158,247,0.10); }
.trk-sched-chip.is-past { opacity: 0.6; }
.trk-sched-when { font-weight: 800; font-size: 13px; color: var(--text-dark); white-space: nowrap; }
.trk-sched-time { font-weight: 700; color: var(--text-dark); text-align: right; min-width: 0; }
.trk-sched-kind { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--info, #009ef7); }
.trk-sched-who { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-sched-chip.is-temp .trk-sched-who { grid-column: 2; text-align: right; }
.trk-sched-empty { margin: 0; font-size: 12px; font-style: italic; color: var(--text-muted); }
html:not(.glass-off) .trk-sched { background: rgba(255,255,255,0.40); border-color: rgba(24,28,50,0.10); box-shadow: none; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
html[data-glass-theme="dark"]:not(.glass-off) .trk-sched { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
html:not(.glass-off) .trk-sched-chip { box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.glass-off) :is(.trk-sched-when, .trk-sched-time) { color: var(--gf-ink, #181c32); }
html:not(.glass-off) .trk-sched-who, html:not(.glass-off) .trk-sched-empty { color: var(--gf-sub, #5b6075); }
html[data-glass-theme="dark"]:not(.glass-off) .trk-sched-chip { border-color: rgba(255,193,0,0.34); background: rgba(255,193,0,0.14); }
html[data-glass-theme="dark"]:not(.glass-off) .trk-sched-chip.is-temp { border-color: rgba(0,158,247,0.40); background: rgba(0,158,247,0.16); }
html.glass-lite:not(.glass-off) :is(.trk-sched, .trk-sched-chip) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 480px) {
  .trk-sched { padding: 10px 11px; gap: 12px; }
  .trk-sched-sec { flex-basis: 100%; }
  .trk-sched-list { grid-template-columns: 1fr; }
  .trk-sched-chip { padding: 9px 10px; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .trk-sched-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
/* §TS flagged regular class (Excused, Absent, Moved, Vacation...): same chip, the flag note in the
   info text colour like a one-off's kind line, teacher on the right of that line */
.trk-sched-chip.is-flag .trk-sched-who { grid-column: 2; text-align: right; }
.trk-sched-chip.is-flag .trk-sched-kind { color: var(--text-muted); }
html:not(.glass-off) .trk-sched-chip.is-flag .trk-sched-kind { color: var(--gf-sub, #5b6075); }


/* §DM Dark-mode contrast of modal buttons and status text (owner 2026-10-27, "Give a Makeup Class?" modal; AA target).
   1. Outlined .btn-primary (inline background: var(--bg-main) / a tint / transparent): §22 forced near-black ink on a
      see-through fill (about 1.1:1). They get a frosted fill and the light page ink; the inline border colour stays.
   2. Solid green/blue/amber/yellow buttons: pages hard-code white or the generic dark-ink flip (§22b) turned the inline
      #111 light. Near-black ink is right on these fills (7:1 and up).
   3. Solid red buttons: white on #f1416c is only 3.7:1, near-black 4.2:1, so the fill deepens to #c4264e and the ink stays white (5.9:1).
   4. Red / blue / gold headings and notes use lighter dark-mode shades. Light mode is untouched. */
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) .btn-primary:is([style*="background:var(--bg-main)"], [style*="background: var(--bg-main)"], [style*="background:var(--card-bg)"], [style*="background: var(--card-bg)"], [style*="background:var(--bg-card)"], [style*="background: var(--bg-card)"], [style*="background:transparent"], [style*="background: transparent"], [style*="background:var(--brand-light)"], [style*="background: var(--brand-light)"], [style*="background:var(--success-light)"], [style*="background: var(--success-light)"], [style*="background:var(--info-light)"], [style*="background: var(--info-light)"], [style*="background:var(--danger-light)"], [style*="background: var(--danger-light)"], [style*="background:var(--warning-light)"], [style*="background: var(--warning-light)"]) {
  background: rgba(255,255,255,0.07) !important; color: var(--text-dark) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) .btn-primary:is([style*="background:var(--bg-main)"], [style*="background: var(--bg-main)"], [style*="background:var(--card-bg)"], [style*="background: var(--card-bg)"], [style*="background:var(--bg-card)"], [style*="background: var(--bg-card)"], [style*="background:transparent"], [style*="background: transparent"], [style*="background:var(--brand-light)"], [style*="background: var(--brand-light)"], [style*="background:var(--success-light)"], [style*="background: var(--success-light)"], [style*="background:var(--info-light)"], [style*="background: var(--info-light)"], [style*="background:var(--danger-light)"], [style*="background: var(--danger-light)"], [style*="background:var(--warning-light)"], [style*="background: var(--warning-light)"]):hover { background: rgba(255,255,255,0.13) !important; color: var(--text-dark) !important; filter: none; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) button:is([style*="background:var(--success)"], [style*="background: var(--success)"], [style*="background:var(--info)"], [style*="background: var(--info)"], [style*="background:var(--warning)"], [style*="background: var(--warning)"], [style*="background:var(--brand)"], [style*="background: var(--brand)"], [style*="background:#50cd89"], [style*="background: #50cd89"], [style*="background:#009ef7"], [style*="background: #009ef7"], [style*="background-color:var(--success)"], [style*="background-color: var(--success)"], [style*="background-color:var(--info)"], [style*="background-color: var(--info)"], [style*="background-color:var(--warning)"], [style*="background-color: var(--warning)"], [style*="background-color:var(--brand)"], [style*="background-color: var(--brand)"], [style*="background-color:#50cd89"], [style*="background-color: #50cd89"], [style*="background-color:#009ef7"], [style*="background-color: #009ef7"]), html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) button:is([style*="background:var(--success)"], [style*="background: var(--success)"], [style*="background:var(--info)"], [style*="background: var(--info)"], [style*="background:var(--warning)"], [style*="background: var(--warning)"], [style*="background:var(--brand)"], [style*="background: var(--brand)"], [style*="background:#50cd89"], [style*="background: #50cd89"], [style*="background:#009ef7"], [style*="background: #009ef7"], [style*="background-color:var(--success)"], [style*="background-color: var(--success)"], [style*="background-color:var(--info)"], [style*="background-color: var(--info)"], [style*="background-color:var(--warning)"], [style*="background-color: var(--warning)"], [style*="background-color:var(--brand)"], [style*="background-color: var(--brand)"], [style*="background-color:#50cd89"], [style*="background-color: #50cd89"], [style*="background-color:#009ef7"], [style*="background-color: #009ef7"]) :is(i, span) { color: #111 !important; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) :is(button, .btn):is([style*="background:var(--danger)"], [style*="background: var(--danger)"], [style*="background:#f1416c"], [style*="background: #f1416c"], [style*="background-color:var(--danger)"], [style*="background-color: var(--danger)"], [style*="background-color:#f1416c"], [style*="background-color: #f1416c"], .btn-danger, #btn-confirm-delete, #gc-confirm-btn.g-gc-yes-danger) { background: #c4264e !important; color: #fff !important; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) :is(button, .btn):is([style*="background:var(--danger)"], [style*="background: var(--danger)"], [style*="background:#f1416c"], [style*="background: #f1416c"], [style*="background-color:var(--danger)"], [style*="background-color: var(--danger)"], [style*="background-color:#f1416c"], [style*="background-color: #f1416c"], .btn-danger, #btn-confirm-delete, #gc-confirm-btn.g-gc-yes-danger) :is(i, span) { color: #fff !important; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) :is([style*="color:var(--danger)"], [style*="color: var(--danger)"], [style*="color:#f1416c"], [style*="color: #f1416c"]):not([style*="background:var(--danger)"]):not([style*="background: var(--danger)"]):not([style*="background-color"]) { color: #ff8da6 !important; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) :is([style*="color:var(--info)"], [style*="color: var(--info)"], [style*="color:#009ef7"], [style*="color: #009ef7"]):not([style*="background:var(--info)"]):not([style*="background: var(--info)"]):not([style*="background-color"]) { color: #4db8ff !important; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) :is([style*="color:var(--brand-dark)"], [style*="color: var(--brand-dark)"], [style*="color:#b07d00"], [style*="color: #b07d00"], [style*="color:#886a00"], [style*="color: #886a00"]) { color: #ffd45c !important; }
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]):not([data-glass-portal="door"]) :is(.modal-overlay, .overlay, .alert-card) .btn-secondary:not([style*="background:var(--danger)"]):not([style*="background:var(--success)"]) { color: var(--text-dark) !important; }
/* the generic confirm's Confirm button has an inline white label on the brand fill (1.9:1); both themes */
html:not(.glass-off):not(#mcA):not(#mcB) #gc-confirm-btn:not(.g-gc-yes-danger), html:not(.glass-off):not(#mcA):not(#mcB) #gc-confirm-btn:not(.g-gc-yes-danger) :is(i, span) { color: #181c32 !important; }
/* disabled primary buttons keep the greyed glass fill, so their label must not stay near-black on it */
html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.btn-primary, button, .btn):is(:disabled, [aria-disabled="true"]), html[data-glass-theme="dark"][data-glass-theme]:not(.glass-off):not(.glass-off):not(#mcA):not(#mcB):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) :is(.btn-primary, button, .btn):is(:disabled, [aria-disabled="true"]) :is(i, span) { color: rgba(236,238,244,0.64) !important; }

/* §DM2 Modal buttons follow the glass type system: the glass UI face and one weight (700, the .btn-primary weight) so
   Cancel / No makeup / Confirm no longer sit lighter than the action buttons next to them. No !important on the
   family, so a font chosen in Global Settings (settings.js) still wins. */
html:not(.glass-off):not(#mcA):not(#mcB):not(#mcC) :is(.modal-overlay, .overlay, .alert-card) button:not(.g-fbtn):not(.inline-action-btn):not([class*="close"]):not([class*="-x"]):not(.mb-pcol-x) { font-family: var(--glass-font); font-weight: 700; }

/* §DM3 Alert / confirm icon badge, flat glass (owner 2026-10-27: the glossy sphere did not match the flat frosted
   look). Same size and glyph; the radial highlight, drop glow and white rim are gone. A quiet tinted translucent fill,
   a thin tinted edge and the backdrop blur, like the fields and buttons around it. */
html:not(.glass-off):not(#mcA):not(#mcB):not(#mcC) :is(.g-alert-badge, .g-gc-badge) {
  background: var(--gf-brand-tint); background-image: none; box-shadow: none;
  border: 1px solid rgba(255,193,0,0.30);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}
html:not(.glass-off):not(#mcA):not(#mcB):not(#mcC) :is(.g-alert-card[data-kind="bad"] .g-alert-badge, .g-gc-card[data-tone="danger"] .g-gc-badge) { background: var(--gf-danger-tint); background-image: none; box-shadow: none; border-color: rgba(225,29,72,0.32); }
html:not(.glass-off):not(#mcA):not(#mcB):not(#mcC) .g-alert-card[data-kind="ok"] .g-alert-badge { background: var(--gf-ok-tint); background-image: none; box-shadow: none; border-color: rgba(22,163,74,0.32); }
html[data-glass-theme="dark"]:not(.glass-off):not(#mcA):not(#mcB):not(#mcC) :is(.g-alert-card[data-kind="bad"] .g-alert-badge, .g-gc-card[data-tone="danger"] .g-gc-badge) { color: #ff8da6; }

/* CONTRAST PASS 2026-10-29: on the frosted light cards the muted grey that Global
   Settings writes (#55536a live) measured 4.0-4.1:1, under the 4.5:1 for small text,
   because the glass lets the tinted page glow through. A slightly deeper muted ink
   in the LIGHT theme only; !important because Global Settings writes inline on <html>. */
html:not([data-glass-theme="dark"]):not(.glass-off):not([data-glass-portal="classroom"]):not([data-glass-portal="door"]) {
  --text-muted: #4a4860 !important;
}

/* CONTRAST PASS 2026-10-29: the lifted tab's LABEL sits under the yellow circle, on the dark
   bar, but inherited the circle's #111 ink (1.1:1, unreadable). Label light, icon stays dark. */
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#mcN1):not(#mcN2):not(#mcN3):not(#mcN4):not(#mcN5):not(#mcN6):not(#mcN7):not(#mcN8):not(#mcN9) .bottom-nav .nav-item.nav-lifted { color: var(--text-dark) !important; }
html[data-glass-portal="parents"][data-glass-theme="dark"]:not(.glass-off):not(#mcN1):not(#mcN2):not(#mcN3):not(#mcN4):not(#mcN5):not(#mcN6):not(#mcN7):not(#mcN8):not(#mcN9) .bottom-nav .nav-item.nav-lifted i { color: #111 !important; }

/* CONTRAST PASS 2026-10-29: every classroom pop-up is a full-screen .cr-dialog scrim carrying
   role="dialog", so the generic "modal card" rule (transparent fill, 5px yellow top line, blur
   off) was applied to the SCRIM: the room behind a pop-up was no longer dimmed and a yellow
   line ran across the top of the screen. The scrim keeps its dim + blur; the .cr-card inside
   is the frosted dialog. */
html[data-glass-portal="classroom"]:not(.glass-off):not(#crd1):not(#crd2):not(#crd3):not(#crd4):not(#crd5) .cr-dialog {
  background: rgba(8, 10, 16, 0.62) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important; backdrop-filter: blur(12px) saturate(120%) !important;
  border-color: transparent !important; box-shadow: none !important;
}