.tools-menu {
  --tools-panel-bg: #25241f;
  --tools-panel-border: #655a36;
  --tools-panel-fg: #f8f9fa;
  --tools-panel-muted: #c8c6bd;
  --tools-icon-bg: #35332b;
  --tools-item-hover: #343127;
  --tools-accent: #ffd700;
  position: relative;
  flex: 0 0 auto;
  color: rgba(248, 249, 250, .82);
}

#site-nav.on-pearl .tools-menu,
body[data-ui-theme='light'] .tools-menu {
  --tools-panel-bg: #f8f9fa;
  --tools-panel-border: #d8d6cf;
  --tools-panel-fg: #1a1a1a;
  --tools-panel-muted: #535047;
  --tools-icon-bg: #eae8e1;
  --tools-item-hover: #eeece5;
  --tools-accent: #925518;
  color: #1a1a1a;
}

.tools-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  touch-action: manipulation;
}
.tools-menu__trigger::-webkit-details-marker { display: none; }
.tools-menu__trigger svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 180ms cubic-bezier(.25, 1, .5, 1); }
.tools-menu[open] > .tools-menu__trigger svg { transform: rotate(180deg); }
.tools-menu__trigger:hover,
.tools-menu[open] > .tools-menu__trigger { color: var(--tools-accent); }
.tools-menu__trigger:active { transform: scale(.98); }
.tools-menu__trigger:focus-visible,
.tools-menu__panel a:focus-visible { outline: 3px solid var(--tools-accent); outline-offset: 3px; }

.tools-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(560px, calc(100vw - 32px)); /* theo viewport — 100% tính theo details hẹp ~80px gây vỡ layout */
  padding: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--tools-panel-border);
  border-radius: 12px;
  background: var(--tools-panel-bg);
  color: var(--tools-panel-fg);
  white-space: normal;
  animation: tools-menu-enter 200ms cubic-bezier(.25, 1, .5, 1) both;
}
.tools-menu__panel a,
.audit-nav-links .tools-menu__panel a {
  color: var(--tools-panel-fg);
  text-decoration: none;
}
.tools-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  transition: background-color 180ms cubic-bezier(.25, 1, .5, 1), color 180ms cubic-bezier(.25, 1, .5, 1);
}
.tools-menu__item:hover,
.audit-nav-links .tools-menu__panel .tools-menu__item:hover,
.tools-menu__item[aria-current] { background: var(--tools-item-hover); color: var(--tools-accent); }
.tools-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  background: var(--tools-icon-bg);
  color: var(--tools-panel-muted);
}
.tools-menu__icon svg { width: 22px; height: 22px; }
.tools-menu__all {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--tools-panel-border);
  color: var(--tools-panel-muted) !important;
  font-size: 13px;
  font-weight: 600;
  transition: color 180ms cubic-bezier(.25, 1, .5, 1);
}
.tools-menu__all:hover,
.audit-nav-links .tools-menu__panel .tools-menu__all:hover { color: var(--tools-accent) !important; }

@keyframes tools-menu-enter {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (min-width: 1024px) {
  #site-nav > nav { overflow: visible; }
}

@media (max-width: 639px) {
  #site-nav #lang-toggle,
  #site-nav #theme-toggle { display: none; }
}

.tools-menu--drawer { width: 100%; }
.tools-menu--drawer > .tools-menu__trigger { display: flex; width: 100%; padding: 10px 8px; }
.tools-menu--drawer .tools-menu__panel {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 4px 0 8px 16px;
  transform: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  animation: none;
}
.tools-menu--drawer .tools-menu__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
}
.tools-menu--drawer .tools-menu__panel a:hover,
.tools-menu--drawer .tools-menu__panel a[aria-current] { color: var(--tools-accent); background: var(--tools-item-hover); }

@media (prefers-reduced-motion: reduce) {
  .tools-menu__trigger svg,
  .tools-menu__item,
  .tools-menu__all { transition: none; }
  .tools-menu__panel { animation: none; }
}