:root {
  --primary: #00677d;
  --primary-dark: #004a5a;
  --tertiary: #7d5300;
  --surface: #ffffff;
  --surface-tint: #f2f6f7;
  --text: #1a1c1d;
  --text-muted: #5b6367;
  --border: #dde3e4;
  --radius: 14px;
  --shadow: 0 12px 32px -14px rgba(10, 20, 24, 0.18);

  /* Public-site-only additions — the accent is a warm counterpoint to the
     teal primary (kept out of --primary/--tertiary so the admin panel,
     which shares this file, is unaffected), and the two font stacks are
     only ever applied under .site-body (see below). */
  --accent: #f5a524;
  --accent-dark: #c9840f;
  --accent-soft: #fef3e0;
  --font-heading: 'Poppins', 'Segoe UI', Roboto, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  color: var(--text);
  background: var(--surface);
  line-height: 1.5;
}

/* Public marketing site only (admin panel keeps the system-font stack). */
.site-body { font-family: var(--font-body); }
.site-body h1,
.site-body h2,
.site-body h3,
.site-body .brand,
.site-body .hero-eyebrow,
.site-body .eyebrow {
  font-family: var(--font-heading);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Nav */
.site-header {
  position: sticky;
  top: 0;
  /* Must outrank .nav-backdrop/.nav-links/.nav-toggle (50/55/60) as a
     whole: position:sticky + z-index makes .site-header its own stacking
     context, so its fixed-position descendants (the mobile sidebar) are
     compared against outside siblings as this single z-index, not their
     own — a lower value here traps the sidebar's links *under* the
     backdrop for click purposes even though the sidebar visually looks
     like it's on top. Stays below .lightbox-overlay's 100. */
  z-index: 70;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}
.brand .badge {
  width: calc(36px * var(--logo-scale, 1.3));
  height: calc(36px * var(--logo-scale, 1.3));
  border-radius: 50%;
  background: #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border), 0 4px 14px rgba(0, 0, 0, 0.12);
}
.badge img, .brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Platform's own brand mark (see platform_brand_mark() in Common.php) —
   .brand-mark is the icon-badge fallback shown until a real logo is
   uploaded; .brand-mark-natural is the "natural" logo-shape choice, shown
   at its own aspect ratio (no circular crop) instead of inside .badge. */
.brand-mark { background: var(--primary); color: #fff; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark-natural { width: auto; object-fit: contain; display: block; } /* height/max-width set inline from Site Settings */

/* A school's brand mark before it's uploaded a real logo (see
   school_brand_mark() in Common.php) — a colored circle with its name's
   first letter, sized to match where a real logo would go, rather than a
   generic stock image. */
.brand-mark-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.nav-links { display: flex; gap: 24px; }
.nav-links a { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 0.95rem; }
.nav-links a:hover { color: var(--primary); text-decoration: none; }
.nav-links a svg { display: none; } /* icons are a mobile-sidebar touch only — see the 640px breakpoint below */
.nav-links-login,
.nav-links-head { display: none; } /* shown only in the mobile sidebar — see the 640px breakpoint below */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  position: relative;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin: 0 0 14px; font-weight: 700; letter-spacing: -0.02em; }
.hero p { font-size: 1.1rem; opacity: 0.9; max-width: 560px; margin: 0 auto; line-height: 1.7; font-weight: 400; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 199, 129, 0.4);
  color: #f2d9ac;
  border-radius: 999px;
  padding: 6px 16px 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}
.hero-eyebrow svg { width: 14px; height: 14px; }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 8px 18px 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.stat-pill svg { width: 14px; height: 14px; color: #e0b26e; }
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.btn-hero-primary {
  display: inline-block;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 26px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.btn-hero-primary:hover { transform: translateY(-2px); text-decoration: none; }
.btn-hero-ghost {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 26px;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.22); text-decoration: none; }

/* Hero: no banners uploaded yet — a deep, single-tone gradient with one
   restrained gold glow, rather than several bright overlapping accents. */
.hero-plain {
  background:
    radial-gradient(48% 70% at 82% 8%, rgba(224, 178, 110, 0.16) 0%, transparent 65%),
    linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 50%, #062024 100%);
  padding: 104px 0 88px;
}

/* Hero: banner carousel on top, edge to edge; the usual heading/stats/CTA
   content sits below it in normal flow (on the same dark gradient
   .hero-plain uses) rather than overlaid on top of the media — a video
   banner in particular needs its own space, not text floating over it. */
/* Background paints here (full-width section), not on .hero-content —
   .hero-content also carries .container (max-width:1080px, centered), so a
   background painted directly on it would show as a narrow centered card
   with big empty gutters on both sides instead of a full-bleed band behind
   the text, mismatched against the edge-to-edge video above it. */
.hero-slider {
  display: block;
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 50%, #062024 100%);
}
.hero-media {
  position: relative;
  /* 16:9 (standard landscape video/photo shape) rather than a fixed short
     height — the old clamp(220px, 32vw, 400px) worked out to ~4:1-4.75:1
     on a normal desktop width, so a real 16:9 YouTube video (1.78:1) was
     nowhere near wide enough to fill it and letterboxed hard with black
     bars on both sides (an iframe's own player does that pillarboxing
     itself — nothing on this page's side can crop into it, so getting the
     container's shape right up front is the only real fix). max-height
     keeps it from growing enormous on very wide monitors — BUT explicit
     width:100% is required alongside it: with width left as the block
     default (auto), Chromium's aspect-ratio sizing derives width back down
     from the max-height-clamped height instead of the other way around
     (max-height:560px + ratio 16/9 rendered a ~996px-wide box, roughly
     half the page, confirmed via a local headless-Chrome screenshot test
     before this fix and after). Forcing width to a definite 100% removes
     that ambiguity, so max-height only ever clamps height. */
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  overflow: hidden;
}
.hero-slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.6s ease;
}
.hero-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; }
.hero-slide a, .hero-slide img, .hero-slide video { display: block; width: 100%; height: 100%; }
.hero-slide video { object-fit: cover; }
/* Uploaded banner posters are rarely a clean 16:9 — schools commonly design
   them as wide promotional graphics (~3:1-4:1) with headline text and a
   phone number/CTA near the left/right edges. object-fit:cover at 16:9
   crops the SIDES off an image proportionally wider than the box (cutting
   that edge text), so images fit as a whole within the frame instead —
   letterboxed against the hero's own dark gradient rather than cropped.
   Video keeps cover: real 16:9 footage already matches the box, so cover
   there produces no bars in the first place. */
.hero-slide img {
  object-fit: contain;
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 50%, #062024 100%);
}
.hero-slide-youtube iframe { display: block; width: 100%; height: 100%; border: none; background: #000; pointer-events: none; }
.hero-slider .hero-content {
  width: 100%;
  padding: 56px 0 60px;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.hero-nav:hover { background: rgba(255, 255, 255, 0.34); }
.hero-nav svg { width: 22px; height: 22px; }
.hero-nav-prev { left: 16px; }
.hero-nav-next { right: 16px; }

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.hero-dots button.active { background: #fff; transform: scale(1.15); }

@media (max-width: 640px) {
  .hero-nav { width: 34px; height: 34px; }
  .hero-nav svg { width: 18px; height: 18px; }
  .hero-nav-prev { left: 10px; }
  .hero-nav-next { right: 10px; }
}

/* Compact page header for /notices, /events, /gallery */
.page-hero {
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 60%, #062024 100%);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.page-hero h1 { margin: 8px 0 0; font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 700; }
.page-hero .hero-eyebrow { margin-bottom: 0; }

.notice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.notice-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.notice-card-title { display: flex; align-items: center; gap: 12px; }
.notice-card-title .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notice-card-title .icon svg { width: 17px; height: 17px; }
.notice-card-title h2 { font-size: 1.05rem; margin: 0; }
.notice-card-date { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }
.notice-card p { margin: 0; color: var(--text); line-height: 1.65; }

.event-detail-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.event-detail-image { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-tint); }
.event-detail-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.event-detail-image-placeholder { display: flex; align-items: center; justify-content: center; color: var(--primary); }
.event-detail-image-placeholder svg { width: 30px; height: 30px; opacity: 0.5; }
button.event-detail-image {
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  background: none;
  cursor: zoom-in;
  display: block;
}
button.event-detail-image:hover img { transform: scale(1.06); }
.event-detail-body h2 { font-size: 1.15rem; margin: 0 0 8px; }
.event-detail-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.event-detail-meta span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }
.event-detail-meta svg { width: 15px; height: 15px; }
.event-detail-body p { margin: 0; color: var(--text); line-height: 1.65; }

@media (max-width: 560px) {
  .event-detail-card { grid-template-columns: 1fr; }
}

/* Sections */
section.block { padding: 76px 0; }
section.block.tinted { background: var(--surface-tint); }

/* Gentle scroll-reveal — progressive enhancement only: sections stay fully
   visible unless site/_header.php's inline script confirms JS + IntersectionObserver
   support and marks <body>, so a JS failure never hides content. .in-view is
   added the first time a section scrolls into view. */
body.js-reveal section.block { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
body.js-reveal section.block.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  body.js-reveal section.block { opacity: 1; transform: none; transition: none; }
}
.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 34px;
  gap: 16px;
}
.section-title h2 { font-size: 1.7rem; margin: 8px 0 0; font-weight: 700; letter-spacing: -0.01em; }
.section-title p { margin: 10px 0 0; color: var(--text-muted); font-size: 0.98rem; max-width: 560px; }
.section-title.centered { flex-direction: column; align-items: center; text-align: center; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.section-title.centered .eyebrow { justify-content: center; }
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.section-title .view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  padding-bottom: 4px;
}
.section-title .view-all svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.section-title .view-all:hover svg { transform: translateX(3px); }

/* Cards / grid */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.about-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface-tint);
  color: var(--primary);
  margin-bottom: 16px;
}
.about-badge svg { width: 26px; height: 26px; }
.about-card p { margin: 0; line-height: 1.7; color: var(--text); font-size: 1.02rem; }

/* Vision & Mission */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
/* Marketing home/about feature grids (3 or 6 .mission-card items) — same
   idea as .mission-grid, one column wider. These used to be an inline
   style="display:grid;grid-template-columns:repeat(3,1fr)" directly in the
   view (home.php/about.php), which meant NO media query ever applied to
   them (an inline style can't be overridden by a class-based breakpoint
   rule below it in the cascade) — on a narrow phone, 3 fixed 1fr columns
   have no room to shrink into, so the whole page overflowed horizontally
   and everything (nav bar included) appeared cut off at the same width.
   Fixed by moving this to an actual class both pages can share. */
.mission-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .mission-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mission-grid-3 { grid-template-columns: 1fr; }
}
.mission-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 30px;
  box-shadow: var(--shadow);
}
.mission-card .about-badge { background: var(--accent-soft); color: var(--accent-dark); }
.mission-card h3 { margin: 2px 0 10px; font-size: 1.15rem; font-weight: 700; }
.mission-card p { margin: 0; line-height: 1.7; color: var(--text); }
@media (max-width: 640px) {
  .mission-grid { grid-template-columns: 1fr; }
}

/* Branches */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
  max-width: 1100px;
  margin: 0 auto;
}
.branch-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.branch-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(0,0,0,0.12); border-color: var(--primary); }
.branch-card-banner {
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.branch-card-banner.is-muted { background: linear-gradient(135deg, #b9c2c6 0%, #8f9a9f 100%); }
.branch-card-banner svg { width: 34px; height: 34px; color: #fff; }
.branch-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.branch-card h3 { margin: 0 0 10px; font-size: 1.22rem; font-weight: 800; line-height: 1.3; }
.branch-card-board {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.branch-card-address {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 0.87rem;
  line-height: 1.5;
  margin: 0 0 18px;
}
.branch-card-address svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.branch-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
}
.branch-card-cta svg { width: 16px; height: 16px; transition: transform .15s ease; }
a.branch-card:hover .branch-card-cta svg { transform: translateX(3px); }
.branch-card-pending { margin-top: auto; color: var(--text-muted); font-size: 0.82rem; font-style: italic; }

.facility-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; max-width: 760px; margin-left: auto; margin-right: auto; }
.facility-list li { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.95rem; }
.facility-list svg { width: 18px; height: 18px; color: var(--success, #16a34a); flex-shrink: 0; }

/* Our Team */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.staff-card { text-align: center; }
.staff-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  display: block;
  box-shadow: var(--shadow);
}
.staff-photo-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  color: var(--primary);
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.staff-card h4 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; }
.staff-card p { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.staff-role-badge { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

/* Site Style — "Bold" and "Playful" (Web\Admin\BrandingController's "Site
   Style" picker sets body.style-bold/body.style-playful on .site-body;
   "classic" adds no class at all, i.e. everything below is opt-in and the
   default look is completely untouched). Same sections/content, different
   presentation — see Web\SiteController::home()/site/_header.php. */

/* --- Bold: bigger, higher-contrast, structured with accent-colored top borders and angled section edges. --- */
body.style-bold .hero-plain {
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent-dark) 100%);
  padding: 128px 0 108px;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}
/* A slider banner's own image/video area covers .hero-media; the
   heading/stats/CTA content below it (.hero-slider, the full-width
   section — not .hero-content, which also carries .container and would
   paint the background as a narrow centered card) has its own separate
   background in the base styles, so it needs the same re-skin here —
   otherwise it's stuck on the classic dark teal gradient regardless of
   which style is chosen. */
body.style-bold .hero-slider {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent-dark) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}
body.style-bold .hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); }
body.style-bold .hero-eyebrow { background: var(--accent); color: #241900; border: none; padding: 7px 16px; border-radius: 999px; font-weight: 800; }
body.style-bold .stat-pill { background: rgba(255, 255, 255, 0.94); color: var(--primary-dark); border: none; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
body.style-bold .stat-pill svg { color: var(--accent-dark); }
body.style-bold .btn-hero-primary { border-radius: 999px; padding: 14px 30px; font-size: 0.98rem; }
body.style-bold .btn-hero-ghost { border-radius: 999px; padding: 14px 30px; font-size: 0.98rem; border-width: 2px; }
body.style-bold .section-title h2 { font-size: 2rem; }
body.style-bold .eyebrow { font-weight: 800; }
body.style-bold .about-card,
body.style-bold .mission-card,
body.style-bold .event-card,
body.style-bold .list-tile,
body.style-bold a.contact-item,
body.style-bold .contact-item,
body.style-bold .branch-card,
body.style-bold .staff-card,
body.style-bold .principal-card {
  border-top: 4px solid var(--primary);
}
body.style-bold .gallery-tile { border: 3px solid var(--surface); box-shadow: 0 10px 26px -10px rgba(10, 20, 24, 0.35); }
/* Matches this style's own hero-slider background — the letterbox behind a
   contained (uncropped) image banner should blend with the surrounding
   hero, not the classic style's fixed dark teal gradient. */
body.style-bold .hero-slide img { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent-dark) 100%); }
body.style-bold .event-card:hover { transform: translateY(-5px) scale(1.01); }
body.style-bold .branch-card-banner { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); height: 110px; }

/* --- Playful: pastel hero, fully rounded shapes, an organic blob accent behind the hero. --- */
body.style-playful .hero-plain {
  background: linear-gradient(160deg, var(--surface-tint) 0%, var(--accent-soft) 100%);
  padding: 96px 0 84px;
  color: var(--text);
}
/* Same reasoning as body.style-bold's .hero-slider rule — a slider
   banner's content area has its own separate background that otherwise
   stays on the classic dark gradient (with now-dark text on top of it,
   from the body.style-playful .hero color override below — without this,
   that'd be nearly illegible). */
body.style-playful .hero-slider {
  background: linear-gradient(160deg, var(--surface-tint) 0%, var(--accent-soft) 100%);
}
body.style-playful .hero { color: var(--text); }
/* Only .hero-plain (no slider) — with a banner slider active, .hero's top
   is the media area, not the text content, so this would sit oddly over
   the slider image instead of behind the heading. */
body.style-playful .hero-plain::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -8%;
  width: 46vw;
  height: 46vw;
  max-width: 520px;
  max-height: 520px;
  background: var(--primary);
  opacity: 0.12;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  z-index: 0;
}
body.style-playful .hero-content { position: relative; z-index: 1; }
body.style-playful .hero h1 { color: var(--text); }
body.style-playful .hero p { color: var(--text-muted); opacity: 1; }
body.style-playful .hero-eyebrow { background: var(--accent-soft); color: var(--accent-dark); border-radius: 999px; padding: 7px 16px; }
body.style-playful .stat-pill { background: var(--surface); color: var(--text); border: 2px dashed var(--border); }
body.style-playful .stat-pill svg { color: var(--primary); }
body.style-playful .btn-hero-primary { background: var(--primary); color: #fff; border-radius: 999px; }
body.style-playful .btn-hero-ghost { background: transparent; border: 2px solid var(--primary); color: var(--primary); border-radius: 999px; }
body.style-playful .btn-hero-ghost:hover { background: var(--surface-tint); }
body.style-playful .about-card,
body.style-playful .mission-card,
body.style-playful .event-card,
body.style-playful .list-tile,
body.style-playful a.contact-item,
body.style-playful .contact-item,
body.style-playful .branch-card,
body.style-playful .staff-card .staff-photo,
body.style-playful .staff-card .staff-photo-fallback,
body.style-playful .principal-card,
body.style-playful .gallery-tile,
body.style-playful .event-card-image,
body.style-playful .branch-card-banner {
  border-radius: 26px;
}
body.style-playful .about-badge,
body.style-playful .staff-photo-fallback {
  border-radius: 50%;
}
body.style-playful .section-title h2 { font-weight: 800; }
body.style-playful .eyebrow { color: var(--accent-dark); }
/* Same reasoning as body.style-bold's .hero-slide img rule above. */
body.style-playful .hero-slide img { background: linear-gradient(160deg, var(--surface-tint) 0%, var(--accent-soft) 100%); }

/* --- Minimal: quiet whitespace, hairline borders, no color-blocked hero — the opposite of Bold/Playful. --- */
body.style-minimal .hero-plain {
  background: var(--surface-tint);
  padding: 108px 0 92px;
}
body.style-minimal .hero-slider { background: var(--surface-tint); }
body.style-minimal .hero { color: var(--text); }
body.style-minimal .hero h1 { font-weight: 600; letter-spacing: -0.01em; text-shadow: none; }
body.style-minimal .hero p { color: var(--text-muted); opacity: 1; }
body.style-minimal .hero-eyebrow { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; }
body.style-minimal .stat-pill { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: none; }
body.style-minimal .stat-pill svg { color: var(--primary); }
body.style-minimal .btn-hero-primary { background: var(--text); color: #fff; border-radius: 6px; box-shadow: none; }
body.style-minimal .btn-hero-ghost { background: transparent; border: 1px solid var(--text); color: var(--text); border-radius: 6px; }
body.style-minimal .btn-hero-ghost:hover { background: rgba(0, 0, 0, 0.05); }
body.style-minimal .section-title h2 { font-weight: 600; letter-spacing: -0.01em; }
body.style-minimal .eyebrow { font-weight: 600; }
body.style-minimal .eyebrow::before { background: var(--text-muted); }
body.style-minimal .about-card,
body.style-minimal .mission-card,
body.style-minimal .event-card,
body.style-minimal .list-tile,
body.style-minimal a.contact-item,
body.style-minimal .contact-item,
body.style-minimal .branch-card,
body.style-minimal .staff-card,
body.style-minimal .principal-card {
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}
body.style-minimal .gallery-tile { border: 1px solid var(--border); box-shadow: none; }
body.style-minimal .event-card-image,
body.style-minimal .branch-card-banner { border-radius: 6px; }
body.style-minimal .event-card:hover { transform: none; box-shadow: none; border-color: var(--primary); }
body.style-minimal .hero-slide img { background: var(--surface-tint); }

/* --- Academic: formal serif headings, a solid deep hero framed by a gold rule — a traditional prospectus look. --- */
body.style-academic .hero-plain {
  background: var(--primary-dark);
  padding: 100px 0 84px;
  border-top: 6px solid var(--accent);
  border-bottom: 6px solid var(--accent);
}
body.style-academic .hero-slider {
  background: var(--primary-dark);
  border-top: 6px solid var(--accent);
  border-bottom: 6px solid var(--accent);
}
body.style-academic .hero h1,
body.style-academic .section-title h2,
body.style-academic h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
body.style-academic .hero-eyebrow { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; letter-spacing: 0.22em; }
body.style-academic .stat-pill { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 2px; }
body.style-academic .btn-hero-primary { background: var(--accent); color: #241900; border-radius: 2px; box-shadow: none; }
body.style-academic .btn-hero-ghost { border-radius: 2px; }
body.style-academic .eyebrow { color: var(--accent-dark); font-weight: 700; }
body.style-academic .about-card,
body.style-academic .mission-card,
body.style-academic .event-card,
body.style-academic .list-tile,
body.style-academic a.contact-item,
body.style-academic .contact-item,
body.style-academic .branch-card,
body.style-academic .staff-card,
body.style-academic .principal-card {
  border-radius: 2px;
  border-top: 3px double var(--accent-dark);
}
body.style-academic .gallery-tile,
body.style-academic .event-card-image,
body.style-academic .branch-card-banner {
  border-radius: 2px;
}
body.style-academic .hero-slide img { background: var(--primary-dark); }

/* --- Modern: dark gradient-mesh hero, frosted-glass pills, vibrant accents. --- */
body.style-modern .hero-plain {
  background:
    radial-gradient(55% 80% at 15% 10%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    radial-gradient(60% 90% at 85% 100%, var(--accent) 0%, transparent 55%),
    radial-gradient(70% 100% at 100% 0%, var(--primary) 0%, transparent 60%),
    #0b1220;
  padding: 116px 0 100px;
}
body.style-modern .hero-slider {
  background:
    radial-gradient(60% 90% at 85% 100%, var(--accent) 0%, transparent 55%),
    radial-gradient(70% 100% at 100% 0%, var(--primary) 0%, transparent 60%),
    #0b1220;
}
body.style-modern .hero-eyebrow {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
body.style-modern .stat-pill {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body.style-modern .btn-hero-primary {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5);
}
body.style-modern .btn-hero-ghost {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.style-modern .section-title h2 { font-weight: 800; }
body.style-modern .about-card,
body.style-modern .mission-card,
body.style-modern .event-card,
body.style-modern .list-tile,
body.style-modern a.contact-item,
body.style-modern .contact-item,
body.style-modern .branch-card,
body.style-modern .staff-card,
body.style-modern .principal-card {
  border-radius: 18px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 14px 34px -18px rgba(10, 20, 24, 0.35);
}
body.style-modern .gallery-tile,
body.style-modern .event-card-image,
body.style-modern .branch-card-banner {
  border-radius: 18px;
}
body.style-modern .event-card:hover { transform: translateY(-5px); }
body.style-modern .hero-slide img {
  background:
    radial-gradient(60% 90% at 85% 100%, var(--accent) 0%, transparent 55%),
    radial-gradient(70% 100% at 100% 0%, var(--primary) 0%, transparent 60%),
    #0b1220;
}

/* Principal's Message */
.principal-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: var(--shadow);
}
.principal-quote-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.principal-quote-mark svg { width: 22px; height: 22px; }
.principal-card blockquote {
  margin: 0 0 22px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text);
}
.principal-attribution { display: flex; align-items: center; gap: 12px; }
.principal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--tertiary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.principal-attribution strong { display: block; font-size: 0.98rem; }
.principal-attribution span { color: var(--text-muted); font-size: 0.84rem; }
@media (max-width: 640px) {
  .principal-card { padding: 30px 24px; }
}

.tile-list { display: flex; flex-direction: column; gap: 10px; }
.list-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.list-tile:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.list-tile .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.list-tile .icon svg { width: 18px; height: 18px; }
.list-tile .title { font-weight: 600; flex: 1; }
.list-tile .meta { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

/* Events */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(10, 20, 24, 0.28); }
.event-card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-tint); position: relative; }
.event-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.event-card-image-placeholder { display: flex; align-items: center; justify-content: center; color: var(--primary); }
.event-card-image-placeholder svg { width: 34px; height: 34px; opacity: 0.5; }
button.event-card-image {
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  background: none;
  cursor: zoom-in;
  display: block;
}
button.event-card-image:hover img { transform: scale(1.06); }
.event-card-body { padding: 18px 20px; }
.event-card-date {
  display: inline-block;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.event-card-body h3 { margin: 0 0 8px; font-size: 1.05rem; }
.event-card-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.event-card-location svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  background: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1;
  cursor: pointer;
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 12px 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gallery-tile:hover .gallery-tile-caption { opacity: 1; transform: translateY(0); }
.gallery-tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
}
.gallery-tile-play svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.gallery-tile:hover .gallery-tile-play { background: rgba(0, 0, 0, 0.28); }

/* Gallery albums — first-level "pick an album" view (admin + public site). */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}
.album-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.album-card:hover .album-cover img { transform: scale(1.06); }
.album-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--admin-bg, #f1f5f6);
  box-shadow: var(--shadow, 0 2px 10px rgba(0, 0, 0, 0.08));
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.album-cover-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
}
.album-cover-play svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.album-name { font-weight: 700; font-size: 0.95rem; }
.album-count { font-size: 0.8rem; color: var(--text-muted); }

/* Lightbox (gallery photo zoom) */
body.lightbox-locked { overflow: hidden; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 14, 17, 0.92);
  padding: 60px 20px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-figure {
  margin: 0;
  max-width: min(90vw, 1000px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-image {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 16px;
  text-align: center;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.1rem;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (max-width: 640px) {
  .lightbox-overlay { padding: 20px 12px; }
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-close { top: 10px; right: 10px; width: 36px; height: 36px; }
}

.empty-message { color: var(--text-muted); padding: 8px 0; }

/* Module teasers */
.module-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.module-chip {
  flex: 0 0 auto;
  width: 96px;
  text-align: center;
  padding: 16px 8px;
  border-radius: 16px;
  background: var(--surface-tint);
  font-size: 0.8rem;
  font-weight: 600;
}
.module-chip .glyph { font-size: 1.4rem; display: block; margin-bottom: 6px; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.contact-item:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.contact-item .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item .icon svg { width: 19px; height: 19px; }
.contact-item strong { display: block; font-size: 0.82rem; margin-bottom: 2px; }
.contact-item > span:last-child { display: flex; flex-direction: column; gap: 2px; word-break: break-word; }

/* Footer */
.site-footer { background: var(--sidebar-bg, #0c2b33); color: rgba(255, 255, 255, 0.75); padding-top: 48px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-col h3 { color: #fff; font-size: 0.9rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-brand .brand { color: #fff; margin-bottom: 12px; }
.footer-brand .brand .badge { background: #fff; }
.footer-about { font-size: 0.88rem; line-height: 1.6; margin: 0; max-width: 340px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; font-weight: 500; }
.footer-links a:hover { color: #fff; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; opacity: 0.8; }
.footer-bottom { padding: 18px 0; }
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-legal-link { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer-legal-link:hover { color: #fff; text-decoration: underline; }
.footer-bottom-inner .footer-legal-link::before { content: '·'; margin-right: 10px; }

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Mobile bottom quick-access bar (Home / School login / Syllabus) and the
   sidebar's backdrop — both hidden outside the mobile breakpoint below. */
.mobile-bottom-nav { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 640px) {
  .nav-toggle { display: flex; z-index: 60; position: relative; }

  /* Full-height slide-in sidebar, not a dropdown — opens from the left over a dimmed backdrop. */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw, 300px);
    flex-direction: column;
    background: #ffffff;
    padding: 0 18px 24px;
    gap: 2px;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 55;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }

  .nav-links-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -18px 12px;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark) 65%, var(--tertiary));
    color: #fff;
  }
  .nav-links-head-brand { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
  .nav-links-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .nav-links-close:hover { background: rgba(255, 255, 255, 0.3); }
  .nav-links-close svg { display: block !important; width: 16px; height: 16px; }

  .nav-links a {
    padding: 13px 12px;
    margin: 0 -12px;
    border-radius: 12px;
    font-size: 1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .nav-links a svg { display: block; width: 19px; height: 19px; color: var(--primary); flex-shrink: 0; }
  .nav-links a:hover,
  .nav-links a:active { background: var(--surface-tint); color: var(--primary); }

  .nav-links-login {
    display: flex;
    margin-top: 10px;
    background: var(--primary);
    color: #fff !important;
    font-weight: 700;
    justify-content: center;
  }
  /* The marketing header's standalone "School Login" button — replaced by
     .nav-links-login inside the sidebar on mobile, so it doesn't also sit
     squeezed in the header bar next to the hamburger. */
  .nav-header-cta { display: none; }
  .nav-links-login svg { color: #fff !important; }
  .nav-links-login:hover { background: var(--primary-dark); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 50;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }

  .hero h1 { font-size: 1.7rem; }

  /* Bottom bar sits above everything else and needs the page content to
     clear it — see .site-body's padding-bottom below — so it never
     covers the footer or the last bit of scrollable content. */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 45;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
  }
  .mobile-bottom-nav a:hover { text-decoration: none; color: var(--primary); }
  .mobile-bottom-nav svg { width: 22px; height: 22px; }

  .site-body { padding-bottom: 60px; }
}

/* ------------------------------------------------------------------ */
/* Admin area                                                          */
/* ------------------------------------------------------------------ */

:root {
  --sidebar-bg: #0c2b33;
  --sidebar-bg-soft: #123842;
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(255, 255, 255, 0.14);
  --sidebar-text: rgba(255, 255, 255, 0.68);
  --sidebar-text-strong: #ffffff;
  --admin-bg: #f4f7f8;
  --admin-border: #e4e9ea;
  --admin-shadow: 0 1px 2px rgba(16, 24, 27, 0.04), 0 8px 24px rgba(16, 24, 27, 0.06);
  --success: #1e7a3d;
  --success-bg: #e6f4ea;
  --danger: #b3261e;
  --danger-bg: #fdecea;
}

.admin-body { background: var(--admin-bg); }

.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* Sidebar */
.admin-sidebar {
  width: 248px;
  flex: 0 0 248px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  color: var(--sidebar-text-strong);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-brand:hover { text-decoration: none; }
.admin-brand .brand-badge {
  width: calc(36px * var(--logo-scale, 1.3));
  height: calc(36px * var(--logo-scale, 1.3));
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.admin-brand .brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

.admin-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.admin-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--sidebar-text);
  font-weight: 600;
  font-size: 0.88rem;
}
.admin-nav .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; }
.admin-nav .nav-item.active { background: var(--sidebar-active); color: var(--sidebar-text-strong); }
.admin-nav .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-left: auto; flex-shrink: 0; }
.nav-item-badge {
  margin-left: auto;
  flex-shrink: 0;
  background: #e5484d;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.nav-section-label {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 12px 4px;
}
.nav-section-label:first-child { padding-top: 4px; }

.admin-sidebar-footer {
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sidebar-text);
  font-size: 0.82rem;
  font-weight: 600;
}
.sidebar-footer-link:hover { color: var(--sidebar-text-strong); text-decoration: none; }
.sidebar-footer-link svg { width: 15px; height: 15px; }

/* Content column */
.admin-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  height: 66px;
  background: var(--surface);
  border-bottom: 1px solid var(--admin-border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.admin-page-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-menu-toggle {
  display: none;
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text);
}
.admin-menu-toggle svg { width: 22px; height: 22px; }

.admin-user-chip { display: flex; align-items: center; gap: 10px; }
.admin-user-link { display: flex; align-items: center; gap: 10px; color: inherit; }
.admin-user-link:hover { text-decoration: none; opacity: 0.85; }
.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-logout-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
}
.admin-logout-link:hover { background: var(--admin-bg); color: var(--danger); text-decoration: none; }
.admin-logout-link svg { width: 17px; height: 17px; }

.admin-main { padding: 28px 28px 60px; flex: 1; }
.admin-main-inner { max-width: 1100px; }

.admin-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.admin-title-row h1 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.admin-subtitle { color: var(--text-muted); font-size: 0.88rem; margin: 4px 0 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.87rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0, 103, 125, 0.25); }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-danger { background: #fff; color: var(--danger); border-color: #f0c3bd; }
.btn-danger:hover { background: var(--danger-bg); text-decoration: none; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--admin-border); }
.btn-ghost:hover { background: var(--admin-bg); text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; border-radius: 7px; }

/* Alerts */
.alert {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 0.88rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.alert-error { background: var(--danger-bg); color: #7a231c; border-color: #f3b4ac; }
.alert-success { background: var(--success-bg); color: #1e4620; border-color: #a8dab5; }

/* Cards */
.admin-card {
  background: var(--surface);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--admin-shadow);
  margin-bottom: 20px;
}
.admin-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-card-header h2 { margin: 0; font-size: 1rem; font-weight: 700; }

/* Subscription — plan cards (admin/subscription.php) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.plan-card {
  background: var(--surface);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--admin-shadow);
  display: flex;
  flex-direction: column;
}
.plan-card-current { border-color: var(--primary); border-width: 2px; }
.plan-price { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.plan-price .hint { font-size: 0.8rem; font-weight: 500; }
.plan-features { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.plan-features li { padding: 6px 0; border-bottom: 1px dashed var(--admin-border); font-size: 0.88rem; color: var(--text-muted); }
.plan-features li:last-child { border-bottom: none; }
.subscribe-btn { width: 100%; }
.subscribe-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.83rem; margin-bottom: 7px; color: var(--text); }
.form-group .hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 5px; }
.form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 103, 125, 0.12);
}
textarea.form-control { resize: vertical; min-height: 90px; }

.logo-size-picker { display: flex; gap: 16px; flex-wrap: wrap; }
.logo-size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 16px;
  border: 2px solid var(--admin-border);
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.logo-size-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.logo-size-option.selected { border-color: var(--primary); background: var(--admin-bg); }
.logo-size-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--admin-border);
  overflow: hidden;
  flex-shrink: 0;
}
.logo-size-preview img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.logo-size-label { font-weight: 600; font-size: 0.85rem; }

.password-field { position: relative; }
.password-field .form-control { padding-right: 42px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.password-toggle:hover { background: var(--admin-bg); color: var(--text); }
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle span { display: flex; align-items: center; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.showing .icon-eye { display: none; }
.password-toggle.showing .icon-eye-off { display: flex; }
.search-field { position: relative; max-width: 340px; margin-bottom: 18px; }
.search-field svg { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; }
.search-field .form-control { padding-left: 40px; }

.voice-field { position: relative; display: block; }
.voice-field .form-control { padding-right: 42px; }
.voice-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.voice-btn.voice-btn-top { top: 8px; transform: none; }
.voice-btn:hover { background: var(--admin-bg); color: var(--text); }
.voice-btn.listening { color: #e03131; background: rgba(224, 49, 49, 0.1); }
.voice-btn.listening::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e03131;
  animation: voice-pulse 1s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 9px; }
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); }
.checkbox-row label { font-weight: 600; font-size: 0.85rem; }

.menu-order-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.menu-order-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: grab;
}
.menu-order-row.dragging { opacity: 0.4; }
.menu-order-handle { color: var(--text-muted); font-size: 1.1rem; line-height: 1; user-select: none; }
.menu-order-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-order-info .hint { margin: 0; }
.menu-order-row .checkbox-row { flex-shrink: 0; }
.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 16px;
  padding: 14px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-bg);
}
.permission-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-bg);
}
.permission-matrix { width: 100%; border-collapse: collapse; min-width: 480px; }
.permission-matrix th,
.permission-matrix td {
  padding: 9px 12px;
  text-align: center;
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
}
.permission-matrix tbody tr:last-child th,
.permission-matrix tbody tr:last-child td { border-bottom: none; }
.permission-matrix th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 700; }
.permission-matrix td:first-child,
.permission-matrix th:first-child { text-align: left; font-size: 0.85rem; font-weight: 600; }
.permission-matrix input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
.permission-matrix .perm-select-all { accent-color: var(--text-muted); }
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--admin-border);
}

/* Tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 13px 14px;
  font-size: 0.87rem;
  vertical-align: middle;
}
.admin-table thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--admin-border);
}
.admin-table tbody tr { border-bottom: 1px solid var(--admin-border); transition: background-color .1s ease; }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--admin-bg); }
.admin-table td.title-cell { font-weight: 600; }
.admin-table img.thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
}
.admin-table .actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.whatsapp-share-btn { color: #25D366; border-color: #25D366; }
.whatsapp-share-btn:hover { background: #25D366; color: #fff; }
.whatsapp-share-btn svg { width: 16px; height: 16px; }
.whatsapp-sent-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; color: var(--success); white-space: nowrap;
}
.whatsapp-sent-badge svg { width: 14px; height: 14px; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-neutral { background: var(--admin-bg); color: var(--text-muted); }
.badge-info { background: #e6f0f2; color: var(--primary-dark); }
.badge-warning { background: var(--danger-bg); color: var(--danger); }

.hw-photo-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.hw-photo-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--admin-border); }

.theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--admin-border);
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.theme-swatch:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.theme-swatch-default {
  background-image: repeating-conic-gradient(var(--admin-border) 0% 25%, var(--surface) 0% 50%);
  background-size: 10px 10px;
}
.theme-swatch-logo { background: var(--admin-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.theme-swatch-logo svg { width: 16px; height: 16px; }
.logo-color-pick { cursor: crosshair; border-radius: 6px; transition: box-shadow .12s ease; }
.logo-color-pick:hover { box-shadow: 0 0 0 3px rgba(0, 103, 125, 0.25); }

.style-card { cursor: pointer; border-radius: 12px; padding: 8px; border: 2px solid transparent; transition: border-color .12s ease, background .12s ease; }
.style-card:hover { border-color: var(--admin-border); }
.style-card.selected { border-color: var(--primary); background: var(--admin-bg); }
.style-preview { height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid var(--admin-border); background: #fff; padding: 6px; }
.style-preview-hero { height: 42px; border-radius: 4px; margin-bottom: 6px; }
.style-preview-row { display: flex; gap: 4px; }
.style-preview-chip { flex: 1; height: 18px; border-radius: 3px; background: #e8edee; }
.style-preview-classic .style-preview-hero { background: linear-gradient(135deg, #004a5a, #00677d); }
.style-preview-bold .style-preview-hero { background: linear-gradient(135deg, #004a5a, #f5a524); clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.style-preview-bold .style-preview-chip { border-radius: 2px; border-top: 2px solid #00677d; }
.style-preview-playful .style-preview-hero { background: linear-gradient(160deg, #f2f6f7 40%, #fef3e0 100%); }
.style-preview-playful .style-preview-chip { border-radius: 999px; }
.style-preview-minimal .style-preview-hero { background: #fff; border: 1px solid #dde3e4; }
.style-preview-minimal .style-preview-chip { background: #fff; border: 1px solid #dde3e4; border-radius: 2px; }
.style-preview-academic .style-preview-hero { background: #1c2b3a; border-top: 3px solid #b08a3e; }
.style-preview-academic .style-preview-chip { border-radius: 1px; border-bottom: 2px solid #7d5300; background: #f2f0ea; }
.style-preview-modern .style-preview-hero { background: radial-gradient(60% 100% at 20% 0%, #6a3fb5 0%, transparent 60%), radial-gradient(60% 100% at 90% 100%, #00b3a4 0%, transparent 60%), #0b1220; }
.style-preview-modern .style-preview-chip { background: rgba(255, 255, 255, 0.7); border-radius: 999px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; margin-bottom: 14px; color: var(--admin-border); }
.empty-state p { margin: 0 0 16px; font-size: 0.92rem; }
.empty-message { color: var(--text-muted); padding: 8px 0; }

/* Dashboard */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--admin-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card .stat-icon svg { width: 21px; height: 21px; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat-card .stat-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; margin-top: 2px; }

.dashboard-section-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.dashboard-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--admin-shadow);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.dashboard-tile:hover {
  border-color: var(--primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 24, 27, 0.1);
}
.dashboard-tile .tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-tile .tile-icon svg { width: 20px; height: 20px; }

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sidebar-bg) 0%, var(--sidebar-bg-soft) 45%, #1a4a56 100%);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 18px;
  padding: 36px 32px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 26px;
}
.login-brand .brand-badge {
  width: calc(52px * var(--logo-scale, 1.3));
  height: calc(52px * var(--logo-scale, 1.3));
  border-radius: 14px;
  background: #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--admin-border), 0 6px 18px rgba(0, 0, 0, 0.1);
}
.login-brand h1 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.login-brand p { margin: 0; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.login-back {
  display: block;
  text-align: center;
  margin-top: 22px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.login-back:hover { color: #fff; }

@media (max-width: 900px) {
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  }
  .admin-shell.sidebar-open .admin-sidebar { transform: translateX(0); box-shadow: 20px 0 60px rgba(0, 0, 0, 0.25); }
  .admin-menu-toggle { display: inline-flex; }
  .admin-main { padding: 22px 16px 48px; }
  .admin-topbar { padding: 0 16px; }
  .admin-user-name { display: none; }
  .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 20, 24, 0.45);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .admin-shell.sidebar-open .admin-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.admin-body:has(.admin-shell.sidebar-open) { overflow: hidden; }
}

/* ------------------------------------------------------------------ */
/* Student/Teacher portal (installable PWA) — mobile-first: a fixed top   */
/* bar + fixed bottom nav, content scrolling between them. Reuses admin's */
/* .btn/.form-control/.alert/.admin-card/.login-* classes wholesale — only */
/* the shell chrome below is new.                                         */
/* ------------------------------------------------------------------ */

.portal-body {
  background: var(--admin-bg);
  /* Android's system UI already renders in Roboto — putting it first
     (ahead of the site-wide Segoe-UI-first stack) is what actually makes
     text read as "native app" rather than "website" on the devices most
     of this audience is on. */
  font-family: Roboto, 'Segoe UI', -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.portal-body, .portal-body * { -webkit-tap-highlight-color: transparent; }

.portal-shell { min-height: 100vh; display: flex; flex-direction: column; }

.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 27, 0.06), 0 2px 8px rgba(16, 24, 27, 0.05);
}
.portal-brand { display: flex; align-items: center; flex-shrink: 0; }
.portal-brand:hover { text-decoration: none; }
.portal-page-title { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }

/* Content fades/slides in on every fresh page load — the closest a
   full-page-reload site (real URLs per screen, no SPA router) can get to
   a native app's screen-transition feel. */
.portal-main-inner { animation: portal-fade-in 0.22s ease both; }
@keyframes portal-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-main-inner { animation: none; }
}

/* Material-style ripple — one shared implementation, activated by
   assets/portal/ripple.js on any element carrying .portal-ripple
   (buttons, tiles, list rows). */
.portal-ripple { position: relative; overflow: hidden; }
.portal-ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  animation: portal-ripple-anim 0.5s ease-out;
}
@keyframes portal-ripple-anim {
  to { transform: scale(2.6); opacity: 0; }
}

/* Tactile press feedback on the main tappable surfaces. */
.portal-tile:active, .notice-card:active, .list-tile:active, .btn:active {
  transform: scale(0.97);
}
.portal-tile, .notice-card, .list-tile, .btn { transition: transform 0.1s ease; }
.portal-install-btn {
  flex-shrink: 0;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.portal-install-btn:hover { background: var(--surface-tint); }

.portal-ios-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--admin-border);
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.portal-ios-hint-close {
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}

.portal-main { flex: 1; padding-bottom: 84px; }
.portal-main-inner { max-width: 640px; margin: 0 auto; padding: 20px 16px; }

.portal-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--surface);
  box-shadow: 0 -1px 3px rgba(16, 24, 27, 0.06), 0 -4px 16px rgba(16, 24, 27, 0.07);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0));
  gap: 4px;
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 16px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.bottom-nav-item:hover { text-decoration: none; color: var(--primary); }
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
/* Material 3's "pill behind the active icon" — the signature native-nav-bar tell. */
.bottom-nav-item.active { color: var(--primary); font-weight: 700; }
.bottom-nav-item.active svg { background: var(--surface-tint); }

.portal-greeting { margin-bottom: 18px; }
.portal-greeting h2 { margin: 0 0 4px; font-size: 1.3rem; }
.portal-role-chip {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.portal-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.portal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  background: var(--surface);
  border: none;
  border-radius: 18px;
  box-shadow: var(--admin-shadow);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}
.portal-tile:hover { text-decoration: none; }
/* A colored circular "icon chip" behind each tile icon — the Material
   list/grid-tile pattern that reads as native-app iconography rather than
   a plain inline website glyph. */
.portal-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--primary);
}
.portal-tile-icon svg { width: 22px; height: 22px; }

.portal-profile-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0 20px; text-align: center; }
.portal-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
}
.portal-profile-card h2 { margin: 0; font-size: 1.15rem; }

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--admin-border);
  font-size: 0.9rem;
}
.profile-row:last-child { border-bottom: none; }
.profile-row span { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.profile-row svg { width: 17px; height: 17px; }
.profile-row strong { color: var(--text); font-weight: 600; text-align: right; }

/* Material FAB — the primary "add/create" action on a list screen, fixed
   above the bottom nav instead of competing with page content for space. */
.portal-fab {
  position: fixed;
  right: 20px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0));
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 52px;
  border: none;
  border-radius: 26px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(16, 24, 27, 0.18), 0 2px 4px rgba(16, 24, 27, 0.12);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.portal-fab:active { transform: scale(0.96); }
.portal-fab svg { width: 20px; height: 20px; }

.portal-loading { text-align: center; color: var(--text-muted); padding: 40px 0; }
.portal-back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; font-size: 0.85rem; margin-bottom: 14px; }

.portal-dialog {
  width: min(92vw, 420px);
  border: none;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.portal-dialog::backdrop { background: rgba(10, 20, 24, 0.45); }
.portal-dialog h2 { margin: 0 0 16px; font-size: 1.05rem; }
.portal-dialog-body { margin-bottom: 16px; }
.portal-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

.portal-install-banner[hidden] { display: none; }
/* Desktop Chrome supports PWA installs too and fires the same
   beforeinstallprompt event — this is a mobile-first "install our app"
   pitch (Home Screen icon), not something a desktop visitor needs. */
@media (min-width: 768px) {
  .portal-install-banner { display: none !important; }
}
.portal-install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  background: var(--primary);
  color: #fff;
  padding: 9px 12px;
  font-size: 0.8rem;
  font-weight: 500;
}
.portal-install-banner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.portal-install-banner svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; flex-shrink: 0; }
.portal-install-banner .portal-install-btn { padding: 6px 12px; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }
.portal-install-banner > div { flex-shrink: 0; }
.portal-install-banner .portal-install-btn { background: #fff; color: var(--primary); border: none; }
.portal-install-banner .portal-ios-hint-close { color: #fff; }

.attendance-marked-tick { color: var(--success); font-weight: 700; }
.attendance-status-group { display: flex; gap: 10px; flex-shrink: 0; }
.attendance-status-opt { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.attendance-status-opt input { width: 15px; height: 15px; accent-color: var(--primary); }