/* Refined glass theme for index pages only (loaded selectively in HTML). */
:root {
  --glass-surface: rgba(255, 255, 255, 0.68);
  --glass-surface-strong: rgba(255, 255, 255, 0.78);
  --glass-surface-soft: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.56);
  --glass-border-strong: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 10px 28px rgba(13, 16, 24, 0.12), 0 2px 10px rgba(13, 16, 24, 0.08);
  --glass-shadow-hover: 0 18px 40px rgba(13, 16, 24, 0.16), 0 4px 14px rgba(13, 16, 24, 0.1);
  --glass-blur: 7px;
  --glass-saturate: 130%;
}

body {
  background-image: radial-gradient(circle at 14% -8%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 40%), radial-gradient(circle at 88% -12%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 36%);
  background-attachment: fixed;
}

.main,
.hero,
.course-banner,
.footer {
  position: relative;
}

.prof-card,
.search-bar-inner,
.tool-card,
.placeholder-card,
.course-card,
.about-section,
.advisor-card,
.ai-drawer,
.inst-drawer,
.drawer,
.advisor-panel {
  background: var(--glass-surface);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.drawer,
.advisor-card,
.advisor-panel {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(255, 255, 255, 0.74);
}

.prof-card,
.search-bar-inner,
.tool-card,
.placeholder-card,
.course-card,
.about-section,
.advisor-card,
.ai-drawer,
.inst-drawer,
.drawer,
.advisor-panel,
.sticky-btn {
  border: 1px solid var(--glass-border);
}

.tool-card:hover,
.course-card:hover,
.prof-card:hover,
.ai-tool-rec:hover {
  box-shadow: var(--glass-shadow-hover);
}

.course-banner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(11, 12, 18, 0.16);
}

.course-pill {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.44);
}

.tool-footer,
.ai-tool-rec-footer,
.advisor-input-row,
.ai-followup-wrap {
  background: rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.45);
}

.cat-header:hover .cat-header-inner {
  filter: brightness(1.01);
}

.layer-body {
  background: var(--glass-surface-soft);
}

.drawer-overlay.open,
.advisor-overlay.open .advisor-backdrop {
  background: rgba(246, 249, 253, 0.32);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.search-bar-inner:focus-within,
.ai-followup-input:focus,
.advisor-input:focus {
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.26);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 2px;
}

.course-card.upcoming-course {
  border: 1.5px dashed #c8d0da !important;
  background: rgba(250, 251, 252, 0.82) !important;
  box-shadow: 0 6px 16px rgba(13, 16, 24, 0.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.course-card.upcoming-course:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(19, 35, 23, 0.14) !important;
}

/* Home-page AI100 upcoming hub card: no border at rest, hover ring on interaction. */
.course-card.upcoming-card {
  border-color: transparent !important;
}

.course-card.upcoming-card:hover {
  border-color: var(--card-hover-shadow) !important;
}

@media (max-width: 640px) {
  :root {
    --glass-blur: 4px;
  }

  .tool-card,
  .placeholder-card,
  .course-card,
  .about-section,
  .advisor-card,
  .advisor-panel,
  .ai-drawer,
  .inst-drawer,
  .drawer,
  .cat-accordion {
    box-shadow: 0 6px 20px rgba(13, 16, 24, 0.12), 0 2px 8px rgba(13, 16, 24, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}