/* Dittuu Frosted Glass navigation, v1.
   Only the header and its dropdown/mobile menus are restyled.
   Existing scripts, site layout and exact background images remain intact. */
:root {
  --nav-purple: #50345f;
  --nav-purple-soft: #755787;
  --nav-purple-hover: #9a3cae;
  --nav-mist: rgba(255, 255, 255, .76);
  --nav-outline: rgba(255, 255, 255, .68);
}
.site-header {
  background: var(--nav-mist);
  background-image: linear-gradient(135deg, rgba(255,255,255,.22), rgba(244,229,253,.08));
  color: var(--nav-purple);
  border-color: var(--nav-outline);
  box-shadow: 0 8px 26px rgba(35, 23, 46, .11), inset 0 1px 0 rgba(255,255,255,.40);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
.site-header .brand,
.site-header .brand:visited { color: #863d9c; }
.site-header .brand .accent { color: #bc69d1; }
.site-header .nav-control {
  color: var(--nav-purple);
  border-color: transparent;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.site-header .nav-control:hover,
.site-header .nav-control[aria-expanded="true"] {
  background: rgba(170, 103, 191, .11);
  border-color: rgba(138, 81, 163, .13);
  color: var(--nav-purple-hover);
}
.nav-chevron,
.nav-external-arrow {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}
.site-header .nav-chevron,
.mobile-section-heading .nav-chevron {
  width: 13px;
  height: 13px;
  opacity: .85;
  transition: transform .16s ease;
}
.site-header .nav-control[aria-expanded="true"] .nav-chevron,
.mobile-section-heading[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.site-header .invite-button {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(94, 57, 113, .21);
  color: #735d7d;
  opacity: .74;
  cursor: not-allowed;
  box-shadow: none;
}
.site-header .invite-button small,
.mobile-invite small {
  background: rgba(145, 85, 167, .14);
  color: #764c89;
}
.site-header .dashboard-button {
  color: #41254e;
  background: #d9a9ed;
  border-color: rgba(148, 91, 168, .12);
  gap: 8px;
  box-shadow: 0 2px 9px rgba(120, 74, 142, .11);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.site-header .dashboard-button:hover {
  color: #351c40;
  background: #cb97e3;
  box-shadow: 0 3px 12px rgba(120, 74, 142, .17);
}
.site-header .mobile-toggle {
  color: var(--nav-purple);
  background: rgba(255, 255, 255, .32);
  border-color: rgba(105, 64, 131, .22);
}
.site-header .hamburger span { background: #704883; }
.site-header :is(a,button):focus-visible,
.mobile-menu :is(a,button,input,summary):focus-visible {
  outline: 2px solid #9f4dc3;
  outline-offset: 2px;
}
/* Desktop menu: soft white glass to match the header. */
.desktop-popover {
  color: var(--nav-purple);
  background: rgba(253, 249, 255, .93);
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 22px 54px rgba(41, 22, 54, .18);
  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
}
.desktop-panel { scrollbar-color: #ba9ccc #f0e8f3; }
.desktop-popover .panel-kicker,
.desktop-popover .menu-group h2 { color: #835392; }
.desktop-popover .menu-item:hover,
.desktop-popover .command-entry:hover { background: rgba(148, 89, 172, .10); }
.desktop-popover .menu-item strong,
.desktop-popover .command-entry code,
.desktop-popover .support-card h2 { color: #4b2f5c; }
.desktop-popover .menu-item span,
.desktop-popover .command-entry span,
.desktop-popover .menu-help,
.desktop-popover .support-card p { color: #6d5979; }
.desktop-popover .menu-item .soon,
.desktop-popover .menu-help a,
.desktop-popover .support-card a { color: #9541a9; }
.desktop-popover .command-search {
  background: rgba(255, 255, 255, .73);
  color: #493353;
  border-color: rgba(128, 78, 146, .25);
}
.desktop-popover .command-search::placeholder { color: #89768e; }
.desktop-popover .support-card {
  background: rgba(235, 218, 245, .30);
  border-color: rgba(137, 86, 161, .17);
}
.desktop-popover .empty-search { color: #795d88; }
/* Mobile sheet follows the same palette with slightly more opacity. */
@media (max-width: 780px) {
  .site-header {
    background: rgba(255, 255, 255, .83);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
  }
  .mobile-menu {
    color: var(--nav-purple);
    background: rgba(251, 246, 253, .96);
    border-color: rgba(255,255,255,.72);
    box-shadow: 0 22px 55px rgba(45, 22, 55, .21);
  }
  .mobile-invite {
    background: rgba(217, 190, 230, .22);
    border-color: rgba(123, 78, 150, .20);
    color: #7c6988;
  }
  .mobile-section { border-top-color: rgba(126, 75, 145, .18); }
  .mobile-section-heading { color: #50345f; }
  .mobile-section-heading .nav-chevron { color: #805393; }
  .mobile-content .panel-kicker,
  .mobile-content .menu-group h2 { color: #845492; }
  .mobile-content .menu-item strong,
  .mobile-content .command-entry code,
  .mobile-content .support-card h2 { color: #4c315b; }
  .mobile-content .menu-item span,
  .mobile-content .command-entry span,
  .mobile-content .menu-help,
  .mobile-content .support-card p { color: #715e7b; }
  .mobile-content .menu-item .soon,
  .mobile-content .menu-help a,
  .mobile-content .support-card a { color: #9a43aa; }
  .mobile-content .menu-item:hover,
  .mobile-content .command-entry:hover { background: rgba(150,92,178,.08); }
  .mobile-content .command-search {
    color: #493353;
    background: rgba(255,255,255,.90);
    border-color: rgba(131,82,151,.22);
  }
  .mobile-content .command-search::placeholder { color: #89758f; }
  .mobile-content .support-card {
    border-color: rgba(145,93,169,.20);
    background: rgba(230,204,242,.22);
  }
  .mobile-content .empty-search { color: #805f8c; }
  .mobile-feature-group { border-color: rgba(128,76,152,.20); }
  .mobile-feature-group summary { color: #654377; }
  .mobile-feature-group[open] summary {
    background: rgba(169,108,194,.10);
    border-bottom-color: rgba(128,76,152,.18);
  }
  .mobile-feature-group summary::after { content: ''; width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); margin-right: 4px; margin-top: -4px; }
  .mobile-feature-group[open] summary::after { transform: rotate(225deg);margin-top:3px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-control,
  .site-header .dashboard-button,
  .nav-chevron { transition: none; }
}