.admin-navigation {
  --nav-ink: #101114;
  --nav-paper: #f4f1e9;
  --nav-signal: #d9ff43;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  align-self: start;
  width: 248px;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  color: var(--nav-paper);
  background: var(--nav-ink);
  border-right: 1px solid #303238;
  font-family: Inter, "Noto Sans JP", sans-serif;
}

.admin-navigation *, .admin-navigation *::before, .admin-navigation *::after { box-sizing: inherit; }
.admin-navigation__brand { display: flex; align-items: center; justify-content: space-between; }
.admin-navigation__logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; letter-spacing: .08em; }
.admin-navigation__logo strong { color: #fff; }
.admin-navigation__logo > span {
  display: grid; place-items: center; width: 38px; height: 38px; color: var(--nav-ink);
  background: var(--nav-signal); font: 900 13px/1 Inter, sans-serif; transform: skew(-7deg);
}
.admin-navigation__logo strong { font-size: 15px; }
.admin-navigation__toggle { display: none; color: inherit; background: transparent; border: 0; font: inherit; }
.admin-navigation__nav { margin-top: 48px; display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 4px; }
.admin-navigation .admin-navigation__nav a {
  position: relative; display: grid; grid-template-columns: 74px 1fr; align-items: baseline;
  min-height: 49px; padding: 14px 10px; color: #fff; text-decoration: none; border: 1px solid transparent;
}
.admin-navigation__nav a::before {
  content: ""; position: absolute; inset: 7px auto 7px -18px; width: 3px; background: transparent;
}
.admin-navigation .admin-navigation__nav a small { color: #d4d4d8; font: 700 9px/1 Inter, sans-serif; letter-spacing: .12em; }
.admin-navigation .admin-navigation__nav a span { width: auto; color: #fff; font-size: 14px; font-weight: 750; }
.admin-navigation__nav a:hover { color: #fff; border-color: #3d3f45; }
.admin-navigation__nav a[aria-current="page"] { color: var(--nav-paper); background: #202226; }
.admin-navigation__nav a[aria-current="page"]::before { background: var(--nav-signal); }
.admin-navigation__settings { margin-top: auto; padding-top: 18px !important; border-top-color: #303238 !important; }

@media (max-width: 767px) {
  .admin-navigation { position: sticky; top: 0; width: 100%; height: auto; min-height: auto; overflow: visible; padding: 13px 16px; border-right: 0; border-bottom: 1px solid #303238; }
  .admin-navigation__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 12px; font-weight: 700; }
  .admin-navigation__toggle-lines, .admin-navigation__toggle-lines::before, .admin-navigation__toggle-lines::after {
    display: block; width: 18px; height: 2px; background: var(--nav-signal);
  }
  .admin-navigation__toggle-lines { position: relative; }
  .admin-navigation__toggle-lines::before, .admin-navigation__toggle-lines::after { content: ""; position: absolute; left: 0; }
  .admin-navigation__toggle-lines::before { top: -6px; }
  .admin-navigation__toggle-lines::after { top: 6px; }
  .admin-navigation__nav { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; padding-top: 12px; border-top: 1px solid #303238; }
  .admin-navigation__nav[hidden] { display: none; }
  .admin-navigation__nav a { grid-template-columns: 1fr; gap: 5px; min-height: 60px; padding: 10px 12px; }
  .admin-navigation__nav a::before { inset: auto 8px 0; width: auto; height: 3px; }
  .admin-navigation__settings { margin-top: 0; padding-top: 10px !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .admin-navigation__nav a { transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
}