/* 通知页样式（对应 page-notifications.js）
 */

/* ── 通知页（feed 流式列表）────────────────────── */
.ntf-feed { border: 1px solid var(--ov-line); border-radius: 12px; background: #fff;
  overflow: hidden; }
.ntf-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 18px; border: none; background: none; cursor: pointer; font: inherit; }
.ntf-row + .ntf-row { border-top: 1px solid var(--ov-line-soft); }
.ntf-row:hover { background: #F8FAFC; }
.ntf-row.unread { background: #F0F6FF; }
.ntf-row.unread:hover { background: #E8F1FE; }
.ntf-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; }
.ntf-ico svg { width: 17px; height: 17px; }
.ntf-ico.inv { background: #EFF6FF; color: var(--ov-brand); }
.ntf-ico.gift { background: #FFF7E6; color: #D97706; }
.ntf-ico.sys { background: #F1F5F9; color: #64748B; }
.ntf-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf-row-title { font-size: 13.5px; font-weight: 500; color: var(--ov-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf-row.unread .ntf-row-title { font-weight: 600; }
.ntf-row-sub { font-size: 12.5px; color: var(--ov-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ntf-row-time { font-size: 11.5px; color: var(--ov-ink-4); font-variant-numeric: tabular-nums; }
.ntf-row.unread .ntf-row-time::before { content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 999px; background: var(--ov-brand); margin-right: 6px; vertical-align: 1px; }
.ntf-dl { font-size: 11.5px; font-weight: 500; color: var(--ov-brand); cursor: pointer; }
.ntf-dl:hover { color: #1D4ED8; text-decoration: underline; }

/* ── 通知详情弹窗 ─────────────────────────────── */
.nf-modal { width: 440px; }
.nf-body { font-size: 13px; color: #475569; line-height: 1.7; margin: 0 0 14px; }
.nf-fields { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px;
  background: #F8FAFC; border-radius: 8px; padding: 14px 16px; }
.nf-k { font-size: 12px; color: var(--ov-ink-4); padding-top: 1px; }
.nf-v { font-size: 13px; color: var(--ov-ink); min-width: 0; word-break: break-all; }
.nf-v b { font-weight: 600; }
.bell-seg { display: flex; gap: 4px; margin-bottom: 6px; }
.bell-seg button { border: none; background: none; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; color: var(--ov-ink-4); cursor: pointer; font-family: inherit; }
.bell-seg button:hover { color: var(--ov-ink); background: #F1F5F9; }
.bell-seg button.on { color: var(--ov-brand); background: #EFF6FF; font-weight: 500; }
.bell-seg button .n { font-size: 11px; margin-left: 3px; font-variant-numeric: tabular-nums;
  color: var(--ov-ink-4); }
.bell-seg button.on .n { color: var(--ov-brand); }