/* Mobile FX transparency + dark AI readability, <=900px only. */
@media (max-width:900px) {
  html body #ulingMobileMeshV1 {
    opacity:1 !important;
    filter:saturate(1.55) brightness(1.32) contrast(1.10) !important;
  }
  html body #ulingMobileTouchV1 {
    opacity:.78 !important;
    mix-blend-mode:screen !important;
  }
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active {
    background:linear-gradient(160deg,rgba(7,18,40,.055),rgba(6,13,31,.018)) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .menu-card,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .project-card,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .award-card,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .paper-card,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .ability-card,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .card,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .stat,
  html[data-theme="dark"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .ulh-card {
    background:linear-gradient(145deg,rgba(7,18,40,.055),rgba(5,12,29,.018)) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"] body #guidePanel.ai-panel {
    color:#f7faff !important;
    background:linear-gradient(155deg,rgba(7,17,39,.96),rgba(5,10,25,.94)) !important;
    border-color:rgba(132,205,244,.36) !important;
    backdrop-filter:blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
    box-shadow:0 24px 64px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  html[data-theme="dark"] body #guidePanel .ai-head {
    padding:14px 16px !important;
    background:linear-gradient(135deg,rgba(72,185,225,.15),rgba(129,91,214,.11)) !important;
    border-bottom-color:rgba(132,205,244,.25) !important;
  }
  html[data-theme="dark"] body #guidePanel .ai-head strong {
    color:#fff !important;font-size:1rem !important;line-height:1.3 !important;font-weight:750 !important;
  }
  html[data-theme="dark"] body #guidePanel .ai-head span {
    color:#d4def1 !important;font-size:.8rem !important;line-height:1.45 !important;font-weight:500 !important;
  }
  html[data-theme="dark"] body #guidePanel .close {
    color:#fff !important;background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.20) !important;
  }
  html[data-theme="dark"] body #guidePanel .ai-body {padding:14px !important;gap:11px !important;}
  html[data-theme="dark"] body #guidePanel .chat {gap:9px !important;}
  html[data-theme="dark"] body #guidePanel .msg,
  html[data-theme="dark"] body #guidePanel .msg.bot,
  html[data-theme="dark"] body #guidePanel .msg.user {
    color:#f5f8ff !important;font-size:.9rem !important;line-height:1.65 !important;font-weight:480 !important;
    background:rgba(71,142,187,.16) !important;border-color:rgba(126,211,242,.25) !important;
  }
  html[data-theme="dark"] body #guidePanel .msg.user {
    background:rgba(125,91,200,.18) !important;border-color:rgba(171,139,239,.28) !important;
  }
  html[data-theme="dark"] body #guidePanel .chat-input {
    min-height:44px !important;padding:11px 13px !important;color:#fff !important;font-size:1rem !important;line-height:1.35 !important;
    background:rgba(255,255,255,.09) !important;border-color:rgba(142,197,238,.30) !important;
  }
  html[data-theme="dark"] body #guidePanel .chat-input::placeholder {color:#c2cde2 !important;opacity:1 !important;}
  html[data-theme="dark"] body #guidePanel .chat-status {color:#c4d1e8 !important;font-size:.78rem !important;line-height:1.4 !important;}
  html[data-theme="dark"] body #guidePanel .chat-link {
    color:#e7efff !important;font-size:.82rem !important;font-weight:600 !important;background:rgba(255,255,255,.08) !important;border-color:rgba(140,198,238,.28) !important;
  }
  html[data-theme="dark"] body #guidePanel .mini-btn {
    color:#fff !important;min-height:42px !important;font-size:.92rem !important;font-weight:750 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.44) !important;
    background:rgba(30,71,128,.86) !important;border-color:rgba(155,211,249,.50) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 14px rgba(3,18,54,.24) !important;
  }
  html[data-theme="dark"] body #guidePanel .mini-btn.primary,
  html[data-theme="dark"] body #guidePanel #guideSend {
    color:#fff !important;min-width:68px !important;min-height:42px !important;
    padding:0 13px !important;font-size:.92rem !important;font-weight:800 !important;line-height:1.2 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.48) !important;
    background:linear-gradient(118deg,#174f9f,#613aab) !important;border-color:rgba(187,215,255,.62) !important;
  }
  html[data-theme="dark"] body #mobileGuideBtn {
    color:#fff !important;font-size:.92rem !important;font-weight:800 !important;letter-spacing:0 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.48) !important;
    background:linear-gradient(132deg,#175ca9,#633daa) !important;border-color:rgba(190,220,255,.58) !important;
    box-shadow:0 10px 26px rgba(5,25,77,.38),inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  html[data-theme="light"] body {
    background:transparent !important;
  }
  html[data-theme="light"] body #bgCanvas,
  html[data-theme="light"] body .bg-canvas {
    opacity:0 !important;
  }
  html[data-theme="light"] body #ulingMobileTouchV1 {
    mix-blend-mode:normal !important;
    opacity:.78 !important;
  }

  html[data-theme="light"] body #ulingMobileMeshV1 {
    z-index:4 !important;
    filter:saturate(1.06) contrast(1.05) brightness(1.01) !important;
  }
  html[data-theme="light"] body #welcome ~ .deck {
    position:relative !important;
    z-index:5 !important;
    background:transparent !important;
    background-image:none !important;
  }
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap {
    background:transparent !important;
    background-image:none !important;
  }
  /* Mobile page changes must not animate background/filter/opacity: these cause dark flash frames. */
  html body #welcome ~ .deck .slides-wrap > section.slide,
  html body #welcome ~ .deck .slides-wrap > section.slide.active {
    transition:none !important;
    animation:none !important;
  }

  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active {
    background-color:transparent !important;
    background-image:linear-gradient(160deg,rgba(249,253,255,.045),rgba(225,239,255,.018)) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="1"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="2"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="3"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="4"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="5"].active > .slide-inner > .slide-head {
    background:linear-gradient(145deg,rgba(250,254,255,.46),rgba(225,240,255,.18)) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-color:rgba(31,100,190,.30) !important;
  }

  html[data-theme="light"] body .mobile-nav {
    background:rgba(236,247,255,.22) !important;
    background-image:linear-gradient(145deg,rgba(255,255,255,.10),rgba(179,222,255,.035)) !important;
    backdrop-filter:blur(8px) saturate(1.18) !important;
    -webkit-backdrop-filter:blur(8px) saturate(1.18) !important;
    border-color:rgba(42,108,190,.32) !important;
  }
  html[data-theme="light"] body .mobile-nav > .rail-btn:not(.mobile-guide-btn) {
    background:rgba(226,242,255,.18) !important;
    border-color:rgba(42,108,190,.22) !important;
    color:#173c78 !important;
  }
  html[data-theme="light"] body .mobile-nav > .rail-btn:not(.mobile-guide-btn).active {
    background:rgba(48,100,190,.78) !important;
    border-color:rgba(190,225,255,.72) !important;
    color:#fff !important;
  }
  /* Directory cards: remove the artificial white lower edge while preserving a quiet glass boundary. */
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="0"].active .menu-card {
    border-color:rgba(39,103,184,.26) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(37,101,186,.08) !important;
  }

  html[data-theme="light"] body #mobileGuideBtn.mobile-guide-btn {
    background:rgba(190,224,255,.42) !important;
    background-image:linear-gradient(135deg,rgba(36,117,220,.28),rgba(128,77,218,.22)) !important;
    border-color:rgba(45,105,190,.42) !important;
    color:#123a79 !important;
    box-shadow:0 10px 26px rgba(31,90,174,.20),inset 0 1px 0 rgba(255,255,255,.48) !important;
  }
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .menu-card,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .project-card,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .award-card,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .paper-card,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .ability-card,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .card,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .stat,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index].active .ulh-card {
    background:linear-gradient(145deg,rgba(250,254,255,.025),rgba(205,232,255,.008)) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-color:rgba(31,100,190,.38) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.50),0 8px 22px rgba(37,101,186,.14) !important;
  }

  /* Must follow the generic card rule above: only directory-card lower edges are softened. */
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="0"].active .menu-grid > .menu-card {
    border-color:rgba(39,103,184,.26) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(37,101,186,.08) !important;
  }

  /* Directory metadata belongs to the card, not a second white glass slab. */
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="0"].active .menu-grid > .menu-card > .menu-card-meta {
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-top:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:5px 0 0 !important;
  }
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="0"].active .menu-grid > .menu-card > .menu-card-meta span {
    color:#163968 !important;
  }
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="0"].active .menu-grid > .menu-card > .menu-card-meta b {
    color:#285da8 !important;
  }

  /* Final mobile all-pages top-card opacity: light mode uses the same alpha as dark mode. */
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="0"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="1"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="2"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="3"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="4"].active > .slide-inner > .slide-head,
  html[data-theme="light"] body #welcome ~ .deck .slides-wrap > section.slide[data-index="5"].active > .slide-inner > .slide-head {
    background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.024)) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-color:rgba(168,196,255,.245647) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(4,10,28,.08) !important;
  }
}
