/* FeedPush Dark Theme - standalone and easily revertible */

/* Auto-apply for users who prefer dark scheme */
@media (prefers-color-scheme: dark) {
  /* =============================================================
   * FeedPush Dark Theme (Structure & TOC)
   * -------------------------------------------------------------
   * 01. CSS Variables
   * 02. Base Containers
   * 03. Notifications Page Layout
   * 04. Secondary Surfaces
   * 05. Borders & Dividers
   * 06. Typography
   * 07. Inputs (and focus styles)
   * 08. Buttons (primary/outline)
   * 09. Navigation (navbar/tabs)
   * 10. Lists & Items / Filters
   * 11. Code & Regex Info
   * 12. Cards & JK Selection (Special overrides)
   * 13. Modals & Scrollbars & Confirm details
   * 14. Links / Login Page
   * 15. Footer / Webpush / Toggles / Badges / Media / Date separator
   * 16. Alerts & Toasts
   * Note: All rules keep !important and visual parity with light theme.
   * ============================================================= */
  :root {
    --fp-bg: #0f1115;
    --fp-surface: #151923;
    --fp-surface-2: #1b2130;
    --fp-border: #2a3345;
    --fp-muted: #8a95a7;
    --fp-text: #e6e9ef;
    /* Dark-mode tuned orange (lower luminance/saturation) */
    --fp-accent: #f59e0b;        /* amber-500 */
    --fp-accent-hover: #d97706;  /* amber-600 */
    --fp-accent-2: #fbbf24;      /* amber-400 */
    --fp-danger: #ff6b6b;
    --fp-warning: #f9c74f;
    --fp-success: #59d185;
    --fp-shadow: rgba(0,0,0,0.4);
    /* map light palette to dark */
    --gray-25: #0c0f14;
    --gray-50: #0f141b;
    --gray-100: #141a24;
    --gray-200: #1b2431;
    --gray-300: #2a3345;
    --gray-400: #5b6578;
    --gray-500: #7b8597;
    --gray-600: #a5afc1;
    --gray-700: #c1c8d6;
    --gray-800: #d5dae5;
    --gray-900: #e8ecf4;
    /* subtle blue ring used for hover on cards to match light theme */
    --fp-hover-blue: rgba(59, 130, 246, 0.35);
    --fp-hover-blue-outer: rgba(59, 130, 246, 0.20);
  }

  html, body {
    background: var(--fp-bg) !important;
    color: var(--fp-text) !important;
    background-image: none !important;
  }

  /* iPhone 刘海安全区在暗黑模式下使用深色填充，避免顶部出现白条 */
  body {
    background: linear-gradient(
      to bottom,
      var(--fp-bg) 0,
      var(--fp-bg) env(safe-area-inset-top),
      var(--fp-bg) env(safe-area-inset-top),
      var(--fp-bg) 100%
    ) !important;
  }

  /* 02. Base containers */
  .notifications-container,
  .regex-test-container,
  .login-container,
  .modal-content,
  .card,
  .stat-card,
  .feeds-list,
  .feeds-toolbar,
  .notifications-timeline,
  .context-menu {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border-color: var(--fp-border) !important;
    box-shadow: 0 6px 20px var(--fp-shadow) !important;
  }

  /* Page canvas should follow page background, not card surface */
  .dashboard-main { 
    background: var(--fp-bg) !important; 
    box-shadow: none !important; 
    border: none !important;
  }

  /* 03. Notifications page layout */
  .notifications-container {
    background: var(--fp-bg) !important;
    box-shadow: none !important;
    border: none !important;
  }
  .notifications-toolbar {
    background: var(--fp-bg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
  }
  .notifications-timeline { 
    background: transparent !important; 
    border: none !important; 
    box-shadow: none !important; 
  }
  /* Loading state area should match page background (no card surface) */
  .timeline-loading { 
    background: var(--fp-bg) !important; 
    border: none !important; 
    box-shadow: none !important; 
  }

  /* 04. Secondary surfaces */
  .feeds-header,
  .timeline-loading,
  .empty-state,
  .add-feed-form,
  .login-card,
  .confirm-modal-content {
    background: var(--fp-surface-2) !important;
    border-color: var(--fp-border) !important;
  }

  /* 05. Borders and separators */
  hr, .divider, .modal-footer {
    border-color: var(--fp-border) !important;
  }

  /* 06. Typography */
  .text-muted, .form-text, .footer-text, .empty-state-text {
    color: var(--fp-muted) !important;
  }

  /* 07. Inputs */
  .form-control, input, textarea, select {
    background: #0e121b !important;
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
  }
  .form-control::placeholder {
    color: #6b768a !important;
  }
  .search-input, .add-feed-input {
    background: #0e121b !important;
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
  }
  /* Unified focus style for all inputs in dark mode */
  .form-control:focus,
  input:focus,
  textarea:focus,
  select:focus,
  .search-input:focus,
  .add-feed-input:focus {
    outline: none !important;
    border-color: var(--fp-accent) !important; /* amber */
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16) !important; /* subtle amber ring on dark */
    background: #0e121b !important;
    color: var(--fp-text) !important;
  }
  /* Error/invalid focus variants */
  .form-control.error:focus,
  .form-control.is-invalid:focus {
    border-color: var(--fp-danger) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22) !important;
  }
  /* Focus-within icon color for input wrappers */
  .search-input-wrapper:focus-within .search-icon,
  .add-feed-input-wrapper:focus-within .add-feed-icon {
    color: var(--fp-accent) !important;
  }

  /* 08. Buttons */
  .btn-primary {
    background: var(--fp-accent) !important;
    border-color: var(--fp-accent) !important;
    color: #ffffff !important;
  }
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background: var(--fp-accent-hover) !important;
    border-color: var(--fp-accent-hover) !important;
    color: #ffffff !important;
  }
  .btn-outline-secondary,
  .btn.btn-outline-secondary {
    /* 提升对比度与可读性 */
    border-color: #3a4760 !important; /* 比 var(--fp-border) 略亮 */
    color: rgba(230, 233, 239, 0.9) !important; /* 略亮文本 */
    background: transparent !important;
  }
  .btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
  }
  .btn, .btn:hover, .btn:active { box-shadow: none !important; }
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus,
  .btn-outline-secondary:active {
    background: #1a2130 !important; /* 更清晰的hover底色 */
    color: var(--fp-text) !important;
    border-color: #4b5b7a !important; /* hover 边框更亮一点 */
  }

  /* Match outline-secondary with monospace form-control fill within input-group (light-mode parity) */
  .input-group .btn.btn-outline-secondary {
    background: #0e121b !important; /* 与 .form-control 的填充色一致 */
    border-color: var(--fp-border) !important;
    color: var(--fp-text) !important;
  }
  .input-group .btn.btn-outline-secondary:hover,
  .input-group .btn.btn-outline-secondary:focus,
  .input-group .btn.btn-outline-secondary:active {
    background: #141a24 !important; /* 比输入框稍亮，保持反馈 */
    border-color: #4b5b7a !important;
    color: var(--fp-text) !important;
  }

  /* Badges/labels */
  .success-message { color: var(--fp-success) !important; }
  .warning-message {
    background: rgba(249, 199, 79, 0.12) !important; /* var(--fp-warning) with low alpha */
    border: 1px solid rgba(249, 199, 79, 0.35) !important;
    color: var(--fp-warning) !important;
    border-radius: 8px !important;
  }
  .warning-message i { color: var(--fp-warning) !important; }
  .error-message {
    background: rgba(220, 53, 69, 0.12) !important;
    border: 1px solid rgba(220, 53, 69, 0.35) !important;
    color: #ffb3b3 !important;
    border-radius: 8px !important;
  }

  /* 09. Navigation */
  .navbar, .navbar-light, .navbar .dropdown-menu, .main-nav, .main-header {
    background: #0e121b !important;
    border-bottom: 1px solid var(--fp-border) !important;
    backdrop-filter: none !important;
  }
  /* 确保导航栏延伸进安全区时的顶端填充也是暗色 */
  .main-nav {
    margin-top: calc(-1 * env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: #0e121b !important;
    background-image: linear-gradient(
      to bottom,
      #0e121b 0,
      #0e121b env(safe-area-inset-top),
      #0e121b env(safe-area-inset-top),
      #0e121b 100%
    ) !important;
  }
  .navbar a, .navbar-brand, .nav-link, .nav-title { color: var(--fp-text) !important; }
  .nav-tabs { background: #141a24 !important; border: 1px solid var(--fp-border) !important; box-shadow: none !important; }
  .nav-tab { color: var(--fp-muted) !important; }
  /* Active tab: noticeably lighter tile with subtle lift */
  .nav-tab.active,
  .nav-tab.active:hover {
    background: #232c3f !important; /* lighter than hover/container */
    color: var(--fp-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
  }
  /* Hover with background block (align with light theme); avoid accent text */
  .nav-tab:hover {
    background: #1a2130 !important; /* lighter than container, darker than active */
    color: var(--fp-text) !important;
  }
  .nav-action-btn { background: #141a24 !important; color: var(--fp-text) !important; }
  .nav-action-btn:hover { background: #1a2130 !important; color: var(--fp-text) !important; }

  /* 10. Lists and items */
  .feed-item, .notification-item, .notification-card, .settings-item, .feeds-container, .feeds-header, .feeds-toolbar, .add-feed-form, .form-section, .stat-card {
    background: var(--fp-surface) !important;
    border-color: var(--fp-border) !important;
  }
  .notification-item { background: transparent !important; box-shadow: none !important; border: none !important; }
  .filter-group-container { background: transparent !important; border: none !important; box-shadow: none !important; }
  /* Hover states: 仅卡片自身变色，不让整行容器变成大色块 */
  .feed-item:hover, .context-menu, .filter-btn:hover { background: #1a2130 !important; }
  .notification-item:hover { background: transparent !important; }

  /* Notification action buttons (暗黑模式适配，包括移动端) */
  .notification-actions { background: transparent !important; }
  .notification-action-btn {
    background: #0e121b !important; /* 深色填充，避免亮色块 */
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
    box-shadow: none !important;
  }
  .notification-action-btn:hover,
  .notification-actions .notification-action-btn:hover {
    background: #1a2130 !important; /* 略亮的暗色hover底色 */
    border-color: #4b5b7a !important;
    color: var(--fp-text) !important;
    box-shadow: none !important;
  }
  /* 主色强调型（若存在 .primary 变体） */
  .notification-action-btn.primary {
    background: transparent !important;
    border-color: var(--fp-accent) !important;
    color: var(--fp-accent) !important;
  }
  .notification-action-btn.primary:hover,
  .notification-actions .notification-action-btn.primary:hover {
    background: #1a2130 !important;
    border-color: var(--fp-accent) !important;
    color: var(--fp-accent) !important;
  }
  /* 清除按钮（危险语义） */
  .notification-action-btn[onclick*="clearNotification"] {
    background: transparent !important;
    /* 边框再淡一些，降低视觉侵入感 */
    border-color: rgba(255, 107, 107, 0.30) !important;
    color: var(--fp-danger) !important;
  }
  .notification-action-btn[onclick*="clearNotification"]:hover,
  .notification-actions .notification-action-btn[onclick*="clearNotification"]:hover {
    background: var(--fp-danger) !important;
    border-color: var(--fp-danger) !important;
    color: #ffffff !important;
  }
  /* Empty state should blend with page background to avoid colored block */
  .empty-state { 
    background: var(--fp-bg) !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Filters */
  .filter-btn { background: #0e121b !important; border-color: var(--fp-border) !important; color: var(--fp-text) !important; }
  .filter-btn.active { background: var(--fp-accent) !important; border-color: var(--fp-accent) !important; color: #ffffff !important; }
  /* Special case: the first "All" button should not look highlighted even if active */
  .filter-btn.filter-all.active {
    background: #2a3345 !important; /* muted dark gray */
    border-color: #2a3345 !important;
    color: var(--fp-text) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  }
  .filter-btn.filter-all.active:hover {
    background: #323b50 !important;
    border-color: #323b50 !important;
  }
  /* Error filter – align with light mode red */
  .filter-btn.filter-error { background: #3a1f20 !important; color: #ffb3b3 !important; border-color: rgba(220, 38, 38, 0.35) !important; }
  .filter-btn.filter-error:hover { background: #472425 !important; border-color: rgba(220, 38, 38, 0.45) !important; color: #ffd6d6 !important; }
  .filter-btn.filter-error.active { background: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; }

  /* Scroll containers */
  .notification-media-scroll,
  .notification-images-scroll,
  .notification-video-scroll {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 11. Code blocks and regex engine info */
  code, pre, .code { 
    background: #0d1117 !important;
    color: #d2e3ff !important;
    border: 1px solid var(--fp-border) !important;
  }
  .regex-engine-info {
    text-align: center !important;
    margin-bottom: 20px !important;
    padding: 8px 16px !important;
    background: #0e121b !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: 8px !important;
    color: var(--fp-text) !important;
  }
  .regex-engine-info i { color: var(--fp-muted) !important; }
  .regex-engine-info code {
    background: #0d1117 !important;
    color: #d2e3ff !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
  }
  /* Bootstrap light utilities remap for dark */
  code.bg-light, pre.bg-light { background: #0d1117 !important; color: #d2e3ff !important; border: 1px solid var(--fp-border) !important; }
  .text-bg-light { background-color: #141a24 !important; color: var(--fp-text) !important; }
  .bg-light { background-color: #141a24 !important; color: var(--fp-text) !important; }
  .bg-white { background-color: #0e121b !important; color: var(--fp-text) !important; }
  .text-dark { color: var(--fp-text) !important; }
  .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--fp-border) !important; }
  /* (moved) Bootstrap light utilities remap for dark — kept once below in section 11 */
  .notification-card {
    border-color: var(--fp-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    /* 供描述渐隐遮罩使用，避免默认白色造成底部亮边 */
    --notification-bg-color: var(--fp-surface) !important;
    /* 与亮色模式对齐，但避免对 box-shadow 做动画以免产生闪烁 */
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    overflow: visible !important; /* 允许选中描边可见 */
  }
  .notification-card:hover,
  .notification-card.context-menu-active {
    border-color: var(--fp-border);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; /* 覆盖亮色主题的白色内阴影 */
    /* 与亮色模式一致的轻微位移 */
    transform: translateY(-1px);
  }

  /* 移动端（无悬停/粗指针）上禁用通知卡片的 hover 提升效果 */
  @media (hover: none), (pointer: coarse) {
    .notification-card:hover,
    .notification-card:active,
    .notification-card:has(.notification-actions:hover),
    .notification-card:has(.notification-action-btn:hover),
    .notification-card.context-menu-active {
      transform: none !important;
      border-color: var(--fp-border) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    }

    .notification-card:hover:not(.high-priority):not(.newly-shown),
    .notification-card:has(.notification-actions:hover):not(.high-priority):not(.newly-shown),
    .notification-card:has(.notification-action-btn:hover):not(.high-priority):not(.newly-shown) {
      border-color: var(--fp-border) !important; /* 取消蓝色外环 */
      box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    }

    .notification-card.high-priority:hover,
    .notification-card.high-priority:active,
    .notification-card.high-priority:has(.notification-actions:hover),
    .notification-card.high-priority:has(.notification-action-btn:hover) {
      transform: none !important;
      border-color: rgba(220, 38, 38, 0.35) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    }

    .notification-card.newly-shown:hover,
    .notification-card.newly-shown:active,
    .notification-card.newly-shown:has(.notification-actions:hover),
    .notification-card.newly-shown:has(.notification-action-btn:hover) {
      transform: none !important;
      border-color: rgba(245, 158, 11, 0.35) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    }

    .notification-card.high-priority.newly-shown:hover,
    .notification-card.high-priority.newly-shown:active,
    .notification-card.high-priority.newly-shown:has(.notification-actions:hover),
    .notification-card.high-priority.newly-shown:has(.notification-action-btn:hover) {
      transform: none !important;
      border-color: rgba(220, 38, 38, 0.35) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
    }
  }

  /* 额外兜底：小屏设备（暗黑）一律关闭卡片悬浮/按压阴影与上移 */
  @media (max-width: 1024px) {
    .notification-card,
    .notification-card:hover,
    .notification-card:active,
    .notification-card.context-menu-active,
    .notification-card:has(.notification-actions:hover),
    .notification-card:has(.notification-action-btn:hover) {
      transform: none !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
      border-color: var(--fp-border) !important;
    }
  }

  /* Add subtle blue ring on hover to mirror light theme (exclude special variants) */
  .notification-card:hover:not(.high-priority):not(.newly-shown),
  .notification-card.context-menu-active:not(.high-priority):not(.newly-shown) {
    border-color: var(--fp-hover-blue) !important;
    /* keep base elevation, add a thin outer blue halo */
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px var(--fp-hover-blue-outer) !important;
  }

  /* When hovering action area/buttons, keep the same hover ring on the card */
  .notification-card:has(.notification-actions:hover):not(.high-priority):not(.newly-shown),
  .notification-card:has(.notification-action-btn:hover):not(.high-priority):not(.newly-shown) {
    border-color: var(--fp-hover-blue) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px var(--fp-hover-blue-outer) !important;
    transform: translateY(-1px);
  }

  /* 12. JK navigation selection - align exactly with light theme */
  .notification-item.selected .notification-card {
    box-shadow: 0 0 0 3px var(--primary-color), 0 4px 20px rgba(255, 147, 12, 0.2) !important;
    /* 避免切换选中状态时的阴影动画导致闪烁 */
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0s linear;
    transform: none;
    position: relative; /* ensure pseudo-element positioning */
    z-index: 1;
  }

  /* 选中状态在 hover / context 菜单激活时保持一致，避免闪烁 */
  .notification-item.selected .notification-card:hover,
  .notification-item.selected .notification-card.context-menu-active {
    box-shadow: 0 0 0 3px var(--primary-color), 0 4px 20px rgba(255, 147, 12, 0.2) !important;
    /* 选中态下同样禁用阴影动画 */
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0s linear;
    transform: none;
  }

  /* (kept) Robust ring removed to match light theme thickness; rely on box-shadow with !important */

  /* (kept) Ensure selection ring wins over hover via overlay (::before) and !important above */

  /* Dark mode variants for special cards */
  /* High priority (red-tinted) */
  .notification-card.high-priority {
    --notification-bg-color: #2b1d1f !important; /* 深红色基底 */
    background-color: #2b1d1f !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
  }
  .notification-card.high-priority:hover,
  .notification-card.high-priority.context-menu-active {
    background-color: #2b1d1f !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; /* 移除白色内阴影 */
  }

  /* Newly shown (amber-tinted) */
  .notification-card.newly-shown {
    --notification-bg-color: #2a2315 !important; /* 深琥珀色基底 */
    background-color: #2a2315 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
  }
  .notification-card.newly-shown:hover,
  .notification-card.newly-shown.context-menu-active {
    background-color: #2a2315 !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; /* 移除白色内阴影 */
  }

  /* Both high-priority and newly-shown -> high priority wins */
  .notification-card.high-priority.newly-shown,
  .notification-card.newly-shown.high-priority {
    --notification-bg-color: #2b1d1f !important;
    background-color: #2b1d1f !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
  }
  .notification-card.high-priority.newly-shown:hover,
  .notification-card.newly-shown.high-priority:hover,
  .notification-card.high-priority.newly-shown.context-menu-active,
  .notification-card.newly-shown.high-priority.context-menu-active {
    background-color: #2b1d1f !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
  }

  /* Card close button (dark mode) */
  .notification-card::after {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1c8d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
  }

  .notification-card.close-button-hover::after {
    background-color: var(--fp-danger) !important;
    border-color: var(--fp-danger) !important;
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.35) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
  }

  /* 15. Footer - align with main nav background */
  .main-footer {
    background: #0e121b !important; /* same as .main-nav */
    border-top: 1px solid var(--fp-border) !important;
  }
  .footer-heart { color: var(--fp-danger) !important; }

  /* Inputs with icons */
  .search-input-wrapper, .add-feed-input-wrapper, .password-input-wrapper { background: #0e121b !important; border: 1px solid var(--fp-border) !important; }
  .search-icon, .add-feed-icon {
    color: var(--fp-muted) !important;
  }
  .search-input-wrapper, .add-feed-input-wrapper { background: transparent !important; border: none !important; }
  .search-input, .add-feed-input { border-radius: 10px !important; }

  /* Cards/stat */
  .stat-card .stat-label { color: var(--fp-muted) !important; }
  .stat-number { color: var(--fp-text) !important; }
  .badge { background: var(--fp-surface-2) !important; color: var(--fp-text) !important; border: 1px solid var(--fp-border) !important; }
  .badge.bg-secondary { background: #39455a !important; color: #e8ecf4 !important; }

  /* 13. Modals */
  .modal-content, .confirm-modal-content { background: var(--fp-surface) !important; }
  .modal-header, .modal-footer, .modal-body { background: var(--fp-surface) !important; border-color: var(--fp-border) !important; color: var(--fp-text) !important; }
  .modal-title { color: var(--fp-text) !important; }
  .modal-backdrop.show { background-color: rgba(0,0,0,0.65) !important; }
  /* Dark scrollbars for modal body */
  .modal-body {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #2a3345 #0e121b; /* thumb track */
  }
  .modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
  .modal-body::-webkit-scrollbar-track { background: #0e121b; border-radius: 8px; }
  .modal-body::-webkit-scrollbar-thumb {
    background: #2a3345;
    border-radius: 8px;
    border: 2px solid #0e121b;
  }
  .modal-body::-webkit-scrollbar-thumb:hover { background: #39455a; }
  /* Confirm details content (inside confirm dialog) */
  .confirm-details {
    background: var(--fp-surface-2) !important;
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-top: 10px !important;
    white-space: pre-wrap;
  }
  .confirm-details a { color: var(--fp-accent) !important; }

  /* 14. Links */
  a { color: var(--fp-accent) !important; }
  a:hover { color: var(--fp-accent-hover) !important; }
  /* Feed Preview links: default非主题色，hover时使用主题色（对齐亮色逻辑） */
  .feed-preview-title a,
  .preview-entry-title a { color: var(--fp-text) !important; }
  .feed-preview-title a:hover,
  .preview-entry-title a:hover { color: var(--fp-accent) !important; }
  .feed-preview-url a { color: var(--fp-muted) !important; }
  .feed-preview-url a:hover { color: var(--fp-text) !important; }
  /* Notification feed name: default as normal text, highlight only on hover */
  .notification-feed-name { color: var(--fp-text) !important; }
  .notification-feed-name:hover { color: var(--fp-accent) !important; }
  /* Login */
  .login-container { background: transparent !important; border: none !important; box-shadow: none !important; }
  .login-card { background: var(--fp-surface) !important; border-color: var(--fp-border) !important; color: var(--fp-text) !important; }
  .app-subtitle { color: var(--fp-muted) !important; }

  /* Footer and borders */
  .feeds-container, .feeds-header, .feeds-list, .feed-item, .stat-card, .form-section, .add-feed-form, .filters-section, .filter-stats { border-color: var(--fp-border) !important; }
  .divider, .form-label { color: var(--fp-text) !important; }

  /* Feed specifics */
  .feed-favicon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important; /* 深色背景下略加重 */
    padding: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }
  .feed-title a { color: var(--fp-text) !important; }
  .feed-title a:hover { color: var(--fp-accent) !important; }
  /* Feed notes icon (info) visibility in dark mode */
  .feed-notes { color: rgba(219, 234, 255, 0.75) !important; opacity: 0.9 !important; }
  .feed-notes:hover,
  .feed-notes.bubble-active { color: rgba(219, 234, 255, 0.95) !important; opacity: 1 !important; }
  .feed-notes i { color: currentColor !important; }
  .page-title { color: var(--fp-accent) !important; }
  .page-subtitle { color: var(--fp-muted) !important; }
  .empty-state i { color: var(--fp-border) !important; }
  .empty-state h5 { color: var(--fp-text) !important; }
  .empty-state p { color: var(--fp-muted) !important; }

  /* Outline buttons */
  .btn-outline-primary { border-color: var(--fp-accent) !important; color: var(--fp-accent) !important; background: transparent !important; }
  .btn-outline-success { border-color: var(--fp-success) !important; color: var(--fp-success) !important; background: transparent !important; }
  .btn-outline-warning { border-color: var(--fp-warning) !important; color: var(--fp-warning) !important; background: transparent !important; }
  .btn-outline-danger { border-color: var(--fp-danger) !important; color: var(--fp-danger) !important; background: transparent !important; }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active { background: var(--fp-accent) !important; color: #ffffff !important; border-color: var(--fp-accent) !important; }
  .btn-outline-success:hover,
  .btn-outline-success:focus,
  .btn-outline-success:active { background: var(--fp-success) !important; color: #ffffff !important; border-color: var(--fp-success) !important; }
  .btn-outline-warning:hover,
  .btn-outline-warning:focus,
  .btn-outline-warning:active { background: var(--fp-warning) !important; color: #ffffff !important; border-color: var(--fp-warning) !important; }
  .btn-outline-danger:hover,
  .btn-outline-danger:focus,
  .btn-outline-danger:active { background: var(--fp-danger) !important; color: #ffffff !important; border-color: var(--fp-danger) !important; }

  /* Link buttons / close icon */
  .btn-link { color: var(--fp-accent) !important; }
  .btn-link:hover, .btn-link:focus { color: #77baff !important; }
  .btn-close { filter: invert(1) grayscale(100%); opacity: 0.8; }
  .btn-close:hover { opacity: 1; }

  /* Focus rings */
  .btn:focus-visible { box-shadow: 0 0 0 3px rgba(78,161,255,0.25), 0 0 0 6px rgba(78,161,255,0.35) !important; }

  /* 16. Alerts/Toasts */
  .alert { 
    background: rgba(20, 24, 32, 0.92) !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  }
  /* Position-fixed toast should not override variant backgrounds */
  .alert.position-fixed { 
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; 
  }
  /* Variant toasts – keep colored semantics on dark */
  .alert-success { background: rgba(16, 57, 41, 0.92) !important; color: #b6f3d0 !important; border-color: rgba(31, 97, 67, 0.8) !important; }
  .alert-warning { background: rgba(82, 60, 12, 0.92) !important; color: #ffe3a3 !important; border-color: rgba(133, 89, 18, 0.8) !important; }
  .alert-danger { background: rgba(83, 24, 24, 0.92) !important; color: #ffbfc0 !important; border-color: rgba(139, 39, 39, 0.8) !important; }
  .alert-info { background: rgba(17, 37, 78, 0.92) !important; color: #c2d9ff !important; border-color: rgba(44, 82, 154, 0.8) !important; }
  .alert .btn-close { filter: invert(1) grayscale(100%); opacity: 0.8; }
  /* Webpush subscription card */
  .webpush-subscription-card { background: var(--fp-surface) !important; border-color: var(--fp-border) !important; }
  .webpush-subscription-card:hover { border-color: var(--fp-border) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important; }
  .webpush-devices-list { background: var(--fp-surface-2) !important; border-color: var(--fp-border) !important; }
  .webpush-device-card { background: var(--fp-surface) !important; border-color: var(--fp-border) !important; }
  .webpush-device-card .card-title { color: var(--fp-text) !important; }
  .webpush-device-card .text-muted { color: var(--fp-muted) !important; }

  /* Toggle rows (global + inside .form-section) */
  .toggle-row { background: var(--fp-surface) !important; border: 1px solid var(--fp-border) !important; }
  .toggle-row:hover { background: #141a24 !important; }
  .toggle-label { color: var(--fp-text) !important; }
  .toggle-description { color: var(--fp-muted) !important; }
  .toggle-switch { background: #2a3345 !important; }
  .toggle-switch.active { background: var(--fp-accent) !important; }
  .toggle-switch::before { background: #0e121b !important; box-shadow: none !important; }

  /* Avatar upload container */
  .avatar-upload-container { background: var(--fp-surface-2) !important; border-color: var(--fp-border) !important; }
  .avatar-preview { background: #0e121b !important; border-color: var(--fp-border) !important; }
  .avatar-placeholder { color: var(--fp-muted) !important; }

  /* Logout confirm container */
  #logoutConfirmContainer {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.35) !important;
    backdrop-filter: none !important;
  }
  #logoutConfirmContainer .logout-confirm-title { color: var(--fp-text) !important; }
  #logoutConfirmContainer .logout-confirm-buttons { gap: 8px; }
  #logoutConfirmContainer .logout-confirm-btn {
    background: transparent !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: 8px;
  }
  #logoutConfirmContainer .logout-confirm-btn:hover,
  #logoutConfirmContainer .logout-confirm-btn:focus {
    background: #141a24 !important;
    color: var(--fp-text) !important;
    border-color: var(--fp-border) !important;
  }
  #logoutConfirmContainer .logout-confirm-btn.logout-btn-danger {
    background: var(--fp-danger) !important;
    border-color: var(--fp-danger) !important;
    color: #ffffff !important;
  }
  #logoutConfirmContainer .logout-confirm-btn.logout-btn-danger:hover,
  #logoutConfirmContainer .logout-confirm-btn.logout-btn-danger:focus {
    background: #e05858 !important;
    border-color: #e05858 !important;
    color: #ffffff !important;
  }
  #logoutConfirmContainer .logout-confirm-btn.logout-btn-cancel {
    background: transparent !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-border) !important;
  }

  /* Notes bubble (Things-style tooltip) */
  .notes-bubble { background: var(--fp-surface) !important; color: var(--fp-text) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.3) !important; }
  .notes-bubble::before { border-bottom-color: var(--fp-surface) !important; filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.35)) !important; }
  .notes-bubble.flipped::before { border-top-color: var(--fp-surface) !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)) !important; }

  /* Toggle row hover (deduped above) */

  /* Badges/chips variants - restore color-coded variants in dark mode */
  .feed-badge {
    background: #151923 !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-border) !important;
  }
  .feed-badge.priority {
    background: #1b2431 !important;
    color: #c1c8d6 !important;
    border-color: var(--fp-border) !important;
  }
  .feed-badge.priority.high {
    background: rgba(220, 38, 38, 0.18) !important;
    color: var(--fp-danger) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
  }
  .feed-badge.priority.quiet {
    background: rgba(245, 158, 11, 0.18) !important;
    color: var(--fp-accent) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
  }
  .feed-badge.priority.silent {
    background: #2a3345 !important;
    color: #a5afc1 !important;
    border-color: #2a3345 !important;
  }
  .feed-badge.interval {
    background: #1b2431 !important;
    color: #a5afc1 !important;
    border-color: var(--fp-border) !important;
  }
  .feed-badge.translate {
    background: rgba(59, 130, 246, 0.18) !important; /* blue tint */
    color: #9cc6ff !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
  }
  .feed-badge.last-update {
    background: rgba(139, 92, 246, 0.18) !important; /* purple tint */
    color: #c4b5fd !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
  }

  /* Thumbnails and media */
  .notification-thumbnail,
  .preview-media-image,
  .notification-media-item.image,
  .notification-media-item.video,
  .notification-video-thumbnail {
    border: 1px solid var(--fp-border) !important;
    background: #141a24 !important;
  }
  .date-separator-text {
    background: #0e121b !important;
    color: var(--fp-muted) !important;
    border: 1px solid var(--fp-border) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
    backdrop-filter: none !important;
  }
  .date-separator::before {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(42, 51, 69, 0.5) 20%,
      rgba(42, 51, 69, 0.8) 40%,
      rgba(42, 51, 69, 0.8) 60%,
      rgba(42, 51, 69, 0.5) 80%,
      transparent 100%
    ) !important;
  }
  
  /* Prefer content fade using mask instead of overlay color to eliminate color blocks */
  .notification-description-content.collapsed {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  .notification-description-content.collapsed::after {
    content: '';
    height: 0 !important;
    background: none !important;
    pointer-events: none !important;
  }
  
  /* Ensure loading state uses page background (wins over earlier rules) */
  .timeline-loading { 
    background: var(--fp-bg) !important; 
    border: none !important; 
    box-shadow: none !important; 
  }
}