.problem-notification-section {
  padding: 16px 18px 4px;
  border-bottom: 1px solid var(--line, #d8e4ea);
}

.problem-notification-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.problem-notification-section-head h3 {
  margin: 0;
  color: #1a2e3b;
  font-size: 15px;
  font-weight: 700;
}

.problem-notification-standard-head {
  margin: 0;
  padding: 14px 18px 0;
}

.problem-notification-section-head span {
  color: #667680;
  font-size: 12px;
}

.problem-notification-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
}

.problem-notification-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid #d98a98;
  border-left: 4px solid #c85b6e;
  border-radius: 12px;
  background: #fff8f9;
  box-shadow: 0 6px 18px rgb(26 46 59 / 7%);
}

.problem-notification-card.is-critical {
  border-color: #a83d50;
  border-left-color: #a83d50;
  background: #fff3f5;
}

.problem-notification-card.is-warning {
  border-color: #e8c060;
  border-left-color: #e8c060;
  background: #fffbf0;
}

.problem-notification-card.is-info {
  border-color: #d8e4ea;
  border-left-color: #d8e4ea;
  background: #e9f4f9;
}

.problem-notification-card.is-read {
  opacity: 0.72;
  background: #fff;
}

.problem-notification-head,
.problem-notification-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.problem-severity-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fde8ec;
  color: #8d2f42;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.is-warning .problem-severity-badge {
  background: #fff3cc;
  color: #775b08;
}

.is-info .problem-severity-badge {
  background: #dceef5;
  color: #255e72;
}

.problem-notification-meta,
.problem-code {
  color: #667680;
  font-size: 12px;
}

.problem-notification-card h4,
.problem-notification-card p {
  margin: 0;
}

.problem-notification-card h4 {
  color: #1a2e3b;
  font-size: 15px;
  line-height: 1.35;
}

.problem-code code {
  color: #435763;
  font-size: 11px;
}

.problem-copy {
  display: grid;
  gap: 3px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.problem-copy strong {
  color: #304651;
}

.problem-open-action,
.problem-popup-action {
  color: #297b96;
}

.problem-notification-empty {
  padding: 14px;
  border: 1px dashed #d8e4ea;
  border-radius: 10px;
  color: #667680;
  text-align: center;
}

.problem-popup-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9200;
  display: grid;
  width: min(410px, calc(100vw - 32px));
  gap: 12px;
  pointer-events: none;
}

.problem-popup {
  display: grid;
  gap: 11px;
  padding: 16px 17px;
  border: 1px solid #d98a98;
  border-left: 5px solid #c85b6e;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 46px rgb(26 46 59 / 18%);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

.problem-popup.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.problem-popup.is-critical { border-left-color: #a83d50; }
.problem-popup.is-warning { border-left-color: #e8c060; }
.problem-popup.is-info { border-left-color: #d8e4ea; }

.problem-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #1a2e3b;
}

.problem-popup-close {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.problem-popup-close:hover { background: #eef3f5; }

.problem-popup p {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.problem-popup-resolution {
  display: grid;
  gap: 3px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.problem-popup-action {
  justify-self: start;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

[data-theme="dark"] .problem-notification-section-head h3,
[data-theme="dark"] .problem-notification-card h4,
[data-theme="dark"] .problem-popup-head {
  color: #eaf2f5;
}

[data-theme="dark"] .problem-notification-card,
[data-theme="dark"] .problem-popup {
  background: #18323e;
}

[data-theme="dark"] .problem-copy,
[data-theme="dark"] .problem-copy strong,
[data-theme="dark"] .problem-popup p,
[data-theme="dark"] .problem-popup-resolution {
  color: #c2d0d6;
}

@media (max-width: 640px) {
  .problem-popup-stack {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }

  .problem-notification-section { padding-inline: 12px; }
  .problem-notification-actions { align-items: stretch; }
  .problem-notification-actions button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-popup { transition: none; }
}