/* ============ menu bar — glass strip ============ */
.menubar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--menubar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 10px;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
  background: rgba(18, 20, 26, .42);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mb-left, .mb-right {
  pointer-events: auto;
  display: flex; align-items: center; height: 100%;
}
.mb-item {
  display: flex; align-items: center; height: 24px;
  font-size: 13px; color: var(--frost);
  padding: 0 10px; border-radius: 6px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 5px rgba(2, 6, 18, .55);
}
.mb-item:hover { background: rgba(255,255,255,.09); }
.mb-item.open {
  background: rgba(120, 150, 200, .28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mb-appname { font-weight: 700; }
.mb-apple { padding: 0 11px; }
.mb-apple-ic { width: 16px; height: 16px; color: var(--frost); fill: currentColor; filter: drop-shadow(0 1px 3px rgba(2,6,18,.5)); }
.mb-ic {
  width: 15px; height: 15px; color: var(--frost); margin: 0 8px;
  filter: drop-shadow(0 1px 3px rgba(2,6,18,.5));
}
.mb-batt { width: 21px; }
.mb-clock {
  font-size: 13px; color: var(--frost); padding: 0 2px 0 6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 5px rgba(2, 6, 18, .55);
}
.mb-rec { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 69, 58, .16); color: #ff8a80; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mb-rec .mb-ic { color: #ff8a80; margin: 0; width: 12px; height: 12px; }
.mb-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse { 50% { opacity: .35; } }

#menus { position: fixed; top: 0; left: 0; width: 0; height: 0; }
.menu {
  position: fixed; top: calc(var(--menubar-h) + 2px); left: 10px;
  min-width: 230px; padding: 5px;
  border-radius: 13px;
  background: rgba(30, 34, 47, .72);
  -webkit-backdrop-filter: blur(36px) saturate(1.8);
  backdrop-filter: blur(36px) saturate(1.8);
  border: 1px solid var(--glass-line);
  box-shadow: 0 22px 50px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events: auto;
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  width: 100%; text-align: left;
  font-size: 13px; color: var(--frost);
  padding: 4px 11px; border-radius: 8px; text-decoration: none;
}
.menu-item:hover { background: var(--accent); color: #fff; }
.menu-item:hover .mi-kbd { color: rgba(255,255,255,.75); }
.menu-item.disabled { color: var(--frost-35); pointer-events: none; }
.mi-kbd { font-size: 12.5px; color: var(--frost-35); letter-spacing: .06em; }
.menu-sep { height: 1px; margin: 5px 10px; background: rgba(255,255,255,.12); }