/* Scoped page styles loaded after the shared theme layer. */

/* Account pages */
body.aitopic .notes-shell,
body.aitopic .favorites-page,
body.aitopic .submissions-shell {
  width: min(1240px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 42px 28px 72px !important;
  color: var(--sx-ink) !important;
}

body.aitopic .notes-toolbar,
body.aitopic .submissions-head {
  margin-bottom: 28px;
}

body.aitopic .notes-toolbar h1,
body.aitopic .submissions-head h1,
body.aitopic .page-header h1 {
  color: var(--sx-ink) !important;
  letter-spacing: 0;
}

body.aitopic .notes-toolbar p,
body.aitopic .submissions-head p,
body.aitopic .favorites-stats {
  color: var(--sx-muted) !important;
}

body.aitopic .notes-button,
body.aitopic .submission-button {
  background: var(--sx-orange) !important;
  border: 1px solid var(--sx-orange) !important;
  border-radius: 10px;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(232, 111, 29, .18);
}

body.aitopic .notes-button:hover,
body.aitopic .submission-button:hover {
  background: var(--sx-coral) !important;
  border-color: var(--sx-coral) !important;
  color: #fff !important;
}

body.aitopic .notes-button.subtle,
body.aitopic .submission-button.subtle {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: none;
}

body.aitopic .notes-button.subtle:hover,
body.aitopic .submission-button.subtle:hover {
  background: var(--sx-surface-3) !important;
  border-color: var(--sx-orange) !important;
  color: var(--sx-orange) !important;
}

body.aitopic .notes-layout {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 30px;
}

body.aitopic .notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

body.aitopic .notes-card {
  min-height: 220px;
  padding: 22px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.aitopic .notes-card:hover {
  transform: translateY(-2px);
  border-color: var(--sx-orange) !important;
  box-shadow: 0 12px 28px rgba(23, 32, 42, .14);
}

body.aitopic .notes-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

body.aitopic .notes-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

body.aitopic .notes-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}

body.aitopic .notes-card-actions a,
body.aitopic .notes-card-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 8px;
}

body.aitopic .notes-card-actions a:hover,
body.aitopic .notes-card-actions button:hover {
  background: var(--sx-surface-2) !important;
}

body.aitopic .notes-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

body.aitopic .notes-sidebar {
  border-color: var(--sx-line) !important;
}

body.aitopic .notes-sidebar h2,
body.aitopic .notes-sidebar a,
body.aitopic .notes-count {
  color: var(--sx-muted) !important;
}

body.aitopic .notes-sidebar a:hover,
body.aitopic .notes-sidebar a.active {
  background: var(--sx-surface-2) !important;
  color: var(--sx-orange) !important;
}

body.aitopic .notes-card,
body.aitopic .notes-empty,
body.aitopic .notes-detail,
body.aitopic .notes-modal-card,
body.aitopic .submission-row,
body.aitopic .submission-dialog,
body.aitopic .author-gate-card {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 14px;
  color: var(--sx-ink-2) !important;
  box-shadow: var(--sx-shadow);
}

body.aitopic .notes-card h2,
body.aitopic .notes-card h2 a,
body.aitopic .notes-detail h1,
body.aitopic .submission-row h3,
body.aitopic .submission-dialog-header h2 {
  color: var(--sx-ink) !important;
}

body.aitopic .notes-card-meta,
body.aitopic .notes-detail-meta,
body.aitopic .submission-meta,
body.aitopic .submission-field small,
body.aitopic .submission-upload-status {
  color: var(--sx-muted) !important;
}

body.aitopic .notes-card-excerpt,
body.aitopic .notes-detail-content,
body.aitopic .submission-prompt {
  color: var(--sx-ink-2) !important;
}

body.aitopic .notes-card-actions,
body.aitopic .submission-row .submission-actions {
  border-color: var(--sx-line) !important;
}

body.aitopic .notes-card-actions a,
body.aitopic .submission-meta a,
body.aitopic .notes-card h2 a:hover {
  color: var(--sx-orange) !important;
}

body.aitopic .notes-field input,
body.aitopic .notes-field textarea,
body.aitopic .notes-filter,
body.aitopic .submission-filter select,
body.aitopic .submission-field input,
body.aitopic .submission-field select,
body.aitopic .submission-field textarea,
body.aitopic .author-gate-form textarea {
  background: var(--sx-control) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink) !important;
}

body.aitopic .notes-field input:focus,
body.aitopic .notes-field textarea:focus,
body.aitopic .notes-filter:focus,
body.aitopic .submission-field input:focus,
body.aitopic .submission-field select:focus,
body.aitopic .submission-field textarea:focus,
body.aitopic .author-gate-form textarea:focus {
  border-color: var(--sx-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 111, 29, .16) !important;
  outline: 0 !important;
}

body.aitopic .notes-modal,
body.aitopic .submission-modal {
  background: rgba(9, 12, 15, .7) !important;
}

body.aitopic .notes-modal-close,
body.aitopic .submission-close {
  color: var(--sx-muted) !important;
}

body.aitopic .notes-modal-close:hover,
body.aitopic .submission-close:hover {
  color: var(--sx-orange) !important;
}

body.aitopic .submission-toolbar {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  border-radius: 12px;
}

body.aitopic .submission-filter,
body.aitopic .submission-field,
body.aitopic .author-gate-form label {
  color: var(--sx-ink-2) !important;
}

body.aitopic .submission-status {
  background: var(--sx-surface-2) !important;
  color: var(--sx-muted) !important;
}

body.aitopic .submission-status.status-1 {
  background: rgba(41, 156, 91, .16) !important;
  color: #49c77a !important;
}

body.aitopic .submission-status.status-2 {
  background: rgba(205, 70, 61, .16) !important;
  color: #ed8179 !important;
}

body.aitopic .notes-error,
body.aitopic .submission-error {
  background: rgba(205, 70, 61, .12) !important;
  border-color: rgba(205, 70, 61, .34) !important;
  color: #e8847c !important;
}

body.aitopic .author-gate {
  min-height: 58vh;
  padding: 58px 28px !important;
  background: var(--sx-bg) !important;
  color: var(--sx-ink) !important;
}

body.aitopic .author-gate-card {
  width: min(680px, 100%);
  padding: 36px;
}

body.aitopic .author-gate h1 {
  color: var(--sx-ink) !important;
}

body.aitopic .author-gate-lead,
body.aitopic .author-gate-note {
  color: var(--sx-ink-2) !important;
}

body.aitopic .author-gate-status {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-muted) !important;
}

body.aitopic .author-gate-status strong,
body.aitopic .author-gate-kicker,
body.aitopic .author-gate-note strong {
  color: var(--sx-orange) !important;
}

body.aitopic .author-gate-message.good {
  background: rgba(41, 156, 91, .16) !important;
  color: #49c77a !important;
}

body.aitopic .author-gate-message.bad {
  background: rgba(205, 70, 61, .16) !important;
  color: #ed8179 !important;
}

body.aitopic .author-gate-form button {
  background: var(--sx-orange) !important;
  color: #fff !important;
}

/* Favorites page cards and filters. */
body.aitopic .favorites-page {
  padding-top: 38px !important;
}

body.aitopic .favorites-page .page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}

body.aitopic .favorite-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 32px;
}

body.aitopic .favorite-filter-btn {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}

body.aitopic .favorite-filter-btn:hover,
body.aitopic .favorite-filter-btn.active {
  background: var(--sx-orange) !important;
  border-color: var(--sx-orange) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(232, 111, 29, .18);
}

body.aitopic .favorites-page .app-card,
body.aitopic .favorites-page .news-card {
  background: var(--sx-surface) !important;
  border-color: var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}

body.aitopic .favorites-page .favorite-panel .app-grid,
body.aitopic .favorites-page .favorite-panel .news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 0;
}

body.aitopic .favorites-page .favorite-panel .app-card,
body.aitopic .favorites-page .favorite-panel .news-card {
  min-width: 0;
}

body.aitopic .favorites-page .app-icon,
body.aitopic .favorites-page .app-icon-news {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.aitopic .favorites-page .app-icon img,
body.aitopic .favorites-page .app-icon-news img {
  display: block;
  border-radius: 18px;
}

body.aitopic .favorites-page .app-card:hover,
body.aitopic .favorites-page .news-card:hover {
  border-color: var(--sx-orange) !important;
}

body.aitopic .favorites-page .app-title,
body.aitopic .favorites-page .app-title a,
body.aitopic .favorites-page .news-title,
body.aitopic .favorites-page .news-title a,
body.aitopic .favorites-page .prompt-fav-title {
  color: var(--sx-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.aitopic .favorites-page .app-category,
body.aitopic .favorites-page .favorite-time,
body.aitopic .favorites-page .news-meta,
body.aitopic .favorites-page .news-desc,
body.aitopic .favorites-page .prompt-fav-bottom {
  color: var(--sx-muted) !important;
}

body.aitopic .favorites-page .news-actions {
  border-color: var(--sx-line) !important;
}

body.aitopic .favorites-page .news-remove-btn {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}

body.aitopic .favorites-page .news-remove-btn:hover {
  background: rgba(205, 70, 61, .14) !important;
  border-color: rgba(205, 70, 61, .4) !important;
  color: #ed8179 !important;
}

body.aitopic .empty-sub-favorites,
body.aitopic .empty-favorites {
  background: var(--sx-surface) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}

body.aitopic .favorites-page .prompt-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

body.aitopic .favorites-page .prompt-fav-card {
  min-width: 0;
  background: var(--sx-surface) !important;
  border-color: var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}

/* Single app detail page. This is intentionally scoped so sidebar rules cannot
   leak into news, prompt or account pages. */
body.aitopic .app-detail-section {
  background: var(--sx-bg) !important;
  color: var(--sx-ink) !important;
  padding: 34px 0 72px !important;
}

body.aitopic .app-detail-section > .container {
  max-width: 1280px;
  padding-left: 30px;
  padding-right: 30px;
}

body.aitopic .app-detail-section .app-detail-header {
  align-items: center;
  gap: 34px;
  margin-bottom: 32px;
  padding: 40px 44px !important;
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 18px;
  box-shadow: var(--sx-shadow);
}

body.aitopic .app-detail-section .app-icon-large {
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.aitopic .app-detail-section .app-icon-large img {
  display: block;
  width: 128px;
  height: 128px;
  background: transparent !important;
  border-radius: 28px;
  box-shadow: 0 10px 24px rgba(23, 32, 42, .14);
}

body.aitopic .app-detail-section .app-detail-info {
  min-width: 0;
  margin-top: 0;
  background: transparent !important;
  color: var(--sx-ink-2) !important;
}

body.aitopic .app-detail-section .app-detail-info .app-title,
body.aitopic .app-detail-section .content-section h2,
body.aitopic .app-detail-section .content-section h3 {
  color: var(--sx-ink) !important;
}

body.aitopic .app-detail-section .two-column-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  max-width: none;
}

body.aitopic .app-detail-section .app-content {
  max-width: none;
  margin: 0;
  padding: 42px 46px !important;
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 18px;
  box-shadow: var(--sx-shadow);
  color: var(--sx-ink-2) !important;
}

body.aitopic .app-detail-section .content-section {
  margin-bottom: 44px;
  padding: 0;
  background: transparent !important;
  color: var(--sx-ink-2) !important;
}

body.aitopic .app-detail-section .software-info-grid {
  margin-bottom: 36px;
  padding: 24px !important;
  background: var(--sx-surface-2) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 14px;
}

body.aitopic .app-detail-section .info-item {
  background: transparent !important;
  border-color: var(--sx-line) !important;
}

body.aitopic .app-detail-section .info-label,
body.aitopic .app-detail-section .info-value,
body.aitopic .app-detail-section .content,
body.aitopic .app-detail-section .content p,
body.aitopic .app-detail-section .content li {
  color: var(--sx-ink-2) !important;
}

body.aitopic .app-detail-section .content h2,
body.aitopic .app-detail-section .content h3,
body.aitopic .app-detail-section .content h4,
body.aitopic .app-detail-section .content strong {
  color: var(--sx-ink) !important;
}

body.aitopic .app-detail-section .right-sidebar .sidebar-widget {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 16px;
  box-shadow: var(--sx-shadow);
  color: var(--sx-ink-2) !important;
}

body.aitopic .app-detail-section .right-sidebar .widget-title {
  margin-bottom: 16px;
  padding-bottom: 12px;
  background: transparent !important;
  border-bottom: 1px solid var(--sx-line) !important;
  color: var(--sx-ink) !important;
}

body.aitopic .app-detail-section .right-sidebar .news-item {
  margin-bottom: 8px;
  padding: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.aitopic .app-detail-section .right-sidebar .news-link {
  border-bottom: 1px solid var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}

body.aitopic .app-detail-section .right-sidebar .news-title {
  color: var(--sx-ink) !important;
}

body.aitopic .app-detail-section .right-sidebar .news-time {
  color: var(--sx-muted) !important;
}

body.aitopic .app-detail-section .right-sidebar .latest-card,
body.aitopic .app-detail-section .right-sidebar .popular-card {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
}

/* Submission list and editor surfaces. Keep the plugin's inline defaults from
   restoring white controls after the shared stylesheet has loaded. */
body.aitopic .submission-list {
  display: grid;
  gap: 16px;
}

body.aitopic .submission-row {
  padding: 22px 24px;
}

body.aitopic .submission-row .submission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.aitopic .submission-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
  padding: 28px;
}

body.aitopic .submission-dialog-header {
  border-color: var(--sx-line) !important;
}

body.aitopic .submission-grid,
body.aitopic .notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.aitopic .submission-field.full,
body.aitopic .notes-field.full {
  grid-column: 1 / -1;
}

body.aitopic .submission-field > span,
body.aitopic .notes-field > span {
  color: var(--sx-ink-2) !important;
}

body.aitopic .submission-upload {
  background: var(--sx-control) !important;
  border-color: var(--sx-line) !important;
}

body.aitopic .submission-upload img {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
}

@media (max-width: 992px) {
  body.aitopic .app-detail-section .two-column-layout {
    grid-template-columns: 1fr;
  }

  body.aitopic .app-detail-section .right-sidebar {
    display: none;
  }
}

@media (max-width: 700px) {
  body.aitopic .notes-shell,
  body.aitopic .favorites-page,
  body.aitopic .submissions-shell {
    padding: 28px 16px 52px !important;
  }

  body.aitopic .notes-layout {
    grid-template-columns: 1fr;
  }

  body.aitopic .favorites-page .page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  body.aitopic .favorites-page .favorite-panel .app-grid,
  body.aitopic .favorites-page .favorite-panel .news-grid,
  body.aitopic .favorites-page .prompt-masonry,
  body.aitopic .submission-grid,
  body.aitopic .notes-grid {
    grid-template-columns: 1fr;
  }

  body.aitopic .submission-field.full,
  body.aitopic .notes-field.full {
    grid-column: auto;
  }

  body.aitopic .notes-card,
  body.aitopic .submission-row {
    min-height: 0;
  }

  body.aitopic .author-gate {
    padding: 34px 16px !important;
  }

  body.aitopic .author-gate-card,
  body.aitopic .submission-dialog,
  body.aitopic .notes-modal-card {
    padding: 24px !important;
  }

  body.aitopic .app-detail-section > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.aitopic .app-detail-section .app-detail-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 22px !important;
  }

  body.aitopic .app-detail-section .app-content {
    padding: 28px 22px !important;
  }
}

/* Final page cleanup: one background layer per page, consistent footer spacing,
   and a stable rating geometry across desktop and mobile. */
html, body { min-height: 100%; }
body.aitopic {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
body.aitopic > .sx-footer,
body.aitopic .sx-footer {
  margin-top: auto;
  flex-shrink: 0;
}
body.aitopic > section,
body.aitopic > main,
body.aitopic .news-list-section,
body.aitopic .news-article-section,
body.aitopic .flash-article-section,
body.aitopic .newsflash-page,
body.aitopic .ai-hall,
body.aitopic .app-gallery-section,
body.aitopic .notes-shell,
body.aitopic .favorites-page,
body.aitopic .submissions-shell {
  padding-bottom: 88px !important;
}
body.aitopic .author-gate {
  padding-bottom: 124px !important;
  margin-bottom: 0 !important;
}

/* Prompts in Favorites are image-led masonry items, so the panel and card must
   not add a second opaque surface behind the thumbnail. */
.aitopic .favorites-page .favorite-panel-prompt,
.aitopic .favorites-page .favorite-panel-prompt .prompt-masonry,
.aitopic .favorites-page .prompt-fav-card,
.aitopic .favorites-page .prompt-fav-thumb-wrap {
  background: transparent !important;
  box-shadow: none !important;
}
.aitopic .favorites-page .favorite-panel-prompt .prompt-masonry {
  display: block;
  min-height: 0;
  padding: 0;
}
.aitopic .favorites-page .prompt-fav-thumb-wrap {
  padding: 0 !important;
  height: auto !important;
}
.aitopic .favorites-page .prompt-fav-thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.aitopic .favorites-page .prompt-fav-card {
  padding: 0 !important;
  border: 0 !important;
  height: max-content !important;
}
.aitopic .favorites-page .prompt-fav-thumb-link { line-height: 0 !important; }
.aitopic .favorites-page .prompt-fav-overlay { line-height: normal; }

/* Keep each visible rating star in its own fixed hit target. */
.aitopic #ratingplus_container .rating-box {
  align-items: center;
}
.aitopic #ratingplus_container .stars-container {
  position: relative !important;
  display: block !important;
  width: 140px !important;
  height: 28px !important;
  line-height: 28px !important;
  overflow: visible !important;
  flex: 0 0 140px !important;
}
.aitopic #ratingplus_container .stars-interactive {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100% !important;
  height: 28px !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.aitopic #ratingplus_container .stars-interactive .star {
  width: auto !important;
  height: 28px !important;
  line-height: 28px !important;
  flex: none !important;
  font-size: 0 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--sx-line) !important;
  text-shadow: none !important;
}
.aitopic #ratingplus_container .stars-interactive .star:hover { transform: none !important; }
.aitopic #ratingplus_container .stars-interactive .star::before {
  content: "★" !important;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 28px !important;
  line-height: 28px !important;
  background: linear-gradient(to right, var(--rp-star) var(--star-fill, 0%), var(--rp-star-soft) var(--star-fill, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aitopic #ratingplus_container .stars-interactive .star::after { content: none !important; }

/* AI Hall of Fame has legacy inline colors; map every card layer to the same
   theme tokens, including the duplicate body class used by the template. */
.ai-hall,
body.aitopic .ai-hall {
  background: var(--sx-bg) !important;
  color: var(--sx-ink) !important;
}
.ai-hall .page-header h1,
body.aitopic .ai-hall .page-header h1 {
  background: none !important;
  color: var(--sx-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.ai-hall .page-header p,
.ai-hall .card-meta,
.ai-hall .card-intro,
body.aitopic .ai-hall .page-header p,
body.aitopic .ai-hall .card-meta,
body.aitopic .ai-hall .card-intro { color: var(--sx-ink-2) !important; }
.ai-hall .hall-card,
.ai-hall .card-content,
.ai-hall .card-body,
.ai-hall .card-footer,
body.aitopic .ai-hall .hall-card,
body.aitopic .ai-hall .card-content,
body.aitopic .ai-hall .card-body,
body.aitopic .ai-hall .card-footer {
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}
.ai-hall .card-image,
body.aitopic .ai-hall .card-image { background: var(--sx-surface-2) !important; }
.ai-hall .card-title a,
body.aitopic .ai-hall .card-title a { color: var(--sx-ink) !important; }
.ai-hall .hall-category a,
body.aitopic .ai-hall .hall-category a { color: var(--sx-orange) !important; }
.ai-hall .hall-time,
.ai-hall .hall-views,
.ai-hall .tag,
body.aitopic .ai-hall .hall-time,
body.aitopic .ai-hall .hall-views,
body.aitopic .ai-hall .tag {
  background: var(--sx-surface-2) !important;
  color: var(--sx-muted) !important;
  border-color: var(--sx-line) !important;
}
.ai-hall .read-more-btn,
body.aitopic .ai-hall .read-more-btn {
  background: var(--sx-orange) !important;
  color: #fff !important;
}

@media (max-width: 700px) {
  body.aitopic > section,
  body.aitopic > main,
  body.aitopic .news-list-section,
  body.aitopic .news-article-section,
  body.aitopic .flash-article-section,
  body.aitopic .newsflash-page,
  body.aitopic .ai-hall,
  body.aitopic .app-gallery-section,
  body.aitopic .notes-shell,
  body.aitopic .favorites-page,
  body.aitopic .submissions-shell { padding-bottom: 68px !important; }
  body.aitopic .author-gate { padding-bottom: 104px !important; }
  .aitopic #ratingplus_container .stars-container {
    width: 130px !important;
    height: 26px !important;
    flex-basis: 130px !important;
  }
  .aitopic #ratingplus_container .stars-interactive { height: 26px !important; line-height: 26px !important; }
  .aitopic #ratingplus_container .stars-interactive .star { height: 26px !important; line-height: 26px !important; }
  .aitopic #ratingplus_container .stars-interactive .star::before { font-size: 26px !important; line-height: 26px !important; }
}

/* Final feedback modal tokens. app-store.css has legacy light-only values;
   keep the modal on the shared surface hierarchy in both themes. */
body.aitopic .feedback-modal {
  background: var(--sx-overlay) !important;
  padding: 16px;
  overflow-y: auto;
}
body.aitopic .feedback-modal-content {
  width: min(500px, 100%) !important;
  max-height: min(720px, calc(100vh - 32px));
  overflow-y: auto;
  background: var(--sx-surface) !important;
  color: var(--sx-ink) !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}
body.aitopic .feedback-modal-header {
  border-bottom-color: var(--sx-line) !important;
}
body.aitopic .feedback-modal-title,
body.aitopic .feedback-form label {
  color: var(--sx-ink) !important;
}
body.aitopic .feedback-close {
  color: var(--sx-muted) !important;
}
body.aitopic .feedback-close:hover,
body.aitopic .feedback-close:focus-visible {
  color: var(--sx-ink) !important;
  background: var(--sx-surface-2) !important;
}
body.aitopic .feedback-form input,
body.aitopic .feedback-form textarea {
  background: var(--sx-control) !important;
  color: var(--sx-ink) !important;
  border-color: var(--sx-line) !important;
  box-shadow: none !important;
}
body.aitopic .feedback-form input:focus,
body.aitopic .feedback-form textarea:focus {
  border-color: var(--sx-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 111, 29, .14) !important;
}
body.aitopic .feedback-form input::placeholder,
body.aitopic .feedback-form textarea::placeholder {
  color: var(--sx-muted) !important;
}
body.aitopic .feedback-submit {
  background: var(--sx-orange) !important;
  color: #fff !important;
  border: 1px solid var(--sx-orange) !important;
}
body.aitopic .feedback-submit:hover,
body.aitopic .feedback-submit:focus-visible {
  background: var(--sx-coral) !important;
  border-color: var(--sx-coral) !important;
}
body.aitopic .feedback-submit:disabled {
  background: var(--sx-surface-3) !important;
  color: var(--sx-muted) !important;
  border-color: var(--sx-line) !important;
}
body.aitopic .btn-feedback-icon {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: none !important;
}
body.aitopic .btn-feedback-icon:hover,
body.aitopic .btn-feedback-icon:focus-visible {
  background: var(--sx-surface-3) !important;
  color: var(--sx-orange) !important;
  border-color: var(--sx-orange) !important;
}
body.aitopic .btn-feedback-icon img { opacity: .78; }
html[data-theme="dark"] body.aitopic .btn-feedback-icon img {
  filter: invert(1) brightness(.86);
}

/* Normal news uses a single readable article surface in light mode. */
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 18px;
  box-shadow: var(--sx-shadow) !important;
  padding: 32px 40px 42px !important;
}
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .article-header {
  background: transparent !important;
  border-bottom-color: var(--sx-line) !important;
}
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .news-content,
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .article-body {
  background: transparent !important;
}
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .article-title {
  color: var(--sx-ink) !important;
  background: transparent !important;
}
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .article-body,
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .article-body p,
html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single .article-body li {
  color: var(--sx-ink-2) !important;
}

/* Give the actual article body its own reading inset. The outer app-content
   keeps the original card layout; only long-form text receives extra room. */
body.aitopic .app-detail-section .content-section > .content {
  margin: 0 !important;
  padding: 10px 12px 6px !important;
  color: var(--sx-ink-2) !important;
  line-height: 1.86;
  overflow-wrap: anywhere;
}
body.aitopic .app-detail-section .content-section > .content > :first-child {
  margin-top: 0 !important;
}
body.aitopic .app-detail-section .content-section > .content > :last-child {
  margin-bottom: 0 !important;
}
body.aitopic .app-detail-section .content-section > .content p,
body.aitopic .app-detail-section .content-section > .content ul,
body.aitopic .app-detail-section .content-section > .content ol,
body.aitopic .app-detail-section .content-section > .content blockquote,
body.aitopic .app-detail-section .content-section > .content pre,
body.aitopic .app-detail-section .content-section > .content table {
  max-width: 100%;
}
body.aitopic .app-detail-section .content-section > .content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Keep legacy content widgets from introducing a second bright panel or line. */
body.aitopic .content-section > .content,
body.aitopic .article-body,
body.aitopic .news-content,
body.aitopic .flash-article-body {
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic hr,
html[data-theme="dark"] body.aitopic .content-section,
html[data-theme="dark"] body.aitopic .article-header,
html[data-theme="dark"] body.aitopic .news-list-header,
html[data-theme="dark"] body.aitopic .newsflash-header,
html[data-theme="dark"] body.aitopic .comments-section,
html[data-theme="dark"] body.aitopic .comment-form,
html[data-theme="dark"] body.aitopic .comment-item {
  border-color: var(--sx-line) !important;
}

/* Align the header controls and keep tool details readable in dark mode. */
body.aitopic .sx-header-actions .language-toggle,
body.aitopic .sx-header-actions .toggle-search,
body.aitopic .sx-header-actions .sx-theme-toggle {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
body.aitopic .sx-header-actions .sx-theme-toggle i {
  font-size: 18px;
}
html[data-theme="dark"] body.aitopic .app-detail-section .right-sidebar .popular-widget .popular-title {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .app-detail-section .right-sidebar .popular-widget .popular-developer {
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .app-detail-section .info-value .fa-apple {
  color: #dce3e9 !important;
}
html[data-theme="dark"] body.aitopic .app-detail-section .comment-form .form-textarea,
html[data-theme="dark"] body.aitopic .app-detail-section .comment-form .form-input {
  border-color: var(--sx-line) !important;
}

/* Captcha artwork can be pale; clip it inside one quiet frame. */
html[data-theme="dark"] body.aitopic .verifycode-img-container {
  border-color: var(--sx-line) !important;
  overflow: hidden;
}
html[data-theme="dark"] body.aitopic .verifycode-img-container .verifycode-img {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The legacy comment textarea and captcha styles use a bright fixed border
   with !important. Keep both controls on the shared, low-contrast line. */
body.aitopic #txaArticle,
body.aitopic #txaArticle:focus,
body.aitopic .verifycode-img-container,
body.aitopic .verifycode-img {
  border-color: var(--sx-line) !important;
}
body.aitopic #txaArticle {
  background: var(--sx-control) !important;
  color: var(--sx-ink) !important;
}

/* AI Hall cards need one filled surface. The content sections inherit that
   surface from the card instead of painting three more identical layers. */
body.aitopic .ai-hall .hall-card .card-content,
body.aitopic .ai-hall .hall-card .card-body,
body.aitopic .ai-hall .hall-card .card-footer {
  background: transparent !important;
}

/* The prompt card is already the surface; avoid another filled panel around
   its copy area and empty payment placeholder. */
html[data-theme="dark"] body.aitopic .prompt-single-page .prompt-copy-head,
html[data-theme="dark"] body.aitopic .prompt-single-page .prompt-copy-body,
html[data-theme="dark"] body.aitopic .prompt-single-page .prompt-single-hero {
  background: transparent !important;
}
html[data-theme="dark"] body.aitopic .prompt-single-page .prompt-single-hero::after {
  content: none;
}
html[data-theme="dark"] body.aitopic .prompt-single-page .prompt-copy-card {
  box-shadow: none !important;
}
html[data-theme="dark"] body.aitopic .prompt-single-page .payment-section {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The legacy celebrity/news template has no dedicated article surface. Its
   empty payment slot must not create a second dark panel below the article. */
html[data-theme="dark"] body.aitopic .news-single-article,
html[data-theme="dark"] body.aitopic .news-single-article .payment-section,
html[data-theme="dark"] body.aitopic .news-sidebar {
  background: transparent !important;
}
html[data-theme="dark"] body.aitopic .news-single-article .payment-section {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Question and use-case detail pages still ship with light-only component
   styles. Rebind every painted layer to the shared dark palette. */
html[data-theme="dark"] body.aitopic .question-single-page,
html[data-theme="dark"] body.aitopic .cases-single-page {
  background: var(--sx-bg) !important;
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] body.aitopic .question-single-card,
html[data-theme="dark"] body.aitopic .question-related-box,
html[data-theme="dark"] body.aitopic .question-comments-box,
html[data-theme="dark"] body.aitopic .cases-single-card,
html[data-theme="dark"] body.aitopic .cases-comments-box,
html[data-theme="dark"] body.aitopic .cases-sidebar-widget {
  background: var(--sx-surface) !important;
  border-color: var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}
html[data-theme="dark"] body.aitopic .question-single-hero,
html[data-theme="dark"] body.aitopic .cases-single-hero {
  background: var(--sx-surface-2) !important;
  background-image: none !important;
  border-bottom-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .question-single-title,
html[data-theme="dark"] body.aitopic .question-single-content h2,
html[data-theme="dark"] body.aitopic .question-single-content h3,
html[data-theme="dark"] body.aitopic .question-single-content h4,
html[data-theme="dark"] body.aitopic .related-title,
html[data-theme="dark"] body.aitopic .question-related-text,
html[data-theme="dark"] body.aitopic .cases-single-title,
html[data-theme="dark"] body.aitopic .cases-single-content h2,
html[data-theme="dark"] body.aitopic .cases-single-content h3,
html[data-theme="dark"] body.aitopic .cases-single-content h4,
html[data-theme="dark"] body.aitopic .cases-sidebar-widget .widget-title,
html[data-theme="dark"] body.aitopic .cases-sidebar-title,
html[data-theme="dark"] body.aitopic .cases-info-row .value {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .question-single-content,
html[data-theme="dark"] body.aitopic .question-single-content p,
html[data-theme="dark"] body.aitopic .question-single-content li,
html[data-theme="dark"] body.aitopic .cases-single-content,
html[data-theme="dark"] body.aitopic .cases-single-content p,
html[data-theme="dark"] body.aitopic .cases-single-content li,
html[data-theme="dark"] body.aitopic .question-related-box,
html[data-theme="dark"] body.aitopic .question-comments-box,
html[data-theme="dark"] body.aitopic .cases-comments-box {
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] body.aitopic .question-single-meta,
html[data-theme="dark"] body.aitopic .question-time,
html[data-theme="dark"] body.aitopic .cases-single-meta,
html[data-theme="dark"] body.aitopic .cases-time,
html[data-theme="dark"] body.aitopic .cases-info-row .label,
html[data-theme="dark"] body.aitopic .cases-sidebar-views,
html[data-theme="dark"] body.aitopic .question-related-box .no-content,
html[data-theme="dark"] body.aitopic .cases-sidebar-widget .no-content {
  color: var(--sx-muted) !important;
}
html[data-theme="dark"] body.aitopic .question-single-meta a,
html[data-theme="dark"] body.aitopic .cases-single-meta a,
html[data-theme="dark"] body.aitopic .cases-info-row .value a {
  color: var(--sx-amber) !important;
}
html[data-theme="dark"] body.aitopic .question-single-content blockquote,
html[data-theme="dark"] body.aitopic .cases-single-content blockquote {
  background: var(--sx-surface-3) !important;
  color: var(--sx-ink-2) !important;
  border-left-color: var(--sx-orange) !important;
}
html[data-theme="dark"] body.aitopic .question-single-tags,
html[data-theme="dark"] body.aitopic .cases-single-tags,
html[data-theme="dark"] body.aitopic .cases-info-favorite-box,
html[data-theme="dark"] body.aitopic .question-related-link,
html[data-theme="dark"] body.aitopic .cases-sidebar-link,
html[data-theme="dark"] body.aitopic .cases-sidebar-widget .widget-title {
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .question-single-tag,
html[data-theme="dark"] body.aitopic .cases-single-tag {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] body.aitopic .question-single-tag:hover,
html[data-theme="dark"] body.aitopic .cases-single-tag:hover {
  background: var(--sx-surface-3) !important;
  border-color: var(--sx-orange) !important;
  color: var(--sx-amber) !important;
}
html[data-theme="dark"] body.aitopic .question-related-link:hover .question-related-text,
html[data-theme="dark"] body.aitopic .cases-sidebar-link:hover .cases-sidebar-title {
  color: var(--sx-amber) !important;
}
html[data-theme="dark"] body.aitopic .answer-label {
  background: rgba(242, 122, 26, .14) !important;
  color: var(--sx-amber) !important;
}
html[data-theme="dark"] body.aitopic .question-single-content pre,
html[data-theme="dark"] body.aitopic .cases-single-content pre,
html[data-theme="dark"] body.aitopic .question-single-content code,
html[data-theme="dark"] body.aitopic .cases-single-content code {
  background: var(--sx-code) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .question-single-content table,
html[data-theme="dark"] body.aitopic .cases-single-content table,
html[data-theme="dark"] body.aitopic .question-single-content th,
html[data-theme="dark"] body.aitopic .question-single-content td,
html[data-theme="dark"] body.aitopic .cases-single-content th,
html[data-theme="dark"] body.aitopic .cases-single-content td {
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] body.aitopic .question-single-content th,
html[data-theme="dark"] body.aitopic .cases-single-content th {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .question-single-content li::marker,
html[data-theme="dark"] body.aitopic .cases-single-content li::marker {
  color: var(--sx-muted) !important;
}
html[data-theme="dark"] body.aitopic .question-favorite-icon-btn,
html[data-theme="dark"] body.aitopic .cases-favorite-btn {
  border: 1px solid var(--sx-line) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
}

/* Software request modal: keep it above the sticky shell and inside the
   viewport. The inline display:flex used by the plugin still controls open. */
body.aitopic #wishModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  background: var(--sx-overlay) !important;
}
body.aitopic #wishModal .modal-content {
  position: relative !important;
  z-index: 100001 !important;
  width: min(600px, 100%) !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  overflow-y: auto !important;
  background: var(--sx-surface) !important;
  color: var(--sx-ink) !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}
body.aitopic #wishModal .modal-header {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink) !important;
  border-bottom-color: var(--sx-line) !important;
}
body.aitopic #wishModal .modal-header h3,
body.aitopic #wishModal .modal-body label {
  color: var(--sx-ink) !important;
}
body.aitopic #wishModal .modal-body {
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
}
body.aitopic #wishModal .form-control {
  background: var(--sx-control) !important;
  color: var(--sx-ink) !important;
  border-color: var(--sx-line) !important;
  box-shadow: none !important;
}
body.aitopic #wishModal .form-control:focus {
  border-color: var(--sx-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 111, 29, .14) !important;
}
body.aitopic #wishModal .form-control::placeholder {
  color: var(--sx-muted) !important;
}
body.aitopic #wishModal .modal-footer {
  background: var(--sx-surface-2) !important;
  border-top-color: var(--sx-line) !important;
}
body.aitopic #wishModal .btn-secondary {
  background: var(--sx-surface-3) !important;
  color: var(--sx-ink-2) !important;
  border: 1px solid var(--sx-line) !important;
}
body.aitopic #wishModal .btn-primary {
  background: var(--sx-orange) !important;
  border: 1px solid var(--sx-orange) !important;
  color: #fff !important;
}
body.aitopic #wishModal .btn-secondary:hover,
body.aitopic #wishModal .btn-secondary:focus-visible {
  background: var(--sx-surface-3) !important;
  color: var(--sx-ink) !important;
  border-color: var(--sx-orange) !important;
}
body.aitopic #wishModal .btn-primary:hover,
body.aitopic #wishModal .btn-primary:focus-visible {
  background: var(--sx-coral) !important;
  border-color: var(--sx-coral) !important;
}

@media (max-width: 700px) {
  body.aitopic #wishModal {
    align-items: flex-start !important;
    padding: 12px !important;
  }
  body.aitopic #wishModal .modal-content {
    max-height: calc(100dvh - 24px) !important;
  }
}

@media (max-width: 700px) {
  body.aitopic .feedback-modal-content {
    padding: 22px !important;
  }
  html:not([data-theme="dark"]) body.aitopic .news-article-section .news-article-single {
    padding: 24px 22px 32px !important;
    border-radius: 14px;
  }
  body.aitopic .app-detail-section .content-section > .content {
    padding: 8px 4px 4px !important;
  }
}

/* Content imported from external editors can carry inline white backgrounds
   and dark text. Remove those paint layers inside question/use-case bodies so
   the article remains one continuous theme surface in both modes. */
body.aitopic .question-single-content > *,
body.aitopic .question-single-content > * *,
body.aitopic .cases-single-content > *,
body.aitopic .cases-single-content > * * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--sx-ink-2) !important;
}
body.aitopic .question-single-content h2,
body.aitopic .question-single-content h3,
body.aitopic .question-single-content h4,
body.aitopic .cases-single-content h2,
body.aitopic .cases-single-content h3,
body.aitopic .cases-single-content h4 {
  color: var(--sx-ink) !important;
}
body.aitopic .question-single-content h2 *,
body.aitopic .question-single-content h3 *,
body.aitopic .question-single-content h4 *,
body.aitopic .cases-single-content h2 *,
body.aitopic .cases-single-content h3 *,
body.aitopic .cases-single-content h4 * {
  color: var(--sx-ink) !important;
}
body.aitopic .question-single-content a,
body.aitopic .cases-single-content a {
  color: var(--sx-orange) !important;
}
body.aitopic .question-single-content a *,
body.aitopic .cases-single-content a * {
  color: inherit !important;
}
body.aitopic .question-single-content strong,
body.aitopic .question-single-content b,
body.aitopic .cases-single-content strong,
body.aitopic .cases-single-content b {
  color: var(--sx-ink) !important;
}
body.aitopic .question-single-content blockquote,
body.aitopic .cases-single-content blockquote {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}
body.aitopic .question-single-content pre,
body.aitopic .question-single-content code,
body.aitopic .cases-single-content pre,
body.aitopic .cases-single-content code {
  background: var(--sx-code) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}
body.aitopic .question-single-content th,
body.aitopic .cases-single-content th {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink) !important;
}
body.aitopic .question-single-content td,
body.aitopic .cases-single-content td,
body.aitopic .question-single-content th,
body.aitopic .cases-single-content th {
  border-color: var(--sx-line) !important;
}

/* Keep the cases listing itself transparent; only individual case cards are
   meant to carry a filled surface. */
body.aitopic .cases-page .cases-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Search results still contain legacy light-only inline CSS. Keep both the
   AI News list and the normal tool grid on the same dark surface hierarchy. */
html[data-theme="dark"] body.aitopic .app-gallery-section .filter-status,
html[data-theme="dark"] body.aitopic .app-gallery-section .related-categories {
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .filter-status {
  border-left: 4px solid var(--sx-orange) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .filter-status strong,
html[data-theme="dark"] body.aitopic .app-gallery-section .related-categories-title {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .filter-status a {
  color: var(--sx-amber) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .related-cat-item {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
  border: 1px solid var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .related-cat-item:hover {
  background: var(--sx-surface-3) !important;
  color: var(--sx-amber) !important;
  border-color: var(--sx-orange) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .related-cat-item.active {
  background: var(--sx-orange) !important;
  color: #fff !important;
  border-color: var(--sx-orange) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .related-cat-item span {
  color: inherit !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-item {
  border-bottom-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-title,
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-title a {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-title a:hover {
  color: var(--sx-amber) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-description {
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-meta,
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-date {
  color: var(--sx-muted) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .ainews-category {
  background: var(--sx-surface-2) !important;
  color: var(--sx-amber) !important;
  border: 1px solid var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .custom-pagebar .page-link {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .custom-pagebar .page-link:hover {
  background: var(--sx-surface-3) !important;
  color: var(--sx-amber) !important;
  border-color: var(--sx-orange) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .custom-pagebar .page-link.current {
  background: var(--sx-orange) !important;
  color: #fff !important;
  border-color: var(--sx-orange) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .custom-pagebar .page-link.disabled,
html[data-theme="dark"] body.aitopic .app-gallery-section .custom-pagebar .page-ellipsis {
  background: transparent !important;
  color: var(--sx-muted) !important;
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .no-results {
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: var(--sx-radius) !important;
}
html[data-theme="dark"] body.aitopic .app-gallery-section .no-results h3 {
  color: var(--sx-ink) !important;
}