body { min-height: 100vh; background: #eef1ef; }

.notifications-page {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 18px 108px;
  background: #fbfcfb;
}

.notifications-header {
  display: grid;
  grid-template-columns: 42px 1fr 64px;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid #edf0ee;
}

.notifications-header > a {
  color: #26352e;
  font-size: 32px;
  line-height: 1;
}

.notifications-header h1 {
  margin: 0;
  color: #17271f;
  font-size: 18px;
  text-align: center;
  letter-spacing: -.04em;
}

.notifications-header button {
  color: #68736d;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.notification-guide {
  padding: 18px 2px 13px;
}

.notification-guide p { margin: 0; color: #929a96; font-size: 10px; letter-spacing: -.01em; }

.notifications-list {
  border-top: 1px solid #e5e9e7;
  background: transparent;
}

.notification-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 19px 4px 18px;
  border-bottom: 1px solid #e8ecea;
  color: #26352e;
}

.notification-card:last-child { border-bottom: 0; }

.notification-kind {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border: 1px solid #dfe4e1;
  border-radius: 10px;
  background: #f7f9f8;
  color: #4f5c55;
  font-size: 11px;
  font-weight: 800;
}

.notification-category {
  display: block;
  margin-bottom: 6px;
  color: #89928d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}

.notification-copy { flex: 1; min-width: 0; }
.notification-copy strong { display: block; padding-right: 18px; color: #202b26; font-size: 14px; font-weight: 720; letter-spacing: -.025em; }
.notification-copy p { margin: 7px 0; color: #6e7772; font-size: 11px; line-height: 1.55; }
.notification-copy small { display: block; margin-top: 10px; color: #a1a8a4; font-size: 9px; }

.product-preview {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  padding-left: 9px;
  border-left: 2px solid #dfe5e2;
  color: #59645f;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-card > b { align-self: center; color: #b5bbb8; font-size: 17px; font-weight: 300; }

.notification-card.is-unread::after {
  position: absolute;
  top: 22px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #167052;
  content: "";
}

.notification-card.is-unread > b { visibility: hidden; }

.notification-empty { padding: 56px 20px; text-align: center; }
.notification-empty strong { color: #48564f; font-size: 13px; }
.notification-empty p { margin: 7px 0 0; color: #929b96; font-size: 10px; }

body.notification-detail-open { overflow: hidden; }

.notification-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.notification-detail-layer[hidden] { display: none; }

.notification-detail-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(21, 31, 26, .42);
  backdrop-filter: blur(2px);
}

.notification-detail-sheet {
  position: relative;
  width: min(100%, 430px);
  padding: 10px 22px calc(24px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -16px 45px rgba(25, 40, 32, .14);
}

.notification-detail-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 99px;
  background: #dce2df;
}

.notification-detail-sheet header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}

.notification-detail-sheet header span {
  color: #176349;
  font-size: 11px;
  font-weight: 800;
}

.notification-detail-sheet header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f6f4;
  color: #58655f;
  font-size: 22px;
  line-height: 1;
}

.notification-detail-sheet > strong {
  display: block;
  color: #17251e;
  font-size: 20px;
  font-weight: 780;
  line-height: 1.4;
  letter-spacing: -.035em;
}

.notification-detail-sheet > p {
  margin: 14px 0 0;
  color: #526059;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.notification-detail-sheet > time {
  display: block;
  margin-top: 17px;
  color: #98a19c;
  font-size: 11px;
}

.notification-detail-sheet > a {
  display: grid;
  place-items: center;
  min-height: 52px;
  margin-top: 24px;
  border-radius: 14px;
  background: #176349;
  color: #fff;
  font-size: 14px;
  font-weight: 760;
}

.notification-detail-sheet > a[hidden] { display: none; }