/* Notifications refresh. Keep the existing actions within the shared page. */
.notifications-page.notifications-page-v2 {
    --nt-bg: #F6FBFF;
    --nt-surface: #FFFFFF;
    --nt-alt: #F1F5F9;
    --nt-ink: #222222;
    --nt-secondary: #475569;
    --nt-muted: #5F6F85;
    --nt-border: #E0E0E0;
    --nt-accent: #0174B1;
    --nt-on-accent: #FFFFFF;
    --nt-selected: #E3F5FF;
    --nt-unread: #EEF7FD;
    --nt-hover: rgb(1 116 177 / 6%);
    --nt-danger: #C62828;
    --nt-danger-bg: #FDECEC;
    --nt-danger-border: #F3B9B9;
    --nt-comment-bg: #E3F5FF;
    --nt-comment-ink: #0174B1;
    --nt-like-bg: #FBEAF1;
    --nt-like-ink: #A3326A;
    --nt-rating-bg: #FFF2D9;
    --nt-rating-ink: #8A5300;
    --nt-book-bg: #E5F4EE;
    --nt-book-ink: #1E6B52;
    --nt-reading-bg: #ECEFFE;
    --nt-reading-ink: #4050A8;
    --nt-follow-bg: #F0ECFA;
    --nt-follow-ink: #5E45A6;
    --nt-system-bg: #EEF1F4;
    --nt-system-ink: #4B5868;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(120px + var(--topnav-inset-top, 0px)) 24px 64px;
    background: var(--nt-bg);
    color: var(--nt-ink);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

body.dark-mode .notifications-page.notifications-page-v2,
html.dark-mode .notifications-page.notifications-page-v2 {
    --nt-bg: #0F1620;
    --nt-surface: #1B2330;
    --nt-alt: #2E3A4A;
    --nt-ink: #F1F5F9;
    --nt-secondary: #CBD3DC;
    --nt-muted: #94A3B2;
    --nt-border: #2E3A4A;
    --nt-accent: #00B4FF;
    --nt-on-accent: #0F1620;
    --nt-selected: #12364B;
    --nt-unread: #132A3C;
    --nt-hover: rgb(0 180 255 / 8%);
    --nt-danger: #FF8A80;
    --nt-danger-bg: #3A1F24;
    --nt-danger-border: #6E3036;
    --nt-comment-bg: #12364B;
    --nt-comment-ink: #8FDBFF;
    --nt-like-bg: #3A2030;
    --nt-like-ink: #F4A6C8;
    --nt-rating-bg: #3A2E12;
    --nt-rating-ink: #F5C46B;
    --nt-book-bg: #14332A;
    --nt-book-ink: #7FD6B3;
    --nt-reading-bg: #1E2648;
    --nt-reading-ink: #A9B6F5;
    --nt-follow-bg: #2A2142;
    --nt-follow-ink: #C3B2F2;
    --nt-system-bg: #2E3A4A;
    --nt-system-ink: #CBD3DC;
}

.notifications-page.notifications-page-v2 *,
.notifications-page.notifications-page-v2 *::before,
.notifications-page.notifications-page-v2 *::after { box-sizing: border-box; }
.notifications-page.notifications-page-v2 button { font-family: inherit; }
.notifications-page.notifications-page-v2 button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--nt-accent); outline-offset: 2px; }
.notifications-page.notifications-page-v2 button:disabled { opacity: .55; cursor: not-allowed; }
.notifications-page.notifications-page-v2 .notifications-container { max-width: 1040px; min-width: 0; margin: 0 auto; }
.notifications-page.notifications-page-v2 .notifications-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.notifications-page.notifications-page-v2 .notifications-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.notifications-page.notifications-page-v2 .notifications-title h1 { margin: 0; color: var(--nt-ink); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.notifications-page.notifications-page-v2 .notifications-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--nt-selected); color: var(--nt-accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.notifications-page.notifications-page-v2 .notifications-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notifications-page.notifications-page-v2 :is(.action-btn, .load-more-btn, .retry-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--nt-border); border-radius: 10px; background: var(--nt-surface); color: var(--nt-ink); font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; box-shadow: none; transform: none; transition: border-color .2s ease, background-color .2s ease; }
.notifications-page.notifications-page-v2 :is(.action-btn-mark, .load-more-btn) { color: var(--nt-accent); }
.notifications-page.notifications-page-v2 :is(.action-btn, .load-more-btn, .retry-btn):hover:not(:disabled) { border-color: var(--nt-accent); background: var(--nt-surface); color: var(--nt-accent); transform: none; box-shadow: none; }
.notifications-page.notifications-page-v2 .action-btn i { font-size: 18px; line-height: 1; }
.notifications-page.notifications-page-v2 .notifications-filter-bar { display: inline-flex; gap: 2px; max-width: 100%; margin-bottom: 16px; padding: 3px; border: 1px solid var(--nt-border); border-radius: 10px; background: var(--nt-alt); }
.notifications-page.notifications-page-v2 .filter-tab { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-width: 104px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 8px; background: transparent; color: var(--nt-secondary); font-size: 15px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.notifications-page.notifications-page-v2 .filter-tab:hover { color: var(--nt-ink); }
.notifications-page.notifications-page-v2 .filter-tab.active { background: var(--nt-surface); color: var(--nt-ink); font-weight: 600; box-shadow: 0 1px 2px rgb(2 6 23 / 5%); }
.notifications-page.notifications-page-v2 .filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--nt-accent); color: var(--nt-on-accent); font-size: 12px; font-weight: 700; }
.notifications-page.notifications-page-v2 .notifications-content { min-width: 0; }
.notifications-page.notifications-page-v2 .notifications-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--nt-border); border-radius: 14px; background: var(--nt-surface); box-shadow: 0 1px 2px rgb(2 6 23 / 5%); }
.notifications-page.notifications-page-v2 .notification-card { display: flex; align-items: center; gap: 4px; min-width: 0; padding-right: 6px; background: transparent; transition: background-color .2s ease; }
.notifications-page.notifications-page-v2 .notification-card + .notification-card { border-top: 1px solid var(--nt-border); }
.notifications-page.notifications-page-v2 .notification-card:first-child { border-top-left-radius: 13px; border-top-right-radius: 13px; }
.notifications-page.notifications-page-v2 .notification-card:last-child { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
.notifications-page.notifications-page-v2 .notification-card.unread { background: var(--nt-unread); }
.notifications-page.notifications-page-v2 .notification-open { display: flex; flex: 1; align-items: flex-start; gap: 14px; min-width: 0; min-height: 76px; padding: 16px 20px; border: 0; border-radius: inherit; background: transparent; color: var(--nt-ink); text-align: left; cursor: pointer; }
.notifications-page.notifications-page-v2 .notification-open:hover:not(:disabled) { background: var(--nt-hover); }
.notifications-page.notifications-page-v2 .notification-card.processing { opacity: .65; }
.notifications-page.notifications-page-v2 .notification-icon-wrapper { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; }
.notifications-page.notifications-page-v2 .notification-icon-wrapper i { font-size: 20px; line-height: 1; }
.notifications-page.notifications-page-v2 .notification-tone-comment { background: var(--nt-comment-bg); color: var(--nt-comment-ink); }
.notifications-page.notifications-page-v2 .notification-tone-like { background: var(--nt-like-bg); color: var(--nt-like-ink); }
.notifications-page.notifications-page-v2 .notification-tone-rating { background: var(--nt-rating-bg); color: var(--nt-rating-ink); }
.notifications-page.notifications-page-v2 .notification-tone-book { background: var(--nt-book-bg); color: var(--nt-book-ink); }
.notifications-page.notifications-page-v2 .notification-tone-reading { background: var(--nt-reading-bg); color: var(--nt-reading-ink); }
.notifications-page.notifications-page-v2 .notification-tone-follow { background: var(--nt-follow-bg); color: var(--nt-follow-ink); }
.notifications-page.notifications-page-v2 .notification-tone-system { background: var(--nt-system-bg); color: var(--nt-system-ink); }
.notifications-page.notifications-page-v2 .notification-body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; padding-top: 1px; }
.notifications-page.notifications-page-v2 .notification-message { display: block; color: var(--nt-ink); font-size: 15px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.notifications-page.notifications-page-v2 .unread .notification-message { font-weight: 600; }
.notifications-page.notifications-page-v2 .notification-time { display: block; color: var(--nt-muted); font-size: 13px; font-weight: 400; line-height: 1.3; }
.notifications-page.notifications-page-v2 .notification-unread-indicator { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--nt-accent); }
.notifications-page.notifications-page-v2 :is(.notification-delete, .notifications-action-error-dismiss) { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--nt-muted); cursor: pointer; }
.notifications-page.notifications-page-v2 .notification-delete:hover:not(:disabled) { background: var(--nt-danger-bg); color: var(--nt-danger); }
.notifications-page.notifications-page-v2 .load-more-section { display: flex; justify-content: center; margin-top: 16px; }
.notifications-page.notifications-page-v2 .load-more-btn { min-width: 180px; padding-inline: 20px; }
.notifications-page.notifications-page-v2 :is(.notifications-loading, .notifications-empty, .notifications-error) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; padding: 40px 24px; border: 1px solid var(--nt-border); border-radius: 14px; background: var(--nt-surface); box-shadow: 0 1px 2px rgb(2 6 23 / 5%); text-align: center; }
.notifications-page.notifications-page-v2 .notification-state-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; background: var(--nt-selected); color: var(--nt-accent); font-size: 24px; }
.notifications-page.notifications-page-v2 .notifications-error .notification-state-icon { background: var(--nt-danger-bg); color: var(--nt-danger); }
.notifications-page.notifications-page-v2 :is(.notifications-empty, .notifications-error) h2 { margin: 0; color: var(--nt-ink); font-size: 18px; font-weight: 700; line-height: 1.3; }
.notifications-page.notifications-page-v2 :is(.notifications-loading, .notifications-empty, .notifications-error) p { max-width: 400px; margin: 0; color: var(--nt-secondary); font-size: 14px; line-height: 1.5; }
.notifications-page.notifications-page-v2 .retry-btn { margin-top: 12px; border-color: var(--nt-accent); background: var(--nt-accent); color: var(--nt-on-accent); }
.notifications-page.notifications-page-v2 .retry-btn:hover:not(:disabled) { background: var(--nt-accent); color: var(--nt-on-accent); filter: brightness(.94); }
.notifications-page.notifications-page-v2 .notifications-action-error { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--nt-danger-border); border-radius: 10px; background: var(--nt-danger-bg); color: var(--nt-danger); font-size: 14px; line-height: 1.45; }
.notifications-page.notifications-page-v2 .notifications-action-error > i { flex-shrink: 0; margin-top: 12px; font-size: 20px; line-height: 1; }
.notifications-page.notifications-page-v2 .notifications-action-error > span { flex: 1; min-width: 0; padding-block: 10px; overflow-wrap: anywhere; }
.notifications-page.notifications-page-v2 .notifications-action-error-dismiss { color: inherit; }
.notifications-page.notifications-page-v2 .notifications-action-error-dismiss:hover { background: var(--nt-hover); }
.notifications-page.notifications-page-v2 :is(.loading-spinner, .loading-spinner-small) { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--nt-accent); animation: nt-spin .8s linear infinite; }
.notifications-page.notifications-page-v2 .loading-spinner { width: 32px; height: 32px; margin-bottom: 8px; }
.notifications-page.notifications-page-v2 .spinning { animation: nt-spin .8s linear infinite; }
@keyframes nt-spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .notifications-page.notifications-page-v2 { padding: calc(104px + var(--topnav-inset-top, 0px)) 16px calc(104px + env(safe-area-inset-bottom, 0px)); }
    .notifications-page.notifications-page-v2 .notifications-title h1 { font-size: 24px; }
    .notifications-page.notifications-page-v2 .notifications-actions { flex-basis: 100%; }
    .notifications-page.notifications-page-v2 .action-btn { flex: 1 1 auto; padding-inline: 12px; font-size: 14px; white-space: nowrap; }
    .notifications-page.notifications-page-v2 .notifications-filter-bar { display: flex; width: 100%; }
    .notifications-page.notifications-page-v2 .notification-open { gap: 12px; padding: 14px 12px; }
    .notifications-page.notifications-page-v2 .load-more-btn { width: 100%; }
    .notifications-page.notifications-page-v2 :is(.notifications-loading, .notifications-empty, .notifications-error) { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .notifications-page.notifications-page-v2 *,
    .notifications-page.notifications-page-v2 *::before,
    .notifications-page.notifications-page-v2 *::after { animation: none !important; transition: none !important; }
}