.nb { position: relative; display: flex; }
.nb[hidden] { display: none; }

.nb-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 55;
  width: 340px; max-height: min(70vh, 520px); display: flex; flex-direction: column;
  background: #1d1826; border: 1px solid #3a3148; border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.nb-panel[hidden] { display: none; }
.nb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #2c2538; font-size: .9rem;
}
.nb-close { border: 0; background: none; color: var(--muted); cursor: pointer; width: 32px; height: 32px; font-size: .9rem; }
.nb-close:hover { color: var(--text); }

.nb-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.nb-list li { border-bottom: 1px solid #2a2335; }
.nb-list li:last-child { border-bottom: 0; }
.nb-list a, .nb-list li > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 11px 22px; position: relative; }
.nb-list a:hover { background: #251f31; }
.nb-list li.is-new a::before, .nb-list li.is-new > div::before {
  content: ''; position: absolute; left: 9px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--hot);
}
.nb-t { font-size: .86rem; font-weight: 700; line-height: 1.45; }
.nb-b { font-size: .8rem; color: #c9c2d6; line-height: 1.6; white-space: pre-line; }
.nb-list time { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.nb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 16px; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.6;
}
.nb-empty .btn { color: #fff; }

@media (max-width: 780px) {
  .nb-btn { width: 44px; height: 44px; }
  .nb-panel {
    position: fixed; top: calc(62px + env(safe-area-inset-top)); left: 10px; right: 10px;
    width: auto; max-height: 70vh;
  }
}

@media (max-width: 780px) {
  header.site .wrap > .nb:not([hidden]) { margin-left: auto; }
  header.site .wrap > .nb:not([hidden]) + .cart-btn { margin-left: 0; }
}