/* =========================================================
   AURORA — dark glass + neon reskin for masstree.in
   Loaded AFTER style.css to transform the iPortfolio theme.
   ========================================================= */

:root {
  --a-bg: #070b16;
  --a-bg2: #0b1226;
  --a-text: #c8d3e6;
  --a-dim: #8a97ad;
  --a-white: #f4f8ff;
  --neon1: #22d3ee; /* cyan  */
  --neon2: #a855f7; /* purple */
  --neon3: #ec4899; /* pink  */
  --neon4: #38bdf8; /* sky   */
  --glass: rgba(255, 255, 255, 0.05);
  --glass-brd: rgba(255, 255, 255, 0.12);
  --grad: linear-gradient(120deg, #22d3ee, #a855f7 55%, #ec4899);
}

/* ---------- base ---------- */
body.select-none,
body {
  background: var(--a-bg) !important;
  color: var(--a-text) !important;
}

/* Animated aurora layer (blobs injected by motion.js) */
.fx-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx-aurora .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.fx-aurora .b1 {
  width: 46vw; height: 46vw;
  background: radial-gradient(circle at 30% 30%, #22d3ee, transparent 70%);
  top: -8vw; left: -6vw;
  animation: drift1 18s ease-in-out infinite alternate;
}
.fx-aurora .b2 {
  width: 42vw; height: 42vw;
  background: radial-gradient(circle at 60% 40%, #a855f7, transparent 70%);
  top: 20vh; right: -10vw;
  animation: drift2 22s ease-in-out infinite alternate;
}
.fx-aurora .b3 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle at 50% 60%, #ec4899, transparent 70%);
  bottom: -12vw; left: 30vw;
  animation: drift3 26s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(8vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, 6vh) scale(1.1); } }
@keyframes drift3 { to { transform: translate(6vw, -8vh) scale(1.2); } }

/* subtle top grain/vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(56, 189, 248, 0.12), transparent 60%);
}

/* ---------- sidebar header (glass) ---------- */
#header {
  background: rgba(9, 13, 26, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--glass-brd);
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45);
}
#header .profile img {
  border: 2px solid transparent !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.35), 0 0 30px rgba(168, 85, 247, 0.45) !important;
}
#header .profile h1 a { color: var(--a-white) !important; }
#header .profile h1 a:hover { color: var(--neon1) !important; }

#header .social-links a {
  background: var(--glass) !important;
  border: 1px solid var(--glass-brd);
  color: var(--a-text) !important;
  backdrop-filter: blur(6px);
}
#header .social-links a:hover {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
  transform: translateY(-3px);
}

#header .nav-menu a {
  color: var(--a-dim) !important;
  background: transparent !important;
}
#header .nav-menu a:hover,
#header .nav-menu li:hover > a,
#header .nav-menu .active {
  color: var(--a-white) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
#header .nav-menu a:hover i,
#header .nav-menu .active i { color: var(--neon1) !important; }

.mobile-nav-toggle {
  color: #fff !important;
  background: var(--grad) !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
}

/* ---------- hero ---------- */
#hero {
  position: relative;
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 22, 0.28), rgba(7, 11, 22, 0.62) 60%, rgba(7, 11, 22, 0.82));
  z-index: 1;
}
#hero .hero-container { position: relative; z-index: 2; }
#hero h1 {
  color: #fff;
  background: linear-gradient(120deg, #fff, #67e8f9 40%, #c4b5fd 70%, #f9a8d4) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 40px rgba(103, 232, 249, 0.25);
  letter-spacing: 1px;
}
#hero p, #hero p span { color: #dbe6f5 !important; }
#hero .typed-cursor { color: var(--neon1); }

/* ---------- section shells (NOT #hero — keep its image) ---------- */
.section-bg, #main, #about, #skills, #resume, #expertise, #contact {
  background: transparent !important;
}
.section-title h2 {
  color: var(--a-white) !important;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  letter-spacing: 0.5px;
}
.section-title h2::after {
  background: var(--grad) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.7);
}
.section-title p, .about p, .about .content p,
.resume .resume-item p, .services .description,
.contact p, p, li, .fst-italic {
  color: var(--a-text) !important;
}
h3, h4, h5, .resume-title, .about .content h3, .services .title a, strong {
  color: var(--a-white) !important;
}
a { color: var(--neon4); }
a:hover { color: var(--neon1); }
.about .content ul li i,
.contact .info i,
.resume .resume-item::before { color: var(--neon1) !important; }

/* ---------- glass cards (about facts, expertise, resume) ---------- */
.about .content,
.services .icon-box,
.resume .resume-item,
.contact .info,
.php-email-form,
.project-card,
.count-box {
  background: var(--glass) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
.services .icon-box { padding: 26px !important; }
.services .icon-box:hover {
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 18px 44px rgba(34, 211, 238, 0.18) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.services .icon-box .icon {
  background: transparent !important;
}
.services .title a:hover { color: var(--neon1) !important; }

.resume .resume-item {
  border-left: 3px solid transparent !important;
  padding: 18px 18px 14px 22px !important;
  margin-bottom: 18px !important;
}
.resume .resume-item:hover {
  border-left: 3px solid var(--neon2) !important;
  box-shadow: 0 14px 34px rgba(168, 85, 247, 0.18);
}
.resume-title {
  color: var(--neon1) !important;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.4);
}

/* ---------- project cards ---------- */
.project-card:hover {
  border-color: rgba(236, 72, 153, 0.5) !important;
  box-shadow: 0 18px 44px rgba(236, 72, 153, 0.22) !important;
}
.project-title { color: var(--a-white) !important; }
.project-desc { color: var(--a-dim) !important; }
.project-icon {
  background: rgba(34, 211, 238, 0.12) !important;
  color: var(--neon1) !important;
}
.project-lang {
  background: rgba(56, 189, 248, 0.14) !important;
  color: #7dd3fc !important;
}
.project-private {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #d8b4fe !important;
}
.project-link { color: var(--neon1) !important; }
.project-link:hover { color: #67e8f9 !important; }

/* ---------- skills ---------- */
.skills .progress { background: transparent !important; }
.skills .skill { color: var(--a-white) !important; }
.skills .skill .val { color: var(--neon1) !important; }
.skills .progress-bar-wrap { background: rgba(255, 255, 255, 0.08) !important; }
.skills .progress .progress-bar {
  background: var(--grad) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55);
}

/* ---------- contact ---------- */
.contact .info i {
  background: rgba(34, 211, 238, 0.12) !important;
  color: var(--neon1) !important;
}
.contact .info h4 { color: var(--a-white) !important; }
.contact .info a { color: var(--neon4) !important; }
.php-email-form .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--glass-brd) !important;
  color: var(--a-white) !important;
}
.php-email-form .form-control::placeholder { color: var(--a-dim) !important; }
.php-email-form .form-control:focus {
  border-color: var(--neon1) !important;
  box-shadow: 0 0 0 0.18rem rgba(34, 211, 238, 0.2) !important;
}
.php-email-form label { color: var(--a-text) !important; }
.php-email-form button[type="submit"] {
  background: var(--grad) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.45);
}
.php-email-form button[type="submit"]:hover {
  box-shadow: 0 12px 30px rgba(236, 72, 153, 0.5);
}
.contact iframe { border-radius: 12px; filter: grayscale(0.2) contrast(1.05) brightness(0.9); }

/* ---------- footer ---------- */
#footer {
  background: rgba(9, 13, 26, 0.6) !important;
  color: var(--a-dim) !important;
  border-top: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
}
#footer a, #footer .credits a { color: var(--neon4) !important; }

/* ---------- neon buttons (generic) ---------- */
.btn-primary, .btn-success, .btn-outline-primary {
  background: var(--grad) !important;
  border: none !important;
  color: #fff !important;
}
.quick-links .btn {
  background: var(--glass) !important;
  border: 1px solid var(--glass-brd) !important;
  color: var(--a-text) !important;
}
.quick-links .btn:hover {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---------- GSAP reveal helper (used only if JS runs) ---------- */
.reveal-ready { will-change: transform, opacity; }

/* ---------- responsive niceties ---------- */
@media (max-width: 991px) {
  .fx-aurora .blob { filter: blur(70px); opacity: 0.5; }
}
@media (max-width: 575px) {
  #hero h1 { font-size: 34px; }
  .fx-aurora .b1, .fx-aurora .b2, .fx-aurora .b3 { filter: blur(60px); }
}

/* =========================================================
   Contrast fixes for the dark theme
   ========================================================= */

/* Résumé date badges (Professional Experience / Education) were
   white text on a light badge — make them a readable neon pill. */
.resume .resume-item h4 { color: var(--a-white) !important; }
.resume .resume-item h5 {
  background: rgba(34, 211, 238, 0.14) !important;
  color: #7ff3ff !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  border-radius: 20px;
}
.resume .resume-item::before {
  background: var(--a-bg) !important;
  border: 2px solid var(--neon1) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
}

/* ---------- BioLinguist chat popup: cohesive dark glass ---------- */
#BioLinguist {
  background: rgba(11, 18, 38, 0.94) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 44px rgba(168, 85, 247, 0.22) !important;
}
#BioLinguist .chatbot-header h1,
#BioLinguist .chatbot-header { color: #fff !important; }
#BioLinguist #chatbox { background: transparent !important; }
#BioLinguist .chat-msg--bot .chat-bubble {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8eefb !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
#BioLinguist .chat-msg--user .chat-bubble {
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
}
#BioLinguist .quick-links {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#BioLinguist .quick-links p { color: #cbd6e8 !important; }
#BioLinguist .quick-links .btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #dbe6f5 !important;
}
#BioLinguist .quick-links .btn:hover {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#BioLinguist .chat-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#BioLinguist .chat-input .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
#BioLinguist .chat-input .form-control::placeholder { color: #8a97ad !important; }
#BioLinguist .chat-input .form-control:focus {
  border-color: var(--neon1) !important;
  box-shadow: 0 0 0 0.18rem rgba(34, 211, 238, 0.2) !important;
}

/* Bootstrap display / dark utility headings -> visible on dark theme */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--a-white) !important;
  text-shadow: 0 0 30px rgba(56, 189, 248, 0.25);
}
.text-dark, .text-secondary, .text-muted { color: var(--a-text) !important; }
.card, .modal-content { background: var(--glass) !important; color: var(--a-text) !important; border: 1px solid var(--glass-brd) !important; }

/* ---------- tools.html: make the rainbow heading vivid & visible ---------- */
.text-rainbow {
  background: linear-gradient(120deg, #22d3ee, #a855f7 45%, #ec4899 70%, #38bdf8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 30px rgba(168, 85, 247, 0.35);
}

/* =========================================================
   Notes.html — beautiful dark-glass note library
   ========================================================= */
.notes-page { padding: 40px 0 70px; }
.notes-hero { text-align: center; margin-bottom: 34px; }
.notes-hero h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--a-white);
  margin: 0;
  letter-spacing: 0.5px;
}
.notes-hero h1 span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.notes-hero p {
  color: var(--a-dim);
  max-width: 640px;
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.6;
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 38px;
}
.note-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--glass) !important;
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  color: var(--a-text) !important;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.35;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.note-card i {
  font-size: 22px;
  color: var(--neon1);
  flex-shrink: 0;
  transition: color 0.25s ease, transform 0.25s ease;
}
.note-card span { font-weight: 500; }
.note-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 14px 32px rgba(34, 211, 238, 0.16);
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.note-card:hover i { color: var(--neon3); transform: scale(1.12); }
@media (max-width: 575px) {
  .notes-grid { grid-template-columns: 1fr; }
  .notes-hero h1 { font-size: 30px; }
}

/* =========================================================
   Modals (tools.html: Working Process / Westgard Rules / Help)
   were black text on a dark panel — make them readable.
   ========================================================= */
.modal-content {
  background: rgba(13, 20, 40, 0.97) !important;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  color: var(--a-text) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.modal-body,
.modal-body *,
.modal-content .text-black {
  color: var(--a-text) !important;
}
.modal-title,
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6,
.modal-content strong {
  color: var(--a-white) !important;
}
.modal-content a { color: var(--neon1) !important; }
.modal-header {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(168, 85, 247, 0.14));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.12) !important; }
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.7); }
.modal-content .btn-primary { background: var(--grad) !important; border: none !important; color: #fff !important; }
.modal-content .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--glass-brd) !important;
  color: #fff !important;
}
/* Bootstrap list-group items default to a WHITE background — that made the
   Working Process / Westgard rule text invisible on the dark modal. */
.modal-content .list-group,
.modal-content .list-group-item {
  background: transparent !important;
  color: var(--a-text) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.modal-content .list-group-item .fw-bold { color: var(--a-white) !important; }
.modal-content .list-group-numbered > .list-group-item::before { color: var(--neon1) !important; }

/* QC Levey-Jennings chart — dark canvas to match the theme */
#leveyJenningsChart {
  background: rgba(13, 20, 40, 0.55) !important;
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 8px;
}
/* QC calculator inputs / violation box — dark glass (no more white boxes) */
#analystName, #controlName, #monthName, #values, #delimitedText, #violationDetails {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid var(--glass-brd) !important;
}
#analystName::placeholder, #controlName::placeholder, #values::placeholder,
#delimitedText::placeholder, #violationDetails::placeholder { color: var(--a-dim) !important; }
#analystName:focus, #controlName:focus, #monthName:focus, #values:focus, #violationDetails:focus {
  border-color: var(--neon1) !important;
  box-shadow: 0 0 0 0.18rem rgba(34, 211, 238, 0.2) !important;
}

/* =========================================================
   Footer + footer link lists (tools.html Popular / Top Pages)
   ========================================================= */
#footer {
  background: rgba(9, 13, 26, 0.7) !important;
  border-top: 1px solid var(--glass-brd);
}
#footer .copyright, #footer .credits { color: var(--a-dim) !important; }
#footer a { color: var(--neon1) !important; text-decoration: none; transition: color 0.2s ease, text-shadow 0.2s ease; }
#footer a:hover { color: #67e8f9 !important; text-shadow: 0 0 10px rgba(34, 211, 238, 0.55); }

/* The "Popular / Top Pages" link columns */
.container.bg-dark.text-white {
  background: rgba(9, 13, 26, 0.6) !important;
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 10px;
  padding-bottom: 12px;
}
.container.bg-dark.text-white h6 {
  color: var(--a-white) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.container.bg-dark.text-white h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.container.bg-dark.text-white ul { list-style: none; padding-left: 0; margin: 0; }
.container.bg-dark.text-white ul li { margin-bottom: 9px; }
.container.bg-dark.text-white ul li a {
  color: var(--a-text) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, padding-left 0.2s ease, text-shadow 0.2s ease;
}
.container.bg-dark.text-white ul li a::before {
  content: "\203A";
  color: var(--neon1);
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.2s ease;
}
.container.bg-dark.text-white ul li a:hover {
  color: #fff !important;
  padding-left: 5px;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.45);
}
.container.bg-dark.text-white ul li a:hover::before { color: var(--neon3); }

/* =========================================================
   Notes library — theme old note pages (Notes/*.html) safely
   ========================================================= */
h1, h2, h6 { color: var(--a-white); }

/* Light containers -> glass */
.well, .jumbotron, .bg-light, .bg-white {
  background: var(--glass) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 12px;
}

/* Tables: transparent cells, light text, subtle borders */
.table {
  color: var(--a-text) !important;
  --bs-table-color: var(--a-text);
  --bs-table-bg: transparent;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--a-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.table-dark > *, .table-dark td, .table-dark th, thead.table-dark > tr > * {
  background-color: rgba(34, 211, 238, 0.09) !important;
  color: var(--a-white) !important;
}
table { color: var(--a-text); }

/* Selects / dropdowns */
select, .form-select {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid var(--glass-brd) !important;
}
select option { background: #0b1226; color: #fff; }

/* Code / preformatted */
code, kbd, samp {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffd479 !important;
  padding: 1px 6px;
  border-radius: 5px;
}
pre {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--glass-brd);
  border-radius: 8px;
  padding: 12px;
}

/* Misc text helpers on note pages */
.lead, .myfont, blockquote { color: var(--a-text) !important; }
blockquote { border-left: 3px solid var(--neon2); padding-left: 14px; }
hr { border-color: rgba(255, 255, 255, 0.14) !important; }
.img_clip img, .note-img { border-radius: 12px; }

/* Bootstrap list-groups (note pages use white .list-group-item everywhere) */
.list-group, .list-group-item {
  background: transparent !important;
  color: var(--a-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.list-group-item .fw-bold, .list-group-item strong { color: var(--a-white) !important; }
.list-group-numbered > .list-group-item::before { color: var(--neon1) !important; }
.list-group-item-action:hover { background: rgba(255, 255, 255, 0.06) !important; }

/* CSS-only animated aurora background for pages WITHOUT motion.js
   (note pages, etc.). Pages with motion.js inject .fx-aurora, so they're excluded. */
body:not(:has(.fx-aurora))::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 8%, rgba(34, 211, 238, 0.22), transparent 68%),
    radial-gradient(36vw 36vw at 88% 20%, rgba(168, 85, 247, 0.22), transparent 68%),
    radial-gradient(42vw 42vw at 50% 102%, rgba(236, 72, 153, 0.16), transparent 68%);
  animation: auroraFloat 22s ease-in-out infinite alternate;
}
@keyframes auroraFloat {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* Note-page content polish */
.well, .card, blockquote { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }

/* =========================================================
   Note-page beautification — Notes/*.html
   (identified as pages WITHOUT the #header sidebar)
   ========================================================= */

/* Centered, readable content column */
body:not(:has(#header)) > main,
body:not(:has(#header)) main.container,
body:not(:has(#header)) > .container {
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 64px;
}
/* Nested Bootstrap containers inside main must fill it (not re-apply their own
   narrow tier width + auto-centering) so the banner and content columns align. */
body:not(:has(#header)) main .container,
body:not(:has(#header)) main .container-fluid {
  max-width: 100% !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Banner -> hero image */
.img_clip { margin: 6px 0 22px; }
.img_clip img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.5);
}

/* Bootstrap nav-tabs -> glassy neon tabs */
.nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  gap: 6px;
  flex-wrap: wrap;
}
.nav-tabs .nav-item .nav-link,
.nav-tabs > li > .nav-link,
.nav-tabs > .nav-link {
  color: var(--a-dim) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 500;
  transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !important;
}
.nav-tabs .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(168, 85, 247, 0.22)) !important;
  border-color: rgba(34, 211, 238, 0.4) !important;
  box-shadow: 0 -3px 18px rgba(34, 211, 238, 0.25);
}
.nav-pills .nav-link.active { background: var(--grad) !important; color: #fff !important; }

/* Tab content -> glass sheet */
.tab-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-brd);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 24px 26px;
}
.tab-content .container { padding-left: 0; padding-right: 0; }

/* Note typography */
body:not(:has(#header)) h2 {
  color: var(--a-white) !important;
  font-weight: 700;
  margin: 6px 0 16px;
}
body:not(:has(#header)) h3 { color: var(--a-white) !important; }
body:not(:has(#header)) h4,
body:not(:has(#header)) h5 {
  color: var(--neon1) !important;
  font-weight: 600;
  margin-top: 20px;
  padding-left: 12px;
  border-left: 3px solid var(--neon2);
}
body:not(:has(#header)) p { line-height: 1.72; color: var(--a-text) !important; }
body:not(:has(#header)) ul { padding-left: 22px; }
body:not(:has(#header)) ul li { margin-bottom: 8px; line-height: 1.65; }
body:not(:has(#header)) ul li::marker { color: var(--neon1); }
body:not(:has(#header)) .well {
  background: var(--glass) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 14px;
  padding: 18px 20px;
}

/* FIX: old note pages use Bootstrap-3 `.img-responsive` + hardcoded width/height.
   On Bootstrap 5 that class does nothing, so images render at full size, overflow
   their column and overlap the adjacent text. Constrain + present as figures. */
.img-responsive {
  max-width: 100% !important;
  height: auto !important;
}
body:not(:has(#header)) img.img-responsive {
  display: block;
  margin: 12px auto;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
/* keep image columns from letting content spill out */
body:not(:has(#header)) [class*="col-"] { min-width: 0; }
body:not(:has(#header)) .row { overflow-wrap: anywhere; }

/* Universal safety: no image on a note page may overflow its container
   (many old pages set hardcoded width="…" attributes). */
body:not(:has(#header)) img { max-width: 100% !important; height: auto; }
/* wide tables scroll instead of overflowing the page */
body:not(:has(#header)) .table-responsive { overflow-x: auto; }

/* Ancient FrontPage/Word note pages hardcode white backgrounds via bgcolor="#FFF"
   and use layout <table>/<font> — neutralize so the dark theme shows through. */
body:not(:has(#header)) [bgcolor] { background-color: transparent !important; }
body:not(:has(#header)) table,
body:not(:has(#header)) tr,
body:not(:has(#header)) td,
body:not(:has(#header)) th,
body:not(:has(#header)) .notes,
body:not(:has(#header)) .tablack {
  background-color: transparent !important;
  color: var(--a-text) !important;
}
body:not(:has(#header)) font[color] { color: var(--a-text) !important; }
body:not(:has(#header)) b,
body:not(:has(#header)) font b { color: var(--a-white) !important; }

/* =========================================================
   Audit fixes — eliminate remaining light-background components
   so the theme's light text is never stranded on a light surface.
   ========================================================= */

/* Breadcrumbs band (inner-page, portfolio-details) was #f9f9f9 */
.breadcrumbs { background: var(--glass) !important; border-bottom: 1px solid var(--glass-brd) !important; }
.breadcrumbs h2 { color: var(--a-white) !important; }
.breadcrumbs ol, .breadcrumbs ol li { color: var(--a-text) !important; }
.breadcrumbs ol a, .breadcrumbs ol li a { color: var(--neon4) !important; }

/* Form labels + controls (dilution's invisible labels, tools/note inputs) */
label, .col-form-label, .form-label { color: var(--a-text) !important; }
.form-control, .form-select, textarea.form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid var(--glass-brd) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--a-dim) !important; }
.form-control:focus, .form-select:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--neon1) !important;
  box-shadow: 0 0 0 0.18rem rgba(34, 211, 238, 0.2) !important;
  color: #fff !important;
}

/* Bootstrap alerts (tools QC result boxes) -> dark glass + colored accent */
.alert {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-brd) !important;
  color: var(--a-white) !important;
}
.alert-info { border-left: 4px solid var(--neon1) !important; }
.alert-warning { border-left: 4px solid #ffb020 !important; }
.alert-success { border-left: 4px solid #34d399 !important; }
.alert-danger, .alert-error { border-left: 4px solid #ff5470 !important; }

/* Light utility surfaces (dilution jumbotron, .transparent wrapper, white .container) */
.jumbotron {
  background: var(--glass) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 16px;
}
.transparent { background: transparent !important; }

/* Word-export note pages: <span class="sN"> hardcoded color:black -> invisible */
body:not(:has(#header)) span { color: inherit !important; }
body:not(:has(#header)) [style*="color: black"],
body:not(:has(#header)) [style*="color:black"],
body:not(:has(#header)) [style*="color:#000"] { color: var(--a-text) !important; }

/* Dark scrollbar to match the theme (style.css shipped a light one) */
::-webkit-scrollbar-thumb { background: #26405a !important; }
::-webkit-scrollbar-thumb:hover { background: var(--neon1) !important; }
::-webkit-scrollbar-track { background: #0b1220 !important; }

/* =========================================================
   Note beauty v2 — the 62 old FrontPage "MICROBIOLOGY NOTES"
   pages (.tablack wrapper + .notes table + <font size=7> masthead)
   become a centered glass sheet with a neon masthead.
   ========================================================= */
body:not(:has(#header)) .tablack {
  max-width: 940px !important;
  width: 92% !important;
  margin: 26px auto 60px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
body:not(:has(#header)) .tablack > tbody > tr > td { padding: 10px 26px 24px !important; }
body:not(:has(#header)) .notes td { padding: 2px 4px; line-height: 1.72; }

/* Masthead "MICROBIOLOGY NOTES" (<font size=7><b>) -> neon gradient title */
body:not(:has(#header)) font[size="7"],
body:not(:has(#header)) font[size="7"] b,
body:not(:has(#header)) font[size="6"],
body:not(:has(#header)) font[size="6"] b {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px;
}

/* Banner image (yati.jpg) rounded + framed */
body:not(:has(#header)) img[src*="yati"] {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  margin: 4px 0 8px;
}

/* Section headings inside notes -> accent bar */
body:not(:has(#header)) h2 {
  border-left: 4px solid var(--neon2);
  padding-left: 14px;
  margin: 26px 0 14px !important;
}
body:not(:has(#header)) h3 {
  border-left: 3px solid var(--neon1);
  padding-left: 12px;
}

/* Select-driven note pages (hsc, Virology, tit-bits): tidy intro card,
   remove dead space, and give the sticky dropdown a solid bar. */
body:not(:has(#header)) .well br { display: none; }
body:not(:has(#header)) .well p { margin: 0 !important; }
body:not(:has(#header)) .well {
  padding: 20px 24px !important;
  text-align: center;
}
body:not(:has(#header)) .container.sticky-top,
body:not(:has(#header)) .sticky-top {
  background: rgba(11, 18, 38, 0.97) !important;
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 10px 12px !important;
  margin-top: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1020;
}
/* the empty #intro placeholder before a topic is chosen shouldn't reserve space */
body:not(:has(#header)) #intro:empty { display: none; }
/* content sections sit closer to the selector */
body:not(:has(#header)) .container.sticky-top + .container,
body:not(:has(#header)) .sticky-top + .container { margin-top: 14px; }

/* Card header (tit-bits "General", FAQ cards) -> neon-tinted */
body:not(:has(#header)) .card-header {
  background: rgba(34, 211, 238, 0.12) !important;
  color: var(--a-white) !important;
  border-bottom: 1px solid var(--glass-brd) !important;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
}
/* input-group (select + SHOW button) alignment on tit-bits */
body:not(:has(#header)) .input-group > .btn { border-radius: 0 10px 10px 0; }

/* =========================================================
   MOBILE (<= 991px) — visibility safety net + design polish
   -----------------------------------------------------------
   On phones the scroll-reveal libraries (AOS + GSAP) were leaving
   whole sections (Expertise, GitHub projects) stuck at opacity:0.
   Here we FORCE every reveal target visible so content can never be
   hidden by JS, then tidy spacing/typography for small screens.
   ========================================================= */
@media (max-width: 991px) {
  /* Never let a scroll-animation hide content on mobile. !important beats
     both the aos.css `[data-aos]{opacity:0}` rule and any inline style GSAP
     might set, so these elements are guaranteed visible. */
  [data-aos],
  .icon-box,
  .project-card,
  .resume-item,
  .about .content,
  .php-email-form,
  .contact .info,
  .section-title {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* kill any accidental horizontal scroll from fixed-width embeds */
  html, body { overflow-x: hidden; }
  #main { overflow-x: hidden; }

  /* ---- section rhythm ---- */
  section { padding: 44px 0 !important; }
  .section-title { margin-bottom: 22px; padding-bottom: 6px; }
  .section-title h2 { font-size: 27px !important; }
  .section-title p { font-size: 14.5px; line-height: 1.65; }

  /* ---- hero ---- */
  #hero { height: 100vh; min-height: 460px; }
  #hero h1 { font-size: 40px; }
  #hero p { font-size: 20px; }

  /* ---- expertise / services cards ---- */
  .services .icon-box { padding: 22px 20px !important; margin-bottom: 16px; }
  .services .title, .services .description { margin-left: 76px; }
  .services .title { font-size: 16.5px; }
  .services .description { font-size: 14px; line-height: 1.6; }

  /* ---- github project grid ---- */
  .projects-wrap { margin-top: 26px; }
  .projects-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ---- contact: stop the Google map iframe (width=400) overflowing ---- */
  .contact iframe { width: 100% !important; max-width: 100%; height: 260px; }
  .contact .info, .contact .php-email-form { padding: 22px !important; }
  .contact .php-email-form { margin-top: 22px; }

  /* ---- floating chat orb: smaller, out of the way of content ---- */
  #openChatButton img { width: 52px !important; height: 52px !important; }
}

@media (max-width: 575px) {
  section { padding: 36px 0 !important; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
  .section-title h2 { font-size: 24px !important; }
  #hero h1 { font-size: 33px; }
  #hero p { font-size: 17px; }

  /* stack the expertise icon above its text for a cleaner narrow layout */
  .services .icon-box { text-align: left; }
  .services .icon { float: none; margin-bottom: 14px; }
  .services .title, .services .description { margin-left: 0; }

  .project-card { padding: 18px !important; }
  .project-title { font-size: 17px; }
}