/* Own the GNB palette here; host pages do not all define these tokens. */
.nyanko-gnb {
  --line: #293645;
  --text: #f4f7fb;
  --muted: #94a2b6;
  --accent: #ff5b2d;
  --accent-text: #ffad3d;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.nyanko-gnb,
.nyanko-gnb * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
}

/* Original unit196 toolbar/search dimensions and colors. */
    .db-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 12px;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(14, 19, 26, .92);
      box-shadow: var(--shadow);
    }

    .db-brand {
      flex: 0 0 auto;
      text-decoration: none;
      cursor: pointer;
      color: var(--text);
      font-size: 25px;
      font-weight: 950;
      letter-spacing: -.05em;
    }

    .db-brand span {
      color: var(--accent-text);
    }

    .unit-search {
      display: grid;
      grid-template-columns: auto minmax(150px, 220px) auto;
      align-items: center;
      gap: 9px;
    }

    .unit-search-field {
      position: relative;
      min-width: 0;
    }

    .unit-search-field > input {
      width: 100%;
      border-color: #4d5a69;
      background: #171d25;
    }

    .unit-search .unit-search-field > input:focus {
      border-color: #788697;
      box-shadow: 0 0 0 2px rgba(145,158,173,.18);
    }

    .unit-search button[type="submit"] {
      border: 1px solid #596777;
      color: #f4f7fb;
      background: #303a47;
    }

    .unit-search button[type="submit"]:hover {
      border-color: #718094;
      background: #3a4655;
    }

    .unit-search-results {
      position: absolute;
      top: calc(100% + 7px);
      left: 0;
      z-index: 120;
      width: min(380px, calc(100vw - 44px));
      max-height: 360px;
      padding: 6px;
      overflow-y: auto;
      border: 1px solid #46566a;
      border-radius: 12px;
      background: #080d14;
      box-shadow: 0 16px 42px rgba(0,0,0,.52);
      scrollbar-width: thin;
      touch-action: pan-y;
    }

    .unit-search-results[hidden] {
      display: none;
    }

    .unit-search .unit-search-result {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 48px;
      padding: 5px 9px;
      border: 0;
      border-bottom: 1px solid #465363;
      border-radius: 0;
      color: #f4f7fb;
      background: #27313e;
      text-align: left;
      cursor: pointer;
      touch-action: pan-y;
    }

    .unit-search .unit-search-result:last-child {
      border-bottom: 0;
    }

    .unit-search .unit-search-result:hover,
    .unit-search .unit-search-result[aria-selected="true"] {
      background: #354252;
    }

    .unit-search-result img,
    .unit-search-result-icon-empty {
      display: block;
      width: 54px;
      height: 40px;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .unit-search-result-icon-empty {
      border: 1px dashed #405066;
      border-radius: 7px;
    }

    .unit-search-result-name {
      min-width: 0;
      overflow: hidden;
      font-size: 13px;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .unit-search-result-copy {
      display: grid;
      min-width: 0;
      gap: 2px;
    }

    .unit-search-result-identity {
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .03em;
    }

    .unit-search-empty {
      padding: 13px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    @media (max-width: 660px) {
      .unit-search-results {
        width: min(360px, calc(100vw - 106px));
      }
    }

    .unit-search label {
      color: #dce3ed;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .unit-search input {
      min-width: 0;
      height: 38px;
      padding: 7px 11px;
      border: 1px solid #425267;
      border-radius: 9px;
      color: var(--text);
      background: #0c1118;
      outline: none;
      font-variant-numeric: tabular-nums;
    }

    .unit-search input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(255, 91, 45, .2);
    }

    .unit-search button {
      height: 38px;
      padding: 7px 15px;
      border: 0;
      border-radius: 9px;
      color: #fff;
      background: var(--accent);
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

@media (max-width: 660px) {
  .db-toolbar { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px 15px; }
  .unit-search { grid-template-columns: 72px minmax(0, 1fr) 58px; gap: 7px; }
  .unit-search button { padding-inline: 8px; }
}

/* Icon-first section menu. */
.nyanko-gnb .gnb-leading { display: flex; align-items: center; gap: 22px; }
.nyanko-gnb .gnb-menu { position: relative; display: flex; align-items: center; gap: 22px; }
.nyanko-gnb .gnb-menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  height: 76px;
  padding: 0 7px 5px;
  border: 0;
  border-radius: 0;
  color: #dce3ed;
  background: transparent;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  transition: color 180ms ease;
}
.nyanko-gnb .gnb-menu-link img {
  display: block; width: 48px; height: 48px; object-fit: contain;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.nyanko-gnb .gnb-menu-link.is-emphasized { color: var(--accent-text); }
.nyanko-gnb .gnb-menu-link.is-emphasized img { transform: translateY(-1px); }
.nyanko-gnb .gnb-menu-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.nyanko-gnb .gnb-menu-indicator {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--accent-text); border-radius: 2px; pointer-events: none;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), width 220ms ease, opacity 160ms ease;
}
.nyanko-gnb[data-gnb-settling] .gnb-menu-link,
.nyanko-gnb[data-gnb-settling] .gnb-menu-link img,
.nyanko-gnb[data-gnb-settling] .gnb-menu-indicator {
  transition: none;
}
@media (max-width: 820px) {
  .nyanko-gnb {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
  }
  .nyanko-gnb .gnb-leading { display: contents; }
  .nyanko-gnb .gnb-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .nyanko-gnb .gnb-search {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(110px, 220px) 58px;
    justify-self: end;
    width: min(100%, 288px);
  }
  .nyanko-gnb .gnb-search > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nyanko-gnb .gnb-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
  .nyanko-gnb .gnb-search-results {
    right: 0;
    left: auto;
  }
}

@media (max-width: 400px) {
  .nyanko-gnb .gnb-menu { gap: 6px; }
  .nyanko-gnb .gnb-menu-link { padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Override host pages' universal reduced-motion rules consistently. */
  .nyanko-gnb, .nyanko-gnb *,
  .nyanko-gnb *::before, .nyanko-gnb *::after {
    transition: none !important;
  }
}