/* Shared web/PWA glass material. Alpha belongs to the surface, never its content. */
:root {
 --lg-solid:#172d43;--lg-tint:rgba(18,38,59,.76);--lg-ink:#f3f7fc;--lg-muted:#d0dfed;
 --lg-edge:rgba(255,255,255,.25);--lg-highlight:rgba(255,255,255,.13);--lg-blur:22px;
 --lg-shadow:0 10px 28px rgba(4,18,33,.16),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06);
 --lg-inner:rgba(127,160,188,.12);
}
html.light-mode,html[data-theme="light"] {
 --lg-solid:#edf4fa;--lg-tint:rgba(241,247,253,.78);--lg-ink:#14283e;--lg-muted:#354d64;
 --lg-edge:rgba(255,255,255,.30);--lg-highlight:rgba(255,255,255,.44);
 --lg-shadow:0 10px 28px rgba(20,49,77,.12),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(87,122,151,.12);
 --lg-inner:rgba(255,255,255,.52);
}
/* Only stationary top-level surfaces receive the material; dimensions stay in existing layout CSS. */
html body :is(.reg-form-container,.sheet,.wf-card,.wf-compose) {
 background-color:var(--lg-solid)!important;
 background-image:linear-gradient(145deg,var(--lg-highlight),transparent 48%)!important;
 color:var(--lg-ink)!important;border-color:var(--lg-edge)!important;box-shadow:var(--lg-shadow)!important;
 opacity:1;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html body :is(.reg-form-container,.sheet,.wf-card,.wf-compose) {background-color:var(--lg-tint)!important;}
 /* Restrict real background blur to major panels. Repeated small cards use tint/highlight only. */
 html body :is(.reg-form-container,.sheet,.wf-compose) {backdrop-filter:blur(var(--lg-blur)) saturate(115%)!important;-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(115%)!important;}
}
/* Nested cards must not compound filters and translucent layers. */
html body :is(.sheet,.reg-form-container,.hero-card,.wf-card) :is(.dept-card,.reg-form-container,.welcome,.nav-tile,.hero-card,.evt,.wf-card) {
 background-color:var(--lg-inner)!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;
}
html body .reg-form-container :is(h3,h4,label,p) {color:var(--lg-ink)!important;text-shadow:none!important;}
/* ════ Clear glass over the moving background — website + app (Nov 7, 2026) ════
   The video stays visible behind a thin tinted glass. Legibility comes from the letters:
   each glyph is drawn with a contrasting outline BEHIND its fill (paint-order: stroke fill, so the
   letter is not thinned) plus a soft halo — the broadcast-caption technique, readable on bright sky
   and dark water alike. Light theme: navy ink, white outline. Dark theme: white ink, navy outline. */
:root {
 --cg-tint:rgba(10,22,40,.30);--cg-tint-2:rgba(10,22,40,.16);--cg-edge:rgba(255,255,255,.30);--cg-blur:5px;
 --cg-shadow:0 14px 34px rgba(3,12,24,.24),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.08);
 --cg-sheen:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%,rgba(255,255,255,.05));
 --cg-ink:#FFFFFF;--cg-ink-2:#EEF3F9;--cg-gold:#F4D788;--cg-line:#0A1628;--cg-halo:rgba(6,16,30,.62);
 --cg-green:#6EE7B7;--cg-blue:#93C5FD;--cg-rose:#FDA4AF;
}
html.light-mode,html[data-theme="light"] {
 --cg-tint:rgba(255,255,255,.18);--cg-tint-2:rgba(255,255,255,.10);--cg-edge:rgba(255,255,255,.72);
 --cg-shadow:0 14px 34px rgba(16,42,70,.16),inset 0 1px 0 rgba(255,255,255,.90),inset 0 -1px 0 rgba(255,255,255,.30);
 --cg-sheen:linear-gradient(150deg,rgba(255,255,255,.40),rgba(255,255,255,0) 44%,rgba(255,255,255,.12));
 --cg-ink:#0A1628;--cg-ink-2:#1A2D45;--cg-gold:#5E4508;--cg-line:#FFFFFF;--cg-halo:rgba(255,255,255,.80);
 --cg-green:#065F46;--cg-blue:#1E3A8A;--cg-rose:#9F1239;
}
/* the surfaces */
html body :is(.hero .hero-content,section > .container > .section-header,#regFormView > .section-header,#webLoginSection > .section-header,.verify-content,
              .welcome,.nav-tile,.hero-card,.evt) {
 background-color:var(--cg-tint)!important;background-image:var(--cg-sheen)!important;
 border:1px solid var(--cg-edge)!important;box-shadow:var(--cg-shadow)!important;
 -webkit-backdrop-filter:blur(var(--cg-blur)) saturate(150%)!important;backdrop-filter:blur(var(--cg-blur)) saturate(150%)!important;
 color:var(--cg-ink)!important;opacity:1;
}
/* repeated small app tiles: tint + sheen only (no per-tile blur) — keeps scrolling smooth on phones */
html body :is(.nav-tile,.evt) {-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html body .block-head h3 {background:var(--cg-tint)!important;border:1px solid var(--cg-edge);}
/* outlined letters — headings */
html body :is(.hero .hero-content,section > .container > .section-header,#regFormView > .section-header,#webLoginSection > .section-header,.verify-content) :is(h1,h2,h3),
html body :is(.welcome .w-name,.hero-card .hc-title,.evt .evt-title,.hc-card .hc-card-name,.aes-info .aes-title,.qa:not(.qa-primary) .qa-lbl),html body .block-head h3 {
 color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);
 -webkit-text-stroke:4px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 2px 14px var(--cg-halo)!important;
}
/* outlined letters — body text and labels (thinner outline) */
html body :is(.hero .hero-content,section > .container > .section-header,#regFormView > .section-header,#webLoginSection > .section-header,.verify-content) > p,
html body .hero .hero-content :is(.hero-stats .stat-item p,.btn-video),
html body :is(.nav-tile .nt-lbl,.welcome .w-greeting,.hero-card .hc-body,.hero-card .hc-meta,.evt .evt-meta,.aes-info .aes-date,.aes-person :is(.aes-name-en,.aes-ptitle),.hc-card .hc-card-stats) {
 color:var(--cg-ink-2)!important;-webkit-text-fill-color:var(--cg-ink-2);
 -webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;
}
html body .nav-tile .nt-lbl {color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);font-weight:700;}
/* outlined letters — gold accents */
html body :is(.hero .hero-content,section > .container > .section-header,#regFormView > .section-header,#webLoginSection > .section-header,.verify-content) :is(.section-label,.hero-badge),
html body .hero .hero-content .hero-stats .stat-item h3 .counter {
 color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);
 -webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;
}
html body :is(.hero .hero-content,section > .container > .section-header) :is(.section-label,.hero-badge) {background:var(--cg-tint-2)!important;border-color:var(--cg-edge)!important;}
/* the gold gradient headline line: text is clipped to a gradient, so the outline is drawn with stacked drop-shadows */
html body .hero .hero-content h2 .highlight {
 -webkit-text-stroke:0!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;
 filter:drop-shadow(0 0 .5px var(--cg-line)) drop-shadow(0 0 .5px var(--cg-line)) drop-shadow(0 0 1px var(--cg-line)) drop-shadow(0 2px 10px var(--cg-halo))!important;
}
html.light-mode body .hero .hero-content h2 .highlight {background-image:linear-gradient(135deg,#5E4508 0%,#7A5A0F 55%,#8B6914 100%)!important;}
html:not(.light-mode) body .hero .hero-content h2 .highlight {background-image:linear-gradient(135deg,#F8E3A6 0%,#E4C76B 55%,#D4A84B 100%)!important;}
/* secondary hero button becomes glass too (was a white slab) */
html body .hero .hero-content .btn-secondary {
 background:var(--cg-tint-2)!important;border:1px solid var(--cg-edge)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
 color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);-webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
}
/* icons in app tiles get the same outline as the letters */
html body :is(.nav-tile .nt-ic,.welcome .w-ic) svg {color:var(--cg-ink);filter:drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 1px 6px var(--cg-halo));}
/* ── cards and controls that sit on the video (website): same clear glass, text inherits the outline ──
   -webkit-text-stroke, paint-order and text-shadow are inherited, so every line of text inside a card gets
   the outline from the card itself; elements with their own solid colour switch it off below. */
html body :is(.dept-card,.research-card,.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.instructor-card,.vision-card,.verify-form,.verify-step,
              .verify-mode-btn:not(.active),.reg-tab:not(.active),#workforce .btn-secondary) {
 background-color:var(--cg-tint)!important;background-image:var(--cg-sheen)!important;
 border:1px solid var(--cg-edge)!important;box-shadow:var(--cg-shadow)!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 --cg-text:var(--cg-ink);color:var(--cg-ink)!important;
 -webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;
}
/* larger panels get a real blur (few on screen, so it stays cheap) */
html body :is(.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.verify-form) {-webkit-backdrop-filter:blur(var(--cg-blur)) saturate(150%)!important;backdrop-filter:blur(var(--cg-blur)) saturate(150%)!important;}
/* text inside the cards takes the theme ink (designed colours for white cards are not readable on glass) */
html body :is(.dept-card,.research-card,.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.instructor-card,.vision-card,.verify-form,.verify-step) :is(h1,h2,h3,h4,h5,h6,strong,b) {color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);}
html body :is(.dept-card,.research-card,.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.instructor-card,.vision-card,.verify-form,.verify-step) :is(p,li,span,small,label,div:not([class])) {color:var(--cg-ink-2)!important;-webkit-text-fill-color:var(--cg-ink-2);}
html body :is(.dept-card,.research-card,.instructor-card,.vision-card) :is(.dept-cta,.instructor-specialization,[class*="-label"]) {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body :is(.verify-mode-btn:not(.active),.reg-tab:not(.active),#workforce .btn-secondary) {-webkit-text-fill-color:var(--cg-ink);}
html body :is(.verify-mode-btn:not(.active),.reg-tab:not(.active)) svg,html body :is(.dept-card,.research-card,.vision-card,.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.verify-form) svg {filter:drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 0 .6px var(--cg-line));}
/* inner boxes inside a glass panel (profile ID card, pay box, collapsible toggle, commitment items): a lighter glass band */
html body :is(.glass-inner,.nc-item) {background:var(--cg-tint-2)!important;background-image:none!important;border:1px solid var(--cg-edge)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;}
html body button.glass-inner {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body .national-commitments .nc-title,html body .nc-item :is(h3,h4,strong) {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
/* registration type tiles inside the glass form: clear tiles, gold edge when chosen (set by the tile's own click) */
html body #regFormView label[id^="regType"] {color:var(--cg-ink);}
/* research registration panel: its header strip is a lighter glass band */
html body .research-register .research-register-header {background:var(--cg-tint-2)!important;border-bottom:1px solid var(--cg-edge)!important;}
/* small tag pills inside the department cards: glass pills (a light solid pill under light ink was unreadable in dark mode) */
html body .dept-card .dept-tag {background:var(--cg-tint-2)!important;border:1px solid var(--cg-edge)!important;color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);}
/* ── event cards (website): the card is glass, the image keeps its own badges; text lives in .featured-card-body ── */
html body .featured-card {
 background-color:var(--cg-tint)!important;background-image:var(--cg-sheen)!important;
 border:1px solid var(--cg-edge)!important;box-shadow:var(--cg-shadow)!important;
}
html body .featured-card .featured-card-body {
 color:var(--cg-ink);-webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo);
}
html body .featured-card .featured-card-body h3 {color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);-webkit-text-stroke-width:4px;}
html body .featured-card .featured-card-body :is(p,.featured-card-detail-row,.featured-card-detail-row *) {color:var(--cg-ink-2)!important;-webkit-text-fill-color:var(--cg-ink-2);}
html body .featured-card .featured-card-details {background:var(--cg-tint-2)!important;border:1px solid var(--cg-edge)!important;}
html body .featured-card .featured-card-detail-row svg {filter:drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 0 .6px var(--cg-line));}
html body .featured-card .featured-card-price .amount {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body .featured-card .featured-card-price .free,html body .featured-card .featured-card-price .free * {color:var(--cg-green)!important;-webkit-text-fill-color:var(--cg-green);}
html body .featured-card .mode-badge,html body .featured-card .mode-badge * {color:var(--cg-blue)!important;-webkit-text-fill-color:var(--cg-blue);}
html body .featured-card .mode-badge {background:var(--cg-tint-2)!important;border:1px solid var(--cg-edge)!important;}
html body .featured-card :is(.fc-closed-msg,.featured-card-cta.disabled),html body .featured-card :is(.fc-closed-msg,.featured-card-cta.disabled) * {color:var(--cg-rose)!important;-webkit-text-fill-color:var(--cg-rose);}
html body .featured-card :is(.fc-closed-msg,.featured-card-cta.disabled) {background:var(--cg-tint-2)!important;border:1px solid var(--cg-rose)!important;}
html body .featured-card .featured-card-cta:not(.disabled) {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);border-color:var(--cg-gold)!important;background:var(--cg-tint-2)!important;}
/* ── app surfaces that take the outline from their container (event slides, quick actions, cards) ── */
html body :is(.qa:not(.qa-primary),.aes-person,.aes-cover .aes-info,.evt .evt-body,.hero-card .hc-card) {
 -webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;
}
html body .qa:not(.qa-primary) {color:var(--cg-ink)!important;}
html body .qa:not(.qa-primary) svg {filter:drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 0 .6px var(--cg-line));}
html body .aes-person .aes-name {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
/* a slide whose info sits over the picture keeps its dark curtain: white ink, navy outline in both themes */
html body .is-media-frame .aes-info {--cg-ink:#FFFFFF;--cg-ink-2:#E6F0FA;--cg-line:#061426;--cg-halo:rgba(0,0,0,.6);}
/* app guest card inside #heroCard (unclassed markup from core.js): ink + outline from its container */
html body #heroCard > div:not([class]) {
 color:var(--cg-ink-2)!important;-webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;
}
html body #heroCard > div:not([class]) div {color:inherit;}
html body #heroCard > div:not([class]) svg {color:var(--cg-ink);filter:drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 0 .6px var(--cg-line));}
/* app text that sits straight on the video (no card): see-all link, empty events line, footer */
html body :is(.block-head .seemore,#featuredEvents,.ftr) {
 -webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;
}
html body .block-head .seemore,html body .ftr a {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body #featuredEvents > div:not(.evt),html body .ftr,html body .ftr .ftr-meta {color:var(--cg-ink-2)!important;-webkit-text-fill-color:var(--cg-ink-2);}
html body #featuredEvents .evt {-webkit-text-stroke:0;text-shadow:none;}
html body #featuredEvents .evt .evt-body {-webkit-text-stroke:3px var(--cg-line);text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;}
/* buttons, badges and tags with their own solid colour inside app surfaces: no outline */
html body :is(.qa:not(.qa-primary),.aes-person,.aes-cover .aes-info,.evt,.hero-card .hc-card,#heroCard > div:not([class])) :is(.aes-cta,.hc-cta,.btn,.aes-badge,.aes-role,.evt-tag,button),
html body :is(.qa:not(.qa-primary),.aes-person,.aes-cover .aes-info,.evt,.hero-card .hc-card,#heroCard > div:not([class])) :is(.aes-cta,.hc-cta,.btn,.aes-badge,.aes-role,.evt-tag,button) * {-webkit-text-stroke:0!important;text-shadow:none!important;}
/* ── certificate preview (verification section): glass sheet with a double gold frame ──
   The logo tile and the QR tile stay white (a QR code must sit on white to scan). */
:root {--cg-frame:#E4C76B;}
html.light-mode,html[data-theme="light"] {--cg-frame:#B8913A;}
html body #verification .cert-preview {
 background-color:var(--cg-tint)!important;background-image:var(--cg-sheen)!important;
 border:2px solid var(--cg-frame)!important;box-shadow:var(--cg-shadow)!important;
 -webkit-backdrop-filter:blur(var(--cg-blur)) saturate(150%);backdrop-filter:blur(var(--cg-blur)) saturate(150%);
 color:var(--cg-ink);-webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo);
}
html body #verification .cert-preview::after {
 content:"";position:absolute;inset:8px;border:1px solid var(--cg-frame);border-radius:calc(var(--radius-lg, 20px) - 6px);opacity:.75;pointer-events:none;
}
html body #verification .cert-preview::before {background:repeating-conic-gradient(from 0deg,transparent 0deg 80deg,rgba(200,162,78,.07) 80deg 90deg)!important;}
html body #verification .cert-preview :is(.cert-header,.cert-body) {position:relative;z-index:1;}
html body #verification .cert-preview :is(.cert-header h4,.cert-body h5,.cert-body .cert-course) {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body #verification .cert-preview .cert-body .cert-name {color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);-webkit-text-stroke-width:4px;border-bottom-color:var(--cg-frame)!important;}
html body #verification .cert-preview :is(.cert-header p,.cert-body .cert-date) {color:var(--cg-ink-2)!important;-webkit-text-fill-color:var(--cg-ink-2);}
html body #verification .cert-preview :is(.cert-logo,.cert-qr) {background:#FFFFFF!important;border:1px solid var(--cg-frame)!important;-webkit-text-stroke:0;text-shadow:none;color:#0A1628;-webkit-text-fill-color:#0A1628;position:relative;z-index:1;}
/* own solid colour inside a glass card: no outline (avoids a fat double edge) */
html body :is(.dept-card,.research-card,.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.instructor-card,.vision-card,.verify-form,.verify-step) :is(.step-num,.btn-primary,.research-chip,button,[class*="badge"]:not(.mode-badge),input,select,textarea),
html body :is(.dept-card,.research-card,.research-search,.research-register,.glass-panel,.national-commitments,#regFormView .reg-form-container,.instructor-card,.vision-card,.verify-form,.verify-step) :is(.step-num,.btn-primary,.research-chip,button,[class*="badge"]:not(.mode-badge)) * {
 -webkit-text-stroke:0!important;text-shadow:none!important;-webkit-text-fill-color:currentColor;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html body :is(.hero .hero-content,section > .container > .section-header,#regFormView > .section-header,#webLoginSection > .section-header,.verify-content,.welcome) {background-color:var(--lg-tint)!important;}
}
html .registration .reg-form-container {width:100%;max-width:720px;margin-inline:auto;}
/* White editing surfaces in BOTH themes, including dynamically generated forms. */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
html body select,html body textarea,
html body .registration .reg-form-container input:not([type="checkbox"]):not([type="radio"]),
html body .registration .reg-form-container select,html body .registration .reg-form-container textarea {
 background:#fff!important;background-image:none!important;color:#14283e!important;-webkit-text-fill-color:#14283e!important;
 border-color:#8ca1b5!important;caret-color:#14283e;color-scheme:light;opacity:1!important;
}
html body input::placeholder,html body textarea::placeholder,
html body .registration .reg-form-container input::placeholder,html body .registration .reg-form-container textarea::placeholder {color:#566b80!important;-webkit-text-fill-color:#566b80!important;opacity:1!important;}
html body select option {background:#fff;color:#14283e;}
html body :is(input,select,textarea):focus-visible {outline:3px solid #1676b2;outline-offset:2px;}
/* Moving slide layers remain unfiltered: preserve GPU-friendly opacity/transform. */
html body :is(.hero-slider,.hero-slide,.aes-slide,.app-eslider),html body :is(.hero-slide,.aes-slide) * {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
@media(max-width:640px){:root{--lg-blur:18px}}
/* Resolve legacy theme selectors without broad changes to layout or SVG colours. */
html body .reg-form-container {width:100%;max-width:720px;margin-inline:auto;}
html body .registration .reg-form-container {background-color:var(--lg-tint)!important;background-image:linear-gradient(145deg,var(--lg-highlight),transparent 48%)!important;}
html body :is(.reg-form-container,.sheet,form,.modal-content,.wf-card,.wf-main) :is(select,textarea) {
 background:#fff!important;background-image:none!important;color:#14283e!important;-webkit-text-fill-color:#14283e!important;border-color:#8ca1b5!important;color-scheme:light;opacity:1!important;
}
html body :is(.reg-form-container,.sheet,form,.modal-content,.wf-card,.wf-main) textarea::placeholder {color:#566b80!important;-webkit-text-fill-color:#566b80!important;opacity:1!important;}
html body .sheet-backdrop {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html body :is(.dept-card,.reg-form-container,.welcome,.nav-tile,.hero-card,.evt,.sheet,.wf-card,.wf-compose),html body .registration .reg-form-container {background-color:var(--lg-solid)!important;}
}

/* ════ Footer — every page: a floating clear-glass panel over the video (Nov 8, 2026) ════
   Same surface, ink and outlined letters as the section cards: the video stays visible around and
   through it; light theme = navy ink with a white outline, dark theme = white ink with a navy outline. */
html body footer {background:transparent!important;padding:8px 0 28px;}
html body footer > .container {
 background-color:var(--cg-tint)!important;background-image:var(--cg-sheen)!important;
 border:1px solid var(--cg-edge)!important;box-shadow:var(--cg-shadow)!important;border-radius:28px;
 padding:8px 40px 4px;
 -webkit-backdrop-filter:blur(var(--cg-blur)) saturate(150%);backdrop-filter:blur(var(--cg-blur)) saturate(150%);
 color:var(--cg-ink-2);-webkit-text-stroke:3px var(--cg-line);paint-order:stroke fill;
 text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo);
}
html body footer :is(h1,h4,h5) {color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);-webkit-text-stroke-width:4px;text-shadow:0 0 1px var(--cg-line),0 2px 14px var(--cg-halo)!important;}
html body footer :is(p,a,span,bdi,small,div) {color:var(--cg-ink-2)!important;-webkit-text-fill-color:var(--cg-ink-2);text-shadow:0 0 1px var(--cg-line),0 1px 10px var(--cg-halo)!important;}
html body footer .footer-col a {font-weight:600;}
/* gold accents: brand line, contact links, the login link, legal links */
html body footer :is(.logo-text span,a[href^="mailto:"],a[href*="gptiq.org"],form p a,.footer-bottom a),
html body footer :is(a[href^="mailto:"],a[href*="gptiq.org"]) * {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body footer a[href^="https://wa.me/"],html body footer a[href^="https://wa.me/"] * {color:var(--cg-green)!important;-webkit-text-fill-color:var(--cg-green);}
html body footer :is(.footer-col a,.footer-bottom a):hover {color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
/* dividers inside the panel follow the glass edge */
html body footer .footer-bottom,html body footer > .container > div[style*="border-top"],html body footer .footer-col div[style*="border-top"] {border-top-color:var(--cg-edge)!important;}
/* icons take the same outline as the letters */
html body footer svg {color:currentColor;filter:drop-shadow(0 0 .6px var(--cg-line)) drop-shadow(0 0 .6px var(--cg-line));}
/* social buttons and the YouTube band: lighter glass; the YouTube tile keeps its red */
html body footer .footer-social a {background:var(--cg-tint-2)!important;border:1px solid var(--cg-edge)!important;color:var(--cg-ink)!important;-webkit-text-fill-color:var(--cg-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
html body footer .footer-social a:hover {border-color:var(--cg-gold)!important;color:var(--cg-gold)!important;-webkit-text-fill-color:var(--cg-gold);}
html body footer .footer-yt-banner {background-color:var(--cg-tint-2)!important;background-image:linear-gradient(135deg,rgba(255,0,0,.12),rgba(255,0,0,0) 60%)!important;border:1px solid var(--cg-edge)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
html body footer .footer-yt-banner:hover {border-color:rgba(255,64,64,.55)!important;}
html body footer .footer-yt-text span {color:var(--cg-rose)!important;-webkit-text-fill-color:var(--cg-rose);font-weight:700;}
/* solid controls inside the panel: no outline */
html body footer :is(.footer-yt-icon,button,textarea,input,#cfOut span),html body footer :is(.footer-yt-icon,button) * {-webkit-text-stroke:0!important;text-shadow:none!important;filter:none;}
html body footer button {-webkit-text-fill-color:currentColor;}
html body footer #cfOut span {-webkit-text-stroke:2px var(--cg-line)!important;paint-order:stroke fill;}
/* app footer (.ftr): the same glass panel, compact */
html body .ftr {
 background-color:var(--cg-tint)!important;background-image:var(--cg-sheen)!important;border:1px solid var(--cg-edge)!important;box-shadow:var(--cg-shadow)!important;
 border-radius:20px;padding:14px 16px!important;-webkit-backdrop-filter:blur(var(--cg-blur)) saturate(150%);backdrop-filter:blur(var(--cg-blur)) saturate(150%);
}
@media(max-width:768px){html body footer {padding:4px 12px 20px;} html body footer > .container {border-radius:22px;padding:4px 20px 2px;}}

/* ════ Dark mode = crystal, website + app (Nov 8, 2026) ════
   In the dark theme every surface is clear glass over the video; legibility comes from the blur + the outlined letters. */
html:not(.light-mode):not([data-theme="light"]) {
 --lg-solid:rgba(10,22,40,.55);--lg-tint:rgba(10,22,40,.50);--lg-blur:22px;--lg-inner:rgba(255,255,255,.07);
 --cg-tint:rgba(10,22,40,.30);--cg-tint-2:rgba(10,22,40,.16);
 --surface:rgba(255,255,255,.08);--sheet-bg:rgba(10,22,40,.55);
}
/* big panels keep a real blur so text over a busy frame stays calm */
html:not(.light-mode):not([data-theme="light"]) body :is(.sheet,.reg-form-container,.wf-compose) {
 background-color:var(--lg-tint)!important;-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(140%)!important;backdrop-filter:blur(var(--lg-blur)) saturate(140%)!important;
}
html:not(.light-mode):not([data-theme="light"]) body .sheet-head {background:rgba(10,22,40,.45)!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);}
/* website header: crystal bar */
html:not(.light-mode):not([data-theme="light"]) body > header {background:rgba(10,22,40,.45)!important;border-bottom:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);}
/* research center (website overlay): crystal panel, light ink */
html:not(.light-mode) #rcOverlay .rc-panel {background:rgba(10,22,40,.55)!important;border:1px solid rgba(255,255,255,.22)!important;color:#F3F7FC!important;--text:#F3F7FC;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);}
html:not(.light-mode) #rcOverlay :is(.rc-head) {border-bottom-color:rgba(255,255,255,.14)!important;}
html:not(.light-mode) #rcOverlay .rc-x {background:rgba(255,255,255,.12)!important;color:#F3F7FC!important;}
html:not(.light-mode) #rcOverlay .rc-card {background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.16)!important;}