[data-role="dock"] {
  position: fixed;
  z-index: 5;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(780px, calc(100% - 32px));
  background: var(--mount);
  padding: 7px;
  border: 1px solid var(--rule);
  box-shadow: 0 8px 28px #30232b16;
}
[data-role="dock"] ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; gap: 5px; }
[data-role="dock"] a { min-height: 60px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px; font-size: 1rem; font-weight: 750; text-decoration: none; color: var(--ink); }
[data-role="dock"] a:hover { background: var(--rose); }
[data-role="dock"] a[aria-current="page"] { background: var(--wine); color: var(--mount); }
[data-role="dock"] svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  [data-role="dock"] { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); padding: 5px; }
  [data-role="dock"] ul { gap: 2px; }
  [data-role="dock"] a { min-height: 72px; flex-direction: column; gap: 6px; padding: 7px 2px; font-size: 16px; }
}