/* =========================================================================
   School OS — public site and portal design system
   Modern, accessible, responsive. Navy + gold academic palette.
   ========================================================================= */

:root {
  /* Brand */
  --navy-900: #081b34;
  --navy-800: #0b2545;
  --navy-700: #13315c;
  --navy-600: #1d4079;
  /* Gaps in these ramps are NOT cosmetic. An undefined custom property used without a
     fallback makes the whole declaration invalid, so the element silently
     inherits instead: that is how the add-on page shipped near-invisible body
     text (--slate-600 was used in 4 files but defined in none). Keep every
     step that any stylesheet references defined here. */
  --navy-500: #2a5595;
  --navy-400: #3d6ba8;
  --navy-100: #e7eef7;
  /* gold-600 is the BRAND gold and stays for borders, icon fills and rules.
     It is only 2.88:1 on white, so it must never carry text. gold-700 is the
     same hue and saturation, darkened until it clears 4.5:1 on white AND on
     the gold-200 pill background - use it for every gold TEXT colour. */
  --gold-600: #b8941f;
  --gold-700: #7a6215;
  --gold-500: #c9a227;
  --gold-400: #e0b341;
  --gold-300: #ebcf73;
  --gold-200: #f3e2a6;

  /* Neutrals */
  --ink: #16202e;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --paper: #f7f9fc;
  --white: #ffffff;

  /* Semantic */
  --green-600: #15803d;
  --green-100: #dcfce7;
  --red-600: #b91c1c;
  --red-100: #fee2e2;
  --amber-600: #b45309;
  --amber-100: #fef3c7;
  --blue-100: #dbeafe;
  --blue-700: #1d4ed8;

  /* Type */
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Devanagari trails every stack it's added to (same --deva stack as the
     chapter renderer) — Inter/Segoe have no Devanagari glyphs,
     so without this Hindi/Sanskrit flashcards fall back per-glyph to whatever
     ugly system default the OS picks. Same three faces cover Windows
     ("Nirmala UI"), older Windows/Office ("Mangal"), Android ("Noto Sans
     Devanagari") and iOS ("Kohinoor Devanagari"). */
  --deva: "Nirmala UI", "Noto Sans Devanagari", "Mangal", "Kohinoor Devanagari";

  /* Layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(8, 27, 52, .06), 0 1px 3px rgba(8, 27, 52, .08);
  --shadow: 0 6px 18px rgba(8, 27, 52, .08), 0 2px 6px rgba(8, 27, 52, .06);
  --shadow-lg: 0 24px 48px -12px rgba(8, 27, 52, .25);
  --ring: 0 0 0 3px rgba(29, 64, 121, .25);
  --header-h: 74px;
}

/* ----------------------------- Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--navy-800); }
button { font: inherit; cursor: pointer; }
ul { padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; color: var(--navy-800); font-weight: 700; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* --------------------------- Layout helpers ---------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy-800); color: #dbe6f5; }
.section--navy h1,.section--navy h2,.section--navy h3 { color: #fff; }
.grid { display: grid; gap: 26px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.muted { color: var(--slate-600); }
.hidden { display: none !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.section--navy .eyebrow { color: var(--gold-400); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 14px 0 12px; }
.section-head p { color: var(--slate-500); font-size: 1.05rem; }
.section--navy .section-head p { color: #aebfd6; }

/* ------------------------------ Buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; font-family: var(--font-head);
  font-weight: 600; font-size: .98rem; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--gold-500); color: var(--navy-900); box-shadow: 0 6px 16px rgba(201,162,39,.35); }
.btn--primary:hover { background: var(--gold-400); color: var(--navy-900); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(201,162,39,.45); }
.btn--navy { background: var(--navy-700); color: #fff; }
.btn--navy:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--slate-300); }
.btn--ghost:hover { border-color: var(--navy-700); background: var(--navy-100); }
.btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn--light:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none !important; }

/* ------------------------------ Header --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--slate-200);
}
.topbar { background: var(--navy-800); color: #cdddf2; font-size: .82rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 38px; flex-wrap: nowrap; white-space: nowrap; }
.topbar a { color: #cdddf2; }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; gap: 22px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.topbar__contact span { display: inline-flex; align-items: center; gap: 7px; }
.topbar__social { display: flex; gap: 14px; align-items: center; }

.navbar { display: flex; align-items: center; gap: 18px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; flex-shrink: 0; }
.brand img { width: 46px; height: 46px; }
.brand__text strong { display: block; font-family: var(--font-head); font-weight: 800; color: var(--navy-800); font-size: 1.1rem; line-height: 1.1; letter-spacing: .2px; white-space: nowrap; }
.brand__text small { color: var(--slate-500); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; list-style: none; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 11px;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--slate-700);
  border-radius: 10px; transition: background .15s, color .15s; white-space: nowrap;
}
.nav__link:hover, .nav__item.is-open > .nav__link { background: var(--navy-100); color: var(--navy-800); }
.nav__item[aria-current="page"] > .nav__link, .nav__link.active { color: var(--navy-800); }
.nav__link.active::after { content:""; display:block; }
.nav__item.active > .nav__link { background: var(--navy-100); color: var(--navy-800); }
.caret { width: 14px; height: 14px; transition: transform .2s; }
.nav__item.is-open .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .18s ease; list-style: none;
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--slate-700); font-size: .92rem; font-weight: 500; }
.dropdown a:hover { background: var(--navy-100); color: var(--navy-800); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: var(--navy-100); border: none; width: 44px; height: 44px; border-radius: 12px; color: var(--navy-800); align-items: center; justify-content: center; }
.nav-toggle svg { width: 24px; height: 24px; }

/* ------------------------------- Hero ---------------------------------- */
.hero {
  position: relative; color: #eaf1fb; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(201,162,39,.20), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-700) 70%, var(--navy-600));
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(900px 420px at 85% 40%, rgba(255,255,255,.35), transparent 70%);
  opacity:.20;
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, #000 100%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:1; opacity:.10; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; padding: 78px 0 86px; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.5px; }
.hero h1 .hl { color: var(--gold-400); }
.hero p.lead { font-size: 1.18rem; color: #c5d4ea; margin: 20px 0 30px; max-width: 560px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__badges { display: flex; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.hero__badge { display: flex; flex-direction: column; }
.hero__badge b { font-family: var(--font-head); font-size: 1.9rem; color: var(--gold-400); line-height: 1; }
.hero__badge span { font-size: .85rem; color: #aebfd6; margin-top: 4px; }

.hero__card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(6px); box-shadow: var(--shadow-lg);
}
.hero__card h3 { color: #fff; font-size: 1.2rem; margin-bottom: 6px; }
.hero__card p { color: #b9c8de; font-size: .92rem; margin-bottom: 18px; }
.quick-links { display: grid; gap: 10px; }
.quick-link { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #eaf1fb; transition: background .15s, transform .15s; }
.quick-link:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateX(3px); }
.quick-link .ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--gold-500); color: var(--navy-900); border-radius: 10px; }
.quick-link .ic svg { width: 20px; height: 20px; }
.quick-link b { font-family: var(--font-head); font-size: .98rem; display:block; }
.quick-link small { color: #aebfd6; font-size: .8rem; }

.hero-wave { display:block; width:100%; height:auto; color: var(--white); margin-top:-1px; }

/* ------------------------------ Cards ---------------------------------- */
.card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--navy-100); }
.card .ic-circle { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-100), #fff); color: var(--navy-700); margin-bottom: 16px; border: 1px solid var(--slate-200); }
.card .ic-circle svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.card p { color: var(--slate-500); font-size: .96rem; }
.card .step-link { display: inline-block; margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: .86rem; color: var(--gold-700); }
.card .step-link:hover { color: var(--navy-800); }

.feature-card .ic-circle { background: linear-gradient(135deg, var(--gold-500), var(--gold-400)); color: var(--navy-900); border: none; }

.program-card { position: relative; overflow: hidden; padding: 0; }
.program-card__top { padding: 24px 24px 18px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: #fff; }
.program-card__top h3 { color: #fff; }
.program-card__top .lvl { font-size: .8rem; color: var(--gold-200); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.program-card__body { padding: 20px 24px 26px; }
.program-card__body ul { list-style: none; display: grid; gap: 9px; }
.program-card__body li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--slate-700); }
.program-card__body li svg { width: 18px; height: 18px; color: var(--green-600); flex: none; margin-top: 2px; }

.stat-card { text-align: center; padding: 28px 18px; }
.stat-card b { display: block; font-family: var(--font-head); font-size: 2.6rem; color: var(--navy-800); line-height: 1; }
.section--navy .stat-card b { color: var(--gold-400); }
.stat-card span { color: var(--slate-500); font-size: .92rem; margin-top: 8px; display: block; }
.section--navy .stat-card span { color: #aebfd6; }
/* A second .stat-card rule further down sets background:#fff for the portal.
   Being later in the cascade it also hit the marketing pages, leaving pale-blue
   and gold text on a WHITE card inside a navy band - the text was there but
   effectively unreadable. The colours above are correct FOR NAVY, so keep the
   card transparent here rather than restating every colour. */
.section--navy .stat-card { background: transparent; border-color: rgba(255,255,255,.20); box-shadow: none; }

/* Faculty */
.faculty-card { text-align: center; }
.faculty-card .avatar { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden; background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); color: var(--gold-200); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(11,37,69,.18); }
.faculty-card .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faculty-card h4 { color: var(--navy-800); font-size: 1.05rem; }
.faculty-card .role { color: var(--gold-700); font-weight: 600; font-size: .85rem; }
.faculty-card .sub { color: var(--slate-500); font-size: .82rem; }

/* List with check */
.checklist { list-style: none; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li svg { width: 22px; height: 22px; color: var(--green-600); flex: none; margin-top: 2px; }
.checklist li b { color: var(--navy-800); }

/* Pills / badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; font-family: var(--font-head); }
.pill--gold { background: var(--gold-200); color: var(--gold-700); }
.pill--green { background: var(--green-100); color: var(--green-600); }
.pill--red { background: var(--red-100); color: var(--red-600); }
.pill--amber { background: var(--amber-100); color: var(--amber-600); }
.pill--blue { background: var(--blue-100); color: var(--blue-700); }
.pill--navy { background: var(--navy-100); color: var(--navy-700); }

/* ------------------------------ Split section -------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.media-illus { width: 100%; height: 100%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 16px; }
.split p { color: var(--slate-600, #475569); margin-bottom: 16px; }

/* ------------------------------ Gallery -------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.gallery-item .ph, .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item img { transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(transparent, rgba(8,27,52,.82)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .95rem; }

/* ------------------------------ Tables --------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; background: #fff; }
table.data caption { text-align: left; padding: 16px 18px; font-family: var(--font-head); font-weight: 700; color: var(--navy-800); background: var(--navy-100); }
table.data th, table.data td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--slate-200); vertical-align: top; }
table.data thead th { background: var(--navy-800); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .02em; }
table.data tbody tr:nth-child(even) { background: var(--slate-100); }
table.data tbody tr:hover { background: var(--navy-100); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }

/* ------------------------------ Forms ---------------------------------- */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy-800); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--slate-300); border-radius: 11px;
  font: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-600); box-shadow: var(--ring); outline: none; }
.field .hint { font-size: .8rem; color: var(--slate-500); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.notice-bar { padding: 12px 16px; border-radius: 11px; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; }
.notice-bar svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.notice-bar.error { background: var(--red-100); color: var(--red-600); }
.notice-bar.ok { background: var(--green-100); color: var(--green-600); }
.notice-bar.info { background: var(--blue-100); color: var(--blue-700); }

/* ------------------------------ Footer --------------------------------- */
.site-footer { background: var(--navy-900); color: #aebfd6; padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: .02em; }
.site-footer a { color: #aebfd6; display: inline-block; padding: 4px 0; }
.site-footer a:hover { color: var(--gold-400); }
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.footer-brand img { width: 50px; height: 50px; }
.footer-brand strong { color: #fff; font-family: var(--font-head); font-size: 1.1rem; }
.footer-col ul { list-style: none; display: grid; gap: 2px; }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.footer-contact svg { width: 19px; height: 19px; color: var(--gold-400); flex: none; margin-top: 3px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #cdddf2; }
.footer-social a:hover { background: var(--gold-500); color: var(--navy-900); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding: 22px 0; font-size: .85rem; }

/* ------------------------- "Get the app" CTA ---------------------------- */
.app-cta {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 11px 18px; font-weight: 600; font-size: .92rem;
  text-decoration: none;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: #fff;
}
.app-cta:hover { background: rgba(255,255,255,.22); color: #fff; }
.app-cta svg { width: 18px; height: 18px; flex: none; }
.app-download-cta { margin-top: 16px; }
.footer-col .app-cta {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff;
}
.footer-col .app-cta:hover { background: var(--gold-500); color: var(--navy-900); }
.app-cta-note { font-size: .78rem; color: #8fa2bd; margin-top: 8px; max-width: 300px; }
/* This is the TWA startUrl the Android app loads — hide the install CTA when
   already inside the app, whether opened as an installed PWA (standalone
   display mode) or via the TWA's ?source=twa startUrl. */
@media (display-mode: standalone) { .app-download-cta { display: none !important; } }
html.is-twa .app-download-cta { display: none !important; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ------------------------- Page hero (sub-pages) ----------------------- */
.page-hero { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; inset:0; opacity:.10; background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size: 26px 26px; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.page-hero p { color: #c5d4ea; max-width: 640px; margin-top: 10px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: #aebfd6; margin-bottom: 14px; }
.breadcrumb a { color: var(--gold-300, #f3e2a6); }
.breadcrumb a { color: #cdddf2; }
.breadcrumb a:hover { color: var(--gold-400); }

/* ------------------------------ Prose ---------------------------------- */
.prose p { color: var(--slate-700); margin-bottom: 16px; }
.prose h3 { margin: 28px 0 12px; font-size: 1.3rem; }
.prose ul { padding-left: 22px; margin-bottom: 16px; }
.prose li { margin-bottom: 8px; color: var(--slate-700); }

/* ------------------------- Reveal animation ---------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================== PORTAL / DASHBOARD ========================= */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-aside { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-aside::after { content:""; position:absolute; inset:0; opacity:.10; background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size: 26px 26px; }
.auth-aside > * { position: relative; z-index: 2; }
.auth-aside h2 { color: #fff; font-size: 2rem; margin: 18px 0 12px; }
.auth-aside p { color: #c5d4ea; }
.auth-aside .feat { display: grid; gap: 14px; margin-top: 26px; }
.auth-aside .feat div { display: flex; gap: 12px; align-items: center; color: #dbe6f5; }
.auth-aside .feat svg { width: 22px; height: 22px; color: var(--gold-400); flex: none; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--paper); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 38px; }
.auth-card .brand { justify-content: center; margin: 0 0 8px; }
.tabs { display: flex; gap: 6px; background: var(--slate-100); padding: 5px; border-radius: 12px; margin-bottom: 24px; }
.tabs button { flex: 1; padding: 9px; border: none; background: transparent; border-radius: 9px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--slate-600); }
.tabs button.active { background: #fff; color: var(--navy-800); box-shadow: var(--shadow-sm); }

/* Dashboard shell */
.dash { min-height: 100vh; display: grid; grid-template-columns: 264px 1fr; background: var(--paper); }
.dash-side { background: var(--navy-900); color: #cdddf2; padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.dash-side .brand { margin: 4px 8px 26px; }
.dash-side .brand__text strong { color: #fff; }
.dash-side .brand__text small { color: #8fa6c6; }
.dash-nav { display: grid; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.dash-nav::-webkit-scrollbar { width: 8px; }
.dash-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.dash-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.dash-nav a, .dash-nav button.navlink { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; color: #b9c8de; font-family: var(--font-head); font-weight: 500; font-size: .95rem; background: none; border: none; width: 100%; text-align: left; }
.dash-nav a svg, .dash-nav button.navlink svg { width: 20px; height: 20px; flex: none; }
.dash-nav a:hover, .dash-nav button.navlink:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-nav a.active, .dash-nav button.navlink.active { background: var(--gold-500); color: var(--navy-900); font-weight: 600; }
.dash-side__foot { margin-top: auto; padding-top: 16px; }

.dash-main { min-width: 0; }
.dash-top { background: #fff; border-bottom: 1px solid var(--slate-200); padding: 16px 30px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 50; }
.dash-top h1 { font-size: 1.3rem; margin-right: auto; }
.dash-content { padding: 30px; }
.dash-menu-btn { display: none; }

.profile-head { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: #fff; border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow); flex-wrap: wrap; }
.profile-head .pic { width: 88px; height: 88px; border-radius: 18px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--gold-200); border: 2px solid rgba(255,255,255,.25); flex: none; }
.profile-head h2 { color: #fff; font-size: 1.5rem; }
.profile-head .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.profile-head .meta .pill { background: rgba(255,255,255,.14); color: #fff; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* min-width:0 lets a KPI tile shrink to its grid track instead of forcing the
   track (and the page) wider to fit its label text un-wrapped — matters most
   where a fixed column count is set inline (e.g. the Fees tab's 3-up strip)
   and the 1fr/560px responsive rules above can't apply because inline styles
   win specificity. */
.kpi { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.kpi .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.kpi .ic svg { width: 22px; height: 22px; }
.kpi b { font-family: var(--font-head); font-size: 1.9rem; color: var(--navy-800); line-height: 1; display: block; }
.kpi span { color: var(--slate-500); font-size: .85rem; }
.ic--blue { background: var(--blue-100); color: var(--blue-700); }
.ic--green { background: var(--green-100); color: var(--green-600); }
.ic--gold { background: var(--gold-200); color: var(--gold-700); }
.ic--red { background: var(--red-100); color: var(--red-600); }

.panel-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; }
.panel-card h3 { font-size: 1.15rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.panel-card h3 .pill { margin-left: auto; }

.progress { height: 10px; background: var(--slate-200); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-600), var(--navy-700)); }
.progress.good > span { background: linear-gradient(90deg, #16a34a, #15803d); }
.progress.warn > span { background: linear-gradient(90deg, #f59e0b, #b45309); }
.progress.bad > span { background: linear-gradient(90deg, #ef4444, #b91c1c); }

.dash-view { display: none; }
.dash-view.active { display: block; }

.report-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.empty { text-align: center; padding: 40px; color: var(--slate-500); }
.empty svg { width: 46px; height: 46px; color: var(--slate-300); margin: 0 auto 12px; }

.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--slate-300); border-radius: var(--radius); padding: 30px; text-align: center; background: var(--slate-100); transition: border-color .15s, background .15s; cursor: pointer; }
.dropzone.drag { border-color: var(--navy-600); background: var(--navy-100); }
.dropzone svg { width: 40px; height: 40px; color: var(--navy-600); margin: 0 auto 10px; }

.loader { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.loader--navy { border-color: var(--slate-300); border-top-color: var(--navy-700); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------- Videos & social ----------------------------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vid-card { display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; border: none; text-align: left; cursor: pointer; }
.vid-thumb { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; background: var(--navy-800); box-shadow: var(--shadow-sm); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vid-card:hover .vid-thumb img { transform: scale(1.06); }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; }
.vid-play svg { width: 54px; height: 54px; color: #fff; background: rgba(201,162,39,.92); border-radius: 50%; padding: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s, background .2s; }
.vid-card:hover .vid-play svg { transform: scale(1.1); background: var(--gold-500); }
.vid-title { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--navy-800); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vid-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8,17,34,.86); backdrop-filter: blur(4px); display: none; place-items: center; padding: 24px; }
.vid-lightbox.open { display: grid; }
.vid-lightbox__inner { position: relative; width: min(960px, 100%); }
.vid-frame { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; }
.vid-lightbox__close { position: absolute; top: -44px; right: 0; background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }

.social-embeds { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.social-embed-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; overflow: hidden; }
.social-embed-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin-bottom: 14px; }
.social-embed-card .fb-page, .social-embed-card .fb-page span, .social-embed-card iframe { max-width: 100% !important; }
.social-cta { display: flex; flex-direction: column; gap: 14px; }
.social-cta a.ig-follow { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); color: #fff; text-decoration: none; background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); box-shadow: var(--shadow-sm); }
.social-cta a.ig-follow svg { width: 30px; height: 30px; flex: none; }
.social-cta a.ig-follow b { display: block; font-family: var(--font-head); }
.social-cta a.yt-follow { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); color: #fff; text-decoration: none; background: #c4302b; box-shadow: var(--shadow-sm); }
.social-cta a.yt-follow svg { width: 30px; height: 30px; flex: none; }
.social-cta a.yt-follow b { display: block; font-family: var(--font-head); }

@media (max-width: 860px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
  .social-embeds { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } }

/* ------------------------------ UPI modal ------------------------------ */
.upi-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(8,17,34,.7); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.upi-card { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; }
.upi-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--slate-500); cursor: pointer; }
.upi-qr { display: block; width: 200px; height: 200px; object-fit: contain; margin: 8px auto 4px; border: 1px solid var(--slate-200); border-radius: 12px; padding: 6px; }

/* ------------------------------ Print ---------------------------------- */
@media print {
  .dash-side, .dash-top, .no-print, .site-header, .site-footer { display: none !important; }
  .dash { display: block; }
  .dash-content { padding: 0; }
  body { background: #fff; }
  .panel-card, .card { box-shadow: none; border-color: #ccc; }
  .report-card-print { display: block !important; }
}

/* ----------------------------- Responsive ------------------------------ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The desktop nav is 11 items wide and needs about 1540px of viewport to fit.
   It used to swap to the hamburger only below 1200px, so every page scrolled
   horizontally between 1201px and ~1540px - the most common laptop widths.
   Tighten the row first, then hand over to the hamburger at the width where
   the tightened row genuinely stops fitting. */
@media (min-width: 1401px) {
  /* Brand + 11 nav items + the Student Login button need about 1306px, but
     .container caps at 1180px, so the row overflowed at EVERY viewport width,
     not just narrow ones. Let the header band run wider than the body content
     (the body keeps the 1180px measure for readability). */
  .site-header .container { max-width: 1400px; }
  .navbar { gap: 12px; }
  .nav { gap: 0; }
  .nav__link { padding: 9px 7px; font-size: .86rem; }
  .nav-actions { gap: 8px; }
}

@media (max-width: 1400px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--slate-200); box-shadow: var(--shadow-lg); padding: 12px; max-height: 78vh; overflow-y: auto;
  }
  .nav.open .nav__link { width: 100%; }
  .nav.open .nav__item { width: 100%; }
  .nav.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 14px; }
}
@media (max-width: 860px) {
  .split, .cols-2, .cols-3, .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: fixed; left: 0; top: 0; z-index: 300; transform: translateX(-100%); transition: transform .25s; width: 264px; }
  .dash-side.open { transform: none; }
  .dash-menu-btn { display: grid; }
}
/* Keep the top contact bar to a single line by shedding items as width shrinks. */
@media (max-width: 1180px) { .topbar__contact span:nth-child(3) { display: none; } }   /* hide address */
@media (max-width: 900px)  { .topbar__contact span:nth-child(2) { display: none; } }   /* hide email */
@media (max-width: 720px)  { .topbar__social span { display: none; } }                 /* hide affiliation text, keep icons */
@media (max-width: 560px)  { .topbar__contact { display: none; } }
@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .cols-4, .kpi-grid, .cols-3 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 26px; }
  .row-2 { grid-template-columns: 1fr; }
  .topbar__contact { display: none; }
  .brand__text strong { font-size: 1rem; }
}
@media (max-width: 430px) {
  .brand__text { display: none; }
}

/* ===================== Vibrant facility cards ========================= */
.facilities .card { position: relative; overflow: hidden; }
.facilities .card::before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:4px; background: var(--accent, var(--gold-500)); opacity:.9; }
.facilities .card .ic-circle { background: var(--accent-soft, var(--navy-100)); color: var(--accent, var(--navy-700)); border: none; }
.facilities .card:hover { border-color: var(--accent, var(--navy-100)); }
.facilities .card:nth-child(9n+1){ --accent:#2563eb; --accent-soft:#e6efff; }
.facilities .card:nth-child(9n+2){ --accent:#0d9488; --accent-soft:#dcf6f1; }
.facilities .card:nth-child(9n+3){ --accent:#7c3aed; --accent-soft:#efe7fe; }
.facilities .card:nth-child(9n+4){ --accent:#d97706; --accent-soft:#fdeecd; }
.facilities .card:nth-child(9n+5){ --accent:#16a34a; --accent-soft:#dcf5e3; }
.facilities .card:nth-child(9n+6){ --accent:#dc2626; --accent-soft:#fde3e3; }
.facilities .card:nth-child(9n+7){ --accent:#0891b2; --accent-soft:#d8f3fa; }
.facilities .card:nth-child(9n+8){ --accent:#db2777; --accent-soft:#fce0ef; }
.facilities .card:nth-child(9n+9){ --accent:#4f46e5; --accent-soft:#e7e6fd; }

/* ===================== Floating contact buttons ====================== */
.fab-stack { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 12px; }
.fab { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.fab svg { width: 28px; height: 28px; }
.fab--wa { background: #25d366; }
.fab--call { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); border: 2px solid var(--gold-500); }
.fab--wa::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation: fabPulse 2.4s infinite; }
@keyframes fabPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (prefers-reduced-motion: reduce){ .fab--wa::after{ animation:none; } }

/* ===================== Welcome / contact popup ======================= */
.popup-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(8,18,38,.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.popup-overlay.open { opacity: 1; visibility: visible; }
.popup { width: 100%; max-width: 410px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  transform: translateY(16px) scale(.98); transition: transform .28s cubic-bezier(.2,.8,.25,1); }
.popup-overlay.open .popup { transform: translateY(0) scale(1); }
.popup__head { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: #fff; padding: 26px 24px 22px; text-align: center; position: relative; }
.popup__head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: linear-gradient(90deg,#25d366,var(--gold-500)); }
.popup__head img { width: 56px; height: 56px; margin-bottom: 8px; }
.popup__head h3 { color: #fff; font-size: 1.3rem; margin: 2px 0 4px; }
.popup__head p { color: #c5d4ea; font-size: .92rem; margin: 0; }
.popup__body { padding: 20px 22px 24px; display: grid; gap: 12px; }
.popup__body .lead-q { text-align: center; color: var(--slate-600); font-size: .96rem; margin-bottom: 4px; }
.popup-btn { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 13px; font-family: var(--font-head); font-weight: 700; font-size: 1rem; transition: transform .12s, box-shadow .12s, filter .12s; }
.popup-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.popup-btn svg { width: 24px; height: 24px; flex: none; }
.popup-btn small { display: block; font-weight: 500; font-size: .76rem; opacity: .85; }
.popup-btn--wa { background: #25d366; color: #fff; }
.popup-btn--call { background: var(--navy-100); color: var(--navy-800); }
.popup-btn--admission { background: var(--gold-500); color: var(--navy-900); }
.popup__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.popup__close:hover { background: rgba(255,255,255,.3); }
.popup__close svg { width: 18px; height: 18px; }
@media (max-width: 480px){ .fab { width: 52px; height: 52px; } .fab svg { width: 26px; height: 26px; } }

/* ===================== Embedded Google Forms ========================= */
.form-embed-card { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.form-embed { width: 100%; border: 0; display: block; min-height: 900px; background: #fff; }

/* ===================== Fee structure ================================= */
.data tr.grp th { background: var(--navy-100); color: var(--navy-800); text-align: left; font-family: var(--font-head); font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; }
.data td.nil { color: var(--slate-600); }
.fee-note-card { background: linear-gradient(135deg, var(--navy-100), #fff); border: 1px solid var(--slate-200); border-left: 4px solid var(--gold-500); border-radius: var(--radius); padding: 18px 22px; display: flex; gap: 16px; align-items: flex-start; }
.fee-note-card .ic-circle { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-500), var(--gold-400)); color: var(--navy-900); }
.fee-note-card h3 { font-size: 1.08rem; margin-bottom: 4px; }
.fee-note-card p { color: var(--slate-600); font-size: .94rem; }
.fee-notes { list-style: disc; padding-left: 20px; display: grid; gap: 8px; color: var(--slate-600); font-size: .92rem; max-width: 880px; margin: 0 auto; }
.fee-notes b { color: var(--navy-800); }

/* ====================== Staff portal additions ======================== */
.notice-bar.success { background: var(--green-100); color: var(--green-600); }

.hello-card { display: flex; gap: 16px; align-items: center; padding: 22px; background: linear-gradient(135deg, var(--navy-100), #fff); border: 1px solid var(--navy-100); border-radius: 16px; box-shadow: var(--shadow-sm); }
.hello-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; flex: none; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 18px 16px; box-shadow: var(--shadow-sm); }
.stat-card__lbl { color: var(--slate-500); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.stat-card__val { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--navy-800); margin-top: 4px; line-height: 1.15; }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.quick { padding: 16px 18px; text-align: left; background: #fff; border: 1.5px solid var(--slate-200); border-radius: 14px; font: inherit; color: var(--navy-800); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.quick:hover { border-color: var(--navy-600); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.chips-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 14px; }
.chip { padding: 8px 14px; border-radius: 999px; background: var(--navy-100); color: var(--navy-800); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .15s, border-color .15s; }
.chip:hover { background: var(--gold-200); }
.chip.active { background: var(--navy-800); color: #fff; }
.chip__count { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .75rem; font-weight: 600; }
.chip:not(.active) .chip__count { background: var(--slate-200); }

.card-form { background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-sm); max-width: 720px; }

/* Multi-section target picker (post circular / homework) */
.target-picker { display: grid; gap: 2px; border: 1.5px solid var(--slate-300); border-radius: 11px; padding: 6px; background: #fff; }
.target-picker__opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-weight: 400; font-size: .95rem; color: var(--ink); }
.target-picker__opt:hover { background: var(--slate-100, #f1f5f9); }
.target-picker__opt input { width: 18px; height: 18px; flex: none; accent-color: var(--navy-600); margin: 0; }

.post-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.post { background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.post__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.post h4 { margin: 4px 0; color: var(--navy-800); }
.post p { color: var(--slate-700); margin: 4px 0; white-space: pre-wrap; }

.notice-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.notice-item { background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.notice-item__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.notice-item h4 { margin: 4px 0; color: var(--navy-800); }
.notice-item p { color: var(--slate-700); margin: 4px 0; white-space: pre-wrap; }

.profile-card { display: flex; gap: 16px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; box-shadow: var(--shadow-sm); }
.profile-card__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gold-200); color: var(--navy-800); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; flex: none; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.info-grid > div { background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; padding: 14px 16px; }
.info-grid b { display: block; color: var(--slate-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; margin-bottom: 4px; }
.info-grid span { color: var(--navy-800); font-weight: 600; }

/* Badges (extends pills with stronger color presence for status) */
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.badge--green { background: var(--green-100); color: var(--green-600); }
.badge--red   { background: var(--red-100);   color: var(--red-600); }
.badge--gold  { background: var(--gold-200);  color: var(--navy-800); }
.badge--blue  { background: var(--blue-100);  color: var(--blue-700); }

.btn--sm { padding: 6px 12px; font-size: .82rem; }

/* Honour the legacy is-active alias from new JS code */
.dash-view.is-active { display: block; }

/* ====================== Monthly fee breakdown ======================= */
.month-chip { padding: 6px 12px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; min-width: 52px; text-align: center; }
.months-strip .month-chip { box-shadow: var(--shadow-sm); }
.pill.pill--amber { background: var(--gold-200); color: var(--gold-700); }
.pill.pill--gold  { background: var(--gold-200); color: var(--navy-800); }
.pay-quick .btn { white-space: nowrap; }

.month-pick { margin-top: 6px; }
.month-pick__item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--navy-100); border-radius: 999px; font-size: .85rem; cursor: pointer; transition: background .15s; border: 1.5px solid transparent; }
.month-pick__item:hover { background: var(--gold-200); }
.month-pick__item input { accent-color: var(--navy-800); }
.month-pick__item.is-done { color: var(--green-600); background: var(--green-100); cursor: default; }

/* ---------- Teacher month-wise fee grid ---------- */
.viewtabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; background: var(--slate-100); border-radius: 999px; }
.viewtabs button { padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; font-size: .85rem; color: var(--navy-700); cursor: pointer; }
.viewtabs button.active { background: var(--navy-800); color: #fff; }

table.data.months th, table.data.months td { padding: 9px 10px; white-space: nowrap; }
table.data.months .stick { position: sticky; left: 0; z-index: 1; background: #fff; }
table.data.months thead .stick { background: var(--navy-800); }
table.data.months tbody tr:nth-child(even) .stick { background: var(--slate-100); }
table.data.months tbody tr:hover .stick { background: var(--navy-100); }
.mcell { display: inline-block; min-width: 54px; padding: 3px 7px; border-radius: 7px; font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
.mcell--paid     { background: #dcfce7; color: var(--green-600); }
.mcell--partial  { background: var(--amber-100); color: var(--amber-600); }
.mcell--due      { background: #fee2e2; color: var(--red-600); font-weight: 700; }
.mcell--upcoming { background: var(--slate-100); color: var(--slate-500); }
.rowlink { cursor: pointer; }

@media (max-width: 640px) {
  /* Phones: the amount in twelve columns cannot fit — collapse to status dots,
     the teacher taps the row for the numbers. */
  .mcell { min-width: 0; width: 15px; height: 15px; padding: 0; border-radius: 50%; overflow: hidden; text-indent: -999px; }
}

/* ---------- Roster stat strip: "Due till <month>" emphasis ---------- */
.stat-card--due { border: 2px solid var(--red-600); background: linear-gradient(135deg, #fff, var(--red-100)); }
.stat-card--due .stat-card__lbl { color: var(--red-600); }
.stat-card--due .stat-card__val { color: var(--red-600); font-size: 1.75rem; }

/* ---------- Roster list: expandable row (month chips + WhatsApp remind) --- */
table.roster-fees th:first-child, table.roster-fees td.roster-chevron { width: 22px; padding-right: 0; }
.roster-chevron { display: inline-block; color: var(--slate-500); transition: transform .15s; }
.roster-row.is-open .roster-chevron { transform: rotate(90deg); color: var(--navy-800); }
.roster-detail-row td { padding: 0; border-top: none; }
.roster-detail { padding: 4px 14px 16px 34px; background: var(--slate-100); }
.rchip-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 46px; padding: 5px 7px; border-radius: 9px; font-size: .72rem; line-height: 1.25; text-align: center; }
.rchip__m { font-weight: 700; letter-spacing: .01em; }
.rchip__amt { font-variant-numeric: tabular-nums; }
.rchip--paid     { background: #dcfce7; color: var(--green-600); }
.rchip--partial  { background: var(--amber-100); color: var(--amber-600); }
.rchip--due      { background: #fee2e2; color: var(--red-600); font-weight: 700; }
.rchip--upcoming { background: #fff; color: var(--slate-500); border: 1px solid var(--slate-200); }

/* ---------- Teacher per-student fee dialog ---------- */
.feedlg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.feedlg__sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.feedlg__sum div { flex: 1 1 120px; padding: 10px 12px; background: var(--slate-100); border-radius: 12px; }
.feedlg__sum span { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-700); }
.feedlg__sum b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.feedlg__comp { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--slate-300); border-radius: 12px; font-size: .88rem; }
.feedlg__comp li { margin: 3px 0; }

/* ---------- Study Mode (Leitner-box flashcards) ----------
   Deck grid reuses .panel-card / .pill / .grid.cols-3, same as Visual
   Learning and Revision Decks just above. This block is only the bits those
   don't already cover: the flip card itself and the big answer buttons. */
.study-stage { padding: 22px 18px 30px; display: flex; flex-direction: column; align-items: center; }
.study-progress { width: 100%; max-width: 560px; margin-bottom: 14px; }
.study-progress .progress { margin-top: 6px; }
.study-flip {
  position: relative; width: 100%; max-width: 560px; min-height: 260px;
  perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.study-flip:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 4px; border-radius: var(--radius-lg); }
.study-flip__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 30px 24px; border-radius: var(--radius-lg); border: 1px solid var(--slate-200);
  box-shadow: var(--shadow); backface-visibility: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1);
  text-align: center; overflow: hidden;
}
.study-flip__front { transform: rotateY(0deg); background: linear-gradient(135deg, #fff, var(--navy-100)); }
.study-flip__back { transform: rotateY(180deg); background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: #fff; }
.study-flip.is-flipped .study-flip__front { transform: rotateY(-180deg); }
.study-flip.is-flipped .study-flip__back { transform: rotateY(0deg); }
.study-flip__eyebrow { position: absolute; top: 14px; left: 18px; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.study-flip__text { font-size: 1.18rem; line-height: 1.55; font-family: var(--font-body), var(--deva); max-height: 100%; overflow-y: auto; white-space: pre-wrap; }
.study-hint { text-align: center; margin-top: 12px; color: var(--slate-500); font-size: .92rem; }
.study-actions { display: flex; gap: 12px; width: 100%; max-width: 560px; margin-top: 18px; }
.study-btn {
  flex: 1; min-height: 58px; padding: 14px; font-size: 1.05rem; font-weight: 700;
  border-radius: var(--radius); border: none; font-family: var(--font-head);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.study-btn--miss { background: var(--red-100); color: var(--red-600); }
.study-btn--miss:hover { background: #fecaca; }
.study-btn--know { background: var(--green-100); color: var(--green-600); }
.study-btn--know:hover { background: #bbf7d0; }
.study-summary-grid { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.study-review-list { text-align: left; max-width: 520px; margin: 0 auto 22px; }
.study-review-list ul { margin: 8px 0 0; padding-left: 20px; color: var(--slate-700); }
.study-review-list li { margin-bottom: 6px; font-family: var(--font-body), var(--deva); }

@media (max-width: 480px) {
  /* One-handed on a phone: full-width stacked buttons beat a cramped 50/50
     split, and a shorter card leaves the answer buttons on-screen without
     scrolling. */
  .study-flip { min-height: 220px; }
  .study-flip__text { font-size: 1.05rem; }
  .study-actions { flex-direction: column; }
  .study-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .study-flip__face { transition: none; }
}

/* ============================================================
   ADD-ON STAR — the premium look (added 14-Aug-2026)
   Gold is used ONLY for the add-on programme so it stays a signal rather than
   decoration; the rest of the portal keeps the navy house style.
   ============================================================ */
.gp-card{
  position:relative; overflow:hidden; border-radius:18px; padding:22px 22px 20px;
  margin-bottom:18px; color:#f7e9c4;
  background:linear-gradient(135deg,#0b2545 0%,#123a6b 45%,#0b2545 100%);
  border:1px solid rgba(200,162,75,.55);
  box-shadow:0 10px 30px rgba(11,37,69,.28), inset 0 0 0 1px rgba(200,162,75,.18);
}
.gp-card__shine{
  position:absolute; inset:-40% -10% auto -10%; height:180%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 48%,transparent 58%);
  pointer-events:none;
}
.gp-card__top{display:flex;align-items:center;gap:12px}
.gp-card__crest{
  width:44px;height:44px;border-radius:50%;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  color:#0b2545; background:linear-gradient(135deg,#f3d78a,#c8a24b);
  box-shadow:0 2px 10px rgba(200,162,75,.45);
}
.gp-card__label{
  font-family:var(--font-head,inherit); font-weight:900; letter-spacing:3px;
  font-size:1.05rem; color:#f3d78a;
}
.gp-card__label span{color:#fff}
.gp-card__school{font-size:.78rem;letter-spacing:.5px;color:#b9c8dd;margin-top:2px}
.gp-card__name{
  font-family:var(--font-head,inherit); font-weight:800; font-size:1.55rem;
  color:#fff; margin:16px 0 2px; line-height:1.15;
}
.gp-card__meta{font-size:.86rem;color:#b9c8dd}
.gp-card__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gp-chip{
  font-size:.8rem;font-weight:700;letter-spacing:.3px;padding:5px 12px;border-radius:999px;
  color:#0b2545;background:linear-gradient(135deg,#f3d78a,#c8a24b);
}
.gp-chip--soft{background:rgba(255,255,255,.14);color:#e8eef7;font-weight:600}

/* Perks */
.gp-perks{border-color:rgba(200,162,75,.5);margin-bottom:18px}
.gp-perks__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:12px}
.gp-perk{display:flex;gap:10px;align-items:flex-start}
.gp-perk__ico{font-size:1.15rem;line-height:1.2;flex:0 0 auto}
.gp-perk b{display:block;font-size:.93rem;color:var(--slate-900,#0b2545)}
.gp-perk span{display:block;font-size:.83rem;color:var(--slate-600,#5b6b80);line-height:1.45;margin-top:2px}

/* Header badge — carries the status onto every tab */
.gp-badge{
  display:inline-block;margin-left:10px;vertical-align:middle;
  font-size:.66rem;font-weight:900;letter-spacing:1.1px;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  color:#4a3708;background:linear-gradient(135deg,#f3d78a,#c8a24b);
  box-shadow:0 1px 4px rgba(200,162,75,.5);
}

@media (max-width:520px){
  .gp-card{padding:18px 16px}
  .gp-card__name{font-size:1.3rem}
  .gp-perks__grid{grid-template-columns:1fr}
}

/* Add-on programme: Stars of the Month */
.gp-stars{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.gp-star{
  border:1px solid rgba(200,162,75,.45); border-radius:14px; padding:13px 14px;
  background:linear-gradient(160deg,#fffdf6,#fdf6e6);
}
.gp-star__act{
  font-size:.7rem;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
  color:#8a6a08;margin-bottom:6px;
}
.gp-star__name{font-family:var(--font-head,inherit);font-weight:800;font-size:1.05rem;color:#0b2545;line-height:1.2}
.gp-star__cls{font-size:.8rem;color:var(--slate-600,#5b6b80);margin-top:2px}
.gp-star__cite{
  margin-top:8px;font-size:.83rem;line-height:1.45;color:#4a3708;font-style:italic;
  border-top:1px dashed rgba(200,162,75,.5);padding-top:8px;
}

/* Confidential Feedback (2026-09-16) — student + staff submission forms
   (public/assets/js/feedback-shared.js) and the admin inbox
   (public/assets/js/admin-feedback.js). Rating buttons are sized to a
   real thumb target (>=40px) since the Play Store app is a phone-width TWA. */
.fb-banner { border-left: 4px solid var(--gold-500, #c9a227); }
.fb-q { margin-bottom: 16px; }
.fb-q__label { display: block; font-weight: 600; color: var(--navy-800); margin-bottom: 6px; }
.fb-q__hi { font-weight: 400; color: var(--slate-600); font-size: .88rem; }
.fb-stars { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-star { min-width: 40px; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--slate-300);
           background: #fff; font: inherit; font-weight: 700; color: var(--navy-800); cursor: pointer; }
.fb-star:hover { border-color: var(--navy-600); }
.fb-star.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.fb-star--na { font-size: .78rem; }
.fb-teacher > summary { cursor: pointer; list-style: none; font-size: 1rem; padding: 2px 0; }
.fb-teacher > summary::-webkit-details-marker { display: none; }
.fb-teacher > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--gold-700, #a67c00); transition: transform .15s; }
.fb-teacher[open] > summary::before { transform: rotate(90deg); }
.fb-skip-hint { font-size: .8rem; margin-left: 6px; }
.fb-named { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px dashed var(--slate-300); border-radius: 12px; cursor: pointer; font-size: .92rem; line-height: 1.5; }
.fb-named input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--navy-600); }
.fb-thankyou { text-align: center; padding: 40px 20px; }
.fb-thankyou svg { width: 56px; height: 56px; color: var(--green-600); margin-bottom: 12px; }
.fb-closed { text-align: center; padding: 40px 20px; color: var(--slate-500); }