.global-tool-nav[data-tool-mega-menu] {
  --header-ink: #17211b;
  --header-muted: #6d746e;
  --header-surface: #ebe7de;
  --header-active-ink: #fffdf8;
  --header-line: #d7d1c7;
  --header-accent: #f05a28;
  position: relative;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

nav.global-tool-nav[data-tool-mega-menu] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.documentation-theme .topbar,
.mocker-theme .topbar { position: relative; z-index: 20; }
.command-theme .topbar,
.command-theme .repo-topbar { z-index: 20; }
.tool-mega-backdrop { position: fixed; z-index: 15; inset: 0; background: rgba(2, 6, 23, .58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.tool-mega { position: relative; }
.tool-mega > summary { list-style: none; }
.tool-mega > summary::-webkit-details-marker { display: none; }
.tool-mega-trigger {
  min-width: 210px;
  height: 40px;
  padding: 0 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  color: var(--header-ink);
  border: 1px solid var(--header-line);
  border-radius: 11px;
  background: var(--header-surface);
  font: 750 11px/1.15 Inter, ui-sans-serif, sans-serif;
  cursor: pointer;
  user-select: none;
}
.tool-mega-trigger:hover,
.tool-mega[open] .tool-mega-trigger { border-color: var(--header-accent); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.tool-mega-grid { width: 19px; height: 19px; padding: 3px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border-radius: 6px; background: var(--header-ink); }
.tool-mega-grid i { border-radius: 1px; background: var(--header-active-ink); }
.tool-mega-grid i:first-child { background: var(--header-accent); }
.tool-mega-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-mega-label { padding-left: 9px; color: var(--header-muted); border-left: 1px solid var(--header-line); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.tool-mega-chevron { color: var(--header-muted); font-size: 15px; transition: transform .18s ease; }
.tool-mega[open] .tool-mega-chevron { transform: rotate(180deg); }

.tool-mega-panel {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 11px);
  left: 50%;
  width: min(880px, calc(100vw - 32px));
  overflow: hidden;
  color: #e8edf8;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: #111827;
  box-shadow: 0 28px 80px rgba(2, 6, 23, .42);
  transform: translateX(-50%);
  text-align: left;
}
.tool-mega-header { min-height: 112px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px) auto; align-items: center; gap: 20px; border-bottom: 1px solid rgba(148, 163, 184, .15); background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(34, 211, 238, .04)); }
.tool-mega-header > div { min-width: 0; display: grid; gap: 4px; }
.tool-mega-header p { margin: 0; color: #67e8f9; font: 800 8px/1 Inter, sans-serif; letter-spacing: .14em; }
.tool-mega-header strong { font-size: 17px; letter-spacing: -.02em; }
.tool-mega-header small { color: #94a3b8; font-size: 10px; line-height: 1.45; }
.tool-mega-search { height: 42px; padding: 0 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid rgba(148, 163, 184, .22); border-radius: 11px; background: rgba(255, 255, 255, .055); }
.tool-mega-search > span:first-child { color: #94a3b8; font-size: 18px; }
.tool-mega-search .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tool-mega-search input { width: 100%; min-width: 0; padding: 0; color: #f8fafc; border: 0; outline: 0; background: transparent; font: 600 11px/1 Inter, sans-serif; }
.tool-mega-search input::placeholder { color: #718096; }
.tool-mega-search kbd { padding: 4px 6px; color: #8492a8; border: 1px solid rgba(148, 163, 184, .2); border-radius: 5px; background: rgba(2, 6, 23, .22); font: 700 8px/1 Inter, sans-serif; }
.tool-mega-close { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: #94a3b8; border: 1px solid rgba(148, 163, 184, .2); border-radius: 9px; background: rgba(255, 255, 255, .035); font: 400 20px/1 sans-serif; cursor: pointer; }
.tool-mega-close:hover { color: #fff; border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08); transform: none !important; }

.tool-mega-groups { max-height: min(580px, calc(100vh - 250px)); padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; overflow: auto; overscroll-behavior: contain; }
.tool-mega-group { min-width: 0; }
.tool-mega-group h2 { margin: 0 0 8px 2px; color: #7f8da3; font: 800 9px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.tool-mega-group > div { display: grid; gap: 7px; }
.global-tool-nav .tool-mega-card { min-width: 0; min-height: 67px; padding: 9px 11px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; color: #dbe4f3; border: 1px solid rgba(148, 163, 184, .12); border-radius: 11px; background: rgba(255, 255, 255, .025); box-shadow: none; text-decoration: none; }
.global-tool-nav .tool-mega-card:hover { color: #fff; border-color: rgba(34, 211, 238, .28); background: rgba(255, 255, 255, .06); transform: translateY(-1px); }
.global-tool-nav .tool-mega-card.active { color: #fff; border-color: rgba(139, 92, 246, .34); background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(34, 211, 238, .07)); }
.global-tool-nav .tool-mega-card::before { display: none; }
.tool-mega-mark { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: #334155; font: 800 10px/1 ui-monospace, monospace; }
.tool-mega-card.accent-pink .tool-mega-mark { background: #9d174d; }
.tool-mega-card.accent-orange .tool-mega-mark { background: #9a3412; }
.tool-mega-card.accent-cyan .tool-mega-mark { background: #155e75; }
.tool-mega-card.accent-green .tool-mega-mark { background: #166534; }
.tool-mega-card.accent-violet .tool-mega-mark { background: #5b21b6; }
.tool-mega-copy { min-width: 0; display: grid; gap: 4px; }
.tool-mega-copy strong { overflow: hidden; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tool-mega-copy small { overflow: hidden; color: #8492a8; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.tool-mega-card em { color: #67e8f9; font: 800 8px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.tool-mega-card b { color: #64748b; font-size: 13px; }
.tool-mega-empty { grid-column: 1 / -1; margin: 34px 0; color: #94a3b8; font-size: 11px; text-align: center; }
.tool-mega-footer { min-height: 52px; padding: 9px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(148, 163, 184, .15); background: rgba(2, 6, 23, .2); }
.global-tool-nav .tool-mega-footer a { padding: 5px; display: inline-flex; align-items: center; gap: 8px; color: #dbe4f3; border: 0; background: transparent; font-size: 10px; text-decoration: none; }
.global-tool-nav .tool-mega-footer a:hover { color: #67e8f9; background: transparent; }
.tool-mega-footer a span,
.tool-mega-footer a b { color: #67e8f9; }
.tool-mega-footer small { color: #64748b; font-size: 9px; }

html[data-theme="light"] .tool-mega-panel { color: #172033; border-color: rgba(71, 85, 105, .18); background: #fff; box-shadow: 0 28px 80px rgba(45, 59, 82, .22); }
html[data-theme="light"] .tool-mega-header { border-color: rgba(71, 85, 105, .14); background: linear-gradient(135deg, rgba(116, 81, 219, .08), rgba(8, 127, 154, .025)); }
html[data-theme="light"] .tool-mega-header small,
html[data-theme="light"] .tool-mega-copy small,
html[data-theme="light"] .tool-mega-group h2 { color: #68748a; }
html[data-theme="light"] .tool-mega-search { border-color: rgba(71, 85, 105, .18); background: #f5f7fb; }
html[data-theme="light"] .tool-mega-search input { color: #172033; }
html[data-theme="light"] .tool-mega-close { color: #68748a; border-color: rgba(71, 85, 105, .16); background: #f5f7fb; }
html[data-theme="light"] .global-tool-nav .tool-mega-card { color: #253047; border-color: rgba(71, 85, 105, .14); background: #f8fafc; }
html[data-theme="light"] .global-tool-nav .tool-mega-card:hover { color: #172033; border-color: rgba(8, 127, 154, .3); background: #f1f5f9; }
html[data-theme="light"] .global-tool-nav .tool-mega-card.active { color: #3f3182; border-color: rgba(116, 81, 219, .28); background: linear-gradient(135deg, rgba(116, 81, 219, .12), rgba(8, 127, 154, .05)); }
html[data-theme="light"] .tool-mega-footer { border-color: rgba(71, 85, 105, .14); background: #f8fafc; }
html[data-theme="light"] .global-tool-nav .tool-mega-footer a { color: #253047; }

@media (max-width: 900px) {
  .global-tool-nav[data-tool-mega-menu] { width: 100%; overflow: visible; }
  .tool-mega-trigger { width: 100%; }
  .tool-mega-panel { position: fixed; z-index: 1101; inset: 10px; width: auto; display: flex; flex-direction: column; transform: none; }
  .tool-mega-header { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .tool-mega-header > div { grid-column: 1 / -1; }
  .tool-mega-search { min-width: 0; }
  .tool-mega-groups { max-height: none; flex: 1; grid-template-columns: 1fr; }
  html.tool-mega-open { overflow: hidden; }
}

@media (max-width: 620px) {
  .tool-mega-panel { inset: 6px; border-radius: 14px; }
  .tool-mega-header { padding: 15px; }
  .tool-mega-header small { display: none; }
  .tool-mega-groups { padding: 13px; gap: 14px; }
  .tool-mega-footer { padding-inline: 13px; }
  .tool-mega-footer small { display: none; }
  .tool-mega-label { display: none; }
  .tool-mega-trigger { grid-template-columns: auto minmax(0, 1fr) auto; }
}


.global-auth-actions {
  --header-ink: #17211b;
  --header-muted: #6d746e;
  --header-surface: #ebe7de;
  --header-line: #d7d1c7;
  --header-accent: #f05a28;
  min-width: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.global-auth-actions form { height: 40px; margin: 0; }

.global-account-chip {
  height: 40px;
  min-width: 0;
  max-width: 190px;
  padding: 0 10px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--header-ink);
  border: 1px solid var(--header-line);
  border-radius: 11px;
  background: var(--header-surface);
}

.global-account-avatar,
.global-control-icon { flex: 0 0 auto; display: grid; place-items: center; }

.global-account-avatar {
  width: 28px;
  height: 28px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #0891b2);
  font: 800 9px/1 Inter, sans-serif;
  letter-spacing: .04em;
}

.global-account-label {
  min-width: 0;
  max-width: 132px;
  overflow: hidden;
  color: var(--header-muted);
  font: 700 10px/1 Inter, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-auth-actions .global-sign-in,
.global-auth-actions .global-sign-out,
.global-auth-actions button.theme-toggle {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--header-line);
  border-radius: 11px;
  color: var(--header-ink);
  background: var(--header-surface);
  font: 750 10px/1 Inter, ui-sans-serif, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.global-auth-actions .global-sign-in:hover,
.global-auth-actions .global-sign-out:hover,
.global-auth-actions button.theme-toggle:hover {
  color: var(--header-ink);
  border-color: var(--header-accent);
  transform: none !important;
}

.global-control-icon {
  width: 18px;
  height: 18px;
  color: var(--header-accent);
  font: 700 15px/1 sans-serif;
}

.global-auth-actions button.theme-toggle { min-width: 78px; }
.global-auth-actions .theme-toggle-icon { color: var(--header-accent); font-size: 15px; line-height: 1; }

body .global-auth-actions a.global-sign-in,
body .global-auth-actions button.global-sign-out,
body .global-auth-actions button.theme-toggle {
  height: 40px;
  min-height: 40px;
  color: var(--header-ink);
  border-color: var(--header-line);
  border-radius: 11px;
  background: var(--header-surface);
}

html[data-theme="light"] .global-account-chip,
html[data-theme="light"] .global-auth-actions .global-sign-in,
html[data-theme="light"] .global-auth-actions .global-sign-out,
html[data-theme="light"] .global-auth-actions button.theme-toggle {
  color: var(--header-ink);
  border-color: var(--header-line);
  background: rgba(255, 255, 255, .8);
}

.portal-page .global-tool-nav,
.portal-page .global-auth-actions {
  --header-ink: #173c2a;
  --header-muted: #68766d;
  --header-surface: #e8f0ea;
  --header-line: #d9e1db;
  --header-accent: #2e8b61;
}

.command-theme .global-tool-nav,
.command-theme .global-auth-actions,
.mocker-theme .global-tool-nav,
.mocker-theme .global-auth-actions {
  --header-accent: #d85124;
}

.command-theme .global-auth-actions button,
.command-theme .global-auth-actions .global-sign-in,
.mocker-theme .global-auth-actions button,
.mocker-theme .global-auth-actions .global-sign-in {
  color: var(--header-ink);
  background: transparent;
}

.topbar-end,
.repo-header-actions {
  min-width: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.command-theme .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
}

.command-theme .topbar .top-actions {
  justify-self: end;
}

.repo-detail-page .repo-topbar .global-tool-nav {
  justify-self: center;
}

@media (max-width: 1180px) {
  .global-account-chip { width: 40px; padding: 0; justify-content: center; }
  .global-account-label { display: none; }
  .global-auth-actions button.theme-toggle,
  .global-auth-actions .global-sign-in,
  .global-auth-actions .global-sign-out { width: 40px; min-width: 40px; padding: 0; }
  .global-auth-actions .theme-toggle-label,
  .global-auth-actions .global-control-label { display: none; }
}

@media (max-width: 900px) {
  .topbar:has(> .global-tool-nav) {
    display: grid;
    height: auto;
    min-height: 66px;
    padding-top: 9px;
    padding-bottom: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand auth"
      "nav nav";
    gap: 8px;
  }

  .topbar:has(> .global-tool-nav) > .brand,
  .topbar:has(> .global-tool-nav) > p,
  .topbar:has(> .global-tool-nav) > .back-link { grid-area: brand; }

  .topbar:has(> .global-tool-nav) > .global-tool-nav {
    grid-area: nav;
    width: 100%;
  }

  .topbar:has(> .global-tool-nav) > .topbar-end,
  .topbar:has(> .global-tool-nav) > .global-auth-actions,
  .topbar:has(> .global-tool-nav) > .top-actions,
  .topbar:has(> .global-tool-nav) > .repo-header-actions {
    grid-area: auth;
  }

  .topbar > .global-tool-nav { display: block; }

  .global-account-chip { width: 40px; padding: 0; justify-content: center; }
  .global-account-label { display: none; }
}

@media (max-width: 620px) {
  .command-theme .topbar > p {
    display: none;
  }

  .global-auth-actions { gap: 5px; }
  .global-auth-actions button.theme-toggle,
  .global-auth-actions .global-sign-in,
  .global-auth-actions .global-sign-out { width: 40px; min-width: 40px; padding: 0; }
  .global-auth-actions .theme-toggle-label,
  .global-auth-actions .global-control-label { display: none; }
}
