/* ═══════════════════════════════════════════════════════════
   গভর্নমেন্ট ল্যাবরেটরি হাই স্কুল — ULTRA PREMIUM v4
   Aesthetic: Luxury Editorial · Deep Navy · Vibrant Gold
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@400;600;700&family=Noto+Sans+Bengali:wght@300;400;500;600;700&display=swap');

/* ══ DESIGN TOKENS ══ */
:root {
  /* ─ Brand Palette ─ */
  --navy:       #0A1628;
  --navy-m:     #0F1E38;
  --navy-l:     #162440;
  --blue:       #1565C0;
  --blue-v:     #1E88E5;
  --blue-l:     #BBDEFB;
  --blue-xl:    #E3F2FD;
  --gold:       #F5A623;
  --gold-d:     #D4881A;
  --gold-l:     #FFF8E7;
  --emerald:    #00897B;
  --emerald-l:  #E0F2F1;
  --crimson:    #C62828;
  --crimson-l:  #FFEBEE;
  --violet:     #5C35A0;
  --bd-green:   #006a4e;
  --bd-red:     #f42a41;

  /* ─ Neutrals ─ */
  --white:  #FFFFFF;
  --off:    #FAFBFD;
  --g50:    #F1F4F9;
  --g100:   #E4E9F2;
  --g200:   #C8D1E0;
  --g300:   #9AAABB;
  --g500:   #5F7080;
  --g700:   #2D3E50;
  --g900:   #0D1520;
  --text:   #0D1520;
  --text-m: #3D5166;
  --text-l: #7A8FA3;

  /* ─ Gradients ─ */
  --grad-navy:  linear-gradient(135deg, #0A1628 0%, #162440 60%, #0F2D4A 100%);
  --grad-blue:  linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1E88E5 100%);
  --grad-gold:  linear-gradient(135deg, #F5A623 0%, #F7B84B 100%);
  --grad-hero:  linear-gradient(to top, rgba(10,22,40,.95) 0%, rgba(10,22,40,.65) 40%, rgba(10,22,40,.2) 100%);
  --grad-card:  linear-gradient(145deg, #FFFFFF 0%, #F7FAFF 100%);
  --grad-page:  linear-gradient(180deg, #EEF3FA 0%, #F5F8FD 100%);
  --grad-em:    linear-gradient(135deg, #00695C, #00897B);
  --grad-ticker:linear-gradient(90deg, #0D47A1 0%, #1565C0 35%, #00695C 70%, #00897B 100%);

  /* ─ Shadows ─ */
  --sh-xs:   0 1px 2px rgba(10,22,40,.06), 0 1px 4px rgba(10,22,40,.08);
  --sh-sm:   0 2px 4px rgba(10,22,40,.06), 0 4px 12px rgba(10,22,40,.08);
  --sh-md:   0 4px 8px rgba(10,22,40,.08), 0 12px 28px rgba(10,22,40,.10);
  --sh-lg:   0 8px 16px rgba(10,22,40,.10), 0 24px 56px rgba(10,22,40,.14);
  --sh-xl:   0 20px 60px rgba(10,22,40,.20), 0 40px 80px rgba(10,22,40,.12);
  --sh-gold: 0 4px 20px rgba(245,166,35,.45);
  --sh-blue: 0 4px 20px rgba(21,101,192,.40);
  --sh-em:   0 4px 14px rgba(0,137,123,.35);

  /* ─ Layout ─ */
  --page-max: 1100px;
  --sidebar:  220px;
  --gap: 10px;
  --r-sm: 4px; --r: 8px; --r-lg: 14px; --r-xl: 22px; --r-full: 9999px;

  /* ─ Typography ─ */
  --font:   'Noto Sans Bengali', sans-serif;
  --font-s: 'Noto Serif Bengali', serif;

  /* ─ Transitions ─ */
  --ease: cubic-bezier(.4,0,.2,1);
  --t1: .18s; --t2: .28s; --t3: .4s;
}

/* ══ RESET ══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font); font-size:13.5px;
  color:var(--text); line-height:1.7;
  background:var(--grad-page);
  min-height:100vh; overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }
button { cursor:pointer; font-family:var(--font); border:none; background:none; }
input, select, textarea { font-family:var(--font); }
::selection { background:var(--gold); color:var(--navy); }

/* ══ BD BACKGROUND ══ */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* BD map subtle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cpath d='M150 15C128 20 105 32 88 52 71 72 64 95 58 118 52 141 49 160 54 178 46 184 37 192 34 204 31 216 38 228 47 234 41 246 44 258 53 265 59 276 71 282 76 294 82 306 78 322 88 333 98 344 112 350 124 356 138 362 153 360 165 352 177 344 182 330 187 318 194 304 200 290 203 276 206 262 204 248 198 238 210 230 216 218 213 206 210 194 200 187 190 183 196 168 200 151 196 135 192 119 184 105 172 94 160 83 145 76 137 63 130 50 132 32 150 15Z' fill='%231565C0' fill-opacity='.06'/%3E%3C/svg%3E")
      center center / 480px auto no-repeat fixed,
    /* Left BD flag */
    linear-gradient(to bottom, var(--bd-green) 50%, var(--bd-red) 50%) left / 15px 100% no-repeat fixed,
    /* Right BD flag */
    linear-gradient(to bottom, var(--bd-green) 50%, var(--bd-red) 50%) right / 15px 100% no-repeat fixed,
    /* Page bg */
    linear-gradient(160deg, #E8EEF8 0%, #EDF2FA 50%, #E4EBF5 100%) fixed;
}

/* ══ PAGE WRAP ══ */
.page-wrap {
  position:relative; z-index:1;
  max-width:var(--page-max);
  margin:0 auto;
  background:var(--off);
  box-shadow:var(--sh-xl);
  min-height:100vh;
  isolation:isolate;
}

/* ══════════════════════════════════
   HEADER — Cinematic Banner
   ══════════════════════════════════ */
.site-header { position:relative; overflow:hidden; }

.hdr-banner {
  display:block; width:100%; height:138px;
  object-fit:cover; object-position:center 25%;
}

.hdr-overlay {
  position:absolute; inset:0;
  background:var(--grad-hero);
  display:flex; align-items:flex-end;
  padding:12px 20px 12px; gap:15px;
}

.hdr-no-banner {
  min-height:138px;
  background:var(--grad-navy);
  display:flex; align-items:center;
  padding:16px 20px; gap:16px;
  position:relative; overflow:hidden;
}

/* Decorative orbs in no-banner state */
.hdr-no-banner::before {
  content:'';
  position:absolute; top:-40px; right:60px;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.18) 0%, transparent 70%);
  pointer-events:none;
}
.hdr-no-banner::after {
  content:'';
  position:absolute; bottom:-50px; right:200px;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,137,123,.15) 0%, transparent 70%);
  pointer-events:none;
}

.hdr-logo {
  width:70px; height:70px;
  object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.7));
  border-radius:var(--r-sm);
}
.hdr-logo-ph {
  width:70px; height:70px; border-radius:50%;
  border:2px solid rgba(245,166,35,.5);
  background:rgba(245,166,35,.1);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:var(--gold); flex-shrink:0;
}

.hdr-text h1 {
  font-family:var(--font-s); font-size:22px; font-weight:700;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,.5);
  line-height:1.2; margin-bottom:5px;
  letter-spacing:.4px;
}
.hdr-text p {
  font-size:13px; color:rgba(255,255,255,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
  font-weight:500; display:flex; align-items:center; gap:6px;
}
.hdr-text p::before {
  content:'📍'; font-size:11px;
}

/* Gold accent line under header */
.hdr-accent-line {
  height:3px;
  background:linear-gradient(to right, var(--bd-green) 0%, var(--bd-green) 50%, var(--bd-red) 50%, var(--bd-red) 100%);
}

/* ══════════════════════════════════
   NAVIGATION
   ══════════════════════════════════ */
.main-nav {
  background:var(--grad-navy);
  position:sticky; top:0; z-index:500;
  box-shadow:0 4px 20px rgba(10,22,40,.5);
}

.nav-inner { display:flex; align-items:stretch; position:relative; }

.nav-toggle {
  display:none; color:#fff; font-size:20px;
  padding:10px 16px; align-items:center;
}

.nav-list { display:flex; flex-wrap:wrap; align-items:stretch; }
.nav-li { position:relative; }

.nav-link {
  display:flex; align-items:center; gap:4px;
  padding:12px 13px;
  color:rgba(255,255,255,.85);
  font-size:12.5px; font-weight:600;
  white-space:nowrap; cursor:pointer;
  line-height:1; position:relative;
  transition:color var(--t1) var(--ease);
}
.nav-link::after {
  content:''; position:absolute;
  bottom:0; left:13px; right:13px;
  height:2px; border-radius:var(--r-full);
  background:var(--gold);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--t2) var(--ease);
}
.nav-li:hover > .nav-link,
.nav-li.active > .nav-link { color:#fff; }
.nav-li:hover > .nav-link::after,
.nav-li.active > .nav-link::after { transform:scaleX(1); }

.nav-link .chev { font-size:8px; opacity:.7; }

/* Dropdown */
.nav-drop {
  position:absolute; top:100%; left:0;
  background:var(--navy-m);
  min-width:230px;
  border-top:3px solid var(--gold);
  border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--sh-lg);
  z-index:600; display:none; overflow:hidden;
}
.nav-li:hover > .nav-drop { display:block; animation:ddIn .16s var(--ease); }
@keyframes ddIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.nav-drop a {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px;
  color:rgba(255,255,255,.78); font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:var(--t1) var(--ease);
}
.nav-drop a:last-child { border:none; }
.nav-drop a::before {
  content:''; width:5px; height:5px;
  border-radius:50%; background:var(--gold);
  flex-shrink:0; opacity:.6;
  transition:transform var(--t1) var(--ease), opacity var(--t1) var(--ease);
}
.nav-drop a:hover { background:rgba(245,166,35,.12); color:#fff; padding-left:24px; }
.nav-drop a:hover::before { opacity:1; transform:scale(1.4); }

/* ══════════════════════════════════
   BODY LAYOUT
   ══════════════════════════════════ */
.body-wrap { padding:10px; }
.content-grid {
  display:grid;
  grid-template-columns:1fr var(--sidebar);
  gap:var(--gap); align-items:start;
}

/* ══════════════════════════════════
   PRIMARY CONTENT AREA
   ══════════════════════════════════ */
.primary {
  background:var(--white);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden; min-height:420px;
  border:1px solid rgba(196,209,228,.5);
}

/* ══════════════════════════════════
   HOME — STATS BAR
   ══════════════════════════════════ */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--grad-navy);
  position:relative; overflow:hidden;
}
.stats-bar::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E");
  pointer-events:none;
}

.stat-item {
  padding:12px 10px; text-align:center;
  border-right:1px solid rgba(255,255,255,.08);
  position:relative; z-index:1;
  transition:background var(--t2) var(--ease);
}
.stat-item:last-child { border:none; }
.stat-item:hover { background:rgba(245,166,35,.1); }

.stat-num {
  font-size:22px; font-weight:700; color:#fff;
  line-height:1; font-family:var(--font-s);
  text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.stat-lbl {
  font-size:10px; color:rgba(255,255,255,.65);
  margin-top:3px; font-weight:500; letter-spacing:.3px;
  text-transform:uppercase;
}
.stat-icon-sm {
  font-size:16px; margin-bottom:4px;
  display:block; opacity:.8;
}

/* ══════════════════════════════════
   HOME — HERO NOTICE CARD
   ══════════════════════════════════ */
.hero-card {
  display:flex; background:var(--white);
  border-bottom:1px solid var(--g100);
  overflow:hidden; position:relative;
}
.hero-card::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:var(--grad-gold);
}

.hero-img-col {
  width:130px; flex-shrink:0;
  overflow:hidden; position:relative;
}
.hero-img-col img { width:100%; height:100%; object-fit:cover; transition:transform var(--t3) var(--ease); }
.hero-card:hover .hero-img-col img { transform:scale(1.06); }
.hero-img-col::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, rgba(255,255,255,.3));
}

.hero-body { flex:1; padding:16px 18px 12px 20px; display:flex; flex-direction:column; }
.hero-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px;
  background:var(--gold-l);
  color:var(--gold-d);
  font-size:10.5px; font-weight:700;
  border-radius:var(--r-full);
  margin-bottom:8px; width:fit-content;
  border:1px solid rgba(245,166,35,.3);
}
.hero-body h2 {
  font-size:15px; font-weight:700; color:var(--text);
  margin-bottom:10px; line-height:1.4;
}
.hero-cta {
  color:var(--emerald); font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  padding-bottom:2px;
  border-bottom:2px solid rgba(0,137,123,.25);
  transition:var(--t1) var(--ease); width:fit-content;
}
.hero-cta::after { content:'→'; transition:transform var(--t1) var(--ease); }
.hero-cta:hover { color:var(--emerald); border-color:var(--emerald); }
.hero-cta:hover::after { transform:translateX(4px); }
.hero-foot { margin-top:auto; padding-top:10px; border-top:1px solid var(--g100); display:flex; justify-content:flex-end; }

/* ══════════════════════════════════
   HOME — QUICK LINK CARDS
   ══════════════════════════════════ */
.quick-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; padding:10px;
  background:linear-gradient(to bottom, var(--g50), var(--white));
  border-bottom:1px solid var(--g100);
}
.q-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 8px 12px;
  background:var(--white);
  border:1.5px solid var(--g100);
  border-radius:var(--r-lg);
  text-align:center; cursor:pointer;
  transition:all var(--t2) var(--ease);
  box-shadow:var(--sh-xs);
  position:relative; overflow:hidden;
}
.q-card::before {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:3px;
  background:var(--grad-gold);
  transform:scaleX(0);
  transition:transform var(--t2) var(--ease);
}
.q-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent; }
.q-card:hover::before { transform:scaleX(1); }

.q-icon {
  width:44px; height:44px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; transition:transform var(--t2) var(--ease);
}
.q-card:hover .q-icon { transform:scale(1.15) rotate(-5deg); }
.q-icon.c1 { background:linear-gradient(135deg, #E3F2FD, #BBDEFB); color:var(--blue); }
.q-icon.c2 { background:linear-gradient(135deg, #FFF3E0, #FFE0B2); color:#E65100; }
.q-icon.c3 { background:linear-gradient(135deg, var(--emerald-l), #B2DFDB); color:var(--emerald); }
.q-icon.c4 { background:linear-gradient(135deg, #F3E5F5, #E1BEE7); color:var(--violet); }
.q-lbl { font-size:11px; font-weight:700; color:var(--text-m); line-height:1.3; }
.q-card:hover .q-lbl { color:var(--navy); }

/* ══════════════════════════════════
   HOME — TICKER
   ══════════════════════════════════ */
.ticker-wrap {
  background:var(--grad-ticker);
  display:flex; align-items:center;
  padding:7px 12px; gap:12px; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
}
.ticker-pill {
  display:flex; align-items:center; gap:5px;
  padding:3px 12px;
  background:var(--gold);
  color:var(--navy); font-size:11px; font-weight:800;
  border-radius:var(--r-full); white-space:nowrap; flex-shrink:0;
  letter-spacing:.3px;
}
.ticker-divider { width:1px; height:14px; background:rgba(255,255,255,.2); flex-shrink:0; }
.ticker-track { flex:1; overflow:hidden; }
.ticker-text {
  display:inline-block; white-space:nowrap;
  animation:ticker 40s linear infinite;
  font-size:12.5px; color:rgba(255,255,255,.9); font-weight:500;
}
.ticker-text a { color:var(--gold); font-weight:700; }
@keyframes ticker { from{transform:translateX(110%)} to{transform:translateX(-100%)} }
.ticker-btn-all {
  padding:3px 12px; font-size:11px; font-weight:700;
  border:1.5px solid rgba(255,255,255,.35); color:#fff;
  border-radius:var(--r-full); flex-shrink:0; cursor:pointer;
  font-family:var(--font); transition:var(--t1) var(--ease);
  background:transparent;
}
.ticker-btn-all:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.6); }

/* ══════════════════════════════════
   HOME — CONTENT SECTIONS
   ══════════════════════════════════ */
.sec-wrap {
  background:var(--white);
  border-bottom:1px solid var(--g100);
}
.sec-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(to right, var(--g50) 0%, var(--white) 100%);
  border-bottom:1px solid var(--g100);
}
.sec-title-group { display:flex; align-items:center; gap:10px; }
.sec-icon-box {
  width:34px; height:34px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.sec-icon-box.notice { background:linear-gradient(135deg,#FFF3E0,#FFE0B2); color:#E65100; }
.sec-icon-box.dl     { background:linear-gradient(135deg, var(--emerald-l), #B2DFDB); color:var(--emerald); }
.sec-ttl { font-size:14.5px; font-weight:700; color:var(--text); letter-spacing:.1px; }

/* Notice List */
.notice-list li {
  display:flex; align-items:flex-start; gap:9px;
  padding:6px 16px;
  border-bottom:1px solid var(--g50);
  font-size:13px; line-height:1.5;
  transition:all var(--t1) var(--ease);
  position:relative;
}
.notice-list li:last-child { border:none; }
.notice-list li:hover {
  background:linear-gradient(to right, var(--blue-xl), var(--white));
  padding-left:22px;
}
.n-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--blue-v); flex-shrink:0; margin-top:5px;
  transition:transform var(--t1) var(--ease);
  box-shadow:0 0 0 2px rgba(30,136,229,.2);
}
.notice-list li:hover .n-dot { background:var(--gold); transform:scale(1.3); box-shadow:0 0 0 3px rgba(245,166,35,.25); }
.notice-list li a { color:var(--blue); font-weight:600; }
.notice-list li a:hover { color:var(--navy); }
.notice-list li span { color:var(--text-m); }

/* Download List */
.dl-list li {
  display:flex; align-items:center; gap:10px;
  padding:6px 16px;
  border-bottom:1px solid var(--g50);
  font-size:13px;
  transition:all var(--t1) var(--ease);
}
.dl-list li:last-child { border:none; }
.dl-list li:hover { background:linear-gradient(to right, var(--emerald-l), var(--white)); padding-left:22px; }
.dl-icon-sm {
  width:28px; height:28px; border-radius:var(--r-sm);
  background:var(--grad-em);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; flex-shrink:0;
  transition:transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.dl-list li:hover .dl-icon-sm { transform:scale(1.1) rotate(-3deg); box-shadow:var(--sh-em); }
.dl-list li a { color:var(--text-m); font-weight:500; flex:1; }
.dl-list li:hover a { color:var(--emerald); font-weight:600; }

/* Section Footer */
.sec-foot {
  padding:7px 16px;
  border-top:1px solid var(--g100);
  display:flex; justify-content:flex-end;
  background:var(--g50);
}

/* ══════════════════════════════════
   UNIVERSAL BUTTONS
   ══════════════════════════════════ */
.btn-all {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 16px;
  border:1.5px solid var(--g200);
  background:var(--white);
  color:var(--text-m); font-size:12px; font-weight:700;
  border-radius:var(--r-full); cursor:pointer;
  font-family:var(--font); transition:all var(--t1) var(--ease);
}
.btn-all:hover { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:var(--sh-blue); }

.btn-gold {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 24px; border-radius:var(--r-full);
  background:var(--grad-gold); color:var(--navy);
  font-size:13px; font-weight:800;
  box-shadow:var(--sh-gold); border:none;
  cursor:pointer; font-family:var(--font);
  transition:all var(--t2) var(--ease);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,166,35,.55); }

.btn-navy {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 24px; border-radius:var(--r-full);
  background:var(--grad-navy); color:#fff;
  font-size:13px; font-weight:700;
  box-shadow:var(--sh-blue); border:none;
  cursor:pointer; font-family:var(--font);
  transition:all var(--t2) var(--ease);
}
.btn-navy:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(10,22,40,.45); }

.btn-outline {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 22px; border-radius:var(--r-full);
  border:2px solid var(--blue); color:var(--blue);
  font-size:13px; font-weight:700; background:transparent;
  cursor:pointer; font-family:var(--font);
  transition:all var(--t1) var(--ease);
}
.btn-outline:hover { background:var(--blue); color:#fff; }
.btn-sm { padding:5px 14px; font-size:12px; }

/* ══════════════════════════════════
   INNER PAGE HEADER
   ══════════════════════════════════ */
.page-hdr {
  background:var(--grad-navy);
  color:#fff; padding:13px 20px;
  font-size:14px; font-weight:700;
  text-align:center; letter-spacing:.3px;
  position:relative; overflow:hidden;
  border-bottom:3px solid var(--gold);
}
.page-hdr::before {
  content:'';
  position:absolute; top:-20px; left:-20px;
  width:100px; height:100px; border-radius:50%;
  background:rgba(245,166,35,.1); pointer-events:none;
}
.page-hdr::after {
  content:'';
  position:absolute; bottom:-25px; right:-15px;
  width:80px; height:80px; border-radius:50%;
  background:rgba(0,137,123,.12); pointer-events:none;
}

/* ══════════════════════════════════
   SIDEBAR
   ══════════════════════════════════ */
.sidebar { position:sticky; top:44px; }
.sw { background:var(--white); border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; margin-bottom:8px; border:1px solid var(--g100); }
.sw-hdr {
  padding:9px 13px; font-size:12.5px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:7px; letter-spacing:.2px;
}
.sw-hdr::before { content:''; width:3px; height:13px; border-radius:var(--r-full); background:rgba(255,255,255,.45); }
.sw-hdr.gray  { background:linear-gradient(to right, #263238, #37474F); }
.sw-hdr.blue  { background:var(--grad-blue); }
.sw-hdr.green { background:var(--grad-em); }

.principal-card { padding:12px; text-align:center; }
.principal-photo {
  width:122px; height:148px; object-fit:cover; object-position:top;
  border:3px solid var(--g100); border-radius:var(--r);
  margin:0 auto 8px; display:block;
  box-shadow:var(--sh-sm);
  transition:all var(--t2) var(--ease);
}
.principal-card:hover .principal-photo { transform:scale(1.02); box-shadow:var(--sh-md); border-color:var(--gold); }
.principal-ph {
  width:122px; height:148px; background:var(--g50);
  border-radius:var(--r); display:flex; align-items:center;
  justify-content:center; font-size:44px; color:var(--g200);
  margin:0 auto 8px;
}
.principal-name { font-size:12px; font-weight:700; color:var(--text); line-height:1.4; }

.sw-links { padding:3px 0; }
.sw-links li a {
  display:flex; align-items:center; gap:7px;
  padding:6px 12px; font-size:12px; color:var(--text-m);
  border-bottom:1px solid var(--g50);
  transition:all var(--t1) var(--ease); line-height:1.4;
}
.sw-links li:last-child a { border:none; }
.sw-links li a::before {
  content:'›'; font-size:14px; color:var(--blue); flex-shrink:0;
  transition:transform var(--t1) var(--ease);
  line-height:1;
}
.sw-links li a:hover { color:var(--navy); background:var(--blue-xl); padding-left:17px; }
.sw-links li a:hover::before { color:var(--gold); transform:translateX(2px); }
.sw-links li a.red-link { color:var(--crimson); font-weight:700; }
.sw-links li a.red-link:hover { background:var(--crimson-l); color:#b71c1c; }

/* ══════════════════════════════════
   INFO TABLE
   ══════════════════════════════════ */
.info-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.info-tbl tr { border-bottom:1px solid var(--g100); transition:background var(--t1); }
.info-tbl tr:last-child { border:none; }
.info-tbl tr:hover { background:var(--blue-xl); }
.info-tbl td { padding:8px 14px; vertical-align:top; }
.info-tbl td:first-child { width:42%; font-weight:600; color:var(--text-m); text-align:right; padding-right:20px; }

/* TEACHER TABLE */
.teacher-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.teacher-tbl thead { background:var(--grad-navy); }
.teacher-tbl th { color:#fff; padding:10px 11px; font-weight:700; text-align:left; font-size:11.5px; letter-spacing:.3px; }
.teacher-tbl td { padding:8px 11px; border-bottom:1px solid var(--g100); vertical-align:middle; }
.teacher-tbl tr:nth-child(even) td { background:var(--g50); }
.teacher-tbl tr:hover td { background:var(--blue-xl); }
.tphoto { width:44px; height:50px; object-fit:cover; border:2px solid var(--g200); border-radius:var(--r-sm); }

/* STUDENT TABLES */
.std-tbl { width:100%; border-collapse:collapse; font-size:11.5px; text-align:center; }
.std-tbl thead tr:first-child { background:var(--grad-navy); }
.std-tbl thead tr:nth-child(2) { background:rgba(10,22,40,.8); }
.std-tbl th { color:#fff; padding:6px 7px; font-weight:700; font-size:11px; }
.std-tbl td { padding:5.5px 7px; border:1px solid var(--g100); }
.std-tbl tr:nth-child(even) td { background:var(--g50); }
.std-tbl tr:hover td { background:var(--blue-xl); }
.std-tbl .total-row td { background:linear-gradient(to right,#E3F2FD,#DDEEFF)!important; font-weight:700; color:var(--navy); }

.list-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.list-tbl thead { background:var(--grad-navy); }
.list-tbl th { color:#fff; padding:10px 12px; font-weight:700; text-align:left; font-size:11.5px; letter-spacing:.2px; }
.list-tbl td { padding:9px 12px; border-bottom:1px solid var(--g100); vertical-align:middle; }
.list-tbl tr:hover td { background:var(--blue-xl); }
.list-tbl tr:nth-child(even) td { background:var(--g50); }
.list-tbl tr:nth-child(even):hover td { background:var(--blue-xl); }

/* FILTER BAR */
.filter-bar {
  display:grid; grid-template-columns:repeat(4,1fr) auto;
  gap:9px; align-items:end;
  padding:13px 16px;
  background:linear-gradient(to bottom, var(--g50), var(--white));
  border-bottom:1px solid var(--g100);
}
.fl { display:flex; flex-direction:column; gap:3px; }
.fl label { font-size:11px; font-weight:700; color:var(--text-m); }
.fsel {
  padding:7px 10px; width:100%;
  border:1.5px solid var(--g200);
  border-radius:var(--r); font-family:var(--font);
  font-size:12.5px; color:var(--text); background:#fff;
  cursor:pointer; transition:border-color var(--t1);
}
.fsel:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.12); }

.filter-tbl { width:100%; border-collapse:collapse; }
.filter-tbl td { padding:8px 16px; border-bottom:1px solid var(--g100); font-size:13px; }
.filter-tbl td:first-child { width:42%; font-weight:600; color:var(--text-m); text-align:right; padding-right:20px; }
.filter-total {
  text-align:center;
  background:var(--grad-navy); color:#fff;
  font-weight:700; font-size:14px; padding:11px;
  border-bottom:2px solid var(--gold);
}

/* RESULTS */
.result-tabs { display:flex; overflow-x:auto; border-bottom:2px solid var(--gold); background:var(--navy-m); }
.rtab { padding:10px 16px; font-size:12.5px; font-weight:700; white-space:nowrap; color:rgba(255,255,255,.65); border-right:1px solid rgba(255,255,255,.08); cursor:pointer; transition:all var(--t1); flex-shrink:0; }
.rtab:hover { color:#fff; background:rgba(255,255,255,.08); }
.rtab.active { background:var(--gold); color:var(--navy); }

.result-filter { padding:12px 16px; background:var(--g50); border-bottom:1px solid var(--g100); }
.result-filter form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; }

.rcard {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px; margin-bottom:8px;
  background:var(--white); border:1.5px solid var(--g100);
  border-radius:var(--r); box-shadow:var(--sh-xs);
  transition:all var(--t2) var(--ease);
}
.rcard:hover { border-color:var(--gold); box-shadow:var(--sh-gold); transform:translateX(4px); }
.rcard-title { font-size:13px; color:var(--navy); font-weight:700; margin-bottom:5px; }
.rcard-meta { font-size:11px; color:var(--text-l); display:flex; flex-wrap:wrap; gap:9px; }
.exam-badge { background:var(--gold-l); color:var(--gold-d); padding:2px 10px; border-radius:var(--r-full); font-size:11px; font-weight:700; border:1px solid rgba(245,166,35,.3); }
.rcard-btns { display:flex; gap:7px; flex-shrink:0; }

/* GALLERY */
.gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:10px; }
.gitem {
  aspect-ratio:4/3; overflow:hidden; cursor:pointer;
  border:2px solid transparent; border-radius:var(--r);
  transition:all var(--t2) var(--ease); position:relative;
}
.gitem::after {
  content:'🔍'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; background:rgba(10,22,40,.0);
  transition:all var(--t2) var(--ease);
}
.gitem:hover { transform:scale(1.04); border-color:var(--gold); box-shadow:var(--sh-gold); }
.gitem:hover::after { background:rgba(10,22,40,.55); }
.gitem img { width:100%; height:100%; object-fit:cover; transition:transform var(--t3) var(--ease); }
.gitem:hover img { transform:scale(1.1); }

/* ADMISSION */
.adm-wrap { padding:16px; }
.adm-block {
  background:var(--g50); border:1.5px solid var(--g100);
  border-radius:var(--r-lg); padding:16px; margin-bottom:14px;
  transition:all var(--t2) var(--ease);
}
.adm-block:hover { border-color:rgba(21,101,192,.25); box-shadow:var(--sh-sm); }
.adm-ttl {
  font-size:13.5px; font-weight:700; color:var(--navy);
  margin-bottom:14px; padding-bottom:9px;
  border-bottom:2px solid var(--blue-xl);
  display:flex; align-items:center; gap:10px;
}
.adm-ttl-icon {
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--grad-navy); display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:14px; flex-shrink:0;
}
.f2col { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.fg { display:flex; flex-direction:column; gap:4px; }
.fg label { font-size:11.5px; font-weight:700; color:var(--text-m); }
.fc {
  width:100%; padding:8px 12px;
  border:1.5px solid var(--g200); border-radius:var(--r);
  font-family:var(--font); font-size:13px; color:var(--text); background:#fff;
  transition:border-color var(--t1), box-shadow var(--t1);
}
.fc:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.12); }
.fc.invalid { border-color:var(--crimson); box-shadow:0 0 0 3px rgba(198,40,40,.1); }
.err { font-size:11.5px; color:var(--crimson); display:flex; align-items:center; gap:4px; }

/* ALERTS */
.alert-ok  { padding:13px 16px; background:var(--emerald-l); color:#1b5e20; border:1.5px solid #80CBC4; border-left:4px solid var(--emerald); border-radius:var(--r); margin-bottom:14px; font-size:13px; display:flex; align-items:center; gap:10px; }
.alert-inf { padding:13px 16px; background:var(--blue-xl); color:var(--navy); border:1.5px solid #90CAF9; border-left:4px solid var(--blue); border-radius:var(--r); margin-bottom:14px; font-size:13px; display:flex; align-items:center; gap:10px; }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px; }
.contact-card { background:var(--g50); border:1.5px solid var(--g100); border-radius:var(--r-lg); padding:16px; }
.contact-card h3 { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:12px; display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:2px solid var(--blue-xl); }
.c-item { display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px solid var(--g100); font-size:12.5px; }
.c-item:last-child { border:none; }
.c-icon { width:28px; height:28px; border-radius:var(--r-sm); background:var(--blue-xl); display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:12px; flex-shrink:0; }
.c-lbl { font-size:10.5px; font-weight:700; color:var(--text-l); letter-spacing:.2px; text-transform:uppercase; display:block; margin-bottom:1px; }
.c-val { color:var(--text); font-weight:500; }

/* CONTENT PAGES */
.cp { padding:16px 20px; }
.cp h3 { font-size:15px; color:var(--navy); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--gold); display:flex; align-items:center; gap:10px; }
.cp h3::before { content:''; width:4px; height:18px; background:var(--grad-gold); border-radius:var(--r-full); }
.cp p { margin-bottom:10px; text-align:justify; font-size:13px; line-height:1.8; color:var(--text-m); }

.empty-state { text-align:center; padding:52px 20px; color:var(--text-l); }
.empty-state i { font-size:42px; display:block; margin-bottom:14px; opacity:.2; }
.empty-state h3 { font-size:16px; color:var(--text-m); margin-bottom:8px; }

.badge-act { background:var(--emerald-l); color:#1B5E20; padding:3px 10px; border-radius:var(--r-full); font-size:11px; font-weight:700; }
.badge-ina { background:var(--crimson-l); color:var(--crimson); padding:3px 10px; border-radius:var(--r-full); font-size:11px; font-weight:700; }
.p-wrap { padding:14px 16px; }

/* FOOTER */
.site-footer {
  background:var(--grad-navy);
  color:rgba(255,255,255,.75); padding:14px 20px; font-size:12px;
}
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-inner p { margin-bottom:3px; line-height:1.6; }
.footer-inner strong { color:#fff; }
.footer-r { text-align:right; }
.footer-link { color:var(--gold); }
.footer-link:hover { color:#fff; text-decoration:underline; }

/* ══════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media (max-width:980px) {
  .content-grid { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .quick-row { grid-template-columns:repeat(4,1fr); }
  .gallery-grid { grid-template-columns:repeat(4,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .filter-bar { grid-template-columns:1fr 1fr; }
  .result-filter form { grid-template-columns:1fr 1fr; }
}

@media (max-width:680px) {
  .nav-toggle { display:flex; }
  .nav-list {
    display:none; flex-direction:column; width:100%;
    position:absolute; top:100%; left:0;
    background:var(--navy); z-index:700;
    box-shadow:var(--sh-xl);
    border-top:2px solid var(--gold);
  }
  .nav-list.open { display:flex; animation:navIn .2s var(--ease); }
  @keyframes navIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
  .nav-link { padding:12px 18px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.07); }
  .nav-link::after { display:none; }
  .nav-drop { position:static; display:none; box-shadow:none; border:none; border-radius:0; background:rgba(0,0,0,.35); border-left:3px solid var(--gold); }
  .nav-li.open > .nav-drop { display:block; }
  .nav-drop a { color:rgba(255,255,255,.82); border-color:rgba(255,255,255,.07); }

  .hdr-banner { height:105px; }
  .hdr-text h1 { font-size:17px; }
  .hdr-overlay { padding:8px 14px 10px; gap:10px; }
  .hdr-logo { width:58px; height:58px; }
  .body-wrap { padding:6px; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .quick-row { grid-template-columns:repeat(2,1fr); gap:6px; }
  .hero-card { flex-direction:column; }
  .hero-img-col { width:100%; height:95px; border-right:none; border-bottom:1px solid var(--g100); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); gap:5px; padding:7px; }
  .f2col { grid-template-columns:1fr; }
  .filter-bar { grid-template-columns:1fr; gap:8px; }
  .result-filter form { grid-template-columns:1fr; }
  .rcard { flex-direction:column; align-items:flex-start; }
  .rcard-btns { width:100%; justify-content:flex-end; }
  .footer-inner { flex-direction:column; }
  .footer-r { text-align:left; }
  body::before { background-size:280px auto, 11px 100%, 11px 100%, 100%; }
}

@media (max-width:400px) {
  .hdr-text h1 { font-size:14.5px; }
  .hdr-banner { height:88px; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .quick-row { grid-template-columns:repeat(2,1fr); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); gap:4px; }
  body::before { background-size:200px auto, 8px 100%, 8px 100%, 100%; }
}

/* Focus rings */
a:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--r-sm); }