/* ═══════════════════════════════════════════════════════════════
   TINS — SHARED PAGE STYLES (load AFTER tokens.css and style.css)
   Used by: notices, results, courses, admissions, faculty, gallery,
   video, downloads, feedback, alumni, students, facilities, about,
   contact, page, policy, quick-links.

   Class names are preserved so old pages keep working.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page banner (every inner page) ── */
.page-banner {
  position: relative;
  padding: var(--s-12) 0 var(--s-10);
  color: #fff;
  isolation: isolate;
  margin-bottom: 0;
  background: linear-gradient(135deg, var(--c-brand-900) 0%, var(--c-brand-800) 50%, var(--c-neutral-900) 100%);
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
  pointer-events: none;
}
.page-banner > .container { position: relative; z-index: 2; }
.page-banner h1 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-3);
  display: flex; align-items: center; gap: 10px;
  color: #fff;
}
.page-banner .breadcrumb {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin: 0;
  font-size: var(--fs-xs);
  backdrop-filter: blur(6px);
}
.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .2px;
}
.page-banner .breadcrumb-item a:hover { color: var(--c-brand-300); }
.page-banner .breadcrumb-item.active { color: #fff; }
.page-banner .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.4);
  content: '›';
  padding: 0 8px;
}

/* ── Generic content card (about, admissions, contact, etc) ── */
.content-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--s-8);
  box-shadow: var(--sh-sm);
}
.content-card h3 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -.01em;
}
.content-card h3:not(:first-child) { margin-top: var(--s-6); }
.content-card p { color: var(--text-base); line-height: 1.75; font-size: var(--fs-base); }
.content-card ul { color: var(--text-base); line-height: 1.85; padding-left: var(--s-5); }
.content-card ul li { margin-bottom: 4px; }

/* CMS content (admin-rendered HTML) */
.cms-content { color: var(--text-base); line-height: 1.8; font-size: var(--fs-base); }
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4 {
  font-family: var(--fh); color: var(--text-strong); margin-top: var(--s-6);
  letter-spacing: -.01em;
}
.cms-content h1 { font-size: var(--fs-2xl); }
.cms-content h2 { font-size: var(--fs-xl); }
.cms-content h3 { font-size: var(--fs-lg); }
.cms-content img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--s-3) 0; }
.cms-content a { color: var(--c-brand-700); text-decoration: underline; text-underline-offset: 2px; }
.cms-content a:hover { color: var(--c-brand-800); }
.cms-content table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0; }
.cms-content th, .cms-content td { padding: 10px 12px; border: 1px solid var(--border-subtle); }
.cms-content th { background: var(--surface-page); font-weight: 700; }

/* Info box (used inside content cards) */
.info-box {
  background: linear-gradient(135deg, var(--c-brand-50), var(--c-brand-100));
  border: 1px solid var(--c-brand-200);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.info-box h5 {
  font-family: var(--fh);
  font-weight: 700;
  color: var(--c-brand-800);
  font-size: var(--fs-base);
  margin: 0 0 6px;
}
.info-box p { color: var(--c-brand-800); margin: 0; font-size: var(--fs-sm); }

/* ── Empty state (notices/results/gallery/etc when no data) ── */
.empty-state {
  text-align: center;
  padding: var(--s-12) var(--s-4);
  color: var(--text-muted);
}
.empty-state i {
  font-size: 4rem;
  color: var(--border-default);
  display: block;
  margin-bottom: var(--s-3);
}
.empty-state h3 {
  font-family: var(--fh);
  color: var(--text-base);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin: 0 0 var(--s-2);
}
.empty-state p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ── COURSE CARD ── */
.course-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--s-6);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.course-card h5 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.course-card .duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 1px solid var(--c-brand-200);
}

/* ── FACULTY CARD ── */
.faculty-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  text-align: center;
  padding: var(--s-6) var(--s-4);
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.faculty-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-brand-50) 0%, transparent 30%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-brand-300);
}
.faculty-card:hover::before { opacity: 1; }
.faculty-card > * { position: relative; z-index: 1; }

.faculty-card .photo-wrap {
  width: 124px;
  height: 124px;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--c-brand-200), var(--c-brand-50));
  position: relative;
}
.faculty-card .photo-wrap img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
}
.faculty-card h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: .96rem;
  color: var(--text-strong);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.faculty-card .designation {
  font-size: var(--fs-xs);
  color: var(--c-brand-700);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .2px;
}
.faculty-card .dept {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.faculty-card .qual {
  font-size: .72rem;
  color: var(--text-base);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.faculty-card .qual i { color: #D97706; font-size: .68rem; }
.faculty-card .phone {
  font-size: .7rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.faculty-card .role-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: .62rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.faculty-card .role-badge.teaching {
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  border: 1px solid var(--c-brand-200);
}
.faculty-card .role-badge.non-teaching {
  background: var(--c-accent-amber-bg);
  color: var(--c-accent-amber-fg);
  border: 1px solid var(--c-accent-amber-bd);
}

/* Faculty filter pills */
.filter-pills { display: flex; gap: 8px; margin-bottom: var(--s-5); flex-wrap: wrap; }
.filter-pills a {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--border-default);
  color: var(--text-base);
  background: var(--surface-card);
  transition: all var(--dur-base) var(--ease-out);
  letter-spacing: .3px;
}
.filter-pills a:hover {
  border-color: var(--c-brand-400);
  color: var(--c-brand-700);
  transform: translateY(-1px);
}
.filter-pills a.active {
  background: linear-gradient(135deg, var(--c-brand-600), var(--c-brand-700));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-brand);
}

/* ── GALLERY CARD (album thumbs) ── */
.gallery-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  height: 100%;
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.gallery-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.gallery-card .thumb {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: var(--surface-page);
}
.gallery-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.gallery-card:hover .thumb img { transform: scale(1.07); }
.gallery-card .count-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(15,23,42,.75);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
}
.gallery-card .body { padding: var(--s-4); }
.gallery-card .body h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-strong);
  margin: 0 0 6px;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.gallery-card .body small {
  color: var(--text-muted);
  font-size: .74rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Gallery detail grid (inside an album) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 767.98px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.gallery-grid .gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-sm);
}
.gallery-grid .gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.gallery-grid .gallery-item:hover img { transform: scale(1.08); }

/* ── VIDEO CARD ── */
.video-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  height: 100%;
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.video-card .thumb {
  height: 200px;
  position: relative;
  background: linear-gradient(135deg, #1e1b4b, #0f172a);
  overflow: hidden;
}
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity var(--dur-base) var(--ease-out); }
.video-card:hover .thumb img { opacity: .85; }
.video-card .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255,255,255,.92);
  text-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: transform var(--dur-base) var(--ease-spring);
}
.video-card:hover .play { transform: scale(1.15); }
.video-card .count-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(124,58,237,.85);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
}
.video-card .body { padding: var(--s-4); }
.video-card .body h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-strong);
  margin: 0 0 6px;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.video-card .body small { color: var(--text-muted); font-size: .74rem; }

/* ── DOWNLOAD CARD ── */
.download-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.download-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--c-brand-300);
}
.download-card .dl-icon {
  width: 50px; height: 50px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-brand-50), var(--c-brand-100));
  color: var(--c-brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  border: 1px solid var(--c-brand-200);
}
.download-card .dl-info { flex: 1; min-width: 0; }
.download-card .dl-info h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.download-card .dl-info small {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.download-card .dl-btn {
  background: linear-gradient(135deg, var(--c-brand-600), var(--c-brand-700));
  color: #fff;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--sh-brand);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.download-card .dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-brand-lg);
  color: #fff;
}

/* ── ALUMNI CARD ── */
.alumni-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--s-6) var(--s-5);
  text-align: center;
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.alumni-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.alumni-card img {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--s-3);
  display: block;
  border: 3px solid var(--c-brand-50);
}
.alumni-card h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0 0 4px;
}
.alumni-card .quote {
  font-style: italic;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-subtle);
}

/* ── RESULT CARD (student corner tiles) ── */
.result-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.result-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-brand-300);
}
.result-card .rc-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  border: 1px solid var(--c-brand-100);
}
.result-card .rc-info h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0 0 4px;
}
.result-card .rc-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── NOTICE LIST (notices.php) ── */
.notice-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  margin-bottom: 12px;
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  box-shadow: var(--sh-xs);
}
.notice-item:hover {
  transform: translateX(4px);
  border-color: var(--c-brand-400);
  box-shadow: var(--sh-md);
}
.notice-item .date-block {
  min-width: 64px;
  text-align: center;
  flex-shrink: 0;
}
.notice-item .date-block .inner {
  background: linear-gradient(135deg, var(--c-brand-50), var(--c-brand-100));
  border-radius: var(--r-md);
  padding: 10px 8px;
  border: 1px solid var(--c-brand-200);
}
.notice-item .date-block .day {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-brand-700);
  line-height: 1;
  font-family: var(--fh);
}
.notice-item .date-block .mon {
  font-size: .62rem;
  font-weight: 700;
  color: var(--c-brand-600);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 3px;
}
.notice-item .date-block .yr { font-size: .58rem; color: var(--text-muted); margin-top: 2px; }
.notice-item .body { flex: 1; min-width: 0; }
.notice-item .body h6 {
  margin: 0 0 6px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-strong);
  font-family: var(--fh);
  line-height: 1.4;
  letter-spacing: -.01em;
}
.notice-item .body p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-base);
  line-height: 1.6;
}
.notice-item .meta {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.notice-item .meta .pin {
  font-size: .7rem;
  color: var(--c-brand-700);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--c-brand-50);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-brand-200);
}
.notice-item .arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--border-default);
  transition: color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.notice-item:hover .arrow { color: var(--c-brand-600); transform: translateX(4px); }

/* Search input styled */
.search-bar {
  position: relative;
  margin-bottom: var(--s-5);
}
.search-bar input {
  width: 100%;
  padding: 12px 18px 12px 44px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  background: var(--surface-card);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  font-family: var(--fb);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.search-bar i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
}

/* Notice DETAIL view */
.notice-detail-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.notice-detail-card .header {
  background: linear-gradient(135deg, var(--c-brand-700), var(--c-brand-800));
  color: #fff;
  padding: var(--s-8);
  position: relative;
  overflow: hidden;
}
.notice-detail-card .header::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.notice-detail-card .header::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.notice-detail-card .header > * { position: relative; z-index: 1; }
.notice-detail-card .header h2 {
  margin: 0;
  font-family: var(--fh);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: #fff;
  letter-spacing: -.01em;
}
.notice-detail-card .header .h-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-right: 14px;
  vertical-align: middle;
  margin-bottom: var(--s-3);
}
.notice-detail-card .header .meta {
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  opacity: .85;
  flex-wrap: wrap;
}
.notice-detail-card .body {
  padding: var(--s-8);
  line-height: 2;
  color: var(--text-base);
  font-size: var(--fs-base);
}
.notice-detail-card .attachments {
  margin: var(--s-6) var(--s-8) var(--s-8);
  padding: var(--s-5);
  background: linear-gradient(135deg, var(--c-brand-50), var(--c-brand-100));
  border-radius: var(--r-md);
  border: 1px solid var(--c-brand-200);
}
.notice-detail-card .attachments .head {
  font-weight: 700;
  color: var(--c-brand-800);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-3);
}
.notice-detail-card .attachments .files { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-detail-card .attachments .files a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-brand-800);
  border: 1px solid var(--c-brand-200);
  text-decoration: none;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.notice-detail-card .attachments .files a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

/* ── FORM (feedback, contact) ── */
.form-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--s-8);
  box-shadow: var(--sh-sm);
}
.form-card .form-label {
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.form-card .form-control,
.form-card .form-select {
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: var(--fs-sm);
  font-family: var(--fb);
  background: var(--surface-card);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.form-card .form-control:focus,
.form-card .form-select:focus {
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.form-card .btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--c-brand-600), var(--c-brand-700));
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: var(--sh-brand);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.form-card .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-brand-lg);
}

/* ── CONTACT INFO (contact.php) ── */
.contact-row {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  align-items: flex-start;
}
.contact-row .ic {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  border: 1px solid var(--c-brand-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.contact-row strong {
  font-family: var(--fh);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  display: block;
  margin-bottom: 3px;
  letter-spacing: -.01em;
}
.contact-row a, .contact-row p {
  color: var(--text-base);
  text-decoration: none;
  font-size: var(--fs-sm);
  margin: 0;
  line-height: 1.6;
}
.contact-row a:hover { color: var(--c-brand-700); }

/* ── BACK BUTTON ── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-base);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.btn-back:hover {
  background: var(--c-brand-50);
  border-color: var(--c-brand-400);
  color: var(--c-brand-700);
  transform: translateX(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS PAGE — table, filter card, badges, exam header
   ═══════════════════════════════════════════════════════════════ */
.res-section {
  padding: var(--s-8) 0 var(--s-12);
  background: var(--surface-page);
  min-height: 60vh;
}

/* Filter card */
.filter-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-5);
  box-shadow: var(--sh-xs);
}
.filter-card .form-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.filter-card .form-select,
.filter-card .form-control {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  padding: 7px 10px;
  background: var(--surface-card);
  transition: border-color var(--dur-base) var(--ease-out);
}
.filter-card .form-select:focus,
.filter-card .form-control:focus {
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 2px rgba(16,185,129,.1);
  outline: none;
}
.btn-filter {
  background: linear-gradient(135deg, var(--c-brand-600), var(--c-brand-700));
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: var(--sh-brand);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.btn-filter:hover { transform: translateY(-1px); box-shadow: var(--sh-brand-lg); }
.btn-reset {
  background: var(--surface-card);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--dur-base) var(--ease-out);
}
.btn-reset:hover {
  border-color: var(--c-accent-rose);
  color: var(--c-accent-rose);
  background: #fff5f5;
}

/* Result count bar */
.res-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface-card);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.res-count strong {
  color: var(--text-strong);
  font-family: var(--fh);
  font-size: var(--fs-base);
}

/* Pill badges (used across results table) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2px;
}
.badge-pill.green { background: var(--c-brand-50); color: var(--c-brand-700); border: 1px solid var(--c-brand-200); }
.badge-pill.red { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.badge-pill.amber { background: var(--c-accent-amber-bg); color: var(--c-accent-amber-fg); border: 1px solid var(--c-accent-amber-bd); }
.badge-pill.blue { background: var(--c-accent-blue-bg); color: var(--c-accent-blue-fg); border: 1px solid var(--c-accent-blue-bd); }
.badge-pill.violet { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }

/* Result row pass/fail */
.result-pass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .5px;
  border: 1px solid var(--c-brand-200);
}
.result-fail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #FEF2F2;
  color: #B91C1C;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .5px;
  border: 1px solid #FECACA;
}

/* Exam header card (single-exam detail view) */
.exam-header {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-4);
  box-shadow: var(--sh-sm);
}
.exam-header h3 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  margin: 0;
  display: flex;
  align-items: center;
  letter-spacing: -.01em;
}
.exam-header .eh-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}

.stat-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-page);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}
.stat-mini .sm-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.stat-mini .sm-val {
  font-family: var(--fh);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  line-height: 1;
}
.stat-mini .sm-lbl {
  font-size: .64rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* Table wrap */
.table-wrap {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.table-wrap .table {
  margin: 0;
  font-size: var(--fs-sm);
}
.table-wrap .table thead th {
  background: var(--surface-page);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.table-wrap .table tbody td {
  padding: 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-neutral-100);
}
.table-wrap .table tbody tr:last-child td { border-bottom: none; }
.table-wrap .table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table-wrap .table tbody tr:hover { background: var(--c-brand-50); }
.sl-td {
  text-align: center;
  font-family: var(--fh);
  font-weight: 700;
  color: var(--text-muted);
  font-size: .82rem;
}
.exam-name {
  display: block;
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  letter-spacing: -.01em;
}
.exam-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.mark-cell {
  font-family: var(--fh);
  font-weight: 800;
  font-size: var(--fs-base);
}
.pct-cell {
  font-family: var(--fh);
  font-weight: 800;
  font-size: var(--fs-sm);
}

.btn-view {
  background: linear-gradient(135deg, var(--c-brand-600), var(--c-brand-700));
  color: #fff;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn-view:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-brand);
  color: #fff;
}

.empty-box {
  background: var(--surface-card);
  border: 2px dashed var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-12) var(--s-4);
  text-align: center;
  color: var(--text-muted);
}
.empty-box i { font-size: 3.5rem; color: var(--border-default); display: block; margin-bottom: var(--s-3); }
.empty-box h4 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-base);
  margin: 0 0 6px;
}
.empty-box p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ── FACILITIES grid (facilities.php) ── */
.fac-tile {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: center;
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.fac-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-brand-300);
}
.fac-tile .ic {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-brand-50), var(--c-brand-100));
  color: var(--c-brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto var(--s-3);
  border: 1px solid var(--c-brand-200);
}
.fac-tile h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.fac-tile p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Why TIONS sidebar (admissions.php) ── */
.why-card {
  background: linear-gradient(135deg, var(--c-brand-700), var(--c-brand-800));
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%);
}
.why-card > * { position: relative; z-index: 1; }
.why-card h3 {
  font-family: var(--fh);
  font-weight: 700;
  color: #fff;
  font-size: var(--fs-lg);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.why-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: var(--fs-sm);
}
.why-card ul li {
  padding: 8px 0 8px 24px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
  line-height: 1.5;
}
.why-card ul li:last-child { border-bottom: none; }
.why-card ul li::before {
  content: '\F26B';
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0; top: 8px;
  color: var(--c-brand-300);
  font-size: 1rem;
}

.codes-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-3);
  box-shadow: var(--sh-xs);
}
.codes-card h3 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0 0 var(--s-3);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: -.01em;
}
.codes-card p {
  font-size: var(--fs-sm);
  color: var(--text-base);
  margin: 6px 0;
}
.codes-card p strong {
  color: var(--c-brand-700);
  display: inline-block;
  min-width: 110px;
}

/* ── Quick links page ── */
.quick-link-tile {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.quick-link-tile:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand-400);
  box-shadow: var(--sh-md);
}
.quick-link-tile .ic {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  border: 1px solid var(--c-brand-100);
}
.quick-link-tile h6 {
  font-family: var(--fh);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0 0 2px;
}
.quick-link-tile small { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Mobile tweaks for table-wrap ── */
@media (max-width: 767.98px) {
  .filter-card { padding: var(--s-4); }
  .table-wrap .table { font-size: .78rem; }
  .table-wrap .table thead th,
  .table-wrap .table tbody td { padding: 10px 8px; }
}