.seller-notifications-page,
.seller-notifications-page .seller-dash-canvas {
  font-family: var(--font-sans);
}

.seller-notifications-page .seller-notifications-canvas {
  margin: 0;
}

.seller-notifications-pagehead {
  margin-bottom: var(--dash-gap);
}

.seller-notifications-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: var(--dash-gap);
  padding-bottom: var(--dash-gap);
  border-bottom: 1px solid var(--dash-line);
}

.seller-notifications-count-line {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--s-muted);
  line-height: 1.35;
}

.seller-notifications-count-line strong {
  font-weight: 800;
  color: var(--s-text);
  font-variant-numeric: tabular-nums;
}

.seller-notifications-total-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-inline-start: 2px;
}

.seller-notifications-shown {
  font-weight: 600;
  color: var(--s-muted);
  margin-inline-start: 4px;
}

.seller-notifications-shown strong {
  font-weight: 800;
  color: var(--s-text);
  font-variant-numeric: tabular-nums;
}

.seller-notifications-page .seller-notifications-filter.svc-filter {
  flex: 0 1 min(280px, 100%);
  min-width: min(220px, 100%);
  max-width: 360px;
  margin-inline-start: auto;
}

.seller-notifications-page .svc-filter-status-trigger {
  background: var(--s-surface);
  border-color: var(--s-border);
  color: var(--s-text);
  box-shadow: none;
}

.seller-notifications-page .svc-filter-status-trigger:hover {
  background: var(--s-surface2);
  border-color: var(--s-border);
}

.seller-notifications-page .svc-filter-status-trigger:active {
  background: var(--s-row-hover);
  box-shadow: none;
}

.seller-notifications-page .svc-filter-status-trigger:focus {
  outline: none;
}

.seller-notifications-page .svc-filter-status-trigger:focus-visible {
  outline: 2px solid rgba(63, 63, 70, 0.28);
  outline-offset: 2px;
  box-shadow: none;
}

.seller-notifications-page .svc-filter-status-trigger__label {
  color: var(--s-muted);
}

.seller-notifications-page .svc-filter-status-trigger__text {
  color: var(--s-text);
}

.seller-notifications-page .svc-filter-status-list .service-menu-item.svc-filter-status-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: right;
}

.seller-notifications-filter-count {
  flex-shrink: 0;
  min-width: 1.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--s-muted);
  background: var(--s-surface2, #f4f4f5);
  border-radius: 8px;
  padding: 2px 7px;
  line-height: 1.3;
}

.seller-notifications-page .svc-filter-status-list .svc-filter-status-opt.is-current .seller-notifications-filter-count {
  background: rgba(10, 10, 10, 0.08);
  color: var(--s-text);
}

.seller-notifications-page .svc-filter-status-list .service-menu-item {
  -webkit-tap-highlight-color: transparent;
}

.seller-notifications-page .svc-filter-status-list .service-menu-item:focus {
  outline: none;
}

.seller-notifications-page .svc-filter-status-list .service-menu-item:focus-visible {
  outline: 2px solid rgba(63, 63, 70, 0.28);
  outline-offset: 1px;
}

.seller-notifications-list-wrap {
  min-width: 0;
}

.seller-notifications-page .notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(40.5rem, 100%);
  margin-inline: auto;
}

.seller-notifications-page .notification-card.notification-card--seller {
  margin: 0;
  padding: 0;
  display: block;
  gap: 0;
  border-radius: var(--seller-card-radius, 16px);
  border: 1px solid var(--dash-line);
  background: var(--dash-paper);
  box-shadow: none;
  overflow: hidden;
  font-family: inherit;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.seller-notifications-page .notification-card.notification-card--seller:hover {
  border-color: #d4d4d8;
  box-shadow: none;
}

.seller-notifications-page .notification-card__inner {
  padding: 15px 17px 16px;
}

.seller-notifications-page .notification-card__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.seller-notifications-page .notification-card__head-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
}

.seller-notifications-page .notification-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.seller-notifications-page .notification-card__icon-wrap {
  flex-shrink: 0;
  line-height: 0;
  margin-top: 1px;
}

.seller-notifications-page .notification-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--dash-ink, #0a0a0a);
  color: #fafafa;
}

.seller-notifications-page .notification-card__icon svg {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.seller-notifications-page .notification-card__tools {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--dash-line);
  margin: 0;
}

.seller-notifications-page .notification-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--dash-ink);
  line-height: 1.4;
}

.seller-notifications-page .notification-body {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--s-text);
  opacity: 0.88;
}

.seller-notifications-page .notification-meta {
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--s-muted);
}

.seller-notifications-page .notification-meta__time {
  font-variant-numeric: tabular-nums;
}

.seller-notifications-page .seller-notifications-open-link.btn.ghost {
  flex: 0 0 auto;
  width: auto;
  min-width: min(9.5rem, 100%);
  max-width: 100%;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  margin-top: 0;
}

.seller-notifications-page .seller-notifications-open-link.btn.ghost:active {
  background: var(--s-row-hover);
  box-shadow: none;
}

.seller-notifications-page .seller-notifications-open-link.btn.ghost:focus {
  outline: none;
}

.seller-notifications-page .seller-notifications-open-link.btn.ghost:focus-visible {
  outline: 2px solid rgba(63, 63, 70, 0.28);
  outline-offset: 2px;
}

.seller-notifications-page .notifications-message {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.84rem;
  display: none;
}

.seller-notifications-page .notifications-message.error {
  background: rgba(185, 28, 28, 0.06);
  color: #991b1b;
  border: 1px solid rgba(185, 28, 28, 0.22);
}

.seller-notifications-page .notifications-message.is-visible {
  display: block;
}

.seller-notifications-page .notifications-message.is-visible:not(.error) {
  background: var(--dash-soft);
  border: 1px solid var(--dash-line);
  color: var(--s-muted);
}

@media (max-width: 560px) {
  .seller-notifications-page .notification-card__head-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .seller-notifications-page .notification-card__icon-wrap {
    align-self: center;
    margin-top: 0;
  }

  .seller-notifications-page .notification-card__tools {
    justify-content: stretch;
  }

  .seller-notifications-page .seller-notifications-open-link.btn.ghost {
    width: 100%;
    max-width: none;
    margin-top: 4px;
  }
}