/* ICT World Technical Training Institute — premium blue theme, mobile-first.
   Blue matches the supplied logo: #0b5ed7 / #0a4da6 / navy #0a2a5e. */
/* Pinyon Script (Nicole Fally, Google Fonts, SIL OFL 1.1) — self-hosted
   script font for ALL the certificate's dotted fill-in values (9 values:
   student name, father, mother, course, study center, period from/to,
   grade, DOB). WOFF2 = full conversion of PinyonScript-Regular.ttf
   (836 glyphs, from the official google/fonts repo); TTF = the original
   file. The face is Regular only (OS/2 weight 400) — no bold weight
   exists, so the values use weight 400 (no synthesised bold).
   Bengali text falls back to Noto Sans Bengali (the fallback stack),
   never boxes. */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pinyon-script.woff2') format('woff2'),
       url('fonts/pinyon-script.ttf') format('truetype');
}
:root {
  --blue: #0b5ed7; --blue-dark: #0a4da6; --navy: #0a2a5e; --sky: #e8f1fe;
  --bg: #f4f7fc; --card: #ffffff; --text: #14213d; --muted: #5b6b82;
  --line: #dbe4f0; --green: #0a7d4d; --amber: #b45309; --red: #b91c1c;
  --radius: 14px; --shadow: 0 6px 24px rgba(10, 42, 94, .10);
}
[data-theme="dark"] {
  --bg: #0d1526; --card: #152238; --text: #e8eef7; --muted: #9fb0c8;
  --line: #26395c; --sky: #16294a; --shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Noto Sans Bengali", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: .6em 0 .4em; }
h2 { font-size: 1.25rem; margin: 1.4em 0 .5em; }
.muted { color: var(--muted); }
small { display: block; }

/* Header */
.utilbar { display: none; background: var(--navy); color: #dbe9ff; font-size: .82rem; }
.utilbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.util-left { display: flex; gap: 10px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.util-left a { color: #fff; font-weight: 600; }
.util-left a:hover { color: #fff; }
.util-sep { opacity: .55; }
.util-right { display: flex; gap: 6px; align-items: center; flex: none; }
.util-right .badge { background: rgba(255, 255, 255, .16); color: #fff; }
.topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 12px rgba(10, 42, 94, .06); }
.topbar.scrolled { box-shadow: 0 8px 22px rgba(10, 42, 94, .16); }
.topbar-in { display: flex; align-items: center; gap: 14px; padding: 8px 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 46px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: .86rem; line-height: 1.28; font-weight: 800; letter-spacing: .01em; }
.brand-text small { color: var(--muted); font-size: .75rem; }
.topnav { display: none; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.topnav a { color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: .92rem; }
.topnav a:hover { background: var(--sky); text-decoration: none; }
.topnav a.active { background: var(--sky); color: var(--blue-dark); font-weight: 700; }
.top-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.topnav ~ .top-actions { margin-left: 0; }
.top-cta { display: none; background: var(--blue); border: 1px solid var(--blue); color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9rem; white-space: nowrap; flex: none; box-shadow: 0 2px 10px rgba(11, 94, 215, .35); }
.top-cta:hover { text-decoration: none; filter: brightness(.95); }
@media (min-width: 480px) {
  .top-cta { display: inline-block; }
}
@media (min-width: 900px) {
  .utilbar { display: block; }
  .brand-logo { height: 54px; }
}
/* Mobile top bar: phone + Helpline only. Address + badges stay desktop-only;
   the separator before the address hides with them (no dangling "·").
   Helpline now carries TWO numbers, so the row wraps to two lines at 360px
   ("📞 01875848893 · Helpline: 01875-848893," / "01712-197959") instead of
   truncating — font size stays .82rem, nothing is shrunk. */
@media (max-width: 899px) {
  .utilbar { display: block; }
  .util-right, .util-addr, .util-sep-addr { display: none; }
  .util-left { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
}
/* Desktop header: single row with the full institute name visible.
   Measured with Noto Sans Bengali: brand ~380px, 10 nav links
   ~630-690px, CTA ~100px, chips ~95px — so the header container is
   widened to 1400px and the nav is tightened; below ~1280px the
   header wraps cleanly to two rows instead of truncating the name. */
@media (min-width: 900px) {
  .topbar > .wrap, .utilbar > .wrap { max-width: 1400px; }
  .topbar-in { flex-wrap: wrap; gap: 8px 12px; }
  .brand { flex: none; }
  .brand-text strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-text small { white-space: nowrap; }
  .topnav a { font-size: .82rem; padding: 5px 7px; }
  .top-cta { padding: 7px 13px; font-size: .85rem; }
}
@media (max-width: 1199px) {
  .brand-text small { display: none; }
}
@media (min-width: 1280px) {
  .topnav a { font-size: .85rem; padding: 6px 7px; }
  .brand-text strong { font-size: .95rem; }
}
@media (min-width: 1400px) {
  .topnav a { font-size: .88rem; padding: 6px 8px; }
}
.chip-btn { background: var(--sky); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: filter .15s ease; }
.chip-btn:hover { filter: brightness(.96); }
.admit-bar { background: linear-gradient(90deg, var(--blue), var(--blue-dark)); color: #fff; font-size: .92rem; padding: 9px 0; text-align: center; line-height: 1.55; letter-spacing: .01em; }
.admit-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--navy), var(--blue-dark) 60%, var(--blue)); color: #fff; border-radius: 0 0 22px 22px; margin: 0 -16px; padding: 34px 16px 30px; text-align: center; }
.hero-logo { background: #fff; border-radius: 14px; padding: 10px 14px; max-width: 340px; width: 86%; height: auto; box-shadow: var(--shadow); }
.hero h1 { color: #fff; font-size: 1.7rem; margin: .5em 0 .2em; }
.hero-tag { font-size: 1.1rem; color: #cfe3ff; margin: .2em 0; }
.hero-sub { color: #dbe9ff; max-width: 620px; margin: .6em auto 1.2em; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.btn { display: inline-block; background: var(--card); color: var(--blue-dark); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; font-weight: 700; cursor: pointer; font-size: .95rem; }
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.big { padding: 12px 26px; font-size: 1.02rem; }
.btn.small { padding: 8px 16px; font-size: .88rem; margin: 0 12px 12px; }
.btn.wa { background: #128c4b; border-color: #128c4b; color: #fff; }
.btn.call { background: #fff; color: var(--navy); }
.btn.ghost { background: transparent; }
.hero .btn { border-color: transparent; }
.hero .btn:not(.primary):not(.wa):not(.call) { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }

/* Hero slider: slides stack in one grid cell and cross-fade. No-JS shows slide 1 only. */
/* Institute header block above the hero slider (settings-driven, like the
   institute banner — name + approval + project + address). Card styling
   matches the site theme; no pink banner background. Name uses --blue (site
   primary) on light mode with a light-blue override in dark mode.
   Premium treatment: a blue→gold→blue hairline across the card top, a
   gradient gold rule, and the approval line as a soft sky pill badge
   (dark mode: light-blue text on the dark sky tint). */
.inst-head { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); text-align: center; padding: 22px 16px 20px; margin: 14px 0 16px; }
.inst-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), #c9a227 50%, var(--blue)); }
.inst-head-name { font-size: 1.5rem; line-height: 1.28; font-weight: 800; letter-spacing: .01em; color: var(--blue); margin: 0; text-wrap: balance; }
[data-theme="dark"] .inst-head-name { color: #9cc2ff; }
.inst-head-rule { width: 72px; height: 3px; background: linear-gradient(90deg, #b98a1d, #d9b64a, #b98a1d); border-radius: 2px; margin: 14px auto; }
.inst-head-approval { display: inline-block; background: var(--sky); color: var(--blue-dark); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: .92rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; margin: 0 0 10px; }
[data-theme="dark"] .inst-head-approval { color: #bcd3ff; border-color: #2c4a7d; }
.inst-head-project, .inst-head-addr { font-size: .92rem; color: var(--muted); margin: 3px 0; line-height: 1.6; text-wrap: balance; }
.inst-head-project { font-size: .95rem; }
@media (min-width: 900px) {
  .inst-head { padding: 30px 28px 26px; }
  .inst-head-name { font-size: 2rem; }
  .inst-head-approval { font-size: .95rem; padding: 8px 20px; }
}
/* Mobile header block (<=640px): the approval line is too long for one
   phone line, so it splits into two balanced phrases inside the pill —
   the " | " separator hides and each phrase becomes its own line, so
   "NSDA REG:" is never stranded at a line end and the number never drops
   alone. Desktop keeps the single line. Card gets a touch more air;
   muted lines balance. */
@media (max-width: 640px) {
  .inst-head { padding: 24px 20px 22px; }
  .inst-head-rule { margin: 12px auto; }
  .inst-head-approval { line-height: 1.55; padding: 8px 18px; }
  .inst-head-part { display: block; }
  .inst-head-sep { display: none; }
  .inst-head-project, .inst-head-addr { line-height: 1.6; text-wrap: balance; }
}
.hero-slider { position: relative; }
.hero-viewport { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; min-width: 0; position: relative; overflow: hidden; border-radius: 18px; }
.hero-slide.active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease; }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.has-img::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10, 42, 94, .78), rgba(10, 77, 166, .66) 60%, rgba(10, 42, 94, .78)); }
.hero-slide.has-img > :not(.hero-slide-img) { position: relative; z-index: 1; }
.hero-slide.active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease; }
.hero-slide-icon { display: block; font-size: 2.6rem; line-height: 1.1; margin-top: .4em; }
.hero-slide-title { color: #fff; font-size: 1.7rem; margin: .5em 0 .2em; }
.slider-arrow { position: absolute; top: 42%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.slider-arrow:hover { background: rgba(255, 255, 255, .32); }
.slider-arrow.prev { left: 2px; }
.slider-arrow.next { right: 2px; }
.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .45); cursor: pointer; padding: 0; }
.slider-dot.active { background: #fff; transform: scale(1.25); }
/* Mobile hero slider (<=767px): below ~736px viewport the 42px edge
   arrows sit on top of the slide text (the text spans the full slide
   width), so inset the slide content past the arrows and shrink the
   arrows a little. 767px covers the whole overlap range — at 768px+ the
   centred text (max-width 620px) already clears the arrows. Padding
   applies to the slide content only; the cover image stays full-bleed. */
@media (max-width: 767px) {
  .hero-slide { padding-left: 46px; padding-right: 46px; }
  .slider-arrow { width: 34px; height: 34px; font-size: 1.3rem; }
  .slider-arrow.prev { left: 4px; }
  .slider-arrow.next { right: 4px; }
  .hero-slide-title, .hero h1 { text-wrap: balance; }
  .hero-slide .btn.big { padding: 10px 18px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* Trending news: featured story + side list, tabs + arrows (layout only). */
.trending { margin-top: 26px; }
.trending-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.trending-title { color: #e11d2e; font-size: 1.35rem; margin: 0; border-bottom: 3px solid #e11d2e; padding-bottom: 10px; margin-bottom: -11px; }
.trending-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.trending-tab { background: none; border: none; color: var(--text); font: inherit; font-size: .92rem; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.trending-tab:hover { background: var(--sky); }
.trending-tab.active { color: #e11d2e; font-weight: 700; }
.trending-arrows { display: flex; gap: 6px; }
.trending-arrow { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0 2px; }
.trending-arrow:hover { background: var(--sky); }
.trending-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 18px; }
.trend-featured { display: block; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, var(--navy), var(--blue-dark) 55%, var(--blue)); color: #fff; min-height: 300px; position: relative; box-shadow: var(--shadow); }
.trend-featured:hover { text-decoration: none; }
.trend-featured-cover { display: flex; align-items: center; justify-content: center; font-size: 4.5rem; min-height: 170px; background: rgba(255, 255, 255, .07); }
.trend-featured-body { padding: 18px 20px 20px; }
.trend-badge { display: inline-block; background: #e11d2e; color: #fff; border-radius: 6px; padding: 3px 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.trend-featured-body h3 { color: #fff; font-size: 1.45rem; line-height: 1.35; margin: .6em 0 .4em; }
.trend-meta { color: #cfe3ff; font-size: .88rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.trend-list { display: flex; flex-direction: column; gap: 14px; }
.trend-item { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.trend-item:hover { text-decoration: none; }
.trend-item:hover .trend-item-title { color: var(--blue); text-decoration: underline; }
.trend-thumb { flex: none; width: 118px; height: 84px; border-radius: 10px; background: linear-gradient(140deg, var(--navy), var(--blue)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; }
.trend-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trend-item-title { font-weight: 700; line-height: 1.4; }
.trend-empty { color: var(--muted); padding: 18px 0; }
.trend-featured-img { width: 100%; height: 210px; object-fit: cover; display: block; }
.trend-thumb-img { flex: none; width: 118px; height: 84px; object-fit: cover; border-radius: 10px; }
.news-detail-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); display: block; margin: 6px 0 14px; }
.news-thumb { flex: none; width: 96px; height: 72px; border-radius: 10px; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 760px) {
  .trending-grid { grid-template-columns: 1.15fr 1fr; }
  .trend-featured { min-height: 380px; }
  .trend-featured-cover { min-height: 210px; }
  .trend-featured-img { height: 250px; }
}

/* Cards / grids */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-body { display: flex; gap: 12px; padding: 16px; color: var(--text); align-items: flex-start; }
.card-body:hover { text-decoration: none; }
.card-icon { font-size: 1.8rem; flex: none; }
.card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-text strong { font-size: 1.05rem; line-height: 1.35; }
.fee { color: var(--blue-dark); font-weight: 700; }
.course-card { display: flex; flex-direction: column; }
.course-card .card-body { flex: 1; }
.course-thumb-wrap { position: relative; display: block; }
.course-thumb { display: block; width: 100%; height: 180px; object-fit: cover; }
.ai-badge { position: absolute; top: 8px; right: 8px; background: rgba(10, 42, 94, .85); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.course-hero-wrap { position: relative; display: block; margin: 12px 0 0; }
.course-hero { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 14px 18px; text-align: center; box-shadow: 0 8px 24px rgba(10, 42, 94, .08); transition: transform .18s ease, box-shadow .18s ease; }
.stat:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10, 42, 94, .14); }
.stat strong { display: block; font-size: 1.6rem; color: var(--blue); line-height: 1.2; }
.stat-ic { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 16px; background: var(--sky); color: var(--blue); }
.stat-ic svg { width: 28px; height: 28px; }
.stat-ic img { width: 44px; height: 44px; }
.stat-label { display: block; margin-top: 2px; font-size: .95rem; font-weight: 600; }
[data-theme="dark"] .stat-ic { color: #8db4f5; }
.badge { display: inline-block; background: var(--sky); color: var(--blue-dark); border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 700; }
.badge.video { background: #e11d2e; color: #fff; }
/* Photo gallery (homepage, below Notices) */
.gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.gallery-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text); box-shadow: var(--shadow); }
.gallery-item img { width: 100%; height: 150px; object-fit: cover; display: block; }
.gallery-item-title { display: block; padding: 10px 12px; font-weight: 700; line-height: 1.35; }
.gallery-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5, 15, 35, .88); display: none; align-items: center; justify-content: center; gap: 8px; padding: 16px; }
.gallery-lightbox.open { display: flex; }
.gallery-lb-fig { margin: 0; max-width: min(920px, 88vw); text-align: center; }
.gallery-lb-fig img { max-width: 100%; max-height: 72vh; border-radius: 10px; display: block; margin: 0 auto; }
.gallery-lb-fig figcaption { color: #fff; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.gallery-lb-fig figcaption strong { font-size: 1.1rem; }
.gallery-lb-fig figcaption span { font-size: .92rem; color: #cfe3ff; }
.gallery-lb-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.2rem; cursor: pointer; }
.gallery-lb-nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gallery-lb-nav:hover, .gallery-lb-close:hover { background: rgba(255, 255, 255, .32); }
@media (min-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-item img { height: 170px; }
}
@media (min-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Student reviews (homepage, below Photo Gallery) */
.review-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.review-card { display: flex; flex-direction: column; }
.review-photo { display: block; width: 100%; height: 180px; object-fit: cover; background: var(--sky); }
.review-photo.placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--muted); }
.review-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.review-body strong { font-size: 1.05rem; }
.review-course { color: var(--muted); font-size: .92rem; }
.review-stars { color: #f59e0b; letter-spacing: 2px; font-size: 1.05rem; }
.review-text { line-height: 1.6; margin: 0; }
.review-card .news-video { margin: 4px 0 0; }
.review-card .news-video-btn { margin: 4px 0 0; }
.stars-pick { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.stars-pick legend { font-weight: 700; font-size: .92rem; padding: 0 6px; }
.form .stars-pick label { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.form .stars-pick input[type="radio"] { width: auto; }
@media (min-width: 760px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .review-grid { grid-template-columns: repeat(3, 1fr); }
}
.news-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 10px 0 14px; border-radius: var(--radius); overflow: hidden; background: #000; }
.news-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.news-video-btn { margin: 4px 0 10px; }
.badge.demo { background: #fef3c7; color: var(--amber); }
.badge.govt { background: var(--green); color: #fff; }
.notice-list { list-style: none; padding: 0; }
.notice-list li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.syllabus li { margin-bottom: 4px; }

/* Forms / tables */
.form { display: flex; flex-direction: column; gap: 12px; }
.form.narrow { max-width: 560px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92rem; }
.form input, .form select, .form textarea { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.flash { border-radius: 10px; padding: 12px 14px; margin: 14px 0; font-weight: 600; }
.flash.ok { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.flash.err { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
[data-theme="dark"] .flash.ok { background: #14532d; color: #dcfce7; }
[data-theme="dark"] .flash.err { background: #7f1d1d; color: #fee2e2; }
.result-table, .admin-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; margin: 12px 0; }
.result-table th, .result-table td, .admin-table th, .admin-table td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; font-size: .92rem; vertical-align: top; }
.result-table th { width: 38%; background: var(--sky); }
.admin-table { display: block; overflow-x: auto; }
.admin-table th { background: var(--sky); white-space: nowrap; }
.admin-table td a { margin-right: 8px; white-space: nowrap; }

/* ID / registration card */
.id-card, .reg-card { background: var(--card); border: 2px solid var(--blue); border-radius: var(--radius); padding: 20px; max-width: 520px; margin: 16px auto; text-align: center; }
/* Premium double frame on the registration card only: navy outer border +
   thin gold inner line (outline, so it adds no size to the card). */
.reg-card { border: 2px solid #1a3a8f; outline: 1px solid #c9a227; outline-offset: -8px; }
.id-head { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; }
.id-head img { height: 44px; width: auto; background: #fff; border-radius: 8px; padding: 3px 6px; }
.id-photo { font-size: 3.4rem; }
.verified { color: var(--green); font-weight: 700; }
.reg-card { text-align: left; }
.reg-card h2 { text-align: center; }
.reg-head { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid var(--blue); padding-bottom: 12px; margin-bottom: 12px; }
.reg-head img { height: 72px; width: auto; flex: none; }
.reg-head-text { flex: 1; min-width: 0; text-align: center; font-family: Georgia, 'Times New Roman', Times, serif; }
.reg-head strong { display: block; font-family: 'Playfair Display', Georgia, 'Times New Roman', Times, serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: #1a3a8f; text-transform: uppercase; letter-spacing: .02em; }
.reg-head small { display: block; font-family: Arial, Helvetica, sans-serif; font-size: .85rem; color: var(--text); line-height: 1.5; }
/* Header balance: a hidden duplicate of the logo on the other side of
   the name, so the institute name + approval lines centre on the full
   page width (same trick as the certificate's .cert .reg-head-spacer).
   Hidden below 481px, where .reg-head stacks vertically and the text
   is already centred. */
.reg-head-spacer { display: none; }
@media (min-width: 481px) {
  .reg-head-spacer { display: block; visibility: hidden; }
}
/* Registration-card logo: raised to centre on the institute name (it was
   centred on the whole header, so it sat below the two-line name — same
   trick as the certificate's logo: align-self: flex-start, then a small
   translateY residual. The residual depends ONLY on how many lines the
   name wraps to (the flex-start already normalises the header height
   away), so it is stepped by viewport width (measured by pixel-ink scan;
   residuals ≤0.5px). The hidden spacer is never transformed, so the name
   stays centred. Below 481px the header stacks vertically and no rule
   applies. */
@media (min-width: 481px) and (max-width: 533px) {
  .reg-card .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(19px); }
}
@media (min-width: 534px) and (max-width: 639px) {
  .reg-card .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(5px); }
}
@media (min-width: 640px) {
  .reg-card .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(-4px); }
}
/* Transparent logo on dark surfaces: keep a white chip in dark mode only
   (light mode shows the logo directly, no white box). */
[data-theme="dark"] .reg-head strong { color: #8db4f5; }
[data-theme="dark"] .reg-head img { background: #fff; border-radius: 8px; padding: 4px 8px; }
[data-theme="dark"] .brand-logo { background: #fff; border-radius: 8px; padding: 3px 6px; }
@media (max-width: 480px) {
  .reg-head { flex-direction: column; align-items: center; gap: 8px; }
  .reg-head img { height: 64px; }
  .reg-head strong { font-size: 1.15rem; }
}
.reg-title { color: #e11d2e; font-size: 1.2rem; margin: .4em 0 .1em; }
.reg-course { text-align: center; font-weight: 700; font-size: 1.05rem; margin: .1em 0; }
.reg-student-id { text-align: center; font-size: 1.05rem; margin: .1em 0 .8em; }
.reg-body { display: grid; gap: 16px; grid-template-columns: 1fr; }
.reg-table { width: 100%; border-collapse: collapse; }
.reg-table th, .reg-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; font-size: 1rem; vertical-align: top; }
.reg-table th { width: 48%; background: var(--sky); font-weight: 600; }
.reg-side { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.reg-photo { width: 132px; height: 158px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.reg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reg-photo.placeholder { font-size: 4rem; color: var(--muted); background: var(--sky); }
/* Signature band: centred signature only. The QR sits under the photo
   in .reg-side now, so the balancing spacer is gone. */
.reg-sign-band { display: flex; align-items: center; justify-content: center; margin-top: 26px; }
.reg-sign { flex: 1; text-align: center; }
.reg-qr { flex: none; text-align: center; }
.reg-qr img { width: 132px; height: 132px; display: block; }
.reg-qr span { font-size: .75rem; color: #5b6b82; display: block; }
.reg-qr-fallback { flex: none; width: 132px; text-align: center; font-size: .8rem; word-break: break-all; border: 1px dashed var(--line); border-radius: 6px; padding: 8px; }
.reg-sign-img { width: 160px; height: auto; display: block; margin: 0 auto 2px; }
[data-theme="dark"] .reg-sign-img { background: #fff; border-radius: 6px; padding: 4px 10px; }
.reg-sign-line { display: block; width: 220px; margin: 0 auto 4px; border-bottom: 1px solid var(--text); height: 28px; }
.reg-sign p { margin: 0; font-size: .9rem; }
.reg-note { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.reg-issue { font-size: .85rem; margin-top: 8px; }
.id-photo img { width: 120px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* Student ID verification */
.verify-head { background: var(--navy); color: #fff; border-radius: var(--radius); text-align: center; padding: 26px 16px 20px; margin: 14px auto 6px; max-width: 680px; }
.verify-head img { background: #fff; border-radius: 12px; padding: 8px 12px; height: 64px; width: auto; }
.verify-head h1 { color: #fff; margin: .45em 0 .1em; font-size: 1.5rem; }
.verify-head p { margin: 0; color: #dbe9ff; font-weight: 600; }
.verify-form { display: flex; gap: 10px; max-width: 680px; margin: 16px auto 4px; }
.verify-form input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; }
.verify-form input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.verify-form .btn { flex: none; }
.verify-note { max-width: 680px; margin: 4px auto 0; font-size: .88rem; }
.verify-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 680px; margin: 18px auto; overflow: hidden; }
.verify-banner { background: #dcfce7; color: #14532d; font-weight: 700; text-align: center; padding: 10px 14px; letter-spacing: .02em; }
[data-theme="dark"] .verify-banner { background: #14532d; color: #dcfce7; }
/* ID-verify success animation: green check draws itself in the top banner.
   CSS-only, ~0.8s total; the markup exists only in the success branch, so
   it never plays on the search form or the not-found state. Base styles ARE
   the final state, so print + reduced-motion show it statically. */
.verify-banner-anim { animation: verify-banner-in .4s ease-out; }
.verify-check { width: 22px; height: 22px; vertical-align: -5px; margin-right: 8px; }
.verify-check-circle { fill: #16a34a; fill-opacity: 1; stroke: #15803d; stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 0; animation: verify-circle-draw .45s ease-out; }
.verify-check-mark { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 0; animation: verify-mark-draw .3s ease-out .4s both; }
@keyframes verify-banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes verify-circle-draw { from { stroke-dashoffset: 151; fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes verify-mark-draw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .verify-banner-anim, .verify-check-circle, .verify-check-mark { animation: none; }
}
@media print {
  .verify-banner-anim, .verify-check-circle, .verify-check-mark { animation: none !important; }
}
.verify-who { display: flex; gap: 16px; align-items: center; padding: 18px 20px 8px; }
.verify-photo { width: 96px; height: 116px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; }
.verify-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.verify-photo.placeholder { font-size: 3.2rem; color: var(--muted); background: var(--sky); }
.verify-name { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin: 0; text-transform: uppercase; letter-spacing: .01em; }
[data-theme="dark"] .verify-name { color: #cfe3ff; }
.verify-course { color: var(--muted); margin: 2px 0 0; }
.verify-rows { width: 100%; border-collapse: collapse; margin-top: 8px; }
.verify-rows th, .verify-rows td { padding: 9px 20px; text-align: left; font-size: .95rem; border-top: 1px solid var(--line); vertical-align: top; }
.verify-rows th { width: 40%; font-weight: 600; }
@media (max-width: 480px) {
  .verify-form { flex-direction: column; }
  .verify-form .btn { width: 100%; }
}
@media (min-width: 640px) {
  .reg-card { max-width: 680px; }
  .reg-body { grid-template-columns: 1fr 150px; }
  .reg-head strong { font-size: 1.55rem; }
}
.about-logo { background: #fff; border-radius: 14px; padding: 10px 14px; max-width: 420px; width: 100%; height: auto; }

/* Footer */
.footer { background: var(--navy); color: #dbe9ff; margin-top: 40px; padding: 26px 0 90px; }
.footer a { color: #fff; }
.footer-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.footer h4 { color: #fff; margin: 0 0 8px; }
.foot-logo { background: #fff; border-radius: 10px; padding: 6px 10px; max-width: 260px; height: auto; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 20px; padding-top: 14px; font-size: .88rem; }

/* Footer inner blocks (shared; the mobile query below refines them).
   Desktop keeps the old look: logo alone on its own line, vertical
   quick links, plain contact rows. */
.foot-brand-row { display: block; }
.foot-name { display: none; }
.foot-links { list-style: none; margin: 1em 0; padding: 0; }
.foot-links li { margin: 0; }
.foot-row { display: flex; gap: 8px; align-items: flex-start; }
.foot-row svg { flex: none; margin-top: 4px; }

/* Mobile footer (≤639px, the site's 1-column footer breakpoint):
   compact brand row, neat pills, 2-col quick links, icon rows,
   extra bottom clearance above the fixed bottom nav. */
@media (max-width: 639px) {
  .footer { padding: 20px 0 110px; }
  .footer-grid { gap: 18px; }
  .footer-grid > div { min-width: 0; }
  .footer-grid > div + div { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; }
  .foot-brand-row { display: block; overflow: hidden; }
  .foot-logo { float: left; max-width: 108px; padding: 4px 8px; border-radius: 8px; margin-right: 12px; }
  .foot-name { display: block; overflow: hidden; padding-top: 20px; color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.3; }
  .foot-tag { margin: 8px 0 0; font-size: .88rem; color: #c6d8f5; }
  .badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
  .badges .badge { white-space: nowrap; padding: 3px 10px; font-size: .76rem; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
  .foot-links a { display: flex; align-items: center; gap: 6px; font-size: .92rem; }
  .foot-links a::before { content: "›"; color: #8db4f5; font-weight: 700; flex: none; }
  .foot-row { margin: 0 0 10px; font-size: .92rem; }
  .footer-bottom { justify-content: center; text-align: center; font-size: .82rem; margin-top: 16px; padding-top: 12px; }
}

/* Mobile bottom nav + call fab */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(10, 42, 94, .12); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px 0 6px; color: var(--muted); text-decoration: none; line-height: 1; }
.bottomnav a:hover { text-decoration: none; }
.bottomnav a .bnav-ic { display: flex; }
.bottomnav a .bnav-ic svg { width: 22px; height: 22px; }
.bottomnav a .bnav-label { display: block; font-size: .58rem; line-height: 1.25; white-space: nowrap; }
.bottomnav a.on { background: var(--sky); color: var(--blue); border-radius: 12px; margin: 4px 1px; padding: 3px 0 2px; }
[data-theme="dark"] .bottomnav a.on { color: #8db4f5; }
[data-theme="dark"] .bottomnav { box-shadow: 0 -4px 16px rgba(0, 0, 0, .4); }
.call-fab { position: fixed; right: 14px; bottom: 74px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: var(--shadow); }

/* Admin */
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.admin-nav a { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; color: var(--text); font-size: .88rem; }
.admin-nav a.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.admin-nav a:hover { text-decoration: none; }
.role-badge { display: inline-block; background: var(--sky); color: var(--blue); border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.role-badge.role-sub { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .role-badge.role-sub { background: #451a03; color: #fbbf24; }
/* Per-sub-admin permission checkboxes (Admin Users form). */
.perm-group { margin: 14px 0; }
.perm-title { font-weight: 700; margin: 0 0 8px; }
.perm-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.form .perm-checks label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; padding: 6px 0; }
.form .perm-checks input[type="checkbox"] { width: auto; margin: 0; }
@media (max-width: 480px) { .perm-checks { grid-template-columns: 1fr; } }
/* Bulk ID cards: one front + one back per student, kept together. */
.id-bulk-pair { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 0 0 24px; }
.draft-warning { background: #fef3c7; color: #7c2d12; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
[data-theme="dark"] .draft-warning { background: #451a03; color: #fde68a; }

/* Admin dashboard (presentation only; scoped under .dash) */
.dash-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 8px 0 2px; }
.dash-head h2 { margin: 0; }
.dash-head p { margin: 0; }
.dash .stat-grid { margin: 16px 0; }
.dash a.stat { display: block; color: var(--text); text-decoration: none; }
.dash a.stat:hover { text-decoration: none; }
.dash-alert { display: flex; gap: 12px; align-items: flex-start; background: #fef3c7; color: #7c2d12; border: 1px solid #fcd34d; border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.dash-alert svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.dash-alert p { margin: 0; }
.dash-alert.info { background: var(--sky); color: var(--text); border-color: var(--line); }
.dash-alert.info svg { color: var(--blue); }
[data-theme="dark"] .dash-alert { background: #451a03; color: #fde68a; border-color: #92400e; }
[data-theme="dark"] .dash-alert.info { background: #16294a; color: var(--text); border-color: #26395c; }
[data-theme="dark"] .dash-alert.info svg { color: #8db4f5; }
.dash-note { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; margin: 12px 0; }
.dash-note p { margin: 0; }
.dash-note svg { width: 16px; height: 16px; vertical-align: -3px; }
@media (min-width: 640px) {
  .dash .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .hero h1 { font-size: 2.1rem; }
}
@media (min-width: 900px) {
  .topnav { display: flex; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .bottomnav, .call-fab { display: none; }
  .footer { padding-bottom: 26px; }
  h1 { font-size: 1.9rem; }
}
/* ---- Certificate of Completion (admin, A4 landscape print) ----
   Paper-certificate layout: ornate SVG scroll border, blue ribbon
   banner, dotted fill-in body with black script values, cream paper.
   Inner padding keeps the text clear of the border's gold inner frame
   (the frame sits ~10mm inside the edge, so padding must exceed it). */
.cert { background: #fbf7ee; color: #1a1a1a; max-width: 960px; margin: 16px auto; padding: 50px 46px 48px; text-align: center; print-color-adjust: exact; -webkit-print-color-adjust: exact; position: relative; overflow: hidden; }
/* Ornate scroll border — inline SVG in the markup (a real element, so
   it prints; CSS background-images do not print with "Background
   graphics" off). */
.cert > svg.cert-border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Faint centred logo watermark behind the text. A real <img> (in the
   markup), so it prints even with "Background graphics" off. Absolute,
   so it adds no height to the card. */
.cert-watermark { position: absolute; top: 50%; left: 50%; width: 60%; max-width: 560px; height: auto; transform: translate(-50%, -50%); opacity: .07; pointer-events: none; z-index: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.cert > :not(.cert-watermark):not(.cert-border) { position: relative; z-index: 1; }
/* Document colours are forced light, so the certificate looks the same
   in the site's dark mode (the shared .reg-head rules use theme vars). */
.cert .reg-head { border-bottom: none; margin-bottom: 4px; padding-bottom: 0; }
.cert .reg-head strong { color: #1a3a8f; }
.cert .reg-head small { color: #333; }
/* Certificate header balance: a hidden duplicate of the logo on the
   other side of the name, so the institute name + approval lines centre
   on the full certificate width. Hidden below 480px, where .reg-head
   stacks vertically and the text is already centred. */
.cert .reg-head-spacer { display: none; }
@media (min-width: 481px) {
  .cert .reg-head-spacer { display: block; visibility: hidden; }
  /* Certificate logo: a little bigger (+14%: 72px -> 82px) and raised to
     centre on the institute name (was top-aligned). The translateY is
     visual-only, so the hidden spacer still centres the name. */
  .cert .reg-head img { height: 82px; }
  .cert .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(-23px); }
}
[data-theme="dark"] .cert .reg-head strong { color: #1a3a8f; }
/* Top line — government registration, above the institute header. Serif,
   modest size (smaller than the institute name), dark navy, no underline. */
.cert-top-line { font-family: Georgia, 'Times New Roman', Times, serif; font-size: .95rem; font-weight: 700; color: #1a3a8f; text-align: center; margin: 0; letter-spacing: .02em; }
/* SL / Registration (left), ribbon (centre), Roll / Issue (right). */
.cert-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 10px 0 4px; }
.cert-meta-side p { font-family: 'Playfair Display', Georgia, 'Times New Roman', Times, serif; font-style: italic; font-size: 1.05rem; margin: .2em 0; text-align: left; }
.cert-meta-right p { text-align: right; }
.cert-meta-side b { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 700; }
/* CERTIFICATE badge — plain blue rounded-corner badge (no folded tails,
   no gold lines, no sheen, no shadow); white Playfair caps, same
   letter-spacing as the old SVG ribbon. */
.cert-ribbon { width: 290px; max-width: 100%; margin: 0 auto; background: #0b5ed7; border-radius: 12px; text-align: center; padding: 12px 0; }
.cert-ribbon span { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-size: 29px; letter-spacing: 5px; color: #fff; font-weight: 700; line-height: 1.15; white-space: nowrap; }
/* Body — italic serif with dotted fill-in lines; values in black script. */
.cert-para { font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; font-size: 1.12rem; line-height: 1.9; text-align: left; margin: 12px 2px 0; }
.cert-line { display: flex; align-items: baseline; gap: 10px; margin: .35em 0; }
.cert-txt { flex: none; }
.cert-fill { flex: 1 1 auto; min-width: 70px; border-bottom: 1px dotted #555; padding: 0 8px; text-align: center; }
.cert-fill b { font-family: 'Pinyon Script', 'Playfair Display', Georgia, 'Times New Roman', serif; font-style: normal; font-weight: 400; color: #000; font-size: 1.9rem; }
.cert-wish { margin: .5em 0 0; }
.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 26px; text-align: left; }
.cert-pub { font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; font-size: .98rem; padding-bottom: 6px; }
.cert-pub b { font-weight: 700; }
.cert-qr { text-align: center; }
.cert-qr img { width: 84px; height: 84px; display: block; margin: 0 auto 2px; }
.cert-qr span { font-size: .75rem; color: #444; display: block; }
.cert-sign { text-align: center; }
.cert-sign p { margin: 0; font-size: .9rem; color: #1a1a1a; }
.cert-sign .reg-sign-img { width: 150px; }
.cert-sign .reg-sign-line { width: 210px; border-bottom-color: #1a1a1a; }
/* PDF-download capture: the clone is laid out at the PRINT geometry
   (A4 landscape, 273mm wide) so the canvas is ~1.46:1 and fills the
   PDF page — the on-screen .cert is ~960px wide and ~1.06:1, which
   contain-fits into a landscape page with big white side bars (the
   user's Certificate-8526.pdf: border only 72% of the page width).
   Every rule below mirrors the @media print block for .cert, so the
   capture matches the printed page exactly. Applied by JS only to the
   capture clone (.cert-pdf); the live page is never touched. */
.cert.cert-pdf { box-sizing: border-box; width: 273mm; max-width: none; margin: 0; padding: 11.5mm 14mm 15mm; }
.cert-pdf .reg-head img { height: 87px; }
.cert-pdf .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(-18px); }
.cert-pdf .reg-head-spacer { display: block; visibility: hidden; }
.cert-pdf .reg-head strong { font-size: 1.78rem; line-height: 1.15; }
.cert-pdf .cert-meta { margin: 6px 0 4px; }
.cert-pdf .cert-meta-side p { font-size: .95rem; }
.cert-pdf .cert-ribbon { width: 250px; }
.cert-pdf .cert-ribbon span { font-size: 25px; letter-spacing: 4px; }
.cert-pdf .cert-para { font-size: 1rem; line-height: 1.75; margin-top: 6px; }
.cert-pdf .cert-fill b { font-size: 1.5rem; line-height: 1.15; }
.cert-pdf .cert-line { margin: .3em 0; }
.cert-pdf .cert-foot { margin-top: 8px; }
.cert-pdf .cert-qr img { width: 64px; height: 64px; }
.cert-pdf .cert-sign .reg-sign-img { width: 110px; }
.cert-pdf .cert-sign .reg-sign-line { height: 16px; }
.cert-pdf .cert-director .reg-sign-line { height: 16px; }
.cert-pdf .cert-pub { font-size: .85rem; }

/* ---- Certificate scale-to-fit on small screens (phone) ----
   Below 900px the certificate's flex body rows cramp: the fills shrink
   to their 70px minimum, the script names wrap inside them (rows grow
   2-5x tall) and the right side clips (measured: 360px viewport, the
   cert is 328x1721px instead of its natural 960x898px). Instead the
   certificate is laid out at its full 960px geometry and scaled down
   to the viewport width, so the phone view looks exactly like the
   print: every body line on one line, dotted fills intact, header /
   badge / meta / signatures / QR all proportional. Screen-only: the
   @media print rules below undo it, and the .cert-pdf capture clone
   (appended to <body>, outside .cert-scale) never matches these
   selectors. A transform does not change layout height, so the scaler
   (inline script in certificate.php) sets the wrapper height to the
   scaled height. Without JS the .is-scaled class is never added and
   the certificate renders exactly as before (fluid, unscaled). */
@media (max-width: 899px) {
  .cert-scale.is-scaled { margin: 16px 0; }
  .cert-scale.is-scaled .cert { width: 960px; max-width: none; margin: 0; transform: scale(var(--cert-scale)); transform-origin: top left; }
  /* The header rules are viewport-based: below 481px .reg-head stacks
     vertically (column, 64px logo, 1.15rem name) and the spacer hides, so
     a scaled certificate would show the stacked header (taller, unlike
     the print). Force the desktop row header inside the scaled
     certificate at every width: row layout, 82px logo centred on the
     name (-23px, the screen residual), visible spacer, 1.55rem name
     (the >=640px screen size). */
  .cert-scale.is-scaled .cert .reg-head { flex-direction: row; gap: 14px; }
  .cert-scale.is-scaled .cert .reg-head-spacer { display: block; visibility: hidden; }
  .cert-scale.is-scaled .cert .reg-head img { height: 82px; }
  .cert-scale.is-scaled .cert .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(-23px); }
  .cert-scale.is-scaled .cert .reg-head strong { font-size: 1.55rem; }
}

/* ---- Student ID card (admin, portrait CR80 53.98 x 85.6 mm) ----
   Premium design: navy geometric header, gold hexagon logo, round photo
   with cyan ring over a wave, rows + signature front; back has NO
   institute-name header (user's word), detail rows, QR,
   Human Rights Review Society affiliation block, Issue Date wave band.
   (The back's MAIN OFFICE block was removed 2026-11-10; the address
   moved to the front header.) */
.id-print { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin: 16px 0; }
.id-sheet { display: flex; gap: 16px; }
.id-sheet .idcard:nth-child(n+2) { display: none; } /* screen: one front + one back only */
.idcard { width: 53.98mm; height: 85.6mm; background: #fff; color: #000; border: 1px solid #1a3a8f; border-radius: 3mm; overflow: hidden; flex: none; display: flex; flex-direction: column; print-color-adjust: exact; -webkit-print-color-adjust: exact; font-size: 7.5pt; line-height: 1.35; position: relative; }
/* Thin gold frame line inside the card edge (navy + gold, like the
   registration card). A ::before so it survives the print cut-guide
   outline, which uses the outline property itself. */
.idcard::before { content: ""; position: absolute; inset: 1.2mm; border: 1px solid #c9a227; border-radius: 2mm; pointer-events: none; z-index: 2; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
/* --- Front: navy geometric header, STACKED + centred (2026-11-11) ---
   Logo on top centre, then name / approval / project / address / card
   title, all centred across the full header width (from the user's photo
   of the physical card). The header is block layout now: no side-by-side
   hexagon + spacer any more. */
.id-front-head { position: relative; background: linear-gradient(135deg, #0a2a5e 0%, #0d3a75 55%, #0a4da6 100%); color: #fff; display: block; text-align: center; padding: 1.5mm 2.5mm 4mm; }
.id-head-geo { position: absolute; inset: 0; width: 100%; height: 100%; }
.id-front-head > :not(.id-head-geo) { position: relative; z-index: 1; }
/* Gold hexagon logo. Centred on top of the stacked header (id-head-logo);
   small on purpose — a 13mm logo would eat the fixed CR80 height budget. */
.id-hex { position: relative; width: 7mm; height: 7.9mm; flex: none; }
.id-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.id-hex img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5.1mm; height: auto; display: block; }
.id-head-logo { margin: 0 auto .7mm; }
.id-hex-sm { width: 11mm; height: 12.4mm; }
.id-hex-sm img { width: 8mm; }
.id-head-text { text-align: center; }
.id-head-text strong { display: block; font-size: 6.4pt; line-height: 1.3; letter-spacing: .04em; }
.id-head-text span { display: block; font-size: 5.5pt; color: #ffd75e; letter-spacing: .26em; font-weight: 700; margin-top: .4mm; }
/* Front header detail lines (settings address_en / project line, between
   the institute name and the card title). */
.id-head-text em { display: block; font-style: normal; font-size: 4.8pt; color: #d6e6ff; letter-spacing: .03em; line-height: 1.3; margin-top: .5mm; }
/* Front header approval line — gold, same size as the address line. */
/* Front header approval line — gold; 4.6pt with no tracking so the full line fits on ONE row (photo shows it on one line). */
.id-head-text em.id-head-approval { color: #c9a227; font-size: 4.6pt; letter-spacing: 0; }
/* Front header project line — soft white, like the address line. */
.id-head-text em.id-head-project { color: #d6e6ff; }
/* --- Front: cyan/blue wave + round photo with cyan ring --- */
.id-wave { display: block; width: 100%; height: 5mm; flex: none; }
/* Photo pulled up over the wave band; -6mm over the 5mm wave keeps its
   top 1mm inside the header (same as -8mm over the 7mm wave), so a clear
   gap stays between the header text and the photo ring. Header
   padding-bottom is 4mm so the STUDENT ID CARD title clears the halo
   (2026-11-11: the taller stacked header let the halo cover the title). */
.id-photo-round { width: 17mm; height: 17mm; border-radius: 50%; border: 1.2mm solid #00b4d8; box-shadow: 0 0 0 1mm #fff; overflow: hidden; margin: -6mm auto 0; position: relative; z-index: 2; background: #e8f1fe; display: flex; align-items: center; justify-content: center; font-size: 13pt; color: #5b6b82; flex: none; }
.id-photo-round img { width: 100%; height: 100%; object-fit: cover; display: block; }
.id-front-name { text-align: center; font-size: 10pt; font-weight: 900; color: #0a2a5e; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; margin: .3mm 2mm 0; }
.id-front-course { text-align: center; font-size: 7pt; color: #0090b8; font-weight: 700; margin: 0 2mm 0; line-height: 1.25; }
.id-front-rows { margin: .3mm 3.5mm 0; }
.id-front-rows p { margin: 0 0 .1mm; font-size: 7pt; line-height: 1.15; }
.id-front-rows p span { display: inline-block; min-width: 21mm; color: #5b6b82; font-weight: 600; letter-spacing: .06em; font-size: 6.3pt; }
/* Front signature (moved here from the back, per the reference). */
.id-front-sign { text-align: center; margin: auto 3mm 0; padding-top: .5mm; }
.id-front-sign span { display: block; border-top: .4mm solid #333; width: 34mm; margin: .3mm auto 0; padding-top: .6mm; font-size: 6.5pt; }
.id-front-foot { height: 2.5mm; flex: none; background: linear-gradient(135deg, #0a2a5e 0%, #0d3a75 60%, #0a4da6 100%); margin-top: 1mm; position: relative; }
.id-front-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .7mm; background: #00b4d8; }
/* --- Back: HRS block on top, then detail rows, QR + SCAN FOR INFO,
   Issue Date wave band at the bottom.
   justify-content: space-between spreads the spare height evenly across
   the three gaps (HRS→rows, rows→QR, QR→wave), so no single large empty
   gap sits anywhere and the wave stays pinned to the card bottom
   (2026-11-11). The rows / QR box / wave carry NO top margin — the
   rhythm comes from space-between alone. */
.id-back { padding: 2mm 3mm 0; justify-content: space-between; }
/* Faint centred logo watermark on the back, behind the text (real <img>,
   so it prints even with "Background graphics" off). */
.id-back-top { text-align: center; }
.id-back-top .id-hex { margin: 0 auto; }
.id-back-top strong { display: block; font-size: 6.6pt; line-height: 1.3; color: #0a2a5e; letter-spacing: .03em; margin-top: 1mm; }
.id-sign-img { height: 5.5mm; width: auto; display: block; margin: 0 auto; }
/* Back detail rows: three-part flex (label | colon | value). The colon is
   its own fixed item, so every colon sits at one x and a wrapped value's
   second line aligns under the value's first line, top-aligned with its
   label (2026-11-11). Top margin is 0 — the back's space-between rhythm
   sets the gap above the rows. */
.id-back-rows { margin: 0 1mm; }
.id-back-rows p { display: flex; align-items: flex-start; margin: 0 0 .6mm; font-size: 6.8pt; line-height: 1.3; }
.id-back-rows p span.id-row-label { flex: none; width: 20mm; font-weight: 600; color: #0a2a5e; }
.id-back-rows p span.id-row-colon { flex: none; width: 2mm; }
.id-back-rows p span.id-row-value { flex: 1; min-width: 0; }
/* MAIN OFFICE block (settings address + helpline). */
.id-office { text-align: center; margin: 1.2mm 0 0; }
.id-office-title { font-size: 7pt; font-weight: 800; color: #0a2a5e; letter-spacing: .04em; margin: 0 0 .5mm; }
.id-office p { margin: 0 0 .4mm; font-size: 7pt; line-height: 1.3; }
/* QR + SCAN FOR INFO: one centred unit, above the wave band. Top margin
   is 0 — the back's space-between rhythm sets the gap above it. */
.id-back-qrbox { text-align: center; margin: 0; }
.id-back-qrbox .id-back-qr { display: inline-block; }
.id-back-qrbox p { margin: .6mm 0 0; font-size: 6pt; font-weight: 700; letter-spacing: .08em; color: #0a2a5e; }
.id-back-wave { position: relative; flex: none; height: 8mm; margin: 0 -3mm 0; background: linear-gradient(90deg, #00b4d8 0%, #0a4da6 55%, #0a2a5e 100%); display: flex; align-items: center; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.id-back-wave-deco { position: absolute; top: 0; left: 0; width: 100%; height: 6mm; }
.id-back-issue { position: relative; z-index: 1; color: #fff; font-size: 7pt; font-weight: 600; margin: 0; padding: 0 3mm; }
.id-back-qr { background: #fff; border-radius: 1mm; padding: .6mm; }
.id-back-qr img { width: 11mm; height: 11mm; display: block; }
/* Human Rights Review Society affiliation block (back top, above the rows).
   Already centred (text-align: center); the helpline line is emphasised
   as the contact line (2026-11-10). The small gold rule under the title
   was removed at the user's word (2026-11-11); the title keeps a 1mm
   bottom margin so it still breathes above its detail lines. */
.id-hrs { text-align: center; margin: 1.5mm 1mm 0; }
.id-hrs-logo { width: 8mm; height: auto; display: block; margin: 0 auto .8mm; }
.id-hrs p { margin: 0 0 .2mm; font-size: 5.4pt; line-height: 1.25; color: #222; letter-spacing: .01em; }
.id-hrs p.id-hrs-title { font-size: 6pt; font-weight: 800; color: #0a2a5e; letter-spacing: .06em; margin: 0 0 1mm; }
.id-hrs p:last-child { font-weight: 700; color: #0a2a5e; }

/* ---- Academic Transcript (/result, A4 portrait print) ---- */
.transcript-actions { text-align: right; margin: 12px 0; }
.transcript { background: #fff; color: #000; border: 2px solid #1a3a8f; outline: 1px solid #c9a227; outline-offset: -8px; border-radius: 6px; max-width: 860px; margin: 16px auto; padding: 24px 30px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.transcript .reg-head { border-bottom-color: #1a3a8f; }
.transcript .reg-head small { color: #14213d; }
[data-theme="dark"] .transcript .reg-head strong { color: #1a3a8f; }
.transcript-title { background: #0a4da6; color: #fff; text-align: center; font-size: 1.2rem; letter-spacing: .03em; border-radius: 8px; padding: 7px 12px; margin: .6em 0 .2em; }
.transcript-exam { text-align: center; color: #5b6b82; font-size: .9rem; margin: .1em 0 .6em; }
.transcript-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .95rem; margin: .2em 0 .9em; }
.transcript-label { display: inline-block; background: #0a4da6; color: #fff; font-weight: 700; font-size: .92rem; border-radius: 6px; padding: 3px 14px; margin: 10px 0 0; }
.transcript-info { display: flex; gap: 16px; align-items: flex-start; border: 1px solid #9db8e8; border-radius: 0 10px 10px 10px; padding: 14px; }
.transcript-photo { width: 110px; height: 132px; border: 1px solid #dbe4f0; border-radius: 6px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #5b6b82; background: #e8f1fe; }
.transcript-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.transcript-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
.ts-field { display: flex; gap: 8px; font-size: .92rem; padding: 3px 0; border-bottom: 1px dotted #dbe4f0; }
.ts-field span { flex: none; width: 42%; color: #5b6b82; }
.ts-field strong { font-weight: 600; color: #000; }
.transcript-table { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.transcript-table th, .transcript-table td { border: 1px solid #9db8e8; padding: 5px 10px; font-size: .92rem; text-align: left; }
.transcript-table th { background: #0a4da6; color: #fff; }
.transcript-table td { background: #fff; color: #000; }
.transcript-table.subjects th:nth-child(n+2), .transcript-table.subjects td:nth-child(n+2) { text-align: center; }
.transcript-table.grade-scale th, .transcript-table.grade-scale td { text-align: center; }
.transcript-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.ts-box { border: 1px solid #9db8e8; border-radius: 10px; padding: 8px 10px; text-align: center; }
.ts-box span { display: block; font-size: .82rem; color: #5b6b82; }
.ts-box strong { font-size: 1.15rem; color: #000; }
.ts-pass { color: #0a7d4d; }
.ts-fail { color: #b91c1c; }
.transcript-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 18px; }
.transcript-qr { text-align: center; }
.transcript-qr img { width: 84px; height: 84px; display: block; margin: 0 auto 2px; }
.transcript-qr span { font-size: .75rem; color: #5b6b82; display: block; }
.transcript-sign { text-align: center; }
.transcript-sign .reg-sign-img { width: 150px; }
.transcript-sign .reg-sign-line { width: 210px; }
@media (max-width: 640px) {
  .transcript-fields { grid-template-columns: 1fr; }
  .transcript-summary { grid-template-columns: repeat(2, 1fr); }
  .transcript { padding: 18px 16px; }
}

@page { size: A5 landscape; margin: 0; }
/* ---- Page hero (compact gradient strip for inner pages) ---- */
.page-hero { background: linear-gradient(160deg, var(--navy), var(--blue-dark) 60%, var(--blue)); color: #fff; border-radius: 18px; padding: 26px 20px 24px; text-align: center; margin: 14px 0 18px; }
.page-hero h1 { color: #fff; margin: 0 0 .25em; font-size: 1.6rem; }
.page-hero p { margin: 0; color: #dbe9ff; font-size: .98rem; }

/* ---- Contact page: info cards (same visual language as .stat) + map + form ---- */
.contact-cards { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 16px; }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 16px 18px; text-align: center; box-shadow: 0 8px 24px rgba(10, 42, 94, .08); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10, 42, 94, .14); }
.contact-card .stat-ic { margin-bottom: 4px; }
.contact-label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.contact-value { font-size: 1.08rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.contact-value a { color: var(--text); }
.contact-value a:hover { color: var(--blue); }
.contact-link { font-size: .92rem; font-weight: 700; }
.contact-card .btn { margin-top: 4px; }
.contact-layout { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
.contact-map { overflow: hidden; }
.contact-map iframe { width: 100%; height: 300px; border: 0; display: block; }
.contact-map-foot { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); font-weight: 700; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; }
.form-card h2 { margin: 0 0 4px; }
.btn-block { display: block; width: 100%; text-align: center; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .contact-map { display: flex; flex-direction: column; }
  .contact-map iframe { flex: 1 1 auto; min-height: 380px; }
}

/* ---- Admin login: premium centred card on a gradient frame ---- */
.login-wrap { max-width: 460px; margin: 22px auto 10px; background: linear-gradient(160deg, var(--navy), var(--blue-dark) 60%, var(--blue)); border-radius: 22px; padding: 14px; box-shadow: 0 18px 44px rgba(10, 42, 94, .18); }
.login-card { background: var(--card); border-radius: 16px; overflow: hidden; }
.login-head { background: linear-gradient(160deg, var(--navy), var(--blue-dark) 60%, var(--blue)); color: #fff; text-align: center; padding: 26px 20px 22px; }
.login-head img { background: #fff; border-radius: 12px; padding: 8px 12px; height: 64px; width: auto; }
.login-head h1 { color: #fff; margin: .5em 0 .1em; font-size: 1.45rem; }
.login-head p { margin: 0; color: #dbe9ff; font-weight: 600; font-size: .92rem; }
.login-body { padding: 20px 20px 18px; }
.login-body .flash { margin-top: 0; }
.login-note { font-size: .85rem; text-align: center; margin: 12px 0 0; }
.login-back { text-align: center; margin: 14px 0 4px; font-weight: 700; }
.login-field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92rem; }
.input-wrap { position: relative; display: block; }
.input-wrap input { padding-left: 40px; }
.input-wrap.pw input { padding-right: 64px; }
.input-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; }
.input-ic svg { width: 18px; height: 18px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--blue); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: 4px 8px; }
.pw-toggle:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 6px; }

@media print {
  .topbar, .utilbar, .admit-bar, .bottomnav, .call-fab, .footer, .print-hide { display: none !important; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff; color: #000; }
  main.wrap, .wrap { max-width: none !important; padding: 0 !important; }
  .reg-card, .id-card { box-shadow: none; background: #fff; color: #000; }
  .id-card { border: 2px solid #000; }
  /* A5 landscape (210 x 148 mm). @page margin 0 removes the browser's own
     URL/date/title/page-number chrome; the card carries its own margin. */
  .reg-card {
    width: auto; max-width: none;
    margin: 3mm 8mm; padding: 5px 14px;
    border: 2px solid #1a3a8f; outline: 1px solid #c9a227; outline-offset: -4px;
    break-inside: avoid; page-break-inside: avoid;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .reg-head { gap: 10px; padding-bottom: 3px; margin-bottom: 3px; }
  .reg-head img { height: 48px; }
  .reg-head strong { font-size: .95rem; line-height: 1.25; color: #1a3a8f; }
  .reg-head small { font-size: .66rem; line-height: 1.25; }
  .reg-head-spacer { display: block; visibility: hidden; }
  /* Registration-card logo, centred on the institute name in print too
     (residual after flex-start, measured by pixel-ink scan on the real
     print PDF: -4px left the logo 1.5px high, so -3px. The screen rules
     above do not apply here — this print rule comes later in the file
     and wins). */
  .reg-card .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(-3px); }
  .reg-title { font-size: 1rem; margin: 0; color: #e11d2e; }
  .reg-course { font-size: .9rem; margin: 0; }
  .reg-student-id { font-size: .9rem; margin: 0 0 .1em; }
  /* Two-column body even from a phone print: table left, photo + QR right. */
  .reg-body { grid-template-columns: 1fr 220px; gap: 6px; }
  /* Details table flows in two columns (7 + 6 rows) so the tall card
     fits the short A5-landscape height. */
  .reg-table { display: block; }
  .reg-table tbody { display: block; column-count: 2; column-gap: 16px; }
  .reg-table tr { display: flex; break-inside: avoid; page-break-inside: avoid; }
  /* Details section sized up 2026-11-11 (bigger + professional): larger
     text with breathing room; the table height stays under the photo+QR
     column (~203px), so the card still fits 1 A5 page. Labels navy. */
  .reg-table th, .reg-table td { display: block; font-size: .80rem; line-height: 1.35; padding: 2px 6px; }
  .reg-table th { flex: 0 0 48%; background: #e8f1fe; color: #1a3a8f; }
  .reg-table td { flex: 1; font-weight: 500; }
  .reg-side { flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
  .reg-photo { width: 96px; height: 112px; flex: none; }
  .reg-photo.placeholder { font-size: 2.6rem; }
  .reg-qr img { width: 64px; height: 64px; }
  .reg-qr span { font-size: .65rem; }
  .reg-qr-fallback { width: 100px; }
  .reg-sign-band { margin-top: 3px; }
  .reg-sign-img { width: 72px; }
  .reg-sign-line { height: 8px; }
  .reg-sign p { font-size: .8rem; line-height: 1.3; }
  .reg-note { font-size: .65rem; line-height: 1.3; margin-top: 4px; }
  .reg-issue { font-size: .75rem; line-height: 1.4; margin-top: 1px; }
  /* Dark-mode chips would print as white boxes — neutralise in print. */
  [data-theme="dark"] .reg-head img, [data-theme="dark"] .reg-sign-img { background: transparent; padding: 0; }
  [data-theme="dark"] .reg-head strong { color: #1a3a8f; }
  [data-theme="dark"] .reg-table th { background: #e8f1fe; color: #1a3a8f; }
  [data-theme="dark"] .reg-photo.placeholder { background: #e8f1fe; color: #5b6b82; }
  /* Certificate: A4 landscape (its own @page comes from the page itself).
     The certificate carries its own margin inside the zero page margin. */
  .cert { width: auto; max-width: none; margin: 7mm 12mm; padding: 11.5mm 14mm 15mm; break-inside: avoid; page-break-inside: avoid; }
  /* Selected-certificates bulk: every certificate after the first starts a new printed page. */
  .cert-page + .cert-page { break-before: page; page-break-before: always; }
  .cert .reg-head img { height: 87px; }
  .cert .reg-head img:not(.reg-head-spacer) { align-self: flex-start; transform: translateY(-18px); }
  .cert .reg-head-spacer { display: block; visibility: hidden; }
  .cert .reg-head strong { font-size: 1.78rem; line-height: 1.15; }
  .cert-meta { margin: 6px 0 4px; }
  .cert-meta-side p { font-size: .95rem; }
  .cert-ribbon { width: 250px; }
  .cert-ribbon span { font-size: 25px; letter-spacing: 4px; }
  .cert-para { font-size: 1rem; line-height: 1.75; margin-top: 6px; }
  /* Pinyon values: the unitless 1.75 line-height on .cert-para is inherited
     by the 1.5rem script font as a 42px line box per row, which made the
     cert ~19mm too tall in Chrome print (2 pages). Pin it to 1.15 so each
     body row is the paragraph's 28px rhythm and the dotted line sits just
     under the script text, like a paper form. */
  .cert-fill b { font-size: 1.5rem; line-height: 1.15; }
  .cert-line { margin: .3em 0; }
  .cert-foot { margin-top: 8px; }
  .cert-qr img { width: 64px; height: 64px; }
  .cert-sign .reg-sign-img { width: 110px; }
  .cert-sign .reg-sign-line { height: 16px; }
  .cert-director .reg-sign-line { height: 16px; }
  .cert-pub { font-size: .85rem; }
  /* Certificate scale-to-fit is screen-only: undo it in print (the
     wrapper height is set inline by the scaler, so it needs
     !important; the transform comes from a screen media query that
     does not match print, but undo it explicitly anyway). */
  .cert-scale { height: auto !important; }
  .cert-scale .cert { transform: none !important; }
  /* ID cards: A4 sheet (its own @page comes from the page itself).
     Portrait CR80: page 1 = 9 fronts in a 3x3 grid, page 2 = 9 backs. */
  .id-print { display: block; margin: 0; }
  .id-sheet { display: grid; grid-template-columns: 53.98mm 53.98mm 53.98mm; gap: 8mm; justify-content: center; align-content: start; }
  .id-sheet .idcard:nth-child(n+2) { display: flex; }
  .id-backs { break-before: page; page-break-before: always; }
  .id-bulk-pair { display: flex; gap: 8mm; justify-content: center; margin: 0 0 8mm; break-inside: avoid; page-break-inside: avoid; }
  .idcard { outline: 1px dashed #999; outline-offset: 2mm; }
  /* Transcript: A4 portrait (its own @page comes from the page itself).
     The transcript carries its own margin inside the zero page margin. */
  .transcript { width: auto; max-width: none; margin: 8mm 12mm; padding: 6mm 9mm; border: 2px solid #1a3a8f; outline: 1px solid #c9a227; outline-offset: -8px; break-inside: avoid; page-break-inside: avoid; }
  .transcript .reg-head img { height: 56px; }
  .transcript .reg-head strong { font-size: 1.05rem; color: #1a3a8f; }
  .transcript .reg-head small { font-size: .72rem; line-height: 1.3; color: #14213d; }
  .transcript-title { font-size: 1.1rem; padding: 5px 10px; margin: .4em 0 .1em; }
  .transcript-exam { font-size: .82rem; margin: 0 0 .4em; }
  .transcript-meta { font-size: .85rem; margin: .1em 0 .6em; }
  .transcript-label { font-size: .85rem; margin: 6px 0 0; }
  .transcript-info { padding: 8px 10px; gap: 12px; }
  .transcript-photo { width: 88px; height: 106px; font-size: 2.4rem; }
  .ts-field { font-size: .82rem; padding: 2px 0; }
  .transcript-table th, .transcript-table td { font-size: .82rem; padding: 3px 8px; }
  .transcript-summary { margin: 8px 0; gap: 8px; }
  .ts-box { padding: 6px 8px; }
  .ts-box strong { font-size: 1.05rem; }
  .transcript-foot { margin-top: 12px; }
  .transcript-qr img { width: 72px; height: 72px; }
  .transcript-sign .reg-sign-img { width: 130px; }
  .transcript-sign .reg-sign-line { height: 16px; }
}